/* Availability & scheduling — the roster grid, standing roster, week fill,
   open shifts and the crewing board. Extracted from the standalone
   admin-availability.html on 2026-08-08 and folded into the SPA.

   Every rule is scoped to #tab-availability. Selectors this file used to
   redefine — .card, .card-title, .btn, .empty and the page chrome — were
   dropped so the tab inherits design-system.css like every other tab. */

#tab-availability .note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:16px;line-height:1.5;}
#tab-availability .note.warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}
#tab-availability .card-sub{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
#tab-availability .btn-sm{padding:4px 9px;font-size:12px;}
#tab-availability .btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);}
#tab-availability .btn-danger{background:var(--danger);}
#tab-availability select, #tab-availability input, #tab-availability textarea{font-family:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;color:var(--text);background:#fff;}
#tab-availability textarea{resize:vertical;min-height:56px;width:100%;}
#tab-availability .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
#tab-availability .spread{justify-content:space-between;}
#tab-availability .fld{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);}
#tab-availability table{width:100%;border-collapse:collapse;font-size:13px;}
#tab-availability th, #tab-availability td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
#tab-availability th{background:#f8fafc;font-weight:700;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em;}
#tab-availability td .sub{font-size:11px;color:var(--muted);margin-top:2px;}
#tab-availability .cov{display:flex;gap:6px;overflow-x:auto;margin-top:12px;}
#tab-availability .covday{flex:1 1 0;min-width:104px;border:1px solid var(--border);border-radius:8px;padding:8px 9px;font-size:11px;line-height:1.5;background:#f8fafc;}
#tab-availability .covday.ok{background:#f0fdf4;border-color:#bbf7d0;}
#tab-availability .covday.tight{background:#fffbeb;border-color:#fde68a;}
#tab-availability .covday.short{background:#fef2f2;border-color:#fecaca;}
#tab-availability .covday .d{font-weight:700;font-size:12px;color:var(--text);}
#tab-availability .covday .n{color:var(--muted);}
#tab-availability .covday .hd{font-weight:700;}
#tab-availability .bulk{border:1px dashed var(--border);border-radius:var(--radius);padding:12px;margin-bottom:14px;background:#fbfdfc;}
#tab-availability .bulk .picks{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 12px;}
#tab-availability .bulk .picks label{font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px;color:var(--text);}
#tab-availability .bulk .res{margin-top:10px;font-size:12px;}
#tab-availability .bulk .res div{padding:3px 0;border-bottom:1px solid var(--border);}
#tab-availability .bulk .res div:last-child{border-bottom:0;}
#tab-availability .bulk .res .bad{color:#b91c1c;}
#tab-availability .fillnote{margin:0;}
#tab-availability tr.unfilled{background:#fff7ed;}
#tab-availability .res{margin-top:10px;font-size:12px;}
#tab-availability .res div{padding:3px 0;}
#tab-availability .res .bad{color:#b91c1c;}
#tab-availability .gridwrap{overflow-x:auto;}
#tab-availability table.grid{table-layout:fixed;min-width:820px;}
#tab-availability table.grid th.namecol, #tab-availability table.grid td.namecol{width:150px;position:sticky;left:0;background:var(--surface);z-index:2;}
#tab-availability table.grid th.namecol{background:#f8fafc;}
#tab-availability table.grid th.daycol{text-align:center;width:1fr;}
#tab-availability table.grid td{padding:4px;}
#tab-availability .cell{border-radius:8px;padding:6px 7px;font-size:11px;line-height:1.35;cursor:pointer;border:1px solid transparent;min-height:52px;}
#tab-availability .cell:hover{outline:2px solid var(--primary);outline-offset:-2px;}
#tab-availability .cell .t{font-weight:700;display:block;}
#tab-availability .cell .b{color:var(--muted);display:block;margin-top:2px;}
#tab-availability .cell.on{background:var(--primary-light);border-color:#a7f3d0;color:#065f46;}
#tab-availability .cell.on .b{color:#047857;}
#tab-availability .cell.full{background:#fef3c7;border-color:#fde68a;color:#92400e;}
#tab-availability .cell.full .b{color:#b45309;}
#tab-availability .cell.off{background:#f8fafc;border-color:var(--border);color:#94a3b8;}
#tab-availability .cell.exc{background:#fee2e2;border-color:#fecaca;color:#991b1b;}
#tab-availability .cell.exc .b{color:#b91c1c;}
#tab-availability .cell.unset{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f5f9 6px,#f1f5f9 12px);border-color:var(--border);color:#94a3b8;}
#tab-availability .cell.overbooked{box-shadow:inset 0 0 0 2px var(--danger);}
#tab-availability .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px;}
#tab-availability .legend span{display:flex;align-items:center;gap:5px;}
#tab-availability .swatch{width:12px;height:12px;border-radius:3px;border:1px solid var(--border);display:inline-block;}
#tab-availability .days{display:flex;gap:3px;}
#tab-availability .days label{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer;text-transform:uppercase;}
#tab-availability .days input{margin:0;}
#tab-availability .dirty td{background:#fffbeb;}
#tab-availability .board{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr);gap:14px;}
@media(max-width:860px){
#tab-availability .board{grid-template-columns:1fr;}
}
#tab-availability .joblist{border:1px solid var(--border);border-radius:8px;max-height:460px;overflow-y:auto;}
#tab-availability .job{padding:9px 11px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;}
#tab-availability .job:last-child{border-bottom:0;}
#tab-availability .job:hover{background:#f8fafc;}
#tab-availability .job.sel{background:var(--primary-light);}
#tab-availability .job .nm{font-weight:600;}
#tab-availability .job .sub{font-size:11px;color:var(--muted);margin-top:2px;}
#tab-availability .cand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border);font-size:13px;}
#tab-availability .cand:last-child{border-bottom:0;}
#tab-availability .cand .why{font-size:11px;color:var(--muted);margin-top:2px;}
#tab-availability .candbox{border:1px solid var(--border);border-radius:8px;max-height:460px;overflow-y:auto;}
#tab-availability .badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;}
#tab-availability .badge.available{background:var(--primary-light);color:var(--primary);}
#tab-availability .badge.outside_hours{background:#e0e7ff;color:#3730a3;}
#tab-availability .badge.over_hours{background:#fef3c7;color:#92400e;}
#tab-availability .badge.not_rostered{background:#f1f5f9;color:#475569;}
#tab-availability .badge.no_roster{background:#f1f5f9;color:#475569;}
#tab-availability .badge.on_leave{background:#fee2e2;color:#991b1b;}
#tab-availability .badge.clash{background:#fee2e2;color:#991b1b;}
#tab-availability .badge.tag{background:#eff6ff;color:#1e40af;}
#tab-availability .modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
#tab-availability .modal.show{display:flex;}
#tab-availability .modal-inner{background:var(--surface);border-radius:var(--radius);padding:18px;width:100%;max-width:420px;}
#tab-availability .modal-inner h3{font-size:15px;margin-bottom:4px;}
#tab-availability .modal-inner .card-sub{margin-bottom:14px;}
#tab-availability .mfield{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:12px;}
#tab-availability .toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s;z-index:300;}
#tab-availability .toast.show{opacity:1;}
@media(max-width:640px){
#tab-availability table{font-size:12px;}
#tab-availability th, #tab-availability td{padding:6px;}
}