/* Fealuma WFM - base styles derived from the live demo (built by _build_ui.py) */
:root{
  --bg:#F4F8FC; --panel:#ffffff; --ink:#0e1b25; --mut:#8593ab; --line:#dbe3ef;
  --blue:#2563eb; --green:#16a34a; --red:#dc2626; --amber:#d97706; --orange:#d97706; --purple:#7c3aed;
  --soft:#eef4ff; --softline:#cfe0ff;
  --pm-acc:#2563eb; --pm-acc2:#60a5fa; --pm-line:rgba(11,18,32,.11); --pm-line2:rgba(11,18,32,.055);
  --pm-text:#0e1b25; --pm-muted:#8593ab; --pm-danger:#dc2626; --pm-crit:#d97706;
  --pm-panel:#fff; --pm-soft:#eef4ff; --pm-sel:rgba(37,99,235,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Heebo',-apple-system,'Arial Hebrew',Segoe UI,sans-serif;color:var(--ink);
 background:radial-gradient(1200px 700px at 80% -10%,#e6eef9,transparent 60%),var(--bg);}
.en{direction:ltr;unicode-bidi:isolate}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hide{display:none!important}

/* ===== top app bar ===== */
.appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;height:60px;
 padding:0 22px;background:linear-gradient(180deg,#f7faff,#eef3fb);border-bottom:1px solid var(--pm-line)}
.dots{display:flex;gap:8px} .dots i{width:12px;height:12px;border-radius:50%;display:block}
.brand{font-weight:800;font-size:20px;direction:ltr} .brand b{color:var(--blue)}
.soon{font-size:13px;font-weight:800;color:#fff;background:var(--orange);padding:3px 11px;border-radius:999px}
.spacer{flex:1}
.dom{display:flex;gap:4px;background:#e7edf7;border:1px solid var(--pm-line);border-radius:10px;padding:3px}
.dom button{font-size:13px;font-weight:800;color:var(--mut);padding:5px 11px;border-radius:7px}
.dom button.on{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(31,60,120,.18)}
.langtog{font-size:13px;font-weight:800;color:var(--blue);background:var(--soft);border:1px solid var(--softline);
 padding:6px 12px;border-radius:10px;min-width:44px}
.clock{display:flex;align-items:center;gap:10px;font-weight:800}
.clock .lbl{font-size:12px;color:var(--mut);font-weight:700}
.clock .t{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.livepill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--green);
 background:#e9f7ee;border:1px solid #bfe6cd;padding:4px 10px;border-radius:999px}
.livepill .d{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.speed{display:flex;gap:4px;background:#e7edf7;border:1px solid var(--pm-line);border-radius:10px;padding:3px}
.speed button{font-size:13px;font-weight:800;color:var(--mut);padding:5px 10px;border-radius:7px;min-width:34px}
.speed button.on{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(31,60,120,.18)}

/* ===== nav tabs ===== */
.tabs{display:flex;gap:6px;padding:12px 22px 0;flex-wrap:wrap}
.tab{font-size:15px;font-weight:800;color:var(--mut);padding:9px 16px;border-radius:10px 10px 0 0;background:transparent;
 border:1px solid transparent;border-bottom:none}
.tab.on{color:var(--ink);background:var(--panel);border-color:var(--pm-line);box-shadow:0 -2px 8px rgba(31,60,120,.05)}
.wrap{padding:14px 22px 40px;max-width:1780px;margin:0 auto}

/* ===== headers ===== */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 2px 16px;flex-wrap:wrap}
.pagehead h1{font-size:27px;font-weight:800}
.pagehead .desc{font-size:15px;color:var(--mut);margin-top:5px;font-weight:500;max-width:900px;line-height:1.5}
.chips{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{font-size:14px;font-weight:800;color:var(--mut);background:#fff;border:1px solid var(--pm-line);padding:7px 13px;border-radius:10px}
.chip.on{color:var(--blue);background:var(--soft);border-color:var(--softline)}
.chip.sum{color:var(--ink);background:var(--soft);border-color:var(--softline)}
.lg{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.lg .d{width:12px;height:12px;border-radius:4px}
.btnp{font-size:14px;font-weight:800;color:#fff;background:var(--blue);border:1px solid var(--blue);
 padding:9px 16px;border-radius:10px;box-shadow:0 8px 18px -8px rgba(37,99,235,.6);transition:transform .1s}
.btnp:hover{transform:translateY(-1px)} .btnp:active{transform:translateY(0)}
.btns{font-size:14px;font-weight:800;color:var(--blue);background:var(--soft);border:1px solid var(--softline);padding:9px 16px;border-radius:10px}

.panel{background:var(--panel);border:1px solid var(--pm-line);border-radius:14px;padding:16px 18px;box-shadow:0 10px 26px -18px rgba(31,60,120,.3)}
.panel h3{font-size:15px;font-weight:800;color:var(--mut);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
@media(max-width:1000px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--panel);border:1px solid var(--pm-line);border-radius:14px;padding:15px 17px;box-shadow:0 10px 26px -18px rgba(31,60,120,.3);border-top:4px solid var(--blue)}
.kpi .lbl{font-size:13.5px;color:var(--mut);font-weight:700}
.kpi .val{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:6px}
.kpi .sub{font-size:12.5px;color:var(--mut);font-weight:600;margin-top:6px}
.muted{color:var(--mut)} .gr{color:var(--green)} .rd{color:var(--red)} .am{color:var(--amber)} .bl{color:var(--blue)} .og{color:var(--orange)} .pu{color:var(--purple)}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px dashed #eef2f8}
.kv:last-child{border-bottom:none}
.kv .k{font-size:14px;color:var(--mut);font-weight:600} .kv .v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.big{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle;margin-inline-end:5px}

/* ===== avatars ===== */
.av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
 font-size:13px;font-weight:800;color:#fff;letter-spacing:-.5px}
.av.sm{width:26px;height:26px;font-size:11px}

/* ===== SCHEDULE GRID ===== */
.board{background:var(--pm-panel);border:1px solid var(--pm-line);border-radius:14px;overflow-x:auto;overflow-y:hidden;box-shadow:0 10px 26px -18px rgba(31,60,120,.3);cursor:grab;overscroll-behavior-x:contain}
.board.grab{cursor:grabbing}
.board::-webkit-scrollbar{height:9px} .board::-webkit-scrollbar-thumb{background:#c7d3e6;border-radius:6px} .board::-webkit-scrollbar-track{background:transparent}
.sched{display:grid;grid-template-columns:236px repeat(7,minmax(122px,1fr));min-width:1040px}
.sched > div{border-inline-start:1px solid var(--pm-line2);border-bottom:1px solid var(--pm-line2)}
.sched .corner{border-inline-start:none;background:#fbfdff;position:sticky;inset-inline-start:0;z-index:3;display:flex;align-items:center;padding:0 14px;font-size:12px;font-weight:800;color:var(--mut)}
.dhead{background:rgba(255,255,255,.96);backdrop-filter:blur(6px);padding:8px 8px 9px;text-align:center}
.dhead.today{background:linear-gradient(180deg,#eaf1ff,#f7faff)}
.dhead .dn{font-size:14px;font-weight:800} .dhead .dn .dt{font-size:11px;color:var(--pm-muted);font-weight:600;margin-inline-start:4px}
.dhead .todaypill{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;background:var(--blue);border-radius:6px;padding:1px 6px;margin-inline-start:5px;vertical-align:middle}
.covrow{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.covpill{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;font-variant-numeric:tabular-nums;display:inline-flex;gap:3px;align-items:center}
.covpill.ok{background:#e9f7ee;color:var(--green)} .covpill.gap{background:#fdeceb;color:var(--red)} .covpill.over{background:#fff6e6;color:var(--orange)}
.covpill i{width:6px;height:6px;border-radius:2px;display:block}
.emprow{background:#fbfdff;position:sticky;inset-inline-start:0;z-index:2;display:flex;align-items:center;gap:9px;padding:8px 12px;border-inline-start:none;direction:rtl}
.emprow .who{min-width:0;flex:1}
.emprow .nm{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emprow .ro{font-size:11px;color:var(--pm-muted);font-weight:700}
.emprow .hrs{display:flex;align-items:center;gap:6px;margin-top:3px}
.emprow .htrack{flex:1;height:5px;background:#eef3fb;border-radius:3px;overflow:hidden;min-width:34px}
.emprow .htrack i{display:block;height:100%;border-radius:3px;background:var(--green)}
.emprow .htrack i.hot{background:var(--orange)} .emprow .htrack i.ot{background:var(--red)}
.emprow .hn{font-size:10.5px;font-weight:800;color:var(--pm-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.emprow .hn.ot{color:var(--red)}
.cell{min-height:52px;padding:5px;display:flex;flex-direction:column;gap:4px;position:relative;transition:background .12s}
.cell.today{background:rgba(37,99,235,.035)}
.cell.dropok{background:rgba(37,99,235,.1);outline:2px dashed var(--pm-acc);outline-offset:-3px}
.cell.off{background:repeating-linear-gradient(135deg,#fafcff,#fafcff 6px,#f2f6fc 6px,#f2f6fc 12px)}
.chip2{position:relative;border-radius:8px;padding:5px 8px 5px 7px;cursor:grab;user-select:none;
 background:color-mix(in srgb,var(--c) 15%,#fff);border:1.5px solid var(--c);box-shadow:0 2px 5px -3px rgba(11,18,32,.4)}
.chip2:active{cursor:grabbing}
.chip2 .cn{font-size:12px;font-weight:800;color:var(--c);line-height:1.1}
.chip2 .ct{font-size:10px;font-weight:700;color:var(--c);opacity:.8;direction:ltr}
.chip2.bad{outline:2px solid var(--pm-danger);outline-offset:1px}
.chip2 .warn{position:absolute;top:-7px;inset-inline-start:-7px;width:16px;height:16px;border-radius:50%;background:var(--pm-danger);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.chip2 .del{position:absolute;top:-7px;inset-inline-end:-7px;width:16px;height:16px;border-radius:50%;background:#334155;color:#fff;font-size:10px;font-weight:800;
 display:none;align-items:center;justify-content:center;cursor:pointer;z-index:4}
.chip2:hover .del{display:flex}
.cell .add{opacity:0;align-self:center;margin-top:auto;font-size:11px;font-weight:800;color:var(--pm-acc);cursor:pointer;transition:opacity .12s}
.cell:hover .add{opacity:.7}

/* palette */
.pal{flex:0 0 250px;width:250px;background:var(--pm-panel);border:1px solid var(--pm-line);border-radius:14px;padding:14px;
 box-shadow:0 10px 26px -18px rgba(31,60,120,.3);align-self:flex-start}
.pal .bh{font-size:15px;font-weight:800;margin-bottom:4px}
.pal .bhs{font-size:12px;color:var(--pm-muted);font-weight:600;margin-bottom:12px;line-height:1.4}
.palchip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;cursor:grab;user-select:none;margin-bottom:9px;
 background:color-mix(in srgb,var(--c) 12%,#fff);border:1.5px solid color-mix(in srgb,var(--c) 55%,#fff)}
.palchip:active{cursor:grabbing}
.palchip .pdot{width:34px;height:34px;border-radius:9px;background:var(--c);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.palchip .pn{font-size:14px;font-weight:800;color:var(--c)} .palchip .pt{font-size:11px;font-weight:700;color:var(--c);opacity:.85;direction:ltr}
.palnote{font-size:12px;color:var(--pm-muted);font-weight:700;margin-top:2px;line-height:1.5;border-top:1px solid var(--pm-line2);padding-top:11px}
.ghost{position:fixed;z-index:300;pointer-events:none;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--c);
 border-radius:10px;padding:6px 12px;box-shadow:0 16px 36px rgba(11,18,32,.32);font-size:12.5px;font-weight:800;color:var(--c);opacity:.96}

.plan{display:flex;gap:14px;align-items:flex-start}
.bwrap{flex:1;min-width:0;overflow-x:auto}
.glegend{display:flex;gap:14px;flex-wrap:wrap}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;text-align:start;border-bottom:1px solid #eef2f8}
th{font-size:12px;color:var(--mut);font-weight:800;position:sticky;top:0;background:#fff}
td{font-weight:600;font-variant-numeric:tabular-nums}
tr:hover td{background:#fafcff}
.tbl-wrap{max-height:560px;overflow:auto;border:1px solid var(--pm-line);border-radius:12px}
.pill{display:inline-block;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pill.g{background:#e9f7ee;color:var(--green)} .pill.a{background:#fff6e6;color:var(--orange)}
.pill.r{background:#fdeceb;color:var(--red)} .pill.b{background:var(--soft);color:var(--blue)} .pill.m{background:#eef1f6;color:var(--mut)} .pill.p{background:#f3ecfe;color:var(--purple)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:1100px){.two,.three{grid-template-columns:1fr}}
.foot{display:flex;justify-content:space-between;color:var(--mut);font-size:13px;font-weight:700;margin-top:18px;padding:0 2px;gap:10px;flex-wrap:wrap}
.tip{position:fixed;z-index:99;background:#0f1b2d;color:#fff;font-size:12px;font-weight:700;padding:7px 10px;border-radius:8px;
 pointer-events:none;opacity:0;transition:opacity .1s;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.3);max-width:280px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:120;
 background:#0f1b2d;color:#fff;font-size:14px;font-weight:800;padding:12px 20px;border-radius:12px;
 box-shadow:0 16px 40px rgba(0,0,0,.35);opacity:0;transition:opacity .3s,transform .3s;display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast .ic{color:#34d399}

/* coverage heatmap */
.heat{display:grid;gap:6px}
.heatrow{display:grid;grid-template-columns:120px repeat(7,1fr);gap:6px;align-items:center}
.heatlab{font-size:13px;font-weight:800}
.heatcell{border-radius:8px;padding:8px 4px;text-align:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.heathd{font-size:12px;font-weight:800;color:var(--mut);text-align:center}
.bars{display:flex;flex-direction:column;gap:9px}
.crow{display:flex;align-items:center;gap:10px}
.crow .cl{font-size:13px;font-weight:800;width:150px}
.crow .ct{flex:1;height:22px;background:#eef3fb;border-radius:7px;overflow:hidden;position:relative}
.crow .ct i{display:block;height:100%;border-radius:7px}
.crow .cvv{font-size:12.5px;font-weight:800;width:74px;text-align:end;font-variant-numeric:tabular-nums}
.reqline{position:absolute;top:-3px;bottom:-3px;width:2px;background:#0f1b2d}

/* modal */
.fab{position:fixed;bottom:22px;left:22px;z-index:60;background:var(--pm-acc);color:#fff;border-radius:14px;padding:12px 18px;font-weight:800;font-size:15px;box-shadow:0 12px 30px -10px rgba(37,99,235,.6)}
.amodal{position:fixed;inset:0;background:rgba(11,18,32,.5);z-index:70;display:none;align-items:center;justify-content:center;padding:20px}
.amodal.on{display:flex}
.acard{background:#fff;border-radius:16px;padding:20px 22px;width:min(460px,95vw);box-shadow:0 30px 80px -20px rgba(0,0,0,.4)}
.acard h3{font-size:18px;font-weight:800;margin-bottom:14px}
.afield{margin-bottom:11px}
.afield label{display:block;font-size:12px;font-weight:800;color:var(--pm-muted);margin-bottom:4px}
.afield input,.afield select{width:100%;font-family:inherit;font-size:14px;font-weight:600;border:1px solid var(--pm-line);border-radius:9px;padding:9px 11px}
.abtns{display:flex;gap:8px;margin-top:16px}
.abtns .save{flex:1;background:var(--pm-acc);color:#fff;border-radius:10px;padding:11px;font-weight:800}
.abtns .cancel{background:#eef1f6;border-radius:10px;padding:11px 18px;font-weight:800}

/* ===== perspective toggle + identity ===== */
.persp{display:flex;gap:4px;background:#e7edf7;border:1px solid var(--pm-line);border-radius:10px;padding:3px}
.persp button{font-size:13px;font-weight:800;color:var(--mut);padding:5px 12px;border-radius:7px;display:flex;align-items:center;gap:6px}
.persp button.on{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(31,60,120,.18)}
.idsel{position:relative}
.idbtn{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--softline);border-radius:12px;padding:5px 12px 5px 8px;font-weight:800}
.idbtn .cap{font-size:10px;color:var(--mut);font-weight:700;line-height:1;margin-bottom:2px}
.idbtn .nm{font-size:13.5px;line-height:1.1} .idbtn .cr{color:var(--mut);font-size:10px}
.idmenu{position:absolute;top:50px;inset-inline-end:0;z-index:80;background:#fff;border:1px solid var(--pm-line);border-radius:14px;
 box-shadow:0 24px 60px -18px rgba(11,18,32,.4);padding:7px;width:252px;max-height:64vh;overflow:auto;display:none}
.idmenu.on{display:block}
.idmenu .it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;cursor:pointer}
.idmenu .it:hover{background:var(--soft)} .idmenu .it.sel{background:var(--soft);outline:1px solid var(--softline)}
.idmenu .it .nm{font-size:13.5px;font-weight:800} .idmenu .it .ro{font-size:11px;color:var(--mut);font-weight:700}

/* ===== employee · greeting + KPI ===== */
.mygreet{display:flex;align-items:center;gap:15px}
.mygreet .av{width:54px;height:54px;font-size:20px}
.mygreet h1{font-size:26px} .mygreet .sub{font-size:14px;color:var(--mut);font-weight:600;margin-top:3px}

/* ===== employee · week strip ===== */
.week7{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
@media(max-width:1180px){.week7{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.week7{grid-template-columns:repeat(2,1fr)}}
.dcard{background:#fff;border:1px solid var(--pm-line);border-radius:14px;padding:12px 12px 13px;min-height:148px;display:flex;flex-direction:column;gap:9px;box-shadow:0 10px 26px -20px rgba(31,60,120,.3)}
.dcard.today{border-color:var(--softline);background:linear-gradient(180deg,#f2f7ff,#fff)}
.dcard.next{outline:2px solid var(--blue);outline-offset:-1px}
.dcard .dch{display:flex;align-items:center;justify-content:space-between;gap:6px}
.dcard .dnm{font-size:14px;font-weight:800} .dcard .ddt{font-size:11px;color:var(--mut);font-weight:700}
.dcard .tnow{font-size:9.5px;font-weight:800;color:#fff;background:var(--blue);border-radius:6px;padding:1px 6px}
.dcard .nxt{font-size:9.5px;font-weight:800;color:var(--blue);background:var(--soft);border:1px solid var(--softline);border-radius:6px;padding:1px 6px}
.mysh{border-radius:11px;padding:9px 10px;background:color-mix(in srgb,var(--c) 12%,#fff);border:1.5px solid var(--c)}
.mysh .mn{font-size:13.5px;font-weight:800;color:var(--c);display:flex;align-items:center;gap:6px}
.mysh .mt{font-size:11.5px;font-weight:700;color:var(--c);opacity:.85;direction:ltr;margin-top:3px}
.dcard .free{flex:1;display:flex;align-items:center;justify-content:center;color:var(--mut);font-weight:700;font-size:12.5px;min-height:58px;
 border:1.5px dashed var(--pm-line);border-radius:11px;background:repeating-linear-gradient(135deg,#fafcff,#fafcff 6px,#f4f7fc 6px,#f4f7fc 12px)}

/* ===== employee · updates feed ===== */
.feed{display:flex;flex-direction:column;gap:9px}
.fitem{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--pm-line);border-radius:12px;background:#fff}
.fitem.unread{background:var(--soft);border-color:var(--softline)}
.fitem .fic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff}
.fitem .ftx{font-size:13.5px;font-weight:700;line-height:1.4} .fitem .fmeta{font-size:11.5px;color:var(--mut);font-weight:700;margin-top:2px}
.fitem .fdot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:0 0 auto;margin-top:6px}
.badge{min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}

/* ===== employee · quick actions + type picker ===== */
.qa{display:flex;flex-direction:column;gap:10px}
.qabtn{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--pm-line);border-radius:12px;padding:12px 14px;font-weight:800;font-size:14px;box-shadow:0 8px 20px -16px rgba(31,60,120,.4);text-align:start}
.qabtn:hover{border-color:var(--softline);background:var(--soft)}
.qabtn .qi{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.qabtn .qs{font-size:11.5px;color:var(--mut);font-weight:600;margin-top:2px}
.typegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.typeopt{border:1.5px solid var(--pm-line);border-radius:11px;padding:11px;font-weight:800;font-size:13.5px;text-align:center;cursor:pointer;color:var(--mut)}
.typeopt.on{border-color:var(--blue);color:var(--blue);background:var(--soft)}
.takecard{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;padding:11px 13px;margin-bottom:9px;
 background:color-mix(in srgb,var(--c) 8%,#fff);border:1.5px solid color-mix(in srgb,var(--c) 45%,#fff)}

/* ---- deck fill mode (?fill=1): stretch shorter screens so the live frame reads full & uniform ---- */
body.fill[data-route="att"] .tbl-wrap{max-height:none}
body.fill[data-route="att"] #view>.panel:last-of-type{min-height:calc(100vh - 350px)}
body.fill[data-route="cover"] #view>.two>.panel{min-height:calc(100vh - 210px);display:flex;flex-direction:column}
body.fill[data-route="cover"] #view>.two>.panel .heat{flex:1;align-content:center}
body.fill[data-route="req"] #view>.two>.panel{min-height:calc(100vh - 210px)}

/* ===== board horizontal pan (timeline) ===== */
.panbtns{display:inline-flex;gap:5px;vertical-align:middle;direction:ltr}
.panb{width:30px;height:30px;border-radius:8px;background:var(--soft);border:1px solid var(--softline);color:var(--blue);font-size:17px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.panb:hover{background:#e2ecff}
.bwrap{cursor:grab} .bwrap.grab{cursor:grabbing}
.scrollhint{font-size:11.5px;color:var(--mut);font-weight:700;display:none}

/* ===== reorder employees (drag rows up/down) ===== */
.emprow{cursor:grab}
.emprow .grip{color:#c2cddf;font-size:15px;font-weight:800;letter-spacing:-2px;line-height:.7;flex:0 0 auto;user-select:none;margin-inline-start:-3px}
.emprow:hover .grip{color:var(--pm-acc)}
.emprow.rowdrag{opacity:.4}
.emprow.rowtarget{background:var(--soft);box-shadow:inset 0 0 0 2px var(--pm-acc)}

/* ===== quick shift picker (double-click empty cell) ===== */
.picker{position:fixed;z-index:200;display:flex;gap:8px;padding:8px;background:#fff;border:1px solid var(--pm-line);border-radius:14px;
 box-shadow:0 20px 50px -14px rgba(11,18,32,.4);animation:pop .12s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.pbub{width:60px;height:60px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
 background:color-mix(in srgb,var(--c) 14%,#fff);border:1.5px solid var(--c);cursor:pointer;transition:transform .1s}
.pbub:hover{transform:translateY(-2px) scale(1.04)}
.pbub .pbn{font-size:11.5px;font-weight:800;color:var(--c)} .pbub .pbt{font-size:9px;font-weight:700;color:var(--c);opacity:.8;direction:ltr}

/* ===== employee bottom tab bar (mobile app feel) ===== */
.botnav{display:none;position:fixed;bottom:0;inset-inline:0;z-index:65;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
 border-top:1px solid var(--pm-line);padding:7px 8px calc(7px + env(safe-area-inset-bottom));justify-content:space-around;gap:4px;
 box-shadow:0 -8px 24px -12px rgba(31,60,120,.25)}
.botnav button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:800;color:var(--mut);padding:3px 4px;border-radius:12px}
.botnav button.on{color:var(--blue)}
.botnav button.on .bi{background:var(--soft)}
.botnav .bi{width:44px;height:27px;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:background .12s}
.botnav .bbadge{position:absolute;top:-1px;inset-inline-end:calc(50% - 24px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* ===== board-mode toggle ===== */
.bmode{display:inline-flex;gap:4px;background:#e7edf7;border:1px solid var(--pm-line);border-radius:10px;padding:3px}
.bmode button{font-size:13px;font-weight:800;color:var(--mut);padding:7px 13px;border-radius:7px}
.bmode button.on{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(31,60,120,.18)}

/* ===== shift/position board (by shift × role) ===== */
.schedS .srow-lbl{background:#fbfdff;position:sticky;inset-inline-start:0;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 12px;border-inline-start:none;direction:rtl}
.schedS .shifthdr{background:linear-gradient(180deg,#f5f9ff,#fff)}
.schedS .shifthdr .shn{font-size:14.5px;font-weight:800;color:var(--c)} .schedS .shifthdr .sht{font-size:11px;color:var(--mut);font-weight:700;direction:ltr}
.schedS .shifthdr .edt{margin-inline-start:auto;font-size:11.5px;font-weight:800;color:var(--blue);background:var(--soft);border:1px solid var(--softline);padding:4px 10px;border-radius:8px}
.schedS .shcell{min-height:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f9fbff,#fff)}
.schedS .rolehdr{padding-inline-start:24px} .schedS .rolehdr .rn{font-size:13px;font-weight:800} .schedS .rolehdr .rq{font-size:11px;color:var(--mut);font-weight:800;margin-inline-start:6px}
.schedS .scell{min-height:52px;padding:5px;display:flex;flex-direction:column;gap:4px;position:relative}
.schedS .scell.today,.schedS .shcell.today{background:rgba(37,99,235,.045)}
.covpill.mini{font-size:11px;padding:2px 8px}
.seat{border-radius:8px;padding:4px 7px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;position:relative}
.seat.filled{background:color-mix(in srgb,var(--c) 14%,#fff);border:1.5px solid var(--c);color:var(--c)}
.seat.filled .snm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat.filled .av{width:22px;height:22px;font-size:10px}
.seat.empty{border:1.5px dashed color-mix(in srgb,var(--c) 55%,#fff);color:color-mix(in srgb,var(--c) 82%,#333);
 background:repeating-linear-gradient(135deg,#fff,#fff 6px,#f6f9ff 6px,#f6f9ff 12px);cursor:pointer;justify-content:center;transition:background .12s}
.seat.empty:hover{background:var(--soft);border-color:var(--c)}
.seat .sx{position:absolute;top:-7px;inset-inline-end:-7px;width:16px;height:16px;border-radius:50%;background:#334155;color:#fff;font-size:9px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:4}
.seat.filled:hover .sx{display:flex}
.seatdot{width:13px;height:13px;border-radius:4px;display:inline-block;vertical-align:middle}
.seatdot.filled{background:var(--blue)} .seatdot.empty{border:1.5px dashed #94a3b8}

/* seat picker (eligible employees) */
.epick{position:fixed;z-index:200;background:#fff;border:1px solid var(--pm-line);border-radius:14px;box-shadow:0 20px 50px -14px rgba(11,18,32,.4);padding:7px;width:236px;max-height:58vh;overflow:auto;animation:pop .12s ease-out}
.epick .eh{font-size:11.5px;font-weight:800;color:var(--mut);padding:6px 9px 8px}
.epick .it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;cursor:pointer}
.epick .it:hover{background:var(--soft)} .epick .it .nm{font-size:13px;font-weight:800} .epick .it .sub{font-size:11px;color:var(--mut);font-weight:700}
.epick .none{padding:12px 10px;color:var(--mut);font-weight:700;font-size:12.5px}

/* template editor */
.tplrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed #eef2f8}
.tplrow .tn{flex:1;font-size:14px;font-weight:800}
.stp{display:inline-flex;align-items:center;gap:8px}
.stp button{width:27px;height:27px;border-radius:7px;background:var(--soft);border:1px solid var(--softline);color:var(--blue);font-weight:800;font-size:15px}
.stp .n{font-size:15px;font-weight:800;min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.tplrow .rm{color:var(--red);font-weight:800;cursor:pointer;font-size:12.5px}
.tpladd{display:flex;gap:8px;margin-top:13px}
.tpladd select{flex:1;font-family:inherit;font-size:13.5px;font-weight:700;border:1px solid var(--pm-line);border-radius:9px;padding:9px}
.tpladd .ad{background:var(--soft);border:1px solid var(--softline);color:var(--blue);font-weight:800;border-radius:9px;padding:9px 15px}

/* ===== staff pool (drag-to-fill roster, shift view) ===== */
.rostercard{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;cursor:grab;user-select:none;margin-bottom:8px;background:#fff;border:1px solid var(--pm-line)}
.rostercard:hover{border-color:var(--softline);background:var(--soft)} .rostercard:active{cursor:grabbing}
.rostercard.dim{opacity:.4}
.rostercard .av{width:36px;height:36px;font-size:13px}
.rc-main{flex:1;min-width:0}
.rc-nm{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-ro{font-size:11px;color:var(--mut);font-weight:700}
.rc-load{display:flex;align-items:center;gap:6px;margin-top:4px}
.rc-load .htrack{flex:1;height:5px;background:#eef3fb;border-radius:3px;overflow:hidden;min-width:30px}
.rc-load .htrack i{display:block;height:100%;border-radius:3px;background:var(--green)}
.rc-load .htrack i.hot{background:var(--orange)} .rc-load .htrack i.ot{background:var(--red)}
.rc-load .rc-hn{font-size:10.5px;font-weight:800;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-split{display:flex;gap:9px;margin-top:5px}
.rc-split .sp{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:var(--mut);font-variant-numeric:tabular-nums}
.rc-split .sp i{width:8px;height:8px;border-radius:3px;display:block}
.rc-cnt{font-weight:800;color:var(--ink);text-align:center;min-width:26px}
.rc-cnt b{font-size:20px;font-variant-numeric:tabular-nums} .rc-cnt small{display:block;font-size:9px;color:var(--mut);font-weight:700}
.seat.filled.hl{box-shadow:0 0 0 2px var(--pm-acc),0 0 0 5px rgba(37,99,235,.16);z-index:3}
.seat.empty.drop-elig{border-style:solid;border-color:var(--pm-acc);background:var(--soft)}
.seat.empty.dropok{background:#dbeafe;border-color:var(--pm-acc);box-shadow:0 0 0 2px rgba(37,99,235,.3)}

/* roster: own scrollbar, capped to board height */
.palr{overflow-y:auto;overscroll-behavior:contain}
.palr::-webkit-scrollbar{width:9px} .palr::-webkit-scrollbar-thumb{background:#c7d3e6;border-radius:6px} .palr::-webkit-scrollbar-track{background:transparent}

/* ===== employee-mobile preview (phone mockup) ===== */
.phonewrap{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:8px 0 34px}
.phone{width:360px;max-width:92vw;height:740px;border-radius:46px;padding:12px;position:relative;
 background:linear-gradient(160deg,#1e2d3d,#0e1b25);box-shadow:0 44px 100px -34px rgba(11,18,32,.62),0 0 0 2px rgba(255,255,255,.05) inset}
.phone .notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:140px;height:24px;background:#0e1b25;border-radius:0 0 15px 15px;z-index:3}
.phone .scr{width:100%;height:100%;border-radius:34px;overflow:hidden;background:#fff}
.phone iframe{width:100%;height:100%;border:0;display:block}

/* profile-photo upload */
.avup{position:relative;display:inline-block;cursor:pointer;flex:0 0 auto}
.avup input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.avcam{position:absolute;bottom:-2px;inset-inline-end:-3px;width:21px;height:21px;border-radius:50%;background:var(--blue);font-size:10px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;pointer-events:none}

/* ===== responsive / mobile ===== */
@media(max-width:900px){
  html,body{overflow-x:hidden;max-width:100%}
  #view,.wrap,.pagehead,.kpis,.two,.three,.week7,.plan{max-width:100%}
  .kpi,.dcard,.panel,.two>*,.three>*,.week7>*,.mygreet,.mygreet>div,.pagehead>div{min-width:0}
  .kpi .val{font-size:24px;white-space:normal;word-break:break-word}
  .dots{display:none}
  .appbar{flex-wrap:wrap;height:auto;min-height:50px;padding:8px 12px;gap:8px}
  .appbar .spacer{display:none}
  .speed,.livepill,.soon{display:none}
  .clock{margin-inline-start:auto} .clock .lbl{display:none} .clock .t{font-size:16px}
  .brand{font-size:16px}
  .dom button,.persp button{padding:5px 9px;font-size:12px}
  .idbtn{padding:4px 10px 4px 7px} .idbtn .cap{display:none} .idbtn .nm{font-size:12.5px}
  .idmenu{top:auto}
  .tabs{padding:10px 12px 0;gap:4px} .tab{font-size:13px;padding:8px 11px}
  .wrap{padding:12px 12px 40px}
  .pagehead{margin:4px 0 12px} .pagehead h1{font-size:21px} .pagehead .desc{font-size:13px;line-height:1.45}
  .chips{gap:7px} .chip{padding:6px 11px;font-size:13px}
  .mygreet{gap:11px} .mygreet .av{width:44px;height:44px;font-size:16px} .mygreet h1{font-size:20px} .mygreet .sub{font-size:12.5px}
  .kpis{gap:10px;margin-bottom:12px} .kpi{padding:12px 13px} .kpi .val{font-size:26px}
  .two,.three{gap:12px}
  .plan{flex-direction:column}
  .pal{width:100%;flex:0 0 auto;order:2}
  .scrollhint{display:inline}
  .fab{bottom:16px;left:12px;padding:10px 15px;font-size:14px}
}
@media(max-width:640px){
  .kpis{grid-template-columns:1fr 1fr}
  .week7{grid-template-columns:1fr 1fr;gap:10px}
  .dcard{min-height:120px;padding:11px}
  .panel{padding:13px 13px}
  .pagehead .desc{display:none}
}
/* employee = phone-app: bottom nav replaces top tabs */
@media(max-width:900px){
  body[data-persp="emp"] #tabs{display:none}
  body[data-persp="emp"] .wrap{padding-bottom:86px}
  body[data-persp="emp"] .botnav{display:flex}
}