/* ============================================================================
   Dashboard console: the design system of the workspace (design.md).

   Ported from reference/iotides-console-gradient-sidebar.html, value for value.
   Loaded LAST by the dashboard and sign-in layouts only (never by the candidate
   interview pages), so it can restyle the legacy widgets without touching their
   stylesheets. Component classes keep single-class specificity, like the
   reference, so Tailwind utilities still apply to them; rules that must beat a
   legacy stylesheet are prefixed with the body class `.console`.

   The one renamed class: the reference's table is `.grid`, which is also a
   Tailwind utility (display:grid). Here it is `.data-grid`.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist/Geist-Variable.woff2") format("woff2");
}

/* ============================================================
   Tokens (design.md 2.1, 2.5, 2.6)
   ============================================================ */
:root{
  --brand:#2563EB; --brand-hover:#1F57D6; --brand-soft:#EEF3FE; --brand-line:#CFDCFB; --on-brand:#FFFFFF;

  --bg:#FFFFFF; --rail:#F6F7F9; --surface:#FFFFFF; --pop:#FFFFFF;
  --sunk:#F1F2F5; --hover:#F5F6F8; --press:#EBEDF0; --thumb:#FFFFFF;

  --text:#16181D; --text-2:#555B66; --text-3:#8A909B;
  --line:#E8EAEE; --line-2:#D9DCE2;

  --ok:#11824B;     --ok-soft:#E8F6EF;
  --warn:#A45A00;   --warn-soft:#FDF3E2;
  --info:#2563EB;   --info-soft:#EEF3FE;
  --violet:#6A41D8; --violet-soft:#F2EDFD;
  --teal:#0E7C86;   --teal-soft:#E3F4F5;
  --rose:#B8386A;   --rose-soft:#FCEBF2;
  --danger:#C42F3B; --danger-soft:#FDEDEF;
  --neutral:#5B616C;--neutral-soft:#F1F2F4;

  --toast-bg:#1C1E23; --toast-ink:#FFFFFF; --toast-ico:#6EE7A8;
  --toast-err:#F0707A; --toast-warn:#E5A845;

  --shadow-raise:0 1px 2px rgba(17,24,39,.06), 0 1px 6px -1px rgba(17,24,39,.09);
  --shadow-pop:0 18px 44px -14px rgba(17,24,39,.24), 0 2px 6px rgba(17,24,39,.06);
  --scrim:rgba(17,20,26,.34);

  --skel-base:#EEF0F3; --skel-shine:rgba(255,255,255,.8);

  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.32,1.3,.52,1);

  --font:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --side-w:264px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --brand:#3D7BF7; --brand-hover:#5A8FF8; --brand-soft:rgba(61,123,247,.15); --brand-line:rgba(61,123,247,.4);

  --bg:#1A1B1E; --rail:#141517; --surface:#1A1B1E; --pop:#222327;
  --sunk:#232428; --hover:#212226; --press:#2A2B30; --thumb:#34353B;

  --text:#ECEDEF; --text-2:#A9ADB6; --text-3:#747985;
  --line:#2A2C31; --line-2:#393B41;

  --ok:#4CC38A;     --ok-soft:rgba(76,195,138,.13);
  --warn:#E5A845;   --warn-soft:rgba(229,168,69,.13);
  --info:#6E9DF9;   --info-soft:rgba(110,157,249,.14);
  --violet:#A98BFA; --violet-soft:rgba(169,139,250,.14);
  --teal:#4FC8D1;   --teal-soft:rgba(79,200,209,.13);
  --rose:#F07FAA;   --rose-soft:rgba(240,127,170,.13);
  --danger:#F0707A; --danger-soft:rgba(240,112,122,.14);
  --neutral:#A9ADB6;--neutral-soft:#26272B;

  --toast-bg:#ECEDEF; --toast-ink:#16181D; --toast-ico:#11824B;
  --toast-err:#C42F3B; --toast-warn:#A45A00;

  --shadow-raise:0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-pop:0 18px 44px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  --scrim:rgba(0,0,0,.55);

  --skel-base:#26272C; --skel-shine:rgba(255,255,255,.07);
  color-scheme:dark;
}

.t-ok{--tone:var(--ok);--tone-soft:var(--ok-soft)}
.t-warn{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.t-info,.t-blue{--tone:var(--info);--tone-soft:var(--info-soft)}
.t-violet{--tone:var(--violet);--tone-soft:var(--violet-soft)}
.t-teal{--tone:var(--teal);--tone-soft:var(--teal-soft)}
.t-rose{--tone:var(--rose);--tone-soft:var(--rose-soft)}
.t-amber{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.t-danger{--tone:var(--danger);--tone-soft:var(--danger-soft)}
.t-neutral{--tone:var(--neutral);--tone-soft:var(--neutral-soft)}

/* ============================================================
   Base (zero-specificity element rules, so utilities still win)
   ============================================================ */
html{-webkit-text-size-adjust:100%}
body.console{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* (0,0,2): beats the Tailwind base layer's Inter on form controls, loses to
   any utility (a font-mono textarea keeps its face). */
body :is(button,input,select,textarea){font-family:inherit}
:where(body.console) :where(button,input,select,textarea){color:inherit}
:root[data-theme="dark"] *{scrollbar-color:#393B41 transparent}
:root[data-theme="dark"] *::-webkit-scrollbar-track{background:transparent}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#393B41;border-color:transparent}
:where(body.console) button{cursor:pointer}
:where(body.console) a{color:inherit}
body.console :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Text entry shows focus as its own 1px border turning brand -- never this outline or a halo
   on top of it (design.md 4.22, 7). Buttons and links keep the keyboard outline above. */
body.console :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),select,textarea,.custom-select__trigger):focus-visible{outline:none}
body.console [hidden]{display:none!important}
/* Pages toggle Tailwind's `hidden` on component classes that set their own
   display (a .btn, a .panel); without !important the component would win. */
body.console .hidden{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--text-3)}
.num,.tabular{font-variant-numeric:tabular-nums}
::selection{background:var(--brand-soft)}

/* ============================================================
   Shell (design.md 3)
   ============================================================ */
/* The width animates only once the page has settled (console-ui adds .ready),
   so a page never animates into its saved collapsed / expanded state. */
body.console{height:100vh;height:100dvh;overflow:hidden}
/* Pages without the dashboard shell scroll the document itself -- the public
   report and the join-status page. The shell's lock above left them stuck. */
body.console.pr-body,body.console.auth-body{height:auto;overflow:visible}
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
.app.ready{transition:grid-template-columns .28s var(--ease)}
.app.collapsed{--side-w:72px}

.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:12px;padding:12px;background:var(--rail);border-right:1px solid var(--line);overflow:hidden auto;z-index:40;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 2px 0 6px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--text);font-size:16.5px;font-weight:600;letter-spacing:-.015em;border-radius:10px}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The brand mark sits on its own white rounded tile (white in dark mode too), so
   any uploaded logo -- square, wide, transparent, dark ink -- fits inside it. */
.mark{box-sizing:border-box;width:30px;height:30px;flex:none;padding:3px;border-radius:9px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(15,23,36,.08),0 1px 2px rgba(15,23,36,.06);object-fit:contain;transition:opacity .15s var(--ease)}
.brand-slot{position:relative;display:flex;align-items:center;min-width:0}
.brand-slot .expand-btn{display:none}

.nav{display:flex;flex-direction:column;gap:20px;flex:1}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-label{margin:0 0 4px;padding:0 12px;font-size:12.5px;font-weight:500;color:var(--text-3)}
.nav a,.side-link{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:12px;color:var(--text-2);text-decoration:none;font-weight:500;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}
.nav a:hover,.side-link:hover{background:var(--press);color:var(--text)}
.nav a[aria-current="page"],.side-link[aria-current="page"]{background:var(--thumb);color:var(--text);box-shadow:var(--shadow-raise)}
.nav a[aria-current="page"] .i,.side-link[aria-current="page"] .i{color:var(--brand)}
.nav .lbl,.side-link .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav .count{margin-left:auto;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}

