/* ════════════════════════════════════════════════════════════════════
   AIB PORTAL — ENVIRONMENT UI  ·  v2 modern refresh
   One stylesheet for every app-v2 page. Design tokens first, then
   shared components. Pages must NOT define their own colors — always
   use the --aib-* variables so light/dark themes cascade cleanly.

   Brand anchors (never change): navy #0c1c38 · blue #3f7cff · teal #18b89a
   Theme: follows OS setting by default; force with
          <html data-theme="dark"> or <html data-theme="light">.
   ════════════════════════════════════════════════════════════════════ */

/* ── Design tokens · LIGHT (default) ───────────────────────────────── */
:root{
  /* Brand */
  --aib-navy:#0c1c38; --aib-blue:#3f7cff; --aib-blue-600:#2f63d6; --aib-blue-soft:#eaf1ff;
  --aib-teal:#18b89a;
  --aib-brand-grad:linear-gradient(135deg,#4b83ff 0%,#3f7cff 45%,#2f63d6 100%);

  /* Text */
  --aib-ink:#0c1c38; --aib-ink-2:#334360; --aib-muted:#64748b; --aib-faint:#94a3b8;

  /* Lines & surfaces */
  --aib-line:#e6eaf2; --aib-line-strong:#d2d9e6;
  --aib-surface:#ffffff; --aib-surface-2:#fafbfe;
  --aib-surface-glass:rgba(255,255,255,.72);
  --aib-bg:#f5f7fb; --aib-bg-2:#eef2f8;
  --aib-hover:rgba(63,124,255,.06);
  --aib-scrim:rgba(12,28,56,.48);

  /* Semantic */
  --aib-success:#16a34a; --aib-success-soft:#e7f7ec;
  --aib-warning:#d97706; --aib-warning-soft:#fdf2e3;
  --aib-danger:#e11d48;  --aib-danger-soft:#fdeaee;
  --aib-info:#3f7cff;    --aib-info-soft:#eaf1ff;
  --aib-special:#6366f1; --aib-special-soft:#eef0ff; --aib-special-line:#c7cbf7;
  --aib-danger-line:#f6b9c6;
  --aib-wa:#1fa463; --aib-wa-soft:#e3f6e8; --aib-wa-line:#b9e6c6;

  /* Type */
  --aib-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --aib-mono:"SF Mono",ui-monospace,"Cascadia Code",Consolas,monospace;

  /* Radii */
  --aib-r-sm:10px; --aib-r-md:14px; --aib-r-lg:20px; --aib-r-pill:999px;

  /* Spacing scale (4pt rhythm) */
  --aib-s1:4px; --aib-s2:8px; --aib-s3:12px; --aib-s4:16px; --aib-s5:20px;
  --aib-s6:24px; --aib-s8:32px;

  /* Elevation — layered ambient + key light */
  --aib-shadow-sm:0 1px 2px rgba(12,28,56,.05),0 1px 1px rgba(12,28,56,.03);
  --aib-shadow-md:0 2px 6px rgba(12,28,56,.05),0 10px 28px rgba(12,28,56,.07);
  --aib-shadow-lg:0 8px 20px rgba(12,28,56,.10),0 24px 56px rgba(12,28,56,.16);
  --aib-ring:0 0 0 3px rgba(63,124,255,.28);

  /* Motion */
  --aib-ease:cubic-bezier(.4,0,.2,1);
  --aib-spring:cubic-bezier(.34,1.56,.64,1);
  --aib-fast:.14s; --aib-med:.22s;

  --topbar-h:58px;
  --srd-w:400px;
  color-scheme:light;
}

/* ── Design tokens · DARK ──────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --aib-navy:#0a1424; --aib-blue:#5b8dff; --aib-blue-600:#3f7cff; --aib-blue-soft:rgba(63,124,255,.16);
    --aib-teal:#2dd4bf;
    --aib-brand-grad:linear-gradient(135deg,#5b8dff 0%,#3f7cff 55%,#2f63d6 100%);

    --aib-ink:#e8edf7; --aib-ink-2:#c0cbe0; --aib-muted:#8a99b6; --aib-faint:#63739a;

    --aib-line:#242f48; --aib-line-strong:#33415f;
    --aib-surface:#141d33; --aib-surface-2:#1a2440;
    --aib-surface-glass:rgba(18,26,46,.72);
    --aib-bg:#0b1220; --aib-bg-2:#111a2e;
    --aib-hover:rgba(91,141,255,.10);
    --aib-scrim:rgba(0,0,0,.62);

    --aib-success:#34d399; --aib-success-soft:rgba(52,211,153,.14);
    --aib-warning:#fbbf24; --aib-warning-soft:rgba(251,191,36,.14);
    --aib-danger:#fb7185;  --aib-danger-soft:rgba(251,113,133,.14);
    --aib-info:#60a5fa;    --aib-info-soft:rgba(96,165,250,.14);
    --aib-wa:#25b866; --aib-wa-soft:rgba(37,184,102,.16); --aib-wa-line:rgba(37,184,102,.38);
    --aib-special:#a5b4fc; --aib-special-soft:rgba(165,180,252,.14); --aib-special-line:rgba(165,180,252,.32);
    --aib-danger-line:rgba(251,113,133,.34);

    --aib-shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --aib-shadow-md:0 2px 6px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.5);
    --aib-shadow-lg:0 8px 20px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.6);
    --aib-ring:0 0 0 3px rgba(91,141,255,.4);
    color-scheme:dark;
  }
}
/* Explicit override (wins over the media query in both directions) */
:root[data-theme="dark"]{
  --aib-navy:#0a1424; --aib-blue:#5b8dff; --aib-blue-600:#3f7cff; --aib-blue-soft:rgba(63,124,255,.16);
  --aib-teal:#2dd4bf;
  --aib-brand-grad:linear-gradient(135deg,#5b8dff 0%,#3f7cff 55%,#2f63d6 100%);
  --aib-ink:#e8edf7; --aib-ink-2:#c0cbe0; --aib-muted:#8a99b6; --aib-faint:#63739a;
  --aib-line:#242f48; --aib-line-strong:#33415f;
  --aib-surface:#141d33; --aib-surface-2:#1a2440;
  --aib-surface-glass:rgba(18,26,46,.72);
  --aib-bg:#0b1220; --aib-bg-2:#111a2e;
  --aib-hover:rgba(91,141,255,.10);
  --aib-scrim:rgba(0,0,0,.62);
  --aib-success:#34d399; --aib-success-soft:rgba(52,211,153,.14);
  --aib-warning:#fbbf24; --aib-warning-soft:rgba(251,191,36,.14);
  --aib-danger:#fb7185;  --aib-danger-soft:rgba(251,113,133,.14);
  --aib-info:#60a5fa;    --aib-info-soft:rgba(96,165,250,.14);
  --aib-wa:#25b866; --aib-wa-soft:rgba(37,184,102,.16); --aib-wa-line:rgba(37,184,102,.38);
  --aib-special:#a5b4fc; --aib-special-soft:rgba(165,180,252,.14); --aib-special-line:rgba(165,180,252,.32);
  --aib-danger-line:rgba(251,113,133,.34);
  --aib-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --aib-shadow-md:0 2px 6px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.5);
  --aib-shadow-lg:0 8px 20px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.6);
  --aib-ring:0 0 0 3px rgba(91,141,255,.4);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--aib-font);background:var(--aib-bg);color:var(--aib-ink);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  transition:background var(--aib-med) var(--aib-ease),color var(--aib-med) var(--aib-ease);}

/* Accessible keyboard focus everywhere */
:focus-visible{outline:2px solid var(--aib-blue);outline-offset:2px;border-radius:4px}

/* Modern, unobtrusive scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--aib-line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--aib-line-strong);border-radius:999px;
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--aib-muted);background-clip:content-box}

/* ── App shell: sidebar + main column ─────────────────────────────── */
.app-shell{display:flex;min-height:100dvh}
.sidebar{width:224px;flex:0 0 224px;background:var(--aib-navy);color:#c8d3e8;padding:16px 12px;
  display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100dvh;
  background-image:radial-gradient(120% 60% at 0% 0%,rgba(63,124,255,.14),transparent 60%);
  border-right:1px solid rgba(255,255,255,.05);}
.sidebar .brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:15px;
  letter-spacing:-.015em;padding:6px 10px 18px;}
.sidebar .brand .logo{width:32px;height:32px;border-radius:10px;background:var(--aib-brand-grad);
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 4px 12px rgba(63,124,255,.45);}
.sidebar a{position:relative;display:flex;align-items:center;gap:11px;color:#aebad2;text-decoration:none;
  font-size:13px;font-weight:600;padding:9px 11px;border-radius:10px;
  transition:background var(--aib-fast) var(--aib-ease),color var(--aib-fast) var(--aib-ease);}
.sidebar a i{width:17px;text-align:center;font-size:13px;opacity:.85;transition:opacity var(--aib-fast)}
.sidebar a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar a:hover i{opacity:1}
.sidebar a.active{background:linear-gradient(90deg,rgba(63,124,255,.28),rgba(63,124,255,.10));color:#fff;
  box-shadow:inset 0 0 0 1px rgba(91,141,255,.25);}
.sidebar a.active i{opacity:1;color:#fff}
.sidebar a.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--aib-blue);
  box-shadow:0 0 10px rgba(63,124,255,.8);}
/* Count pill on a nav item (Page::sidebarHtml 'badge' + nav-badge.js). A <b>,
   not a <span>: the collapsed rail below hides `.sidebar a span` outright.
   margin-left:auto pushes it to the right edge of the already-flex link, the
   same trick the profile rail's .cnt uses. */
.sidebar .nav-badge{margin-left:auto;min-width:18px;padding:1px 6px;border-radius:var(--aib-r-pill);
  background:var(--aib-danger);color:#fff;font-size:10px;font-weight:800;line-height:16px;
  text-align:center;font-variant-numeric:tabular-nums;font-style:normal}
