/* ============================================================
   Codeflow v4 — role-based interactive mockup
   Visual system preserved from approved codeflow_mock_v3.html
   Self-contained · offline · no CDN · no backend · demo data only
   ============================================================ */
:root{
  /* Radius language tightened to the approved flagship scale (6 / 8 / 12 / 16) —
     removes the oversized "giant rounded rectangle" feel. Names unchanged. */
  --r-sm:6px;--r:8px;--r-lg:12px;--r-xl:16px;
  --ink:var(--txt);   /* alias used by some server fragments (filterbar / project cards) */
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Consolas,"Liberation Mono",monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Space Grotesk",var(--sans);
  /* Valiant Lifecare brand — royal blue #0045AA (from valiantlifecare.com meta theme-color). */
  --brand-1:#0A57C2;--brand-2:#0045AA;--brand-3:#003E96;
  --grad:linear-gradient(135deg,#0A57C2,#0045AA);
  --grad-2:linear-gradient(135deg,#0E9C86,#2E6BD6);
  /* --cf-* semantic aliases (theme-aware via lazy var() substitution). Future
     Codeflow styling should prefer these; they resolve to the active theme's
     values below, so a single token edit rebrands everywhere. */
  --cf-bg:var(--bg);--cf-surface:var(--surface);--cf-surface-secondary:var(--surface-2);
  --cf-border:var(--line);--cf-text:var(--txt);--cf-text-muted:var(--muted);
  --cf-primary:var(--brand-2);--cf-primary-hover:var(--brand-3);--cf-accent:var(--accent);
  --cf-success:var(--mint);--cf-warning:var(--gold);--cf-danger:var(--danger);--cf-info:var(--info);
  --cf-shadow:var(--shadow);--cf-input-bg:var(--surface-2);--cf-table-header:var(--surface-2);
  --cf-sidebar-bg:var(--surface);
}
html[data-theme="dark"]{
  /* True executive dark — graphite / charcoal base, restrained blue. No navy-everywhere, no neon. */
  --bg:#0B0F16;--bg-tint1:rgba(47,111,223,.05);--bg-tint2:rgba(47,111,223,.06);
  --surface:#141922;--surface-2:#0F141C;--surface-3:#1B222D;--surface-4:#28313E;
  --line:#232B37;--line-2:#313B49;--txt:#E9EEF6;--muted:#9DAABC;--faint:#65728A;
  --accent:#3F82E6;--mint:#33B88B;--gold:#D8A23C;--danger:#E2596A;--info:#5C97E8;--violet:#6FA3EC;
  --shadow:0 18px 44px rgba(0,0,0,.55);--shadow-sm:0 1px 2px rgba(0,0,0,.5);--ring:rgba(63,130,230,.40);--track:#1B222D;
}
html[data-theme="light"]{
  /* Clean cool gray-blue canvas — no lavender. Matches approved Valiant mock. */
  --bg:#EEF2F7;--bg-tint1:rgba(0,69,170,.05);--bg-tint2:rgba(10,87,194,.05);
  --surface:#FFFFFF;--surface-2:#F5F8FC;--surface-3:#EDF2F8;--surface-4:#E1EAF4;
  --line:#E4EBF3;--line-2:#D3DEEC;--txt:#0E1F33;--muted:#576A80;--faint:#8394A8;
  --accent:#0045AA;--mint:#0E9C86;--gold:#B8770A;--danger:#D93A45;--info:#2563C9;--violet:#3F6FD6;
  /* Restrained elevation — subtle, only where meaningful (no floating "card city"). */
  --shadow:0 12px 32px rgba(16,42,80,.10);--shadow-sm:0 1px 2px rgba(16,42,80,.06);--ring:rgba(0,69,170,.28);--track:#E8EEF6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:13px/1.5 var(--sans);color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
a{color:var(--violet);text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:20px;border:3px solid transparent;background-clip:padding-box}
.mono{font-family:var(--mono)}.dsp{font-family:var(--display)}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:12px}.tiny{font-size:11px}
.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
.hidden{display:none!important}
.row{display:flex;align-items:center;gap:10px}.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column}
.spacer{flex:1}.sep{height:1px;background:var(--line);margin:14px 0}

/* demo banner */
.demobar{background:linear-gradient(90deg,rgba(10,87,194,.16),rgba(0,69,170,.12));border-bottom:1px solid var(--line);
  color:var(--txt);font-size:11.5px;padding:5px 16px;text-align:center;letter-spacing:.02em}
.demobar b{color:var(--accent)}

/* layout */
.app{display:grid;grid-template-columns:240px 1fr;height:calc(100vh - 27px)}
.sidebar{background:var(--surface-2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.brand{display:flex;align-items:center;gap:11px;padding:15px 16px 11px}
.brand .logo{width:32px;height:32px;border-radius:8px;background:var(--brand-2);display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;box-shadow:none;font-family:var(--display)}
.brand .nm{font-weight:700;font-size:16px;font-family:var(--display);letter-spacing:-.2px}
.brand .nm small{display:block;font-weight:500;font-size:9.5px;color:var(--faint);letter-spacing:.2px;margin-top:2px}
.nav{flex:1;overflow-y:auto;padding:8px 12px 24px}
.nav-g{margin:15px 10px 6px;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:8px;color:var(--muted);font-weight:500;margin:1px 0;position:relative;font-size:12.5px}
.nav a .ic{width:18px;text-align:center;font-size:15px}
.nav a:hover{background:var(--surface-3);color:var(--txt)}
.nav a.active{background:var(--surface-3);color:var(--accent);font-weight:600}
.nav a.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-2)}
.nav a .bdg{margin-left:auto;background:var(--brand-2);color:#fff;font-size:10px;font-weight:700;border-radius:20px;padding:1px 7px;min-width:18px;text-align:center}
.side-foot{padding:11px 16px;border-top:1px solid var(--line);font-size:10.5px;color:var(--faint)}

.main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{display:flex;align-items:center;gap:11px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--surface);z-index:20;min-height:58px}
.crumbs{font-size:12.5px;color:var(--muted)}.crumbs b{color:var(--txt);font-weight:600}
.search{flex:1;max-width:420px;position:relative}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--txt);font-size:12.5px;outline:none}
.search input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--ring)}
.search .si{position:absolute;left:11px;top:8px;color:var(--faint)}
.iconbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;position:relative;color:var(--muted)}
.iconbtn:hover{color:var(--txt);border-color:var(--line-2);background:var(--surface-3)}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.pill-day{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:6px 12px;border-radius:22px}
.pill-day b{color:var(--violet)}
.live{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(47,224,198,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,224,198,.5)}70%{box-shadow:0 0 0 8px rgba(47,224,198,0)}100%{box-shadow:0 0 0 0 rgba(47,224,198,0)}}
.roleswitch{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 6px;border:1px solid var(--line);border-radius:24px;background:var(--surface-2)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-2);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;box-shadow:0 0 0 2px var(--surface-2),0 0 0 3px var(--line-2)}
.roleswitch .who{line-height:1.15}.roleswitch .who b{font-size:12.5px}.roleswitch .who span{display:block;font-size:10.5px;color:var(--faint)}
.roleswitch select{border:none;background:transparent;font:inherit;font-size:12.5px;color:var(--violet);font-weight:700;outline:none;cursor:pointer;max-width:170px}
.ico-sun,.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:block}html[data-theme="light"] .ico-moon{display:block}

