/* ==========================================================================
   Battery Guys IBMS - design system
   No framework, no CDN, no build step. One file, cached hard.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------ */
:root {
  --bg:            #f4f6fa;
  --bg-elev:       #ffffff;
  --bg-sunk:       #eef1f7;
  --bg-hover:      #f0f3f9;
  --line:          #e2e7f0;
  --line-strong:   #cbd4e3;

  --ink:           #16202f;
  --ink-2:         #47536a;
  --ink-3:         #7b879c;
  --ink-inv:       #ffffff;

  --brand:         #1f5fd8;
  --brand-ink:     #ffffff;
  --brand-soft:    #e7effd;
  --brand-hover:   #1a51bb;

  --ok:            #0f8a5f;   --ok-soft:    #e2f5ed;
  --warn:          #b26a00;   --warn-soft:  #fdf0dc;
  --danger:        #c62828;   --danger-soft:#fdeaea;
  --info:          #0a6f9a;   --info-soft:  #e2f2f9;
  --muted-soft:    #eceff5;

  --accent:        #f5a524;

  --radius:        10px;
  --radius-sm:     7px;
  --radius-lg:     16px;

  --shadow-1: 0 1px 2px rgba(16,26,44,.06), 0 1px 3px rgba(16,26,44,.04);
  --shadow-2: 0 4px 12px rgba(16,26,44,.08), 0 2px 4px rgba(16,26,44,.04);
  --shadow-3: 0 18px 48px rgba(16,26,44,.18), 0 4px 12px rgba(16,26,44,.08);

  --sidebar-w:     252px;
  --topbar-h:      58px;

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

  --ease: cubic-bezier(.4,0,.2,1);
}

:root[data-theme="dark"] {
  --bg:            #0e131c;
  --bg-elev:       #161d29;
  --bg-sunk:       #111823;
  --bg-hover:      #1d2634;
  --line:          #232d3d;
  --line-strong:   #33405480;

  --ink:           #e8edf6;
  --ink-2:         #a3b0c4;
  --ink-3:         #6f7d94;

  --brand:         #4d8bf5;
  --brand-soft:    #17243c;
  --brand-hover:   #6d9ff7;

  --ok:            #3ecf94;   --ok-soft:    #10301f;
  --warn:          #eaa640;   --warn-soft:  #33240c;
  --danger:        #f4726c;   --danger-soft:#3a1616;
  --info:          #4cb8e6;   --info-soft:  #0d2937;
  --muted-soft:    #1e2634;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,.45);
  --shadow-3: 0 20px 52px rgba(0,0,0,.6);
}

/* --- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { margin: 0; font-weight: 650; letter-spacing: -.011em; line-height: 1.25; }
p { margin: 0 0 .75rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
code, kbd, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
::selection { background: var(--brand-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- scrollbars -------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* ==========================================================================
   Shell
   ========================================================================== */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 40;
  transition: margin-left .22s var(--ease);
}
/* Desktop: the burger reclaims the column entirely. */
.sidebar.is-collapsed { margin-left: calc(var(--sidebar-w) * -1); }

.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(11,17,28,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}

