/* SURE HRIS — shared design tokens & base styles
   DESIGN SOURCE: extracted from the real Sure WFM app (single-file HTML) per
   Directive #2 — see docs/SUREWFM-DESIGN-REFERENCE.md for the extraction and
   the deviations register. Dark-only, matching WFM. Do not reintroduce the
   pre-directive light theme.
   Conventions (audit R6): :focus-visible outlines, aria-labels on SVGs,
   tabular/mono numerals via .num, uppercase micro-labels via .lbl-u. */

/* WFM loads these same families via Google Fonts (deviation DV4) */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- extracted WFM tokens (verbatim) ---- */
  --bg0:#060d1a;   /* app ground */
  --bg1:#0a1628;   /* header / nav / login card */
  --bg2:#0f1f38;   /* cards, modals, table headers */
  --bg3:#162847;   /* inputs, toggles, tracks */
  --cyan:#00e5ff;
  --cyan2:#0096c7;
  --teal:#00b4d8;
  --amber:#ffb703;
  --green:#06d6a0;
  --red:#ef476f;
  --purple:#a855f7;
  --text:#cdd9e5;
  --muted:#5a7a99;
  --border:rgba(0,229,255,.1);
  --border2:rgba(0,229,255,.3);
  --grad:linear-gradient(135deg,var(--cyan),var(--teal));

  /* ---- HRIS aliases so existing markup keeps working ---- */
  --bg:var(--bg0); --surface:var(--bg2); --surface-2:var(--bg3);
  --ink:var(--text); --ink-2:var(--text); --line:var(--border); --line-soft:rgba(255,255,255,.03);
  --accent:var(--cyan); --accent-bright:var(--cyan); --accent-soft:rgba(0,229,255,.1);
  --amber-soft:rgba(255,183,3,.15); --amber-raw:var(--amber);
  --good:var(--green); --good-soft:rgba(6,214,160,.15);
  --crit:var(--red); --crit-soft:rgba(239,71,111,.15);
  --sidebar:var(--bg1); --sidebar-ink:var(--muted); --sidebar-active:var(--bg3);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg0); color:var(--text);
  font-family:'Exo 2','Segoe UI',system-ui,sans-serif;
  font-size:13px; line-height:1.5; min-height:100vh;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:700}
button{font:inherit; cursor:pointer}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan2); outline-offset:2px}

/* numbers & data are ALWAYS mono (WFM signature) */
.num{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums}

/* uppercase micro-label (WFM signature) */
.lbl-u{font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted)}

/* logo */
.logo{display:flex; align-items:center; gap:10px}
.logo .mark{
  width:30px; height:30px; border-radius:6px; background:var(--grad);
  color:var(--bg0); font-weight:800; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.logo .word{font-weight:700; font-size:15px; letter-spacing:.3px}
.logo .word span{color:var(--cyan)}

/* buttons — WFM: primary is solid cyan w/ DARK text + glow hover */
.btn{
  display:inline-flex; align-items:center; gap:5px; justify-content:center;
  padding:7px 14px; font-family:'Exo 2',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.3px; border-radius:6px; border:1px solid var(--border);
  background:transparent; color:var(--muted); transition:all .15s;
}
.btn:hover{color:var(--text); border-color:var(--border2)}
.btn.primary{background:var(--cyan); border:none; color:var(--bg0); font-weight:700}
.btn.primary:hover{background:#33eaff; color:var(--bg0); box-shadow:0 0 18px rgba(0,229,255,.3)}
.btn.danger{background:rgba(239,71,111,.15); color:var(--red); border:1px solid rgba(239,71,111,.3)}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn-sm{padding:4px 9px; font-size:11px}
.btn.block{width:100%; padding:11px}

/* cards */
.card{background:var(--bg2); border:1px solid var(--border); border-radius:10px}

/* chips / badges — WFM: tinted bg, colored text, uppercase 10px */
.chip{
  display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:10px;
  font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
}
.chip.good{background:rgba(6,214,160,.15); color:var(--green)}
.chip.warn{background:rgba(255,183,3,.15); color:var(--amber)}
.chip.crit{background:rgba(239,71,111,.15); color:var(--red)}
.chip.info{background:rgba(0,229,255,.1); color:var(--cyan)}
.chip.mut{background:var(--bg3); color:var(--muted)}

/* forms — WFM inputs */
input,select,textarea{
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-family:'Exo 2',sans-serif; font-size:12px; padding:8px 10px;
  outline:none; transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan2); box-shadow:0 0 0 2px rgba(0,229,255,.07)}
select option{background:var(--bg2)}
label{display:block; font-size:10px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--muted); margin:14px 0 5px}

/* tables — WFM density */
table{width:100%; border-collapse:collapse; font-size:12px}
thead th{
  padding:7px 9px; text-align:left; font-size:10px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border);
  white-space:nowrap; position:sticky; top:0; background:var(--bg2); z-index:1;
}
tbody tr{border-bottom:1px solid rgba(255,255,255,.03)}
tbody tr:hover{background:rgba(0,229,255,.02)}
tbody td{padding:6px 9px; font-family:'JetBrains Mono',monospace; font-size:11px;
  vertical-align:middle; white-space:nowrap}
td.lbl{font-family:'Exo 2',sans-serif; font-size:12px; font-weight:500}