.content{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0;padding:22px 26px 80px;scroll-behavior:smooth}
.vh{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.vh h1{margin:0;font-size:23px;font-family:var(--display);letter-spacing:-.2px}
.vh .sub{color:var(--muted);font-size:12.5px;margin-top:3px;max-width:720px}
.vh .ha{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

/* CTA hierarchy — color = what the action does.
   SECONDARY (default): neutral outlined · PRIMARY: solid Valiant blue · GHOST: tertiary/text
   MINT: success · DANGER: destructive. Flat, restrained — no gradients, no heavy glow. */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--txt);font-weight:600;font-size:12.5px;transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--line-2);background:var(--surface-3)}
.btn.primary{background:var(--brand-2);border-color:var(--brand-2);color:#fff;box-shadow:none}
.btn.primary:hover{background:var(--brand-3);border-color:var(--brand-3)}
.btn.mint{background:var(--mint);border-color:var(--mint);color:#fff}
.btn.mint:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-3);color:var(--txt)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.danger{color:var(--danger);background:var(--surface);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}.g-5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);max-width:100%;min-width:0}
.card.pad{padding:18px}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-h h3{margin:0;font-size:13.5px;font-family:var(--display);font-weight:600}
.card-h .ha{margin-left:auto;display:flex;gap:8px}
.card-b{padding:16px 18px}

