/* ===========================================================================
   FTSPL Accounts Portal — enterprise design system
   ---------------------------------------------------------------------------
   Loaded AFTER Bootstrap 4 / AdminLTE so it restyles them in place. That means
   the forty existing view templates inherit the new look without being
   rewritten, while new modules get the richer components defined further down.

   Lives in assets_app/ rather than assets/, because assets/ is a junction to
   the original portal and must not be written to.
   ======================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink-900:#0d1b2a; --ink-800:#16263a; --ink-700:#243447; --ink-600:#3a4d63;
  --ink-500:#5b7186; --ink-400:#8296a9; --ink-300:#b3c1cd; --ink-200:#d9e1e8;
  --ink-100:#eef2f6; --ink-050:#f6f8fa; --paper:#ffffff;

  --brand-700:#0b4f8a; --brand-600:#0e63ad; --brand-500:#1177cc;
  --brand-400:#3f95dc; --brand-100:#e3f0fb; --brand-050:#f1f7fd;

  --teal-600:#0f766e; --teal-100:#d6f2ef;
  --green-600:#15803d; --green-500:#1ca350; --green-100:#dcf5e5;
  --amber-600:#b45309; --amber-500:#e08a09; --amber-100:#fdf0d5;
  --red-600:#b91c1c;  --red-500:#dc2f2f;  --red-100:#fbe3e3;
  --violet-600:#6d28d9; --violet-100:#ece4fb;
  --slate-600:#475569; --slate-100:#e9edf2;

  --ok:var(--green-500); --warn:var(--amber-500); --bad:var(--red-500);

  --radius:10px; --radius-sm:7px; --radius-lg:16px;
  --shadow-1:0 1px 2px rgba(13,27,42,.06), 0 1px 3px rgba(13,27,42,.05);
  --shadow-2:0 2px 6px rgba(13,27,42,.07), 0 6px 18px rgba(13,27,42,.06);
  --shadow-3:0 10px 34px rgba(13,27,42,.13);

  /* 4.6rem, not a round number of our own: AdminLTE's own stylesheet pulls
     .content-wrapper, .main-header and .main-footer in to exactly 4.6rem when
     <body> carries sidebar-collapse, with !important and a stronger selector
     than ours. The strip has to be that wide or it covers the page. */
  --sidebar-w:252px; --sidebar-w-min:4.6rem; --topbar-h:58px;

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --bg:var(--ink-050); --surface:var(--paper); --surface-2:var(--ink-050);
  --line:var(--ink-200); --line-soft:var(--ink-100);
  --text:var(--ink-800); --text-dim:var(--ink-500); --text-faint:var(--ink-400);
}

[data-theme="dark"] {
  --bg:#0c141d; --surface:#131e2a; --surface-2:#0f1924;
  --line:#223243; --line-soft:#1a2733;
  --text:#dde6ef; --text-dim:#93a6b8; --text-faint:#6f8497;
  --paper:#131e2a;
  --ink-050:#0f1924; --ink-100:#1a2733; --ink-200:#223243;
  --brand-100:#12283c; --brand-050:#0f2233;
  --green-100:#0f2a1c; --amber-100:#2e2310; --red-100:#2e1616;
  --violet-100:#1f1833; --slate-100:#1a2733; --teal-100:#0d2624;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 8px rgba(0,0,0,.45);
  --shadow-3:0 12px 36px rgba(0,0,0,.55);
}

/* ------------------------------------------------------------------ base */
/*
 * The size of the whole interface, set in one place.
 *
 * Every measurement in this file — type, padding, icons, the sidebar, the
 * height of a row — is written in rem, which is a multiple of the root font
 * size. So changing that one number scales the entire portal in proportion
 * rather than shrinking the words and leaving the boxes around them where
 * they were. 90% is a tenth smaller than the browser's usual 16px: more of a
 * long table on a screen at once, still comfortably readable.
 *
 * Text fields on a phone are the deliberate exception further down: Safari
 * on iOS zooms the page whenever a field it is about to type into is under
 * 16px, so those stay at a flat 16px and are not scaled with the rest.
 */
html { font-size:90%; -webkit-text-size-adjust:100%; }

body, body.hold-transition, .wrapper {
  font-family:var(--font) !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-size:.875rem;          /* 12.6px at the 90% root — a tenth under the old 14px */
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6 { color:var(--text); font-weight:650; letter-spacing:-0.02em; margin:0 0 .5rem; }
h1{font-size:1.55rem} h2{font-size:1.3rem} h3{font-size:1.1rem}
h4{font-size:1rem} h5{font-size:.9rem} h6{font-size:.8rem}

a { color:var(--brand-600); text-decoration:none; }
a:hover { color:var(--brand-700); text-decoration:none; }
hr { border-color:var(--line-soft); }
code, .mono, kbd { font-family:var(--mono); font-size:.86em; }

::selection { background:var(--brand-100); color:var(--brand-700); }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--ink-300) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:var(--ink-300); border-radius:6px; }
*::-webkit-scrollbar-thumb:hover { background:var(--ink-400); }
*::-webkit-scrollbar-track { background:transparent; }

/* =====================================================================
   SHELL
   Mapped onto AdminLTE's own layout classes (.wrapper, .main-sidebar,
   .content-wrapper, .main-header) so the existing forty templates and
   AdminLTE's pushmenu JS keep working untouched.
   ================================================================== */

.wrapper { min-height:100vh; background:var(--bg); }