/* --- below the desktop breakpoint the sidebar is an off-canvas drawer ---
   A 252px column on a 390px phone leaves nothing for the content, so under
   1024px it lifts out of the flow entirely and slides over the page instead. */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    height: 100dvh; margin-left: 0;
    width: min(var(--sidebar-w), 84vw);
    flex-basis: auto;
    /* Above the backdrop, or the drawer it dims would swallow its own taps. */
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .24s var(--ease);
    box-shadow: var(--shadow-3);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* An explicit translate, not the `none` keyword: it animates predictably
     from the closed state and leaves no room for a keyword/length mismatch. */
  .sidebar.is-open { transform: translateX(0); }
  /* The desktop collapse class must not fight the drawer. */
  .sidebar.is-collapsed { margin-left: 0; transform: translateX(-100%); }
  .sidebar.is-collapsed.is-open { transform: translateX(0); }

  .sidebar.is-open ~ .sidebar-backdrop,
  .sidebar-backdrop.is-on { opacity: 1; pointer-events: auto; }

  /* Belt and braces. The real overflow causes are fixed at source with
     min-width:0, but a phone must never end up scrolled sideways with the
     content half off the screen.
     `hidden` first as the fallback for browsers without `clip`; `clip` wins
     where supported because it does not turn the page into a scroll container.
     Safe here either way — below this breakpoint the sidebar is fixed, not
     sticky, so nothing depends on the scroll container. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  body { position: relative; width: 100%; }
}

.brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), #7b3fe4);
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -.5px;
  box-shadow: var(--shadow-1);
}
.brand-text { min-width: 0; }
.brand-name { font-weight: 700; font-size: 14px; letter-spacing: -.02em; }
.brand-sub  { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }

.nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 10px 24px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 8px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 500; font-size: 13.2px;
  text-decoration: none; position: relative;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.nav-item:hover { background: var(--bg-hover); color: var(--ink); text-decoration: none; }
.nav-item .ic { flex: 0 0 18px; color: var(--ink-3); transition: color .13s var(--ease); }
.nav-item:hover .ic { color: var(--ink-2); }
.nav-item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-item.is-active .ic { color: var(--brand); }
.nav-item.is-active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.nav-item .pill {
  margin-left: auto; min-width: 20px; height: 19px; padding: 0 6px;
  border-radius: 10px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* min-width:0 is what stops a wide table forcing the whole page to scroll. */
.main { flex: 1 1 auto; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar-title {
  font-weight: 650; font-size: 15px; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sub { color: var(--ink-3); font-size: 12px; margin-left: 2px; }
.topbar-spacer { flex: 1 1 auto; }

/* The title yields before any control does. */
.topbar > div:not(.topbar-spacer):not(.row) { min-width: 0; }
/* The user block must never wrap onto a second line and double the bar height. */
.topbar .row { flex-wrap: nowrap; }

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: grid; place-items: center; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }

.searchbox {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px; min-width: 220px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-sunk); color: var(--ink-3); cursor: pointer;
  transition: border-color .13s var(--ease), background .13s var(--ease);
}
.searchbox:hover { border-color: var(--line-strong); background: var(--bg-elev); }
.searchbox kbd {
  margin-left: auto; font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-3);
}

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 30px;
  background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: 11.5px;
}

.content {
  flex: 1 1 auto; padding: 20px; max-width: 1560px; width: 100%;
  min-width: 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
@media (max-width: 720px) { .content { padding: 14px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } }

.page-head {
  display: flex; align-items: flex-start; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.page-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.page-head h1 { font-size: 21px; }
.page-head .sub { color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 720px) {
  .page-head { gap: 10px; margin-bottom: 14px; }
  .page-head h1 { font-size: 18.5px; }
  .page-head .sub { font-size: 12.4px; }
  /* Actions go full width and each control gets a real touch target. */
  .page-actions { margin-left: 0; width: 100%; }
  .page-actions > .btn, .page-actions > form { flex: 1 1 auto; }
  .page-actions .btn { min-height: 40px; justify-content: center; }
  .page-actions form { display: flex; gap: 6px; flex-wrap: wrap; }
  .page-actions form .input, .page-actions form .select { min-height: 40px; }
}

.breadcrumb { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--brand); }

/* ==========================================================================
   Cards & layout helpers
   ========================================================================== */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  /* A grid or flex item defaults to min-width:auto, so a wide table inside
     would push the whole page wider than the viewport even though .table-wrap
     scrolls. Every container in that chain has to be allowed to shrink. */
  min-width: 0;
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.card-head > div { min-width: 0; }
.card-head h2, .card-head h3 { font-size: 14.5px; font-weight: 650; }
.card-head .sub { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.card-head .spacer { flex: 1 1 auto; }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }
.card-foot {
  padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--bg-sunk); border-radius: 0 0 var(--radius) var(--radius);
  display: flex; align-items: center; gap: 10px;
}

.grid { display: grid; gap: 16px; }
/* Same reason as .card above: without this a single wide child stretches the
   whole track and the page scrolls sideways. */