/* KPI — integrated metric treatment: thin border, no floating shadow, strong tabular numerals. */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:none;position:relative;overflow:hidden}
.kpi .t{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .pip{width:8px;height:8px;border-radius:2px;display:inline-block}
.kpi .n{font-size:25px;font-weight:700;margin-top:7px;font-family:var(--display);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi .l{font-size:11.5px;margin-top:4px;color:var(--muted);display:flex;gap:6px;align-items:center}
.delta{font-weight:700}.delta.up{color:var(--mint)}.delta.down{color:var(--danger)}

table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{text-align:left;padding:9px 13px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2);position:sticky;top:0;height:38px}
table.tbl td{padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
table.tbl tr:hover td{background:var(--surface-2)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr.clk{cursor:pointer}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);max-height:560px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;line-height:1.7;border:1px solid transparent}
.chip .pip{width:6px;height:6px;border-radius:50%;background:currentColor}
.c-green{background:rgba(47,224,198,.14);color:var(--mint)}
.c-red{background:rgba(255,80,105,.14);color:var(--danger)}
.c-amber{background:rgba(255,194,75,.16);color:var(--gold)}
.c-blue{background:rgba(111,170,255,.16);color:var(--info)}
.c-violet{background:rgba(185,140,255,.16);color:var(--violet)}
.c-gray{background:var(--surface-3);color:var(--muted)}
.c-pink{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}

.bar{height:8px;background:var(--track);border-radius:20px;overflow:hidden;display:flex}
.bar>span{height:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:9px 15px;font-size:11px;color:var(--muted);margin-top:9px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}
.spark{display:flex;align-items:flex-end;gap:3px;height:44px}
.spark i{flex:1;background:var(--grad);border-radius:3px 3px 0 0;min-height:3px;opacity:.85}
.ring{--p:70;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--brand-2) calc(var(--p)*1%),var(--track) 0);display:grid;place-items:center}
.ring::after{content:attr(data-v);width:42px;height:42px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:12px;font-weight:800}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:none;border:none;padding:9px 14px;font-weight:600;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.active{color:var(--txt);border-bottom-color:var(--brand-2)}
.tabs button:hover{color:var(--txt)}

.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:13px;background:var(--surface);color:var(--txt);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--ring)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--surface-3);color:var(--faint);cursor:not-allowed}
.field .hint{font-size:11px;color:var(--faint);margin-top:4px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* drawer (right) */
.drawer-scrim,.modal-scrim{position:fixed;inset:0;background:rgba(8,5,18,.6);backdrop-filter:blur(3px);display:none;z-index:100}
.drawer-scrim.open,.modal-scrim.open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,94vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;z-index:101}
.drawer.open{transform:none}
.drawer-h{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);z-index:2}
.drawer-h h3{margin:0;font-size:17px;font-family:var(--display)}
.drawer-b{padding:20px 22px 40px}
.x{margin-left:auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;color:var(--muted)}

.modal-scrim{display:none;align-items:flex-start;justify-content:center;padding:44px 16px;overflow-y:auto}
.modal-scrim.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);width:100%;max-width:640px;animation:pop .18s ease}
.modal.wide{max-width:920px}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:16px;font-family:var(--display)}
.modal-b{padding:20px 22px;max-height:66vh;overflow-y:auto}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:15px 22px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl)}

.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{background:var(--surface-3);color:var(--txt);border:1px solid var(--line-2);padding:12px 15px;border-radius:13px;box-shadow:var(--shadow);font-size:13px;display:flex;align-items:center;gap:10px;min-width:260px;max-width:390px;animation:slidein .22s ease}
.toast .ti{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex-shrink:0;color:#fff}
.toast.ok .ti{background:var(--mint);color:#08251f}.toast.warn .ti{background:var(--gold);color:#3a2a00}.toast.err .ti{background:var(--danger)}.toast.info .ti{background:var(--info)}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

.notice{padding:11px 14px;border-radius:12px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line)}
.notice.violet{background:var(--bg-tint2);color:var(--txt)}
.notice.amber{background:rgba(255,194,75,.1);color:var(--gold)}
.notice.mint{background:rgba(47,224,198,.1);color:var(--mint)}
.notice.red{background:rgba(255,80,105,.1);color:var(--danger)}
.notice.blue{background:rgba(111,170,255,.1);color:var(--info)}

.kv{display:grid;grid-template-columns:160px 1fr;gap:7px 14px;font-size:13px}
.kv dt{color:var(--muted);font-weight:600}.kv dd{margin:0}
.deny{padding:44px;text-align:center;color:var(--muted)}.deny .big{font-size:46px;margin-bottom:8px}

/* project grid */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;cursor:pointer;transition:border-color .14s,box-shadow .14s;position:relative;overflow:hidden}
.pcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.pcard .ph{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.pcard .pn{font-weight:700;font-size:14px;font-family:var(--display)}
.pcard .pc{font-size:11px;color:var(--faint)}
.pcard .pm{display:flex;gap:12px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.pcard .pm b{color:var(--txt);font-size:14px;display:block;font-family:var(--display)}
.hbadge{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.h-green{background:var(--mint)}.h-amber{background:var(--gold)}.h-red{background:var(--danger)}

/* mock review panel */
.mockrev{position:fixed;left:16px;bottom:16px;width:300px;max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);z-index:150;font-size:12px}
.mockrev.min{width:auto}
.mockrev.min .mb{display:none}
.mockrev .mh .x{cursor:pointer}
.mockrev .mh{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;font-family:var(--display)}
.mockrev .mb{padding:8px 14px 12px}
.mockrev .it{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.mockrev .it .st{margin-left:auto;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px}
.st-done{background:rgba(47,224,198,.16);color:var(--mint)}.st-demo{background:rgba(111,170,255,.16);color:var(--info)}.st-pending{background:rgba(255,194,75,.16);color:var(--gold)}

.session-bar{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,var(--bg-tint1),var(--bg-tint2));border:1px solid var(--line-2);border-radius:14px;padding:10px 16px;margin-bottom:16px}
.session-bar .t{font-weight:700}
.timeline{position:relative;padding-left:22px}
.timeline:before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line-2)}
.tl-item{position:relative;padding:0 0 14px 0}
.tl-item:before{content:"";position:absolute;left:-19px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2.5px solid var(--brand-2)}
.tl-item.done:before{background:var(--mint);border-color:var(--mint)}.tl-item.cur:before{background:var(--accent);border-color:var(--accent)}
.tl-item .t{font-weight:600;font-size:13px}.tl-item .m{font-size:11px;color:var(--muted)}