.sidebar .grow{flex:1}
/* Section headers (Page::navGroups — superadmin only). Same voice as .st-head. */
.sidebar .nav-group-h{display:flex;align-items:center;gap:6px;width:100%;margin:10px 0 2px;padding:0 10px;
  color:#8fa0be;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:0;border-radius:var(--aib-r-sm);text-align:left;cursor:pointer}
.sidebar .nav-group-h:hover{color:#fff}
.sidebar .nav-group-h:focus-visible{outline:2px solid var(--aib-blue);outline-offset:-2px}
.sidebar .nav-group-h .chev{margin-left:auto;font-size:9px;opacity:.8;transition:transform var(--aib-fast) var(--aib-ease)}
.sidebar .nav-group-h[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.sidebar .nav-group{display:flex;flex-direction:column;gap:2px}
.sidebar .nav-group.collapsed{display:none}
.sidebar .brand+.nav-group-h{margin-top:2px}
.sidebar .user{border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding:12px 10px 2px;
  display:flex;gap:10px;align-items:center;}
.sidebar .user .avatar{width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#22d3bd,var(--aib-teal));color:#04281f;
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto;}
.sidebar .user .nm{font-size:12.5px;font-weight:700;color:#fff;line-height:1.2}
.sidebar .user .rl{font-size:10.5px;color:#8fa0bf;text-transform:capitalize}

/* ── Reminders drawer (right side; pushes .app-shell, `srd-` prefix) ──
   Not a modal: the page stays interactive while it is open, so there is no
   focus trap and no aria-modal. Below 1100px there is no room to push, so it
   overlays with a scrim instead. */
.srd{position:fixed;top:0;right:0;bottom:0;width:var(--srd-w);z-index:820;
  background:var(--aib-surface-2);border-left:1px solid var(--aib-line);
  display:flex;flex-direction:column;transform:translateX(101%);
  transition:transform var(--aib-med) var(--aib-ease)}
.srd.open{transform:none}
.srd-scrim{position:fixed;inset:0;background:var(--aib-scrim);z-index:819;display:none}
.app-shell{transition:padding-right var(--aib-med) var(--aib-ease)}
.app-shell.srd-open{padding-right:var(--srd-w)}

.srd-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;
  background:var(--aib-surface);border-bottom:1px solid var(--aib-line)}
.srd-head h2{margin:0;font-size:14px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.srd-head h2 i{font-size:13px;color:var(--aib-blue)}
.srd-head .sync{margin-left:auto;font-size:10.5px;color:var(--aib-faint);font-variant-numeric:tabular-nums}
.srd-x{display:grid;place-items:center;width:28px;height:28px;border:0;background:none;
  border-radius:var(--aib-r-sm);color:var(--aib-muted);cursor:pointer;font-size:13px}
.srd-x:hover{background:var(--aib-hover);color:var(--aib-ink)}
.srd-x:focus-visible{outline:none;box-shadow:var(--aib-ring)}

/* Two filter axes: .fr.state (Show) and .fr.stage (Type). */
.srd-filter{background:var(--aib-surface);border-bottom:1px solid var(--aib-line);
  padding:9px 14px 11px;display:flex;flex-direction:column;gap:7px}
.srd-filter .fr{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.srd-filter .fl{flex:0 0 34px;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--aib-faint)}
.srd-filter .fc{border:1px solid var(--aib-line-strong);background:var(--aib-surface);
  color:var(--aib-ink-2);border-radius:var(--aib-r-pill);padding:4px 11px;font:inherit;
  font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:border-color var(--aib-fast) var(--aib-ease),color var(--aib-fast) var(--aib-ease),
    background var(--aib-fast) var(--aib-ease)}
.srd-filter .fc .n{font-variant-numeric:tabular-nums;opacity:.65;font-weight:800}
.srd-filter .fc:hover{border-color:var(--aib-blue);color:var(--aib-blue)}
.srd-filter .fc:focus-visible{outline:none;box-shadow:var(--aib-ring)}
.srd-filter .fc[aria-pressed="true"]{background:var(--aib-navy);border-color:var(--aib-navy);color:#fff}
.srd-filter .fc[aria-pressed="true"] .n{opacity:.75}
.srd-filter .fr.stage .fc[aria-pressed="true"]{background:var(--aib-blue);border-color:var(--aib-blue)}

.srd-body{flex:1;overflow-y:auto;padding:4px 14px 14px;min-height:0}
.srd-msg{padding:30px 8px;text-align:center;color:var(--aib-muted);font-size:12px;line-height:1.5}
.srd-grp{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:7px;
  margin:0 -14px;padding:12px 14px 6px;background:var(--aib-surface-2);
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.srd-grp .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.srd-grp .n{margin-left:auto;font-size:10px;font-weight:800;color:var(--aib-faint);
  letter-spacing:0;font-variant-numeric:tabular-nums}
.srd-grp.special{color:var(--aib-special)}
.srd-grp.overdue{color:var(--aib-danger)}
.srd-grp.warn{color:var(--aib-warning)}

/* One reminder = one card. Border carries state; fill stays neutral. */
.srd .rc{background:var(--aib-surface);border:1px solid var(--aib-line);
  border-radius:var(--aib-r-md);padding:11px 12px 9px;margin-bottom:8px;box-shadow:var(--aib-shadow-sm)}
.srd .rc.overdue{border-color:var(--aib-danger-line)}
.srd .rc.special{border-color:var(--aib-special-line)}
.rc-top{display:flex;align-items:flex-start;gap:9px}
.rc-nm{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--aib-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-due{margin-left:auto;flex:0 0 auto;border-radius:var(--aib-r-pill);padding:3px 10px;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--aib-bg-2);color:var(--aib-ink-2)}
.rc-due.overdue{background:var(--aib-danger-soft);color:var(--aib-danger)}
.rc-due.warn{background:var(--aib-warning-soft);color:var(--aib-warning)}
.rc-due.special{background:var(--aib-special-soft);color:var(--aib-special)}
.rc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px}
.rc-pl{font-family:var(--aib-mono);font-size:11.5px;font-weight:700;color:var(--aib-ink-2);
  background:var(--aib-bg-2);border-radius:var(--aib-r-sm);padding:2px 7px}
.rc-stage{font-size:10.5px;font-weight:800;border-radius:var(--aib-r-pill);padding:2px 8px;
  background:var(--aib-bg-2);color:var(--aib-ink-2)}
.rc-stage.quote_email{background:var(--aib-info-soft);color:var(--aib-info)}
.rc-stage.call{background:var(--aib-warning-soft);color:var(--aib-warning)}
.rc-stage.bind{background:var(--aib-success-soft);color:var(--aib-success)}
.rc-team{font-size:10.5px;font-weight:700;color:var(--aib-faint);
  border:1px solid var(--aib-line-strong);border-radius:var(--aib-r-pill);padding:1px 7px}
.rc-rule{margin-top:6px;font-size:11px;color:var(--aib-muted)}
.rc-rule b{font-weight:700;color:var(--aib-ink-2)}
.rc-note{display:flex;gap:6px;align-items:flex-start;margin-top:7px;padding:6px 8px;
  background:var(--aib-special-soft);border-radius:var(--aib-r-sm);
  font-size:11px;font-style:italic;color:var(--aib-special)}
.rc-act{display:flex;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid var(--aib-line)}
.srd .ab{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--aib-line-strong);
  background:var(--aib-surface);color:var(--aib-ink-2);border-radius:var(--aib-r-sm);
  padding:5px 10px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none}
.srd .ab:hover{border-color:var(--aib-blue);color:var(--aib-blue);background:var(--aib-hover)}
.srd .ab:focus-visible{outline:none;box-shadow:var(--aib-ring)}
.srd .ab.primary{background:var(--aib-blue);border-color:var(--aib-blue);color:#fff}
.srd .ab.primary:hover{background:var(--aib-blue-600);border-color:var(--aib-blue-600);color:#fff}

.srd-foot{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-top:1px solid var(--aib-line);background:var(--aib-surface)}
.srd-foot a{font-size:12px;font-weight:700;color:var(--aib-blue);text-decoration:none}
.srd-foot a:hover{text-decoration:underline}
.srd-foot .hint{margin-left:auto;font-size:10.5px;color:var(--aib-faint)}

/* Topbar trigger: reuses .btn.ghost.icon, adds the count. */
.srd-bell{position:relative}
.topbar .srd-bell.armed{border-color:var(--aib-danger);color:var(--aib-danger);background:var(--aib-danger-soft)}
.srd-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--aib-r-pill);background:var(--aib-danger);color:#fff;font-size:10.5px;
  font-weight:800;line-height:15px;text-align:center;border:2px solid var(--aib-surface);
  font-variant-numeric:tabular-nums}

@media (max-width:1100px){
  .app-shell.srd-open{padding-right:0}
  .srd{box-shadow:var(--aib-shadow-lg)}
  .srd-scrim.open{display:block}
}
@media (max-width:640px){ .srd{width:100vw} }

.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
.page-pad{padding:24px;max-width:1400px;width:100%;margin:0 auto;display:flex;
  flex-direction:column;gap:18px;}

/* ── Sticky topbar (glass) ─────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:60;min-height:var(--topbar-h);background:var(--aib-surface-glass);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--aib-line);display:flex;align-items:center;gap:14px;padding:0 24px;}
.topbar h1{margin:0;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.topbar .spacer{flex:1}
.topbar .crumb{font-size:11.5px;color:var(--aib-faint);display:flex;gap:6px;align-items:center;white-space:nowrap;}
.topbar .crumb b{color:var(--aib-muted);font-weight:600}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--aib-line-strong);
  background:var(--aib-surface);color:var(--aib-ink-2);font-family:inherit;font-weight:600;
  font-size:12.5px;padding:8px 14px;border-radius:var(--aib-r-sm);cursor:pointer;
  transition:transform var(--aib-fast) var(--aib-ease),border-color var(--aib-fast) var(--aib-ease),
    background var(--aib-fast) var(--aib-ease),color var(--aib-fast) var(--aib-ease),box-shadow var(--aib-fast) var(--aib-ease);
  text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.btn:hover{border-color:var(--aib-blue);color:var(--aib-blue);background:var(--aib-hover)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--aib-brand-grad);border-color:transparent;color:#fff;
  box-shadow:0 2px 8px rgba(63,124,255,.32);}
.btn.primary:hover{color:#fff;box-shadow:0 4px 14px rgba(63,124,255,.42);filter:brightness(1.04)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--aib-muted)}
.btn.ghost:hover{color:var(--aib-blue);background:var(--aib-blue-soft)}
.btn.danger-o{color:var(--aib-danger);border-color:color-mix(in srgb,var(--aib-danger) 45%,transparent)}
.btn.danger-o:hover{background:var(--aib-danger-soft);border-color:var(--aib-danger);color:var(--aib-danger)}
.btn.success{background:var(--aib-success);border-color:var(--aib-success);color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb,var(--aib-success) 35%,transparent)}
.btn.success:hover{color:#fff;filter:brightness(1.05)}
.btn.sm{padding:6px 11px;font-size:11.5px}
.btn.icon{padding:8px 10px}
.btn.block{width:100%;justify-content:center;padding:10px 14px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;filter:none}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card{background:var(--aib-surface);border:1px solid var(--aib-line);border-radius:var(--aib-r-md);
  box-shadow:var(--aib-shadow-sm);overflow:hidden;
  transition:box-shadow var(--aib-med) var(--aib-ease),border-color var(--aib-med) var(--aib-ease);}
.card-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--aib-line);}
.card-head h2{margin:0;font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:9px;letter-spacing:-.015em;}
.card-head h2 i{color:var(--aib-blue);font-size:13px}
.card-head .spacer{flex:1}
.card-body{padding:18px}
.card-body.flush{padding:0}

/* ── Info grid (read-only label/value blocks) ──────────────────────── */
.igroup{margin-bottom:20px}
.igroup:last-child{margin-bottom:0}
.igroup-title{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aib-faint);display:flex;align-items:center;gap:7px;margin-bottom:12px;}
.igroup-title::after{content:"";flex:1;height:1px;background:var(--aib-line)}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 20px}
.iitem .lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--aib-muted);}
.iitem .val{font-size:13.5px;font-weight:600;color:var(--aib-ink);margin-top:2px;word-break:break-word;}
.iitem.wide{grid-column:1/-1}

/* ── Tables ────────────────────────────────────────────────────────── */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--aib-muted);
  text-align:left;padding:11px 14px;background:var(--aib-bg-2);border-bottom:1px solid var(--aib-line);white-space:nowrap;}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--aib-line);vertical-align:middle;color:var(--aib-ink-2);}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background var(--aib-fast) var(--aib-ease)}
.tbl tr:hover td{background:var(--aib-blue-soft)}
.tbl .nm{font-weight:700;color:var(--aib-ink)}

/* ── Tags & pills ──────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;border-radius:var(--aib-r-pill);
  padding:3px 10px;line-height:1.5;}
.tag.ok{background:var(--aib-success-soft);color:var(--aib-success)}
.tag.warn{background:var(--aib-warning-soft);color:var(--aib-warning)}
.tag.bad{background:var(--aib-danger-soft);color:var(--aib-danger)}
.tag.info{background:var(--aib-info-soft);color:var(--aib-info)}
.tag.neutral{background:var(--aib-bg-2);color:var(--aib-muted)}
/* ── Callouts ──────────────────────────────────────────────────────────
   Block-level message panel. Distinct from .tag on purpose: a tag is an
   inline-flex pill sized for one word, and rich content (a validation list,
   a field-by-field diff) put inside one collapses — <br>s become flex items
   and long values cannot wrap. Anything multi-line belongs here instead. */
.callout{display:block;border-radius:var(--aib-r-md);padding:12px 14px;
  font-size:12.5px;font-weight:500;line-height:1.55;border:1px solid transparent;
  overflow-wrap:anywhere;}
.callout.bad{background:var(--aib-danger-soft);color:var(--aib-danger);border-color:var(--aib-danger)}
.callout.info{background:var(--aib-info-soft);color:var(--aib-info);border-color:var(--aib-info)}
.callout.warn{background:var(--aib-warning-soft);color:var(--aib-warning);border-color:var(--aib-warning)}
.callout .co-h{font-weight:800;font-size:13px;letter-spacing:-.01em}
.callout .co-sub{font-weight:600;opacity:.85;margin-top:2px}
.callout .co-foot{margin-top:10px;padding-top:9px;border-top:1px solid currentColor;
  opacity:.75;font-size:11.5px}