.grid > *, .stack > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-sidebar { grid-template-columns: minmax(0,1fr) 340px; }
@media (max-width: 1180px) { .grid-5, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-sidebar { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .grid-2, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.tile {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px;
  box-shadow: var(--shadow-1);
  display: block; color: inherit; text-decoration: none;
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
a.tile:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.tile-label {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 6px;
}
.tile-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 25px; font-weight: 640; letter-spacing: -.02em;
  margin-top: 7px; line-height: 1.1;
}
.tile-value .cur { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-right: 3px; }
.tile-foot { margin-top: 6px; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.tile.is-ok .tile-value { color: var(--ok); }
.tile.is-danger .tile-value { color: var(--danger); }
.tile.is-warn .tile-value { color: var(--warn); }

.delta { font-weight: 650; font-size: 12px; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--bg-elev); --btn-ink: var(--ink); --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border-radius: var(--radius-sm); border: 1px solid var(--btn-line);
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: 13.2px; font-weight: 560; white-space: nowrap;
  cursor: pointer; text-decoration: none; position: relative;
  transition: background .13s var(--ease), border-color .13s var(--ease),
              transform .08s var(--ease), box-shadow .13s var(--ease);
}
.btn:hover { text-decoration: none; background: var(--bg-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.btn .ic { flex: 0 0 auto; }

.btn-primary { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-line: var(--brand); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-danger  { --btn-bg: var(--danger); --btn-ink: #fff; --btn-line: var(--danger); }
.btn-danger:hover { filter: brightness(1.08); background: var(--danger); }
.btn-ok      { --btn-bg: var(--ok); --btn-ink: #fff; --btn-line: var(--ok); }
.btn-ok:hover { filter: brightness(1.08); background: var(--ok); }
.btn-ghost   { --btn-bg: transparent; --btn-line: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--ink); }
.btn-soft    { --btn-bg: var(--brand-soft); --btn-ink: var(--brand); --btn-line: transparent; }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12.4px; border-radius: 6px; }
.btn-lg { height: 42px; padding: 0 20px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }

/* Spinner shown while an AJAX action is in flight. */
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .6s linear infinite;
}
.btn.is-busy > * { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-group .btn.is-on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); z-index: 1; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label, .label {
  display: block; font-size: 12.4px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 5px;
}
.field .req { color: var(--danger); margin-left: 2px; }
.hint { font-size: 11.8px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.hint code { font-size: 11px; background: var(--bg-sunk); padding: 1px 4px; border-radius: 3px; }

.input, .select, .textarea {
  width: 100%; height: 36px; padding: 0 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--ink);
  transition: border-color .13s var(--ease), box-shadow .13s var(--ease), background .13s var(--ease);
  appearance: none;
}
.textarea { height: auto; min-height: 82px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-sunk); color: var(--ink-3); cursor: not-allowed; }
.input[readonly] { background: var(--bg-sunk); }

.select {
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b879c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

.input-money { font-family: var(--mono); text-align: right; }
.input-group { display: flex; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .addon {
  display: grid; place-items: center; padding: 0 11px;
  border: 1px solid var(--line-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-sunk); color: var(--ink-3); font-size: 12.5px; font-weight: 600;
}

/* Password reveal. The wrapper is added by the JS so no template has to know. */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 0; right: 0;
  width: 38px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color .13s var(--ease);
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Inline field errors set by the AJAX form handler. */
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field.has-error .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.field-error { display: none; font-size: 11.8px; color: var(--danger); margin-top: 4px; font-weight: 500; }
.field.has-error .field-error { display: block; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 3px 0; }
.check input[type=checkbox], .check input[type=radio] {
  width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; flex: 0 0 17px;
}
.check span { font-size: 13.2px; }
.check .hint { margin-top: 2px; }

/* Segmented control / toggle cards for tier + mode pickers. */
.choice-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.choice {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  padding: 11px 12px; cursor: pointer; background: var(--bg-elev);
  transition: border-color .13s var(--ease), background .13s var(--ease), box-shadow .13s var(--ease);
  position: relative; display: block;
}
.choice:hover { border-color: var(--ink-3); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-title { font-weight: 640; font-size: 13.4px; display: flex; align-items: center; gap: 7px; }
.choice-sub { font-size: 11.8px; color: var(--ink-3); margin-top: 2px; }
.choice-price { font-family: var(--mono); font-weight: 650; font-size: 15px; margin-top: 6px; }
.choice-price .strike { color: var(--ink-3); text-decoration: line-through; font-size: 12px; font-weight: 400; margin-right: 6px; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.choice:has(input:disabled) { opacity: .5; cursor: not-allowed; background: var(--bg-sunk); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track {
  width: 38px; height: 21px; border-radius: 11px; background: var(--line-strong);
  position: relative; transition: background .16s var(--ease); flex: 0 0 38px;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-1); transition: transform .16s var(--ease);
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }

/* --- searchable select ---------------------------------------------------
   Progressive enhancement over a real <select>: the native element stays in
   the DOM and remains the value the form submits, so nothing downstream has
   to know this exists. Applied automatically to any select with enough
   options to be annoying to scroll. */
.ss { position: relative; }
/* Kept at opacity 0 rather than display:none — a hidden `required` control
   cannot be focused, and the browser refuses to submit the form at all. */
.ss > select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; margin: 0;
}
.ss-btn {
  position: relative; z-index: 1;
  width: 100%; height: 36px; padding: 0 32px 0 11px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .13s var(--ease), box-shadow .13s var(--ease);
}
.ss-btn:hover { border-color: var(--ink-3); }
.ss-btn::after {
  content: ""; position: absolute; right: 11px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .16s var(--ease);
}
.ss.is-open .ss-btn { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.ss.is-open .ss-btn::after { transform: rotate(225deg); margin-top: -2px; }
.ss-btn.is-placeholder { color: var(--ink-3); }
.ss-btn .ss-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field.has-error .ss-btn { border-color: var(--danger); }
.ss > select:disabled + .ss-btn { background: var(--bg-sunk); color: var(--ink-3); cursor: not-allowed; }

.ss-panel {
  position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  padding: 6px; display: flex; flex-direction: column;
  max-height: 320px;
}
.ss-panel.drop-up { top: auto; bottom: calc(100% + 4px); }
.ss-search {
  width: 100%; height: 34px; padding: 0 10px; margin-bottom: 5px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-sunk); color: var(--ink); flex: 0 0 auto;
}
.ss-search:focus { outline: none; border-color: var(--brand); background: var(--bg-elev); }
.ss-list { overflow-y: auto; flex: 1 1 auto; }
.ss-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 9px 3px;
}
.ss-opt {
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13.2px; display: flex; align-items: center; gap: 8px;
}
.ss-opt:hover, .ss-opt.is-active { background: var(--brand-soft); color: var(--brand); }
.ss-opt.is-selected { font-weight: 650; }
.ss-opt.is-selected::after { content: "✓"; margin-left: auto; opacity: .7; }
.ss-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.ss-opt mark { background: transparent; color: var(--brand); font-weight: 700; }
.ss-empty { padding: 14px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

@media (max-width: 720px) {
  .ss-btn { height: 40px; font-size: 16px; }
  .ss-search { height: 40px; font-size: 16px; }
  .ss-opt { padding: 11px 10px; font-size: 15px; }
  .ss-panel { max-height: 60vh; }
}

/* Typeahead / autocomplete */
.typeahead { position: relative; }
.typeahead-menu {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  max-height: 300px; overflow-y: auto; padding: 4px;
}
.typeahead-item { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.2px; }
.typeahead-item small { display: block; color: var(--ink-3); font-size: 11.8px; }
.typeahead-item:hover, .typeahead-item.is-active { background: var(--brand-soft); color: var(--brand); }
.typeahead-item.is-active small { color: var(--brand); opacity: .8; }
.typeahead-empty { padding: 14px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table { font-size: 13.2px; }
.table th {
  text-align: left; font-weight: 640; font-size: 11.4px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--bg-sunk); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--ink); }
.table th .sort-arrow { opacity: 0; margin-left: 4px; font-size: 9px; }
.table th.is-sorted .sort-arrow { opacity: 1; }
.table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background .1s var(--ease); }
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table .money { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }
.table .w-1 { width: 1%; white-space: nowrap; }
.table tfoot td { font-weight: 650; background: var(--bg-sunk); border-top: 2px solid var(--line-strong); border-bottom: 0; }
.table tr.is-danger  { background: var(--danger-soft); }
.table tr.is-warn    { background: var(--warn-soft); }
.table tr.is-clickable { cursor: pointer; }

.table-toolbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.table-toolbar .search { min-width: 210px; flex: 0 1 260px; }
.table-toolbar .select { width: auto; min-width: 130px; }

.table-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3);
}
.pager { margin-left: auto; display: flex; gap: 4px; }
.pager button {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-2);
  cursor: pointer; font-size: 12.6px; font-weight: 550;
}
.pager button:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--line-strong); }
.pager button.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }

/* ==========================================================================
   Badges, chips, states
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px; border-radius: 11px;
  font-size: 11.4px; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
  background: var(--muted-soft); color: var(--ink-2);
}
.badge.ok      { background: var(--ok-soft);     color: var(--ok); }
.badge.warn    { background: var(--warn-soft);   color: var(--warn); }
.badge.danger  { background: var(--danger-soft); color: var(--danger); }
.badge.info    { background: var(--info-soft);   color: var(--info); }
.badge.primary { background: var(--brand-soft);  color: var(--brand); }
.badge.muted   { background: var(--muted-soft);  color: var(--ink-3); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 13px;
  border: 1px solid var(--line-strong); background: var(--bg-elev);
  font-size: 12.4px; color: var(--ink-2); cursor: pointer;
}
.chip:hover { border-color: var(--ink-3); }
.chip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }

.sla { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12.4px; font-weight: 650; }
.sla::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sla.green { color: var(--ok); }
.sla.amber { color: var(--warn); }
.sla.red   { color: var(--danger); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.empty { padding: 46px 20px; text-align: center; color: var(--ink-3); }
.empty .ic { color: var(--line-strong); margin-bottom: 10px; }
.empty h3 { font-size: 14.5px; color: var(--ink-2); margin-bottom: 4px; }
.empty p { font-size: 13px; max-width: 380px; margin: 0 auto 14px; }

/* Skeleton loaders keep layout stable while a fetch is in flight. */
.skel { background: linear-gradient(90deg, var(--bg-sunk) 25%, var(--bg-hover) 50%, var(--bg-sunk) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 5px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-line { height: 11px; margin: 7px 0; }
.skel-row td { padding: 12px; }

/* ==========================================================================
   Alerts / notes
   ========================================================================== */
.note {
  display: flex; gap: 10px; padding: 11px 13px;
  border-radius: var(--radius); font-size: 13px;
  border: 1px solid var(--line); background: var(--bg-sunk); color: var(--ink-2);
  line-height: 1.5;
}
.note .ic { flex: 0 0 18px; margin-top: 1px; }
.note strong { color: var(--ink); }
.note.ok     { background: var(--ok-soft);     border-color: transparent; color: var(--ok); }
.note.warn   { background: var(--warn-soft);   border-color: transparent; color: var(--warn); }
.note.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.note.info   { background: var(--info-soft);   border-color: transparent; color: var(--info); }
.note.ok strong, .note.warn strong, .note.danger strong, .note.info strong { color: inherit; }
.note + .note { margin-top: 9px; }

.rule-ref {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 650;
  padding: 1px 5px; border-radius: 4px; background: var(--brand-soft); color: var(--brand);
  vertical-align: middle;
}

/* ==========================================================================
   Modal / drawer
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11,17,28,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; animation: fadeIn .16s var(--ease) forwards;
}
@keyframes fadeIn { to { opacity: 1; } }
.modal {
  width: 100%; max-width: 560px; max-height: calc(100vh - 40px);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(8px) scale(.99); opacity: 0;
  animation: modalIn .2s var(--ease) forwards;
}
@keyframes modalIn { to { transform: none; opacity: 1; } }
.modal.wide { max-width: 860px; }
.modal.xwide { max-width: 1120px; }
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.modal-head h2 { font-size: 15.5px; }
.modal-head .sub { font-size: 12.2px; color: var(--ink-3); margin-top: 2px; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1 1 auto; }
.modal-foot {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-top: 1px solid var(--line);
  background: var(--bg-sunk); flex: 0 0 auto;
}
.modal-foot .spacer { flex: 1 1 auto; }

/* Slide-over drawer for record detail without losing the list behind it. */
.drawer-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(11,17,28,.5); opacity: 0; animation: fadeIn .16s var(--ease) forwards; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: min(560px, 100vw); background: var(--bg-elev);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  transform: translateX(100%); animation: drawerIn .22s var(--ease) forwards;
}
@keyframes drawerIn { to { transform: none; } }
.drawer.wide { width: min(820px, 100vw); }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toast-host {
  position: fixed; z-index: 200; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 9px; pointer-events: none;
  max-width: min(400px, calc(100vw - 40px));
}
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-elev); border: 1px solid var(--line);
  box-shadow: var(--shadow-3); pointer-events: auto;
  transform: translateX(110%); animation: toastIn .26s var(--ease) forwards;
  border-left: 3px solid var(--ink-3);
}
@keyframes toastIn { to { transform: none; } }
.toast.is-out { animation: toastOut .2s var(--ease) forwards; }
@keyframes toastOut { to { transform: translateX(110%); opacity: 0; } }
.toast.ok     { border-left-color: var(--ok); }
.toast.error  { border-left-color: var(--danger); }
.toast.warn   { border-left-color: var(--warn); }
.toast.info   { border-left-color: var(--info); }
.toast .ic { flex: 0 0 18px; margin-top: 1px; }
.toast.ok .ic { color: var(--ok); }
.toast.error .ic { color: var(--danger); }
.toast.warn .ic { color: var(--warn); }
.toast.info .ic { color: var(--info); }
.toast-body { flex: 1 1 auto; font-size: 13.2px; line-height: 1.45; }
.toast-body strong { display: block; margin-bottom: 1px; }
.toast-close { background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 0; line-height: 1; }