.side-foot{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.account{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:14px;background:transparent;text-align:left;color:inherit;transition:background .15s var(--ease)}
.account:hover{background:var(--press)}
.acc-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.acc-text b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-text small{font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-chev{color:var(--text-3)}
/* The account menu is static markup (its Log out button keeps id="logoutButton"
   for every page script), shown above the account button. */
.side .account-menu{position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 6px);z-index:80;min-width:210px;max-width:none}
.app.collapsed .side .account-menu{position:fixed;right:auto;left:80px;bottom:12px}

.app.collapsed .lbl,.app.collapsed .count,.app.collapsed .brand-name,.app.collapsed .acc-text,.app.collapsed .acc-chev{display:none}
.app.collapsed .nav-label{height:1px;margin:0 12px 8px;padding:0;overflow:hidden;background:var(--line);color:transparent}
.app.collapsed .nav a,.app.collapsed .side-link{justify-content:center;padding:0}
.app.collapsed .side-head{justify-content:center;padding:0}
.app.collapsed .collapse-btn{display:none}
.app.collapsed .expand-btn{display:grid;position:absolute;z-index:1;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:12px;opacity:0;transition:opacity .15s var(--ease),background .15s var(--ease)}
.app.collapsed .brand-slot:hover .expand-btn,.app.collapsed .expand-btn:focus-visible{opacity:1;background:var(--press);color:var(--text)}
.app.collapsed .brand-slot:hover .mark,.app.collapsed .expand-btn:focus-visible + .brand .mark{opacity:0}
.app.collapsed .account{justify-content:center}

.scrim{display:none}
.main{min-width:0;min-height:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.mobilebar{display:none}
.page-scroll{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.page{box-sizing:border-box;width:100%;max-width:1280px;min-height:100%;margin:0 auto;padding:24px 40px 56px;display:flex;flex-direction:column;gap:20px;min-width:0}
.page > *{min-width:0}
.topbar{flex:none;border-bottom:1px solid var(--line);background:var(--bg)}

/* ============================================================
   Controls (design.md 4.1-4.3)
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:1px solid transparent;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .25s var(--spring),opacity .15s var(--ease)}
.btn:active{transform:scale(.97)}
.btn .i{width:17px;height:17px}
.btn.primary{background:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.primary .i{stroke-width:2.1}
.btn.secondary{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.btn.secondary:hover{background:var(--hover)}
.btn.soft{background:var(--brand-soft);color:var(--brand)}
.btn.soft:hover{border-color:var(--brand-line)}
.btn.ghost{background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(1.06)}
.btn.danger-ghost{background:transparent;color:var(--danger)}
.btn.danger-ghost:hover{background:var(--danger-soft)}
.btn.sm{height:34px;padding:0 14px;font-size:13.5px}
.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn:disabled:hover{filter:none}
.btn.primary:disabled:hover{background:var(--brand)}
.btn.secondary:disabled:hover{background:var(--surface)}

.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--text-2);text-decoration:none;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),transform .25s var(--spring)}
.icon-btn:hover{background:var(--press);color:var(--text)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.lg{width:40px;height:40px;border-radius:999px}
.icon-btn.danger:hover{background:var(--danger-soft);color:var(--danger)}
.icon-btn[aria-disabled="true"],.icon-btn:disabled{opacity:.32;cursor:not-allowed}
.icon-btn[aria-disabled="true"]:hover,.icon-btn:disabled:hover{background:transparent;color:var(--text-2)}
.icon-btn[aria-disabled="true"]:active,.icon-btn:disabled:active{transform:none}
.main .icon-btn:hover{background:var(--hover)}
.main .icon-btn.danger:hover{background:var(--danger-soft)}
.main .icon-btn:disabled:hover,.main .icon-btn[aria-disabled="true"]:hover{background:transparent}

.cb{appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--line-2);border-radius:6px;background:var(--surface);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease)}
.cb:hover{border-color:var(--text-3)}
.cb:checked,.cb:indeterminate{background:var(--brand);border-color:var(--brand)}
.cb:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.cb:indeterminate::after{content:"";width:8px;height:2px;border-radius:1px;background:#fff}
.cb:disabled{opacity:.45;cursor:not-allowed}
/* Radio in the same family: a round .cb. */
.rb{appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--line-2);border-radius:50%;background:var(--surface);cursor:pointer;transition:border-color .15s var(--ease)}
.rb:hover{border-color:var(--text-3)}
.rb:checked{border-color:var(--brand)}
.rb:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
/* Switch (a checkbox with role="switch"). */
.switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:36px;height:20px;margin:0;border-radius:999px;background:var(--line-2);cursor:pointer;transition:background .2s var(--ease)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .25s var(--spring)}
.switch:checked{background:var(--brand)}
.switch:checked::after{transform:translateX(16px)}
.switch:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================
   Page header: a full-width bar with the breadcrumb trail
   (design.md 4.4; the caption is replaced by the breadcrumbs)
   ============================================================ */
.page-head{box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;max-width:1280px;min-height:60px;margin:0 auto;padding:12px 40px}
.head-text{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;min-width:0}
.page-title{margin:0;font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.018em}
.page-desc{margin:0;max-width:62ch;color:var(--text-3);font-size:13px;line-height:1.4}
.head-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:2px}
.head-actions .icon-btn.lg{width:34px;height:34px}
.head-actions > .btn{height:34px;padding:0 14px;font-size:13.5px;margin-right:8px}

.crumbs{flex:1 1 auto;min-width:0}
.crumbs-list{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-width:0;margin:0;padding:0;list-style:none}
.crumbs-list li{display:flex;align-items:center;gap:8px;min-width:0}
.crumbs-list a{color:var(--text-3);font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s var(--ease)}
.crumbs-list a:hover{color:var(--text)}
.crumbs-list .crumb-sep{width:14px;height:14px;color:var(--text-3);opacity:.8;stroke-width:2}
.crumbs-list .crumb-parent{color:var(--text-3);font-size:14px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs-list .crumb-current{margin:0;color:var(--text);font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.018em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The organisation's credits (credit-badge.js): a pill beside the actions. */
.console .credit-badge{display:inline-flex;align-items:center;gap:7px;height:34px;margin-right:6px;padding:0 13px 0 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .15s var(--ease),border-color .15s var(--ease),transform .25s var(--spring)}
.console .credit-badge:hover{background:var(--hover);border-color:var(--line-2);color:var(--text)}
.console .credit-badge:active{transform:scale(.97)}
.console .credit-badge > svg{width:16px;height:16px;color:var(--brand)}
.console .credit-badge .credit-unit{color:var(--text-3);font-weight:500}
.console .credit-badge[data-credit-state="low"]{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.console .credit-badge[data-credit-state="low"] > svg,.console .credit-badge[data-credit-state="low"] .credit-unit{color:var(--warn)}
.console .credit-badge[data-credit-state="empty"]{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.console .credit-badge[data-credit-state="empty"] > svg,.console .credit-badge[data-credit-state="empty"] .credit-unit{color:var(--danger)}

/* Notifications: the bell and its panel (notifications.js keeps its ids). */
.notif-wrap{position:relative}
.notif-count{position:absolute;top:1px;right:1px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:2px solid var(--bg);border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;pointer-events:none}
.notif-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:80;width:min(380px,calc(100vw - 24px));padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--pop);box-shadow:var(--shadow-pop);text-align:left;animation:pop-in .18s var(--ease)}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px}
.notif-head .pop-title{margin:0}
.notif-list{max-height:360px;overflow-y:auto;padding:0 6px 6px}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:10px;cursor:pointer;transition:background .15s var(--ease)}
.notif-item:hover{background:var(--hover)}
:root[data-theme="dark"] .notif-item:hover{background:var(--press)}
.notif-item.unread{background:var(--brand-soft)}
.notif-item .dot{margin-top:7px}
.notif-body{flex:1;min-width:0}
.notif-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.notif-title b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:13.5px;font-weight:500}
.notif-title small{flex:none;color:var(--text-3);font-size:12px}
.notif-msg{margin:2px 0 0;color:var(--text-2);font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-state{padding:18px 12px 20px;color:var(--text-2);text-align:center}

/* ============================================================
   KPI boxes (design.md 4.5)
   ============================================================ */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpis.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:13px 14px 14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.kpi-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:13px;font-weight:500}