.callout ul{margin:6px 0 0;padding-left:18px}

/* Field-by-field change list: label, then current value, then new value.
   Stacked rather than columned because the values run long (full vehicle-type
   descriptions, comment strings) and the form column is narrow. */
.diff-list{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.diff-list li{display:grid;gap:2px}
.diff-list .d-f{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  opacity:.7}
.diff-list .d-from,.diff-list .d-to{display:grid;grid-template-columns:13px 1fr;gap:6px;
  align-items:start;overflow-wrap:anywhere}
.diff-list .d-from{opacity:.6}
.diff-list .d-to{font-weight:700}
.diff-list .d-mark{opacity:.75;font-weight:700}
/* Struck on the value span only. text-decoration inherits into descendants and
   cannot be switched off further down, so putting it on .d-from would score
   through the "−" marker and the "(empty)" placeholder as well. */
.diff-list .d-from .d-val{text-decoration:line-through;text-decoration-thickness:1px}
.diff-list .d-empty{font-style:italic;opacity:.65}

/* Worksheet cross-team notice (WorksheetRenderer::foreignTeamNotice) — printed
   and emailed with the worksheet itself, so --aib-space-2 from the plan maps
   to the real 4pt-scale token --aib-s2; --aib-warning/--aib-surface-2 already
   exist verbatim. Kept below the .callout/.diff-list group rather than inside
   it — it is not part of that component family, just a neighbor that reuses
   the same warning tone. */
.ws-foreign-team{margin:0 0 var(--aib-s2);padding:var(--aib-s2);
  border-left:3px solid var(--aib-warning);background:var(--aib-surface-2);font-weight:600;}

/* Vehicle-list foreign-team badge (VehicleListController row.scope, Task 10) —
   a courtesy signal only, matching the small-badge look of .tag/.pill/.chip
   .n elsewhere in this file (r-pill, not r-sm — nothing here uses r-sm for a
   badge this small). TeamGate::assertTeam() on the server is what actually
   refuses the write; the "disabled" attribute this pairs with in vehicles.js
   is not the enforcement. */
.team-badge--foreign{display:inline-block;margin-left:var(--aib-s1);padding:1px var(--aib-s2);
  border-radius:var(--aib-r-pill);background:var(--aib-surface-2);color:var(--aib-muted);
  font-size:10.5px;font-weight:700;}
tr.is-foreign-team{opacity:.75}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  border-radius:var(--aib-r-pill);padding:4px 12px;letter-spacing:.02em;}
.pill.status{background:linear-gradient(135deg,#22d3bd,var(--aib-teal));color:#04281f}

/* ── Metrics (dashboard stat cards) ────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.metric{position:relative;background:var(--aib-surface);border:1px solid var(--aib-line);border-radius:var(--aib-r-md);
  padding:14px 16px;text-align:center;box-shadow:var(--aib-shadow-sm);overflow:hidden;
  transition:transform var(--aib-med) var(--aib-ease),box-shadow var(--aib-med) var(--aib-ease);}
.metric:hover{transform:translateY(-2px);box-shadow:var(--aib-shadow-md)}
.metric .mv{font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--aib-ink);font-variant-numeric:tabular-nums}
.metric .mv small{font-size:12px;color:var(--aib-muted);font-weight:700}
.metric .mv.date{font-size:15px}
.metric .ml{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--aib-muted);margin-top:3px;}
.metric.hl{background:linear-gradient(135deg,var(--aib-blue-soft),transparent);border-color:color-mix(in srgb,var(--aib-blue) 30%,var(--aib-line))}
.metric.hl .mv{color:var(--aib-blue-600)}
.metric.warn{background:linear-gradient(135deg,var(--aib-warning-soft),transparent);border-color:color-mix(in srgb,var(--aib-warning) 30%,var(--aib-line))}
.metric.warn .mv{color:var(--aib-warning)}
.metric.bad{background:linear-gradient(135deg,var(--aib-danger-soft),transparent);border-color:color-mix(in srgb,var(--aib-danger) 30%,var(--aib-line))}
.metric.bad .mv{color:var(--aib-danger)}

/* ── Progress bars ─────────────────────────────────────────────────── */
.bar{background:var(--aib-bg-2);border-radius:var(--aib-r-pill);height:10px;overflow:hidden}
.bar>span{display:block;height:100%;border-radius:var(--aib-r-pill);background:var(--aib-brand-grad);
  transition:width var(--aib-med) var(--aib-ease)}

/* ── Forms ─────────────────────────────────────────────────────────── */
.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px 16px}
.f-item{display:flex;flex-direction:column;gap:5px}
.f-item.wide{grid-column:1/-1}
.f-item label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--aib-muted);}
.inp{font-family:inherit;font-size:13px;color:var(--aib-ink);border:1px solid var(--aib-line-strong);
  border-radius:var(--aib-r-sm);padding:8px 11px;background:var(--aib-surface);width:100%;
  transition:border-color var(--aib-fast) var(--aib-ease),box-shadow var(--aib-fast) var(--aib-ease);}
.inp::placeholder{color:var(--aib-faint)}
.inp:hover{border-color:var(--aib-muted)}
.inp:focus{outline:none;border-color:var(--aib-blue);box-shadow:var(--aib-ring)}
textarea.inp{resize:vertical;min-height:64px;line-height:1.55}
.f-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--aib-line);}
.form-err{color:var(--aib-danger);font-size:12px;font-weight:600;min-height:1.2em;margin-top:.6rem}
.form-ok{color:var(--aib-success);font-size:12.5px;font-weight:600;margin-top:.6rem}
.muted{color:var(--aib-muted)}

/* ── Empty state ───────────────────────────────────────────────────── */
.empty{padding:28px;text-align:center;color:var(--aib-faint);font-size:12.5px}
.empty i{font-size:24px;display:block;margin-bottom:10px;opacity:.5}

/* ── Auth screens (login) ──────────────────────────────────────────── */
.auth-bg{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,var(--aib-navy) 0%,#14294e 55%,#1b3563 100%);position:relative;overflow:hidden;}
.auth-bg::after{content:"";position:absolute;right:-90px;top:-110px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(63,124,255,.38),transparent 70%);filter:blur(6px);}
.auth-bg::before{content:"";position:absolute;left:-120px;bottom:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,184,154,.22),transparent 70%);filter:blur(6px);}
.auth-card{position:relative;z-index:1;background:var(--aib-surface);border:1px solid var(--aib-line);
  border-radius:var(--aib-r-lg);box-shadow:var(--aib-shadow-lg);width:100%;max-width:400px;padding:32px 32px 26px;}
.auth-card .brandrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-card .brandrow .logo{width:40px;height:40px;border-radius:12px;background:var(--aib-brand-grad);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 16px rgba(63,124,255,.4);}
.auth-card .brandrow b{font-size:16px;letter-spacing:-.02em}
.auth-card .brandrow .s{display:block;font-size:11px;color:var(--aib-muted);font-weight:500}
.auth-card h1{font-size:17px;margin:0 0 4px;letter-spacing:-.02em}
.auth-card .sub{font-size:12.5px;color:var(--aib-muted);margin:0 0 18px}
.auth-card .f-item{margin-bottom:14px}
.otp-inp{font-family:var(--aib-mono);font-size:20px !important;letter-spacing:.4em;text-align:center;font-weight:700;}
.auth-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--aib-line);
  font-size:11px;color:var(--aib-faint);text-align:center;}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{width:66px;flex-basis:66px;padding:14px 8px}
  .sidebar .brand span,.sidebar a span,.sidebar .user .meta{display:none}
  .sidebar a{justify-content:center}
  .sidebar a.active::before{left:-8px}
  /* collapsed: header text goes, a hairline keeps the sections apart */
  .sidebar .nav-group-h{font-size:0;margin:6px 4px 2px;padding:0;border-top:1px solid rgba(255,255,255,.09)}
  .sidebar .nav-group-h .chev{display:none}   /* a lone chevron in the 66px rail reads as noise */
  /* No room for a pill beside the title when there is no title: it becomes a
     corner badge over the icon, the way the topbar bell's count does.
     .sidebar a is already position:relative, so this needs no other change. */
  .sidebar a .nav-badge{position:absolute;top:2px;right:6px;margin-left:0;min-width:16px;
    padding:0 4px;font-size:9.5px;line-height:14px;border:2px solid var(--aib-navy)}
  .page-pad{padding:16px}
}

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

/* ════════════════════════════════════════════════════════════════════
   PLAIN VARIANTS + LIST UI (filters, search, pagination)
   ════════════════════════════════════════════════════════════════════ */

/* ── Plain (flat) variants — minimal chrome for dashboards/reports ── */
.card.plain{box-shadow:none;border-radius:var(--aib-r-md)}
.card.plain .card-head{padding:13px 16px;background:transparent}
.card.plain .card-head h2{font-size:13.5px}
.card.plain .card-head h2 i{color:var(--aib-muted)}
.metric.plain{box-shadow:none;background:var(--aib-surface);border-radius:var(--aib-r-md);
  text-align:left;padding:13px 15px;}
.metric.plain:hover{transform:none;box-shadow:var(--aib-shadow-sm)}
.metric.plain .mv{font-size:20px}
.metric.plain .ml{margin-top:2px}
.tbl.plain th{background:transparent;border-bottom:1px solid var(--aib-line-strong)}
.tbl.plain tr:hover td{background:var(--aib-hover)}

/* ── Filter bar (standard for every listing/report table) ─────────── */
.filterbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--aib-line);background:var(--aib-surface-2);}
.filterbar .inp,.filterbar select.inp{width:auto;min-width:140px;height:36px;background:var(--aib-surface)}
.filterbar label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--aib-muted);display:flex;flex-direction:column;gap:3px;}
.filterbar .spacer{flex:1}
.filterbar .count{font-size:11.5px;color:var(--aib-muted);font-weight:600;white-space:nowrap}

/* Search box with icon */
.search{position:relative;display:inline-flex;align-items:center}
.search i{position:absolute;left:11px;font-size:11.5px;color:var(--aib-faint);pointer-events:none}
.search .inp{padding-left:31px;min-width:210px}

/* ── Pagination (25/page standard) ─────────────────────────────────── */
.pager{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--aib-line);
  background:var(--aib-surface-2);flex-wrap:wrap;}
.pager .info{font-size:11.5px;color:var(--aib-muted);font-weight:600}
.pager .spacer{flex:1}
.pager .btn.pg{padding:6px 12px;font-size:11.5px}
.pager .btn.pg:disabled{opacity:.4;cursor:not-allowed;border-color:var(--aib-line)}
.pager .pgno{font-size:12px;font-weight:800;min-width:70px;text-align:center;color:var(--aib-ink-2)}

/* ── Chips / segmented status tabs (list filtering) ───────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;line-height:1.4;
  padding:6px 13px;border-radius:var(--aib-r-pill);border:1px solid var(--aib-line-strong);
  background:var(--aib-surface);color:var(--aib-ink-2);cursor:pointer;white-space:nowrap;
  transition:background var(--aib-fast) var(--aib-ease),border-color var(--aib-fast) var(--aib-ease),
    color var(--aib-fast) var(--aib-ease),box-shadow var(--aib-fast) var(--aib-ease);}
.chip:hover{border-color:var(--aib-blue);color:var(--aib-blue);background:var(--aib-hover)}
.chip.active{background:var(--aib-brand-grad);border-color:transparent;color:#fff;
  box-shadow:0 2px 8px rgba(63,124,255,.3)}
.chip .n{font-size:10px;font-weight:800;padding:1px 7px;border-radius:var(--aib-r-pill);
  background:var(--aib-bg-2);color:var(--aib-muted);min-width:20px;text-align:center}
.chip.active .n{background:rgba(255,255,255,.25);color:#fff}

/* ── Placeholder for not-yet-wired cell values ────────────────────── */
.ph{color:var(--aib-faint)}

