/* Workforce360 console — design system. Single stylesheet, no build step, no web fonts
   (the server runs on-prem / air-gapped and under a script-src 'self' CSP). Identity: a
   calm cool-slate command centre, one confident indigo, instant status colour, dense
   tabular data, and a full night-ops dark mode. Every class the views rely on is kept. */
:root{
  --bg:#eef2f8; --panel:#ffffff; --panel-2:#f6f8fc; --raised:#fbfcfe;
  --ink:#151d31; --ink-soft:#33405c; --muted:#5d6b85; --faint:#8794ab;
  --line:#e3e9f2; --line-strong:#d1dae8;
  --brand:#3a5ad9;
  --brand-ink:color-mix(in srgb,var(--brand) 84%,#000); --brand-soft:color-mix(in srgb,var(--brand) 12%,var(--panel)); --brand-softer:color-mix(in srgb,var(--brand) 6%,var(--panel));
  --accent:#0e9c99;
  --green:#0f9d6b; --amber:#c9760a; --red:#dc3545; --slate:#64748b;
  --green-soft:rgba(15,157,107,.13); --amber-soft:rgba(201,118,10,.14); --red-soft:rgba(220,53,69,.12); --slate-soft:rgba(100,116,139,.15);
  --shadow-sm:0 1px 2px rgba(21,29,49,.06);
  --shadow:0 1px 2px rgba(21,29,49,.05),0 6px 20px rgba(21,29,49,.07);
  --shadow-lg:0 24px 60px rgba(21,29,49,.22);
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --sidebar-w:244px; --topbar-h:58px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070c18; --panel:#0f1728; --panel-2:#131d31; --raised:#16213a;
  --ink:#e9eef9; --ink-soft:#c3cce0; --muted:#8c9ab7; --faint:#6b7a98;
  --line:#223049; --line-strong:#2d3d5a;
  --brand:#6e8dff; --brand-ink:color-mix(in srgb,var(--brand) 72%,#fff); --brand-soft:color-mix(in srgb,var(--brand) 20%,var(--panel)); --brand-softer:color-mix(in srgb,var(--brand) 12%,var(--panel));
  --accent:#2dd4bf;
  --green:#34d19b; --amber:#e3a008; --red:#f2626d; --slate:#8a98b4;
  --green-soft:rgba(52,209,155,.15); --amber-soft:rgba(227,160,8,.16); --red-soft:rgba(242,98,109,.16); --slate-soft:rgba(138,152,180,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#070c18; --panel:#0f1728; --panel-2:#131d31; --raised:#16213a;
  --ink:#e9eef9; --ink-soft:#c3cce0; --muted:#8c9ab7; --faint:#6b7a98;
  --line:#223049; --line-strong:#2d3d5a;
  --brand:#6e8dff; --brand-ink:color-mix(in srgb,var(--brand) 72%,#fff); --brand-soft:color-mix(in srgb,var(--brand) 20%,var(--panel)); --brand-softer:color-mix(in srgb,var(--brand) 12%,var(--panel));
  --accent:#2dd4bf;
  --green:#34d19b; --amber:#e3a008; --red:#f2626d; --slate:#8a98b4;
  --green-soft:rgba(52,209,155,.15); --amber-soft:rgba(227,160,8,.16); --red-soft:rgba(242,98,109,.16); --slate-soft:rgba(138,152,180,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"cv05" 1;
}
a{color:var(--brand-ink);text-decoration:none} a:hover{text-decoration:underline}
.muted{color:var(--muted)} .small{font-size:12.5px} .xsmall{font-size:11px} .spacer{flex:1}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;font-size:.92em}
::selection{background:color-mix(in srgb,var(--brand) 28%,transparent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:3px solid var(--panel)}
*::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* ---------- login ---------- */
.login-wrap{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.login-wrap:before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 50% -10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%),
  radial-gradient(45% 40% at 85% 110%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
  pointer-events:none}
.login-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:32px 30px;width:100%;max-width:390px}
.login-card label{display:block;margin:14px 0;font-size:13px;color:var(--muted);font-weight:500}
.login-card input{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--ink);font-size:14px;transition:border-color .12s,box-shadow .12s}
.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.brand-lg{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:700;letter-spacing:-.01em}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,var(--brand),var(--brand-ink));color:#fff;font-weight:800;box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 40%,transparent);overflow:hidden}
.brand-mark.has-logo{background:transparent;box-shadow:none}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100%}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;transition:width .18s ease,flex-basis .18s ease}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;padding:14px 16px;height:var(--topbar-h);border-bottom:1px solid var(--line)}
.brand .brand-mark{width:30px;height:30px;border-radius:8px;font-size:15px;flex:0 0 30px}
.nav{padding:10px 10px 20px;flex:1}
.nav-group{margin-top:14px} .nav-group:first-child{margin-top:4px}
.nav-group-title{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--faint);padding:6px 12px 5px}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--radius-sm);color:var(--ink-soft);cursor:pointer;font-size:13.5px;font-weight:500;white-space:nowrap;transition:background .12s,color .12s}
.nav-ic{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--faint);transition:color .12s}
.nav-ic svg{width:18px;height:18px;display:block}
.nav-item:hover{background:var(--panel-2);color:var(--ink)} .nav-item:hover .nav-ic{color:var(--muted)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav-item.active .nav-ic{color:var(--brand)}
.nav-item.active:before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav-item.planned{color:var(--faint)}
.nav-tag{margin-left:auto;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:20px;background:var(--line);color:var(--faint)}
.nav-item.hide{display:none}
.sidebar-foot{padding:11px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.rail-btn{margin-left:auto;background:none;border:1px solid var(--line);border-radius:7px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:0 0 auto}
.rail-btn:hover{border-color:var(--brand);color:var(--brand)}
/* rail (collapsed) */
.shell.rail .sidebar{width:66px;flex-basis:66px}
.shell.rail .brand-text,.shell.rail .nav-group-title,.shell.rail .nav-item>span:not(.nav-ic),.shell.rail .nav-tag,.shell.rail .sidebar-foot .muted{display:none}
.shell.rail .nav-item{justify-content:center;padding:9px}
.shell.rail .sidebar-foot{justify-content:center}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:0 20px;height:var(--topbar-h);background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.icon-btn{display:none;background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink)}
.crumb{font-weight:650;font-size:15px;letter-spacing:-.01em}
.topsearch{position:relative;width:260px;max-width:34vw}
.topsearch input{width:100%;padding:7px 12px 7px 32px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--ink);font-size:13px}
.topsearch input:focus{outline:none;border-color:var(--brand);background:var(--panel)}
.topsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint)}
.who{font-size:13px;color:var(--muted);font-weight:500;padding:5px 10px;border-radius:8px}
.who:hover{background:var(--panel-2);text-decoration:none;color:var(--ink)}
.view{padding:24px;max-width:1280px;width:100%}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;font-size:13.5px;font-weight:550;transition:border-color .12s,background .12s,box-shadow .12s;line-height:1.2}
.btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px color-mix(in srgb,var(--brand) 35%,transparent)}
.btn.primary:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px} .btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel-2);border-color:transparent}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn:disabled:hover{border-color:var(--line-strong);color:var(--ink);background:var(--panel)}