@media(max-width:1150px){.g-4,.g-5{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:1fr}}
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:27px;bottom:0;width:256px;z-index:60;transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.g-2,.frow,.frow3{grid-template-columns:1fr}.mockrev{display:none}}
/* ---- Codeflow CRM supplemental (server-rendered fragments) ---- */
.pcard{display:block;text-decoration:none;color:inherit}
.pcard .pc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pcard .pc-h b{font-size:14px}
.pc-kv{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0;font-size:12px;color:var(--muted)}
.pc-kv b{color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pgrid.list{grid-template-columns:1fr}
.tbl-wrap{overflow:auto}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:11px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px}
.filterbar select,.filterbar input{padding:7px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font-size:12.5px;height:33px}
.filterbar input:focus,.filterbar select:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--ring);outline:none}
.drawer .x{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.stat-row{display:flex;gap:8px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:0}
.tabs a{padding:8px 14px;border-radius:9px 9px 0 0;text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;border:1px solid transparent;border-bottom:none}
.tabs a.active{color:var(--ink);background:var(--surface);border-color:var(--line)}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.pill-yes{color:var(--mint);font-weight:700}
.pill-no{color:var(--muted)}
.pill-lock{color:var(--gold)}
.hier{display:flex;flex-direction:column;gap:0}
.hier .lvl{display:flex;align-items:center;gap:10px;padding:8px 0}
.hier .arrow{color:var(--muted);margin-left:14px}

/* ---- Create/Edit Project wizard ---- */
.stepper{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.stepper .st{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer}
.stepper .st .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--line);color:var(--ink)}
.stepper .st.active{color:#fff;background:var(--brand-2);border-color:var(--brand-2)}
.stepper .st.active .n{background:rgba(255,255,255,.25)}
.stepper .st.done .n{background:var(--mint);color:#08130d}
.pf-step{display:none}
.pf-step.show{display:block}
.pf-err{color:#ff8ea0;font-size:11.5px;margin-top:4px;font-weight:600}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}
.disp-tbl td,.disp-tbl th{text-align:center;padding:6px 8px}
.disp-tbl td:first-child,.disp-tbl th:first-child{text-align:left}
.pf-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.pf-actions .spacer{flex:1}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.checklist li .mk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.checklist li.ok .mk{background:rgba(65,209,135,.18);color:var(--mint)}
.checklist li.no .mk{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.draft-badge{background:rgba(245,183,78,.15);border:1px solid rgba(245,183,78,.4);color:#f6d69a;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}

/* ============================================================
   Reduced motion — respect user preference app-wide.
   Keeps the full visual design; removes non-essential animation.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .live{animation:none!important}
}

/* ============================================================
   CODEFLOW PREMIUM LAYER (v5) — canonical, consolidated.
   Moved here from the former layout.php #cf_uiv4 inline block so
   public/assets/app.css is the SINGLE global design-system source
   of truth. Presentation only — no DOM/JS/route/logic dependency.
   ============================================================ */

/* Connected KPI metric band (was inline as .cf-metricband). One seamless
   instrument strip instead of floating cards — hairline dividers, shared frame. */
.cf-metricband{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.cf-metricband.cf-mb-5{grid-template-columns:repeat(5,1fr)}
.cf-metricband.cf-mb-4{grid-template-columns:repeat(4,1fr)}
.cf-metricband.cf-mb-3{grid-template-columns:repeat(3,1fr)}
.cf-metricband .kpi{border:0;border-radius:0;box-shadow:none;background:var(--surface);padding:15px 16px}
.cf-metricband .kpi .n{font-size:25px;font-weight:700;letter-spacing:-.5px}
@media(max-width:1150px){.cf-metricband.cf-mb-5,.cf-metricband.cf-mb-4,.cf-metricband.cf-mb-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cf-metricband.cf-mb-5,.cf-metricband.cf-mb-4,.cf-metricband.cf-mb-3{grid-template-columns:1fr}}

/* Premium data-grid polish — applies to every module table without markup change.
   Sticky header depth, subtle zebra, tighter institutional density, numeric columns. */
.tbl-wrap{box-shadow:var(--shadow-sm)}
table.tbl th{background:var(--surface-2);box-shadow:inset 0 -1px 0 var(--line)}
table.tbl tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
table.tbl tbody tr:hover td{background:var(--surface-3)}
table.tbl td.n,table.tbl th.n,.col-num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl td .mono{font-size:12px;color:var(--muted)}

/* Premium filter bar — sticky, institutional. Reads as a control strip, not a form. */
.filterbar{position:sticky;top:0;z-index:5;backdrop-filter:saturate(1.1);box-shadow:var(--shadow-sm)}
.filterbar label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.filterbar .btn{height:33px}

/* Section header — gives every module a clean, labelled information hierarchy. */
.cf-sec{margin:22px 0 12px;display:flex;align-items:center;gap:12px}
.cf-sec>h2,.cf-sec>h3{margin:0;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.1px}
.cf-sec .cf-sec-sub{color:var(--muted);font-size:12px}
.cf-sec::after{content:"";flex:1;height:1px;background:var(--line)}

/* Toolbar — action row above grids/tables. */
.cf-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.cf-toolbar .spacer{flex:1}

/* Status chip refinement — crisper institutional pills. */
.chip{border-radius:6px;padding:2px 8px;font-weight:600}
.chip .pip{box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent)}

/* ---- Module scope: real per-screen composition, applied via a wrapper class
   each module adds around its own output. CSS-driven layout changes that only
   take effect inside the named screen — not global, not "just a class". ---- */
.cf-mod{display:block}
.cf-mod .vh{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.cf-mod .vh h1{font-size:22px}

/* PROJECTS — enterprise project workspace: denser card grid, framed inventory. */
.cf-mod--projects .pgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cf-mod--projects .pcard{padding:16px 17px}
.cf-mod--projects .pcard:hover{border-color:var(--brand-2);box-shadow:0 6px 20px rgba(0,69,170,.10)}
.cf-mod--projects .tbl-wrap{border-radius:var(--r-lg)}

/* WORKFORCE — operational data grid: compact rows, emphasized identity column. */
.cf-mod--workforce table.tbl td{padding:8px 13px}
.cf-mod--workforce table.tbl td:first-child{font-weight:600}
.cf-mod--workforce .filterbar{margin-bottom:14px}

/* ACTIVE LOGIN REGISTRY — live registry: banner + grid rhythm. */
.cf-mod--active-login-registry .tbl-wrap{max-height:600px}
.cf-mod--active-login-registry table.tbl th{position:sticky;top:0;z-index:3}

/* PRODUCTION — workstation: panelled sections, strong numeric emphasis. */
.cf-mod--production .card{box-shadow:var(--shadow-sm)}
.cf-mod--production table.tbl td{font-variant-numeric:tabular-nums}

/* QA AUDIT — focused workstation: calm surface, clear audit blocks. */
.cf-mod--qa-audit .card-h h3{letter-spacing:-.1px}
.cf-mod--qa-audit .modal{max-width:680px}

/* QUALITY — analytics dashboard: metric-forward. */
.cf-mod--quality .card{border-radius:var(--r-lg)}

/* REPORTS — report catalogue: cards read as a library. */
.cf-mod--reports .card{transition:border-color .14s,box-shadow .14s}
.cf-mod--reports .card:hover{border-color:var(--brand-2);box-shadow:0 6px 20px rgba(0,69,170,.08)}

/* USERS / ADMIN — account management: dense grid, clear row affordances. */
.cf-mod--users table.tbl td{padding:8px 13px}
.cf-mod--users table.tbl tr.clk:hover td{background:var(--surface-3)}

/* REVENUE — analytics: metric band + framed tables. */
.cf-mod--revenue .cf-metricband{margin-bottom:18px}

/* PROJECT FORM — configuration wizard: centered, focused canvas. */
.cf-mod--project-form{max-width:960px}
.cf-mod--project-form .stepper{position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:6}

/* ============================================================
   CODEFLOW UI v18 — index_18 shell + refinements (presentation only).
   Styles the recomposed layout.php shell classes and refines shared
   data components to the approved index_18 language. Placed last so it
   is authoritative for the shell. Marker: cf-ui-v18.
   ============================================================ */
.app{grid-template-columns:250px 1fr;height:100vh}
/* ---- sidebar ---- */
.nav{background:var(--surface-2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.nav-head{display:flex;align-items:center;gap:11px;height:60px;padding:0 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.nav-head .mark{width:30px;height:30px;border-radius:8px;background:var(--brand-2);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;font-family:var(--display);flex:0 0 auto}
.nav-head .wordmark{display:flex;flex-direction:column;line-height:1;overflow:hidden}
.nav-head .wordmark b{font-size:15px;font-weight:650;letter-spacing:-.02em;font-family:var(--display)}
.nav-head .wordmark span{font-size:10px;color:var(--faint);font-weight:500;margin-top:3px;white-space:nowrap}
.nav-scroll{flex:1;overflow-y:auto;padding:10px 12px 20px;min-height:0}
.nav-group{margin-top:14px}
.nav-group:first-child{margin-top:4px}
.nav-group>label{display:block;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:0 10px 6px}
.nav a.nav-item{display:flex;align-items:center;gap:11px;height:34px;padding:0 11px;border-radius:8px;color:var(--muted);font-weight:500;position:relative;white-space:nowrap;font-size:12.5px;margin:1px 0;text-decoration:none}
.nav a.nav-item:hover{background:var(--surface-3);color:var(--txt)}
.nav a.nav-item.active{background:var(--surface-3);color:var(--accent);font-weight:600}
.nav a.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-2)}
.nav a.nav-item .badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--danger);color:#fff;border-radius:20px;padding:1px 7px;min-width:18px;text-align:center}
.nav-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px}
.nav-foot .nav-user{display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px}
.nav-foot .nav-user .avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-2);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 auto;box-shadow:none}
.nav-foot .nav-user .meta{overflow:hidden;line-height:1.25}
.nav-foot .nav-user .meta b{font-size:12.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-foot .nav-user .meta span{font-size:10.5px;color:var(--faint)}
/* ---- topbar ---- */
.topbar{height:60px;min-height:60px;display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;position:relative;text-decoration:none;font-size:15px}
.topbar .icon-btn:hover{background:var(--surface-3);color:var(--txt)}
.topbar .icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.topbar .crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint)}
.topbar .crumb b{color:var(--txt);font-weight:600}
.topbar .crumb span::after{content:"›";margin-left:8px;color:var(--faint)}
.topbar .search{flex:0 1 360px;position:relative;margin:0}
.topbar .env-pill{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:22px;padding:5px 11px;background:var(--surface-2)}
.topbar .env-pill .live{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 22%,transparent)}
.topbar .env-pill b{color:var(--violet)}
.topbar .roleswitch{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 6px;border:1px solid var(--line);border-radius:24px;background:var(--surface-2)}
.topbar .roleswitch .avatar.sm{width:30px;height:30px;border-radius:50%;background:var(--brand-2);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.topbar .roleswitch .who{line-height:1.15}.topbar .roleswitch .who b{font-size:12.5px}.topbar .roleswitch .who span{display:block;font-size:10.5px;color:var(--faint)}
.profswitch{display:inline-flex;align-items:center;gap:8px;margin-right:4px}
.profswitch-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:800}
.profswitch-seg{display:inline-flex;background:var(--surface-3);border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px}
.profswitch-btn{border:0;font-weight:700;font-size:12px;padding:6px 13px;border-radius:8px;text-decoration:none;color:var(--muted)}
.profswitch-btn.on{background:var(--brand-2);color:#fff}
.profswitch-btn.off{opacity:.4;pointer-events:none}
/* ---- page ---- */
.content.page{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0;padding:22px 26px 70px}
.sess-id{display:flex;flex-wrap:wrap;gap:16px;align-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-lg);padding:11px 15px;margin-bottom:14px;font-size:12.5px}
.sess-id.own{border-left:3px solid var(--mint)} .sess-id.alt{border-left:3px solid var(--gold)}
.sess-id .sess-k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:800}
.sess-id .sess-sub{font-size:11px} .sess-id .sess-strong{color:var(--txt)} .sess-id .sess-change{margin-left:auto}
/* ---- index_18 table alignment mechanism (deterministic header↔value) ---- */
table.tbl{width:100%;border-collapse:separate;border-spacing:0}
table.tbl th{text-align:left;vertical-align:middle}
table.tbl td{vertical-align:middle}
table.tbl th.num,table.tbl td.num,table.tbl th.n,table.tbl td.n,table.tbl th.right,table.tbl td.right,table.tbl .col-num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl th.ctr,table.tbl td.ctr{text-align:center}
/* deterministic alignment for ALL table cells (incl. plain ranking tables e.g. .cc-rank),
   scoped to th/td so KPI/stepper .n blocks are never affected */