.kpi-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--tone-soft,var(--neutral-soft));color:var(--tone,var(--neutral))}
.kpi-ico .i{width:16px;height:16px}
.kpi-n{margin:0;font-size:26px;line-height:1.05;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-sub{margin:-2px 0 0;color:var(--text-3);font-size:12.5px;line-height:1.35}

/* ============================================================
   Toolbar, search, filter chips (design.md 4.6-4.8)
   ============================================================ */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0 14px}
.page > .toolbar{margin:0}
.page > .toolbar + .panel,.page > .toolbar + .card{margin-top:-6px}
.search{position:relative;display:block;flex:1 1 260px;max-width:400px;min-width:0}
.search > .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-3);pointer-events:none}
.search input{box-sizing:border-box;width:100%;height:40px;padding:0 40px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text);font-size:14px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.search input::placeholder{color:var(--text-3);opacity:1}
.search input:focus{border-color:var(--brand)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line-2);border-radius:6px;font:500 11.5px/1 var(--font);color:var(--text-3);pointer-events:none}
.search input:focus ~ kbd,.search input:not(:placeholder-shown) ~ kbd{display:none}
.search-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:999px}
.search-clear:active{transform:translateY(-50%) scale(.9)}
.search-clear .i{width:15px;height:15px}

.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;max-width:280px;padding:0 12px 0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:13.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .25s var(--spring)}
.chip:hover{background:var(--hover);color:var(--text)}
.chip:active{transform:scale(.97)}
.chip[aria-expanded="true"]{border-color:var(--text-3);color:var(--text)}
.chip.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.chip .i{width:16px;height:16px}
.chip .chev{width:15px;height:15px;opacity:.7}
.chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sort-chip{display:none}
/* A native field kept for a page's wiring but shown through a chip. */
.date-range-host{display:contents}

/* ============================================================
   Table panel (design.md 4.9)
   ============================================================ */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;min-width:0}
.table-wrap{position:relative;overflow-x:auto}
.data-grid{width:100%;min-width:900px;border-collapse:collapse}
.data-grid.fit{min-width:0}
/* The Tailwind base layer (tailwind.input.css) sets every table cell to nowrap
   and 13px !important; the design's cells wrap and read at 14px (headers 12.5px). */
.data-grid th{height:46px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--text-3);font-size:12.5px!important;line-height:1.3!important;font-weight:500;text-align:left;white-space:nowrap;text-transform:none;letter-spacing:0}
.data-grid td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:middle;white-space:normal;font-size:14px!important;line-height:1.5!important}
/* Contact values read as one token: an email or phone number never breaks. */
.data-grid td:is([data-label="Email"],[data-label="Phone"],[data-label="Contact"]),.data-grid .nowrap{white-space:nowrap}
.data-grid th:first-child,.data-grid td:first-child{padding-left:22px}
.data-grid th:last-child,.data-grid td:last-child{padding-right:16px}
.data-grid tbody tr{transition:background .12s var(--ease)}
.data-grid tbody tr:hover{background:var(--hover)}
.data-grid tbody tr.sel{background:var(--brand-soft)}
.data-grid tbody tr:last-child td{border-bottom:0}
.c-num{text-align:right!important;font-variant-numeric:tabular-nums}
.th-sort{display:inline-flex;align-items:center;gap:5px;height:28px;margin:0 -8px;padding:0 8px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.th-sort:hover{background:var(--hover);color:var(--text)}
.c-num .th-sort{flex-direction:row-reverse}
.sort-ico{display:inline-grid;place-items:center;width:14px;height:14px}
.sort-ico .i{width:14px;height:14px;stroke-width:2;opacity:.4;transition:opacity .15s var(--ease)}
.th-sort:hover .sort-ico .i{opacity:.8}
.th-sort.on{color:var(--text)}
.th-sort.on .sort-ico .i{opacity:1;color:var(--brand)}
.c-actions{width:1%;text-align:right!important;white-space:nowrap}
.c-check{width:52px;padding-right:0!important}
.actions{display:inline-flex;align-items:center;gap:2px}

.person{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--tone-soft,var(--info-soft));color:var(--tone,var(--info));font-size:13px;font-weight:600;letter-spacing:.02em;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.sm{width:34px;height:34px;border-radius:11px;font-size:12.5px}
.avatar.lg{width:56px;height:56px;border-radius:17px;font-size:18px}
.person-text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.name{color:var(--text);font-size:14.5px;font-weight:500}
.sub{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-size:13px}
.src{margin-top:2px;color:var(--text-3);font-size:12px}
.cell-title{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.cell-title .name{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strong{color:var(--text)}

.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;border-radius:999px;background:var(--tone-soft,var(--neutral-soft));color:var(--tone,var(--neutral));font-size:12.5px;font-weight:500;white-space:nowrap}
.badge .i{width:14px;height:14px;stroke-width:2}
.dot{flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tone,currentColor)}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;background:var(--neutral-soft);color:var(--neutral);font-size:12px;font-weight:500;white-space:nowrap}
.tag .i{width:13px;height:13px;stroke-width:2}
.tag.t-ok{background:var(--ok-soft);color:var(--ok)}
.tag[class*="t-"]{background:var(--tone-soft);color:var(--tone)}

.status-select{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 8px 0 11px;border:1px solid transparent;border-radius:999px;background:var(--tone-soft);color:var(--tone);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s var(--ease),transform .25s var(--spring)}
.status-select:hover{border-color:var(--tone)}
.status-select:active{transform:scale(.96)}
.status-select .i{width:14px;height:14px}

.with-ico{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.with-ico .i{width:15px;height:15px;color:var(--text-3)}
.when{display:flex;flex-direction:column;line-height:1.35}
.when span{color:var(--text);white-space:nowrap}
.when small{font-size:12.5px;color:var(--text-3)}
.stack{display:flex;flex-direction:column;gap:3px;line-height:1.35}
.ok-note{display:inline-flex;align-items:center;gap:5px;color:var(--ok);font-size:12.5px;font-weight:500}
.ok-note .i{width:13px;height:13px;stroke-width:2.2}
.inc{display:inline-flex;gap:6px}
.mini{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:8px;background:var(--sunk);color:var(--text-2);font-size:12px;font-weight:500;white-space:nowrap}
.mini .i{width:13px;height:13px}

.bulk{display:flex;align-items:center;gap:8px;padding:9px 12px 9px 22px;border-bottom:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand);font-weight:500;animation:fade-in .2s var(--ease)}
.bulk .grow{flex:1}

.panel-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;min-height:56px;padding:10px 14px 10px 22px;border-top:1px solid var(--line);color:var(--text-3);font-size:13px;font-variant-numeric:tabular-nums}
.panel-foot:empty{display:none}
.foot-left{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.per-page{display:inline-flex;align-items:center;gap:8px}
.size-btn{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 8px 0 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease)}
.size-btn:hover{background:var(--hover)}
.size-btn[aria-expanded="true"]{border-color:var(--text-3)}
.size-btn .i{width:14px;height:14px;color:var(--text-3)}
.foot-range{color:var(--text-2)}
.pager{display:flex;align-items:center;gap:2px}
.pager-status{display:none;padding:0 8px;color:var(--text-2);white-space:nowrap}
.pager button{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--text-2);font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer}
.pager button:hover:not(:disabled){background:var(--hover);color:var(--text)}
.pager button[aria-current="page"]{background:var(--brand-soft);color:var(--brand)}
.pager button:disabled{opacity:.32;cursor:default}
.pager button .i{width:16px;height:16px}
.pager-gap{padding:0 4px;color:var(--text-3)}

.data-grid tr.empty:hover{background:transparent}
.data-grid tr.empty td{padding:64px 20px!important;text-align:center}
.empty-box{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:380px;margin:0 auto;text-align:center}
.empty-ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:8px;border-radius:17px;background:var(--sunk);color:var(--text-3)}
.empty-ico .i{width:22px;height:22px}
.empty-box h3{margin:0;color:var(--text);font-size:15.5px;font-weight:600}
.empty-box p{margin:0 0 12px;color:var(--text-2)}
.empty-box p:last-child{margin-bottom:0}
.empty-page,.empty-panel{padding:64px 24px;text-align:center}
.empty-page .empty-box p{margin-bottom:16px}

/* ============================================================
   Floating layers (design.md 4.16-4.20)
   ============================================================ */
