/* Corporate OT · styles
   Fonts: the pilot used Barlow Condensed + Inter from Google Fonts. Internal
   networks often block fonts.googleapis.com, so this falls back to fonts
   already on the PC. Add an @font-face block here to self-host them instead. */

:root{
  --ink:#14202b; --ink2:#4a5866; --muted:#8a96a3; --line:#e3e7ec; --bg:#f3f5f7; --card:#fff;
  --navy:#14202b; --amber:#f5a524; --amber-soft:#fff4dc; --green:#1f9d63; --green-soft:#e3f6ec;
  --red:#d64545; --red-soft:#fde8e8; --blue:#2f6fd6; --blue-soft:#e6efff; --night:#2b3a67; --night-soft:#e8ebf6;
  --r:12px;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-head:"Barlow Condensed","Segoe UI Semibold","Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:14px}
h1,h2,h3,.brand,.num{font-family:var(--font-head);letter-spacing:.3px}
h2{font-size:24px;margin:0 0 4px}
h3{font-size:19px;margin:0}
button{font:inherit;cursor:pointer}
code{background:#eef0f2;padding:1px 5px;border-radius:5px;font-size:12.5px}
header{background:var(--navy);color:#fff;position:relative;z-index:5}
.bar{max-width:1180px;margin:auto;display:flex;align-items:center;gap:16px;padding:12px 20px}
.brand{font-size:24px;font-weight:700;display:flex;align-items:center;gap:10px}
.brand .logo{width:30px;height:30px;border-radius:8px;background:var(--amber);color:var(--navy);display:grid;place-items:center;font-size:17px}
.brand small{font-family:var(--font-body);font-weight:500;font-size:12px;color:#9fb0c0;letter-spacing:0}
nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
nav a{color:#cfd9e2;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:500}
nav a.active,nav a:hover{background:#ffffff14;color:#fff}
.who{display:flex;align-items:center;gap:8px;color:#cfd9e2;font-size:13px}
main{max-width:1180px;margin:auto;padding:24px 20px 60px}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;font-weight:600}
.btn:hover{border-color:#c5ccd4}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--navy)}
.btn.primary:hover{filter:brightness(.96)}
.btn.ok{background:var(--green);border-color:var(--green);color:#fff}
.btn.no{color:var(--red);border-color:#f2c4c4}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.ghost{background:transparent;border-color:#ffffff33;color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.muted{color:var(--muted)}
.sub{color:var(--ink2)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.kpi .num{font-size:34px;font-weight:700;line-height:1}
.kpi .lbl{color:var(--ink2);font-size:12.5px;margin-top:4px}
.kpi.alert .num{color:#c27a00}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.p-day{background:var(--amber-soft);color:#9a6300}
.p-night{background:var(--night-soft);color:var(--night)}
.p-need{background:var(--red-soft);color:var(--red)}
.p-full{background:var(--green-soft);color:var(--green)}
.p-pending{background:var(--amber-soft);color:#9a6300}
.p-approved{background:var(--green-soft);color:var(--green)}
.p-rejected{background:var(--red-soft);color:var(--red)}
.p-cancelled{background:#eef0f2;color:var(--muted)}
.p-al{background:var(--blue-soft);color:var(--blue)}
.p-off{background:#eef0f2;color:var(--ink2)}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px}
.day{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.15s}
.day:hover{border-color:#c5ccd4;box-shadow:0 4px 14px #14202b10}
.day.needs{border-left:4px solid var(--red)}
.day.today{outline:2px solid var(--amber);outline-offset:-1px}
.dhead{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--line)}
.dhead .d{font-family:var(--font-head);font-size:21px;font-weight:700}
.shift{padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.shift+.shift{border-top:1px dashed var(--line)}
.shift .top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:11.5px;padding:2px 7px;border-radius:6px;background:#f1f3f5;color:var(--ink2)}
.chip.approved{background:var(--green-soft);color:var(--green)}
.chip.pending{background:var(--amber-soft);color:#9a6300}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.seg{display:inline-flex;background:#e7ebef;border-radius:9px;padding:3px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:7px;font-weight:600;color:var(--ink2)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0001}
label.chk{display:flex;gap:6px;align-items:center;color:var(--ink2)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px}
.hero{background:linear-gradient(120deg,#14202b,#24384a);color:#fff;border-radius:16px;padding:26px 28px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.hero h1{font-size:38px;margin:0;line-height:1}
.hero p{color:#b9c6d2;margin:8px 0 0;max-width:560px}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.login-wrap{max-width:440px;margin:30px auto}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-weight:600;font-size:13px}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);border-color:transparent}
.err{color:var(--red);font-size:13px;min-height:18px}
.hint{background:var(--amber-soft);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#7a5200;margin-top:10px}
.roster{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin-top:10px}
.rc{border-radius:6px;padding:6px 0;text-align:center;font-size:11px;background:#f1f3f5;color:var(--ink2)}
.rc b{display:block;font-size:14px;color:var(--ink)}
.rc.on{background:var(--amber-soft)}
.rc.on.n{background:var(--night-soft)}
.rc.al{background:var(--blue-soft)}
.rc.ot{background:var(--green-soft)}
.opp{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.opp:last-child{border-bottom:0}
.datebox{width:52px;text-align:center;border:1px solid var(--line);border-radius:8px;padding:4px 0;flex:none}
.datebox .m{font-size:10.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.datebox .dd{font-family:var(--font-head);font-size:22px;font-weight:700;line-height:1}
dialog{border:0;border-radius:16px;padding:0;width:min(560px,94vw);box-shadow:0 20px 60px #0004}
dialog::backdrop{background:#14202b88}
.dlg-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.dlg-b{padding:16px 20px;max-height:70vh;overflow:auto}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:10px;font-weight:500;opacity:0;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.empty{padding:24px;text-align:center;color:var(--muted)}
.section-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
@media (max-width:820px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .roster{grid-template-columns:repeat(7,1fr)}
  .bar{flex-wrap:wrap}
  nav{margin-left:0}
}
@media print{
  header,.toolbar,nav,.btn{display:none!important}
  main{max-width:none}
}

/* ------------------------------------------------------------------ v2 */
.me-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:linear-gradient(120deg,#14202b,#24384a);color:#fff;border-color:transparent}
.me-head h2{color:#fff;margin-bottom:2px}
.me-head .sub{color:#b9c6d2}
.me-head .muted{color:#8fa3b5}
.me-head .meter{background:#ffffff26}
.meter{height:8px;border-radius:99px;background:#e7ebef;overflow:hidden}
.meter span{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .3s}
.meter.high span{background:var(--amber)}
.meter.full span{background:var(--red)}
.hours-line{margin:12px 0;padding:10px 12px;background:#f6f8fa;border-radius:8px;font-size:13px;color:var(--ink2)}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px;margin-top:10px}
.checks.inline{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.check{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fafbfc}
.check b{display:block;font-size:12.5px}
.check span{display:block;font-size:11.5px;color:var(--ink2)}
.check.fail{border-color:#f2c4c4;background:var(--red-soft)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;margin-top:4px}
.check.pass .dot{background:var(--green)}
.check.fail .dot{background:var(--red)}
.dot.ok{background:var(--green);margin:0 4px 0 0}
.dot.bad{background:var(--red);margin:0}
.conflict{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--amber-soft);color:#7a5200;font-size:12.5px}
.blocked{margin-top:4px;font-size:12px;color:var(--red)}
.create-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.create-grid .field{margin:0}
.create-grid .grow{grid-column:span 2}
.opp-card{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:#fff}
.opp-card.open{border-color:#c5ccd4;box-shadow:0 6px 18px #14202b0d}
.opp-head{display:flex;gap:14px;align-items:center;padding:12px 14px;cursor:pointer}
.opp-head:hover{background:#fafbfc}
.opp-body{padding:4px 14px 14px;border-top:1px solid var(--line)}
.fillbar{width:88px;height:8px;border-radius:99px;background:#eef0f2;overflow:hidden}
.fillbar span{display:block;height:100%;background:var(--green)}
.row-blocked{background:#fffafa}
.rank{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--navy)}
.center{text-align:center}
.hist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.hist-row{display:grid;grid-template-columns:64px 1fr 32px;gap:10px;align-items:center;font-size:12.5px}
.hist-label{color:var(--ink2)}
.hist-bar{height:16px;border-radius:5px;background:#eef0f2;overflow:hidden}
.hist-bar span{display:block;height:100%;border-radius:5px;background:var(--blue)}
.center-card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px}
.health .num{font-family:var(--font-head);font-size:46px;font-weight:700;line-height:1}
.health .lbl{color:var(--ink2);font-size:12.5px}
.health.good .num{color:var(--green)}
.health.warn .num{color:#c27a00}
.health.bad .num{color:var(--red)}
.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.policy-grid .field{margin:0}
.policy-grid button{grid-column:span 2}
.rules{margin:10px 0 0;padding-left:18px;color:var(--ink2);font-size:13px;line-height:1.7}
.rules b{color:var(--ink)}
@media (max-width:820px){
  .create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .create-grid .grow{grid-column:span 2}
  .policy-grid{grid-template-columns:1fr}
  .policy-grid button{grid-column:span 1}
}

/* --------------------------------------------- governance drill-down + AL filter */
.kpi.clickable{cursor:pointer;position:relative;transition:.15s}
.kpi.clickable:hover{border-color:#c5ccd4;box-shadow:0 4px 14px #14202b0f;transform:translateY(-1px)}
.kpi.clickable:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.drill-hint{position:absolute;top:9px;right:12px;font-size:11px;color:var(--muted);opacity:0;transition:.15s}
.kpi.clickable:hover .drill-hint,.kpi.clickable:focus-visible .drill-hint{opacity:1}
.hist-row.clickable{cursor:pointer;border-radius:6px}
.hist-row.clickable:hover{background:#f6f8fa}
.hist-row.clickable:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:#f6f8fa}
tr.clickable:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.linkish{color:var(--blue);cursor:pointer;border-bottom:1px dotted var(--blue)}
.linkish:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.table-wrap{max-height:60vh;overflow:auto;margin-top:4px}
.table-wrap table{min-width:100%}
.table-wrap th{position:sticky;top:0;background:#fff;z-index:1}
.compact{padding:7px 10px;font-size:13px;width:auto}
select.compact{min-width:132px}
input.compact{min-width:140px}
.al-summary{font-size:12.5px;color:var(--muted);margin:12px 0 6px}

/* ------------------------------------------------------- month schedule (MT) */
.cal{border:1px solid var(--line);border-radius:14px;background:#fbfcfd;padding:10px;margin-top:10px}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 2px 8px}
.cal-head span{padding:2px;text-align:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.cal-head span:first-child{color:#b07a12}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{min-height:86px;padding:7px 8px;border:1px solid #e7ebef;border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:2px;overflow:hidden;box-shadow:0 1px 2px #14202b06}
.cal-cell.blank{background:transparent;border:1px dashed #e9edf2;box-shadow:none}
.cal-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.cal-cell .dnum{font-family:var(--font-head);font-size:17px;font-weight:700;line-height:1;color:var(--ink)}
.cal-cell .tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink2)}
.cal-cell .cal-sub{font-size:10.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-cell .cal-sub.strong{font-weight:600;color:var(--ink)}
.cal-chip{align-self:flex-start;margin-top:auto;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#9a6300;background:var(--amber-soft);border-radius:99px;padding:2px 7px}
.cal-cell.duty{background:linear-gradient(180deg,#fff9ec,#fff3d8);border-color:#f1dcb0}
.cal-cell.night{background:linear-gradient(180deg,#eef2fb,#e4eaf7);border-color:#ccd6ee}
.cal-cell.al{background:linear-gradient(180deg,#eff5ff,#e2ecff);border-color:#c8daf9}
.cal-cell.ot{background:linear-gradient(180deg,#ebf8f1,#dcf2e6);border-color:#bfe4ce}
.cal-cell.off{background:#fff}
.cal-cell.today{box-shadow:0 0 0 2px var(--amber),0 3px 10px #f5a5242e;border-color:transparent}
@media (max-width:820px){
  .cal{padding:6px}
  .cal-head,.cal-grid{gap:4px}
  .cal-cell{min-height:64px;padding:4px 5px}
  .cal-cell .cal-sub{display:none}
  .cal-cell .dnum{font-size:14px}
  .cal-cell .tag{font-size:8.5px}
}

/* schedule header: legend inline with the title + bold month stats */
.schedule-head{align-items:center;flex-wrap:wrap;gap:10px}
.legend-inline{margin:0;gap:6px}
.legend-inline .pill{font-size:11.5px;padding:3px 9px}
.cal-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin:2px 0 12px;padding:10px 14px;background:#f6f8fa;border:1px solid var(--line);border-radius:10px}
.cal-stats span{display:inline-flex;align-items:baseline;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cal-stats span + span{border-left:1px solid #dfe4ea;padding-left:16px}
.cal-stats b{font-family:var(--font-head);font-size:22px;font-weight:700;line-height:1;color:var(--navy)}
.cal-stats .muted{font-size:12.5px;font-weight:500;color:var(--ink2)}
.cal-stats .pending b{color:#9a6300}
.cal-stats .pending{color:#9a6300}
@media (max-width:820px){
  .cal-stats{gap:10px;padding:8px 10px}
  .cal-stats span + span{padding-left:10px}
  .cal-stats b{font-size:18px}
}

/* "was rejected" caption under APPLY AGAIN */
.opp-action{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.prev-status{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:#eef0f2;color:var(--ink2);white-space:nowrap}
.prev-status.rejected{background:var(--red-soft);color:var(--red)}
.prev-status.cancelled,.prev-status.withdrawn{background:#eef0f2;color:var(--muted)}
@media (max-width:820px){
  .opp-action{align-items:flex-start}
}

/* ------------------------------------------------------------ dark mode */
[data-theme="dark"]{
  --ink:#e6edf5; --ink2:#a9b6c4; --muted:#7c8a99; --line:#26313d; --bg:#0d1319; --card:#151d26;
  --navy:#0a0f14; --amber-soft:#3a2e13; --green:#3fbe86; --green-soft:#14301f;
  --red:#f07070; --red-soft:#331a1a; --blue:#7fb0ff; --blue-soft:#16273f;
  --night:#a9b8f0; --night-soft:#1c2540;
}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
[data-theme="dark"] header{background:#070b10}
[data-theme="dark"] .card,[data-theme="dark"] .day,[data-theme="dark"] .opp-card{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .btn{background:#1b2430;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .btn:hover{border-color:#3a4757}
[data-theme="dark"] .btn.ghost{border-color:#ffffff2e}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#0f1720;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#5f6d7b}
[data-theme="dark"] .table-wrap th{background:var(--card)}
[data-theme="dark"] .seg{background:#1b2430}
[data-theme="dark"] .seg button.on{background:#28323f;color:#fff;box-shadow:none}
[data-theme="dark"] .check{background:#121a22;border-color:var(--line)}
[data-theme="dark"] .check.fail{background:#2a1818;border-color:#4a2626}
[data-theme="dark"] .meter{background:#26313d}
[data-theme="dark"] .hours-line{background:#121a22;color:var(--ink2)}
[data-theme="dark"] .hist-bar,[data-theme="dark"] .fillbar{background:#26313d}
[data-theme="dark"] .cal{border-color:var(--line);background:#101821}
[data-theme="dark"] .cal-cell{background:var(--card);border-color:var(--line);box-shadow:none}
[data-theme="dark"] .cal-cell.blank{border-color:#1f2935;background:transparent}
[data-theme="dark"] .cal-cell.duty{background:linear-gradient(180deg,#2b2413,#241f10);border-color:#463a1c}
[data-theme="dark"] .cal-cell.night{background:linear-gradient(180deg,#1b2338,#161d2e);border-color:#2c3752}
[data-theme="dark"] .cal-cell.al{background:linear-gradient(180deg,#16263f,#121f34);border-color:#243a5c}
[data-theme="dark"] .cal-cell.ot{background:linear-gradient(180deg,#142a1f,#10241a);border-color:#1f4433}
[data-theme="dark"] .cal-cell.today{box-shadow:0 0 0 2px var(--amber),0 3px 10px #f5a5242e}
[data-theme="dark"] .cal-stats{background:#121a22;border-color:var(--line)}
[data-theme="dark"] .cal-stats span + span{border-left-color:#26313d}
[data-theme="dark"] .cal-stats b{color:#dbe6f2}
[data-theme="dark"] .chip{background:#222c37;color:var(--ink2)}
[data-theme="dark"] .chip.approved{background:var(--green-soft);color:var(--green)}
[data-theme="dark"] .chip.pending{background:var(--amber-soft);color:#e8b45c}
[data-theme="dark"] .p-off{background:#222c37;color:#b9c5d1}
[data-theme="dark"] .p-cancelled{background:#222c37;color:var(--muted)}
[data-theme="dark"] .p-day{background:#3a2e13;color:#e8b45c}
[data-theme="dark"] .p-night{background:#1c2540;color:#a9b8f0}
[data-theme="dark"] .p-need{background:#331a1a;color:#f07070}
[data-theme="dark"] .p-full,[data-theme="dark"] .p-approved{background:#14301f;color:#5fd39c}
[data-theme="dark"] .p-pending{background:#3a2e13;color:#e8b45c}
[data-theme="dark"] .p-rejected{background:#331a1a;color:#f07070}
[data-theme="dark"] .p-al{background:#16273f;color:#7fb0ff}
[data-theme="dark"] .hint{background:#33290f;color:#e8c07a}
[data-theme="dark"] .me-head{background:linear-gradient(120deg,#0b1117,#16212c);border-color:#1d2733}
[data-theme="dark"] .rc{background:#1b2430;color:var(--ink2)}
[data-theme="dark"] .rc.on{background:#3a2e13}
[data-theme="dark"] .rc.on.n{background:#1c2540}
[data-theme="dark"] .rc.al{background:#16273f}
[data-theme="dark"] .rc.ot{background:#14301f}
[data-theme="dark"] .row-blocked{background:#221a1a}
[data-theme="dark"] .blocked{color:#f07070}
[data-theme="dark"] .conflict{background:#33290f;color:#e8c07a}
[data-theme="dark"] dialog{background:var(--card);color:var(--ink)}
[data-theme="dark"] .toast{background:#05080b}
[data-theme="dark"] .opp-head:hover{background:#1a232e}
[data-theme="dark"] .empty{color:var(--muted)}
[data-theme="dark"] .legend-inline .pill{filter:none}

/* header tools: theme + language */
.nav-tools{display:inline-flex;align-items:center;gap:6px;margin-left:4px}
.icon-btn{width:34px;padding:5px 0;text-align:center;font-size:14px;line-height:1}
@media (max-width:820px){
  .nav-tools{margin-left:0}
  .who{width:100%}
}

/* public holidays on the month calendar */
.cal-cell.holiday{border-color:#e9b949;box-shadow:inset 0 0 0 1px #f5c65c}
.cal-holiday{display:inline-flex;align-items:center;gap:3px;max-width:100%;font-size:9.5px;font-weight:700;
  color:#8a5a00;background:#fff2d1;border-radius:99px;padding:1px 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-holidays{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cal-holiday-pill{font-size:11.5px;background:#fff7e6;border:1px solid #f0d9a8;color:#8a5a00;
  border-radius:99px;padding:3px 9px}
[data-theme="dark"] .cal-cell.holiday{border-color:#6b5420;box-shadow:none}
[data-theme="dark"] .cal-holiday{background:#3a2e13;color:#e8c07a}
[data-theme="dark"] .cal-holidays .cal-holiday-pill{background:#2a2211;border-color:#4a3a18;color:#e8c07a}
@media (max-width:820px){ .cal-holiday{font-size:8.5px;padding:1px 4px} }

/* public-holiday rate pill + optional holiday artwork */
.p-ph{background:#fff1cc;color:#8a5a00}
[data-theme="dark"] .p-ph{background:#3a2e13;color:#e8c07a}


/* in-app notifications */
.bell{position:relative;padding:5px 8px;font-size:14px;line-height:1}
.bell .badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.notif-list{display:flex;flex-direction:column;gap:6px}
.notif{padding:9px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#fbfcfd}
.notif:hover{border-color:#c5ccd4}
.notif.unread{border-left:3px solid var(--amber);background:#fffaf0}
.notif-title{font-weight:600;font-size:13px}
[data-theme="dark"] .notif{background:#121a22;border-color:var(--line)}
[data-theme="dark"] .notif.unread{background:#241f10;border-left-color:var(--amber)}

/* dark-mode logo contrast */
[data-theme="dark"] .brand .logo{background:var(--amber);color:#0a0f14;box-shadow:0 0 0 1px #ffffff14}
[data-theme="dark"] .brand{color:#f2f7fc}

/* "My OT requests" as wrapped rows instead of a cramped table */
.req-list{display:flex;flex-direction:column;gap:8px}
.req{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.req .grow{min-width:0}
.req .req-reason{display:inline;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.req .row{row-gap:4px}
.req-action{flex:none;display:flex;align-items:center}
[data-theme="dark"] .req{background:var(--card);border-color:var(--line)}
@media (max-width:820px){
  .req{flex-wrap:wrap}
  .req-action{width:100%;justify-content:flex-end}
}


/* readable "Total OT in Month per Employee" list */
.otlist{display:flex;flex-direction:column;gap:7px}
.otrow{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr 58px 58px;gap:10px;align-items:center;font-size:12.5px}
.otname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.otbar{height:10px;border-radius:99px;background:#eef0f2;overflow:hidden}
.otbar span{display:block;height:100%;background:var(--blue);border-radius:99px}
.otrow b{text-align:right}
[data-theme="dark"] .otbar{background:#26313d}
@media (max-width:820px){ .otrow{grid-template-columns:1fr 40px;row-gap:2px} .otbar{display:none} }


/* OT opportunities: centred, bold section title with a count chip */
.opps-head{justify-content:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.opps-title{font-size:22px;font-weight:700;letter-spacing:.4px;margin:0;text-transform:uppercase}
.opps-head .pill{font-size:12px;font-weight:700}


/* clickable OT-by-day chart */
.chart{display:flex;align-items:flex-end;gap:6px;min-height:150px;padding-top:8px;overflow-x:auto}
.chart-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
  border:0;background:transparent;cursor:pointer;padding:0 2px;min-width:26px}
.chart-bar{width:18px;border-radius:5px 5px 2px 2px;background:var(--blue);transition:.15s}
.chart-col:hover .chart-bar{background:var(--amber)}
.chart-col:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
.chart-x{font-size:10.5px;color:var(--muted)}
.chart-value{font-size:10px;color:var(--ink2)}
[data-theme="dark"] .chart-bar{background:#4f8fe8}


/* chart title in capitals + inline legend */
.chart-title{text-transform:uppercase}
.chart-legend{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink2);flex-wrap:wrap}
.chart-key{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--blue);margin-right:2px}
[data-theme="dark"] .chart-key{background:#4f8fe8}


/* all card titles in capitals, bigger legend, clearer chart numbers */
.card h3,
.section-h h3,
.dlg-h h3{text-transform:uppercase;letter-spacing:.35px}
.chart-legend{font-size:13px;gap:6px}
.chart-value{font-size:11px;font-weight:700;color:var(--ink)}
.chart-x{font-size:11px}
.chart-col{min-width:30px}


/* zero-aware signal chips above the chart */
.signal-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.signal{font-size:11.5px;color:var(--ink2);background:#f1f3f5;border:1px solid transparent;
  border-radius:99px;padding:3px 9px;cursor:pointer;white-space:nowrap}
.signal b{color:var(--ink);font-weight:700;margin-right:2px}
.signal.zero{opacity:.5}
.signal:hover{border-color:#c5ccd4}
.signal:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
[data-theme="dark"] .signal{background:#222c37;color:var(--ink2)}
[data-theme="dark"] .signal b{color:var(--ink)}


/* shaded KPI tiles (governance + cockpit) */
.kpi.tone-blue{background:linear-gradient(180deg,#f7faff,#edf3fe);border-color:#dbe6f7;border-left:4px solid #2f6fd6}
.kpi.tone-green{background:linear-gradient(180deg,#f5fcf8,#e8f7ee);border-color:#cfe9d8;border-left:4px solid #1f9d63}
.kpi.tone-amber{background:linear-gradient(180deg,#fffaf0,#fff2d6);border-color:#f1dcb0;border-left:4px solid #f5a524}
.kpi.tone-red{background:linear-gradient(180deg,#fff7f7,#fde9e9);border-color:#f3c9c9;border-left:4px solid #d64545}
.kpi.tone-blue .num{color:#1f4fa8}
.kpi.tone-green .num{color:#17804f}
.kpi.tone-amber .num{color:#9a6300}
.kpi.tone-red .num{color:#b32f2f}
.kpi.tone-blue .lbl,.kpi.tone-green .lbl,.kpi.tone-amber .lbl,.kpi.tone-red .lbl{color:var(--ink2)}
[data-theme="dark"] .kpi.tone-blue{background:linear-gradient(180deg,#141f30,#111a28);border-color:#243247}
[data-theme="dark"] .kpi.tone-green{background:linear-gradient(180deg,#12241a,#0f1e16);border-color:#1e3a2a}
[data-theme="dark"] .kpi.tone-amber{background:linear-gradient(180deg,#2a2211,#241d0f);border-color:#463a1c}
[data-theme="dark"] .kpi.tone-red{background:linear-gradient(180deg,#2a1616,#231212);border-color:#4a2424}
[data-theme="dark"] .kpi.tone-blue .num{color:#8fb6ff}
[data-theme="dark"] .kpi.tone-green .num{color:#5fd39c}
[data-theme="dark"] .kpi.tone-amber .num{color:#e8b45c}
[data-theme="dark"] .kpi.tone-red .num{color:#f07070}


/* clickable rows in governance lists/tables */
.otrow.clickable{cursor:pointer;border-radius:8px;padding:4px 6px;margin:-4px -6px;transition:.12s}
.otrow.clickable:hover{background:#f6f8fa}
.otrow.clickable:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
tr.clickable td{transition:.12s}
[data-theme="dark"] .otrow.clickable:hover{background:#1a232e}


/* unified page header: shaded panel, capped title, actions on the right */
.page-head{background:linear-gradient(135deg,#f7f9fc,#eef2f7);border:1px solid var(--line);
  border-radius:14px;padding:16px 20px;margin-bottom:16px;box-shadow:0 1px 2px #14202b08}
.page-head h2{text-transform:uppercase;letter-spacing:.5px;margin:0;font-size:24px;line-height:1.1}
.page-head .sub{color:var(--ink2);font-size:13px;margin-top:5px}
.page-head .row{gap:8px}
[data-theme="dark"] .page-head{background:linear-gradient(135deg,#161f29,#121a23);border-color:var(--line);box-shadow:none}
[data-theme="dark"] .page-head h2{color:#eaf1f8}
@media (max-width:820px){ .page-head{padding:14px 16px} .page-head h2{font-size:20px} }


/* team summary: centred stat tiles + tidy rows */
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:4px 0 14px}
.mini{border-radius:12px;padding:14px 8px 10px;text-align:center;border:1px solid var(--line);
  background:linear-gradient(180deg,#f8fafc,#eef2f7)}
.mini b{display:block;font-family:var(--font-head);font-size:30px;line-height:1;color:var(--ink)}
.mini span{display:block;margin-top:5px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2)}
.mini.blue{background:linear-gradient(180deg,#f7faff,#ebf2fe);border-color:#dbe6f7}
.mini.green{background:linear-gradient(180deg,#f6fcf8,#e8f7ee);border-color:#cfe9d8}
.mini.amber{background:linear-gradient(180deg,#fffaf0,#fff2d6);border-color:#f1dcb0}
.mini-rows{display:flex;flex-direction:column;gap:9px}
.mini-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.mini-rows > div:last-child{border-bottom:0;padding-bottom:0}
.mini-rows span{color:var(--muted)}
.mini-rows b{text-align:right;color:var(--ink);font-weight:600}
[data-theme="dark"] .mini{background:linear-gradient(180deg,#161f29,#121a23);border-color:var(--line)}
[data-theme="dark"] .mini.blue{background:linear-gradient(180deg,#141f30,#111a28);border-color:#243247}
[data-theme="dark"] .mini.green{background:linear-gradient(180deg,#12241a,#0f1e16);border-color:#1e3a2a}
[data-theme="dark"] .mini.amber{background:linear-gradient(180deg,#2a2211,#241d0f);border-color:#463a1c}
@media (max-width:820px){ .mini b{font-size:24px} }


/* clickable summary tiles */
.mini.clickable{cursor:pointer;transition:.14s}
.mini.clickable:hover{transform:translateY(-1px);box-shadow:0 4px 14px #14202b12;border-color:#c5ccd4}
.mini.clickable:focus-visible{outline:2px solid var(--amber);outline-offset:2px}


/* custom logo: drop a square image at static/img/logo.png and it replaces
   the letter tile automatically (falls back to the letter when absent) */
body.has-logo .brand .logo{
  width:213px;height:97px;
  border-radius:0;
  background-image:url("/static/img/logo-tight.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;
  box-shadow:none;
  padding:0;
  color:transparent;
  font-size:0;
}
body.has-logo .brand > div{display:none}
@media (max-width:820px){
  body.has-logo .brand .logo{width:157px;height:71px}
}
body.has-logo .brand > div{display:none}


/* header breathing room so nav items sit nicely with the bigger logo */
header .bar{flex-wrap:wrap;row-gap:8px;column-gap:14px;padding:8px 20px}
nav{flex-wrap:wrap;gap:4px}
nav a{padding:7px 11px;font-size:13.5px}
.who{flex-wrap:wrap;gap:6px;font-size:12.5px}
.who .btn{padding:4px 9px;font-size:12px}
.bell{padding:4px 8px}
@media (max-width:1100px){
  body.has-logo .brand .logo{width:157px;height:71px}
}



/* login background: MEMS OASIS caution tape */
.login-bg{position:fixed;inset:-35% -25%;z-index:0;pointer-events:none;user-select:none;
  display:flex;flex-direction:column;justify-content:center;gap:26px;
  transform:rotate(-19deg);overflow:hidden}
.login-bg .tape{white-space:nowrap;font-family:var(--font-head);font-weight:700;
  font-size:40px;letter-spacing:.28em;text-transform:uppercase;
  background:#2f6fd6;color:#ffffff;padding:9px 0;opacity:.15;
  box-shadow:0 0 0 2px #1f4fa8 inset}
.login-bg .tape.alt{background:#e4e9ef;color:#1f4fa8;opacity:.55;box-shadow:none}
.login-wrap{position:relative;z-index:1}
[data-theme="dark"] .login-bg .tape{opacity:.13}
[data-theme="dark"] .login-bg .tape.alt{opacity:.08}
@media (max-width:820px){ .login-bg .tape{font-size:26px;padding:6px 0} }


/* transparent header: only the tabs carry a background */
header{background:transparent;backdrop-filter:none;border-bottom:0}
header .bar{padding-top:10px;padding-bottom:10px}
header .brand{color:#fff;filter:drop-shadow(0 1px 3px #0006)}
nav{gap:6px}
nav a{background:rgba(20,32,43,.82);color:#fff;border-radius:999px;padding:7px 14px;
  backdrop-filter:blur(6px);box-shadow:0 1px 4px #0002}
nav a:hover{background:rgba(20,32,43,.95);color:#fff}
nav a.active{background:var(--amber);color:#14202b;font-weight:700}
.who{background:rgba(20,32,43,.82);color:#fff;border-radius:999px;padding:4px 10px;
  backdrop-filter:blur(6px);box-shadow:0 1px 4px #0002}
.nav-tools{gap:6px}
header .btn.ghost{border-color:#ffffff45;color:#fff;background:rgba(20,32,43,.82);backdrop-filter:blur(6px)}
header .btn.ghost:hover{border-color:#ffffff88;background:rgba(20,32,43,.95)}
[data-theme="dark"] header{background:transparent}
[data-theme="dark"] nav a,[data-theme="dark"] .who,[data-theme="dark"] header .btn.ghost{background:rgba(255,255,255,.10);box-shadow:none}
[data-theme="dark"] nav a:hover{background:rgba(255,255,255,.18)}
[data-theme="dark"] nav a.active{background:var(--amber);color:#14202b;font-weight:700}
.bell .badge{background:var(--red)}
[data-theme="dark"] header{background:transparent;border-bottom:0}
[data-theme="dark"] header .brand{color:#eaf1f8}
[data-theme="dark"] nav a{color:#9fb0c0}
[data-theme="dark"] nav a.active,[data-theme="dark"] nav a:hover{background:#ffffff14;color:#fff}
[data-theme="dark"] .who{color:#a9b6c4}
[data-theme="dark"] header .btn.ghost{border-color:#ffffff2e;color:#dbe6f2}


/* nav tools match the tab pills exactly */
.nav-tools{align-items:center}
.nav-tools .btn{height:36px;min-width:44px;padding:0 12px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13.5px}
.nav-tools .icon-btn{width:44px;padding:0;font-size:15px}


/* login card: centred, white-blue-silver, raised button */
.login-wrap{max-width:470px;margin:44px auto;text-align:center}
.login-wrap .card{
  background:linear-gradient(155deg,#ffffff 0%,#f5f8fd 38%,#e7edf7 62%,#fdfeff 100%);
  border:1px solid #dde4ee;
  border-radius:18px;
  box-shadow:0 16px 44px #14202b1f, inset 0 1px 0 #ffffff;
}
.login-wrap h2{text-transform:uppercase;letter-spacing:3px;font-size:27px;margin-bottom:6px}
.login-wrap .sub{text-transform:uppercase;letter-spacing:.9px;font-size:11px;color:#6b7d92;margin-bottom:18px}
.login-wrap .field label{text-transform:uppercase;letter-spacing:1px;font-size:10.5px;color:#5c6f85;text-align:center}
.login-wrap input{
  text-align:center;letter-spacing:.5px;
  background:linear-gradient(180deg,#ffffff,#f4f7fc);
  border-color:#d7e0ec;
  box-shadow:inset 0 1px 2px #14202b0a;
}
.login-wrap input:focus{background:#fff}
.login-wrap form .btn.primary{
  background:linear-gradient(180deg,#3d7fdd 0%,#2a63bd 55%,#2156a8 100%);
  color:#fff;border:1px solid #1c4a92;border-radius:11px;
  text-transform:uppercase;letter-spacing:1.4px;font-weight:700;font-size:13px;
  padding:13px 16px;width:100%;cursor:pointer;transition:transform .1s, box-shadow .1s, filter .15s;
  box-shadow:0 5px 0 #17417e, 0 10px 22px #1f4fa838, inset 0 1px 0 #ffffff45;
}
.login-wrap form .btn.primary:hover{filter:brightness(1.06)}
.login-wrap form .btn.primary:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #17417e, 0 4px 10px #1f4fa826, inset 0 1px 0 #ffffff30;
}
.login-wrap .hint{
  text-transform:uppercase;letter-spacing:.35px;font-size:10px;line-height:1.6;
  background:linear-gradient(180deg,#f3f7fd,#e8eef9);
  border:1px solid #dbe4f2;color:#33507a;
}
.login-wrap .err{text-align:center}
[data-theme="dark"] .login-wrap .card{
  background:linear-gradient(155deg,#182230 0%,#141c26 55%,#101821 100%);
  border-color:#26313d;
}
[data-theme="dark"] .login-wrap input{background:linear-gradient(180deg,#0f1720,#121b25)}
[data-theme="dark"] .login-wrap .hint{background:#182436;border-color:#26313d;color:#9fb6d4}


/* tape: MEMS OASIS with its meaning underneath, small but legible */
.tape{display:flex;align-items:center;gap:22px}
.tape-unit{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.tape-unit b{font-size:40px;letter-spacing:.26em;font-weight:700}
.tape-unit i{font-style:normal;font-size:11.5px;letter-spacing:.16em;margin-top:3px;opacity:.9;text-transform:none}
.tape-dot{font-size:26px;opacity:.6}
.login-bg .tape{opacity:.20}
.login-bg .tape.alt{opacity:.62}
@media (max-width:820px){
  .tape-unit b{font-size:24px}
  .tape-unit i{font-size:8px;letter-spacing:.1em}
}


/* ---- login: blue focus instead of amber, blue hint accent ---- */
.login-wrap input:focus,
.login-wrap select:focus,
.login-wrap button:focus-visible{outline:2px solid #2f6fd6;outline-offset:1px;border-color:transparent}
.login-wrap .hint{border-left:3px solid #2f6fd6;border-radius:8px;text-align:left}
.login-wrap .card .hint{box-shadow:none}

/* ---- language toggle: clearer, a touch more weight ---- */
#langBtn{font-weight:700;letter-spacing:.6px;font-size:12.5px}

/* ---- dark mode: deep navy instead of black ---- */
[data-theme="dark"]{
  --bg:#0c131c; --card:#141e2a; --line:#25313f; --ink:#e3ebf4; --ink2:#a6b4c3; --muted:#76869a;
  --navy:#080d13;
}
[data-theme="dark"] .login-wrap .card{
  background:linear-gradient(155deg,#1a2534 0%,#151f2b 55%,#111a24 100%);
  border-color:#26313f;
}


/* ---- final overrides: glass pills in both modes + raised blue login button ---- */
nav a{
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(20,32,43,.10);
  color:#233241 !important;
  backdrop-filter:blur(10px);
  box-shadow:0 1px 3px #14202b14;
  border-radius:999px;
}
nav a:hover{background:rgba(255,255,255,.85) !important;color:#14202b !important}
nav a.active{background:var(--amber) !important;color:#14202b !important;border-color:transparent}
.who{background:rgba(255,255,255,.62);border:1px solid rgba(20,32,43,.10);color:#233241;
  backdrop-filter:blur(10px);border-radius:999px}
header .btn.ghost{background:rgba(255,255,255,.62);border-color:rgba(20,32,43,.12);color:#233241;
  backdrop-filter:blur(10px)}
header .btn.ghost:hover{background:rgba(255,255,255,.88);border-color:rgba(20,32,43,.2)}

[data-theme="dark"] nav a,
[data-theme="dark"] .who,
[data-theme="dark"] header .btn.ghost{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#dbe6f2 !important;
}
[data-theme="dark"] nav a:hover{background:rgba(255,255,255,.18) !important}
[data-theme="dark"] nav a.active{background:var(--amber) !important;color:#14202b !important;border-color:transparent !important}

.login-wrap form .btn.primary{
  background:linear-gradient(180deg,#3d7fdd 0%,#2a63bd 55%,#2156a8 100%) !important;
  color:#fff !important;
  border:1px solid #1c4a92 !important;
  border-radius:11px !important;
  text-transform:uppercase;letter-spacing:1.4px;font-weight:700;font-size:13px;
  padding:13px 16px !important;width:100%;
  box-shadow:0 5px 0 #17417e, 0 10px 22px #1f4fa838, inset 0 1px 0 #ffffff45 !important;
  transition:transform .1s, box-shadow .1s, filter .15s;
}
.login-wrap form .btn.primary:hover{filter:brightness(1.06)}
.login-wrap form .btn.primary:active{transform:translateY(4px);
  box-shadow:0 1px 0 #17417e, 0 4px 10px #1f4fa826, inset 0 1px 0 #ffffff30 !important}


/* supervisor roll-up: wider row, wrappable name, detail list */
.otrow.wide{grid-template-columns:minmax(220px,1.5fr) 2fr 84px 76px}
.otrow.wide .otname{white-space:normal;line-height:1.3}
.otrow.wide .otname .muted{display:block;font-weight:400;font-size:11.5px;margin-top:2px}
.svteam{display:grid;gap:10px;max-height:56vh;overflow:auto;padding-right:2px}
.svperson{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.svhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.svot{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.svot .chip{font-size:11.5px}
@media (max-width:820px){
  .otrow.wide{grid-template-columns:1fr auto}
  .otrow.wide .otbar{display:none}
  .otrow.wide .otname .muted{display:inline}
}

/* one-card grid (management hides the AL plan) */
.grid2.single{grid-template-columns:1fr}
/* MT records scrolls inside its card, header stays put */
.card .table-wrap{max-height:58vh;border-top:1px solid var(--line);margin-top:10px}
.table-wrap{scrollbar-width:thin}

/* four compact tiles when the summary card is full width */
.mini-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){ .mini-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* governance: the per-employee OT list scrolls instead of growing the page */
.otlist.scroll{max-height:340px;overflow:auto;padding-right:6px}
.otlist.scroll .otrow{padding-right:2px}

/* wide drill-down dialogs and one-line records */
dialog.wide{width:min(1080px,96vw)}
.table-wrap.drill th,.table-wrap.drill td{white-space:nowrap}
.table-wrap.drill th{font-size:10.5px}
.table-wrap.drill td{font-size:12.5px;padding:9px 10px}
.table-wrap.drill tr:hover td{background:#f7f9fc}
[data-theme="dark"] .table-wrap.drill tr:hover td{background:#1a232e}

dialog.mid{width:min(760px,96vw)}


/* ---- OT bars: glossy blue capsule instead of a flat block ---- */
.otbar{
  height:12px;border-radius:99px;
  background:linear-gradient(180deg,#e7edf6,#eef2f7);
  box-shadow:inset 0 1px 2px #14202b12, inset 0 -1px 0 #ffffff;
  overflow:hidden;
}
.otbar span{
  position:relative;display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#1f5bb5 0%,#2f7ada 48%,#5db0f2 100%);
  box-shadow:0 1px 4px #2f6fd64d, inset 0 0 0 1px #ffffff2e;
  transform-origin:left center;
  animation:otbar-grow .6s cubic-bezier(.2,.85,.25,1) both;
}
.otbar span::after{
  content:"";position:absolute;left:6px;right:6px;top:1px;height:45%;
  border-radius:99px;
  background:linear-gradient(180deg,#ffffff66,#ffffff0a);
  pointer-events:none;
}
@keyframes otbar-grow{
  from{transform:scaleX(.04);opacity:.55}
  to{transform:scaleX(1);opacity:1}
}
.otrow.clickable:hover .otbar span{filter:brightness(1.07) saturate(1.05)}
.otrow.clickable:hover .otbar{box-shadow:inset 0 1px 2px #14202b12, inset 0 -1px 0 #ffffff, 0 0 0 2px #2f6fd61a}

[data-theme="dark"] .otbar{
  background:linear-gradient(180deg,#151e28,#18222d);
  box-shadow:inset 0 1px 3px #00000055, inset 0 -1px 0 #ffffff0a;
}
[data-theme="dark"] .otbar span{
  background:linear-gradient(90deg,#2464c4 0%,#3d8ae8 50%,#74c2ff 100%);
  box-shadow:0 1px 6px #3d8ae855, inset 0 0 0 1px #ffffff22;
}
@media (prefers-reduced-motion:reduce){
  .otbar span{animation:none}
}


/* ---- OT hours by day: glossy capsules to match the OT bars ---- */
.chart-bar{
  width:20px;border-radius:6px 6px 3px 3px;position:relative;
  background:linear-gradient(180deg,#63b6f6 0%,#2f7ada 52%,#1d55ad 100%);
  box-shadow:0 2px 7px #2f6fd640, inset 0 0 0 1px #ffffff26;
  transform-origin:bottom center;
  animation:chart-grow .6s cubic-bezier(.2,.85,.25,1) both;
}
.chart-bar::after{
  content:"";position:absolute;left:2px;right:2px;top:2px;height:36%;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#ffffff66,#ffffff00);
  pointer-events:none;
}
@keyframes chart-grow{
  from{transform:scaleY(.05);opacity:.55}
  to{transform:scaleY(1);opacity:1}
}
.chart-col:hover .chart-bar{
  background:linear-gradient(180deg,#7cc6ff 0%,#3d8ae8 52%,#2464c4 100%);
  filter:saturate(1.05);
  box-shadow:0 4px 14px #2f6fd666, inset 0 0 0 1px #ffffff33;
}
.chart-col:hover .chart-value{color:var(--blue)}
.chart-key{
  width:12px;height:12px;border-radius:4px;
  background:linear-gradient(135deg,#63b6f6,#1d55ad);
  box-shadow:inset 0 0 0 1px #ffffff40;
}

[data-theme="dark"] .chart-bar{
  background:linear-gradient(180deg,#8ed3ff 0%,#3d8ae8 52%,#1f5bb5 100%);
  box-shadow:0 2px 9px #3d8ae855, inset 0 0 0 1px #ffffff22;
}
[data-theme="dark"] .chart-col:hover .chart-bar{
  background:linear-gradient(180deg,#a6deff 0%,#4f9bf0 52%,#2464c4 100%);
  box-shadow:0 4px 16px #5db0f277, inset 0 0 0 1px #ffffff33;
}
[data-theme="dark"] .chart-key{background:linear-gradient(135deg,#a6deff,#1f5bb5)}
@media (prefers-reduced-motion:reduce){
  .chart-bar{animation:none}
}


/* ---- create manpower need: interactive form ---- */
.need-form{display:flex;flex-direction:column;gap:14px}
.need-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:start}
.need-row .grow{grid-column:span 2}
@media (max-width:820px){ .need-row .grow{grid-column:auto} }
.chip-picks{display:flex;flex-wrap:wrap;gap:6px;min-height:36px;align-items:center}
.chip-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;
  font-size:12px;cursor:pointer;color:var(--ink2);transition:.14s;line-height:1.1}
.chip-btn:hover{border-color:#b9c6d6;color:var(--ink);transform:translateY(-1px)}
.chip-btn.active{background:linear-gradient(180deg,#3d7fdd,#2a63bd);border-color:#1c4a92;color:#fff;
  font-weight:600;box-shadow:0 2px 8px #2f6fd633}
.quick-row{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.seg{display:flex;gap:8px}
.seg-btn{flex:1;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f6f8fc);
  border-radius:10px;padding:9px 11px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:2px;transition:.14s;color:var(--ink2)}
.seg-btn b{font-size:12px;letter-spacing:.7px;color:var(--ink)}
.seg-btn span{font-size:11px;color:var(--muted)}
.seg-btn:hover{border-color:#b9c6d6}
.seg-btn.active{border-color:var(--blue);background:linear-gradient(180deg,#eef5ff,#dfeafc);
  box-shadow:0 2px 10px #2f6fd626}
.seg-btn.active b{color:#1d55ad}
.seg.small .seg-btn{padding:8px 10px;text-align:center}
.stepper{display:flex;align-items:center;gap:6px}
.stepper input{text-align:center;max-width:78px}
.step-btn{width:36px;height:38px;border-radius:9px;border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f1f4f9);font-size:17px;font-weight:700;cursor:pointer;
  color:var(--ink2);transition:.12s}
.step-btn:hover{border-color:#b9c6d6;color:var(--ink)}
.step-btn:active{transform:translateY(1px)}
.hint-line{font-size:11px;color:var(--muted);margin-top:5px}
.need-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px dashed var(--line);padding-top:13px}
.need-preview{font-size:12.5px;color:var(--ink2)}
.need-preview b{color:var(--ink);font-weight:700}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

[data-theme="dark"] .chip-btn{background:#18222d;border-color:#26313d;color:#cfdae6}
[data-theme="dark"] .chip-btn:hover{border-color:#3b4a5a;color:#eaf1f8}
[data-theme="dark"] .chip-btn.active{background:linear-gradient(180deg,#2f6fd6,#2156a8);border-color:#1c4a92;color:#fff}
[data-theme="dark"] .seg-btn{background:linear-gradient(180deg,#18222d,#141d27);border-color:#26313d}
[data-theme="dark"] .seg-btn b{color:#e3ebf4}
[data-theme="dark"] .seg-btn.active{background:linear-gradient(180deg,#172a44,#132133);border-color:#2f6fd6}
[data-theme="dark"] .seg-btn.active b{color:#8ec5ff}
[data-theme="dark"] .step-btn{background:linear-gradient(180deg,#18222d,#141d27);border-color:#26313d;color:#cfdae6}


/* ---- green capsule bars: same gloss as the blue OT bars ---- */
.fillbar{
  width:96px;height:12px;border-radius:99px;
  background:linear-gradient(180deg,#e6efe9,#edf2f7);
  box-shadow:inset 0 1px 2px #14202b12, inset 0 -1px 0 #ffffff;
  overflow:hidden;
}
.fillbar span{
  position:relative;display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#0f7a4c 0%,#1f9d63 52%,#4fd39a 100%);
  box-shadow:0 1px 4px #1f9d6347, inset 0 0 0 1px #ffffff2e;
  transform-origin:left center;
  animation:otbar-grow .6s cubic-bezier(.2,.85,.25,1) both;
}
.fillbar span::after,
.meter span::after{
  content:"";position:absolute;left:6px;right:6px;top:1px;height:45%;
  border-radius:99px;
  background:linear-gradient(180deg,#ffffff66,#ffffff0a);
  pointer-events:none;
}

/* the employee week meter uses the same treatment */
.meter{height:10px;background:linear-gradient(180deg,#e6ebf0,#eef2f7);
  box-shadow:inset 0 1px 2px #14202b12}
.meter span{
  position:relative;
  background:linear-gradient(90deg,#0f7a4c 0%,#1f9d63 52%,#4fd39a 100%);
  box-shadow:0 1px 4px #1f9d6340, inset 0 0 0 1px #ffffff2e;
}
.meter.high span{background:linear-gradient(90deg,#b9770e 0%,#f5a524 52%,#ffcf6b 100%);
  box-shadow:0 1px 4px #f5a52440, inset 0 0 0 1px #ffffff2e}
.meter.full span{background:linear-gradient(90deg,#a72a2a 0%,#e05252 52%,#ff8a8a 100%);
  box-shadow:0 1px 4px #e0525240, inset 0 0 0 1px #ffffff2e}

[data-theme="dark"] .fillbar{
  background:linear-gradient(180deg,#151e28,#18222d);
  box-shadow:inset 0 1px 3px #00000055, inset 0 -1px 0 #ffffff0a;
}
[data-theme="dark"] .fillbar span,
[data-theme="dark"] .meter span{
  background:linear-gradient(90deg,#12885a 0%,#2bb377 52%,#63e0ab 100%);
  box-shadow:0 1px 6px #2bb37755, inset 0 0 0 1px #ffffff22;
}
[data-theme="dark"] .meter.high span{background:linear-gradient(90deg,#b9770e,#f5a524 52%,#ffd27a)}
[data-theme="dark"] .meter.full span{background:linear-gradient(90deg,#a72a2a,#e05252 52%,#ff9a9a)}
[data-theme="dark"] .meter{background:linear-gradient(180deg,#0f1720,#131c26)}
[data-theme="dark"] .me-head .meter{background:#ffffff1f}


/* ---- shared tiles: work centre, date, shift, demand ---- */
.tile-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.tile-row.tight{gap:6px;margin-top:7px}
.tile{
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,#fff,#f6f8fc);
  padding:10px 10px;min-height:54px;cursor:pointer;color:var(--ink2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-align:center;transition:transform .14s, border-color .14s, box-shadow .14s, background .14s;
}
.tile b{font-size:11.5px;letter-spacing:.6px;color:var(--ink);line-height:1.25;
  text-wrap:balance;overflow-wrap:anywhere}
.tile span{font-size:10.5px;color:var(--muted);line-height:1.25;text-wrap:balance}
.tile:hover{border-color:#b9c6d6;transform:translateY(-1px)}
.tile:active{transform:translateY(0)}
.tile.active{border-color:var(--blue);background:linear-gradient(180deg,#eef5ff,#e2ecfb);
  box-shadow:0 2px 10px #2f6fd626}
.tile.active b{color:#1d55ad}
.tile.sm{min-height:46px;padding:7px 8px}
.tile.sm b{font-size:10.5px}
.tile.sm span{font-size:10px}

[data-theme="dark"] .tile{background:linear-gradient(180deg,#18222d,#141d27);border-color:#26313d}
[data-theme="dark"] .tile b{color:#e3ebf4}
[data-theme="dark"] .tile:hover{border-color:#3b4a5a}
[data-theme="dark"] .tile.active{background:linear-gradient(180deg,#172a44,#132133);border-color:#2f6fd6}
[data-theme="dark"] .tile.active b{color:#8ec5ff}