/* --- sidebar --- */
.main-sidebar, .app-side {
  width:var(--sidebar-w) !important;
  background:linear-gradient(178deg, var(--ink-900) 0%, #0a1622 100%) !important;
  color:#c8d5e1; position:fixed; top:0; left:0; bottom:0; z-index:1038;
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .18s ease, margin-left .18s ease;
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:none !important;
}

/*
 * Belt and braces. The sidebar no longer carries AdminLTE's class names (see
 * includes/menu.inc.php), so its Layout plugin cannot attach OverlayScrollbars
 * to it. If an older cached page or a legacy template ever does, these rules
 * make the injected os-* wrappers transparent instead of letting them push the
 * navigation out of the clipped column.
 */
.main-sidebar .sidebar { padding:0 !important; overflow:visible; }

.app-side .os-content-glue,
.app-side .os-resize-observer-host,
.app-side .os-size-auto-observer,
.app-side .os-scrollbar,
.app-side .os-scrollbar-corner { display:none !important; }

.app-side .os-padding,
.app-side .os-viewport,
.app-side .os-content {
  position:static !important; inset:auto !important;
  width:auto !important; height:auto !important; max-height:none !important;
  margin:0 !important; padding:0 !important;
  overflow:visible !important; transform:none !important;
}

/* --- content column --- */
.content-wrapper {
  margin-left:var(--sidebar-w) !important;
  background:var(--bg) !important;
  min-height:calc(100vh - var(--topbar-h) - 46px) !important; transition:margin-left .18s ease;
  display:flex; flex-direction:column;
  /* The page itself must never scroll sideways: wide tables scroll inside
     their own .table-wrap instead. min-width:0 lets the column shrink. */
  min-width:0; max-width:100%; overflow-x:hidden;
}
@supports (overflow:clip) { .content-wrapper { overflow-x:clip; } }
html, body { max-width:100%; overflow-x:hidden; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }
img, svg, video, canvas { max-width:100%; }
.content-wrapper img { height:auto; }
.content-wrapper > .content,
.content-wrapper > section.content { flex:1; padding:1.15rem 1.35rem 2.5rem !important; }
.content-header { display:none; }
.container-fluid { padding-left:0 !important; padding-right:0 !important; }

/* ---------------------------------------------------------------------
   Collapsed: a strip of icons that slides out over the page.

   "Toggle navigation" puts sidebar-collapse on <body>. The sidebar itself is
   .app-side, not AdminLTE's .main-sidebar (see includes/menu.inc.php), so it
   used to keep its full 252px while AdminLTE pulled the content column in to
   4.6rem — the menu then sat on top of the left 180px of every screen.

   Nothing here is display:none'd. The names stay in the page, and a screen
   reader still reads them; they are clipped off the right-hand edge of the
   strip by .app-side's own overflow:hidden and slide back into view when the
   strip is hovered or anything inside it takes focus. The strip widens OVER
   the page: the content column keeps its 4.6rem margin, so nothing reflows. */
body.sidebar-collapse .main-sidebar,
body.sidebar-collapse .app-side { width:var(--sidebar-w-min) !important; }
body.sidebar-collapse .content-wrapper { margin-left:var(--sidebar-w-min) !important; }

.app-shell { display:flex; min-height:100vh; }

.app-side__brand {
  height:var(--topbar-h); display:flex; align-items:center; gap:.6rem;
  padding:0 1rem; border-bottom:1px solid rgba(255,255,255,.07);
  flex:0 0 var(--topbar-h); transition:padding .18s ease; overflow:hidden;
}
.app-side__mark {
  width:32px; height:32px; border-radius:9px; flex:0 0 32px;
  background:linear-gradient(135deg, var(--brand-400), var(--brand-700));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:.813rem;
  letter-spacing:-.04em; box-shadow:0 2px 10px rgba(17,119,204,.45);
}
.app-side__name { font-weight:680; color:#fff; font-size:.9rem; letter-spacing:-.02em; white-space:nowrap; }
.app-side__sub  { font-size:.66rem; color:#7d93a8; letter-spacing:.09em; text-transform:uppercase; margin-top:-2px; }

.app-side__scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:.65rem 0 1.4rem; }

.nav-group { margin-top:.9rem; }
.nav-group__label {
  font-size:.69rem; text-transform:uppercase; letter-spacing:.12em;
  color:#63798d; padding:0 1.05rem .35rem; font-weight:650;
}

/* Groups that fold. Six names and the two everyday links are all that show
   until a group is opened; the one holding the current page is always open. */
.nav-group { margin-top:.15rem; }
.nav-group--flat { margin-top:0; padding-bottom:.45rem; margin-bottom:.35rem; border-bottom:1px solid rgba(255,255,255,.07); }
.nav-group__head {
  display:flex; align-items:center; gap:.5rem; width:100%;
  padding:.62rem 1.05rem; background:none; border:0; cursor:pointer; text-align:left;
  color:#8fa5b9; font-size:.74rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase;
  transition:color .12s, background .12s;
}
.nav-group__head:hover { color:#fff; background:rgba(255,255,255,.04); }
.nav-group__head:focus-visible { outline:2px solid var(--brand-400); outline-offset:-2px; }
.nav-group.is-open > .nav-group__head { color:#dbe6f0; }
.nav-group__caret { margin-left:auto; font-size:.62rem; opacity:.65; transition:transform .18s ease; }
.nav-group.is-open > .nav-group__head .nav-group__caret { transform:rotate(180deg); }
.nav-group__dot { width:7px; height:7px; border-radius:50%; background:var(--red-500); flex:0 0 7px; }
.nav-group.is-open > .nav-group__head .nav-group__dot { display:none; }
.nav-group__items { display:none; padding-bottom:.35rem; }
.nav-group.is-open > .nav-group__items,
.nav-group--flat > .nav-group__items { display:block; }

/* Icons-only sidebar: every module stays reachable, the group names go. */
body.sidebar-collapse .nav-group__head { display:none; }
body.sidebar-collapse .nav-group__items { display:block; padding-bottom:0; }
body.sidebar-collapse .nav-group { margin-top:0; padding:.3rem 0; border-bottom:1px solid rgba(255,255,255,.07); }

@media (min-width:992px) {
  /* the strip: one centred icon per line, the name folded away beside it */
  body.sidebar-collapse .nav-link-x { padding-inline:1.61rem .4rem; gap:0; }
  body.sidebar-collapse .app-side__brand { padding:0 0 0 1.3rem; gap:0; }

  /* Folded away, not display:none'd: the name is still in the page and still
     read out, and it slides back in with the strip. Each link also carries
     the name as a title, so a mouse gets a tooltip over the bare icon. */
  body.sidebar-collapse .nav-link-x > span:not(.nav-badge),
  body.sidebar-collapse .app-side__brandtext {
    max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
    transition:max-width .18s ease, opacity .12s ease;
  }
  body.sidebar-collapse .app-side:hover .nav-link-x > span:not(.nav-badge),
  body.sidebar-collapse .app-side:focus-within .nav-link-x > span:not(.nav-badge) {
    max-width:190px; opacity:1; transition-delay:.04s;
  }
  body.sidebar-collapse .app-side:hover .nav-link-x,
  body.sidebar-collapse .app-side:focus-within .nav-link-x { gap:.68rem; }
  /* The brand keeps its badge while the menu is out: the top bar is drawn over
     that row, so its wording would only be half covered. */
  body.sidebar-collapse .nav-group:last-child { border-bottom:0; }
  body.sidebar-collapse .app-side__foot { opacity:0; }
  body.sidebar-collapse .nav-sub { display:none; }

  /* 73.6px is too narrow to give 9px of it to a scrollbar. */
  body.sidebar-collapse .app-side:not(:hover):not(:focus-within) .app-side__scroll { scrollbar-width:none; }
  body.sidebar-collapse .app-side:not(:hover):not(:focus-within) .app-side__scroll::-webkit-scrollbar { width:0; }

  /* the counts stay visible on the strip, as a compact chip over the icon */
  body.sidebar-collapse .nav-badge {
    position:absolute; top:.12rem; left:2.4rem; margin:0; z-index:1;
    font-size:.58rem; line-height:1.4; padding:0 .22rem; min-width:14px;
    max-width:27px; overflow:hidden; text-align:center;
    border:1.5px solid #0e1c2b;
  }

  /* Hovered, or holding the keyboard focus: the whole menu slides out over
     the page. It slides out UNDER the top bar (z-index below its 1030) — if
     it went over, the widened menu would cover "Toggle navigation" itself and
     a pointer on its way to that button would keep the menu open and land on
     the brand link instead. */
  body.sidebar-collapse .app-side:hover,
  body.sidebar-collapse .app-side:focus-within {
    width:var(--sidebar-w) !important; z-index:1029;
    box-shadow:var(--shadow-3) !important;
  }
  body.sidebar-collapse .app-side:hover .nav-link-x,
  body.sidebar-collapse .app-side:focus-within .nav-link-x { padding-inline:1.05rem; }
  body.sidebar-collapse .app-side:hover .app-side__foot,
  body.sidebar-collapse .app-side:focus-within .app-side__foot { opacity:1; }
  body.sidebar-collapse .app-side:hover .nav-badge,
  body.sidebar-collapse .app-side:focus-within .nav-badge {
    position:static; margin-left:auto; z-index:auto;
    font-size:.68rem; line-height:1.5; padding:.08rem .4rem;
    min-width:0; max-width:none; border:0;
  }
}

@media (max-width:991.98px) {
  body.sidebar-collapse .nav-group__head { display:flex; }
  body.sidebar-collapse .nav-group__items { display:none; padding-bottom:.35rem; }
  body.sidebar-collapse .nav-group.is-open > .nav-group__items,
  body.sidebar-collapse .nav-group--flat > .nav-group__items { display:block; }
  body.sidebar-collapse .nav-group { padding:0; border-bottom:0; }
  body.sidebar-collapse .nav-group--flat { padding-bottom:.45rem; border-bottom:1px solid rgba(255,255,255,.07); }
  .nav-group__head { padding-top:.78rem; padding-bottom:.78rem; font-size:.78rem; }
}

/* The pages inside a module, across the top of the page. */
.module-tabs {
  display:flex; gap:.3rem; margin:0 0 1rem; padding:.25rem; overflow-x:auto; scrollbar-width:none;
  background:var(--ink-100); border:1px solid var(--line); border-radius:12px; width:fit-content; max-width:100%;
}
.module-tabs::-webkit-scrollbar { display:none; }
.module-tabs a {
  flex:0 0 auto; padding:.38rem .8rem; border-radius:9px; font-size:.83rem; font-weight:560;
  color:var(--text-dim); white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem; min-height:34px;
}
.module-tabs a:hover { color:var(--text); text-decoration:none; background:rgba(127,127,127,.1); }
.module-tabs a.is-active { background:var(--surface); color:var(--brand-600); box-shadow:var(--shadow-1); }
[data-theme="dark"] .module-tabs a.is-active { background:var(--brand-600); color:#fff; box-shadow:none; }
[data-theme="dark"] .tabs-x a.is-active { color:var(--brand-400); border-bottom-color:var(--brand-400); }
.module-tabs__count { font-size:.68rem; font-weight:700; padding:.04rem .38rem; border-radius:20px; background:rgba(127,127,127,.18); color:var(--text-dim); }
.module-tabs__count.is-bad { background:var(--red-500); color:#fff; }
@media (max-width:575.98px) {
  .module-tabs { width:auto; margin-left:-.2rem; margin-right:-.2rem; }
  .module-tabs a { min-height:40px; padding-inline:.9rem; }
}
@media print { .module-tabs { display:none !important; } }

/* "New" in the top bar */
.top-new { display:inline-flex; align-items:center; gap:.35rem; border-radius:10px; height:36px; padding:0 .8rem; font-weight:600; }
.top-new__menu { min-width:240px; }
.top-new__menu .dropdown-item { padding:.5rem .9rem; font-size:.86rem; }
.top-new__menu .dropdown-item i { width:18px; text-align:center; }
@media (max-width:767.98px) { .top-new__label { display:none; } .top-new { width:36px; padding:0; justify-content:center; } }

.nav-link-x {
  display:flex; align-items:center; gap:.68rem;
  padding:.5rem 1.05rem; color:#bccbd8; font-size:.845rem;
  border-left:2.5px solid transparent; position:relative;
  transition:background .12s, color .12s, border-color .12s, padding .18s ease;
  white-space:nowrap;
}
.nav-link-x:hover { background:rgba(255,255,255,.055); color:#fff; text-decoration:none; }
.nav-link-x.is-active {
  background:linear-gradient(90deg, rgba(17,119,204,.26), rgba(17,119,204,.03));
  color:#fff; border-left-color:var(--brand-400); font-weight:560;
}
.nav-link-x i, .nav-link-x svg { width:17px; text-align:center; font-size:.92rem; opacity:.88; flex:0 0 17px; }
.nav-link-x.is-active i { opacity:1; color:var(--brand-400); }

.nav-badge {
  margin-left:auto; font-size:.68rem; font-weight:700; padding:.08rem .4rem;
  border-radius:20px; background:var(--red-500); color:#fff; line-height:1.5;
}
.nav-badge--muted { background:rgba(255,255,255,.14); color:#c8d5e1; }

.nav-sub { max-height:0; overflow:hidden; transition:max-height .2s ease; }
.nav-sub.is-open { max-height:520px; }
.nav-sub .nav-link-x { padding-left:2.6rem; font-size:.81rem; color:#9db0c2; }
.nav-sub .nav-link-x.is-active { color:#fff; }
.nav-caret { margin-left:auto; font-size:.68rem; transition:transform .18s; opacity:.6; }
.nav-parent.is-open .nav-caret { transform:rotate(90deg); }

.app-side__foot {
  border-top:1px solid rgba(255,255,255,.07); padding:.7rem 1.05rem;
  font-size:.7rem; color:#63798d; flex:0 0 auto;
  white-space:nowrap; transition:opacity .16s ease;
}

/* main column */
.app-main {
  flex:1; min-width:0; margin-left:var(--sidebar-w);
  display:flex; flex-direction:column; transition:margin .18s ease;
}

/* --- topbar (AdminLTE .main-header) --- */
.main-header, .app-top {
  height:var(--topbar-h); min-height:var(--topbar-h);
  background:var(--surface) !important; border:none !important;
  border-bottom:1px solid var(--line) !important;
  display:flex; align-items:center; gap:.85rem; padding:0 1.15rem !important;
  position:sticky; top:0; z-index:1030; box-shadow:none !important;
  /* Sits beside the fixed sidebar. It used to start at x=0, which put the
     menu button and the page title underneath the sidebar on every desktop. */
  margin-left:var(--sidebar-w) !important;
  transition:margin-left .18s ease;
  min-width:0;
}
body.sidebar-collapse .main-header, body.sidebar-collapse .app-top { margin-left:var(--sidebar-w-min) !important; }
.main-header .nav-link { color:var(--text-dim) !important; padding:.4rem .55rem !important; }
.main-header .nav-link:hover { color:var(--text) !important; }

.icon-btn {
  width:34px; height:34px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--text-dim); display:grid; place-items:center;
  cursor:pointer; transition:.12s; font-size:.95rem; flex:0 0 34px;
}
.icon-btn:hover { background:var(--ink-100); color:var(--text); }
.icon-btn { position:relative; }
/* The account button holds two things side by side; as a grid its little arrow dropped underneath the initials. */
.icon-btn--user { display:inline-flex; align-items:center; gap:.4rem; width:auto; flex:0 0 auto; padding:0 .3rem; }

/* One search box, not two: where a page has its own search above the table, the table's is put away. */
.filter-bar:has(input[type="text"], input[type="search"]) ~ .table-card .dataTables_filter { display:none; }
.icon-btn__badge {
  position:absolute; top:-3px; right:-5px; font-size:.67rem; padding:0 .3rem; min-width:17px;
  text-align:center; line-height:1.55; border:2px solid var(--surface); margin:0;
}
.alerts-menu { min-width:300px; max-width:calc(100vw - 20px); max-height:min(70vh, 520px); overflow-y:auto; }
.alerts-menu .dropdown-item { white-space:normal; }
.app-top .dropdown-menu { max-width:calc(100vw - 16px); }

.app-crumb { font-size:.8rem; color:var(--text-dim); display:flex; align-items:center; gap:.4rem; min-width:0; }
.app-crumb b { color:var(--text); font-weight:620; }
.app-crumb span { opacity:.45; }

.top-search { position:relative; margin-left:auto; }
.top-search input {
  height:34px; width:210px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); padding:0 .7rem 0 2rem; font-size:.82rem;
  color:var(--text); transition:.14s;
}
.top-search input:focus { outline:none; width:260px; border-color:var(--brand-400); background:var(--surface); box-shadow:0 0 0 3px var(--brand-100); }
.top-search i { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:.78rem; pointer-events:none; }

.avatar {
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:linear-gradient(135deg, var(--brand-500), var(--violet-600));
  color:#fff; display:grid; place-items:center; font-size:.74rem; font-weight:700;
}

.app-body { flex:1; padding:1.15rem 1.35rem 2.5rem; min-width:0; }

.page-head { display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.page-head__title { font-size:1.4rem; font-weight:680; letter-spacing:-.025em; margin:0; }
.page-head__sub { color:var(--text-dim); font-size:.845rem; margin-top:.12rem; }
.page-head__actions { margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }

/* =====================================================================
   CARDS & SURFACES  (also restyles AdminLTE .card)
   ================================================================== */

.card, .surface {
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-1) !important;
  margin-bottom:1.1rem;
}
.card-header {
  background:transparent !important; border-bottom:1px solid var(--line-soft) !important;
  padding:.8rem 1.05rem !important; display:flex; align-items:center; gap:.6rem;
  min-height:auto !important;
}
.card-title, .card-header h3 {
  font-size:.925rem !important; font-weight:650 !important; margin:0 !important;
  color:var(--text) !important; letter-spacing:-.015em;
}
.card-body { padding:1.05rem !important; }
.card-footer { background:var(--surface-2) !important; border-top:1px solid var(--line-soft) !important; padding:.7rem 1.05rem !important; }
.card-tools { margin-left:auto; }

.surface--flush { padding:0; }
.section-title {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-faint); font-weight:680; margin:1.4rem 0 .6rem;
}

/* =====================================================================
   KPI TILES
   ================================================================== */

.kpi-grid { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); margin-bottom:1.1rem; }
/* Balanced rows: Ui::kpiRow() tags the grid with its tile count so six tiles
   make one row of six (or two of three), never five and an orphan. */
@media (min-width:1200px) {
  .kpi-grid--n5 { grid-template-columns:repeat(5, minmax(0,1fr)); }
  .kpi-grid--n6 { grid-template-columns:repeat(6, minmax(0,1fr)); }
  .kpi-grid--n7, .kpi-grid--n8 { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (min-width:768px) and (max-width:1199.98px) {
  .kpi-grid--n5, .kpi-grid--n6 { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .kpi-grid--n4, .kpi-grid--n7, .kpi-grid--n8 { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (min-width:576px) and (max-width:767.98px) {
  .kpi-grid--n4, .kpi-grid--n7, .kpi-grid--n8 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kpi-grid--n3, .kpi-grid--n5, .kpi-grid--n6 { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.kpi {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem 1rem; position:relative; overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .14s, box-shadow .14s;
}
.kpi:hover { transform:translateY(-1px); box-shadow:var(--shadow-2); }
.kpi::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--brand-500); }
.kpi--ok::before   { background:var(--green-500); }
.kpi--warn::before { background:var(--amber-500); }
.kpi--bad::before  { background:var(--red-500); }
.kpi--violet::before { background:var(--violet-600); }
.kpi--teal::before { background:var(--teal-600); }

.kpi__label { font-size:.7rem; text-transform:uppercase; letter-spacing:.085em; color:var(--text-faint); font-weight:650; }
.kpi__value { font-size:clamp(1.15rem, 1.05rem + .55vw, 1.5rem); font-weight:700; letter-spacing:-.03em; margin:.22rem 0 .1rem; color:var(--text); line-height:1.15; overflow-wrap:anywhere; }
.kpi__value small { font-size:.82rem; font-weight:600; color:var(--text-dim); letter-spacing:0; }
.kpi__meta { font-size:.76rem; color:var(--text-dim); display:flex; align-items:center; gap:.32rem; flex-wrap:wrap; }
.kpi__delta { font-weight:650; }
.kpi__delta--up { color:var(--green-600); }
.kpi__delta--down { color:var(--red-600); }
.kpi__spark { position:absolute; right:.6rem; bottom:.5rem; opacity:.5; }

/* =====================================================================
   BADGES, PILLS, STATUS
   ================================================================== */

.pill {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.71rem; font-weight:650; padding:.16rem .52rem; border-radius:20px;
  background:var(--slate-100); color:var(--slate-600); white-space:nowrap;
  letter-spacing:.005em; line-height:1.5;
}
.pill--ok      { background:var(--green-100); color:var(--green-600); }
.pill--warn    { background:var(--amber-100); color:var(--amber-600); }
.pill--bad     { background:var(--red-100);   color:var(--red-600); }
.pill--info    { background:var(--brand-100); color:var(--brand-700); }
.pill--violet  { background:var(--violet-100); color:var(--violet-600); }
.pill--teal    { background:var(--teal-100);  color:var(--teal-600); }
.pill--muted   { background:var(--ink-100);   color:var(--text-dim); }
.pill__dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px; }

.health-dot { display:inline-block; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.health-dot--green{background:var(--green-500)} .health-dot--amber{background:var(--amber-500)} .health-dot--red{background:var(--red-500)}

/* AdminLTE badge overrides */
.badge { font-weight:650; border-radius:20px; padding:.22rem .55rem; font-size:.71rem; }

/* =====================================================================
   BUTTONS
   ================================================================== */

.btn {
  border-radius:8px !important; font-weight:600 !important; font-size:.825rem !important;
  padding:.42rem .85rem !important; border-width:1px !important;
  transition:.13s !important; letter-spacing:-.005em; box-shadow:none !important;
  display:inline-flex; align-items:center; gap:.4rem;
}
.btn:focus { box-shadow:0 0 0 3px var(--brand-100) !important; }
.btn-sm { padding:.28rem .6rem !important; font-size:.775rem !important; }
.btn-lg { padding:.58rem 1.15rem !important; font-size:.9rem !important; }

.btn-primary {
  background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#fff !important;
}
.btn-primary:hover { background:var(--brand-700) !important; border-color:var(--brand-700) !important; }

.btn-secondary, .btn-default {
  background:var(--surface) !important; border-color:var(--line) !important; color:var(--text) !important;
}
.btn-secondary:hover, .btn-default:hover { background:var(--ink-100) !important; border-color:var(--ink-300) !important; color:var(--text) !important; }

.btn-success { background:var(--green-600) !important; border-color:var(--green-600) !important; color:#fff !important; }
.btn-warning { background:var(--amber-600) !important; border-color:var(--amber-600) !important; color:#fff !important; }
.btn-danger  { background:var(--red-600)  !important; border-color:var(--red-600)  !important; color:#fff !important; }
.btn-info    { background:var(--teal-600) !important; border-color:var(--teal-600) !important; color:#fff !important; }
.btn-dark    { background:var(--ink-800)  !important; border-color:var(--ink-800)  !important; color:#fff !important; }

.btn-outline-primary { background:transparent !important; border-color:var(--brand-500) !important; color:var(--brand-600) !important; }
.btn-outline-primary:hover { background:var(--brand-600) !important; color:#fff !important; }

.btn-ghost { background:transparent !important; border-color:transparent !important; color:var(--text-dim) !important; }
.btn-ghost:hover { background:var(--ink-100) !important; color:var(--text) !important; }

.btn-group .btn { border-radius:0 !important; }
.btn-group .btn:first-child { border-top-left-radius:8px !important; border-bottom-left-radius:8px !important; }
.btn-group .btn:last-child  { border-top-right-radius:8px !important; border-bottom-right-radius:8px !important; }

/* =====================================================================
   FORMS
   ================================================================== */

label, .col-form-label { font-size:.79rem; font-weight:620; color:var(--text-dim); margin-bottom:.26rem; letter-spacing:.002em; }

.form-control, .custom-select, select.form-control, textarea.form-control, .select2-container--bootstrap4 .select2-selection {
  border-radius:8px !important; border:1px solid var(--line) !important;
  background:var(--surface) !important; color:var(--text) !important;
  font-size:.85rem !important; padding:.42rem .68rem !important;
  height:auto !important; min-height:36px !important;
  box-shadow:none !important; transition:.13s !important;
}
.form-control:focus, .custom-select:focus, .select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color:var(--brand-400) !important; box-shadow:0 0 0 3px var(--brand-100) !important;
}
/* Select2 (the searchable drop-down): the same box as every other field. Its
   text sits in a child with a line-height of its own, so the padding the rule
   above gives the box would make it a third taller than its neighbours. */
.select2-container--bootstrap4 .select2-selection--single { padding:0 !important; height:36px !important; position:relative; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height:34px !important; padding:0 1.9rem 0 .68rem !important; color:var(--text) !important; font-size:.85rem;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder { color:var(--text-faint) !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { position:absolute; top:0; right:.55rem; height:34px !important; width:16px; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { top:50% !important; }
.select2-container--bootstrap4 .select2-dropdown { border:1px solid var(--line) !important; border-radius:8px !important; overflow:hidden; box-shadow:var(--shadow-2); background:var(--surface); }
.select2-container--bootstrap4 .select2-results__option { font-size:.85rem; padding:.42rem .68rem; color:var(--text); }
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] { background:var(--brand-600) !important; color:#fff !important; }
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] { background:var(--ink-100); color:var(--text); }
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  border:1px solid var(--line) !important; border-radius:6px !important; background:var(--surface) !important; color:var(--text) !important; padding:.35rem .55rem;
}
.form-control::placeholder { color:var(--text-faint); }
.form-control:disabled, .form-control[readonly] { background:var(--ink-100) !important; color:var(--text-dim) !important; }
.form-control-sm { min-height:31px !important; font-size:.79rem !important; padding:.25rem .55rem !important; }

.input-group-text {
  border-radius:8px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text-dim); font-size:.8rem;
}
.form-group { margin-bottom:.95rem; }
.form-text, .help-block { font-size:.75rem; color:var(--text-faint); }
.is-invalid, .form-control.is-invalid { border-color:var(--red-500) !important; }
.invalid-feedback, .error { color:var(--red-600); font-size:.75rem; }

.field-req::after { content:"*"; color:var(--red-500); margin-left:.15rem; font-weight:700; }

/* Fields side by side inside a card: as many columns as fit, never narrower than is comfortable to type in. */
.form-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(150px,100%), 1fr)); gap:0 .9rem; align-items:start; }
.form-cols > * { min-width:0; }
.form-cols--wide { grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr)); }
.form-control.text-uppercase::placeholder { text-transform:none; font-family:var(--font); letter-spacing:0; }

/* One quiet line under a field: what it is for, or what was filled in for you. */
.form-hint { font-size:.74rem; line-height:1.4; color:var(--text-faint); margin-top:.3rem; }

/* Tick boxes with their sentence beside them, one under the other. */
.checks { display:grid; gap:.5rem; padding-top:.35rem; }
.check { display:flex; align-items:flex-start; gap:.55rem; margin:0; font-weight:500; color:var(--text); cursor:pointer; line-height:1.35; }
.check input[type="checkbox"], .check input[type="radio"] { width:17px; height:17px; flex:0 0 17px; margin:.08rem 0 0; accent-color:var(--brand-600); }
.invalid-feedback.d-block { margin-top:.3rem; font-weight:520; }
.invalid-feedback.d-block + .form-hint { display:none; }

/* filter bar */
.filter-bar {
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem .95rem; margin-bottom:1rem; box-shadow:var(--shadow-1);
}
.filter-bar .form-group { margin-bottom:0; }
.filter-bar label { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; }

/* =====================================================================
   TABLES
   ================================================================== */

.table { color:var(--text); margin-bottom:0; border-color:var(--line-soft); }
.table thead th {
  background:var(--surface-2) !important; color:var(--text-faint) !important;
  font-size:.7rem !important; text-transform:uppercase; letter-spacing:.07em;
  font-weight:680 !important; border-bottom:1px solid var(--line) !important;
  border-top:none !important; padding:.6rem .75rem !important; white-space:nowrap;
  vertical-align:middle !important;
}
.table tbody td {
  padding:.6rem .75rem !important; border-top:1px solid var(--line-soft) !important;
  font-size:.845rem; vertical-align:middle !important; color:var(--text);
}
.table tbody tr { transition:background .1s; }
.table tbody tr:hover { background:var(--brand-050); }
.table-striped tbody tr:nth-of-type(odd) { background:transparent; }
.table-striped tbody tr:nth-of-type(odd):hover { background:var(--brand-050); }
.table-sm tbody td, .table-sm thead th { padding:.4rem .6rem !important; }

/* Laptop widths: the sidebar takes 252px of a 1366px screen, and a wide register
   loses its last column — usually the action button — to a scrollbar. Tighter
   gutters between columns win most of that back without touching the type. */
@media (min-width:992px) and (max-width:1500px) {
  .table thead th, .table tbody td { padding-left:.5rem !important; padding-right:.5rem !important; }
  .table thead th:first-child, .table tbody td:first-child { padding-left:.8rem !important; }
  .table thead th:last-child,  .table tbody td:last-child  { padding-right:.8rem !important; }
}

.num { text-align:right; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.table .num { font-family:var(--font); }
.neg { color:var(--red-600); }
.pos { color:var(--green-600); }

.table-wrap { overflow-x:auto; border-radius:var(--radius); }
.table-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); margin-bottom:1.1rem; }
.table-card > .table-wrap > .table { margin:0; }

.row-link { cursor:pointer; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius:8px !important; border:1px solid var(--line) !important;
  background:var(--surface) !important; color:var(--text) !important;
  padding:.28rem .55rem !important; font-size:.8rem !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { font-size:.8rem; color:var(--text-dim); }
.page-link { border-radius:7px !important; margin:0 2px; border-color:var(--line) !important; color:var(--brand-600) !important; background:var(--surface) !important; font-size:.8rem; }
.page-item.active .page-link { background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#fff !important; }
.page-item.disabled .page-link { color:var(--text-faint) !important; }

/* =====================================================================
   EMPTY / LOADING STATES
   ================================================================== */

.empty {
  text-align:center; padding:2.6rem 1.2rem; color:var(--text-dim);
}
.empty__icon {
  width:50px; height:50px; border-radius:14px; margin:0 auto .75rem;
  background:var(--ink-100); display:grid; place-items:center;
  font-size:1.25rem; color:var(--text-faint);
}
.empty__title { font-weight:650; color:var(--text); margin-bottom:.22rem; font-size:.93rem; }
.empty__text { font-size:.83rem; max-width:30rem; margin:0 auto 1rem; }

/* =====================================================================
   PROGRESS
   ================================================================== */

.bar { height:6px; border-radius:20px; background:var(--ink-100); overflow:hidden; }
.bar__fill { height:100%; border-radius:20px; background:var(--brand-500); transition:width .3s; }
.bar__fill--ok{background:var(--green-500)} .bar__fill--warn{background:var(--amber-500)} .bar__fill--bad{background:var(--red-500)}
.bar--lg { height:9px; }

.progress { height:6px; border-radius:20px; background:var(--ink-100); }
.progress-bar { background:var(--brand-500); }

.meter { display:flex; align-items:center; gap:.5rem; }
.meter .bar { flex:1; min-width:56px; }
.meter__val { font-size:.76rem; font-weight:650; color:var(--text-dim); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }

/* =====================================================================
   TIMELINE
   ================================================================== */

.tl { position:relative; padding-left:1.4rem; }
.tl::before { content:""; position:absolute; left:5px; top:5px; bottom:5px; width:2px; background:var(--line); }
.tl__item { position:relative; padding-bottom:1.05rem; }
.tl__item::before {
  content:""; position:absolute; left:-1.4rem; top:4px; width:12px; height:12px;
  border-radius:50%; background:var(--surface); border:2.5px solid var(--brand-500);
}
.tl__item--ok::before   { border-color:var(--green-500); }
.tl__item--warn::before { border-color:var(--amber-500); }
.tl__item--bad::before  { border-color:var(--red-500); }
.tl__item--muted::before{ border-color:var(--ink-300); }
.tl__head { display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.tl__title { font-weight:620; font-size:.85rem; color:var(--text); }
.tl__time { font-size:.73rem; color:var(--text-faint); margin-left:auto; }
.tl__body { font-size:.82rem; color:var(--text-dim); margin-top:.15rem; }

/* The attendance register's per-day "Correct…" panel — a day's punches as a
   small timeline, plus the add-a-punch form, opened with <details> so it
   needs no script and works the same on a phone as on a desktop. */
.at-correct { min-width:15rem; }
.at-correct__panel { margin-top:.55rem; padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.at-correct__tl { margin-bottom:.2rem; }
.at-correct__add { border-top:1px dashed var(--line); padding-top:.55rem; margin-top:.3rem; }

/* =====================================================================
   TABS
   ================================================================== */

.tabs-x { display:flex; gap:.15rem; border-bottom:1px solid var(--line); margin-bottom:1.05rem; overflow-x:auto; }
.tabs-x a {
  padding:.55rem .85rem; font-size:.845rem; font-weight:600; color:var(--text-dim);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:.12s;
}
.tabs-x a:hover { color:var(--text); }
.tabs-x a.is-active { color:var(--brand-600); border-bottom-color:var(--brand-600); }
.tabs-x .count { font-size:.7rem; background:var(--ink-100); padding:.05rem .34rem; border-radius:20px; margin-left:.3rem; color:var(--text-dim); }

/* Parts of one screen or one form (built by FT.tabs from [data-tabs] > [data-tab]).
   Until the script has run only the first part shows, so nothing jumps. */
[data-tabs] > [data-tab] { display:none; }
[data-tabs]:not([data-tabs-ready]) > [data-tab]:first-of-type,
[data-tabs] > [data-tab].is-active { display:block; }
[data-tabs] > [data-tab] > :last-child { margin-bottom:0; }

.ftabs {
  display:flex; gap:.1rem; border-bottom:1px solid var(--line); margin:0 0 1.05rem; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ftabs::-webkit-scrollbar { display:none; }
.ftabs__tab {
  appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:.6rem .9rem; font-size:.855rem; font-weight:600; color:var(--text-dim); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:color .12s, background .12s;
}
.ftabs__tab i { font-size:.8rem; opacity:.75; }
.ftabs__tab:hover { color:var(--text); background:rgba(127,127,127,.07); }
.ftabs__tab:focus-visible { outline:2px solid var(--brand-500); outline-offset:-2px; }
.ftabs__tab.is-active { color:var(--brand-600); border-bottom-color:var(--brand-600); }
[data-theme="dark"] .ftabs__tab.is-active { color:var(--brand-400); border-bottom-color:var(--brand-400); }
.ftabs__count { font-size:.68rem; font-weight:700; padding:.04rem .4rem; border-radius:20px; background:rgba(127,127,127,.16); color:var(--text-dim); }
.ftabs__count.is-bad { background:var(--red-500); color:#fff; }
.ftabs__tab.has-error::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--red-500); flex:0 0 auto; }
/* A part that does not apply (data-when) takes its tab off the strip. */
.ftabs__tab[hidden] { display:none; }

/* Tabs that head a card: the strip sits flush inside the card's top edge. */
.card > [data-tabs] > .ftabs, .table-card > [data-tabs] > .ftabs { padding:0 .6rem; margin-bottom:0; }
.card > [data-tabs] > [data-tab] { padding:1rem; }

.nav-tabs { border-bottom:1px solid var(--line); }
.nav-tabs .nav-link { border:none; border-bottom:2px solid transparent; color:var(--text-dim); font-weight:600; font-size:.845rem; padding:.55rem .85rem; }
.nav-tabs .nav-link.active { color:var(--brand-600); background:transparent; border-bottom-color:var(--brand-600); }

/* =====================================================================
   DEFINITION LISTS  (record detail views)
   ================================================================== */

.dl { display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.1rem; font-size:.85rem; }
.dl dt { color:var(--text-faint); font-weight:600; font-size:.78rem; white-space:nowrap; }
.dl dd { margin:0; color:var(--text); font-weight:520; }

.facts { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.fact__label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:650; }
.fact__value { font-size:1.02rem; font-weight:650; color:var(--text); margin-top:.1rem; letter-spacing:-.015em; }

/* =====================================================================
   ALERTS
   ================================================================== */

.alert { border-radius:var(--radius); border:1px solid transparent; font-size:.85rem; padding:.7rem .95rem; display:flex; gap:.6rem; align-items:flex-start; }
.alert-success{background:var(--green-100);border-color:transparent;color:var(--green-600)}
.alert-warning{background:var(--amber-100);border-color:transparent;color:var(--amber-600)}
.alert-danger, .alert-error{background:var(--red-100);border-color:transparent;color:var(--red-600)}
.alert-info{background:var(--brand-100);border-color:transparent;color:var(--brand-700)}

/* =====================================================================
   MODALS / DROPDOWNS
   ================================================================== */

.modal-content { border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-3); background:var(--surface); }
.modal-header { border-bottom:1px solid var(--line-soft); padding:.95rem 1.15rem; }
.modal-title { font-size:1rem; font-weight:650; }
.modal-body { padding:1.15rem; }
.modal-footer { border-top:1px solid var(--line-soft); padding:.8rem 1.15rem; }

/* ---- pop-up forms: FT.dialog (fetched) and Ui::dialogOpen() (written into the page) ---- */
.ftdlg .modal-dialog { max-width:860px; }
.ftdlg--sm .modal-dialog { max-width:460px; }
.ftdlg--md .modal-dialog { max-width:640px; }
.ftdlg--lg .modal-dialog { max-width:860px; }
.ftdlg--xl .modal-dialog { max-width:1120px; }
.ftdlg .modal-content { max-height:calc(100vh - 3.5rem); }
.ftdlg__head { align-items:flex-start; gap:.75rem; }
.ftdlg__titles { min-width:0; flex:1 1 auto; }
.ftdlg .modal-title { font-size:1.06rem; font-weight:680; letter-spacing:-.015em; }
.ftdlg__sub { color:var(--text-dim); font-size:.8rem; margin-top:.15rem; line-height:1.35; }
.ftdlg__sub:empty { display:none; }
.ftdlg .close { color:var(--text-dim); opacity:1; text-shadow:none; font-weight:400; font-size:1.5rem; line-height:1; padding:.35rem .6rem; margin:-.35rem -.45rem -.35rem auto; border-radius:var(--radius-sm); }
.ftdlg .close:hover { background:var(--ink-100); color:var(--text); }
.ftdlg__body { padding:1.15rem 1.25rem 1.25rem; overflow-y:auto; }
.ftdlg__foot { gap:.5rem; background:var(--surface-2, var(--surface)); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.ftdlg__foot > * { margin:0; }
.ftdlg__foot .btn { min-width:96px; }
.ftdlg__hint { margin-right:auto !important; color:var(--text-dim); font-size:.78rem; }
.ftdlg__wait { display:grid; place-items:center; min-height:180px; color:var(--text-faint); font-size:1.6rem; }
.ftdlg.is-busy .ftdlg__body { opacity:.55; pointer-events:none; }
.ftdlg__alert { margin-bottom:1rem; }

/* Inside a pop-up the form is the content: no card frames, no second heading. */
.ftdlg__body .card { border:0 !important; box-shadow:none !important; background:none !important; border-radius:0 !important; margin-bottom:0; }
.ftdlg__body .card + .card { margin-top:1rem; }
.ftdlg__body .card > .card-header { padding:0 0 .5rem !important; border:0 !important; background:none !important; }
.ftdlg__body .card > .card-header .card-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:700; }
.ftdlg__body .card > .card-body { padding:0 !important; }
.ftdlg__body .u-grid-2, .ftdlg__body .split { gap:1rem 1.5rem; margin-bottom:0; }
.ftdlg__body .ftabs { position:sticky; top:0; z-index:3; background:var(--surface); margin:0 -1.25rem 1.1rem !important; padding:0 1.25rem !important; }
.ftdlg__body:has(.ftabs) { padding-top:.3rem; }
.ftdlg__body .card > [data-tabs] > [data-tab] { padding:0; }
.ftdlg__body .fold { box-shadow:none; }
.ftdlg__body [data-page-only], [data-dialog-only] { display:none !important; }
.ftdlg__body [data-dialog-only] { display:revert !important; }
.ftdlg__body .form-group:last-child { margin-bottom:0; }

@media (max-width: 575.98px) {
  .ftdlg .modal-dialog { margin:0; max-width:none; min-height:100%; align-items:stretch; }
  .ftdlg .modal-content { border-radius:0; border:0; max-height:none; min-height:100vh; min-height:100dvh; }
  .ftdlg__foot { position:sticky; bottom:0; border-radius:0; padding-bottom:calc(.8rem + env(safe-area-inset-bottom, 0px)); }
  .ftdlg__foot .btn { flex:1 1 0; }
  .ftdlg__hint { display:none; }
}

.dropdown-menu {
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow-2); background:var(--surface); padding:.3rem;
  font-size:.845rem;
}
.dropdown-item { border-radius:var(--radius-sm); padding:.42rem .6rem; color:var(--text); }
.dropdown-item:hover { background:var(--ink-100); color:var(--text); }
.dropdown-divider { border-color:var(--line-soft); }
/* An action inside a "More" menu that changes something is a small form, drawn like any other item. */
.dropdown-form { margin:0; }
.dropdown-form .dropdown-item { width:100%; text-align:left; background:none; border:0; cursor:pointer; font:inherit; font-size:inherit; }
.dropdown-form .dropdown-item:hover { background:var(--ink-100); }
.dropdown-item.text-danger, .dropdown-form .dropdown-item.text-danger { color:var(--red-600) !important; }

/* =====================================================================
   CHARTS (inline SVG)
   ================================================================== */

.chart { width:100%; display:block; overflow:visible; }
.chart .grid line { stroke:var(--line-soft); stroke-width:1; }
.chart .axis text { fill:var(--text-faint); font-size:.688rem; font-family:var(--font); }
.chart .axis line, .chart .axis path { stroke:var(--line); }
.chart .bar-r { fill:var(--brand-500); transition:opacity .12s; }
.chart .bar-r:hover { opacity:.78; }
.chart .line-p { fill:none; stroke:var(--brand-500); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .area-p { fill:var(--brand-500); opacity:.1; }
.chart .dot-p { fill:var(--brand-600); }

.legend { display:flex; gap:.9rem; flex-wrap:wrap; font-size:.755rem; color:var(--text-dim); margin-top:.5rem; }
.legend i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:.3rem; vertical-align:-1px; }

/* =====================================================================
   UTILITIES
   ================================================================== */

.u-dim{color:var(--text-dim)!important} .u-faint{color:var(--text-faint)!important}
.u-strong{font-weight:650} .u-mono{font-family:var(--mono);font-size:.84em}
.u-nowrap{white-space:nowrap} .u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.u-xs{font-size:.775rem} .u-sm{font-size:.82rem} .u-lg{font-size:1.05rem}
.u-mt0{margin-top:0!important} .u-mb0{margin-bottom:0!important}
.u-gap{display:flex;gap:.5rem;align-items:center} .u-gap-lg{display:flex;gap:1rem;align-items:center}
.u-between{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.u-right{margin-left:auto}
/* A cancelled document on its register: still there, plainly not counted. */
.u-void{text-decoration:line-through;text-decoration-color:var(--ink-300);color:var(--text-dim)}
tr.is-void td{background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(190,40,40,.035) 9px 18px)}
.u-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1.1rem}
.u-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1.1rem}

/* =====================================================================
   LOGIN
   ================================================================== */

.login-shell {
  min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  background:
    radial-gradient(1100px 550px at 12% -8%, rgba(17,119,204,.16), transparent 60%),
    radial-gradient(900px 480px at 105% 108%, rgba(109,40,217,.13), transparent 60%),
    var(--ink-900);
}
.login-card {
  width:100%; max-width:392px; background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); padding:2rem 1.9rem; border:1px solid var(--line);
}
.login-brand { display:flex; align-items:center; gap:.65rem; margin-bottom:1.5rem; }
.login-brand .app-side__mark { width:38px; height:38px; font-size:.938rem; flex:0 0 38px; }

/* =====================================================================
   PRINT
   ================================================================== */

@media print {
  .app-side, .app-top, .page-head__actions, .filter-bar, .no-print { display:none !important; }
  .app-main { margin-left:0 !important; }
  .app-body { padding:0 !important; }
  .card, .table-card { box-shadow:none !important; border-color:#ccc !important; break-inside:avoid; }
  body { background:#fff !important; }
}

/* =====================================================================
   LAYOUT HELPERS
   Two- and three-pane splits. These replace the inline
   style="grid-template-columns:…" the templates used to carry, which could
   not be overridden by a media query and so never collapsed on a phone.
   ================================================================== */

.split { display:grid; gap:1.1rem; align-items:start; grid-template-columns:minmax(0,1fr); }
.split > * { min-width:0; }
.split > .card, .split > .table-card { margin-bottom:0; }
.split { margin-bottom:1.1rem; }

@media (min-width:992px) {
  .split--2-1   { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
  .split--3-1   { grid-template-columns:minmax(0,3fr) minmax(0,1fr); }
  .split--1-2   { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
  .split--1-1   { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split--4-3   { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  .split--thirds{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:700px) and (max-width:991.98px) {
  .split--thirds{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .split--1-1   { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* Grid children must be allowed to shrink, or one wide table inside a card
   pushes the whole page sideways. */
.u-grid-2 > *, .u-grid-3 > *, .kpi-grid > *, .gst-actions > *, .facts > * { min-width:0; }

/* Form grid: label-over-field cells that reflow by themselves. */
.form-grid { display:grid; gap:0 .9rem; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.form-grid > * { min-width:0; }
.form-grid .span-2 { grid-column:span 2; }
.form-grid .span-all { grid-column:1 / -1; }
@media (max-width:480px) { .form-grid .span-2 { grid-column:auto; } }

/* A row of actions that wraps, and goes full width on a phone. */
.actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.actions--end { justify-content:flex-end; }
/* Inside a table cell: a compact select plus one or two buttons on one line. */
.actions--row { gap:.35rem; min-width:150px; }
.actions--row .form-control { flex:1 1 118px; min-width:112px; max-width:210px; width:auto; }
.actions--row .btn { flex:0 0 auto; }
@media (max-width:640px) { .actions--row { min-width:0; } .actions--row .form-control { max-width:none; flex:1 1 100%; } }

/* =====================================================================
   FOOTER
   The original theme pinned .main-footer to the bottom of the viewport as a
   status strip. Pinned, it covered the last 55px of every page — including
   the Save buttons on a phone. It now sits at the end of the content, and
   anything the legacy scripts write into it is raised as a toast instead.
   ================================================================== */

.main-footer {
  position:static !important; width:auto !important; bottom:auto !important;
  margin-left:var(--sidebar-w) !important; transition:margin-left .18s ease;
  background:transparent !important; border-top:1px solid var(--line-soft) !important;
  color:var(--text-faint) !important; font-size:.76rem; padding:.8rem 1.35rem !important;
  z-index:auto !important; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.main-footer::after { content:none !important; }
.main-footer .float-left, .main-footer .float-right { float:none !important; }
.main-footer strong { font-weight:500; }
.main-footer a { color:var(--text-dim); }
body.sidebar-collapse .main-footer { margin-left:var(--sidebar-w-min) !important; }
.container-fluid.pb-5, .content .pb-5 { padding-bottom:0 !important; }

/* =====================================================================
   TABLES ON SMALL SCREENS
   ================================================================== */

/* Every table scrolls inside its own box; the page itself never does.
   app.js wraps any table that was not wrapped by its template. */
.table-wrap, .table-responsive {
  overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
  overscroll-behavior-x:contain;
}
.table-wrap > .table { min-width:100%; }
.table-wrap.is-scrollable { background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(13,27,42,.16), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13,27,42,.16), transparent) right center / 10px 100% no-repeat scroll; }

.dataTables_wrapper { max-width:100%; }
.dataTables_wrapper > .row { margin-left:0; margin-right:0; }
.dataTables_wrapper > .row > [class*="col-"] { padding-left:0; padding-right:0; min-width:0; }
.dataTables_wrapper .dataTables_paginate .pagination { flex-wrap:wrap; justify-content:flex-end; gap:2px 0; margin:0; }
.dataTables_wrapper .dataTables_filter { text-align:right; }
.dataTables_wrapper .dataTables_filter input { max-width:100%; }
table.dataTable { width:100% !important; border-collapse:collapse !important; margin-top:0 !important; margin-bottom:0 !important; }
/* FT.dataTable's own chrome: a toolbar above, a pager below, both wrapping. */
.dt-bar, .dt-foot { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; justify-content:space-between; padding:.65rem .9rem; }
.dt-foot { border-top:1px solid var(--line-soft); }
.dt-bar__l { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.dt-bar__r { flex:1 1 200px; max-width:320px; margin-left:auto; }
.dt-bar__r .dataTables_filter label { display:block; margin:0; }
.dt-bar__r .dataTables_filter input { width:100% !important; margin:0 !important; }
.dt-bar .dataTables_length label { margin:0; display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.dt-bar .dt-buttons { margin:0; }
.dt-foot .dataTables_info { padding:0 !important; }
.dt-foot .dataTables_paginate { margin-left:auto; }
.card-body > .dt-host > .dataTables_wrapper > .dt-bar,
.card-body > .dataTables_wrapper > .dt-bar { padding-left:0; padding-right:0; padding-top:0; }
.card-body > .dt-host > .dataTables_wrapper > .dt-foot,
.card-body > .dataTables_wrapper > .dt-foot { padding-left:0; padding-right:0; padding-bottom:0; }
@media (max-width:575.98px) { .dt-bar__r { max-width:none; flex-basis:100%; } .dt-foot { justify-content:center; } .dt-foot .dataTables_paginate { margin:0 auto; } }

/* Our cell padding is !important, which squashed the room Responsive leaves
   for its "+" control and let it sit on top of the first column's text. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control { padding-left:2.4rem !important; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { left:.7rem !important; top:50% !important; margin-top:-8px; background-color:var(--brand-500) !important; box-shadow:none !important; border:none !important; }
table.dataTable thead th input.form-control { min-width:110px; font-weight:500; text-transform:none; letter-spacing:0; }
div.dataTables_processing { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-2); color:var(--text-dim); }

/*
 * Stacked rows. A list table marked .table--stack turns each row into a
 * small card below 640px: the header disappears and every cell carries its
 * own label (app.js copies the header text into data-label).
 */
@media (max-width:640px) {
  .table--stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display:block; width:100% !important; }
  .table--stack tbody tr {
    border:1px solid var(--line); border-radius:var(--radius); margin:.6rem; padding:.35rem .1rem;
    width:auto !important; background:var(--surface); box-shadow:var(--shadow-1);
  }
  /*
   * Two columns: the label on the left, and everything the cell holds flowing
   * down the right. A grid rather than a flex row, because a cell is often a
   * value plus a second line (a GSTIN under a name, a date under a number) and
   * in a flex row those sit side by side and run off the card.
   */
  .table--stack tbody td {
    display:grid; grid-template-columns:minmax(84px, 36%) minmax(0, 1fr); column-gap:.75rem; row-gap:0;
    justify-items:end; align-items:start;
    border:none !important; padding:.32rem .75rem !important; text-align:right; min-height:0;
    max-width:none !important; overflow-wrap:anywhere;
    /* DataTables sets content-box on its cells; with width:100% that pushes every value past the card's edge. */
    box-sizing:border-box !important;
  }
  .table--stack tbody td::before {
    content:attr(data-label); grid-column:1; grid-row:1 / span 20; justify-self:start; text-align:left;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:680;
    color:var(--text-faint); padding-top:.12rem; overflow-wrap:normal;
  }
  .table--stack tbody td > * { grid-column:2; min-width:0; max-width:100%; }
  .table--stack tbody td[data-label=""]::before, .table--stack tbody td:not([data-label])::before { content:none; }
  .table--stack tbody td[data-label=""], .table--stack tbody td:not([data-label]) { grid-template-columns:minmax(0, 1fr); }
  .table--stack tbody td[data-label=""] > *, .table--stack tbody td:not([data-label]) > * { grid-column:1; }
  .table--stack tbody td > form, .table--stack tbody td > .actions { justify-self:stretch; justify-content:flex-end; }
  .table--stack tbody td:empty { display:none; }
  .table--stack tbody td.dataTables_empty { display:block; text-align:center; }
  .table--stack tbody td .meter { min-width:120px; }
  /* DataTables' Responsive extension hides the columns that do not fit and
     puts a "+" on the first cell. A stacked row has room for every column,
     so show them all and drop the control. */
  .table--stack > tbody > tr > td[style*="display: none"],
  .table--stack > tbody > tr > td[style*="display:none"] { display:grid !important; }
  .table--stack > tbody > tr > td.dtr-control::before,
  .table--stack > tbody > tr > th.dtr-control::before { display:none !important; }
  .table--stack > tbody > tr > td.dtr-control { padding-left:.75rem !important; }
  .table--stack > tbody > tr.child { display:none !important; }
  .table--stack tfoot { display:block; }
  .table--stack tfoot tr { display:flex; flex-wrap:wrap; gap:.3rem 1rem; padding:.6rem .75rem; }
  .table--stack tfoot td, .table--stack tfoot th { display:block; border:none !important; padding:0 !important; }
  .table-wrap > .table--stack { min-width:0; }
}

/* =====================================================================
   RESPONSIVE SHELL
   Breakpoints follow Bootstrap 4 and, importantly, AdminLTE's PushMenu,
   which switches to its off-canvas behaviour at 992px. The stylesheet used
   to switch at 900px, so between the two the script and the CSS disagreed
   about what the menu button was supposed to do.
   ================================================================== */

.side-backdrop { display:none; }
#sidebar-overlay { display:none !important; }   /* AdminLTE's own; ours is .side-backdrop */

.top-search__btn { display:none; }

@media (max-width:1199.98px) {
  .top-search input { width:160px; }
  .top-search input:focus { width:200px; }
}

@media (max-width:991.98px) {
  :root { --topbar-h:54px; }

  .main-sidebar, .app-side {
    margin-left:0 !important; width:min(var(--sidebar-w), 86vw) !important;
    transform:translateX(-105%); transition:transform .22s ease; box-shadow:none !important;
    z-index:1045;
  }
  body.sidebar-open .main-sidebar,
  body.sidebar-open .app-side { transform:translateX(0); box-shadow:var(--shadow-3) !important; }

  /* PushMenu adds sidebar-collapse on small screens; never let that turn the
     drawer into the icon strip — a phone gets the full menu or nothing. */
  body.sidebar-collapse .main-sidebar,
  body.sidebar-collapse .app-side { width:min(var(--sidebar-w), 86vw) !important; }
  body.sidebar-collapse .app-side__name,
  body.sidebar-collapse .app-side__sub,
  body.sidebar-collapse .nav-group__label,
  body.sidebar-collapse .nav-link-x span,
  body.sidebar-collapse .nav-caret,
  body.sidebar-collapse .nav-badge,
  body.sidebar-collapse .app-side__foot { display:revert !important; opacity:1; }
  body.sidebar-collapse .nav-badge {
    display:inline-block !important; position:static; margin-left:auto;
    font-size:.68rem; line-height:1.5; padding:.08rem .4rem; min-width:0; max-width:none; border:0;
  }
  body.sidebar-collapse .nav-link-x { justify-content:flex-start; padding-inline:1.05rem; }
  body.sidebar-collapse .nav-sub.is-open { display:block !important; }
  body.sidebar-collapse .app-side__brand { justify-content:flex-start; padding:0 1rem; }

  .content-wrapper, body.sidebar-collapse .content-wrapper,
  .main-header, .app-top, body.sidebar-collapse .main-header, body.sidebar-collapse .app-top,
  .main-footer, body.sidebar-collapse .main-footer { margin-left:0 !important; }

  .content-wrapper > .content, .content-wrapper > section.content { padding:1rem .9rem 2rem !important; }
  .app-main { margin-left:0; }
  .app-body { padding:1rem .9rem 2rem; }

  body.sidebar-open { overflow:hidden; }
  body.sidebar-open .side-backdrop {
    display:block; position:fixed; inset:0; background:rgba(8,16,26,.55); z-index:1040;
    backdrop-filter:blur(1.5px);
  }

  /* Bigger touch targets in the drawer. */
  .nav-link-x { padding-top:.62rem; padding-bottom:.62rem; font-size:.9rem; }
  .nav-sub .nav-link-x { font-size:.86rem; }
  .nav-sub.is-open { max-height:720px; }

  .kpi-grid { grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }
}

@media (max-width:767.98px) {
  /* The search box folds into a button; tapping it opens it across the bar. */
  .top-search { margin-left:auto; position:static; }
  .top-search input, .top-search > i { display:none; }
  .top-search__btn { display:grid; }
  .top-search.is-open {
    position:absolute; inset:0; z-index:5; background:var(--surface);
    display:flex; align-items:center; padding:0 .7rem; gap:.4rem;
  }
  .top-search.is-open input { display:block; flex:1; width:auto !important; height:38px; font-size:16px; }
  .top-search.is-open > i { display:block; position:static; transform:none; order:-1; margin:0 .2rem 0 .3rem; }
  .app-top { gap:.35rem; padding:0 .6rem !important; position:sticky; }
  .app-crumb { flex:1; }
  .app-crumb b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .page-head { gap:.6rem; margin-bottom:.9rem; }
  .page-head__title { font-size:1.22rem; }
  .page-head__actions { margin-left:0; width:100%; }
  .page-head__actions .btn { flex:1 1 auto; justify-content:center; }

  .card-header { flex-wrap:wrap; }
  .card-tools { margin-left:auto; }

  /* 16px stops iOS zooming the page every time a field gets focus. */
  .form-control, .custom-select, select.form-control, textarea.form-control, .form-control-sm,
  .select2-container--bootstrap4 .select2-selection, .select2-search__field,
  .dataTables_wrapper .dataTables_filter input, .top-search input {
    font-size:16px !important; min-height:40px !important;
  }
  .form-control-sm { min-height:38px !important; }
  .select2-container--bootstrap4 .select2-selection--single { height:40px !important; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height:38px !important; font-size:16px; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height:38px !important; }
  textarea.form-control { min-height:84px !important; }
  .btn { padding:.5rem .9rem !important; min-height:38px; }
  .btn-sm { padding:.38rem .7rem !important; min-height:34px; }
  .icon-btn { width:40px; height:40px; flex-basis:40px; }

  /* Bootstrap columns that were given a fixed share at every width
     (col-6, col-4 …) are too narrow for a field on a phone. app.js marks the
     rows that hold form controls; those stack. */
  .row--form > [class*="col-"] { flex:0 0 100% !important; max-width:100% !important; }
  .row--form > .col-auto { flex:0 0 auto !important; max-width:none !important; }
  .row--form > [class*="col-"].mt-4 { margin-top:.4rem !important; }

  .btn-group { display:flex; flex-wrap:wrap; gap:.4rem; }
  .btn-group > .btn { border-radius:8px !important; flex:1 1 auto; margin-left:0 !important; justify-content:center; }
  .btn-group-toggle > .btn, .input-group .btn-group > .btn { flex:0 1 auto; }

  .filter-bar { gap:.55rem; padding:.75rem .8rem; }
  .filter-bar > * { flex:1 1 150px; min-width:0; }
  .filter-bar .form-group { flex:1 1 150px; }
  .filter-bar .btn { flex:1 1 auto; justify-content:center; }

  .nav-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .nav-tabs .nav-link { white-space:nowrap; }

  .modal-dialog { margin:.5rem; max-width:none !important; }
  .modal-body { padding:.9rem; }
  .modal-footer { flex-wrap:wrap; gap:.4rem; }
  .modal-footer > * { margin:0 !important; }

  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info { text-align:left !important; }
  .dataTables_wrapper .dataTables_filter label { display:block; }
  .dataTables_wrapper .dataTables_filter input { width:100% !important; margin-left:0 !important; }
  .dataTables_wrapper .dataTables_paginate .pagination { justify-content:flex-start; margin-top:.5rem; }
  .dt-buttons { margin-bottom:.5rem; }

  .facts { grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:.7rem; }
  .gst-strip > div { flex-basis:135px; }
  .gst-problems li { flex-direction:column; gap:.1rem; }
  .gst-problems b { flex:none; }

  .dl { grid-template-columns:minmax(96px, 38%) 1fr; gap:.4rem .8rem; }
  .dl dt { white-space:normal; }

  .main-footer { padding:.7rem .9rem !important; font-size:.72rem; justify-content:center; text-align:center; }
  .main-footer .d-none { display:block !important; }

  .tl__time { margin-left:0; width:100%; }
  .u-between { flex-wrap:wrap; }
  .alert, .callout { font-size:.84rem; }
  #toast-container > div { width:auto !important; max-width:calc(100vw - 24px); }
  #toast-container.toast-bottom-right { right:12px; bottom:12px; left:12px; }
}

@media (max-width:575.98px) {
  body, body.hold-transition, .wrapper { font-size:.906rem; }   /* 13.05px, the phone size scaled with the rest */
  .kpi-grid { grid-template-columns:1fr 1fr; gap:.6rem; }
  .kpi { padding:.7rem .8rem; }
  .kpi__value { font-size:1.2rem; word-break:break-word; }
  .kpi__label { font-size:.66rem; letter-spacing:.06em; }
  .card-body { padding:.85rem !important; }
  .card-header { padding:.7rem .85rem !important; }
  .table tbody td { font-size:.86rem; }
  .table thead th { font-size:.7rem !important; }
  .u-xs { font-size:.76rem; }
  .pill { font-size:.72rem; }
  .login-card { padding:1.5rem 1.25rem; }
  .gstr-sections { grid-template-columns:1fr 1fr; }
  .tabs-x a { padding:.55rem .7rem; }
}

@media (max-width:359.98px) {
  .kpi-grid, .gstr-sections { grid-template-columns:1fr; }
  .app-crumb { display:none; }
}

/* Wide screens: keep line lengths and tables comfortable. */
@media (min-width:1600px) {
  .content-wrapper > .content, .content-wrapper > section.content { padding:1.4rem 2rem 2.5rem !important; }
  .kpi-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Coarse pointers get roomier rows whatever the width (tablets, touch laptops). */
@media (pointer:coarse) {
  .dropdown-item { padding:.6rem .7rem; }
  .table tbody td { padding-top:.7rem !important; padding-bottom:.7rem !important; }
  .table--stack tbody td { padding-top:.32rem !important; padding-bottom:.32rem !important; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* collapsed sidebar (desktop) */
@media (min-width:992px) {
  body.side-mini .app-side { width:var(--sidebar-w-min); }
  body.side-mini .app-main { margin-left:var(--sidebar-w-min); }
  body.side-mini .app-side__name,
  body.side-mini .app-side__sub,
  body.side-mini .nav-group__label,
  body.side-mini .nav-link-x span,
  body.side-mini .nav-caret,
  body.side-mini .nav-badge { display:none; }
  body.side-mini .nav-link-x { justify-content:center; padding-inline:0; }
  body.side-mini .nav-sub { display:none; }
  body.side-mini .app-side__brand { justify-content:center; padding:0; }
}

/* =====================================================================
   GST — callouts, the e-invoice panel, document strip
   ================================================================== */

.callout {
  border:1px solid var(--line); border-left:3px solid var(--brand-500);
  background:var(--surface); border-radius:var(--radius);
  padding:.7rem .9rem; margin-bottom:1.1rem; font-size:.8rem; color:var(--text-dim);
  line-height:1.55; box-shadow:var(--shadow-1);
}
.callout b { color:var(--text); }
.callout code { font-size:.75rem; background:var(--ink-100); padding:.05rem .3rem; border-radius:4px; color:var(--text); }
.callout--warn { border-left-color:var(--amber-500); }
.callout--bad  { border-left-color:var(--red-500); }
.callout--ok   { border-left-color:var(--green-500); }
.callout + .callout { margin-top:-.55rem; }

.callout ul { margin:.4rem 0 0; padding-left:1.05rem; }
.callout li { margin-bottom:.18rem; }

/* The IRN strip at the top of the panel */
/* Flex, not grid: a last row with fewer cells stretches to the full width
   instead of leaving a grey hole where the missing cells would be. */
.gst-strip {
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:1.1rem;
}
.gst-strip > div { background:var(--surface); padding:.6rem .8rem; flex:1 1 165px; min-width:0; }
.gst-strip dt { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); font-weight:650; margin:0; }
.gst-strip dd { margin:.2rem 0 0; font-size:.82rem; font-weight:600; color:var(--text); word-break:break-all; }
.gst-strip dd.u-mono { font-size:.72rem; font-weight:500; }

.gst-qr { display:flex; align-items:center; gap:.9rem; }
.gst-qr img { width:104px; height:104px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:3px; }

/* Action columns */
.gst-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:1.1rem; align-items:start; }
.gst-actions .card { margin-bottom:0; }

.gst-problems { list-style:none; margin:0; padding:0; }
.gst-problems li { display:flex; gap:.5rem; padding:.42rem 0; border-bottom:1px solid var(--line); font-size:.79rem; }
.gst-problems li:last-child { border-bottom:0; }
.gst-problems b { flex:0 0 138px; color:var(--text); font-weight:650; }
.gst-problems span { color:var(--text-dim); }

.gst-json {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; line-height:1.5;
  background:var(--ink-100); border:1px solid var(--line); border-radius:6px;
  padding:.6rem .7rem; max-height:340px; overflow:auto; white-space:pre; color:var(--text-dim);
}

/* GSTR-1 section table */
.gstr-sections { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.75rem; margin-bottom:1.1rem; }
.gstr-sec {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.75rem .85rem; box-shadow:var(--shadow-1); text-decoration:none; display:block; color:inherit;
  border-left:3px solid var(--brand-500);
}
.gstr-sec:hover { box-shadow:var(--shadow-2); text-decoration:none; color:inherit; }
.gstr-sec__code { font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-600); }
.gstr-sec__name { font-size:.78rem; color:var(--text-dim); margin:.1rem 0 .35rem; }
.gstr-sec__value { font-size:1.12rem; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.gstr-sec__meta { font-size:.71rem; color:var(--text-dim); margin-top:.15rem; }
.gstr-sec--empty { border-left-color:var(--ink-200); opacity:.62; }

/* Tighter two-up for the short fields inside a card-width form. */
.gst-actions .u-grid-2 { grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:0 .7rem; }
.gst-actions .form-group { margin-bottom:.6rem; }
.gst-actions label { font-size:.72rem; font-weight:650; color:var(--text-dim); margin-bottom:.2rem; }
.gst-actions hr { margin:.9rem 0 .7rem; border-color:var(--line); }
.gst-actions h4 { margin:0 0 .2rem; }

/* =====================================================================
   MAIL — reminder composer, preview pane, outbox
   ================================================================== */

.mail-insert {
  display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .75rem;
  border:1px dashed var(--ink-300); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text-dim); font-size:.79rem; line-height:1.5;
}
.mail-insert i { color:var(--brand-500); margin-top:.15rem; }

.mail-preview__meta { background:var(--surface); border-bottom:1px solid var(--line); padding:.6rem 1rem; font-size:.8rem; }
.mail-preview__meta > div { display:flex; gap:.6rem; padding:.12rem 0; min-width:0; }
.mail-preview__meta span { flex:0 0 58px; color:var(--text-faint); font-weight:650; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; padding-top:.1rem; }
.mail-preview__meta b { font-weight:560; color:var(--text); overflow-wrap:anywhere; }

.check-list { display:grid; gap:.1rem; max-height:190px; overflow-y:auto; padding:.45rem .65rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
.check-list .icheck-primary { margin:0 !important; }
.check-list label { font-weight:500; color:var(--text); margin:0; }

.icheck-primary > label { font-weight:560; color:var(--text); }

/* =====================================================================
   ADMINISTRATION — tiles, segmented choice
   ================================================================== */

.admin-grid { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit, minmax(min(270px,100%), 1fr)); margin-bottom:1.1rem; }
.admin-tile {
  display:flex; gap:.8rem; align-items:flex-start; padding:.95rem 1rem; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1);
  transition:transform .14s, box-shadow .14s, border-color .14s; min-width:0;
}
.admin-tile:hover { transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:var(--brand-400); color:inherit; }
.admin-tile__icon { width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:grid; place-items:center; background:var(--brand-100); color:var(--brand-600); font-size:1rem; }
.admin-tile__body { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.admin-tile__title { font-weight:650; font-size:.92rem; color:var(--text); }
.admin-tile__text { font-size:.8rem; color:var(--text-dim); line-height:1.45; }
.admin-tile__meta { margin-top:.3rem; display:flex; gap:.3rem; flex-wrap:wrap; }

.seg { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr)); }
.seg__opt { display:flex; gap:.6rem; align-items:flex-start; padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; margin:0; background:var(--surface); transition:.12s; }
.seg__opt:hover { border-color:var(--ink-300); }
.seg__opt:has(input:checked) { border-color:var(--brand-500); background:var(--brand-050); box-shadow:0 0 0 3px var(--brand-100); }
.seg__opt input { margin-top:.2rem; accent-color:var(--brand-600); flex:0 0 auto; }
.seg__opt b { display:block; color:var(--text); font-size:.88rem; }
.seg__opt small { display:block; color:var(--text-dim); font-weight:500; font-size:.77rem; line-height:1.45; margin-top:.1rem; }

/* =====================================================================
   ROUTINE — the checklist
   ================================================================== */

.task-group { margin-bottom:1.1rem; }
.task-group__head {
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; font-weight:680;
  color:var(--text-dim); padding:0 .2rem .45rem;
}
.task {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand-400);
  border-radius:var(--radius); padding:.75rem .9rem; margin-bottom:.5rem; box-shadow:var(--shadow-1);
}
.task--late   { border-left-color:var(--red-500); }
.task--closed { border-left-color:var(--ink-200); background:var(--surface-2); box-shadow:none; }
.task--closed .task__title { color:var(--text-dim); text-decoration:line-through; text-decoration-color:var(--ink-300); }
.task__title { font-weight:620; font-size:.92rem; color:var(--text); line-height:1.35; }
.task__meta { display:flex; flex-wrap:wrap; gap:.35rem .55rem; align-items:center; margin-top:.3rem; }
.task__how { font-size:.79rem; color:var(--text-dim); margin-top:.35rem; line-height:1.5; max-width:70ch; }
.task__side { display:flex; flex-direction:column; align-items:flex-end; gap:.45rem; text-align:right; }
.task__due { font-size:.82rem; font-weight:620; white-space:nowrap; color:var(--text); }
.task__tick form { margin:0; }
.tick {
  width:30px; height:30px; border-radius:50%; border:2px solid var(--ink-300); background:var(--surface);
  color:transparent; display:grid; place-items:center; cursor:pointer; transition:.13s; font-size:.8rem; padding:0;
}
button.tick:hover, button.tick:focus-visible { border-color:var(--green-500); color:var(--green-500); background:var(--green-100); outline:none; }
.tick--done    { border-color:var(--green-500); background:var(--green-500); color:#fff; cursor:default; }
.tick--skipped { border-color:var(--ink-300); background:var(--ink-100); color:var(--text-dim); cursor:default; }
.tick--missed  { border-color:var(--red-500); background:var(--red-100); color:var(--red-600); cursor:default; }
.tick--law     { border-color:var(--amber-500); background:var(--amber-100); color:var(--amber-600); cursor:default; font-size:.72rem; }

@media (max-width:640px) {
  .task { grid-template-columns:auto minmax(0,1fr); }
  .task__side { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; text-align:left; padding-left:calc(30px + .8rem); }
  .tick { width:36px; height:36px; }
  .task__side { padding-left:calc(36px + .8rem); }
}

/* =====================================================================
   SMALL SHARED PIECES
   ================================================================== */

/* A short form shown as a page of its own (it is usually a pop-up): keep it a readable width. */
.form-narrow { max-width:720px; }
.form-medium { max-width:980px; }

/* A checkbox that looks like a chip — used for multi-select filters. */
.chip-check { margin:0; cursor:pointer; }
.chip-check input { position:absolute; opacity:0; pointer-events:none; }
.chip-check span {
  display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:20px;
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  font-size:.78rem; font-weight:600; text-transform:none; letter-spacing:0; transition:.12s;
}
.chip-check input:checked + span { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.chip-check input:focus-visible + span { box-shadow:0 0 0 3px var(--brand-100); }

/* A chip that is not anyone's to change: on because it has to be (the screen
   everybody lands on), or off because the module keeps it for administrators. */
.chip-check.is-locked { cursor:default; }
.chip-check.is-locked span { border-style:dashed; opacity:.8; }
.chip-check.is-locked input:checked + span { background:var(--ink-500); border-color:var(--ink-500); opacity:1; }
.chip-check.is-locked small { font-weight:600; }

/* What turning a right off actually does, under its tick. The rights that are
   not screens need saying in words; a screen's name says enough by itself. */
.perm-about { flex:1 1 100%; margin:-.15rem 0 .2rem; line-height:1.45; max-width:62ch; }
.chip-check.is-locked input:checked + span small { color:rgba(255,255,255,.88); }

/* Save bar that stays in reach on a long form. */
.sticky-actions {
  position:sticky; bottom:0; z-index:5; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  padding:.7rem .9rem; margin:0 0 1.1rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-2);
}
@media (max-width:575.98px) { .sticky-actions .btn { flex:1 1 auto; justify-content:center; } }

/* A section that folds away: the once-a-month import above a working table. */
.fold { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); margin:0 0 1.1rem; }
.fold__head {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; cursor:pointer;
  padding:.8rem 1rem; list-style:none; color:var(--text); font-size:.9rem; min-height:48px;
}
.fold__head::-webkit-details-marker { display:none; }
.fold__head:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; border-radius:var(--radius); }
.fold__chev { color:var(--text-faint); transition:transform .15s ease; flex:0 0 auto; }
.fold[open] > .fold__head { border-bottom:1px solid var(--line); }
.fold[open] > .fold__head .fold__chev { transform:rotate(180deg); }
.fold__body { padding:1rem; }
.fold__body > .split { margin-bottom:0; }
/* The same, inside a card: no box of its own, just a quiet line to open. */
.fold--plain { background:none; border:0; box-shadow:none; border-top:1px solid var(--line); border-radius:0; margin:.9rem 0 0; }
.fold--plain > .fold__head { padding:.7rem 0 .2rem; min-height:40px; color:var(--text-dim); }
.fold--plain[open] > .fold__head { border-bottom:0; }
.fold--plain > .fold__body { padding:.4rem 0 0; }

/* A short explanation under a status pill; wraps instead of widening the column. */
.cell-note { max-width:270px; white-space:normal; line-height:1.4; margin-top:.2rem; }
@media (max-width:640px) { .cell-note { max-width:none; } }

/* Under a rupee figure: what the document itself is in — "USD 35,500.00 @ 83.9". */
.fc-note { display:block; font-size:.72rem; font-weight:500; line-height:1.3; color:var(--text-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* A short list inside a side card: what it is on the left, the figure on the right. */
.mini-list { list-style:none; margin:0; padding:0; }
.mini-list__row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem;
  padding:.5rem 0; border-bottom:1px solid var(--line-soft); font-size:.86rem;
}
.mini-list__row:first-child { padding-top:0; }
.mini-list__row:last-child { border-bottom:none; padding-bottom:0; }
.mini-list__main { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.mini-list__side { flex:0 0 auto; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   SEARCH
   ========================================================================== */
.top-search__menu {
  position:absolute; right:0; top:calc(100% + 8px); width:min(420px, 92vw); max-height:min(70vh, 520px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-3);
  padding:.35rem; z-index:1045; text-align:left;
}
.top-search__menu i { position:static; transform:none; pointer-events:auto; left:auto; top:auto; }
.top-search__group {
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
  padding:.5rem .6rem .2rem;
}
.top-search__item {
  display:flex; gap:.6rem; align-items:flex-start; padding:.45rem .6rem; border-radius:8px; color:var(--text) !important;
  text-decoration:none !important; min-height:40px;
}
.top-search__item i { width:1.1rem; text-align:center; margin-top:.2rem; color:var(--text-faint); font-size:.8rem; flex:0 0 auto; }
.top-search__item span { min-width:0; flex:1 1 auto; }
.top-search__item b { display:block; font-size:.84rem; font-weight:620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-search__item small { display:block; font-size:.74rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-search__item:hover, .top-search__item.is-active { background:var(--brand-050); }
.top-search__all {
  display:block; margin-top:.3rem; padding:.55rem .6rem; border-top:1px solid var(--line-soft);
  font-size:.8rem; font-weight:600; text-decoration:none !important;
}
.top-search__none { padding:.8rem .6rem; font-size:.82rem; color:var(--text-dim); }
@media (max-width:767.98px) {
  .top-search.is-open .top-search__menu { position:fixed; left:.5rem; right:.5rem; top:calc(var(--topbar-h, 56px) + 4px); width:auto; max-height:70vh; }
}

/* Results page: groups flow into as many columns as fit. */
.search-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items:start; }
.search-grid > .card { margin-bottom:0; }

/* ==========================================================================
   SIGN-IN, FORGOTTEN PASSWORD, RESET
   Two panels on a wide screen; the form alone on a phone.
   ========================================================================== */
body.auth-page { background:var(--bg); min-height:100vh; min-height:100dvh; margin:0; }
.auth { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); min-height:100vh; min-height:100dvh; }
.auth__brand {
  background:linear-gradient(160deg, #0d1b2a 0%, #0f2f4f 58%, #0f62ae 130%); color:#dbe7f3;
  padding:clamp(2rem, 6vw, 4.5rem); display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
}
.auth__logo { width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg, #2f8ae0, #12508d); display:grid; place-items:center;
  font-weight:800; font-size:1.35rem; color:#fff; letter-spacing:.02em; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.auth__brand h1 { font-size:clamp(1.6rem, 2.6vw, 2.3rem); font-weight:750; color:#fff; line-height:1.15; margin:0; letter-spacing:-.01em; }
.auth__brand h1 small { display:block; font-size:.5em; font-weight:500; color:#9fb9d3; letter-spacing:.02em; margin-top:.5rem; }
.auth__brand ul { list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.85rem; max-width:34rem; }
.auth__brand li { display:flex; gap:.8rem; align-items:flex-start; font-size:.95rem; line-height:1.45; }
.auth__brand li i { width:1.3rem; text-align:center; margin-top:.2rem; color:#6db3f2; flex:0 0 auto; }
.auth__foot { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#7f9bb8; margin:1rem 0 0; }

.auth__panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(1.25rem, 4vw, 3rem); gap:1.2rem; }
.auth__card { width:100%; max-width:410px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-2); padding:clamp(1.4rem, 3.5vw, 2.2rem); }
.auth__mark { display:block; height:44px; width:auto; margin:0 0 1.3rem; }
[data-theme="dark"] .auth__mark { filter:brightness(0) invert(1); opacity:.92; }
.auth__card h2 { font-size:1.35rem; font-weight:720; margin:0 0 .25rem; color:var(--text); }
.auth__lead { color:var(--text-dim); font-size:.9rem; margin:0 0 1.2rem; line-height:1.5; }
.auth__card label { font-weight:600; font-size:.82rem; color:var(--text); }
.auth__card .form-control { height:46px; font-size:1rem; border-radius:10px; }
.auth__pw { position:relative; }
.auth__pw .form-control { padding-right:3rem; }
.auth__eye { position:absolute; right:4px; top:4px; width:38px; height:38px; border:none; background:transparent; color:var(--text-faint); border-radius:8px; cursor:pointer; }
.auth__eye:hover, .auth__eye:focus-visible { color:var(--text); background:var(--surface-2); outline:none; }
.auth__row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.84rem; margin:.2rem 0 1.1rem; }
.auth__check { display:flex; align-items:center; gap:.45rem; margin:0; font-weight:500 !important; color:var(--text-dim) !important; cursor:pointer; }
.auth__check input { width:16px; height:16px; accent-color:var(--brand-600); }
.auth__submit { height:46px; font-size:.98rem !important; font-weight:650; border-radius:10px !important; display:flex !important; align-items:center; justify-content:center; }
.auth__alert { display:flex; gap:.6rem; align-items:flex-start; padding:.7rem .85rem; border-radius:10px; font-size:.86rem; line-height:1.45; margin:0 0 1rem;
  background:var(--red-100); color:var(--red-600); border:1px solid color-mix(in srgb, var(--red-500) 30%, transparent); }
.auth__alert i { margin-top:.18rem; }
.auth__alert--ok { background:var(--green-100); color:var(--green-600); border-color:color-mix(in srgb, var(--green-500) 30%, transparent); }
.auth__alert--info { background:var(--brand-050); color:var(--text); border-color:var(--brand-100); }
.auth__note { font-size:.76rem; color:var(--text-faint); margin:1.1rem 0 0; line-height:1.5; }
.auth__back { font-size:.85rem; margin:1.2rem 0 0; }
.auth__legal { font-size:.74rem; color:var(--text-faint); margin:0; text-align:center; }

@media (max-width:900px) {
  .auth { grid-template-columns:1fr; }
  .auth__brand { display:none; }
  .auth__panel { justify-content:flex-start; padding-top:clamp(2rem, 9vh, 5rem); }
}
@media (max-width:420px) {
  .auth__card { border:none; box-shadow:none; background:transparent; padding:.5rem .25rem; }
  .auth__panel { padding:1.25rem 1rem; }
}

/* ==========================================================================
   PERMISSIONS
   ========================================================================== */
.perm-group { font-size:.72rem; font-weight:720; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); margin:1.4rem 0 .6rem; }
.perm-grid { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill, minmax(min(330px, 100%), 1fr)); align-items:start; margin-bottom:.4rem; }
.perm-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:0; margin:0; min-width:0; box-shadow:var(--shadow-1); }
.perm-card.is-on { border-color:color-mix(in srgb, var(--brand-500) 45%, var(--line)); }
.perm-card__head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; width:100%; float:none; margin:0;
  padding:.65rem .85rem; border-bottom:1px solid var(--line-soft); font-size:.88rem; }
.perm-card__all { display:flex; align-items:center; gap:.55rem; margin:0; cursor:pointer; color:var(--text); min-width:0; }
.perm-card__all input { width:17px; height:17px; accent-color:var(--brand-600); flex:0 0 auto; }
.perm-card__body { display:flex; flex-wrap:wrap; gap:.4rem; padding:.75rem .85rem .85rem; }

/* A deactivated row in a register. */
tr.is-muted > td { opacity:.62; }
tr.is-muted > td:last-child { opacity:1; }


/* ==========================================================================
   ICON NAMES
   The portal ships Font Awesome 5.15. Several templates use the newer
   Font Awesome 6 names, which would otherwise render as nothing. These map
   each of them onto the glyph the bundled font does carry, so both spellings
   work and the markup survives a later upgrade of the font.
   ========================================================================== */
.fa-arrow-down-wide-short:before{content:"\f160"}
.fa-arrow-right-from-bracket:before{content:"\f2f5"}
.fa-arrow-right-to-bracket:before{content:"\f2f6"}
.fa-arrow-trend-up:before{content:"\f201"}
.fa-arrow-up-right-from-square:before{content:"\f35d"}
.fa-bars-staggered:before{content:"\f550"}
.fa-boxes-stacked:before{content:"\f468"}
.fa-building-columns:before{content:"\f19c"}
.fa-calendar-days:before{content:"\f073"}
.fa-chart-column:before{content:"\f080"}
.fa-chart-simple:before{content:"\f080"}
.fa-circle-check:before{content:"\f058"}
.fa-circle-dot:before{content:"\f192"}
.fa-circle-exclamation:before{content:"\f06a"}
.fa-circle-info:before{content:"\f05a"}
.fa-circle-minus:before{content:"\f056"}
.fa-circle-plus:before{content:"\f055"}
.fa-circle-question:before{content:"\f059"}
.fa-circle-xmark:before{content:"\f057"}
.fa-clock-rotate-left:before{content:"\f1da"}
.fa-cloud-arrow-down:before{content:"\f381"}
.fa-cloud-arrow-up:before{content:"\f382"}
.fa-code-compare:before{content:"\f362"}
.fa-diagram-project:before{content:"\f542"}
.fa-earth-asia:before{content:"\f57e"}
.fa-envelope-circle-check:before{content:"\f658"}
.fa-face-meh:before{content:"\f11a"}
.fa-face-smile:before{content:"\f118"}
.fa-file-arrow-down:before{content:"\f56d"}
.fa-file-arrow-up:before{content:"\f574"}
.fa-file-lines:before{content:"\f15c"}
.fa-file-zipper:before{content:"\f1c6"}
.fa-filter-circle-xmark:before{content:"\f0b0"}
.fa-floppy-disk:before{content:"\f0c7"}
.fa-gauge:before{content:"\f3fd"}
.fa-gauge-high:before{content:"\f3fd"}
.fa-gear:before{content:"\f013"}
.fa-gears:before{content:"\f085"}
.fa-hand-holding-dollar:before{content:"\f4c0"}
.fa-house:before{content:"\f015"}
.fa-indian-rupee-sign:before{content:"\f156"}
.fa-list-check:before{content:"\f0ae"}
.fa-location-dot:before{content:"\f3c5"}
.fa-magnifying-glass:before{content:"\f002"}
.fa-money-bill-transfer:before{content:"\f362"}
.fa-money-check-dollar:before{content:"\f53d"}
.fa-pen-to-square:before{content:"\f044"}
.fa-people-group:before{content:"\f0c0"}
.fa-right-from-bracket:before{content:"\f2f5"}
.fa-rotate:before{content:"\f2f1"}
.fa-rotate-left:before{content:"\f2ea"}
.fa-rotate-right:before{content:"\f2f9"}
.fa-scale-balanced:before{content:"\f24e"}
.fa-screwdriver-wrench:before{content:"\f7d9"}
.fa-shield-halved:before{content:"\f3ed"}
.fa-sliders:before{content:"\f1de"}
.fa-square-check:before{content:"\f14a"}
.fa-table-cells:before{content:"\f00a"}
.fa-table-list:before{content:"\f00b"}
.fa-ticket:before{content:"\f3ff"}
.fa-trash-can:before{content:"\f2ed"}
.fa-triangle-exclamation:before{content:"\f071"}
.fa-truck-field:before{content:"\f0d1"}
.fa-up-right-from-square:before{content:"\f35d"}
.fa-user-group:before{content:"\f500"}
.fa-wand-magic-sparkles:before{content:"\f0d0"}
.fa-xmark:before{content:"\f00d"}

/* ==========================================================================
   MATRIX TABLES
   Periods across, lines down (cash forecast, ageing, utilisation). These keep
   their shape on a phone and scroll sideways, with the first column pinned so
   the row never loses its name.
   ========================================================================== */
.table--matrix { min-width:max-content; width:100%; }
.table--matrix th, .table--matrix td { white-space:nowrap; }
.table--matrix .sticky-col {
  position:sticky; left:0; z-index:2; background:var(--surface); min-width:150px; max-width:46vw; white-space:normal;
  box-shadow:1px 0 0 var(--line);
}
.table--matrix thead .sticky-col, .table--matrix tfoot .sticky-col { background:var(--surface-2); }
.table--matrix .row-soft > td { background:var(--surface-2); }
.table--matrix .row-soft > .sticky-col { background:var(--surface-2); }
.warn-text { color:var(--amber-600) !important; }
@media (max-width:640px) { .table--matrix .sticky-col { min-width:118px; font-size:.78rem; } }

/* A small label above a band of tiles or cards. */
.section-label { font-size:.72rem; font-weight:720; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); margin:1.1rem 0 .55rem; }
.fa-right-left:before{content:"\f362"}

/* ==========================================================================
   CONFIRMATION BOX — FT.confirm(), data-confirm
   ========================================================================== */
.ft-dialog {
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:1rem;
  background:rgba(13,27,42,.48); animation:ftFade .12s ease-out;
}
.ft-dialog__box {
  width:min(440px, 100%); background:var(--surface); color:var(--text); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); padding:1.3rem 1.3rem 1.1rem; display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem;
  animation:ftPop .14s ease-out;
}
.ft-dialog__icon {
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:1rem;
  background:var(--brand-100); color:var(--brand-600); grid-row:1 / 2;
}
.ft-dialog__icon.is-danger { background:var(--red-100); color:var(--red-600); }
.ft-dialog__text { font-size:.95rem; line-height:1.5; font-weight:520; align-self:center; overflow-wrap:anywhere; }
.ft-dialog__actions { grid-column:1 / -1; display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap; margin-top:1rem; }
@media (max-width:480px) { .ft-dialog__actions .btn { flex:1 1 auto; justify-content:center; } }
@keyframes ftFade { from { opacity:0; } to { opacity:1; } }
@keyframes ftPop  { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .ft-dialog, .ft-dialog__box { animation:none; } }

/* ==========================================================================
   PRINT PREVIEW — FT.printPreview(), data-print, any link to a print address

   The document is a page of its own, shown in a frame: what is looked at here
   is what the printer gets, so nothing in this block styles the document. The
   box only gives it room — wide enough that an A4 sheet (210 mm, about 800 px)
   keeps its paper layout instead of folding into the phone one — and a grey
   table to lie on, which is the same grey the print pages paint themselves.
   ========================================================================== */
.ft-print {
  position:fixed; inset:0; z-index:1990; display:flex; align-items:stretch; justify-content:center;
  padding:1.25rem; background:rgba(13,27,42,.56); animation:ftFade .12s ease-out;
}
.ft-print__box {
  display:flex; flex-direction:column; width:min(1080px, 100%); min-height:0;
  background:var(--surface); color:var(--text); border-radius:var(--radius-lg); box-shadow:var(--shadow-3);
  overflow:hidden; animation:ftPop .14s ease-out;
}
.ft-print__head {
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.7rem .9rem .7rem 1.1rem;
  border-bottom:1px solid var(--line-soft); flex:0 0 auto;
}
.ft-print__titles { flex:1 1 12rem; min-width:0; margin-right:auto; }
.ft-print__title { margin:0; font-size:1.06rem; font-weight:680; letter-spacing:-.015em; overflow-wrap:anywhere; }
.ft-print__sub { color:var(--text-dim); font-size:.78rem; margin-top:.1rem; }
.ft-print__copies { display:flex; align-items:center; gap:.4rem; margin:0; font-size:.8rem; color:var(--text-dim); font-weight:500; }
.ft-print__copies select { width:auto; min-width:11rem; }
.ft-print__copies[hidden] { display:none; }
.ft-print__head .btn { white-space:nowrap; }
.ft-print__short { display:none; }
.ft-print__head .btn[disabled] { opacity:.5; pointer-events:none; }

/* The table the paper lies on. The frame fills it and scrolls inside itself,
   so the header with Print and Close never scrolls out of reach. */
.ft-print__stage { position:relative; flex:1 1 auto; min-height:0; background:#e9edf2; }
.ft-print__frame { display:block; width:100%; height:100%; border:0; background:#e9edf2; }
.ft-print.is-loading .ft-print__frame, .ft-print.is-refused .ft-print__frame { visibility:hidden; }
.ft-print__wait, .ft-print__say {
  position:absolute; inset:0; display:none; place-items:center; align-content:center; gap:.8rem; padding:1.5rem;
  text-align:center; color:#5b7186; font-size:.92rem;
}
.ft-print__wait i { font-size:1.3rem; opacity:.7; }
.ft-print.is-loading .ft-print__wait { display:grid; }
.ft-print.is-refused .ft-print__say { display:grid; }
.ft-print__say { color:#15202b; }
.ft-print__say p { max-width:34rem; margin:0; line-height:1.55; font-weight:520; }
.ft-print__say i { font-size:1.6rem; color:var(--amber-600, #b45309); }

/* Tab stops at either end that hand the keyboard back, so Tab goes round the
   pop-up and the document instead of wandering into the screen behind. */
.ft-print__edge { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }

/* The screen behind stays where it was while the preview is up. */
body.ft-print-open { overflow:hidden; }

/* A phone has no room for a box within a box: the preview is the screen. */
@media (max-width: 767.98px) {
  .ft-print { padding:0; }
  .ft-print__box { width:100%; border-radius:0; }
  .ft-print__head { padding:.55rem .7rem; gap:.4rem; padding-top:calc(.55rem + env(safe-area-inset-top, 0px)); }
  .ft-print__titles { flex:1 1 100%; }
  .ft-print__head .btn { flex:1 1 auto; justify-content:center; }
  .ft-print__head .btn .ft-print__long { display:none; }
  .ft-print__head .btn .ft-print__short { display:inline; }
  .ft-print__copies { flex:1 1 100%; }
  .ft-print__copies select { flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce) { .ft-print, .ft-print__box { animation:none; } }

/* Should anybody press Ctrl+P with the preview up, the browser prints the
   portal page, not the frame. There is nothing sensible to print of the
   pop-up itself, so it steps aside. The Print button never comes here: it
   prints the frame's own window. */
@media print { .ft-print { display:none !important; } }

/* ==========================================================================
   SALES ENTRY — order, invoice, receipt and note forms
   ========================================================================== */
.u-ok { color:var(--green-600) !important; } .u-bad { color:var(--red-600) !important; }

/* One line of an order: what, how many, at what rate — and under it, how it is billed. */
.oline { border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .9rem .25rem; margin:0 0 .9rem; background:var(--surface); }
.oline__main {
  display:grid; gap:0 .7rem; align-items:start;
  grid-template-columns:minmax(196px,1.2fr) minmax(200px,3fr) 92px 104px 132px minmax(128px,1fr) 30px;
}
.oline__main .form-group { margin-bottom:.65rem; }
.oline__amount { min-height:38px; display:flex; align-items:center; justify-content:flex-end; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text); }
.oline__amt label { display:block; text-align:right; }
.oline__del { margin-top:1.65rem; color:var(--text-faint); padding:.3rem; }
.oline__del:hover { color:var(--red-600); }
.oline__plan { display:flex; flex-wrap:wrap; gap:0 .7rem; align-items:flex-start; border-top:1px dashed var(--line); padding-top:.6rem; }
.oline__plan .form-group { margin-bottom:.6rem; }
.oline__plan label { font-size:.72rem; }
.oline__plan select.form-control { min-width:170px; }
.oline__terms { margin:0 0 .65rem; border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden; }
.oline__table { margin:0; font-size:.84rem; }
.oline__table thead th { background:var(--surface-2); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); border-bottom:1px solid var(--line); }
.oline__table td { vertical-align:middle; }
.oline__table tfoot td { background:var(--surface-2); font-size:.8rem; }

@media (max-width:1199.98px) {
  .oline__main { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 30px; }
  .oline__type { grid-column:1 / 2; } .oline__desc { grid-column:2 / 4; }
  .oline__main > .oline__del { grid-column:4; grid-row:1; }
  .oline__amt { grid-column:3 / 4; }
}
@media (max-width:640px) {
  .oline { padding:.7rem .7rem .2rem; }
  .oline__main { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px; }
  .oline__type { grid-column:1 / 3; } .oline__desc { grid-column:1 / 4; grid-row:2; }
  .oline__main > .oline__del { grid-column:3; grid-row:1; }
  .oline__rate { grid-column:1 / 2; } .oline__amt { grid-column:2 / 4; }
  .oline__plan .form-group { flex:1 1 130px; }
  .oline__plan select.form-control { min-width:0; }
  .oline__table thead { display:none; }
  .oline__table tbody tr { display:grid; grid-template-columns:1.6rem minmax(0,1fr) 5.2rem 1.9rem; gap:.3rem; padding:.4rem .4rem; border-bottom:1px solid var(--line-soft); }
  .oline__table tbody td { border:0; padding:0; }
  .oline__table tbody td[data-t-amount] { grid-column:2 / 4; text-align:right; font-size:.78rem; color:var(--text-dim); }
}

/* An order's lines with their billing plan indented beneath each. */
.plan-table__line td { background:var(--surface-2); border-top:1px solid var(--line) !important; }
.plan-table__term td:first-child { padding-left:1.7rem; }
.plan-table__code { display:inline-block; min-width:2.1rem; font-family:var(--mono); font-size:.72rem; color:var(--text-faint); }
.plan-table tfoot td { border-top:1px solid var(--line-soft); padding-top:.4rem; padding-bottom:.4rem; font-size:.86rem; }
.plan-table .meter { min-width:110px; }
@media (max-width:640px) { .plan-table__term td:first-child { padding-left:.9rem; } .plan-table tfoot td[colspan="2"]:last-child { display:none; } }

/* Two or three choices side by side: tax invoice / proforma, credit / debit. */
.toggle-set { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--surface); max-width:100%; }
.toggle-set__opt { margin:0; cursor:pointer; position:relative; }
.toggle-set__opt input { position:absolute; opacity:0; pointer-events:none; }
.toggle-set__opt span { display:block; padding:.48rem .95rem; font-size:.84rem; font-weight:600; color:var(--text-dim); white-space:nowrap; }
.toggle-set__opt + .toggle-set__opt span { border-left:1px solid var(--line); }
.toggle-set__opt input:checked + span { background:var(--brand-600); color:#fff; }
.toggle-set__opt input:focus-visible + span { box-shadow:inset 0 0 0 2px var(--brand-100); }

/* Parts of a PO offered for an invoice: a row counts only when it is ticked. */
.bill-table td { vertical-align:top; }
.bill-table .bill-pick { width:1.15rem; height:1.15rem; margin-top:.45rem; cursor:pointer; }
.bill-row:not(.is-on) .form-control, .bill-row:not(.is-on) .bill-amt { opacity:.5; }
.bill-table--open .bill-row:not(.is-on) .form-control { opacity:1; }
.bill-row.is-on td { background:var(--brand-050); }
.bill-amt { padding-top:.55rem !important; font-weight:650; white-space:nowrap; }
.bill-table .form-control[readonly] { background:transparent !important; border-color:transparent; box-shadow:none; color:var(--text) !important; }

/* The figures at the foot of an order or an invoice. */
.order-totals { display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; align-items:flex-start; justify-content:space-between; }
.order-totals__rate label { margin:0 .4rem 0 0; font-size:.8rem; }
.order-totals__figures { display:grid; grid-template-columns:auto auto; gap:.3rem 1.6rem; margin:0 0 0 auto; font-size:.9rem; min-width:min(320px,100%); }
.order-totals__figures dt { font-weight:520; color:var(--text-dim); }
.order-totals__figures dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.order-totals__grand { border-top:1px solid var(--line); padding-top:.4rem; font-size:1.02rem; font-weight:720 !important; color:var(--text) !important; }

/* ==========================================================================
   READING A DOCUMENT INTO A FORM
   The "Read from a document" tab on the order, bill, customer and vendor
   forms: pick a file, see what was read, tick what to keep.
   ========================================================================== */
.docread__lead      { margin:0 0 .9rem; }
.docread__pick      { margin-bottom:.3rem; }
.docread__pickfile  { grid-column:span 2; }
.docread__file      { height:auto; padding:.35rem; }
.docread__gowrap    { align-self:start; }
/* Keeps the button on the same baseline as the file box without a second label
   being read out. */
.docread__golabel   { visibility:hidden; }
.docread__status    { margin:.6rem 0; }
.docread__head      { display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; }
.docread__hint      { font-weight:400; text-transform:none; letter-spacing:0; }
.docread__use       { width:2.6rem; }
.docread__field     { width:30%; }
.docread__now       { width:26%; }
.docread__linesuse  { margin-bottom:.5rem; }
.docread__lineno    { width:2.2rem; }
.docread__why       { margin:.3rem 0 0; }
/* Another go at the same document: sits under what the reader said about it. */
.docread__choices   { margin:0 0 .9rem; }
.docread__actions   { margin-top:1rem; }
.docread__about     { margin-top:1.2rem; }
.docread__about p   { margin:0 0 .5rem; }
.docread__about p:last-child { margin:0; }

/* ==========================================================================
   OLDER SCREENS
   Small repairs for templates that predate the design system.
   ========================================================================== */
/* A DataTables "no records" row is one cell across the table: no column label, centred. */
.table--stack tbody td.dataTables_empty::before, .table tbody td.dataTables_empty::before { content:none !important; display:none !important; }
.table tbody td.dataTables_empty { text-align:center !important; color:var(--text-faint); padding:1.6rem 1rem !important; }
@media (max-width:640px) { .table--stack tbody td.dataTables_empty { display:block !important; } }

/* The search boxes those screens put in their column headings. */
.table thead th > input.form-control { min-width:110px; height:30px; font-size:.78rem; font-weight:500; text-transform:none; letter-spacing:0; }

/* Rows that open a record when clicked. */
tr.pointer, tr[data-href] { cursor:pointer; }

/* Headings of the collapsible blocks on the order and invoice screens must not break mid-phrase. */
.card-header .card-title { overflow-wrap:normal; word-break:normal; }
.card-header [data-card-widget], .card-header .btn-tool { flex:0 0 auto; }

/* Select2 inside the filter bar takes the width of its cell. */
.filter-bar .select2-container { width:100% !important; min-width:0; }
.filter-bar .select2-container .select2-selection--single { height:34px; border-radius:8px; border-color:var(--line); background:var(--surface); }
.filter-bar .select2-container .select2-selection__rendered { line-height:32px; font-size:.84rem; color:var(--text); }
.filter-bar .select2-container .select2-selection__arrow { height:32px; }

/* In a table, .u-right means what it says: figures line up on the right. */
th.u-right, td.u-right { text-align:right !important; font-variant-numeric:tabular-nums; }
form.u-right, p.u-right, div.u-right { text-align:right; }
@media (max-width:640px) { .table--stack tbody td.u-right { text-align:right !important; } }

/* ---------------------------------------------------------------- item pictures
   The small picture beside an item's name (ItemPics::thumb): a fixed box so a
   list does not jump as pictures arrive, a plain icon where there is none. */
.item-cell { display:flex; align-items:center; gap:.6rem; }
.item-cell > div { min-width:0; }
.item-pic { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:0; overflow:hidden;
  border:1px solid var(--ink-200); border-radius:var(--radius-sm); background:var(--ink-050); color:var(--ink-300); line-height:1; }
button.item-pic { cursor:zoom-in; }
button.item-pic:hover, button.item-pic:focus-visible { border-color:var(--brand-400); outline:none; box-shadow:0 0 0 2px var(--brand-100); }
.item-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.item-pic--none i { font-size:1rem; }
.item-pic-now { display:flex; gap:.9rem; align-items:center; margin-bottom:1rem; }
.item-pic-line { display:flex; align-items:flex-start; gap:.45rem; }
.item-pic-line > .item-pic { margin-top:1px; }
.item-pic-line > :not(.item-pic) { flex:1 1 auto; min-width:0; }
.item-pic-big { display:block; max-width:100%; max-height:70vh; margin:0 auto; border-radius:var(--radius-sm); }
[data-theme="dark"] .item-pic { background:var(--ink-100); }