/* auth / centered card layouts — WFM login pattern */
.center-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px; background:var(--bg0)}
.auth-card{
  background:var(--bg1); border:1px solid var(--border2); border-radius:16px;
  max-width:360px; width:100%; padding:40px 44px; box-shadow:0 24px 48px rgba(0,0,0,.5);
  text-align:center;
}
.auth-card .mark{width:48px; height:48px; border-radius:10px; background:var(--grad);
  color:var(--bg0); font-weight:800; font-size:24px; display:inline-flex;
  align-items:center; justify-content:center; margin-bottom:12px}
.auth-card h1{font-size:24px; font-weight:700; color:var(--cyan)}
.auth-card h1 span{color:var(--cyan)}
.auth-card .sub{font-size:12px; color:var(--muted); margin:4px 0 16px}
.auth-card form{text-align:left}
.auth-card .divider{display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size:10px; letter-spacing:1px; text-transform:uppercase; margin:18px 0}
.auth-card .divider::before,.auth-card .divider::after{content:""; flex:1; height:1px; background:var(--border)}
.auth-card .foot{font-size:11px; color:var(--muted); margin-top:16px; line-height:1.6}
.form-error{
  background:rgba(239,71,111,.12); color:var(--red); border:1px solid rgba(239,71,111,.3);
  border-radius:6px; font-size:11px; padding:8px 11px; margin-top:12px; display:none; text-align:left;
}
.form-error.on{display:block}

/* empty states (audit R5) */
.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty .big{font-size:34px; margin-bottom:8px}
.empty h3{font-size:14px; color:var(--text); margin-bottom:4px}
.empty p{font-size:12px; margin:0 0 16px; line-height:1.6}

/* setup notice */
.setup-note{
  background:rgba(255,183,3,.08); color:var(--amber); border:1px solid rgba(255,183,3,.3);
  border-radius:6px; padding:11px 13px; font-size:11px; text-align:left; margin-top:16px; line-height:1.6;
}
.setup-note code{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text)}

/* entitlement layer (Directive #2 §4) */
.trial-banner{
  display:flex; align-items:center; gap:8px; justify-content:center;
  background:rgba(255,183,3,.08); border-bottom:1px solid rgba(255,183,3,.3);
  color:var(--amber); font-size:11px; font-weight:600; letter-spacing:.5px; padding:6px 12px;
}
.trial-banner .num{font-weight:600}
.locked-card{max-width:420px}
.locked-card .lockicon{font-size:34px; margin-bottom:10px}
.locked-state{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--red); background:rgba(239,71,111,.12);
  border:1px solid rgba(239,71,111,.3); border-radius:10px; padding:2px 10px; display:inline-block; margin-bottom:14px}

/* top-tab nav — WFM signature pattern (scrolls horizontally on mobile, R1) */
.nav{display:flex; padding:0 20px; background:var(--bg1); border-bottom:1px solid var(--border); gap:2px; overflow-x:auto}
.ntab{display:flex; align-items:center; gap:7px; padding:11px 18px; font-size:13px; font-weight:500;
  color:var(--muted); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent;
  transition:all .2s; position:relative; top:1px; white-space:nowrap}
.ntab:hover{color:var(--text)}
.ntab.active{color:var(--cyan); border-bottom-color:var(--cyan)}

/* panels */
.panel{display:none; padding:16px 20px; flex-direction:column; gap:14px}
.panel.active{display:flex}

/* card header/body (WFM .ch/.ct) */
.ch{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line-soft)}
.ch .ct{font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted)}
.ch .spacer{margin-left:auto}
.cb{padding:14px 16px}
.twrap{overflow-x:auto}

/* KPI tiles — WFM */
.kpigrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px}
.kpi{background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:14px; position:relative; overflow:hidden}
.kpi::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--kc,var(--cyan))}
.kpi-lbl{font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.kpi-val{font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:600; color:var(--kc,var(--cyan)); line-height:1}
.kpi-sub{font-size:10px; color:var(--muted); margin-top:4px}

/* modals — WFM */
.moverlay{display:none; position:fixed; inset:0; background:rgba(6,13,26,.88); z-index:100;
  align-items:center; justify-content:center; backdrop-filter:blur(4px); padding:16px}
.moverlay.open{display:flex}
.modal{background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:22px;
  width:540px; max-width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(0,229,255,.07)}
.mtitle{font-size:15px; font-weight:700; margin-bottom:18px}
.fg{margin-bottom:12px}
.fg label{margin:0 0 5px}
.fr2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fr3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.mactions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px}

/* pill checkboxes (roles, work week) */
.checks{display:flex; flex-wrap:wrap; gap:8px}
.checks label{display:flex; align-items:center; gap:6px; margin:0; border:1px solid var(--border);
  border-radius:6px; padding:6px 10px; cursor:pointer; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); font-weight:700}
.checks input{width:auto; accent-color:var(--cyan)}
.checks label:has(input:checked){color:var(--cyan); border-color:var(--border2); background:rgba(0,229,255,.06)}

/* toast */
.toast{position:fixed; bottom:18px; right:18px; background:var(--bg2); border:1px solid var(--border2);
  border-radius:8px; padding:10px 16px; font-size:12px; z-index:200; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.err{border-color:rgba(239,71,111,.5); color:var(--red)}

/* scrollbars — WFM */
::-webkit-scrollbar{width:5px; height:5px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:var(--bg3); border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}