/* ---------- layout ---------- */
.grid{display:grid;gap:16px} .grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px}
.card h3{margin:0 0 14px;font-size:13.5px;font-weight:650;letter-spacing:-.005em}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 18px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--slate);opacity:.55}
.kpi .k-label{font-size:12px;color:var(--muted);font-weight:500} .kpi .k-val{font-size:27px;font-weight:700;margin-top:5px;letter-spacing:-.02em;line-height:1.05} .kpi .k-sub{font-size:11.5px;color:var(--faint);margin-top:3px}
.kpi.accent-green:before{background:var(--green);opacity:1} .kpi.accent-red:before{background:var(--red);opacity:1} .kpi.accent-amber:before{background:var(--amber);opacity:1}
.kpi.accent-green .k-val{color:var(--green)} .kpi.accent-red .k-val{color:var(--red)} .kpi.accent-amber .k-val{color:var(--amber)}
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:18px} .page-head h1{font-size:21px;margin:0;font-weight:700;letter-spacing:-.02em} .page-head .sub{color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{background:var(--panel-2);font-size:11px;letter-spacing:.02em;color:var(--muted);font-weight:650}
tbody tr{transition:background .1s} tbody tr:hover{background:var(--brand-softer)}
tbody tr:last-child td{border-bottom:none}
td.right,th.right{text-align:right;font-variant-numeric:tabular-nums}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.input{padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font-size:13.5px;transition:border-color .12s,box-shadow .12s}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
select.input{cursor:pointer}
textarea.input{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:2px 9px;border-radius:7px;background:var(--slate-soft);color:var(--slate);line-height:1.5;letter-spacing:.01em}
.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9;flex:0 0 6px}
.pill.green{background:var(--green-soft);color:var(--green)} .pill.red{background:var(--red-soft);color:var(--red)}
.pill.amber{background:var(--amber-soft);color:var(--amber)} .pill.blue{background:var(--brand-soft);color:var(--brand-ink)} .pill.slate{background:var(--slate-soft);color:var(--slate)}
.note{padding:11px 13px;border-radius:var(--radius-sm);font-size:13px;border:1px solid transparent}
.note.danger{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 22%,transparent)}
.note.info{background:var(--brand-soft);color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 20%,transparent)}
.note.warn{background:var(--amber-soft);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 24%,transparent)}
.loading,.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.empty{border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--panel-2)}
.loading:before{content:"";display:inline-block;width:18px;height:18px;margin-right:9px;border:2px solid var(--line-strong);border-top-color:var(--brand);border-radius:50%;vertical-align:-4px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:8px;border-radius:6px;background:var(--line);overflow:hidden} .bar>i{display:block;height:100%;background:var(--brand);border-radius:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;align-items:baseline} .kv dt{color:var(--muted);font-size:12.5px} .kv dd{margin:0;font-size:13px;font-weight:500}
.placeholder-hero{text-align:center;padding:56px 20px} .placeholder-hero .big{font-size:46px}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;color:var(--muted);font-size:12.5px}

/* ---------- modals / toasts ---------- */
.modal-back{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fade .14s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:88vh;overflow:auto;animation:pop .16s ease} .modal.wide{max-width:780px}
@keyframes pop{from{transform:translateY(8px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line);font-weight:650;font-size:15px}
.modal-body{padding:20px} .modal-foot{padding:15px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--panel-2);border-radius:0 0 16px 16px}
.toast-root{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:60}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px 15px;font-size:13px;max-width:360px;animation:slidein .18s ease}
@keyframes slidein{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}
.toast.success{border-left-color:var(--green)} .toast.error{border-left-color:var(--red)}

.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:2px 8px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);white-space:nowrap}

@media(max-width:980px){
  .sidebar{position:fixed;z-index:20;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lg)} .sidebar.open{transform:none}
  .shell.rail .sidebar{width:var(--sidebar-w);flex-basis:var(--sidebar-w)}
  .icon-btn{display:block} .rail-btn{display:none} .topsearch{display:none}
  .grid.c4{grid-template-columns:repeat(2,1fr)} .grid.c3,.grid.c2{grid-template-columns:1fr} .view{padding:16px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}