/* ── Table utilities ───────────────────────────────────────────────── */
.tbl .mono{font-family:var(--aib-mono);font-size:11.5px;letter-spacing:.03em}
/* Descendant-scoped on purpose: (0,2,0) has to outrank `.tbl th` above,
   otherwise the header stays left over a right-aligned column. */
.tbl .num,.tbl .acct-num,.tbl .rc-num,.tbl .tl-num{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.sortable{cursor:pointer;user-select:none;transition:color var(--aib-fast) var(--aib-ease)}
.tbl th.sortable:hover{color:var(--aib-blue)}
.tbl th.sortable i{margin-left:4px;font-size:9px;opacity:.6}
.tbl-scroll{overflow-x:auto}
.rowlink{cursor:pointer}

/* ── Quick search (topbar modal, Ctrl+K) ──────────────────────────── */
.qs-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--aib-r-pill);
  border:1px solid var(--aib-line);background:var(--aib-surface-2);color:var(--aib-muted);
  font:500 12.5px var(--aib-font);cursor:pointer;transition:all var(--aib-fast) var(--aib-ease)}
.qs-btn:hover{border-color:var(--aib-blue);color:var(--aib-blue);background:var(--aib-blue-soft)}
.qs-btn .kbd{font:600 10px var(--aib-mono);padding:2px 6px;border-radius:6px;
  border:1px solid var(--aib-line-strong);background:var(--aib-surface);color:var(--aib-faint)}
.qs-overlay{position:fixed;inset:0;background:var(--aib-scrim);z-index:900;display:none;
  align-items:flex-start;justify-content:center;padding:9vh 16px 16px}
.qs-overlay.open{display:flex}
.qs-box{width:100%;max-width:780px;background:var(--aib-surface);border-radius:var(--aib-r-lg);
  box-shadow:var(--aib-shadow-lg);border:1px solid var(--aib-line);overflow:hidden}
.qs-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--aib-line)}
.qs-head i{color:var(--aib-muted)}
.qs-input{flex:1;border:0;outline:0;background:transparent;color:var(--aib-ink);
  font:500 15px var(--aib-font)}
.qs-hint{font-size:11.5px;color:var(--aib-faint);padding:0 16px 10px}
.qs-results{max-height:52vh;overflow-y:auto}
/* Grouped results: one .qs-group per plate, one .qs-rec per underlying record. */
.qs-group{border-top:1px solid var(--aib-line)}
.qs-ghead{display:flex;align-items:center;gap:12px;padding:9px 16px;text-decoration:none;
  color:var(--aib-ink);background:var(--aib-surface-2)}
.qs-ghead .plate{font:700 13px var(--aib-mono);color:var(--aib-blue);min-width:92px}
.qs-ghead .who{flex:1;min-width:0;font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-ghead .tag{flex:0 0 auto}
.qs-ghead.nolink{cursor:default}
a.qs-ghead:hover,a.qs-ghead.sel{background:var(--aib-hover)}

.qs-rec{display:grid;grid-template-columns:88px minmax(0,1fr) auto 84px;align-items:center;
  gap:10px;padding:7px 16px 7px 28px;text-decoration:none;color:var(--aib-ink);
  border-top:1px solid var(--aib-line);transition:background var(--aib-fast) var(--aib-ease)}
a.qs-rec:hover,a.qs-rec.sel{background:var(--aib-hover)}
.qs-rec.nolink{cursor:default}
.qs-rec .kind{font:600 10.5px var(--aib-font);text-transform:uppercase;letter-spacing:.03em;
  padding:2px 7px;border-radius:var(--aib-r-pill);text-align:center;
  background:var(--aib-surface-2);color:var(--aib-muted);border:1px solid var(--aib-line)}
/* One colour per source so a group's mix of records is readable at a glance. */
.qs-rec .kind.workflow{color:var(--aib-blue);border-color:var(--aib-blue);background:var(--aib-blue-soft)}
.qs-rec .kind.qr{color:var(--aib-success);border-color:var(--aib-success);background:var(--aib-success-soft)}
.qs-rec .kind.renewal{color:var(--aib-warning);border-color:var(--aib-warning);background:var(--aib-warning-soft)}
.qs-rec .st{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-rec .meta{font-size:11.5px;color:var(--aib-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-rec .when{font:500 11.5px var(--aib-mono);color:var(--aib-faint);text-align:right}
.qs-more{padding:6px 16px 8px 28px;font-size:11px;color:var(--aib-faint);
  border-top:1px solid var(--aib-line)}

@media (max-width:640px){
  .qs-rec{grid-template-columns:80px minmax(0,1fr) 76px}
  .qs-rec .meta{display:none}
}
.qs-empty{padding:22px 16px;text-align:center;color:var(--aib-muted);font-size:13px}
/* A source failed server-side: the missing lines are unverified, not absent. */
.qs-degraded{display:flex;align-items:flex-start;gap:8px;padding:9px 16px;font-size:12px;
  line-height:1.45;color:var(--aib-warning);background:var(--aib-warning-soft);
  border-bottom:1px solid var(--aib-line)}
.qs-degraded i{margin-top:2px;flex:0 0 auto}

/* ── Status-card grid (admin dashboard) ───────────────────────────── */
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.status-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  padding:16px 12px 14px;border-radius:var(--aib-r-md);border:1.5px solid var(--aib-line);
  background:var(--aib-surface);text-decoration:none;color:inherit;
  transition:all var(--aib-fast) var(--aib-ease)}
.status-card:hover{border-color:var(--aib-blue);background:var(--aib-hover);box-shadow:var(--aib-shadow-md)}
.status-card .sc-icon{font-size:19px;color:var(--aib-muted);margin-bottom:4px}
.status-card .sc-count{font-size:26px;font-weight:700;color:var(--aib-ink);line-height:1}
.status-card .sc-name{font-size:11px;font-weight:700;color:var(--aib-ink-2);
  text-transform:uppercase;letter-spacing:.04em}
.status-card .sc-hint{font-size:10.5px;color:var(--aib-faint);margin-top:2px}
.status-card .sc-rtd{font-size:10.5px;font-weight:700;color:var(--aib-danger);margin-top:4px}
.status-card.tone-ok{border-color:var(--aib-success)} .status-card.tone-ok .sc-icon,.status-card.tone-ok .sc-count{color:var(--aib-success)}
.status-card.tone-bad{border-color:var(--aib-danger)} .status-card.tone-bad .sc-icon,.status-card.tone-bad .sc-count{color:var(--aib-danger)}
.status-card.tone-warn{border-color:var(--aib-warning)} .status-card.tone-warn .sc-icon,.status-card.tone-warn .sc-count{color:var(--aib-warning)}
.sc-flags{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:5px}
.sc-flag{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:var(--aib-r-pill);white-space:nowrap}
.sc-flag.urgent{background:var(--aib-danger-soft);color:var(--aib-danger)}
.sc-flag.chase{background:var(--aib-warning-soft);color:var(--aib-warning)}
.sc-flag.sgcm{background:var(--aib-info-soft);color:var(--aib-info)}
.sc-flag.buying{background:var(--aib-success-soft);color:var(--aib-success)}
/* A flag pill that drills into its own slice of the card's list. It cannot be an
   <a> — the card around it already is one — so dashboard-admin.php intercepts the
   click and only the hover ring marks it as clickable. currentColor keeps each
   pill's own tone; no second palette to maintain. */
.sc-flag--link{cursor:pointer}
.sc-flag--link:hover{box-shadow:inset 0 0 0 1px currentColor}
.sc-flag--link:focus-visible{outline:2px solid var(--aib-blue);outline-offset:1px}
.status-card .tag{margin-top:4px;font-size:9.5px}
/* A grid whose numbers are being refetched: dimmed, not blanked, so the layout
   does not jump and nobody reads the old figures as the new ones. */
.is-loading{opacity:.5;pointer-events:none;transition:opacity var(--aib-fast) var(--aib-ease)}
/* Per-team split inside a status card — the parts of the number above it. */
.sc-teams{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;margin-top:7px;width:100%;
  padding-top:6px;border-top:1px solid var(--aib-line)}
.sc-team{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font-size:10.5px;font-weight:700;color:var(--aib-ink-2);font-variant-numeric:tabular-nums}
.sc-team b{font-weight:700;font-size:9.5px;letter-spacing:.04em;color:var(--aib-muted)}
.sc-team.zero{color:var(--aib-faint)} .sc-team.zero b{color:var(--aib-faint)}
/* A part that is its own link. Same look as .sc-team -- only the hover marks it
   as clickable. Nothing renders one today (the Renewal Checking card's pills
   were removed; the whole card is the link now); kept because .sc-team parts are
   where a per-part drill-down would land. */
a.sc-team{text-decoration:none;border-radius:var(--aib-r-sm);padding:1px 3px;margin:-1px -3px}
a.sc-team:hover{background:var(--aib-hover);color:var(--aib-blue)}
a.sc-team:hover b{color:var(--aib-blue)}

/* ── Generic modal (aib flavor, no Bootstrap) ─────────────────────── */
.mdl-overlay{position:fixed;inset:0;background:var(--aib-scrim);z-index:850;display:none;
  align-items:flex-start;justify-content:center;padding:4vh 16px;overflow-y:auto}
.mdl-overlay.open{display:flex}
.mdl-box{width:100%;max-width:1000px;background:var(--aib-surface);border-radius:var(--aib-r-lg);
  box-shadow:var(--aib-shadow-lg);border:1px solid var(--aib-line);margin-bottom:4vh}
.mdl-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--aib-line)}
.mdl-head h3{margin:0;font-size:15px;font-weight:700;color:var(--aib-ink)}
.mdl-body{padding:18px}
.mdl-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--aib-line)}

/* ── Duplicate badge (QR raw) ─────────────────────────────────────── */
.dup-badge{font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:var(--aib-r-pill);
  background:var(--aib-warning-soft);color:var(--aib-warning);white-space:nowrap}
.dup-badge.hard{background:var(--aib-danger);color:#fff}

/* ── Floating chat bubble ─────────────────────────────────────────── */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:800;width:52px;height:52px;border-radius:50%;
  background:var(--aib-brand-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:var(--aib-shadow-lg);text-decoration:none;
  transition:transform var(--aib-fast) var(--aib-spring),box-shadow var(--aib-fast) var(--aib-ease)}
.chat-fab:hover{transform:translateY(-2px) scale(1.05)}
.chat-fab .fab-tip{position:absolute;right:60px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--aib-navy);color:#fff;font:600 11.5px var(--aib-font);padding:5px 10px;
  border-radius:8px;opacity:0;pointer-events:none;transition:opacity var(--aib-fast) var(--aib-ease)}
.chat-fab:hover .fab-tip{opacity:1}
/* Unread count on the bubble (chat-badge.js). Hidden at zero and while unknown. */
.chat-fab .fab-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  border-radius:var(--aib-r-pill);background:var(--aib-danger);color:#fff;font:800 11px/20px var(--aib-font);
  text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--aib-bg)}

/* ════════════════════════════════════════════════════════════════════
   Settings → AI Corrections
   ════════════════════════════════════════════════════════════════════ */