th.n,td.n,th.num,td.num,th.right,td.right,th.col-num,td.col-num{text-align:right;font-variant-numeric:tabular-nums}
th.ctr,td.ctr,th.center,td.center{text-align:center}
.cc-rank th.rk,.cc-rank td.rk{text-align:center;width:34px;color:var(--muted);font-variant-numeric:tabular-nums}
.tbl-wrap{overflow:auto}
/* ---- index_18 chip refinement (pill + pip) ---- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;font-weight:600;line-height:1.6}
.chip.sq{border-radius:6px}
/* ---- filter bar as a control strip ---- */
.filterbar{position:sticky;top:0;z-index:5}
@media(max-width:900px){.app{grid-template-columns:1fr}.nav{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:60;transform:translateX(-100%);transition:.2s}.nav.open{transform:none}}

/* ============================================================
   CODEFLOW UI v18 — MODULE PRESENTATION ARCHITECTURE (cf-ui-v18-mod)
   Building blocks for recomposed module content. Supports new markup
   emitted by the recomposed modules; the global shell is untouched.
   ============================================================ */
/* --- operational section (workspace) --- */
.ws{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 16px;overflow:hidden}
.ws-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ws-head h3{margin:0;font:600 13px/1.2 var(--sans);letter-spacing:.01em;color:var(--txt)}
.ws-head .ws-sub{font-size:11px;color:var(--muted);font-weight:500}
.ws-head .ws-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ws-body{padding:16px}
.ws-body.flush{padding:0}
/* --- primary action bar --- */
.actbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.actbar .actbar-sp{flex:1}
.actbar .actbar-grp{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* --- metric band (portfolio / operational KPIs as one connected strip) --- */
.mband{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:0 0 16px}
.mband .kpi{background:var(--surface);border:0;border-radius:0;margin:0;padding:14px 16px}
.mband.mband-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mband-label{grid-column:1/-1;background:var(--surface-2);padding:7px 16px;font:700 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* --- control strip (compact filter workspace) --- */
.cstrip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:11px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 16px}
.cstrip .cstrip-l{font:700 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.cstrip form{display:contents}
.cstrip input,.cstrip select{min-width:0}
.cstrip .cstrip-sp{flex:1}
.cstrip .cstrip-grp{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* --- operational card grid + op-card composition --- */
.opgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.opcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .12s,box-shadow .12s}
.opcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.opcard-top{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.opcard-id{min-width:0}
.opcard-id .oc-name{font:600 14px/1.25 var(--sans);color:var(--txt);display:block;overflow:hidden;text-overflow:ellipsis}
.opcard-id .oc-code{font:500 11px/1.3 var(--mono,monospace);color:var(--muted)}
.opcard-top .oc-flags{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.opcard-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:1px;background:var(--line)}
.opcard-metrics .ocm{background:var(--surface);padding:9px 12px}
.opcard-metrics .ocm .ocm-l{font:600 9.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.opcard-metrics .ocm .ocm-v{font:700 15px/1 var(--sans);color:var(--txt);font-variant-numeric:tabular-nums}
.opcard-foot{display:flex;align-items:center;gap:8px;padding:10px 15px;border-top:1px solid var(--line);background:var(--surface-2);margin-top:auto}
.opcard-foot .ocf-sp{flex:1}
/* --- data workspace table shell: sticky header + sticky identity col --- */
.dws{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--r-lg)}
.dws table.tbl{border:0;border-radius:0}
.dws table.tbl thead th{position:sticky;top:0;z-index:3}
.dws table.tbl td.frz,.dws table.tbl th.frz{position:sticky;left:0;z-index:2;background:var(--surface)}
.dws table.tbl thead th.frz{z-index:4;background:var(--surface-2)}
/* grouped header tier */
table.tbl thead tr.grp th{background:var(--surface-3);font-size:9.5px;letter-spacing:.08em;border-bottom:1px solid var(--line-2);text-align:center}
table.tbl thead tr.grp th.spacer{background:var(--surface-2)}
/* --- utility: reduce dead space --- */
.content.page{padding:18px 22px 64px}
.vh{margin-bottom:14px}

/* ============================================================
   Employee Universe — horizontal internal tab navigation
   Compact premium horizontal tabs; one child page at a time.
   Never wraps into a vertical sidebar; strip scrolls horizontally.
   ============================================================ */
.eu-wrap{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 8px 6px 14px;margin:0 0 16px;box-shadow:var(--shadow-sm)}
.eu-wrap .eu-tabs-l{flex:0 0 auto;font:700 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.eu-tabs{display:flex;gap:2px;align-items:center;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
.eu-tabs::-webkit-scrollbar{height:6px}
.eu-tabs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
.eu-tab{flex:0 0 auto;white-space:nowrap;padding:8px 14px;border-radius:8px;font:600 12.5px/1 var(--sans);color:var(--muted);text-decoration:none;transition:background .12s,color .12s}
.eu-tab:hover{color:var(--txt);background:var(--surface-2)}
.eu-tab.active{color:#fff;background:var(--brand-1)}
.eu-tab.active:hover{color:#fff}
/* transfer-selection count badge */
.trf-n{display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;border-radius:20px;background:rgba(255,255,255,.25);font-size:11px;font-weight:700;margin-left:6px}

/* ---- Attendance status chips (My Attendance / Team Attendance) ---- */
.att-chip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 8px;
  border-radius:6px;font-weight:700;font-size:12px;line-height:1;letter-spacing:.3px;border:1px solid transparent}
.att-p{color:#0f7a3d;background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.30)}
.att-hd{color:#9a5b06;background:rgba(217,119,6,.14);border-color:rgba(217,119,6,.32)}
.att-a{color:#b42318;background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.30)}
.att-pl{color:#0f766e;background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.30)}
.att-co{color:#6d28d9;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.30)}
.att-h{color:#1d4ed8;background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.30)}
.att-wo{color:#475569;background:rgba(100,116,139,.14);border-color:rgba(100,116,139,.30)}
.att-none{color:var(--muted,#94a3b8);background:transparent;font-weight:600}
.att-we td{background:rgba(148,163,184,.06)}
:root[data-theme="dark"] .att-p{color:#5ee79b;background:rgba(22,163,74,.16)}
:root[data-theme="dark"] .att-hd{color:#fbbf24;background:rgba(217,119,6,.18)}
:root[data-theme="dark"] .att-a{color:#fca5a5;background:rgba(220,38,38,.18)}
:root[data-theme="dark"] .att-pl{color:#5eead4;background:rgba(20,184,166,.18)}
:root[data-theme="dark"] .att-co{color:#c4b5fd;background:rgba(139,92,246,.20)}
:root[data-theme="dark"] .att-h{color:#93c5fd;background:rgba(37,99,235,.18)}
:root[data-theme="dark"] .att-wo{color:#cbd5e1;background:rgba(100,116,139,.22)}

/* ---- Employee Profile (canonical) ---- */
.ep-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.ep-id{display:flex;gap:14px;align-items:center}
.ep-avatar{width:54px;height:54px;border-radius:14px;background:var(--brand-1,#2563eb);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.ep-head h1{margin:0 0 4px;font-size:20px}
.ep-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted,#64748b)}
.ep-meta b{color:var(--ink,#0f172a)}
.ep-dash-wrap{margin:6px 0 4px}
.ep-dash-title{font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted,#64748b);margin:8px 2px}
.ep-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ep-sec{border:1px solid var(--line,#e2e8f0);border-radius:12px;margin:12px 0;overflow:hidden;background:var(--surface,#fff)}
.ep-sec-h{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:none;border:0;cursor:pointer;font-weight:700;font-size:14px;color:var(--ink,#0f172a)}
.ep-sec-h svg{transition:transform .18s}
.ep-sec.open .ep-sec-h svg{transform:rotate(180deg)}
.ep-sec-b{display:none;padding:0 14px 14px}
.ep-sec.open .ep-sec-b{display:block}
.ep-graph{margin:8px 0}
.ep-graph-h{font-size:12px;font-weight:600;color:var(--muted,#64748b);margin-bottom:2px}
.spark{display:block;background:rgba(148,163,184,.06);border-radius:8px;padding:2px}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ep-kv dt{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted,#64748b)}
.ep-kv dd{margin:2px 0 0;font-weight:600}
.ep-form-f{margin-top:12px}
.ep-pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:8px}
.hol-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lnk{color:var(--brand-1,#2563eb);text-decoration:none;font-weight:600}
.lnk:hover{text-decoration:underline}