@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#f4f6fa; --card:#fff; --ink:#1b2030; --ink2:#6b7280; --line:#e9ebf0;
  --blue:#1A55E3; --blue-h:#1647c4;
  --pink:#FF0854; --cyan:#0DCAF0;
  --green:#00D284; --green-bg:#d7f7ea; --green-tx:#06794f;
  --orange:#ff9500; --orange-bg:#fff2df; --orange-tx:#a85d00;
  --red:#FF0854; --red-bg:#ffe1e9; --red-tx:#c40743;
  --purple:#5E6EED; --purple-bg:#eaecfe; --purple-tx:#3b41c9;
  --gray-bg:#eef0f4; --gray-tx:#6e6e73;
  --shadow:0 6px 24px rgba(20,30,70,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;letter-spacing:-.011em;
}
a{color:inherit;text-decoration:none}

/* top bar */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:60px;display:flex;align-items:center;gap:18px;
  padding:0 24px;background:rgba(251,251,253,.8);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 1px 14px rgba(20,30,70,.045);font-size:14px;
}
nav .brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;font-size:15px;
  padding-right:18px;margin-right:2px;border-right:1px solid rgba(0,0,0,.09);height:30px}
nav .brand svg{width:17px;height:17px;padding:6px;border-radius:9px;color:#fff;box-sizing:content-box;
  background:linear-gradient(135deg,#1A55E3,#5E6EED);box-shadow:0 3px 9px rgba(26,85,227,.35);vertical-align:0}
nav .nlinks{display:flex;gap:3px}
nav .right{margin-left:auto;display:flex;align-items:center;gap:13px}
nav .who2{display:flex;flex-direction:column;line-height:1.15;text-align:right}
nav .who2 b{font-size:13px;font-weight:600} nav .who2 span{font-size:11px;color:var(--ink2)}
nav .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#1A55E3,#5E6EED);box-shadow:0 3px 10px rgba(26,85,227,.32)}
/* mobile 3-dot menu toggle (hidden on desktop, shown on small screens) */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;font-size:24px;line-height:1;color:var(--ink);
  padding:2px 11px;border-radius:9px;font-weight:700;transition:background .15s}
.nav-toggle:hover{background:rgba(0,0,0,.06)}
.nav-toggle.on{background:var(--blue);color:#fff}
/* fixed nav now overlaps content — push everything below it (only pages that have a nav) */
body:has(nav){padding-top:60px}

.role-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:980px;text-transform:uppercase;letter-spacing:.04em}
.role-badge.admin{background:var(--purple-bg);color:var(--purple-tx)}
.role-badge.manager{background:#e4f0ff;color:#0a59c2}
.role-badge.employee{background:var(--gray-bg);color:var(--gray-tx)}

.wrap{max-width:1080px;margin:0 auto;padding:30px 22px 90px}

/* hero */
.hero{text-align:center;padding:54px 24px 30px}
.hero h1{font-size:46px;line-height:1.07;font-weight:600;letter-spacing:-.025em}
.hero .grad{background:linear-gradient(92deg,#1A55E3,#0DCAF0 40%,#00D284);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin-top:14px;font-size:20px;color:var(--ink2)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.stat{background:var(--card);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.stat .label{font-size:14px;color:var(--ink2);font-weight:500}
.stat .num{font-size:44px;font-weight:600;letter-spacing:-.03em;margin-top:4px}
.stat .num.green{color:var(--green-tx)} .stat .num.red{color:var(--red-tx)} .stat .num.orange{color:var(--orange-tx)}

/* cards */
.card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:30px;margin-bottom:22px}
.card h2{font-size:23px;font-weight:600;letter-spacing:-.02em}
.card .sub{color:var(--ink2);font-size:15px;margin-top:4px}
.row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.controls{margin-top:22px}

/* buttons */
.btn{border:none;cursor:pointer;font-family:inherit;font-size:16px;font-weight:400;color:#fff;
  background:var(--blue);padding:11px 24px;border-radius:980px;transition:background .2s,transform .08s}
.btn:hover{background:var(--blue-h)} .btn:active{transform:scale(.97)}
.btn.secondary{background:#e8e8ed;color:var(--ink)} .btn.secondary:hover{background:#dedee3}
.btn.danger{background:var(--red)} .btn.danger:hover{background:#e0352b}
.btn.small{font-size:13px;padding:7px 15px;font-weight:500}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:#f6f6f8}
.btn:disabled{opacity:.5;cursor:default}

/* segmented */
.seg{display:inline-flex;background:#ececf0;border-radius:980px;padding:3px;margin-left:auto}
.seg button{border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:14px;
  font-weight:500;color:var(--ink);padding:7px 18px;border-radius:980px;transition:all .2s}
.seg button.on{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.seg button.on.live{color:var(--red-tx)}

/* table */
table{width:100%;border-collapse:collapse;margin-top:8px}
thead th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);
  font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line)}
tbody td{padding:14px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
.who{display:flex;align-items:center;gap:13px}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,#9aa3ad,#c4ccd4)}
.who .em{font-size:13px;color:var(--ink2)}

.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:5px 12px;border-radius:980px}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.green{background:var(--green-bg);color:var(--green-tx)}
.pill.orange{background:var(--orange-bg);color:var(--orange-tx)}
.pill.red{background:var(--red-bg);color:var(--red-tx)}
.pill.gray{background:var(--gray-bg);color:var(--gray-tx)}
.pill.purple{background:var(--purple-bg);color:var(--purple-tx)}

/* premium Active/Suspended toggle (separate clear states) */
.state-toggle{display:inline-flex;background:#eef0f4;border-radius:980px;padding:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.state-toggle .st-opt{border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;
  padding:6px 14px;border-radius:980px;color:var(--ink2);transition:all .2s;display:flex;align-items:center;gap:5px}
.state-toggle .st-opt:hover:not(.on-act):not(.on-sus){color:var(--ink)}
.state-toggle .st-opt.on-act{background:linear-gradient(135deg,#00D284,#06a86a);color:#fff;box-shadow:0 2px 7px rgba(0,210,132,.4)}
.state-toggle .st-opt.on-sus{background:linear-gradient(135deg,#FF0854,#d9094a);color:#fff;box-shadow:0 2px 7px rgba(255,8,84,.4)}
.state-toggle .st-opt:disabled{cursor:default}
.shield-mini{font-size:11px;font-weight:600;color:#0a59c2;background:#e8f0ff;padding:2px 8px;border-radius:980px;cursor:pointer}
.protect-link{font-size:11px;color:#c0c4cc;cursor:pointer}.protect-link:hover{color:var(--blue)}

/* premium hover */
.stat{transition:transform .2s,box-shadow .25s}
.stat:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.10)}
.loc-card{transition:transform .2s}.loc-card:hover{transform:translateY(-3px)}
tbody tr:hover td{background:#fafbfd}

.acct{font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px}
.acct .d{width:9px;height:9px;border-radius:50%}
.acct.active .d{background:var(--green);box-shadow:0 0 0 4px rgba(0,210,132,.16)}
.acct.susp .d{background:var(--red);box-shadow:0 0 0 4px rgba(255,8,84,.14)}
.acct.susp{color:var(--red-tx)}

/* connections */
.conns{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.conn{flex:1;min-width:240px;display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.conn .ic{width:42px;height:42px;border-radius:12px;background:var(--green-bg);display:flex;align-items:center;justify-content:center;font-size:20px}
.conn .nm{font-weight:600} .conn .dt{font-size:13px;color:var(--ink2)}
.conn .ok{margin-left:auto;font-size:13px;font-weight:600;color:var(--green-tx);display:flex;align-items:center;gap:6px}
.conn .ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

/* audit log */
.audit{margin-top:14px;display:flex;flex-direction:column}
.audit .a{display:flex;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14px;align-items:flex-start}
.audit .a:last-child{border-bottom:none}
.audit .a .ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px}
.audit .a .ic.ovr{background:var(--orange-bg)} .audit .a .ic.req{background:var(--green-bg)}
.audit .a .ic.run{background:#e4f0ff} .audit .a .ic.sus{background:var(--red-bg)}
.audit .a .meta{color:var(--ink2);font-size:12px;margin-top:2px}
.audit .a .t{margin-left:auto;color:var(--ink2);font-size:12px;white-space:nowrap}
.audit .empty{color:var(--ink2);padding:10px 0}

/* run log */
.log{margin-top:18px;background:#1d1d1f;border-radius:16px;padding:18px 22px;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:#e6e6e6;
  max-height:240px;overflow:auto;line-height:1.7}
.log .ok{color:#6ee787} .log .warn{color:#ffd479} .log .err{color:#ff7b72} .log .muted{color:#8b949e}
.log .empty{color:#8b949e}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(29,29,31,.92);color:#fff;padding:13px 22px;border-radius:14px;font-size:15px;
  backdrop-filter:blur(10px);opacity:0;transition:all .3s;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== premium split login ===== */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-brand{position:relative;overflow:hidden;color:#fff;padding:56px 60px;display:flex;flex-direction:column;
  background:linear-gradient(150deg,#0a2540 0%,#1A55E3 45%,#5E6EED 100%)}
.auth-brand::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;bottom:-180px;
  background:radial-gradient(circle,rgba(0,210,132,.35),transparent 70%)}
.auth-brand .logo-row{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.auth-brand .logo-row .lk{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.auth-brand .brand-mid{margin-top:auto;position:relative;z-index:1}
.auth-brand .carousel{position:relative;min-height:230px}
.auth-brand .slide{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s ease;pointer-events:none}
.auth-brand .slide.active{opacity:1;transform:none;pointer-events:auto}
.auth-brand .slide .badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.15);padding:7px 13px;border-radius:980px;margin-bottom:18px}
.auth-brand h2{font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-.03em;max-width:470px}
.auth-brand .tag{margin-top:16px;font-size:17px;opacity:.86;max-width:450px;line-height:1.5}
.auth-brand .dots{display:flex;gap:9px;margin-top:14px}
.auth-brand .dot{width:8px;height:8px;border-radius:980px;background:rgba(255,255,255,.35);cursor:pointer;transition:all .35s}
.auth-brand .dot.on{background:#fff;width:24px}
.auth-brand .stat-row{margin-top:40px;display:flex;gap:34px;position:relative;z-index:1}
.auth-brand .stat-row .s b{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em}
.auth-brand .stat-row .s span{font-size:13px;opacity:.8}
.auth-brand .foot{margin-top:auto;padding-top:34px;font-size:13px;opacity:.7}

.auth-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.auth-card{width:100%;max-width:400px}
.auth-card .hi{font-size:30px;font-weight:600;letter-spacing:-.02em}
.auth-card .sub2{color:var(--ink2);font-size:15px;margin-top:6px;margin-bottom:28px}
.auth-card label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:7px;margin-top:16px}
.auth-input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:13px;font-family:inherit;font-size:15px;background:#fff;transition:border .15s,box-shadow .15s}
.auth-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,85,227,.13)}
.auth-card .btn{width:100%;margin-top:24px;font-size:16px;padding:14px;font-weight:500}
.auth-card .note{margin-top:20px;font-size:13px;color:var(--ink2);text-align:center}
.auth-card .demo-row{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.auth-card .demo-row .lab{font-size:12px;color:var(--ink2);text-align:center;margin-bottom:10px}
.auth-card .choips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.auth-card .choips button{border:1px solid var(--line);background:#fff;border-radius:980px;padding:8px 15px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--ink);transition:all .15s}
.auth-card .choips button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

@media(max-width:900px){.auth{grid-template-columns:1fr}.auth-brand{display:none}}

/* ===== login ===== */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--card);border-radius:28px;box-shadow:var(--shadow);padding:44px 40px;width:100%;max-width:420px;text-align:center}
.login-card .logo{font-size:34px}
.login-card h1{font-size:28px;font-weight:600;margin-top:10px;letter-spacing:-.02em}
.login-card p{color:var(--ink2);font-size:15px;margin-top:6px;margin-bottom:26px}
.login-card .field{text-align:left;margin-bottom:14px}
.login-card label{font-size:13px;font-weight:600;color:var(--ink2)}
.login-card select,.login-card input{width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;font-family:inherit;font-size:15px;background:#fafafc}
.login-card .btn{width:100%;margin-top:8px;font-size:16px;padding:13px}
.demo-hint{margin-top:22px;font-size:12px;color:var(--ink2)}
.choips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.choips button{border:1px solid var(--line);background:#fafafc;border-radius:980px;padding:6px 13px;
  font-size:12px;font-family:inherit;cursor:pointer;color:var(--ink)}
.choips button:hover{background:#f0f0f3}

/* OTP screen */
.otp-boxes{display:flex;gap:10px;justify-content:center;margin:22px 0 6px}
.otp-box{width:46px;height:56px;text-align:center;font-size:23px;font-weight:600;border:1px solid var(--line);
  border-radius:14px;background:#fafafc;font-family:inherit;color:var(--ink)}
.otp-box:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,85,227,.15)}
.otp-demo{margin-top:18px;background:#fff7e6;border:1px solid #ffe2a8;border-radius:12px;padding:11px 14px;
  font-size:13px;color:#8a5a00;text-align:center}
.otp-demo b{font-size:17px;letter-spacing:3px;color:#6b4500}
.otp-err{color:var(--red-tx);font-size:13.5px;margin-top:14px;font-weight:500}
.otp-meta{color:var(--ink2);font-size:14px;margin-top:6px}
.otp-resend{margin-top:16px;font-size:13px;color:var(--ink2)}
.otp-resend a{color:var(--blue);font-weight:600}
.shield{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#1A55E3,#5E6EED);
  display:flex;align-items:center;justify-content:center;margin:0 auto}

/* employee self portal */
.me-hero{background:var(--card);border-radius:26px;box-shadow:var(--shadow);padding:34px;display:flex;align-items:center;gap:24px;margin-bottom:22px}
.me-hero .big-av{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:600;color:#fff;background:linear-gradient(135deg,#1A55E3,#5E6EED);flex:none}
.me-hero h1{font-size:28px;font-weight:600;letter-spacing:-.02em}
.me-hero .em{color:var(--ink2);font-size:15px}
.me-state{margin-left:auto;text-align:right}
.me-state .lbl{font-size:13px;color:var(--ink2)}
.me-state .v{font-size:24px;font-weight:600;margin-top:2px}
.me-state .v.green{color:var(--green-tx)} .me-state .v.red{color:var(--red-tx)}

/* ===== governance: switch, stepper, requests, policies, modal ===== */
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.switch input{display:none}
.switch .sl{position:absolute;inset:0;background:#d1d1d6;border-radius:980px;transition:.2s;cursor:pointer}
.switch .sl::before{content:"";position:absolute;width:22px;height:22px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .sl{background:var(--green)}
.switch input:checked + .sl::before{transform:translateX(18px)}
.switch input:disabled + .sl{opacity:.45;cursor:not-allowed}

.stepper{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.stepper .st{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
.stepper .st .dot{width:19px;height:19px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.stepper .st.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.stepper .st.active{color:var(--ink)} .stepper .st.active .dot{border-color:var(--blue);color:var(--blue)}
.stepper .st.rej .dot{background:var(--red);border-color:var(--red);color:#fff}
.stepper .line{width:20px;height:2px;background:var(--line)}

.req{border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-top:14px}
.req .top{display:flex;align-items:center;gap:12px}
.req .reason{margin-top:10px;font-size:14px;color:var(--ink2);font-style:italic}
.req .acts{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.req .meta{font-size:12px;color:var(--ink2);margin-top:3px}
.req .right{margin-left:auto;text-align:right}

.pol{display:flex;align-items:center;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line)}
.pol:last-child{border:none}
.pol .body{flex:1}
.pol .nm{font-weight:600;font-size:15px}
.pol .desc{font-size:13px;color:var(--ink2);margin-top:2px}
.pol .lock{font-size:18px;opacity:.4}
.pol .del{cursor:pointer;color:var(--ink2);font-size:18px;background:none;border:none;padding:4px 8px}
.pol .del:hover{color:var(--red)}

.sim{margin-top:16px;border:1px dashed var(--line);border-radius:14px;padding:16px;display:none}
.sim.show{display:block}
.sim .change{font-size:14px;padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.sim .change:last-child{border:none}
.sim .arrow{color:var(--ink2)}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.32);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:90}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:22px;padding:28px;width:92%;max-width:440px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.modal h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.modal p{color:var(--ink2);font-size:14px;margin-top:4px}
.modal label{font-size:13px;font-weight:600;color:var(--ink2);display:block;margin-top:14px}
.modal textarea,.modal input,.modal select{width:100%;margin-top:7px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;background:#fafafc}
.modal textarea{resize:vertical;min-height:74px}
.modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

.countdown{font-variant-numeric:tabular-nums;font-weight:600;color:var(--green-tx)}
.countdown.warn{color:var(--orange-tx)}
.badge-count{background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:1px 8px;border-radius:980px;margin-left:8px;vertical-align:middle}
.grantpill{font-size:12px;color:var(--green-tx);background:var(--green-bg);padding:3px 9px;border-radius:980px;font-weight:600}

/* ===== workforce overview + work-mode + filters ===== */
.wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:20px}
.wf-label{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:12px}
.wf-bar{display:flex;height:34px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.wf-bar .seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;min-width:0;transition:flex .4s}
.wf-bar .WFO{background:linear-gradient(135deg,#1A55E3,#0DCAF0)}
.wf-bar .WFH{background:linear-gradient(135deg,#00D284,#06a86a)}
.wf-bar .Hybrid{background:linear-gradient(135deg,#5E6EED,#7a78f0)}
.wf-legend{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap;font-size:13px}
.wf-legend .lg{display:flex;align-items:center;gap:7px;color:var(--ink2)}
.wf-legend .lg b{color:var(--ink)}
.wf-legend .sw{width:11px;height:11px;border-radius:3px}
.wf-legend .sw.WFO{background:#1A55E3}.wf-legend .sw.WFH{background:#00D284}.wf-legend .sw.Hybrid{background:#5E6EED}
.wf-dept{display:flex;align-items:center;gap:12px;margin-bottom:11px;font-size:13px}
.wf-dept .nm{width:120px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-dept .track{flex:1;background:#f0f0f3;border-radius:6px;height:11px;overflow:hidden}
.wf-dept .fill{height:100%;background:linear-gradient(90deg,#1A55E3,#5E6EED);border-radius:6px;transition:width .4s}
.wf-dept .ct{width:36px;text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums}

/* collapsible department groups */
tr.grp{cursor:pointer}
tr.grp td{background:#f6f6fa;font-weight:600;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line);padding:13px 14px}
tr.grp:hover td{background:#eeeef4}
tr.grp .chev{display:inline-block;width:14px;color:var(--ink2)}
tr.grp .grp-ct{margin-left:10px;font-size:12px;font-weight:600;color:var(--ink2);background:#e6e6ee;padding:2px 9px;border-radius:980px}

/* live-mode banner */
.live-banner{display:flex;align-items:center;gap:16px;border-radius:16px;padding:16px 20px;margin-top:18px;border:1px solid var(--line)}
.live-banner.preview{background:#eef4ff;border-color:#d3e3ff}
.live-banner.on{background:var(--red-bg);border-color:#ffc9c4}
.live-banner .lt{font-size:15px}
.live-banner b{font-weight:700}
.live-banner .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.live-banner .dotpulse{width:9px;height:9px;border-radius:50%}
.live-banner.preview .dotpulse{background:#1A55E3}
.live-banner.on .dotpulse{background:var(--red);box-shadow:0 0 0 4px rgba(255,8,84,.18)}

/* top global search */
.topsearch{position:relative;margin-top:18px;max-width:560px}
.topsearch .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#86868b}
.topsearch input{width:100%;padding:13px 18px 13px 44px;border:1px solid var(--line);border-radius:14px;font-family:inherit;font-size:15px;background:#fff;box-shadow:var(--shadow)}
.topsearch input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,85,227,.12)}

.loc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.loc-card{border:1px solid var(--line);border-radius:16px;padding:15px 18px}
.loc-card .city{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.loc-card .n{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
.loc-card .track{margin-top:10px;background:#f0f0f3;border-radius:6px;height:8px;overflow:hidden}
.loc-card .fill{height:100%;background:linear-gradient(90deg,#1A55E3,#5E6EED);border-radius:6px}

.role-mini{margin-top:6px;font-size:11px;padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:#fafafc;font-family:inherit;color:var(--ink2);cursor:pointer}
.loc-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:980px;border:none;font-family:inherit;background:#eef1f6;color:#46506b}
.loc-badge.click{cursor:pointer}.loc-badge.click:hover{filter:brightness(.96)}

.wf-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:980px;border:none;font-family:inherit}
.wf-badge.click{cursor:pointer;transition:filter .15s}.wf-badge.click:hover{filter:brightness(.95)}
.wf-badge.WFO{background:#e4f0ff;color:#0a59c2}
.wf-badge.WFH{background:var(--green-bg);color:var(--green-tx)}
.wf-badge.Hybrid{background:var(--purple-bg);color:var(--purple-tx)}

.roster-controls{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.search-wrap{position:relative;flex:1;min-width:240px}
.search-wrap .ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#86868b}
.search-wrap input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--line);border-radius:980px;font-family:inherit;font-size:15px;background:#fafafc}
.dept-select{padding:11px 14px;border:1px solid var(--line);border-radius:980px;font-family:inherit;font-size:14px;background:#fafafc;max-width:200px}

@media(max-width:760px){.wf-grid{grid-template-columns:1fr;gap:24px}}

/* ===== AI assistant chat + reports ===== */
.assistant{border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:16px}
.assistant .head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(92deg,#f3f7ff,#f6fff8)}
.assistant .head .bot-av{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#1A55E3,#5E6EED);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.assistant .head .nm{font-weight:600}
.assistant .head .st{font-size:12px;color:var(--ink2)}
.assistant .head .live{margin-left:auto;font-size:12px;color:var(--green-tx);display:flex;align-items:center;gap:6px}
.assistant .head .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.msgs{padding:18px;max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:12px;background:#fafafc}
.m{max-width:84%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.55}
.m.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.m.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.m.bot b{color:var(--ink)}
.m .evs{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.m .ev{font-size:12.5px;background:#f6f6f8;border-radius:10px;padding:7px 10px;display:flex;gap:8px;align-items:center}
.inbar{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:#fff}
.inbar input{flex:1;padding:11px 15px;border:1px solid var(--line);border-radius:980px;font-family:inherit;font-size:14px;background:#fafafc}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips button{border:1px solid var(--line);background:#fafafc;border-radius:980px;padding:7px 13px;font-size:12px;font-family:inherit;cursor:pointer;color:var(--ink)}
.chips button:hover{background:#f0f0f3}

.risk{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.risk.hi{color:var(--red-tx)} .risk.md{color:var(--orange-tx)} .risk.lo{color:var(--green-tx)}
.mono{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--ink)}
.flagchip{font-size:11px;font-weight:600;background:var(--orange-bg);color:var(--orange-tx);padding:2px 8px;border-radius:980px;margin-right:5px;display:inline-block}
.flagchip.crit{background:var(--red-bg);color:var(--red-tx)}
.st-pill{font-size:12px;font-weight:600;padding:4px 11px;border-radius:980px}
.st-pill.success{background:var(--green-bg);color:var(--green-tx)}
.st-pill.flagged{background:var(--orange-bg);color:var(--orange-tx)}
.st-pill.blocked{background:var(--red-bg);color:var(--red-tx)}
.filterbar{display:flex;gap:8px;margin:14px 0 4px}
.filterbar button{border:1px solid var(--line);background:#fff;border-radius:980px;padding:6px 14px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--ink)}
.filterbar button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

@media(max-width:760px){
  .hero h1{font-size:34px} .stats{grid-template-columns:repeat(2,1fr)}
  .who .em{display:none}
  .me-hero{flex-direction:column;text-align:center} .me-state{margin:0}
}

/* premium pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap}
.pager button{min-width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:11px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s;padding:0 11px}
.pager button:hover:not(:disabled):not(.on){background:var(--gray-bg);border-color:#d4d8e0}
.pager button.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 8px rgba(26,85,227,.3)}
.pager button:disabled{opacity:.4;cursor:default}
.pager .info{color:var(--ink2);font-size:13px;margin:0 6px}

/* premium nav links — active highlight + hover */
nav .nlinks{gap:4px}
nav .nlinks a{padding:7px 14px;border-radius:980px;font-weight:500;opacity:1;color:var(--ink2);transition:background .18s,color .18s}
nav .nlinks a:hover{background:rgba(0,0,0,.06);color:var(--ink)}
nav .nlinks a.active{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(26,85,227,.32)}
nav .nlinks a.active:hover{background:var(--blue-h);color:#fff}

/* =================== Apple-grade premium polish =================== */
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,#f7f8fa 0%,#eceef2 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{letter-spacing:-.025em}

/* gentle content fade-in */
.wrap{animation:ac-fade .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes ac-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* softer, layered premium shadows */
.card{
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 32px rgba(22,22,44,.055);
  transition:box-shadow .35s ease;
}
.card:hover{box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 48px rgba(22,22,44,.10)}

.stat{
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 22px rgba(22,22,44,.05);
}

/* frosted, refined nav */
nav{
  background:rgba(255,255,255,.62)!important;
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* primary buttons with subtle depth */
.btn{letter-spacing:-.01em;transition:background .2s,transform .08s,box-shadow .25s}
.btn:not(.ghost):not(.secondary):not(.danger){box-shadow:0 2px 9px rgba(26,85,227,.28)}
.btn:not(.ghost):not(.secondary):not(.danger):hover{box-shadow:0 6px 18px rgba(26,85,227,.38);transform:translateY(-1px)}
.btn.danger{box-shadow:0 2px 9px rgba(255,8,84,.26)}
.btn.danger:hover{box-shadow:0 6px 18px rgba(255,8,84,.36);transform:translateY(-1px)}

/* refined chips/pills + avatars */
.pill{transition:all .15s}
.avatar{box-shadow:0 2px 7px rgba(0,0,0,.14)}
.role-badge{letter-spacing:.05em}

/* dropdowns + inputs polish */
select,input{transition:border-color .15s,box-shadow .15s}
.dept-select:focus,.auth-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,85,227,.12)}

/* table rows subtle */
tbody tr{transition:background .15s}
tbody tr:hover td{background:#fafbfd}

/* sign-out / ghost buttons */
.btn.ghost{transition:all .18s}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ================= Vibrant 1000-crore theme ================= */
body{
  background:
    radial-gradient(1100px 560px at 100% -8%, rgba(26,85,227,.13), transparent 58%),
    radial-gradient(920px 520px at -8% 108%, rgba(13,202,240,.11), transparent 55%),
    radial-gradient(760px 520px at 60% 122%, rgba(255,8,84,.06), transparent 60%),
    #e9eefb;
  background-attachment:fixed;
}
/* gradient buttons */
.btn:not(.ghost):not(.secondary):not(.danger){background:linear-gradient(135deg,#1A55E3,#3b41c9);border:none}
.btn:not(.ghost):not(.secondary):not(.danger):hover{background:linear-gradient(135deg,#1647c4,#33379e)}
.btn.danger{background:linear-gradient(135deg,#FF0854,#d9094a);border:none}
/* colorful stat cards */
.stat{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfcff)}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--purple))}
.stat .num{font-weight:800;letter-spacing:-.03em}
/* saturated pills */
.pill.green{background:#c9f5e1;color:#067a52}
.pill.red{background:#ffd6e2;color:#c40743}
.pill.orange{background:#ffeaca;color:#9a5600}
.pill.purple{background:#e2e5fe;color:#3b41c9}
.pill.gray{background:#e8ebf3;color:#5a6172}
/* premium colored card shadow */
.card{box-shadow:0 1px 2px rgba(20,30,70,.04),0 18px 44px rgba(26,60,150,.08)}
/* sticky table headers (desktop) */
thead th{position:sticky;top:60px;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(8px);z-index:3}

/* ================= Mobile responsive ================= */
@media(max-width:860px){
  html,body{overflow-x:hidden;max-width:100%}
  .wrap{max-width:100vw}
  .stat,.loc-card,.wf-dept,.appr-row,.conn{min-width:0}
  nav{height:54px;flex-wrap:nowrap;gap:8px;padding:0 12px}
  body:has(nav){padding-top:54px}
  nav .brand{border-right:none;padding-right:0;margin-right:0;height:auto;min-width:0;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .nav-toggle,nav .right{flex-shrink:0}
  .nav-toggle{display:block}
  nav .nlinks{display:none}
  nav .nlinks.open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 5px);left:10px;right:10px;width:auto;
    background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 52px rgba(0,0,0,.24);
    padding:8px;gap:3px;z-index:70;max-height:74vh;overflow:auto}
  nav .nlinks.open a{white-space:nowrap;width:100%;padding:12px 15px;border-radius:10px}
  nav .who2{display:none}
  nav .role-badge{display:none}
  nav .right{gap:8px;margin-left:auto}
  nav .right .btn.small{padding:6px 12px;font-size:12px}
  .wrap{padding:16px 14px 80px}
  .stats{grid-template-columns:repeat(2,1fr)!important;gap:12px}
  .stat{padding:16px} .stat .num{font-size:32px}
  .row{flex-wrap:wrap}
  .seg{margin-left:0}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  thead th{position:static}
  h1{font-size:26px!important}
  .card{padding:18px!important}
  .topsearch{max-width:none} .topsearch input{font-size:16px}  /* 16px stops iOS zoom */
  .loc-cards{grid-template-columns:repeat(2,1fr)}
  .live-banner{flex-wrap:wrap;gap:10px}
  .ai-fab{width:52px;height:52px;bottom:16px;right:16px;font-size:22px}
  .ai-panel{right:10px;left:10px;width:auto;bottom:78px;height:70vh}
  .prot-grid{grid-template-columns:1fr}
  /* modals: fit small screens + 16px inputs to stop iOS auto-zoom */
  .modal{width:94%;max-width:none;padding:22px;max-height:88vh;overflow-y:auto;border-radius:18px}
  .modal input,.modal select,.modal textarea{font-size:16px}
  .modal .acts{flex-wrap:wrap}
  .modal .acts .btn{flex:1;min-width:120px;justify-content:center}
  input,select,textarea{font-size:16px}
  .filterbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:480px){
  .stats{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .stat .num{font-size:28px} .stat .label{font-size:12px}
  .kpi-grid{grid-template-columns:1fr!important}
  nav .brand span,nav .brand{font-size:14px}
  h1{font-size:23px!important} .card h2{font-size:20px}
  .loc-cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .loc-card .n{font-size:26px}
  .appr-row{flex-direction:column;align-items:flex-start;gap:8px}
  .auth-card{padding:26px 20px}
}

/* ============ premium table headers (all pages) ============ */
thead th{
  background:linear-gradient(180deg,#eef2fd 0%,#e6ecf9 100%);
  color:#33406b;font-weight:700;font-size:11.5px;letter-spacing:.06em;
  border-bottom:2px solid #d8e0f3;padding:13px 15px;
}
thead th:first-child{border-top-left-radius:13px;padding-left:18px}
thead th:last-child{border-top-right-radius:13px}

/* ============ nav icon buttons (theme + search) ============ */
.icon-btn{background:transparent;border:none;cursor:pointer;font-size:17px;padding:5px 8px;border-radius:9px;line-height:1;transition:background .15s}
.icon-btn:hover{background:rgba(0,0,0,.07)}

/* ============ command palette (Ctrl/Cmd + K) ============ */
.cmdk-bg{position:fixed;inset:0;background:rgba(15,20,32,.45);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;z-index:200;padding-top:12vh}
.cmdk-bg.show{display:flex}
.cmdk{width:92%;max-width:600px;background:var(--card);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden;border:1px solid var(--line)}
.cmdk input{width:100%;border:none;outline:none;padding:19px 22px;font-size:17px;font-family:inherit;background:var(--card);color:var(--ink)}
.cmdk-list{max-height:52vh;overflow:auto;border-top:1px solid var(--line)}
.cmdk-item{display:flex;align-items:center;gap:13px;padding:12px 18px;cursor:pointer}
.cmdk-item.on,.cmdk-item:hover{background:var(--gray-bg)}
.cmdk-item .ci{font-size:16px;width:22px;text-align:center}
.cmdk-item .cl{font-weight:600;font-size:14px}
.cmdk-item .cs{font-size:12px;color:var(--ink2)}
.cmdk-empty{padding:22px;text-align:center;color:var(--ink2);font-size:14px}
.cmdk-hint{padding:9px 18px;font-size:11px;color:var(--ink2);border-top:1px solid var(--line);display:flex;gap:16px}

/* ============ dark mode ============ */
[data-theme="dark"]{--bg:#0f1420;--card:#161b27;--ink:#e7eaf2;--ink2:#9aa3b8;--line:#28303f;--gray-bg:#222a3a;--gray-tx:#aeb6c8;--shadow:0 6px 24px rgba(0,0,0,.45)}
[data-theme="dark"] body{background:#0e1320}
[data-theme="dark"] nav{background:rgba(18,23,34,.80)!important;border-bottom-color:#262d3d}
[data-theme="dark"] .icon-btn:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .stat{background:linear-gradient(180deg,#171d2a,#141925)!important}
[data-theme="dark"] thead th{background:linear-gradient(180deg,#1c2433,#161c28)!important;color:#aeb8d6!important;border-bottom-color:#2a3346!important}
[data-theme="dark"] tbody tr:hover td{background:#1a2030}
[data-theme="dark"] .btn.ghost{color:var(--ink);border-color:#313b54}
[data-theme="dark"] .btn.secondary{background:#2a3346;color:var(--ink)}
[data-theme="dark"] .seg{background:#222a3a}
[data-theme="dark"] .seg button{color:var(--ink)}
[data-theme="dark"] .seg button.on{background:#33405e;box-shadow:none}
[data-theme="dark"] .role-mini,[data-theme="dark"] .dept-select,[data-theme="dark"] .topsearch input,[data-theme="dark"] .search-wrap input{background:#1b2230;color:var(--ink);border-color:#2a3346}
[data-theme="dark"] .state-toggle{background:#222a3a}
[data-theme="dark"] .loc-badge{background:#222a3a;color:#aeb6c8}
[data-theme="dark"] .live-banner.preview{background:#15233b}

/* ============ animated login background ============ */
.auth-brand{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#06214a 0%,#1A55E3 45%,#5E6EED 100%);
  background-size:220% 220%;animation:authGrad 16s ease infinite}
@keyframes authGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;z-index:0;pointer-events:none}
.auth-brand::before{width:400px;height:400px;background:#0DCAF0;top:-90px;left:-70px;animation:blobA 17s ease-in-out infinite}
.auth-brand::after{width:440px;height:440px;background:#FF0854;bottom:-130px;right:-90px;animation:blobB 21s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(140px,90px) scale(1.25)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-110px,-70px) scale(1.15)}}
.auth-brand>*{position:relative;z-index:1}

/* ============ dark mode — fix all light surfaces ============ */
[data-theme="dark"]{color-scheme:dark}
[data-theme="dark"] tr.grp td{background:#1a2233!important;color:var(--ink)}
[data-theme="dark"] tr.grp:hover td{background:#212c45!important}
[data-theme="dark"] tr.grp .grp-ct{background:#2a3346;color:#b6bfd2}
[data-theme="dark"] tbody td{border-bottom-color:#222a39}
[data-theme="dark"] .wf-dept .track,[data-theme="dark"] .loc-card .track{background:#222a3a}
[data-theme="dark"] .loc-card{border-color:#28303f}
[data-theme="dark"] .loc-badge{background:#222a3a;color:#b6bfd2}
[data-theme="dark"] .filterbar button,[data-theme="dark"] .pager button,[data-theme="dark"] .topsearch input{background:#1b2230;color:var(--ink);border-color:#2a3346}
[data-theme="dark"] .filterbar button.on{background:#1A55E3;color:#fff;border-color:#1A55E3}
[data-theme="dark"] .btn.ghost:hover{background:#222a3a}
[data-theme="dark"] .seg button.on{background:#33405e;color:#fff}
[data-theme="dark"] .modal{background:var(--card)}
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),[data-theme="dark"] select,[data-theme="dark"] textarea{background:#1b2230;color:var(--ink);border-color:#2a3346}
[data-theme="dark"] .badge-count{color:#fff}
[data-theme="dark"] .assistant .msgs{background:#10151f}
[data-theme="dark"] .m.bot,[data-theme="dark"] .m .ev{background:#1b2230;border-color:#2a3346}
[data-theme="dark"] .inbar{background:var(--card);border-color:#28303f}
[data-theme="dark"] .chips button{background:#1b2230;color:var(--ink);border-color:#2a3346}
[data-theme="dark"] .otp-box{background:#1b2230;color:var(--ink);border-color:#2a3346}
[data-theme="dark"] .conn{border-color:#28303f}
[data-theme="dark"] .kpi{border-color:#28303f}
[data-theme="dark"] .cmdk-item.on,[data-theme="dark"] .cmdk-item:hover{background:#222a3a}
/* inline light backgrounds (override with !important) */
[data-theme="dark"] [style*="background:#fafafc"],[data-theme="dark"] [style*="background:#fff"]{background:#1b2230!important;color:var(--ink)}
[data-theme="dark"] .card[style*="eef4ff"]{background:linear-gradient(135deg,#15233b,#16203a)!important;border-color:#24344f!important}
[data-theme="dark"] [style*="color:#3b4252"]{color:#aab4cc!important}

/* ============ AI assistant widget ============ */
.ai-fab{position:fixed;bottom:24px;right:24px;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#1A55E3,#5E6EED);color:#fff;border:none;cursor:pointer;font-size:25px;
  box-shadow:0 10px 28px rgba(26,85,227,.5);z-index:150;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.ai-fab:hover{transform:scale(1.08)}
.ai-panel{position:fixed;bottom:92px;right:24px;width:390px;max-width:92vw;height:540px;max-height:74vh;
  background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.32);
  z-index:151;display:none;flex-direction:column;overflow:hidden}
.ai-panel.show{display:flex;animation:ac-fade .25s ease}
.ai-head{padding:14px 16px;background:linear-gradient(135deg,#1A55E3,#5E6EED);color:#fff;display:flex;align-items:center;gap:10px}
.ai-head b{font-size:15px}.ai-head .sub{font-size:11px;opacity:.85}
.ai-msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.ai-m{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55;white-space:pre-wrap}
.ai-m.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.ai-m.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.ai-act{font-size:11px;color:var(--green-tx);margin-top:7px;font-weight:600}
.ai-act a{color:var(--blue)}
.ai-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 10px;background:var(--card)}
.ai-chips button{border:1px solid var(--line);background:var(--bg);border-radius:980px;padding:5px 11px;font-size:11px;cursor:pointer;color:var(--ink2);font-family:inherit}
.ai-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--card)}
.ai-in input{flex:1;border:1px solid var(--line);border-radius:980px;padding:10px 15px;font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
.ai-in button{border:none;background:var(--blue);color:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:15px;flex:none}

/* AI settings + meta */
.ai-settings{display:none;flex-direction:column;gap:11px;padding:13px 16px;background:var(--gray-bg);border-bottom:1px solid var(--line)}
.ai-settings.show{display:flex}
.ai-settings label{font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:5px;font-weight:600}
.ai-settings select{padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-family:inherit;font-size:13px}
.ai-settings input[type=range]{width:100%}
.ai-meta{font-size:10px;color:var(--ink2);margin-top:6px;opacity:.85}

/* protected-accounts chips */
.prot-chip{display:inline-flex;align-items:center;gap:7px;background:#e8f0ff;color:#0a59c2;border-radius:980px;padding:7px 13px;font-size:13px;font-weight:600}
.prot-chip small{color:var(--ink2);font-weight:400;font-size:11px}
.prot-chip button{border:none;background:rgba(10,89,194,.18);color:#0a59c2;border-radius:50%;width:19px;height:19px;cursor:pointer;font-size:11px;line-height:1;flex:none}
.prot-chip button:hover{background:var(--red);color:#fff}
[data-theme="dark"] .prot-chip{background:#16233b;color:#7fb0ff}

/* protected accounts — clean grid + live search */
.prot-results{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.16);margin-top:8px;max-height:300px;overflow:auto;z-index:30;display:none}
.prot-res{padding:11px 16px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}
.prot-res:last-child{border-bottom:none}
.prot-res:hover{background:var(--gray-bg)}
.prot-res small{color:var(--ink2);font-size:12px}
.prot-res span{margin-left:auto;font-size:11px;color:var(--ink2)}
.prot-res.muted{color:var(--ink2);cursor:default}
.prot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:10px}
.prot-chip{display:flex!important;align-items:center;gap:9px;background:#eef4ff;color:#0a59c2;border-radius:13px;padding:10px 13px;font-size:13px}
.prot-chip .pc-i{flex:none;font-size:14px}
.prot-chip .pc-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.prot-chip .pc-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prot-chip .pc-t small{color:var(--ink2);font-weight:400;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prot-chip button{border:none;background:rgba(10,89,194,.16);color:#0a59c2;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:11px;line-height:1;flex:none}
.prot-chip button:hover{background:var(--red);color:#fff}
[data-theme="dark"] .prot-chip{background:#16233b;color:#7fb0ff}
[data-theme="dark"] .prot-chip .pc-t small{color:#9aa3b8}

/* weekly approval */
.appr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:14px;margin-bottom:9px}
.appr-row.appr-need{border-color:#ffd0dd;background:#fff5f8}
.appr-row.appr-soon{border-color:#ffe6c2;background:#fffaf2}
.appr-row.appr-ok{border-color:#cdeede;background:#f4fbf8}
.appr-meta{font-size:12px;color:var(--ink2);margin-top:2px}
.appr-row.appr-need .appr-meta span{color:var(--red-tx);font-weight:600}
.appr-row.appr-soon .appr-meta span{color:var(--orange-tx);font-weight:600}
.appr-row.appr-ok .appr-meta span{color:var(--green-tx);font-weight:600}
[data-theme="dark"] .appr-row.appr-need{background:#2a1820;border-color:#5a2436}
[data-theme="dark"] .appr-row.appr-soon{background:#2a2316;border-color:#5a4a24}
[data-theme="dark"] .appr-row.appr-ok{background:#162a22;border-color:#24503c}

/* dept-head searchable picker */
.hod-pick{display:inline-flex;align-items:center;gap:6px;width:190px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:14px;background:var(--card);color:var(--ink2)}
.hod-pick.set{color:var(--ink);font-weight:600;border-color:#cdd9f0;background:#f5f8ff}
.hod-pick:hover{border-color:var(--blue)}
.hod-pick .pk-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.hod-pick .caret{color:var(--ink2);font-size:11px}
.pick-panel{position:absolute;display:none;width:310px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.24);z-index:200;padding:10px}
.pick-panel input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink);margin-bottom:8px}
.pick-list{max-height:290px;overflow:auto}
.pick-item{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px}
.pick-item:hover{background:var(--gray-bg)}
.pick-item.cur{background:#eef4ff}
.pick-item small{color:var(--ink2);font-size:11px}
.pick-item span{margin-left:auto;color:var(--ink2);font-size:11px;flex:none}
.pick-item.none{color:var(--ink2);font-style:italic}
[data-theme="dark"] .hod-pick.set{background:#16233b;border-color:#2a3b5a}
[data-theme="dark"] .pick-item.cur{background:#16233b}

/* ===== side-drawer nav menu (corner toggle -> full-height nav by name) =====
   Scoped under nav.ac-drawer (added by JS). If JS fails, links stay inline. */
.nav-toggle{display:flex!important;align-items:center;justify-content:center;font-size:21px}
.nav-overlay{position:fixed;inset:0;background:rgba(15,20,40,.42);z-index:150;opacity:0;visibility:hidden;transition:opacity .25s}
.nav-overlay.show{opacity:1;visibility:visible}
nav.menu-open{z-index:200}   /* lift the whole nav (incl. drawer) above the overlay */
nav.ac-drawer .nlinks{display:none!important}
.drawer-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);padding:4px 16px 14px}
nav.ac-drawer .nlinks.open{display:flex!important;flex-direction:column;position:fixed;left:0;top:0;height:100vh;width:270px;
  background:var(--card);border-right:1px solid var(--line);box-shadow:0 0 70px rgba(0,0,0,.28);
  padding:20px 12px;gap:3px;z-index:160;overflow:auto;animation:drawerIn .24s ease}
@keyframes drawerIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
nav.ac-drawer .nlinks.open a{width:100%;padding:13px 16px!important;border-radius:11px!important;font-size:15px;font-weight:500;opacity:1;color:var(--ink)}
nav.ac-drawer .nlinks.open a:hover{background:var(--gray-bg)}
nav.ac-drawer .nlinks.open a.active{background:var(--blue);color:#fff}
[data-theme="dark"] nav.ac-drawer .nlinks.open{background:#141a26;border-color:#2a3346}