.aic-chat{ max-height:18rem; overflow-y:auto; border:1px solid var(--aib-line); border-radius:var(--aib-r-md); padding:var(--aib-s4); margin-bottom:var(--aib-s4); }
.aic-msg{ display:grid; gap:.15rem; margin-bottom:var(--aib-s3); font-size:.9rem; }
.aic-msg b{ color:var(--aib-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.aic-user span{ color:var(--aib-ink); }
.aic-assistant span{ color:var(--aib-ink); }
.aic-draft{ border:1px solid var(--aib-blue); border-radius:var(--aib-r-md); padding:var(--aib-s4); margin-bottom:var(--aib-s4); }
.aic-draft-head{ font-size:.85rem; margin-bottom:var(--aib-s2); }
/* The note is up to 500 chars feeding a privileged prompt position — never clamp its
   height so the tail is hidden; resize:vertical lets the reviewer expand it further. */
.aic-draft textarea{ width:100%; min-height:8rem; font:inherit; resize:vertical; }
.aic-draft-actions{ display:flex; gap:var(--aib-s2); margin-top:var(--aib-s2); }
.aic-form{ display:flex; gap:var(--aib-s2); margin-bottom:var(--aib-s6); }
.aic-form input{ flex:1; }
.aic-note{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--aib-s4); padding:var(--aib-s3) 0; border-bottom:1px solid var(--aib-line); font-size:.9rem; }

/* ── Settings → Quotation Slip ─────────────────────────────────────── */
/* Prefix is `qss-`, NOT `qs-`: the Ctrl+K Quick Search overlay already owns
   bare `.qs-group` and `.qs-field` unscoped in this file, and shell-tools.js
   renders that overlay on every page including settings.php. Sharing the
   prefix silently inherits its borders. The slip modal uses `qsl-`. */
.qss-settings{ display:grid; gap:16px; }
.qss-card{
  border:1px solid var(--aib-line); border-radius:10px;
  padding:16px; background:var(--aib-surface);
}
.qss-card h6{ margin:0 0 4px; font-size:13px; font-weight:700; }
.qss-help{ margin:0 0 12px; font-size:12px; color:var(--aib-muted); }
.qss-group + .qss-group{ margin-top:14px; }
.qss-group-title{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--aib-faint); margin-bottom:8px;
}
.qss-toggles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px 16px; }
/* Settings → Insurer Comparison: other-benefit defaults, grouped */
.qcs-xgroup{ margin-bottom:12px; }
.qcs-xhead{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--aib-muted); margin-bottom:6px; }
.qss-toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.qss-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.qss-trk{
  flex:0 0 auto; width:32px; height:18px; border-radius:9px;
  background:var(--aib-line); position:relative; transition:background .15s ease;
}
.qss-trk::after{
  content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:#fff; transition:transform .15s ease;
}
.qss-toggle input:checked + .qss-trk{ background:var(--aib-blue); }
.qss-toggle input:checked + .qss-trk::after{ transform:translateX(14px); }
.qss-toggle input:focus-visible + .qss-trk{ outline:2px solid var(--aib-blue); outline-offset:2px; }
.qss-field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.qss-field label{ font-size:12px; font-weight:600; color:var(--aib-muted); }
.qss-field-sm{ max-width:180px; }
.qss-margins{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0 14px; }
.qss-margins .qss-field{ margin-top:10px; }
.qss-field-wide{ grid-column:span 2; }
.qss-cols{ display:flex; flex-direction:column; gap:6px; }
.qss-col{
  display:flex; align-items:center; gap:10px; padding:7px 10px;
  border:1px solid var(--aib-line); border-radius:8px; background:var(--aib-surface-2);
}
.qss-col.is-dragging{ opacity:.45; }
.qss-col-grip{ cursor:grab; color:var(--aib-muted); }
.qss-col .inp{ flex:1; min-width:0; }
.qss-col-locked{ font-size:11px; color:var(--aib-muted); white-space:nowrap; }

/* Working Sheet Print — the running total of the grid's width against what A4
   leaves between the print margins. Red past the limit: overflowing it clips
   the rightmost insurer off the paper with nothing on screen to show it. */
.wps-total{ margin:12px 0 0; font-size:12px; font-weight:600; color:var(--aib-muted); }
.wps-total.is-over{ color:var(--aib-danger); }

/* Working Sheet Print — the live preview. The card spans the grid because the
   thing it previews is a full-width printed row of insurers; squeezed into one
   column it would wrap where the paper does not, and mislead. */
.wps-preview-card{ grid-column:1 / -1; }
/* The preview draws into a shadow root, so nothing in here can reach its
   contents — this styles the frame only. Fixed white regardless of theme: it
   stands for a sheet of paper, and a dark-mode preview of a printed page is a
   lie about the output. */
.wps-preview{
  border:1px solid var(--aib-line); border-radius:8px; background:#fff;
  max-height:420px; overflow:auto; resize:vertical;
}

/* The line's name in the Lines card. The slip's equivalent row puts an <input>
   here — the heading it prints under — but this grid prints no headings, so the
   name is static text and the editable box is the prefix instead. */
.qss-col-name{ flex:1; min-width:0; font-size:13px; font-weight:600; }
.qss-col input[data-line-prefix]{ flex:0 0 130px; }
/* Working Sheet Print — each line's text style (B / I / size / font). The row
   wraps on a narrow screen rather than squeezing the prefix box to nothing. */
#wps-lines .qss-col{ flex-wrap:wrap; }
.wps-style{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.qss-col .wps-style .inp{ flex:0 0 auto; width:auto; min-height:32px; padding-top:4px; padding-bottom:4px; font-size:12px; }
.wps-style .wps-size{ min-width:72px; }
.wps-style .wps-font{ min-width:120px; }

/* A format toggle: Settings' B / I (checkbox inside the label) and the print
   preview's toolbar buttons (aria-pressed) share one look. The letter itself
   shows what the button does, so no icon font is needed. */
.wps-fmt, .pv-fmt-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 8px; border-radius:8px; cursor:pointer;
  border:1px solid var(--aib-line-strong); background:var(--aib-surface); color:var(--aib-ink-2);
  font:inherit; font-size:14px; line-height:1; user-select:none;
  transition:background var(--aib-fast) var(--aib-ease), border-color var(--aib-fast) var(--aib-ease);
}
.wps-fmt input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.wps-fmt:hover, .pv-fmt-btn:hover{ background:var(--aib-hover); }
.wps-fmt:has(input:checked), .pv-fmt-btn[aria-pressed="true"]{
  background:var(--aib-blue-soft); border-color:var(--aib-blue); color:var(--aib-blue-600);
}
.wps-fmt:has(input:focus-visible), .pv-fmt-btn:focus-visible{ outline:none; box-shadow:var(--aib-ring); }
.qss-attach{ display:flex; flex-direction:column; gap:6px; }
.qss-att{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid var(--aib-line); border-radius:8px; background:var(--aib-surface-2);
}
.qss-att .inp{ flex:1; min-width:0; }
.qss-att-state{ font-size:11.5px; color:var(--aib-muted); white-space:nowrap; }
.qss-att-state.is-set{ color:var(--aib-success); }
.qss-att-actions{ display:flex; gap:6px; }
.qss-lh{
  padding:10px 12px; border-radius:8px; font-size:13px;
  background:var(--aib-surface-2); border:1px solid var(--aib-line);
}
.qss-lh.is-empty{ color:var(--aib-muted); }
.qss-lh-actions{ display:flex; gap:8px; margin-top:10px; }
.qss-save{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:16px; }
.qss-msg{ font-size:12.5px; color:var(--aib-muted); }
.qss-msg.is-error{ color:var(--aib-danger); }
/* Settings → Working Sheet Print: worksheet rows, NCD row, insurer matrix. */
.wpl-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:12px; }
.wpl-sample{
  margin:12px 0 0; padding:9px 12px; border:1px dashed var(--aib-line-strong); border-radius:8px;
  font-family:var(--aib-mono); font-size:12.5px; background:var(--aib-surface-2); overflow-wrap:anywhere;
}
.wpl-matrix-wrap{ margin-top:16px; }
.wpl-matrix-scroll{ overflow-x:auto; }
.wpl-matrix{ border-collapse:collapse; width:100%; min-width:640px; }
.wpl-matrix th, .wpl-matrix td{ padding:6px 8px; border-bottom:1px solid var(--aib-line); text-align:left; font-size:13px; }
.wpl-matrix thead th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--aib-muted); font-weight:700; }
.wpl-matrix tbody th{ font-weight:600; white-space:nowrap; }
.wpl-matrix tr.wpl-all th{ color:var(--aib-blue-600); }
.wpl-cell{
  width:100%; min-height:32px; text-align:left; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:5px 9px; border-radius:8px; border:1px solid var(--aib-line); background:var(--aib-surface-2); color:var(--aib-muted);
}
.wpl-cell:hover{ border-color:var(--aib-line-strong); color:var(--aib-ink-2); }
.wpl-cell.is-set{ background:var(--aib-blue-soft); border-color:transparent; color:var(--aib-blue-600); }
.wpl-cell[aria-current="true"]{ box-shadow:0 0 0 2px var(--aib-blue); }
.wpl-cell:focus-visible{ outline:none; box-shadow:var(--aib-ring); }
.wpl-msg{ margin:8px 0 0; }
.wpl-drawer{ margin-top:14px; padding:14px; border:1px solid var(--aib-line); border-left:3px solid var(--aib-blue); border-radius:10px; }
.wpl-drawer[hidden]{ display:none; }
.wpl-drawer-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.wpl-drawer-head .qss-help{ margin:0; flex:1; }
.wpl-drawer-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.wpl-dr{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--aib-line); }
.wpl-dr > div:first-child{ min-width:0; }
.wpl-dr-name{ display:block; font-size:13px; font-weight:600; }
.wpl-dr-from{ display:block; font-size:11.5px; color:var(--aib-muted); }
.wpl-dr .seg{ flex:none; }
.wpl-dr .seg > button[data-mode="hide"][aria-pressed="true"]{ color:var(--aib-danger); }
.wpl-dr .seg > button[data-mode="show"][aria-pressed="true"]{ color:var(--aib-success); }
/* Settings → Workflow Buttons: the status × button grid. Row headers are the
   status names, so they read as labels, not as column captions. */
.wfb-table th[scope="row"]{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:700; color:var(--aib-ink); white-space:nowrap; cursor:pointer; }
.wfb-table thead th{ cursor:pointer; text-align:center; }
.wfb-table thead th:first-child{ text-align:left; cursor:default; }
.wfb-cell{ text-align:center; }
.wfb-cell input{ width:16px; height:16px; cursor:pointer; accent-color:var(--aib-danger); }

/* ── Quotation Slip modal ──────────────────────────────────────────── */
.qsl-sec + .qsl-sec{ margin-top:20px; }
.qsl-sec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.qsl-sec-head h6{ margin:0; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; }
.qsl-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; font-size:11px;
  background:var(--aib-blue); color:#fff;
}
.qsl-loading{ padding:20px; text-align:center; color:var(--aib-muted); font-size:13px; }


.qsl-fields{ display:grid; gap:14px; }
.qsl-group{ border:1px solid var(--aib-line); border-radius:10px; padding:12px 14px; }
.qsl-group-title{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--aib-faint); margin-bottom:8px;
}
.qsl-field{
  display:grid; grid-template-columns:32px 150px 1fr auto;
  align-items:center; gap:10px; padding:5px 0; cursor:pointer; font-size:13px;
}
.qsl-field input{ position:absolute; opacity:0; width:0; height:0; }
.qsl-trk{
  width:30px; height:17px; border-radius:9px; background:var(--aib-line);
  position:relative; transition:background .15s ease;
}
.qsl-trk::after{
  content:''; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:#fff; transition:transform .15s ease;
}
.qsl-field input:checked + .qsl-trk{ background:var(--aib-blue); }
.qsl-field input:checked + .qsl-trk::after{ transform:translateX(13px); }
.qsl-field input:focus-visible + .qsl-trk{ outline:2px solid var(--aib-blue); outline-offset:2px; }
.qsl-flabel{ font-weight:600; color:var(--aib-muted); }
.qsl-fvalue{ color:var(--aib-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Empty fields stay visible so the agent can see what the record is missing,
   rather than wondering why a line vanished. */
.qsl-field.is-empty{ cursor:not-allowed; opacity:.55; }
.qsl-none{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--aib-faint); white-space:nowrap;
}

.qsl-table-wrap{ overflow-x:auto; border:1px solid var(--aib-line); border-radius:10px; }
.qsl-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.qsl-table th{
  text-align:left; padding:8px 8px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--aib-faint);
  background:var(--aib-surface-2); white-space:nowrap;
}
.qsl-table td{ padding:3px 6px; border-top:1px solid var(--aib-line); }
.qsl-table tr.is-off{ opacity:.45; }

/* Print-selection checklist (print-selection.js) — the same cover groups the
   paper prints, cheapest first and ranked, one row per candidate, plain
   checkbox, no drag/reorder/edit like the Quotation Slip's. */