.menu,.pop{position:fixed;z-index:80;min-width:210px;max-width:min(340px,calc(100vw - 24px));padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--pop);box-shadow:var(--shadow-pop);animation:pop-in .18s var(--ease)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--text);font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.menu-item:hover,.menu-item:focus-visible{background:var(--hover);outline:none}
:root[data-theme="dark"] .menu-item:hover,:root[data-theme="dark"] .menu-item:focus-visible{background:var(--press)}
.menu-item > span:not(.dot){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item .i{width:17px;height:17px;color:var(--text-2)}
.menu-item .tick{color:var(--brand)}
.menu-item.danger,.menu-item.danger .i{color:var(--danger)}
.menu-sep{height:1px;margin:6px 4px;background:var(--line)}

.pop{width:312px;padding:16px}
.pop-title{margin:0 0 12px;color:var(--text);font-size:14px;font-weight:600}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.preset{height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s var(--ease),transform .25s var(--spring)}
.preset:hover{background:var(--hover)}
.preset:active{transform:scale(.97)}
.preset.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.date-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.date-fields label{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--text-3);font-size:12.5px;font-weight:500}
.input{box-sizing:border-box;width:100%;height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.input:focus{border-color:var(--brand)}
.input::placeholder{color:var(--text-3);opacity:1}
.pop .date-note{margin:10px 0 0;color:var(--warn);font-size:12.5px;line-height:1.4}
.pop-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 8px 10px;text-align:center}
.pop-empty p{margin:0;color:var(--text-2)}

#tip{position:fixed;z-index:100;inset:auto;top:0;left:0;margin:0;border:0;overflow:visible;padding:5px 9px;border-radius:8px;background:var(--toast-bg);color:var(--toast-ink);font-size:12.5px;font-weight:500;line-height:1.35;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s var(--ease),transform .12s var(--ease)}
#tip.show{opacity:1;transform:none}
#tip.wrap{white-space:normal;max-width:280px}

.toasts{position:fixed;inset:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:11px 20px 11px 14px;border-radius:999px;background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--shadow-pop);font-size:14px;font-weight:500;line-height:1.4;pointer-events:auto;animation:toast-in .45s var(--spring)}
.toast > span{min-width:0}
.toast .i{color:var(--toast-ico)}
.toast.info .i,.toast[data-tone="info"] .i{color:inherit;opacity:.7}
.toast[data-tone="error"] .i{color:var(--toast-err)}
.toast[data-tone="warning"] .i{color:var(--toast-warn)}
.toast.out{animation:toast-out .2s var(--ease) forwards}
.toast-x{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin:0 -10px 0 2px;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;opacity:.6;cursor:pointer;transition:opacity .15s var(--ease)}
.toast-x:hover{opacity:1}
.toast-x .i{width:14px;height:14px;color:inherit!important;opacity:1!important}

/* Dialog (design.md 4.21) */
.dlg{width:100%;max-width:min(480px,calc(100vw - 32px));padding:0;border:0;background:transparent;color:var(--text);overflow:visible}
.dlg.wide{max-width:min(640px,calc(100vw - 32px))}
.dlg::backdrop,.sheet::backdrop{background:var(--scrim);animation:fade-in .2s var(--ease)}
.dlg-card{border-radius:24px;background:var(--pop);color:var(--text);box-shadow:var(--shadow-pop);animation:dlg-in .34s var(--spring)}
.dlg.closing .dlg-card{animation:dlg-out .16s var(--ease) forwards}
.dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 18px 4px 24px}
.dlg-head h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.dlg-head p{margin:5px 0 0;color:var(--text-2)}
.dlg-body{display:grid;gap:16px;padding:16px 24px 6px}
.dlg-body > p{margin:0;color:var(--text-2)}
.dlg-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:18px 20px 20px}
/* A modal drawn in a fixed overlay (a page's own modal div, the idle warning). */
.overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--scrim);overflow-y:auto;animation:fade-in .2s var(--ease)}
.overlay > .dlg-card{width:100%;max-width:480px;max-height:calc(100dvh - 32px);overflow-y:auto}
.overlay > .dlg-card.wide{max-width:640px}
.overlay > .dlg-card.xwide{max-width:880px}
/* A card whose body is its direct child scrolls the BODY, not the card: the head (and
   foot) stay put and the scrollbar runs inside the card, inset from its rounded corners,
   instead of along the card's outer edge (design.md 4.21). Cards that wrap body and foot
   in a <form> keep scrolling the whole card. */
.overlay > .dlg-card:has(> .dlg-body){display:flex;flex-direction:column;overflow:hidden;padding-bottom:12px}
.overlay > .dlg-card:has(> .dlg-body) > :is(.dlg-head,.dlg-foot){flex:0 0 auto}
.overlay > .dlg-card:has(> .dlg-body) > .dlg-foot{padding-bottom:8px}
.overlay > .dlg-card:has(> .dlg-body) > .dlg-body{flex:1 1 auto;min-height:0;margin-right:6px;padding-right:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.overlay > .dlg-card:has(> .dlg-body) > .dlg-body::-webkit-scrollbar{width:8px}
.overlay > .dlg-card:has(> .dlg-body) > .dlg-body::-webkit-scrollbar-track{background:transparent}
.overlay > .dlg-card:has(> .dlg-body) > .dlg-body::-webkit-scrollbar-thumb{border-radius:999px;background:var(--line-2)}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-label{font-size:13px;font-weight:500;color:var(--text)}
.opt{margin-left:4px;color:var(--text-3);font-weight:400}
.req{margin-left:2px;color:var(--danger);font-weight:500}
/* :where() keeps this at (0,1,0) so the focus and invalid states below win. */
.field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"])),.field select{box-sizing:border-box;width:100%;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);opacity:1}
.field input:focus,.field select:focus{border-color:var(--brand)}
.field.invalid input,.field [aria-invalid="true"]{border-color:var(--danger)}
.field.invalid input:focus,.field [aria-invalid="true"]:focus{border-color:var(--danger)}
.field textarea,.textarea{box-sizing:border-box;display:block;width:100%;min-height:96px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;line-height:1.5;outline:none;resize:vertical;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field textarea:focus,.textarea:focus{border-color:var(--brand)}
.field input:disabled,.field select:disabled,.field textarea:disabled,.input:disabled,.textarea:disabled{background:var(--sunk);color:var(--text-2);cursor:not-allowed}
.field input[readonly],.field textarea[readonly]{background:var(--sunk);color:var(--text-2)}
.field input[type="file"]{width:100%;padding:8px 10px;border:1px dashed var(--line-2);border-radius:12px;background:var(--sunk);color:var(--text-2);font-size:13px}
.field input[type="file"]::file-selector-button{margin-right:10px;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text);font:500 13px var(--font);cursor:pointer}
.field-hint{color:var(--text-3);font-size:12.5px;line-height:1.4}
.field-error{color:var(--danger);font-size:12.5px}
.field-error:empty{display:none}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:38px}
.select-wrap .i{position:absolute;right:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.readonly{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border-radius:12px;background:var(--sunk);color:var(--text-2)}
.readonly .i{width:16px;height:16px;color:var(--text-3)}
.check-row{display:flex;align-items:center;gap:10px;color:var(--text);cursor:pointer}
.check-row small{color:var(--text-3)}

/* Details sheet (design.md 4.23) */
.sheet{position:fixed;inset:0 0 0 auto;width:min(440px,100vw);max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--text)}
.sheet-card{display:flex;flex-direction:column;height:100%;border-left:1px solid var(--line);background:var(--pop);animation:sheet-in .36s var(--ease)}
.sheet.closing .sheet-card{animation:sheet-out .18s var(--ease) forwards}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 18px 18px 24px;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.sheet-head p{margin:4px 0 0;color:var(--text-2)}
.kv{flex:1;margin:0;padding:6px 24px;overflow:auto}
.kv > div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.kv > div:last-child{border-bottom:0}
.kv dt{color:var(--text-3);font-size:13.5px}
.kv dd{margin:0;min-width:0;color:var(--text);overflow-wrap:anywhere}
.sheet-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.linkbox{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 4px 0 12px;border-radius:12px;background:var(--sunk);font-size:13px;color:var(--text-2)}
.linkbox span,.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit}

