:root{--accent:#2563eb;--accent-soft:#eff6ff;--canvas:#f6f7fb;--success:#16a34a;--danger:#dc2626}
body{background:radial-gradient(circle at 78% -10%,#eaf1ff 0,transparent 28rem),var(--canvas);color:#172033}
.side{background:#111827}.brand{color:#fff}.nav a{color:#cbd5e1}.nav a:hover{background:#1f2937;color:#fff}.nav a.active{background:#fff;color:#111827;box-shadow:none}.side-note{background:#1f2937;color:#dbeafe;border-color:#334155}
.top{background:linear-gradient(180deg,rgba(246,247,251,.98) 72%,rgba(246,247,251,0))}.card{border:1px solid rgba(226,232,240,.9);box-shadow:0 10px 30px rgba(15,23,42,.055)}
.btn{background:var(--accent);box-shadow:0 5px 12px rgba(37,99,235,.18)}.btn.alt{box-shadow:none}.btn:hover{opacity:1;filter:brightness(.97);transform:translateY(-1px)}
.schedule-card{background:rgba(255,255,255,.92);border-radius:24px}.schedule-toolbar{padding-bottom:18px;border-bottom:1px solid #e8edf5}.schedule-toolbar h2{font-size:25px}.view-switch{background:#eef2f7;border:0}.view-switch .btn{background:#fff;color:#172033;box-shadow:0 2px 8px rgba(15,23,42,.08)}.view-switch .btn.alt{background:transparent;box-shadow:none}
.auto-schedule-bar{align-items:center;padding:12px 14px;border-radius:14px;background:#fff8e7;border:1px solid #fde7ad}.auto-schedule-bar:before{content:'Gợi ý nhanh';margin-right:auto;font-size:12px;font-weight:800;color:#946200;text-transform:uppercase;letter-spacing:.06em}
.quick-shift{margin-bottom:12px;border-color:#dce3ee;border-radius:16px;background:#fff}.quick-shift summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}.quick-shift summary::-webkit-details-marker{display:none}.quick-shift summary:after{content:'+';display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eef2f7;color:#475569;font-size:20px}.quick-shift[open] summary:after{content:'−'}.quick-shift summary small{margin-left:auto;color:#64748b;font-weight:500}
.bulk-scheduler{border-color:#bfdbfe;background:linear-gradient(135deg,#fff,#f5f9ff)}.bulk-scheduler summary span{color:#1d4ed8}.bulk-schedule-form{padding-bottom:14px}.bulk-grid{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr);gap:16px}.bulk-grid>label,.bulk-dates label{display:flex;flex-direction:column;gap:7px;font-weight:750}.bulk-grid select[multiple]{min-height:176px;padding:7px}.bulk-grid select[multiple] option{padding:8px;border-radius:7px}.bulk-grid small,.bulk-submit small{display:block;color:#64748b;font-weight:500}.bulk-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.weekday-picker{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:0;border:0}.weekday-picker legend{width:100%;margin-bottom:7px;font-weight:800}.weekday-picker label{cursor:pointer}.weekday-picker input{position:absolute;opacity:0;pointer-events:none}.weekday-picker span{display:grid;place-items:center;min-width:42px;height:38px;padding:0 10px;border:1px solid #dbe2ec;border-radius:10px;background:#fff;font-size:13px;font-weight:750}.weekday-picker input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:#1d4ed8;box-shadow:inset 0 0 0 1px var(--accent)}
.bulk-submit{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border-radius:14px;background:#eef6ff}.bulk-submit p{margin:0}.bulk-submit b{display:block;color:#1e3a8a}.bulk-submit .btn{white-space:nowrap}
.schedule-filters{position:sticky;top:74px;z-index:12;display:flex;align-items:end;gap:12px;margin:18px 0 14px;padding:12px;border:1px solid #e2e8f0;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(15,23,42,.08);backdrop-filter:blur(12px)}.schedule-filters>label:first-child{display:flex;flex:1;flex-direction:column;gap:5px}.schedule-filters label>span{font-size:12px;font-weight:800;color:#475569}.schedule-filters input[type=search]{min-height:42px;background:#f8fafc}.coverage-toggle{display:flex;align-items:center;gap:9px;min-height:42px;padding:0 12px;border-radius:10px;background:#fff3f3;white-space:nowrap}.coverage-toggle input{width:17px;height:17px}.coverage-toggle span{color:#991b1b!important}
.calendar-head div{background:#f8fafc;color:#475569}.day{background:#fff;border-color:#e8edf4}.day.coverage-low{background:linear-gradient(145deg,#fff,#fff8f7)}.coverage-dot{background:var(--danger);box-shadow:0 0 0 4px #fee2e2}.coverage-ok .coverage-dot{background:var(--success);box-shadow:0 0 0 4px #dcfce7}.shift{border:0;border-left:4px solid;box-shadow:none;font-size:12px}.shift b{font-size:12px}.shift.full{background:#eaf2ff;color:#174ea6}.shift.part_morning{background:#eafaf0;color:#13763c}.shift.part_afternoon{background:#fff4dd;color:#9a5b00}.shift.off{background:#f1f5f9;color:#64748b}.week-day{border-top-width:5px}.week-day header small{padding:4px 7px;border-radius:7px;background:#f1f5f9}
.shift[hidden],.day[hidden],.week-day[hidden]{display:none!important}
@media(max-width:900px){.bulk-grid{grid-template-columns:1fr}.bulk-dates{grid-template-columns:1fr 1fr}.schedule-filters{top:66px;flex-wrap:wrap}.schedule-filters>label:first-child{flex-basis:100%}.coverage-toggle{flex:1}.auto-schedule-bar:before{display:none}.quick-shift summary small{display:none}}
@media(max-width:560px){.schedule-card{border-radius:18px}.bulk-dates{grid-template-columns:1fr}.bulk-submit{align-items:stretch;flex-direction:column}.bulk-submit .btn{width:100%}.weekday-picker{display:grid;grid-template-columns:repeat(4,1fr)}.weekday-picker legend{grid-column:1/-1}.weekday-picker span{min-width:0}.schedule-filters{display:grid;grid-template-columns:1fr auto;top:62px}.schedule-filters>label:first-child{grid-column:1/-1}.coverage-toggle{white-space:normal}.schedule-toolbar h2{font-size:21px}}

/* v2.8 — bảng phân ca trực tiếp, luôn hiện toàn bộ nhân sự */
.staff-roster{display:flex;flex-direction:column;gap:7px}.staff-shift-row{display:grid;grid-template-columns:32px minmax(86px,1fr) minmax(112px,1fr);align-items:center;gap:8px;min-height:48px;padding:7px;border:1px solid #e2e8f0;border-left:4px solid #94a3b8;border-radius:11px;background:#fff;cursor:pointer;transition:.15s ease}.staff-shift-row:hover,.staff-shift-row:focus-within{border-color:#93c5fd;box-shadow:0 4px 12px rgba(37,99,235,.1);transform:translateY(-1px)}.staff-shift-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;white-space:nowrap}.staff-shift-row select{min-height:34px;padding:6px 7px;border:0;background:rgba(255,255,255,.7);font-size:12px;font-weight:750}.staff-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#e2e8f0;color:#334155;font-size:12px;font-weight:900}.staff-shift-row.full{border-left-color:#2563eb;background:#eff6ff}.staff-shift-row.part_morning{border-left-color:#16a34a;background:#f0fdf4}.staff-shift-row.part_afternoon{border-left-color:#f59e0b;background:#fffbeb}.staff-shift-row.off{border-left-color:#94a3b8;background:#f8fafc;color:#64748b}.staff-shift-row.annual_leave{border-left-color:#7c3aed;background:#f5f3ff}.staff-shift-row.sudden_leave{border-left-color:#dc2626;background:#fff1f2}.staff-shift-row.is-saving{opacity:.55;pointer-events:none}.week-day{min-width:240px}.day-board .week-day{width:min(100%,780px)}.day-board .staff-shift-row{grid-template-columns:38px minmax(150px,1fr) minmax(180px,.8fr);min-height:58px;padding:9px 12px}.day-board .staff-avatar{width:36px;height:36px;border-radius:11px}
.week-day.coverage-low header small{background:#fee2e2;color:#991b1b}.week-day.coverage-ok:not(:has(.staff-shift-row.part_morning)):not(:has(.staff-shift-row.full)) header small,.week-day.coverage-ok:not(:has(.staff-shift-row.part_afternoon)):not(:has(.staff-shift-row.full)) header small{background:#fee2e2;color:#991b1b}
@media(max-width:900px){.week-day{min-width:0}.staff-shift-row{grid-template-columns:36px minmax(120px,1fr) minmax(130px,.8fr);padding:8px 10px}.staff-shift-row select{min-height:40px}.week-shifts[hidden]{display:none!important}}
@media(max-width:480px){.staff-shift-row,.day-board .staff-shift-row{grid-template-columns:34px minmax(88px,1fr) minmax(108px,.9fr);padding:7px}.staff-shift-row b{font-size:12px}.staff-shift-row select{font-size:11px;padding:5px}.staff-avatar,.day-board .staff-avatar{width:31px;height:31px}}