/* ==========================================================================
   Command palette
   ========================================================================== */
.palette-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(11,17,28,.5); backdrop-filter: blur(3px); display: grid; place-items: start center; padding: 12vh 20px 20px; opacity: 0; animation: fadeIn .14s var(--ease) forwards; }
.palette {
  width: 100%; max-width: 580px; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
  transform: translateY(-8px); opacity: 0; animation: modalIn .18s var(--ease) forwards;
}
.palette-input { width: 100%; height: 50px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 15px; }
.palette-input:focus { outline: none; }
.palette-list { max-height: 380px; overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.4px; }
.palette-item .ic { color: var(--ink-3); }
.palette-item small { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }
.palette-item.is-active { background: var(--brand-soft); color: var(--brand); }
.palette-item.is-active .ic, .palette-item.is-active small { color: var(--brand); }

/* ==========================================================================
   Detail lists, timeline, tabs
   ========================================================================== */
.dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 0; font-size: 13.2px; }
.dl dt { color: var(--ink-3); padding: 7px 0; border-bottom: 1px solid var(--line); }
.dl dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); text-align: right; font-weight: 550; }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }
.dl dd.money { font-family: var(--mono); }

.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 16px; }
.tl-item::before {
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-elev); border: 2px solid var(--line-strong);
}
.tl-item.is-key::before { border-color: var(--brand); background: var(--brand); }
.tl-title { font-size: 13.2px; font-weight: 600; }
.tl-meta { font-size: 11.8px; color: var(--ink-3); margin-top: 1px; }
.tl-note { font-size: 12.6px; color: var(--ink-2); margin-top: 3px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  padding: 9px 13px; font-size: 13.2px; font-weight: 570; color: var(--ink-3);
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  background: none; border-top: 0; border-left: 0; border-right: 0;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--brand); border-bottom-color: var(--brand); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.muted { color: var(--ink-3); }
.small { font-size: 12.2px; }
.xs    { font-size: 11.4px; }
.strong{ font-weight: 650; }
.right { text-align: right; }
.center{ text-align: center; }
.nowrap{ white-space: nowrap; }
.mono  { font-family: var(--mono); }
.pos   { color: var(--ok); }
.neg   { color: var(--danger); }
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.hide { display: none; }
@media (max-width: 900px) { .hide-md { display: none !important; } }
@media (max-width: 640px) { .hide-sm { display: none !important; } }