@keyframes fade-in{from{opacity:0}}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.95)}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes dlg-out{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes sheet-in{from{opacity:.4;transform:translateX(32px)}}
@keyframes sheet-out{to{opacity:0;transform:translateX(24px)}}

/* The film grain of the signature gradient (design.md 2.9), as tokens so any
   grain surface (the sidebar, the overview hero) shares one texture. */
:root{
  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='0.55'/%3E%3C/svg%3E");
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   Grain gradient sidebar (design.md 2.9) -- the product's signature
   ============================================================ */
.side{
  --side-ink:#0F1724; --side-ink-2:#1F2A3A; --side-ink-3:#2A3444;
  --side-hover:rgba(255,255,255,.55); --side-line:rgba(25,50,110,.12);
  --grain:var(--grain-light);
  border-right-color:var(--side-line);
  background-color:#E8E9EC;
  background-image:
    var(--grain),
    radial-gradient(ellipse 150% 23% at 58% 29%, rgba(37,99,235,0.5) 0%, rgba(52,112,238,0.42) 28%, rgba(96,140,242,0.26) 55%, rgba(160,184,238,0.1) 80%, rgba(200,210,236,0) 100%),
    radial-gradient(ellipse 120% 34% at 30% 39%, rgba(80,130,242,0.25) 0%, rgba(110,152,242,0.12) 55%, rgba(110,152,242,0) 100%),
    radial-gradient(ellipse 95% 28% at 96% 100%, rgba(96,150,244,0.55) 0%, rgba(130,170,242,0.36) 40%, rgba(180,200,238,0.13) 72%, rgba(205,215,238,0) 100%),
    linear-gradient(to bottom, #E8E9EC 0%, #E5E7EB 45%, #E3E6EB 65%, #DCE2EE 100%);
  background-size:200px 200px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode:overlay, normal, normal, normal, normal;
}
:root[data-theme="dark"] .side{
  --side-ink:#F3F5F8; --side-ink-2:#D2D8E1; --side-ink-3:#B9C1CD;
  --side-hover:rgba(255,255,255,.09); --side-line:rgba(255,255,255,.07);
  --grain:var(--grain-dark);
  background-color:#121419;
  background-image:
    var(--grain),
    radial-gradient(ellipse 150% 23% at 58% 29%, rgba(61,123,247,.5) 0%, rgba(50,110,235,.34) 30%, rgba(40,90,200,.14) 60%, rgba(20,30,60,0) 100%),
    radial-gradient(ellipse 120% 34% at 30% 39%, rgba(61,123,247,.18) 0%, rgba(61,123,247,0) 100%),
    radial-gradient(ellipse 95% 28% at 96% 100%, rgba(70,130,245,.34) 0%, rgba(55,105,220,.15) 45%, rgba(20,30,60,0) 100%),
    linear-gradient(to bottom, #15171C 0%, #13151A 60%, #12151B 100%);
}
.side .brand{color:var(--side-ink)}
.side .nav-label{color:var(--side-ink-3)}
.nav a,.side-link{color:var(--side-ink-2)}
.nav a:not([aria-current="page"]):hover,.side-link:not([aria-current="page"]):hover{background:var(--side-hover);color:var(--side-ink)}
.nav .count{color:var(--side-ink-3)}
.side-foot{border-top-color:var(--side-line)}
.account:hover,.account[aria-expanded="true"]{background:var(--side-hover)}
.acc-text b{color:var(--side-ink)}
.acc-text small,.acc-chev{color:var(--side-ink-3)}
.side .icon-btn{color:var(--side-ink-2)}
.side .icon-btn:hover{background:var(--side-hover);color:var(--side-ink)}
.app.collapsed .nav-label{background:var(--side-line)}
.side .avatar{background:rgba(255,255,255,.72)}
:root[data-theme="dark"] .side .avatar{background:rgba(255,255,255,.08)}
.app.collapsed .brand-slot:hover .expand-btn,.app.collapsed .expand-btn:focus-visible{background:var(--side-hover);color:var(--side-ink)}
.side .account-menu .menu-item{color:var(--text)}

/* ============================================================
   App extensions: the patterns the four reference pages imply
   for every other page (cards, forms, tabs, notes, meters).
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;min-width:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:18px 22px 0}
.card-head > div{min-width:0}
.card-title,.card-head h2,.card-head h3{margin:0;color:var(--text);font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.card-desc{margin:4px 0 0;max-width:72ch;color:var(--text-2);font-size:13px;line-height:1.45}
.card-body{padding:18px 22px 22px}
.card-head + .card-body{padding-top:16px}
.card-foot{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.card-foot .grow,.card-foot .spacer{flex:1}
.card.flush > .card-body{padding:0}
.card > .table-wrap,.card > .panel-foot{border-radius:0}
.card-head + .table-wrap{margin-top:14px;border-top:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.section-title{margin:0;color:var(--text);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.section-desc{margin:2px 0 0;color:var(--text-2);font-size:13px}
.divider{height:1px;margin:4px 0;border:0;background:var(--line)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.stack-lg{display:flex;flex-direction:column;gap:20px;min-width:0}
.stack-md{display:flex;flex-direction:column;gap:14px;min-width:0}
.row-gap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid .span-2,.form-grid .full,.form-grid .span-all{grid-column:1/-1}
.form-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.form-actions .grow{flex:1}

.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 20px;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--sunk);color:var(--text-2);text-align:center;transition:border-color .15s var(--ease),background .15s var(--ease)}
.dropzone:hover,.dropzone.is-over,.dropzone[data-drag-over="true"],.dropzone.dragover{border-color:var(--brand);background:var(--brand-soft)}
.dropzone .empty-ico{margin-bottom:4px;background:var(--surface)}
.dropzone b{color:var(--text);font-weight:600}
.file-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:34px;padding:0 6px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px}
.file-chip small{color:var(--text-3)}

.note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:var(--tone-soft,var(--sunk));color:var(--tone,var(--text-2));font-size:13.5px;line-height:1.45}
.note .i{width:17px;height:17px;margin-top:1px;flex:none}
.note > div,.note > p{min-width:0;margin:0}
.note b,.note strong{color:inherit;font-weight:600}
.note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.tabs{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:3px;border-radius:999px;background:var(--sunk);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:13.5px;font-weight:500;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"],.tab.on,.tab[aria-current="page"]{background:var(--thumb);color:var(--text);box-shadow:var(--shadow-raise)}
.tab .count{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}

.kv-list{margin:0}
.kv-list > div{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.kv-list > div:first-child{padding-top:0}
.kv-list > div:last-child{border-bottom:0;padding-bottom:0}
.kv-list dt{color:var(--text-3);font-size:13.5px}
.kv-list dd{margin:0;min-width:0;color:var(--text);overflow-wrap:anywhere}

.meter{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden}
.meter > span{display:block;height:100%;border-radius:inherit;background:var(--tone,var(--brand));transition:width .3s var(--ease)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:500;white-space:nowrap}
.pill .i{width:13px;height:13px}
.code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.code{display:inline-block;padding:2px 7px;border-radius:7px;background:var(--sunk);color:var(--text)}
pre.code{display:block;margin:0;padding:12px 14px;border-radius:12px;overflow:auto;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.link{color:var(--brand);font-weight:500;text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.9;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* common.setButtonLoading keeps its markup; this is its look. */
.console .btn-loading-content{display:inline-flex;align-items:center;gap:8px}
.console .ui-spinner{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}

/* ============================================================
   Loading skeletons: content-aware shapes with one shimmer sweep
   ============================================================ */
.skel{position:relative;display:block;overflow:hidden;background:var(--skel-base);border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--skel-shine),transparent);animation:skel-sweep 1.4s var(--ease) infinite;pointer-events:none}
.skel-line{height:10px;border-radius:999px}
.skel-line.lg{height:14px}
.skel-line.xl{height:22px;border-radius:8px}
.skel-line.sm{height:8px}
.skel-circle{border-radius:50%}
.skel-pill{height:26px;border-radius:999px}
.skel-tile{width:30px;height:30px;border-radius:10px}
.skel-btn{width:34px;height:34px;border-radius:10px}
@keyframes skel-sweep{to{transform:translateX(100%)}}
/* The shared chart/table skeletons (shared/js/dashboard.js, page-tools.js) keep
   their markup; they take the console's shimmer here. */
.console .viz-skel-shimmer{position:relative;overflow:hidden}
.console .viz-skel-shimmer::after{background:linear-gradient(90deg,transparent,var(--skel-shine),transparent);animation:skel-sweep 1.4s var(--ease) infinite}
.console .viz-skel-block{background:var(--skel-base);border-radius:999px}
.console .viz-skel-donut{border-color:var(--skel-base)}
.console .viz-skel-chart--line svg{color:var(--skel-base)}
.console .viz-skel-chart--bars .viz-skel-block{border-radius:8px 8px 0 0}
.console .viz-skel-listrow{border-radius:14px;border-color:var(--line);background:var(--surface)}
.kpi.is-loading .kpi-n,.kpi .skel{color:transparent}
/* The figure placeholder is the real figure's height, so nothing moves when it lands. */
.kpi > .skel-line.xl{height:27px}
@media (max-width:720px){.kpi > .skel-line.xl{height:23px}}

/* ============================================================
   Legacy widgets restyled in place (their JS and classes stay)
   ============================================================ */

/* Status pills from shared/js/status.js: the design's badge (design.md 4.10). */
.console .status-badge{display:inline-flex;align-items:center;gap:6px;min-height:0;height:26px;padding:0 11px 0 9px;border:0;border-radius:999px;box-shadow:none;background:var(--neutral-soft);color:var(--neutral);font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap}
.console .status-badge.status-badge--sm{height:24px;padding:0 10px 0 8px;font-size:12px}
.console .status-badge .status-badge__icon{width:14px;height:14px;stroke-width:2}
.console .status-badge--success{background:var(--ok-soft);color:var(--ok)}
.console .status-badge--pending{background:var(--warn-soft);color:var(--warn)}
.console .status-badge--progress{background:var(--info-soft);color:var(--info)}
.console .status-badge--review{background:var(--violet-soft);color:var(--violet)}
.console .status-badge--failed{background:var(--danger-soft);color:var(--danger)}
.console .status-badge--expired{background:var(--neutral-soft);color:var(--neutral)}
.console .status-badge--submitted{background:var(--teal-soft);color:var(--teal)}
.console .status-badge--neutral{background:var(--neutral-soft);color:var(--neutral)}

/* The custom select (common.js): a field, a chip, or a status pill. */
.console .custom-select{position:relative;width:100%;min-width:0}
.console .custom-select__trigger{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-weight:400;text-align:left;box-shadow:none;cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.console .custom-select__trigger:hover{border-color:var(--text-3)}
.console .custom-select__trigger:focus-visible,.console .custom-select__trigger[aria-expanded="true"]{outline:none;border-color:var(--brand);box-shadow:none}
.console .custom-select__trigger:disabled{background:var(--sunk);color:var(--text-2);cursor:not-allowed}
.console .custom-select__trigger[aria-invalid="true"]{border-color:var(--danger)}
.console .custom-select__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console .custom-select__lead{display:inline-grid;place-items:center;flex:none}
.console .custom-select--chip .custom-select__label{flex:0 1 auto}
.date-note{margin:6px 0 0;color:var(--warn);font-size:12.5px;line-height:1.4}
.date-note[hidden]{display:none}
.console .custom-select__trigger-icon{margin:0;color:var(--text-3)}
.console .custom-select__trigger-icon svg,.console .custom-select__trigger-icon .i{width:16px;height:16px}
.console .custom-select--compact .custom-select__trigger{height:40px;padding:0 12px;font-size:13.5px}
.console .custom-select__menu{padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--pop);box-shadow:var(--shadow-pop);animation:pop-in .18s var(--ease);min-width:210px}
.console .custom-select__list{padding:0;max-height:280px}
.console .custom-select__option,.console .custom-select--compact .custom-select__option{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer}
.console .custom-select__option:hover,.console .custom-select__option:focus-visible{background:var(--hover);outline:none}
:root[data-theme="dark"] .console .custom-select__option:hover{background:var(--press)}
.console .custom-select__empty{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:76px;padding:18px 14px;color:var(--text-2);font-size:13.5px;text-align:center}
.console .custom-select__empty .i{width:16px;height:16px;flex:none;color:var(--text-3)}
.console .custom-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console .custom-select__option-label.muted{color:var(--text-3)}
.console .custom-select__option[aria-selected="true"]{background:transparent;color:var(--text)}
.console .custom-select__option .tick,.console .custom-select__option svg{width:17px;height:17px;color:var(--brand)}
.console .custom-select__option .dot{margin-right:-2px}
.console .custom-select__search{box-sizing:border-box;position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0 12px;border:1px solid var(--brand);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;outline:none;box-shadow:none}
.console .custom-select__search::placeholder{color:var(--text-3)}
.console .custom-select--compact .custom-select__search{font-size:13.5px}
/* Chip variant (a filter in the toolbar). */
.console .custom-select--chip{width:auto;flex:none}
.console .custom-select--chip .custom-select__trigger{height:40px;max-width:280px;padding:0 12px 0 14px;gap:8px;border-radius:999px;color:var(--text-2);font-size:13.5px;font-weight:500;justify-content:flex-start}
.console .custom-select--chip .custom-select__trigger:hover{background:var(--hover);border-color:var(--line-2);color:var(--text)}
.console .custom-select--chip .custom-select__trigger[aria-expanded="true"]{border-color:var(--text-3);color:var(--text);box-shadow:none}
.console .custom-select--chip .custom-select__trigger:active{transform:scale(.97)}
.console .custom-select--chip.on .custom-select__trigger{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.console .custom-select--chip .custom-select__trigger .i{width:16px;height:16px}
.console .custom-select--chip .custom-select__trigger-icon{color:inherit;opacity:.7}
.console .custom-select--chip .custom-select__trigger-icon svg,.console .custom-select--chip .custom-select__trigger-icon .i{width:15px;height:15px}
.console .custom-select--chip.sort-chip{display:none}
.console .custom-select--chip .custom-select__search{border-radius:999px}
/* Status-select variant (the job status in the Jobs table: design.md 4.12). */
.console .custom-select--status-theme{width:auto;display:inline-block}
.console .custom-select--status-theme .custom-select__trigger{display:inline-flex;height:30px;width:auto;gap:7px;padding:0 8px 0 11px;border:1px solid transparent;border-radius:999px;background:var(--tone-soft,var(--neutral-soft));color:var(--tone,var(--neutral));font-size:13px;font-weight:500;box-shadow:none}
.console .custom-select--status-theme .custom-select__trigger::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.console .custom-select--status-theme .custom-select__trigger:hover,.console .custom-select--status-theme .custom-select__trigger[aria-expanded="true"]{border-color:currentColor;box-shadow:none}
.console .custom-select--status-theme .custom-select__trigger:active{transform:scale(.96)}
.console .custom-select--status-theme .custom-select__trigger-icon{color:inherit}
.console .custom-select--status-theme .custom-select__trigger-icon svg{width:14px;height:14px}
.console .custom-select--status-theme[data-selected-value="open"],.console .custom-select--status-theme[data-selected-value="active"]{--tone:var(--ok);--tone-soft:var(--ok-soft)}
.console .custom-select--status-theme[data-selected-value="hold"]{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.console .custom-select--status-theme[data-selected-value="closed"],.console .custom-select--status-theme[data-selected-value="inactive"]{--tone:var(--neutral);--tone-soft:var(--neutral-soft)}
.console .custom-select--status-theme[data-selected-value] .custom-select__trigger{background:var(--tone-soft,var(--neutral-soft));color:var(--tone,var(--neutral))}
.console .custom-select--status-theme .custom-select__menu{min-width:180px}
.console .custom-select--status-theme .custom-select__option[data-option-value]{background:transparent;color:var(--text)}
.console .custom-select--status-theme .custom-select__option[data-option-value]:hover{background:var(--hover)}
.console .custom-select--status-theme .custom-select__option::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--neutral)}
.console .custom-select--status-theme .custom-select__option[data-option-value="open"]::before,.console .custom-select--status-theme .custom-select__option[data-option-value="active"]::before{background:var(--ok)}
.console .custom-select--status-theme .custom-select__option[data-option-value="hold"]::before{background:var(--warn)}
.console .custom-select--status-theme .custom-select__option[data-option-value="closed"]::before{background:var(--neutral)}
.console [data-select-option-tooltip-host],.console [data-select-option-tooltip="true"]{border-radius:8px!important;background:var(--toast-bg)!important;color:var(--toast-ink)!important;font:500 12.5px/1.4 var(--font)!important;padding:6px 10px!important;box-shadow:var(--shadow-pop)!important}

/* The blocked-submit dialog (form-validation.js): the design's dialog. */
.console .fv-dialog{width:100%;max-width:min(480px,calc(100vw - 32px));padding:0;border:0;border-radius:24px;background:var(--pop);color:var(--text);box-shadow:var(--shadow-pop);overflow:hidden}
.console .fv-dialog::backdrop{background:var(--scrim)}
.console .fv-dialog[open]{animation:dlg-in .34s var(--spring)}
.console .fv-dialog-fallback{background:var(--scrim)}
.console .fv-dialog__head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 4px;border:0;background:transparent}
.console .fv-dialog__icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:12px;background:var(--danger-soft);color:var(--danger)}
.console .fv-dialog__icon svg{width:18px;height:18px}
.console .fv-dialog__title{margin:0;color:var(--text);font-size:18px;font-weight:600;letter-spacing:-.015em}
.console .fv-dialog__lead{margin:5px 0 0;color:var(--text-2);font-size:14px}
.console .fv-dialog__list{margin:0;padding:12px 16px 4px;list-style:none;max-height:min(50vh,360px);overflow-y:auto}
.console .fv-dialog__item{margin:0;border:0}
.console .fv-dialog__row{display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left}
.console button.fv-dialog__row{cursor:pointer}
.console button.fv-dialog__row:hover{background:var(--hover)}
.console .fv-dialog__marker{flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--danger)}
.console .fv-dialog__field{display:block;color:var(--text);font-size:13.5px;font-weight:500}
.console .fv-dialog__msg{display:block;color:var(--text-2);font-size:13px}
.console .fv-dialog__actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 20px;border:0;background:transparent}
.console .fv-dialog__ok{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s var(--ease),transform .25s var(--spring)}
.console .fv-dialog__ok:hover{background:var(--brand-hover)}
.console .fv-dialog__ok:active{transform:scale(.97)}
.console .fv-error{display:flex;align-items:flex-start;gap:6px;margin-top:2px;color:var(--danger);font-size:12.5px;font-weight:400;line-height:1.4}
.console .fv-error svg{width:14px;height:14px;margin-top:1px;flex:none}
.console .fv-warning{margin-bottom:16px}

