/* ============================================================
   matrix.css — the locked provider×day matrix + cell states
   ============================================================ */

.matrix-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}

/* header strip */
.matrix-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.matrix-top .ttl{display:flex;align-items:baseline;gap:12px}
.matrix-top .ttl h2{font-family:var(--hero);font-weight:400;font-size:19px;margin:0;letter-spacing:-.01em}
.matrix-top .ttl .count{font-size:12.5px;color:var(--ink-2)}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.legend .li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2)}
.legend .sw{width:16px;height:16px;border-radius:4px;border:1px solid var(--line);flex:0 0 auto;position:relative}
.legend .sw.s-needs{background:var(--red-soft);border-color:#f3c9c9}
.legend .sw.s-staffed{background:#fff}
.legend .sw.s-staffed::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;background:var(--green)}
.legend .sw.s-out{background:repeating-linear-gradient(135deg,var(--off),var(--off) 3px,#fff 3px,#fff 6px)}
.legend .sw.s-hol{background:var(--holiday-tint,#F2EEE6)}
.legend .sw.s-shared{background:var(--amber-soft);border-color:#eccfa0}

/* ---------- grid scaffolding ---------- */
.grid-scroll{overflow-x:auto;scrollbar-width:auto}
.grid-scroll::-webkit-scrollbar{height:14px}
.grid-scroll::-webkit-scrollbar-track{background:#F1ECE3;border-radius:7px}
.grid-scroll::-webkit-scrollbar-thumb{background:#C6BBA8;border-radius:7px;border:3px solid #F1ECE3}
.grid-scroll::-webkit-scrollbar-thumb:hover{background:#A1957E}

/* horizontal scroll slider under the matrix */
.grid-slider{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line)}
.grid-slider.top{border-top:0;border-bottom:1px solid var(--line)}
.grid-slider .gs-arrow{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font-size:17px;line-height:1;cursor:pointer;box-shadow:var(--shadow-card)}
.grid-slider .gs-arrow:hover{color:var(--ink);border-color:var(--ink-3)}
.grid-slider .gs-arrow:active{background:#F1ECE3}
.grid-slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:8px;border-radius:5px;background:#E7E1D6;cursor:pointer}
.grid-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:40px;height:20px;border-radius:6px;background:var(--nwdc);border:2px solid var(--surface);box-shadow:var(--shadow-card);cursor:grab}
.grid-slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.grid-slider input[type=range]::-moz-range-thumb{width:40px;height:20px;border-radius:6px;background:var(--nwdc);border:2px solid var(--surface);cursor:grab}
.loc-bcdc-page .grid-slider input[type=range]::-webkit-slider-thumb{background:var(--bcdc)}
.grid{--label-w:216px;--col-w:72px;--row-h:48px;--grid-line:#D9D1C4;--vline:#C6BBA8;--wline:#A1957E;min-width:max-content;border-top:1px solid var(--grid-line);border-right:1px solid var(--vline)}

.grid .grow{display:grid;grid-template-columns:var(--label-w) repeat(var(--ncols),var(--col-w));align-items:stretch}

/* column header (days) */
.grid .colhead{position:sticky;top:0;z-index:5;background:var(--surface)}
.grid .colhead .gcell{height:46px;border-bottom:1px solid var(--line-strong);border-left:1px solid var(--vline);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.grid .colhead .dow{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.grid .colhead .dom{font-size:13px;font-weight:600}
.grid .colhead .gcell.is-weekend{background:#FCFAF6}
.grid .colhead .gcell.is-hol .dom{color:var(--ink-3)}
.grid .colhead .corner{position:sticky;left:0;z-index:6;background:var(--surface);border-bottom:1px solid var(--line-strong);display:flex;align-items:flex-end;padding:0 0 8px 16px}
.grid .colhead .corner .eyebrow{font-size:9.5px}

/* section divider rows */
.grid .sec{grid-column:1 / -1;background:#FCFAF6;border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:7px 16px;position:sticky;left:0;display:flex;align-items:center;justify-content:space-between}
.grid .sec .eyebrow{font-size:9.5px}
.grid .sec .sec-hint{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-3)}
.grid .sec .sticky-lab{position:sticky;left:16px;white-space:nowrap}
.grid .sec .eyebrow{white-space:nowrap}
.grid .plabel .nm.muted{color:var(--ink-3);font-style:italic;font-weight:400}

/* provider label (sticky left) */
.grid .plabel{position:sticky;left:0;z-index:4;background:var(--surface);border-bottom:1px solid var(--grid-line);border-right:1px solid var(--line-strong);display:flex;align-items:center;gap:9px;padding:0 14px;height:var(--row-h)}
.grid .grow:hover .plabel{background:#FCFAF6}
.grid .plabel .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .plabel .role{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:auto;padding-left:8px}

/* base cell */
.grid .cell{height:var(--row-h);border-bottom:1px solid var(--grid-line);border-left:1px solid var(--vline);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;background:var(--surface);overflow:hidden}
.grid .cell.is-weekend{background:#FCFAF6}
.grid .cell:hover{box-shadow:inset 0 0 0 2px var(--nwdc-soft)}
.grid.loc-bcdc .cell:hover{box-shadow:inset 0 0 0 2px var(--bcdc-soft)}
.grid .cell.sel{box-shadow:inset 0 0 0 2px var(--nwdc)}
.grid.loc-bcdc .cell.sel{box-shadow:inset 0 0 0 2px var(--bcdc)}

/* state: empty — nothing */
.grid .cell.s-empty{cursor:default}
.grid .cell.s-empty:hover{box-shadow:none}

/* doctor cell: assistant names (+ shared) stacked */
.cell .asg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.05;padding:2px 3px;width:100%}
.cell .asgname{font-size:10.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-flex;align-items:center;gap:2px}
.cell .asgname .shr{color:var(--amber);font-size:10px}
.cell .asgname.shared{color:var(--amber);font-weight:600}
.cell.has-shared{background:linear-gradient(0deg,rgba(217,119,6,.05),rgba(217,119,6,.05))}
.cell .needpill{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:-.01em;color:#fff;background:var(--red);border-radius:20px;padding:1px 6px;line-height:1.25;white-space:nowrap;margin-top:1px}

/* state: hygienist staffed — green dot */
.cell .gdot{width:8px;height:8px;border-radius:50%;background:var(--green)}

/* state: support present — small neutral tick */
.cell .suptick{width:14px;height:3px;border-radius:2px;background:var(--role-lab)}

/* state: out — diagonal stripes + label */
.cell.s-out{background:repeating-linear-gradient(135deg,var(--off),var(--off) 4px,#FBF9F5 4px,#FBF9F5 8px);cursor:pointer}
.cell.s-out .offlbl{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5a544a;background:rgba(255,255,255,.78);padding:1px 4px;border-radius:3px}

/* state: holiday — tinted + tag */
.cell.s-hol{background:var(--holiday-tint,#F2EEE6);cursor:default}
.cell.s-hol .holtag{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3)}
.cell.s-hol:hover{box-shadow:none}

/* assistant assignment rows (dropdowns) */
.grid .avail .plabel .nm{font-size:12px;color:var(--ink-2)}
.grid .avail-cell{cursor:default;padding:0 3px}
.grid .avail-cell:hover{box-shadow:none}
.grid .sec.avail-head{margin-top:0}
/* twin chair dropdowns stacked per day */
.grid .avail-cell.twin{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:3px 3px}
.grid .avail-cell.twin .asgsel{width:100%}
.grid .avail{min-height:54px}
.grid .avail .cell{height:auto;min-height:54px}
.grid .avail .plabel{height:auto;min-height:54px}
/* editable role-name rows (HSA / Sterilization) */
.grid .rolecell{padding:0 3px}
.grid .rolecell:hover{box-shadow:none}
.grid .rolecell .rolesel{width:100%}
.asgsel{font-family:var(--ui);font-size:10.5px;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:5px;background:var(--surface);padding:3px 2px 3px 5px;width:100%;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M1 2.5L4 5.5L7 2.5' stroke='%239A958C' stroke-width='1.2' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 3px center}
.asgsel:focus{outline:2px solid var(--nwdc);outline-offset:-1px}
.grid.loc-bcdc .asgsel:focus{outline-color:var(--bcdc)}
.asgsel[data-state=set]{border-color:#cfdcfa;background-color:var(--nwdc-soft);color:var(--nwdc);font-weight:600}
.grid.loc-bcdc .asgsel[data-state=set]{border-color:#f0d4b4;background-color:var(--bcdc-soft);color:var(--bcdc)}
.asgsel[data-state=out]{border-color:#f1c9c9;background-color:var(--red-soft);color:var(--red);font-weight:600}
.asgsel.wide{font-size:13px;padding:6px 22px 6px 8px;max-width:180px}
.chip--asst{background:#C9C2B5}

/* Saturday column accent */
.grid .gcell.is-sat{background:#FBF4EA}
.grid .gcell.is-sat .dow{color:var(--bcdc)}
.grid .cell.is-sat{background:#FDF9F3}
.grid .cell.is-sat.s-empty{background:#FBF4EA}

/* week separators — darker divider before each Monday */
.grid .gcell.wk,.grid .cell.wk{border-left:2px solid var(--wline)}
.grid .colhead .gcell{cursor:pointer}
.grid .colhead .gcell:hover{background:var(--nwdc-soft)}
.grid.loc-bcdc .colhead .gcell:hover{background:var(--bcdc-soft)}

/* role-colored status dot + sick / vacation boxes */
.cell.clickable-dot{cursor:pointer}
.cell .rdot{width:9px;height:9px;border-radius:50%}
.cell.s-present:hover{box-shadow:inset 0 0 0 2px var(--nwdc-soft)}
.grid.loc-bcdc .cell.s-present:hover{box-shadow:inset 0 0 0 2px var(--bcdc-soft)}
.cell.st-sick{background:var(--red-soft)}
.cell.st-vac{background:repeating-linear-gradient(135deg,var(--amber-soft),var(--amber-soft) 4px,#FFF9F0 4px,#FFF9F0 8px)}
.cell .stlbl{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.05em}
.cell.st-sick .stlbl{color:var(--red)}
.cell.st-vac .stlbl{color:var(--amber)}

/* ---- past days greyed (today = system date) ---- */
.grid .gcell.past{opacity:.5}
.grid .gcell.past .dom{color:var(--ink-3)}
.grid .cell.past{background:#F6F3EE}
.grid .cell.past.is-sat{background:#F3EEE6}
.grid .cell.past .asg,.grid .cell.past .needpill,.grid .cell.past .rdot,.grid .cell.past .ro-val,.grid .cell.past .stlbl,.grid .cell.past .offlbl{opacity:.5}
.grid .cell.past .asgsel{opacity:.55}

/* ---- "off" (not scheduled) cells — distinct from past, so who's IN pops ---- */
.grid .cell.s-empty{background:#EDEAE3}
.grid .cell.s-empty.is-sat{background:#EAE5DC}
.grid .cell.s-empty.past{background:#E4E0D7}
.grid .cell.s-empty:hover{box-shadow:none}

/* ---- conflict signal ---- */
.grid .cell.has-conflict{box-shadow:inset 0 0 0 2px var(--red)}
.grid .cell .conflict-flag{position:absolute;top:2px;right:3px;width:13px;height:13px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;font-weight:700;line-height:13px;text-align:center;font-family:var(--ui)}
.status-pill.conflict{color:#fff;background:var(--red)}
/* today marker in the header */
.grid .gcell.is-today{position:relative}
.grid .gcell.is-today .dom{color:var(--nwdc);font-weight:700}
.grid.loc-bcdc .gcell.is-today .dom{color:var(--bcdc)}
.grid .gcell.is-today::after{content:"";position:absolute;left:18%;right:18%;bottom:5px;height:2px;border-radius:2px;background:var(--nwdc)}
.grid.loc-bcdc .gcell.is-today::after{background:var(--bcdc)}