.psel-plate{ color:var(--aib-muted); font-weight:400; font-size:.85rem; margin-left:4px; }
.psel-summary{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.psel-sum{
  font-size:.8rem; color:var(--aib-ink); text-decoration:none;
  background:var(--aib-surface-2); border:1px solid var(--aib-line);
  padding:3px 10px; border-radius:var(--aib-r-pill);
}
.psel-sum b{ color:var(--aib-blue-600); }
.psel-list{ display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow-y:auto; }
/* flex:none — the list is a flex column, and overflow:hidden on a flex item
   drops its min-height to 0, so without this the groups SHRINK to fit the
   list box and clip their rows instead of the list overflowing and scrolling. */
.psel-group{ flex:none; border:1px solid var(--aib-line); border-radius:10px; overflow:hidden; }
.psel-gh{
  display:flex; align-items:center; gap:10px; padding:7px 12px;
  background:var(--aib-surface-2); font-size:.9rem;
}
.psel-gh input{ margin:0; flex:none; }
.psel-gh b{ font-weight:800; }
.psel-cnt{ font-size:.75rem; color:var(--aib-muted); font-variant-numeric:tabular-nums; }
.psel-cnt.is-none{ color:var(--aib-warning); }
.psel-sp{ flex:1; }
.psel-none{
  font:inherit; font-size:.78rem; color:var(--aib-blue-600); background:none; border:0;
  cursor:pointer; padding:2px 4px; border-radius:4px;
}
.psel-none:hover{ text-decoration:underline; }
.psel-row{
  display:grid; grid-template-columns:20px 1fr auto; column-gap:10px; align-items:center;
  padding:7px 12px; border-top:1px solid var(--aib-line); cursor:pointer;
}
.psel-row:hover{ background:var(--aib-hover); }
.psel-row input{ margin:0; justify-self:center; }
.psel-row.is-off .psel-who, .psel-row.is-off .psel-money{ opacity:.45; }
.psel-who{ font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.psel-rank{ font-size:.72rem; color:var(--aib-faint); min-width:16px; font-variant-numeric:tabular-nums; }
.psel-money{
  font-size:.9rem; font-weight:600; text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.psel-money small{ display:block; font-weight:400; font-size:.72rem; color:var(--aib-faint); }
.psel-sub{ grid-column:2 / 4; font-size:.78rem; color:var(--aib-faint); margin-top:1px; }
.psel-row-cq{ grid-template-columns:20px 1fr; }
.psel-why{ font-weight:400; color:var(--aib-muted); font-size:.85rem; }
.psel-chip{
  padding:1px 6px; border-radius:var(--aib-r-pill); font-size:.72rem; font-weight:700;
  background:var(--aib-surface-2); color:var(--aib-muted); border:1px solid var(--aib-line);
}
.psel-chip-ncdp{ background:var(--aib-blue-soft); color:var(--aib-blue-600); border-color:transparent; }
.psel-emailed{ background:var(--aib-success-soft); color:var(--aib-success); border-color:transparent; }
.psel-tally{ font-size:.85rem; color:var(--aib-muted); }
.psel-tally b{ color:var(--aib-ink); }

/* ── Print preview (profile.php #m-print-preview, print-preview.js) ──
   The sheet sits on a grey stage at A4 width inside an iframe sized to its own
   height, so the stage scrolls and the paper reads as paper. The paper itself is
   always white: it is what comes off the printer, whatever the portal theme. */
/* .pmodal.pv-modal: profile.php's own .pmodal{max-width:560px} loads after this file. */
.pmodal.pv-modal{ max-width:960px; display:flex; flex-direction:column; }
.pv-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:10px 18px; border-bottom:1px solid var(--aib-line); background:var(--aib-surface-2);
}
.pv-for{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.pv-for label{ font-size:.85rem; font-weight:600; color:var(--aib-ink-2); }
.pv-for select.inp{ width:auto; min-width:200px; max-width:100%; }
.pv-class{
  font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:var(--aib-r-pill);
  background:var(--aib-blue-soft); color:var(--aib-blue-600);
}
.pv-status{ font-size:.82rem; color:var(--aib-muted); }
.pv-actions{ display:flex; gap:8px; margin-left:auto; }
.pv-hidden{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:8px 18px; border-bottom:1px solid var(--aib-line); min-height:40px;
}
.pv-hidden-lbl{ font-size:.8rem; color:var(--aib-muted); }
/* The one-off format toolbar (admin / superadmin only — profile.php renders it). */
.pv-fmt{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:8px 18px; border-bottom:1px solid var(--aib-line);
}
.pv-fmt-lbl{ font-size:.8rem; color:var(--aib-muted); margin-right:4px; }
.pv-fmt-sep{ width:1px; height:22px; background:var(--aib-line-strong); margin:0 4px; }
.pv-fmt select.inp{ width:auto; min-width:150px; min-height:32px; padding-top:4px; padding-bottom:4px; font-size:.85rem; }
.pv-fmt .pv-fmt-btn:disabled{ opacity:.45; cursor:not-allowed; }
.pv-chip{
  display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.78rem; font-weight:600;
  padding:4px 10px; border-radius:var(--aib-r-pill); border:1px solid var(--aib-danger-line);
  background:var(--aib-danger-soft); color:var(--aib-danger); cursor:pointer; min-height:28px;
}
.pv-chip:hover{ border-color:var(--aib-danger); }
.pv-chip:focus-visible{ outline:none; box-shadow:var(--aib-ring); }
.pv-confirm{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 18px;
  background:var(--aib-warning-soft); border-bottom:1px solid var(--aib-line); font-size:.88rem;
}
.pv-confirm[hidden]{ display:none; }
.pv-confirm span{ flex:1 1 220px; }
.pv-stage{ background:var(--aib-bg-2); padding:18px; overflow:auto; max-height:68vh; }
.pv-frame{ display:block; width:210mm; max-width:none; min-height:300px; margin:0 auto; border:0; background:#fff; box-shadow:var(--aib-shadow-md); }
.pv-note{ margin:0; padding:10px 18px; font-size:.8rem; color:var(--aib-muted); border-top:1px solid var(--aib-line); }
@media (max-width:640px){
  .pv-actions{ margin-left:0; width:100%; justify-content:flex-end; }
  .pv-stage{ padding:10px; }
}
.qsl-th-grip, .qsl-th-pick, .qsl-th-del{ width:1%; }
/* A plain flex row, not a table row: a colspan cell here previously threw
   off the real header row's auto column widths (the grip column picked up a
   large stray gap). Sits flush against qsl-table-wrap, which follows right
   after it in the markup, so it still reads as part of the table. */
.qsl-filter-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 10px; margin-bottom:6px;
  border:1px solid var(--aib-line); border-radius:8px; background:var(--aib-surface-2);
}
.qsl-filter-row select.inp{ width:auto; min-width:140px; }
.qsl-grip{ cursor:grab; color:var(--aib-faint); }
.qsl-cell{
  width:100%; min-width:80px; border:1px solid transparent; border-radius:6px;
  padding:5px 6px; font:inherit; color:var(--aib-ink); background:transparent;
}
.qsl-cell:hover{ border-color:var(--aib-line); }
.qsl-cell:focus{ outline:none; border-color:var(--aib-blue); background:var(--aib-surface); }
/* An edited cell is marked so it is obvious the PDF will differ from the record. */
.qsl-cell.is-edited{ border-color:var(--aib-blue); font-weight:600; }
.qsl-del button{
  border:0; background:transparent; color:var(--aib-faint);
  cursor:pointer; padding:4px 6px; border-radius:6px;
}
.qsl-del{ white-space:nowrap; }
.qsl-del button[data-del]:hover{ color:var(--aib-danger); }
.qsl-del button[data-revert]:hover:not(:disabled){ color:var(--aib-blue); }
.qsl-del button:disabled{ opacity:.3; cursor:default; }
.qsl-hint{ margin-top:8px; font-size:11.5px; color:var(--aib-muted); }
.qsl-count{ font-size:12.5px; color:var(--aib-muted); font-weight:600; }

/* ── Read-only roles ────────────────────────────────────────────────────
   Cosmetic only. Core\WriteGate refuses every write from these roles at the
   router, so this exists purely so a read-only user is never OFFERED a control
   that would come back 403. Mark write affordances with data-write; the banner
   explains the greying-out so it does not read as a broken page. */
body[data-readonly] [data-write]{ display:none !important; }
.ro-banner{
  display:flex; align-items:center; gap:8px;
  margin:0 0 14px; padding:9px 14px;
  border:1px solid var(--aib-line); border-left:3px solid var(--aib-blue);
  border-radius:8px; background:var(--aib-bg-2);
  font-size:12.5px; color:var(--aib-muted);
}
.ro-banner i{ color:var(--aib-blue); }
.ro-banner b{ color:var(--aib-ink-2); font-weight:600; }

/* ── Payment / Proposal form field picker (Bind Details) ───────────────── */
/* Sits inside the Payment Form / Proposal Form .mb-row, on its own line, so
   the picker and the Generate controls stay one card. */
.pf-wrap{ flex-basis:100%; border-top:1px dashed var(--aib-line); margin-top:2px; padding-top:7px; }
.pf-wrap>summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:12px; font-weight:600; color:var(--aib-muted);
}
.pf-wrap>summary::-webkit-details-marker{ display:none; }
.pf-wrap>summary::before{ content:'\25B8'; }
.pf-wrap[open]>summary::before{ content:'\25BE'; }
.pf-count{ background:var(--aib-blue-soft); color:var(--aib-blue); border-radius:999px;
  padding:1px 8px; font-size:11px; font-weight:700; }
.pf-panel{ margin-top:8px; }
.pf-bar{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.pf-bar input[type=search]{ font:inherit; font-size:12px; padding:4px 9px; min-width:200px;
  border:1px solid var(--aib-line); border-radius:7px; background:var(--aib-surface); color:var(--aib-ink); }
.pf-note{ margin-left:auto; font-size:11px; color:var(--aib-faint); }
.pf-body{ max-height:340px; overflow:auto; }
.pf-grp{ margin-bottom:12px; }
.pf-grp-title{
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--aib-faint); border-bottom:1px solid var(--aib-line); padding-bottom:4px;
}
.pf-grp-n{ margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none; font-size:11px; }
.pf-items{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.pf-field{
  display:grid; grid-template-columns:32px minmax(0,118px) minmax(0,1fr);
  align-items:center; gap:8px; padding:4px 0; cursor:pointer; font-size:12.5px;
}
/* The switch itself is Quotation Slip's .qsl-trk — shared, so the two cannot drift. */
.pf-field input{ position:absolute; opacity:0; width:0; height:0; }
.pf-field input:checked + .qsl-trk{ background:var(--aib-blue); }
.pf-field input:checked + .qsl-trk::after{ transform:translateX(13px); }
.pf-field input:focus-visible + .qsl-trk{ outline:2px solid var(--aib-blue); outline-offset:2px; }
.pf-flabel{ font-weight:600; color:var(--aib-muted); }
.pf-fvalue{ color:var(--aib-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Empty stays on: it writes nothing either way, and the row is there to show
   the agent what the record is missing. */
.pf-none{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--aib-faint); white-space:nowrap; }
.pf-off{ display:none; }
@media (max-width:900px){ .pf-items{ grid-template-columns:1fr; } }

/* ── WhatsApp thread (whatsapp-thread-view.js) ───────────────────────────
   One message rendered the same way on the Customer Profile card and the
   Conversations page. Bubbles only; the page around them styles itself.
   Outbound = ours (blue, right), inbound = the customer's (surface, left). */
.wa-thread{ display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto; padding:6px 2px; }
.wa-thread .empty-hint{ margin:auto; }
.wa-day{ align-self:center; margin:6px 0 2px; font-size:11px; font-weight:600; color:var(--aib-muted); }
.wa-day span{ padding:2px 10px; border-radius:999px; background:var(--aib-bg-2); border:1px solid var(--aib-line); }
.wa-msg{ display:flex; flex-direction:column; max-width:82%; }
.wa-msg.out{ align-self:flex-end; align-items:flex-end; }
.wa-msg.in{ align-self:flex-start; align-items:flex-start; }
.wa-bubble{ padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.wa-msg.out .wa-bubble{ background:var(--aib-blue); color:#fff; border-bottom-right-radius:4px; }
.wa-msg.in .wa-bubble{ background:var(--aib-surface); color:var(--aib-ink); border:1px solid var(--aib-line); border-bottom-left-radius:4px; }
.wa-msg.failed .wa-bubble{ background:var(--aib-danger-soft); color:var(--aib-ink); border:1px solid var(--aib-danger); }
.wa-media{ margin-top:6px; font-size:12px; }
.wa-media a{ color:inherit; text-decoration:underline; }
.wa-meta{ margin-top:3px; font-size:11px; color:var(--aib-muted); }
.wa-meta.bad{ color:var(--aib-danger); font-weight:600; }
.wa-addr{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--aib-ink-2); padding:2px 8px; border-radius:999px; background:var(--aib-bg-2); border:1px solid var(--aib-line); margin:0 4px 4px 0; }
.wa-addr .muted{ color:var(--aib-muted); }
.wa-shared{ color:var(--aib-warning); font-weight:600; }
.wa-note{ margin-top:8px; font-size:11.5px; color:var(--aib-faint); font-style:italic; }
/* .btn sets display, and the UA [hidden] rule has no !important — so a hidden
   "Load earlier" / "Open" button would stay on screen without this. */
.wa-ctl[hidden]{ display:none !important; }

/* ── WhatsApp reply shortcuts: the "/" list above the reply box ──────── */
.sc-host{ position:relative; }
.sc-pop{ position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:20; max-height:280px; overflow-y:auto;
  background:var(--aib-surface); border:1px solid var(--aib-line-strong); border-radius:var(--aib-r-sm); box-shadow:var(--aib-shadow-md); padding:4px; }
.sc-pop[hidden]{ display:none; }
.sc-item{ display:flex; flex-direction:column; gap:2px; padding:7px 10px; border-radius:8px; cursor:pointer; }
.sc-item .sc-top{ display:flex; gap:8px; align-items:baseline; }
.sc-item .sc-key{ font-family:var(--aib-mono); font-weight:700; font-size:12.5px; color:var(--aib-blue); }
.sc-item .sc-title{ font-size:12.5px; font-weight:600; color:var(--aib-ink); }
.sc-item .sc-prev{ font-size:11.5px; color:var(--aib-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-item.on, .sc-item:hover{ background:var(--aib-blue-soft); }
.sc-empty{ padding:8px 10px; font-size:12px; color:var(--aib-muted); }
.sc-hint{ padding:4px 10px 2px; font-size:10.5px; color:var(--aib-faint); border-top:1px solid var(--aib-line); margin-top:4px; }

/* ── Profile → WhatsApp chat panel (wa-chat-panel.js, `wcp-` prefix) ──
   The green bubble takes Team Chat's place on the page (body.wa-fab-on),
   and opens a right-side panel that pushes the page like the Reminders
   drawer. Reads like the customer's phone: them left, Accord right. */
.wa-fab-on #aib-chat-fab{ display:none; }
.chat-fab.wa-fab{ background:var(--aib-wa); border:0; cursor:pointer; font-size:26px; }
.chat-fab.wa-fab:focus-visible{ outline:none; box-shadow:var(--aib-ring),var(--aib-shadow-lg); }
.chat-fab.wa-fab .fab-badge[hidden]{ display:none; }
.wa-panel{ position:fixed; top:0; right:0; bottom:0; width:var(--srd-w); z-index:820;
  display:flex; flex-direction:column; background:var(--aib-bg); border-left:1px solid var(--aib-line);
  box-shadow:var(--aib-shadow-lg); transform:translateX(101%); transition:transform var(--aib-med) var(--aib-ease); }
.wa-panel.open{ transform:none; }
.wa-panel[hidden]{ display:none; }
.app-shell.wcp-open{ padding-right:var(--srd-w); }
@media (max-width:1100px){ .app-shell.wcp-open{ padding-right:0; } }
@media (max-width:520px){ .wa-panel{ width:100%; } }
/* While the panel pushes the page, the menu gives room back: the same 66px
   icon rail as the ≤900px layout above. Names come back as hover titles
   (wa-chat-panel.js). Under 1100px the panel overlays, so nothing changes. */
.sidebar{ transition:width var(--aib-med) var(--aib-ease), flex-basis var(--aib-med) var(--aib-ease); }
@media (min-width:1101px){
  .app-shell.wcp-open .sidebar{ width:66px; flex-basis:66px; padding:14px 8px; }
  .app-shell.wcp-open .sidebar .brand span:not(.logo),
  .app-shell.wcp-open .sidebar a span,
  .app-shell.wcp-open .sidebar .user .meta{ display:none; }
  .app-shell.wcp-open .sidebar a{ justify-content:center; }
  .app-shell.wcp-open .sidebar a.active::before{ left:-8px; }
  .app-shell.wcp-open .sidebar .nav-group-h{ font-size:0; margin:6px 4px 2px; padding:0; border-top:1px solid rgba(255,255,255,.09); }
  .app-shell.wcp-open .sidebar .nav-group-h .chev{ display:none; }
  .app-shell.wcp-open .sidebar a .nav-badge{ position:absolute; top:2px; right:6px; margin-left:0; min-width:16px;
    padding:0 4px; font-size:9.5px; line-height:14px; border:2px solid var(--aib-navy); }
}
.wcp-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.wcp-head{ display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px;
  background:var(--aib-surface); border-bottom:1px solid var(--aib-line); }
.wcp-av{ flex:0 0 38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--aib-wa-soft); color:var(--aib-wa); font-size:20px; }
.wcp-who{ flex:1; min-width:0; display:flex; flex-direction:column; }
.wcp-who b{ font-size:14px; color:var(--aib-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wcp-who span{ font-size:11.5px; color:var(--aib-muted); }
.wcp-head .btn[hidden]{ display:none; }

.wcp-thread{ flex:1; overflow-y:auto; padding:6px 12px 14px; display:flex; flex-direction:column; }
.wcp-earlier{ align-self:center; margin:6px 0; }
.wcp-earlier[hidden]{ display:none; }
#wcp-items{ display:flex; flex-direction:column; gap:6px; }
.wcp-empty{ margin:48px auto; text-align:center; color:var(--aib-muted); font-size:13px; display:grid; gap:8px; justify-items:center; }
.wcp-empty i{ font-size:28px; color:var(--aib-faint); }
.wcp-day{ position:sticky; top:0; z-index:1; align-self:center; margin:8px 0 2px; }
.wcp-day span{ display:inline-block; padding:3px 11px; border-radius:var(--aib-r-pill); font-size:11px; font-weight:600;
  color:var(--aib-ink-2); background:var(--aib-surface); border:1px solid var(--aib-line); box-shadow:var(--aib-shadow-sm); }

.wcp-msg{ display:flex; flex-direction:column; max-width:84%; }
.wcp-msg.in{ align-self:flex-start; align-items:flex-start; }
.wcp-msg.out{ align-self:flex-end; align-items:flex-end; }
.wcp-bubble, .wcp-card{ position:relative; padding:8px 11px 6px; border-radius:14px; font-size:13px; line-height:1.45;
  box-shadow:var(--aib-shadow-sm); }
.wcp-msg.in .wcp-bubble{ background:var(--aib-surface); color:var(--aib-ink); border:1px solid var(--aib-line); border-top-left-radius:4px; }
.wcp-msg.out .wcp-bubble, .wcp-card{ background:var(--aib-wa-soft); color:var(--aib-ink); border:1px solid var(--aib-wa-line); border-top-right-radius:4px; }
.wcp-text{ white-space:pre-wrap; word-break:break-word; }
.wcp-text .wa-media{ margin-top:6px; }
.wcp-text.wcp-blank{ font-style:italic; font-size:12px; color:var(--aib-muted); }
.wcp-stamp{ margin-top:2px; text-align:right; font-size:10.5px; color:var(--aib-muted); font-variant-numeric:tabular-nums; }
.wcp-stamp .fa-check{ color:var(--aib-wa); margin-left:2px; }
.wcp-tag{ font-size:10.5px; font-weight:700; margin:0 4px 3px; color:var(--aib-muted); }
.wcp-tag.bot{ color:var(--aib-wa); }
.wcp-tag.tpl{ color:var(--aib-blue); }
.wcp-btns{ display:flex; flex-direction:column; gap:4px; margin:8px -4px -1px; }
.wcp-btn{ display:block; text-align:center; padding:6px 8px; border-radius:9px; font-size:12.5px; font-weight:600;
  color:var(--aib-blue); background:var(--aib-surface); border:1px solid var(--aib-line); }
.wcp-btn.picked{ color:var(--aib-wa); border-color:var(--aib-wa); background:var(--aib-surface); }
.wcp-event{ align-self:center; max-width:92%; text-align:center; font-size:12px; color:var(--aib-ink-2);
  padding:5px 12px; border-radius:var(--aib-r-pill); background:var(--aib-surface); border:1px dashed var(--aib-line-strong); }
.wcp-event i{ color:var(--aib-wa); }
.wcp-msg.failed .wcp-bubble, .wcp-msg.failed .wcp-card{ background:var(--aib-danger-soft); border-color:var(--aib-danger); }
.wcp-msg.failed .wcp-stamp i{ color:var(--aib-danger); }
.wcp-why{ max-width:100%; margin:3px 4px 0; font-size:11px; font-weight:600; color:var(--aib-danger); }
.wcp-msg.pending{ opacity:.7; }

.wcp-compose{ padding:8px 12px 10px; background:var(--aib-surface); border-top:1px solid var(--aib-line); }
.wcp-compose[hidden]{ display:none; }
.wcp-sendas{ font-size:11.5px; color:var(--aib-muted); margin-bottom:6px; }
.wcp-sendas i{ color:var(--aib-wa); }
.wcp-sendas.warn{ color:var(--aib-warning); }
.wcp-sendas.bad{ color:var(--aib-danger); font-weight:600; }
.wcp-row{ display:flex; align-items:flex-end; gap:8px; }
.wcp-row textarea.inp{ flex:1; resize:none; min-height:42px; max-height:140px; line-height:1.45; border-radius:20px; padding:10px 14px; }
.wcp-send{ flex:0 0 42px; height:42px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--aib-wa); color:#fff; font-size:16px; }
.wcp-send:disabled{ opacity:.5; cursor:not-allowed; }
.wcp-send:focus-visible{ outline:none; box-shadow:var(--aib-ring); }
.wcp-error{ margin-top:6px; font-size:12px; font-weight:600; color:var(--aib-danger); }
.wcp-error[hidden]{ display:none; }
.wcp-hint{ margin-top:4px; font-size:10.5px; color:var(--aib-faint); }

/* ── WhatsApp transcript (Conversations page) — a case file, not bubbles.
   One full-width row per message; who / what kind / when sits on its own
   line, the text below at reading size. Customer rows carry a left rail so
   "what did THEY say" can be scanned down the page. Built by
   whatsapp-thread-view.js transcriptHtml(). */
.tr-day{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:10px; margin:10px 0 4px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--aib-muted); background:var(--aib-surface); padding:4px 0; }
.tr-day::before,.tr-day::after{ content:""; flex:1; height:1px; background:var(--aib-line); }
.tr-row{ padding:10px 14px 12px 16px; border-radius:var(--aib-r-sm); border:1px solid transparent; }
.tr-row + .tr-row, .tr-tap + .tr-row, .tr-row + .tr-tap{ margin-top:6px; }
.tr-row.in{ background:var(--aib-success-soft); border-left:4px solid var(--aib-success); }
.tr-row.out{ background:var(--aib-surface-2); border-color:var(--aib-line); }
.tr-row.out.auto{ background:var(--aib-special-soft); border-color:var(--aib-special-line); }
.tr-row.failed{ background:var(--aib-danger-soft); border-color:var(--aib-danger-line); border-left:4px solid var(--aib-danger); }
.tr-head{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-bottom:6px; }
.tr-av{ width:26px; height:26px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--aib-surface); background:var(--aib-muted); }
.tr-av.cust{ background:var(--aib-success); }
.tr-av.staff{ background:var(--aib-blue); }
.tr-av.bot{ background:var(--aib-special); }
.tr-av.tpl{ background:var(--aib-ink-2); }
.tr-who{ font-size:13px; color:var(--aib-ink); }
.tr-tag{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:var(--aib-r-pill); background:var(--aib-bg-2); color:var(--aib-ink-2); border:1px solid var(--aib-line); }
.tr-tag.cust{ color:var(--aib-success); border-color:var(--aib-success); background:transparent; }
.tr-tag.bot{ color:var(--aib-special); border-color:var(--aib-special-line); background:transparent; }
.tr-time{ margin-left:auto; font-size:11.5px; color:var(--aib-muted); font-variant-numeric:tabular-nums; }
.tr-status{ font-size:11.5px; color:var(--aib-muted); }
.tr-status.ok{ color:var(--aib-success); }
.tr-status.bad{ color:var(--aib-danger); font-weight:600; flex-basis:100%; padding-left:34px; }
.tr-body{ padding-left:34px; font-size:14.5px; line-height:1.6; color:var(--aib-ink); white-space:pre-wrap; word-break:break-word; }
.tr-card{ margin-left:34px; border:1px solid var(--aib-line-strong); border-radius:var(--aib-r-sm); background:var(--aib-surface); overflow:hidden; }
.tr-card .tr-body{ padding:10px 14px; font-size:13.5px; color:var(--aib-ink-2); }
.tr-btns{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border-top:1px solid var(--aib-line); background:var(--aib-surface-2); }
.tr-btn{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--aib-r-pill);
  color:var(--aib-blue); border:1px solid var(--aib-line-strong); background:var(--aib-surface); }
.tr-btn.picked{ color:var(--aib-surface); background:var(--aib-success); border-color:var(--aib-success); }
.tr-tap{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 6px 16px; padding:6px 12px; font-size:12.5px;
  color:var(--aib-ink-2); border-left:4px solid var(--aib-success); background:var(--aib-bg-2); border-radius:0 var(--aib-r-sm) var(--aib-r-sm) 0; }
.tr-tap > i{ color:var(--aib-success); }
.tr-chip{ font-weight:700; color:var(--aib-success); padding:2px 9px; border-radius:var(--aib-r-pill); border:1px solid var(--aib-success); background:var(--aib-surface); }

/* ── Field kit (Option C, chosen 2026-09-28) ───────────────────────
   Label on the left, control on the right; short lists are a segmented bar,
   long lists a filtering combobox, many-of picks are toggle chips. The
   widgets are built by public/assets/js/select.js on <select data-enhance>;
   the native select stays in the DOM (.fk-native) as the form's real value.
   Native selects everywhere gain only the chevron below. Tokens only. */

/* Every native select: our chevron instead of the browser's. The glyph colour
   is the one literal in this section — a data-URI SVG cannot read a token —
   and #8592a8 sits between light --aib-muted and dark --aib-muted. */
select.inp{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238592a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px}
select.inp[multiple],select.inp[size]:not([size="1"]){background-image:none;padding-right:11px}

/* States every .inp lacked: disabled fades, read-only turns into copyable
   text, invalid gets the danger ring (the PDF Tool's .wz-invalid, shared). */
.inp:disabled{background:var(--aib-bg-2);color:var(--aib-faint);border-color:var(--aib-line);cursor:not-allowed}
.inp[readonly]:not(select){background:transparent;border-color:transparent;border-bottom:1px dashed var(--aib-line-strong);border-radius:0;padding-left:2px;box-shadow:none}
.inp[readonly]:not(select):focus{border-color:transparent;border-bottom-color:var(--aib-blue);box-shadow:none}
.inp.is-invalid,.inp[aria-invalid="true"],.fk-row.is-invalid .inp,.fk-row.is-invalid .cbx-in{border-color:var(--aib-danger);box-shadow:0 0 0 3px var(--aib-danger-soft)}
.fk-help{font-size:11.5px;color:var(--aib-muted);line-height:1.4}
.fk-err{display:inline-flex;align-items:center;gap:5px;color:var(--aib-danger);font-size:12.5px;font-weight:600;line-height:1.3}
.fk-err[hidden]{display:none !important}

/* Rows: label 150px right-aligned, control beside it. Two rows per line when
   the container is wide enough, so a 40-field form is not one long column. */
.fk-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:12px 28px}
.fk-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 14px;align-items:start;min-width:0}
.fk-row.wide{grid-column:1/-1}
.fk-row[hidden],.fk-sel[hidden]{display:none !important}
.fk-row>label{font-size:12.5px;font-weight:600;color:var(--aib-ink-2);text-align:right;padding-top:9px;line-height:1.3;
  text-transform:none;letter-spacing:0}
.fk-row>label small{display:block;font-weight:400;color:var(--aib-muted);font-size:11px}
.fk-row.is-invalid>label{color:var(--aib-danger)}
.fk-row .inp{height:36px;padding-top:0;padding-bottom:0;font-size:13.5px}
.fk-row textarea.inp{height:auto;min-height:72px;padding:8px 11px}
.fk-row .fk-help,.fk-row>.fk-err{grid-column:2}
.fk-row.is-disabled>label{color:var(--aib-faint)}
/* Narrow containers (a side column, a small modal) stack the label above. */
.fk-row.stack{grid-template-columns:1fr;gap:3px}
.fk-row.stack>label{text-align:left;padding-top:0}
.fk-row.stack .fk-help,.fk-row.stack>.fk-err{grid-column:auto}
.req{color:var(--aib-danger);font-weight:700}
/* A checkbox or radio group living in the control column: sits on the same
   baseline as a 36px field, labels inline. */
.fk-check{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-height:36px;font-size:13px;color:var(--aib-ink)}
.fk-check label{display:inline-flex;align-items:center;gap:7px;font-weight:500;cursor:pointer}
.fk-check input{width:16px;height:16px;accent-color:var(--aib-blue);margin:0}
@media (max-width:640px){
  .fk-row{grid-template-columns:1fr;gap:3px}
  .fk-row>label{text-align:left;padding-top:0}
  .fk-row .fk-help,.fk-row>.fk-err{grid-column:auto}
}

/* The enhanced select: wrapper holds the hidden native, the widget and the
   inline error. Inside a filter bar it shrinks to its content like the
   native did (`.filterbar select.inp{width:auto}`). */
.fk-sel{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.filterbar .fk-sel{display:inline-flex}
.fk-native{position:absolute !important;width:1px !important;height:1px !important;min-width:0 !important;padding:0 !important;margin:-1px !important;
  border:0 !important;opacity:0 !important;pointer-events:none !important;overflow:hidden !important;background:none !important}
.fk-sel.is-disabled{cursor:not-allowed}

/* Segmented bar: 2 to 5 choices, all visible, one click. */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;max-width:100%;border-radius:10px;
  background:var(--aib-bg-2);border:1px solid var(--aib-line)}
.seg>button{font-family:inherit;font-size:13px;font-weight:600;line-height:1;color:var(--aib-ink-2);background:transparent;border:0;
  border-radius:8px;padding:0 14px;height:28px;cursor:pointer;white-space:nowrap;
  transition:background var(--aib-fast) var(--aib-ease),color var(--aib-fast) var(--aib-ease),box-shadow var(--aib-fast) var(--aib-ease)}
.seg>button:hover{color:var(--aib-blue)}
/* aria-checked = a radio group built by select.js; aria-pressed = a page's
   own view switch (insurer hub's Private/Commercial) wearing the same bar. */
.seg>button[aria-checked="true"],.seg>button[aria-pressed="true"]{background:var(--aib-surface);color:var(--aib-blue-600);box-shadow:var(--aib-shadow-sm)}
.seg>button:focus-visible{outline:none;box-shadow:var(--aib-ring)}
.seg>button:disabled{color:var(--aib-faint);cursor:not-allowed}
.seg.dis{opacity:.55;pointer-events:none}
.seg[aria-invalid="true"],.fk-row.is-invalid .seg,.fk-row.is-invalid .togs{border-color:var(--aib-danger);box-shadow:0 0 0 3px var(--aib-danger-soft);border-radius:10px}

/* Toggle chips: pick several, each chip shows its own state. */
.togs{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0}
.tog{font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;padding:0 12px 0 9px;height:32px;border-radius:var(--aib-r-pill);
  border:1px solid var(--aib-line-strong);background:var(--aib-surface);color:var(--aib-ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--aib-fast) var(--aib-ease),border-color var(--aib-fast) var(--aib-ease),color var(--aib-fast) var(--aib-ease)}
.tog:hover{border-color:var(--aib-blue);color:var(--aib-blue)}
.tog[aria-pressed="true"]{background:var(--aib-blue-soft);border-color:var(--aib-blue);color:var(--aib-blue-600)}
.tog .ic-on{display:none}
.tog[aria-pressed="true"] .ic-on{display:block}
.tog[aria-pressed="true"] .ic-off{display:none}
.tog:focus-visible{outline:none;box-shadow:var(--aib-ring)}
.tog:disabled{color:var(--aib-faint);cursor:not-allowed}
.togs.dis{opacity:.55;pointer-events:none}

/* Combobox: 6 or more choices. Type to filter; frequent picks pinned on top. */
.cbx{position:relative;flex:1 1 220px;min-width:0;max-width:440px}
.filterbar .cbx{flex:none;width:200px}
.cbx-in{font-family:inherit;font-size:13.5px;height:36px;width:100%;display:block;color:var(--aib-ink);background:var(--aib-surface);
  border:1px solid var(--aib-line-strong);border-radius:var(--aib-r-sm);padding:0 34px 0 11px;
  transition:border-color var(--aib-fast) var(--aib-ease),box-shadow var(--aib-fast) var(--aib-ease)}
.cbx-in::placeholder{color:var(--aib-faint)}
.cbx-in:hover{border-color:var(--aib-muted)}
.cbx-in:focus{outline:none;border-color:var(--aib-blue);box-shadow:var(--aib-ring)}
.cbx-in:disabled{background:var(--aib-bg-2);color:var(--aib-faint);border-color:var(--aib-line);cursor:not-allowed}
.cbx-in[aria-invalid="true"]{border-color:var(--aib-danger);box-shadow:0 0 0 3px var(--aib-danger-soft)}
.cbx .chev{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--aib-muted);pointer-events:none;display:flex}
.cbx-in[aria-expanded="true"]~.chev{transform:translateY(-50%) rotate(180deg)}
/* Mounted on <body> and placed by select.js from the input's rectangle
   (position:fixed, inline top/left or bottom), so no .card overflow:hidden
   and no ancestor stacking context can clip it. 950 sits above the modals
   (800-900): a list inside a modal must open over the modal. */
.pk-panel{position:fixed;width:max-content;max-width:min(420px,calc(100vw - 32px));z-index:950;
  background:var(--aib-surface);border:1px solid var(--aib-line);border-radius:12px;box-shadow:var(--aib-shadow-md);padding:6px}
.pk-panel[hidden]{display:none !important}
.pk-list{list-style:none;margin:0;padding:0;max-height:268px;overflow-y:auto;overscroll-behavior:contain}
.pk-opt{display:flex;align-items:center;gap:10px;padding:0 10px;min-height:36px;border-radius:8px;font-size:13px;color:var(--aib-ink);cursor:pointer;user-select:none}
.pk-opt.is-active{background:var(--aib-hover)}
.pk-opt.is-sel{color:var(--aib-blue-600);font-weight:600}
.pk-opt.is-dis{color:var(--aib-faint);cursor:not-allowed}
.pk-opt svg{margin-left:auto;flex:none;color:var(--aib-blue);visibility:hidden}
.pk-opt.is-sel svg{visibility:visible}
.pk-grp{font-size:11px;font-weight:700;color:var(--aib-faint);padding:9px 10px 3px}
.pk-empty{padding:10px;font-size:12.5px;color:var(--aib-muted)}
@media (prefers-reduced-motion:reduce){.seg>button,.tog,.cbx-in,.cbx .chev{transition:none}}