/* ==========================================================================
   Auth screen
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 460px; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } }
.auth-art {
  background: linear-gradient(150deg, #10203f 0%, #1f5fd8 55%, #7b3fe4 100%);
  color: #fff; padding: 46px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-art::after {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 620px; height: 620px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
}
.auth-art h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; max-width: 12ch; }
.auth-art p { color: rgba(255,255,255,.82); max-width: 44ch; font-size: 15px; margin-top: 14px; }
.auth-points { display: grid; gap: 12px; position: relative; }
.auth-point { display: flex; gap: 10px; align-items: flex-start; font-size: 13.4px; color: rgba(255,255,255,.9); }
.auth-form-side { display: grid; place-items: center; padding: 32px; background: var(--bg-elev); }
.auth-card { width: 100%; max-width: 350px; }

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 720px) {
  /* Tap targets. A technician confirming a handover is not using a mouse. */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 32px; }
  .icon-btn { width: 40px; height: 40px; }
  .nav-item { padding: 11px 10px; font-size: 14px; }
  .tab { padding: 11px 14px; }
  .check input[type=checkbox], .check input[type=radio] { width: 20px; height: 20px; flex-basis: 20px; }
  .input, .select { height: 40px; font-size: 16px; }   /* 16px stops iOS zooming on focus */
  .textarea { font-size: 16px; }
  .pw-toggle { height: 40px; }

  .card-head { padding: 12px 13px; flex-wrap: wrap; }
  .card-body { padding: 13px; }
  .card-foot { padding: 11px 13px; flex-wrap: wrap; }

  .tile { padding: 12px 13px; }
  .tile-value { font-size: 21px; }

  /* Toolbars stack rather than squeeze into unusable slivers. */
  .table-toolbar { padding: 10px; }
  .table-toolbar .search { flex: 1 1 100%; min-width: 0; }
  .table-toolbar .select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .table-foot { padding: 10px; }
  .pager { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; }

  .table th, .table td { padding: 10px 11px; }

  /* A detail list reads better stacked than as a cramped two-column grid. */
  .dl { grid-template-columns: 1fr; }
  .dl dt { padding-bottom: 0; border-bottom: 0; font-size: 11.5px; }
  .dl dd { text-align: left; padding-top: 2px; }

  .modal-body { padding: 14px; }
  .modal-head, .modal-foot { padding: 12px 14px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }

  /* Full-width toasts read at arm's length; they also clear the home bar. */
  .toast-host {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: none;
  }

  .drawer, .drawer.wide { width: 100vw; }
  .palette-backdrop { padding: 8vh 12px 12px; }
}