/* Announcements pushed by a super admin (shared/js/announcements.js). */
.console .pa-overlay{background:var(--scrim);backdrop-filter:none}
.console .pa-dialog{border:0;border-radius:24px;background:var(--pop);color:var(--text);box-shadow:var(--shadow-pop)}
.console .pa-title{color:var(--text);font-family:var(--font);font-weight:600;letter-spacing:-.015em}
.console .pa-body,.console .pa-meta{color:var(--text-2)}
.console .pa-btn{border-radius:999px;font-family:var(--font);font-weight:500}
.console .pa-btn--primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.console .pa-btn--primary:hover{background:var(--brand-hover)}
.console .footer-link{color:var(--text-2);text-decoration:none}
.console .footer-link:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* Charts (shared/js/dashboard.js): cards, KPI tiles, tabs and tables. The viz
   tokens (dataviz.css) switch only for the old midnight theme; here they read
   the console's, so chart tables, borders and insight text follow dark mode. */
.console{--viz-surface:var(--surface);--viz-plane:var(--sunk);--viz-ink:var(--text);--viz-ink-strong:var(--text);--viz-muted:var(--text-3);--viz-line:var(--line);--viz-hairline:var(--line)}
.console .viz-insight strong{color:inherit}
.console .viz-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:none;overflow:hidden}
.console .viz-card__head{padding:18px 22px 4px;border:0;background:transparent}
.console .viz-card__title{color:var(--text);font-size:15.5px;font-weight:600;letter-spacing:-.01em;text-transform:none}
.console .viz-card__note{color:var(--text-3);font-size:12.5px}
.console .viz-card__body{padding:10px 18px 18px}
.console .viz-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.console .viz-kpi{display:flex;flex-direction:column;gap:8px;padding:13px 14px 14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:none}
.console .viz-kpi__label{display:flex;align-items:center;flex-direction:row-reverse;justify-content:space-between;gap:8px;color:var(--text-2);font-size:13px;font-weight:500;text-transform:none;letter-spacing:0}
.console .viz-kpi__icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:var(--neutral-soft);color:var(--neutral)}
.console .viz-kpi__icon svg{width:16px;height:16px}
.console .viz-kpi__icon--blue{background:var(--info-soft);color:var(--info)}
.console .viz-kpi__icon--green{background:var(--ok-soft);color:var(--ok)}
.console .viz-kpi__icon--amber{background:var(--warn-soft);color:var(--warn)}
.console .viz-kpi__icon--rose{background:var(--rose-soft);color:var(--rose)}
.console .viz-kpi__icon--violet{background:var(--violet-soft);color:var(--violet)}
.console .viz-kpi__value{color:var(--text);font-size:26px;font-weight:600;line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.console .viz-kpi__value--sm{font-size:20px}
.console .viz-kpi__sub{color:var(--text-3);font-size:12.5px}
.console .viz-kpi__delta--up{color:var(--ok)}
.console .viz-kpi__delta--down{color:var(--danger)}
.console .viz-kpi__delta--flat{color:var(--text-3)}
.console .viz-tabs{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:999px;background:var(--sunk)}
.console .viz-tab{height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:13.5px;font-weight:500;box-shadow:none}
.console .viz-tab:hover{color:var(--text)}
.console .viz-tab[aria-selected="true"]{background:var(--thumb);color:var(--text);box-shadow:var(--shadow-raise)}
.console .viz-tab__count{background:transparent;color:var(--text-3)}
.console .viz-table{color:var(--text-2)}
.console .viz-table th{color:var(--text-3);font-weight:500;text-transform:none;letter-spacing:0;border-color:var(--line)}
.console .viz-table td{border-color:var(--line)}
.console .viz-table-toggle{border-radius:999px;color:var(--text-2);font-weight:500}
.console .viz-table-toggle:hover{background:var(--hover);color:var(--text)}
.console .viz-insight{border-radius:14px;border:0}
.console .viz-insight--good{background:var(--ok-soft);color:var(--ok)}
.console .viz-insight--watch{background:var(--warn-soft);color:var(--warn)}
.console .viz-insight--risk{background:var(--danger-soft);color:var(--danger)}
.console .viz-insight--info{background:var(--info-soft);color:var(--info)}
.console .viz-empty{color:var(--text-2)}

/* The shell's footer (the super admin's per-company footer text). */
.app-foot{flex:none;border-top:1px solid var(--line);background:var(--bg)}
/* A slim band (~31px): it is pinned under the scrolling content on every page. */
.app-foot-inner{box-sizing:border-box;max-width:1280px;margin:0 auto;padding:6px 40px;color:var(--text-3);font-size:12px;line-height:18px;text-align:right}
.app-foot-inner a{color:var(--text-2)}

/* ============================================================
   Dark-mode safety net: Tailwind light utilities left in page
   markup read from the tokens instead (dashboard only).
   ============================================================ */
:root[data-theme="dark"] .app .bg-white,:root[data-theme="dark"] .app .hover\:bg-white:hover{background-color:var(--surface)}
:root[data-theme="dark"] .app .bg-slate-50,:root[data-theme="dark"] .app .bg-slate-100,:root[data-theme="dark"] .app .bg-gray-50,:root[data-theme="dark"] .app .hover\:bg-slate-50:hover,:root[data-theme="dark"] .app .hover\:bg-slate-100:hover{background-color:var(--sunk)}
:root[data-theme="dark"] .app .text-slate-950,:root[data-theme="dark"] .app .text-slate-900,:root[data-theme="dark"] .app .text-slate-800,:root[data-theme="dark"] .app .text-gray-900,:root[data-theme="dark"] .app .hover\:text-slate-950:hover,:root[data-theme="dark"] .app .hover\:text-slate-900:hover{color:var(--text)}
:root[data-theme="dark"] .app .text-slate-700,:root[data-theme="dark"] .app .text-slate-600,:root[data-theme="dark"] .app .text-gray-700,:root[data-theme="dark"] .app .text-gray-600{color:var(--text-2)}
:root[data-theme="dark"] .app .text-slate-500,:root[data-theme="dark"] .app .text-slate-400,:root[data-theme="dark"] .app .text-gray-500{color:var(--text-3)}
:root[data-theme="dark"] .app .border-slate-100,:root[data-theme="dark"] .app .border-slate-200,:root[data-theme="dark"] .app .border-gray-200{border-color:var(--line)}
:root[data-theme="dark"] .app .border-slate-300,:root[data-theme="dark"] .app .hover\:border-slate-300:hover{border-color:var(--line-2)}
:root[data-theme="dark"] .app .divide-slate-100 > * + *,:root[data-theme="dark"] .app .divide-slate-200 > * + *{border-color:var(--line)}
:root[data-theme="dark"] .app .bg-blue-50,:root[data-theme="dark"] .app .bg-sky-50,:root[data-theme="dark"] .app .bg-indigo-50{background-color:var(--brand-soft)}
:root[data-theme="dark"] .app .text-blue-600,:root[data-theme="dark"] .app .text-blue-700,:root[data-theme="dark"] .app .text-blue-800{color:var(--brand)}
:root[data-theme="dark"] .app .border-blue-200,:root[data-theme="dark"] .app .border-blue-100{border-color:var(--brand-line)}
:root[data-theme="dark"] .app .bg-emerald-50,:root[data-theme="dark"] .app .bg-green-50{background-color:var(--ok-soft)}
:root[data-theme="dark"] .app .text-emerald-700,:root[data-theme="dark"] .app .text-emerald-800,:root[data-theme="dark"] .app .text-green-700{color:var(--ok)}
:root[data-theme="dark"] .app .bg-amber-50,:root[data-theme="dark"] .app .bg-yellow-50{background-color:var(--warn-soft)}
:root[data-theme="dark"] .app .text-amber-700,:root[data-theme="dark"] .app .text-amber-800,:root[data-theme="dark"] .app .text-amber-900{color:var(--warn)}
:root[data-theme="dark"] .app .bg-red-50,:root[data-theme="dark"] .app .bg-rose-50{background-color:var(--danger-soft)}
:root[data-theme="dark"] .app .text-red-600,:root[data-theme="dark"] .app .text-red-700,:root[data-theme="dark"] .app .text-red-800{color:var(--danger)}
:root[data-theme="dark"] .app .border-emerald-200,:root[data-theme="dark"] .app .border-amber-200,:root[data-theme="dark"] .app .border-amber-300,:root[data-theme="dark"] .app .border-red-200{border-color:var(--line-2)}
:root[data-theme="dark"] .app input:not([type="checkbox"]):not([type="radio"]),:root[data-theme="dark"] .app textarea,:root[data-theme="dark"] .app select{color-scheme:dark}

/* ============================================================
   Responsive (design.md 9)
   ============================================================ */
@media (max-width:1100px){
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .app,.app.collapsed{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:284px;transform:translateX(-102%);transition:transform .34s var(--ease)}
  .app.nav-open .side{transform:none;box-shadow:var(--shadow-pop)}
  .app.collapsed .lbl,.app.collapsed .count,.app.collapsed .brand-name,.app.collapsed .acc-text,.app.collapsed .acc-chev{display:revert}
  .collapse-btn,.expand-btn{display:none!important}
  .scrim{display:block;position:fixed;inset:0;z-index:35;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
  .app.nav-open .scrim{opacity:1;pointer-events:auto}
  .mobilebar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:56px;padding:0 12px;padding-top:env(safe-area-inset-top,0px);background:var(--bg);border-bottom:1px solid var(--line)}
  .page{padding:20px 16px 48px}
  .page-head{min-height:0;padding:14px 16px}
  .mobilebar .brand{margin-right:auto}
  .page-head [data-global]{display:none}
  .app-foot-inner{padding:6px 16px}
  .kpis.cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .page-title,.crumbs-list .crumb-current{font-size:17px}
  .page{padding-top:18px}
  .kpis{gap:8px}
  .kpi{padding:11px 12px 12px;gap:6px;border-radius:14px}
  .kpi-ico{width:26px;height:26px;border-radius:9px}
  .kpi-n{font-size:22px}
  .head-actions > .btn{margin-right:0}
  .inc{flex-wrap:wrap}
  .search{max-width:none;flex-basis:100%}
  .tools{margin-left:0}
  .chip,.console .custom-select--chip .custom-select__trigger{max-width:220px}
  .sort-chip,.console .custom-select--chip.sort-chip{display:inline-flex}

  .data-grid{min-width:0}
  .data-grid thead{display:none}
  .data-grid,.data-grid tbody,.data-grid tr,.data-grid td{display:block}
  .data-grid tbody tr{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding:18px 18px 14px}
  .data-grid tbody tr + tr{border-top:1px solid var(--line)}
  .data-grid td{padding:0!important;border:0!important;min-width:0}
  .data-grid td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--text-3);font-size:12px}
  .data-grid td.c-main{grid-column:1/-1}
  .data-grid td.c-main::before,.data-grid td.c-actions::before,.data-grid td.c-check::before{display:none}
  .data-grid td.c-num{text-align:left!important}
  .data-grid td.c-actions{grid-column:1/-1;display:flex;justify-content:flex-end;width:auto;padding-top:10px!important;border-top:1px dashed var(--line)!important}
  .data-grid td.c-check{position:absolute;top:18px;right:18px;width:auto}
  .data-grid.t-reports td.c-main{padding-right:34px!important}
  .data-grid tr.empty{display:block}
  .data-grid tr.empty td{padding:48px 16px!important}
  .sub{max-width:220px}
  .panel-foot{padding-left:18px}
  .per-label{display:none}
  .pager .pg-num,.pager .pager-gap{display:none}
  .pager-status{display:inline}
  .kv > div,.kv-list > div{grid-template-columns:1fr;gap:4px}
  .form-grid,.form-grid.cols-3,.split.even{grid-template-columns:minmax(0,1fr)}
  .card-head{padding:16px 16px 0}
  .card-body{padding:16px}
  .card-foot{padding:12px 16px}
  .kpis.cols-3,.kpis.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (hover:none){ .search kbd{display:none} #tip{display:none} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   Room for what a page script fills (layout stability, CLS)
   These regions are empty in the HTML and their page script draws a skeleton,
   then the data, a moment after the first paint. Empty, they collapsed and
   everything under them jumped when the skeleton arrived. While :empty they
   keep the height of that skeleton; the rule stops applying as soon as the
   script writes anything. Heights measured from the skeletons at desktop and
   phone width (the grids stack at 1100 px, the even splits at 720 px).
   Regions hiring.css collapses while empty (the insight strips, the logs
   charts) cannot be held open here; their templates carry the skeleton instead.
   ============================================================ */
#overviewCharts:empty{min-height:1163px}
#revenueCharts:empty{min-height:374px}
#revenueFacts:empty{min-height:244px}
#jobInsightsSummary:empty{min-height:28px}
#jobInsightsPipeline:empty{min-height:198px}
#jobInsightsVerdicts:empty{min-height:286px}
#jobInsightsScores:empty{min-height:200px}
#jobInsightsTopCandidates:empty{min-height:224px}
.table-wrap:has(> #lotsGrid > tbody:empty){min-height:172px}
@media (max-width:1100px){
  #overviewCharts:empty{min-height:2401px}
  #revenueFacts:empty{min-height:562px}
}
@media (max-width:720px){
  #revenueCharts:empty{min-height:393px}
  #jobInsightsSummary:empty{min-height:199px}
  #jobInsightsPipeline:empty{min-height:192px}
  #jobInsightsVerdicts:empty{min-height:280px}
  #jobInsightsScores:empty{min-height:276px}
  #jobInsightsTopCandidates:empty{min-height:352px}
  .table-wrap:has(> #lotsGrid > tbody:empty){min-height:317px}
}