/* =====================================================================
   OneBloc UI Kit - shared control styles (LOCKED v1.1 - modern refresh).
   Framework-agnostic. Drops into WebForms, React, or static pages exactly
   like datagrid.css. Everything is scoped under .ob-* so it never collides
   with an app's own global styles. Themed by the OneBloc brand tokens
   (--ob-*) with self-contained fallbacks.

   v1.1 look: soft-tinted icon badges (not loud fills), hairline borders,
   generous rounding, quiet shadows. Controls: OBNotify (toasts + confirm/
   alert dialogs) - OBValidate (forms).
   ===================================================================== */

:root {
  --_ob-font: var(--ob-font, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --_ob-card: var(--ob-card, #ffffff);
  --_ob-ink: var(--ob-ink, #14161F);
  --_ob-muted: var(--ob-muted, #6B7180);
  --_ob-faint: var(--ob-faint, #A6ABBA);
  --_ob-line: var(--ob-line, #EDEEF3);
  --_ob-ok: var(--ob-success, #0E9F6E);
  --_ob-ok-soft: var(--ob-success-soft, #E9F8F1);
  --_ob-bad: var(--ob-danger, #E5484D);
  --_ob-bad-soft: var(--ob-danger-soft, #FDECEC);
  --_ob-warn: var(--ob-warning, #C4841D);
  --_ob-warn-soft: var(--ob-warning-soft, #FCF3E4);
  --_ob-info: var(--ob-billing, #2563EB);
  --_ob-info-soft: #EAF1FF;
  --_ob-accent: var(--ob-accent, #6366F1);
  --_ob-r: var(--ob-r-control, 14px);
  --_ob-shadow: var(--ob-shadow-float, 0 12px 32px -8px rgba(20,22,31,.16), 0 4px 10px -4px rgba(20,22,31,.08));
}

/* ============================ NOTIFY: toasts ============================ */
.ob-toastwrap {
  position: fixed; top: 20px; right: 20px; z-index: 2147483000;
  display: flex; flex-direction: column; gap: 12px;
  width: min(392px, calc(100vw - 32px)); pointer-events: none;
  font-family: var(--_ob-font);
}
.ob-toastwrap.tl { right: auto; left: 20px; }
.ob-toastwrap.bl { top: auto; bottom: 20px; right: auto; left: 20px; }
.ob-toastwrap.br { top: auto; bottom: 20px; }
.ob-toastwrap.tc { left: 50%; right: auto; transform: translateX(-50%); align-items: center; }

.ob-toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--_ob-card); color: var(--_ob-ink);
  border: 1px solid var(--_ob-line);
  border-radius: 16px; box-shadow: var(--_ob-shadow);
  padding: 14px 15px 15px 14px;
  transform: translateX(24px); opacity: 0;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .3s;
}
.ob-toastwrap.tl .ob-toast, .ob-toastwrap.bl .ob-toast { transform: translateX(-24px); }
.ob-toast.in { transform: none; opacity: 1; }
.ob-toast.out { opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .18s, transform .18s; }

/* soft-tinted icon badge (the modern accent — carries the semantic colour) */
.ob-toast .ic { flex: 0 0 auto; width: 34px; height: 34px; padding: 7px; border-radius: 11px; }
.ob-toast .bd { flex: 1; min-width: 0; padding-top: 1px; }
.ob-toast .tt { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; margin: 0 0 2px; }
.ob-toast .ms { font-size: 12.5px; line-height: 1.5; color: var(--_ob-muted); overflow-wrap: anywhere; }
.ob-toast .ms strong { color: var(--_ob-ink); font-weight: 600; }
.ob-toast .act { margin-top: 10px; display: flex; gap: 8px; }
.ob-toast .act button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: 9px; border: 1px solid var(--_ob-line); background: #fff; color: var(--_ob-ink);
}
.ob-toast .act button.primary { background: var(--_ob-ink); color: #fff; border-color: var(--_ob-ink); }
.ob-toast .x {
  flex: 0 0 auto; cursor: pointer; border: 0; background: transparent; color: var(--_ob-faint);
  width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; margin: 1px -2px 0 0;
}
.ob-toast .x:hover { background: rgba(20,22,31,.05); color: var(--_ob-muted); }
.ob-toast .bar { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 3px; border-radius: 3px; transform-origin: left; opacity: .55; }

.ob-toast.ob-success .ic { color: var(--_ob-ok); background: var(--_ob-ok-soft); }
.ob-toast.ob-success .bar { background: var(--_ob-ok); }
.ob-toast.ob-error .ic { color: var(--_ob-bad); background: var(--_ob-bad-soft); }
.ob-toast.ob-error .bar { background: var(--_ob-bad); }
.ob-toast.ob-warn .ic { color: var(--_ob-warn); background: var(--_ob-warn-soft); }
.ob-toast.ob-warn .bar { background: var(--_ob-warn); }
.ob-toast.ob-info .ic { color: var(--_ob-info); background: var(--_ob-info-soft); }
.ob-toast.ob-info .bar { background: var(--_ob-info); }

/* ============================ NOTIFY: dialogs ============================ */
.ob-modal-scrim {
  position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: center; justify-content: center;
  background: rgba(20,22,31,.42); backdrop-filter: blur(3px); padding: 20px;
  opacity: 0; transition: opacity .18s; font-family: var(--_ob-font);
}
.ob-modal-scrim.in { opacity: 1; }
.ob-modal {
  background: var(--_ob-card); color: var(--_ob-ink); width: min(448px, 100%);
  border-radius: 20px; box-shadow: var(--_ob-shadow); overflow: hidden;
  transform: translateY(10px) scale(.975); transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.ob-modal-scrim.in .ob-modal { transform: none; }
.ob-modal .hd { display: flex; gap: 14px; align-items: flex-start; padding: 24px 24px 4px; }
.ob-modal .hd .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.ob-modal .hd .ic svg { width: 22px; height: 22px; }
.ob-modal.danger .hd .ic { background: var(--_ob-bad-soft); color: var(--_ob-bad); }
.ob-modal.warn .hd .ic { background: var(--_ob-warn-soft); color: var(--_ob-warn); }
.ob-modal.info .hd .ic, .ob-modal.confirm .hd .ic { background: var(--_ob-info-soft); color: var(--_ob-info); }
.ob-modal.success .hd .ic { background: var(--_ob-ok-soft); color: var(--_ob-ok); }
.ob-modal .hd h3 { margin: 5px 0 0; font-size: 16.5px; font-weight: 720; letter-spacing: -.02em; }
.ob-modal .bd { padding: 10px 24px 4px 82px; font-size: 13.5px; line-height: 1.6; color: var(--_ob-muted); }
.ob-modal .bd.nohd { padding-left: 24px; }
.ob-modal .ft { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 24px 22px; }
.ob-modal .ft button { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 11px 19px; border-radius: 11px; border: 1px solid var(--_ob-line); background: #fff; color: var(--_ob-ink); transition: filter .12s, border-color .12s, background .12s; }
.ob-modal .ft button:hover { border-color: #DADCE7; background: #FAFAFC; }
.ob-modal .ft button.primary { border: 0; background: var(--_ob-accent); color: #fff; }
.ob-modal.danger .ft button.primary { background: var(--_ob-bad); }
.ob-modal .ft button.primary:hover { filter: brightness(.95); background: var(--_ob-accent); }
.ob-modal.danger .ft button.primary:hover { background: var(--_ob-bad); }

/* ============================ VALIDATE ============================ */
.ob-field-err {
  display: none; align-items: center; gap: 5px;
  font-family: var(--_ob-font); font-size: 11.5px; font-weight: 500; color: var(--_ob-bad);
  margin-top: 6px;
}
.ob-field-err.show { display: flex; }
.ob-field-err svg { flex: 0 0 auto; width: 13px; height: 13px; }
.ob-invalid,
.ob-invalid:focus {
  border-color: var(--_ob-bad) !important;
  box-shadow: 0 0 0 3px var(--_ob-bad-soft) !important;
}

/* ============================ LINE EDITOR (OBLines) ============================ */
.obl { width: 100%; border-collapse: collapse; font-family: var(--_ob-font); font-size: 13px; }
.obl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--_ob-faint); padding: 0 8px 8px; border-bottom: 1px solid var(--_ob-line); }
.obl th.obl-num, .obl td.obl-num { text-align: right; }
.obl td { padding: 5px 8px; border-bottom: 1px solid var(--_ob-line); vertical-align: middle; }
.obl .obl-in { width: 100%; padding: 8px 9px; border: 1px solid var(--_ob-line); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--_ob-ink); background: #fff; outline: none; }
.obl .obl-in:focus { border-color: var(--_ob-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_ob-accent) 14%, transparent); }
.obl input.obl-num { text-align: right; }
.obl td.obl-amt { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--_ob-ink); white-space: nowrap; }
.obl .obl-x { border: 0; background: transparent; color: var(--_ob-faint); font-size: 18px; line-height: 1; cursor: pointer; width: 26px; height: 26px; border-radius: 7px; }
.obl .obl-x:hover { background: var(--_ob-bad-soft); color: var(--_ob-bad); }
.obl-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.obl-add { border: 1px dashed #CBD0DC; background: #fff; color: var(--_ob-muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.obl-add:hover { border-color: var(--_ob-accent); color: var(--_ob-accent); }
.obl-tot { display: flex; gap: 18px; align-items: center; font-size: 12.5px; color: var(--_ob-muted); }
.obl-tot b { color: var(--_ob-ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
.obl-tot .obl-ok { color: var(--_ob-ok); font-weight: 700; }
.obl-tot .obl-bad { color: var(--_ob-bad); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ob-toast, .ob-toast.out, .ob-modal, .ob-modal-scrim { transition: opacity .01s !important; transform: none !important; }
  .ob-toast .bar { display: none; }
}