/* Landscape phones and small tablets: keep the denser grids readable. */
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reduced motion
   Honour the OS setting, and make the app degrade to instant rather than
   depending on a transition ever completing.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Print (invoices, vouchers, statements)
   ========================================================================== */



@media print {
  .sidebar, .topbar, .page-actions, .no-print, .toast-host { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; }
  .table th { background: #f3f3f3 !important; }
  a[href]::after { content: ""; }
}


/* ==========================================================================
   Guided setup, quick access and breadcrumbs
   Everything here exists to answer one question fast: what do I do next?
   ========================================================================== */

/* --- next-step banner, carried by the shell on every page --------------- */
.setup-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--brand);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  flex-wrap: wrap;
}
.setup-banner-mark {
  flex: 0 0 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
}
.setup-banner-body { flex: 1 1 220px; min-width: 0; line-height: 1.35; }
.setup-banner-lab {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 1px;
}
.setup-banner-body strong { font-size: 13.6px; color: var(--ink); }
.setup-banner-acts { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }

/* --- progress meter ----------------------------------------------------- */
.setup-meter-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.setup-meter-head .spacer { flex: 1 1 auto; }
.meter {
  height: 7px; border-radius: 99px;
  background: var(--bg-sunk); overflow: hidden;
}
.meter > span {
  display: block; height: 100%;
  background: var(--brand); border-radius: 99px;
  transition: width .35s var(--ease);
}

/* --- the checklist ------------------------------------------------------ */
.setup-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.setup-step {
  display: flex; gap: 14px;
  padding: 15px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.setup-step.is-done { background: var(--bg-sunk); box-shadow: none; }

.setup-mark {
  flex: 0 0 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: 12.5px; font-weight: 700;
  background: var(--bg);
}
.setup-step.is-done .setup-mark {
  background: var(--ok); border-color: var(--ok); color: #fff;
}
/* One mark element, two faces - the toggle only flips a class. */
.setup-tick { display: none; }
.setup-step.is-done .setup-n    { display: none; }
.setup-step.is-done .setup-tick { display: grid; place-items: center; }

.setup-main { min-width: 0; flex: 1 1 auto; }
.setup-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-title h3 { font-size: 14.5px; font-weight: 650; }
.setup-step.is-done .setup-title h3 { color: var(--ink-2); }

.setup-why {
  font-size: 12.8px; color: var(--ink-2);
  margin-top: 4px; max-width: 68ch; line-height: 1.55;
}
.setup-evidence {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px; color: var(--ink-2);
}
.setup-evidence .ic { color: var(--brand); flex: 0 0 auto; }
.setup-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; align-items: center; }

/* --- quick access, sidebar --------------------------------------------- */
.nav-quick { padding: 0 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.quick-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin-bottom: 3px;
  border-radius: var(--radius-sm);
  font-size: 12.9px; font-weight: 550;
  color: var(--ink-2); text-decoration: none;
  background: var(--bg-sunk);
}
.quick-chip:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.quick-chip .ic { flex: 0 0 auto; color: var(--ink-3); }
.quick-chip:hover .ic { color: var(--brand); }
.quick-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- quick access, dashboard strip -------------------------------------- */
.quick-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.quick-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  min-width: 0;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.quick-card:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-1px); }
.quick-card:active { transform: translateY(0); }
.quick-card.is-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.quick-card.is-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.quick-ic {
  flex: 0 0 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand);
}
.quick-card.is-primary .quick-ic { background: rgba(255,255,255,.18); color: var(--brand-ink); }

.quick-txt { min-width: 0; line-height: 1.3; }
.quick-lab {
  display: block; font-size: 13.4px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quick-sub { display: block; font-size: 11.6px; color: var(--ink-3); margin-top: 1px; }
.quick-card.is-primary .quick-sub { color: rgba(255,255,255,.78); }

/* --- breadcrumbs -------------------------------------------------------- */
.crumbs {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--ink-3);
  margin-bottom: 1px; min-width: 0;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs > span:last-child { color: var(--ink-2); font-weight: 550; }
.crumb-sep { display: inline-flex; color: var(--line-strong); }
.crumbs .ic { flex: 0 0 auto; }

/* Only the tail of the trail survives a narrow topbar - the rest would wrap. */
@media (max-width: 900px) {
  .crumbs > a:not(:first-child), .crumbs > .crumb-sep:not(:last-of-type) { display: none; }
}

.show-sm { display: none; }
@media (max-width: 640px) {
  .show-sm { display: inline-flex !important; }
  .setup-banner-acts { width: 100%; }
  .setup-banner-acts .btn { flex: 1 1 auto; justify-content: center; }
  .setup-step { padding: 13px; gap: 11px; }
}


/* ==========================================================================
   Plain-language help bubble
   One sentence, attached to the control it explains. Click, not hover, so it
   works on the phone the counter actually runs on.
   ========================================================================== */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; padding: 0; margin-left: 5px;
  vertical-align: -3px;
  border: 0; border-radius: 50%;
  background: var(--bg-sunk); color: var(--ink-3);
  cursor: pointer; flex: 0 0 auto;
}
.help-btn:hover, .help-btn[aria-expanded="true"] { background: var(--brand); color: var(--brand-ink); }
.help-btn .ic { width: 13px; height: 13px; }

.help-pop {
  position: absolute; z-index: 90;
  max-width: min(280px, calc(100vw - 16px));
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--ink); color: var(--bg-elev);
  font-size: 12.6px; line-height: 1.5; font-weight: 450;
  box-shadow: var(--shadow-3);
}
.help-pop::before {
  content: ""; position: absolute;
  top: -5px; left: var(--arrow, 50%); margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--ink);
}
/* In dark mode --ink is near-white, so the bubble flips to a light panel on a
   dark page. That reads correctly - it is still the inverted surface. */


/* ==========================================================================
   Permission matrix
   A wide grid of checkboxes: the eye needs help finding the changed ones.
   ========================================================================== */
.perm-table th.num, .perm-table td.num { text-align: center; }
.perm-table tbody tr:hover { background: var(--bg-hover); }

.perm-cell {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.perm-cell input { cursor: pointer; width: 16px; height: 16px; margin: 0; }
.perm-cell input:disabled { cursor: not-allowed; opacity: .55; }

/* Anything moved away from the shipped matrix carries a mark, so "what have we
   changed?" is answered by looking rather than by remembering. */
.perm-cell.is-changed { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }