.schedule-pane { color:#223d31; --schedule-border:#dce5db; font-variant-numeric:tabular-nums; }
.schedule-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:25px 27px; background:#edf3ea; border:1px solid #dae5d7; border-radius:16px; }
.schedule-eyebrow { font-size:10px; font-weight:750; letter-spacing:1.5px; color:#64805e; }.schedule-heading h1 { font-size:clamp(23px,2.4vw,31px); letter-spacing:-.7px; font-weight:800; margin:7px 0; line-height:1.25; }.schedule-heading p,.schedule-help { font-size:12px; color:#6d7d6b; line-height:1.7; }
.schedule-primary,.schedule-secondary { border:1px solid #d5dfd2; background:#fff; color:#315e43; border-radius:9px; padding:9px 13px; font-size:12px; font-weight:700; min-height:40px; white-space:nowrap; }.schedule-primary { background:#205c41; color:white; border-color:#205c41; }.schedule-secondary:hover { background:#f2f6ee; }.schedule-primary:disabled { opacity:.6; }
.schedule-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.schedule-stats>div { background:#fff; padding:17px 18px; border:1px solid var(--schedule-border); border-radius:12px; min-width:0; }.schedule-stats span { display:block; font-size:11px; color:#76836d; }.schedule-stats strong { display:block; margin:7px 0; font-size:22px; font-weight:800; overflow-wrap:anywhere; line-height:1.3; }.schedule-stats small { display:block; font-size:11px; color:#7d8778; }
.schedule-notice { padding:12px 16px; background:#f0f5ec; border:1px solid #dce6d5; border-radius:10px; font-size:12px; line-height:1.7; color:#586b4e; }.schedule-notice.hidden { display:none; }.schedule-status { font-size:12px; min-height:20px; color:#4a7758; }.schedule-status.saving { color:#9b6c25; }.schedule-status.error,.schedule-error { color:#a93e32; }.schedule-error { font-size:13px; line-height:1.6; padding:8px 0; white-space:pre-wrap; }
.schedule-panel { background:#fff; border:1px solid var(--schedule-border); border-radius:13px; padding:17px; }.schedule-section-title { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-bottom:18px; align-items:center; }.schedule-section-title h2,.schedule-panel>h2 { font-size:16px; font-weight:750; }.schedule-section-title p { font-size:11px; color:#78836f; margin-top:5px; }
#personalUserControl { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }#personalUserControl.hidden { display:none; }#personalUserControl label { font-size:11px; font-weight:700; display:flex; flex-direction:column; gap:6px; }#personalUserControl select { border:1px solid #d6e0d2; border-radius:8px; min-width:230px; padding:9px; font-size:13px; }#personalUserControl>span { font-size:12px; color:#7b856e; }
.schedule-legend { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:10px; color:#788473; }.legend-dot { width:9px; height:9px; border-radius:3px; background:#e1e6dd; display:inline-block; }.legend-dot.selected { background:#39855b; }.legend-dot.available { background:#ecf4e4; border:1px solid #b7cca4; }
.personal-week,.roster-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; }.personal-day,.roster-day { min-width:0; }.schedule-day-heading { display:flex; flex-direction:column; gap:5px; padding:9px 7px 14px; text-align:center; font-size:12px; border-bottom:2px solid #e9eee4; margin-bottom:12px; }.schedule-day-heading strong { font-size:12px; font-weight:800; }.schedule-day-heading span { color:#7b876e; font-size:11px; }.is-today>.schedule-day-heading { border-bottom-color:#6b954e; background:#f1f6e9; border-radius:8px 8px 0 0; }.personal-shift { display:block; width:100%; padding:11px 9px; border:1px solid #d6e1ce; border-radius:10px; background:#f9fbf6; text-align:left; min-height:124px; transition:background .12s; }.personal-shift.available:hover { background:#edf6e3; border-color:#88ac69; }.personal-shift.selected { background:#246542; color:white; border-color:#246542; box-shadow:0 2px 6px #285f4017; }.personal-shift.unavailable { background:#f2f3ef; color:#9a9e91; border-color:#e3e6dc; }.personal-shift:disabled { cursor:default; }.personal-shift-top { display:flex; justify-content:space-between; align-items:center; gap:3px; }.personal-shift-top b { font-size:12px; }.personal-shift-top>span { font-size:18px; font-weight:750; }.personal-shift-time { display:block; font-size:11px; margin-top:7px; white-space:nowrap; }.personal-shift small { font-size:10px; display:block; margin-top:5px; opacity:.75; }.personal-shift-action { display:block; font-size:10px; margin-top:9px; }.shift-colleagues { font-size:9px; line-height:1.5; color:#7a856f; min-height:38px; margin:5px 0 12px; overflow-wrap:anywhere; }.schedule-day-total { border-top:1px solid #e8ece0; padding-top:10px; font-size:10px; color:#62734f; text-align:center; font-weight:700; }
.schedule-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }.schedule-toolbar label { display:flex; flex-direction:column; gap:6px; font-size:10px; color:#77836d; font-weight:600; }.schedule-toolbar label:first-child { flex:1; }.schedule-toolbar input,.schedule-toolbar select { border:1px solid #d7e1d0; border-radius:8px; background:white; min-height:40px; padding:9px 11px; font-size:12px; color:#36523b; min-width:150px; }
.roster-cell { padding:11px 9px; background:#fafcf6; border:1px solid #dfe8d5; border-top:3px solid #8aa97a; border-radius:9px; margin-bottom:12px; min-height:205px; display:flex; flex-direction:column; gap:7px; }.roster-cell.empty { background:#fff8f0; border-color:#f0dec7; border-top-color:#d39e60; }.roster-cell.shortage { background:#fffdf2; border-color:#ebe2bc; border-top-color:#bda647; }.roster-cell.over { border-color:#e6bbab; border-top-color:#b66e56; }.roster-cell-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; }.roster-cell-heading strong { font-size:12px; }.roster-cell-heading span { font-size:13px; font-weight:800; }.roster-time { font-size:9px; color:#7d8870; }.roster-state { font-size:10px; font-weight:750; color:#6c8258; }.empty .roster-state { color:#ae743b; }.shortage .roster-state { color:#968125; }.roster-staff { display:flex; flex-direction:column; gap:6px; padding:3px 0; flex:1; margin:0; list-style:none; }.roster-staff li { background:#fff; padding:6px 5px; border:1px solid #e5e9df; border-radius:5px; font-size:10px; font-weight:650; overflow-wrap:anywhere; }.roster-staff li small { font-size:8px; display:block; margin-top:2px; font-weight:400; color:#8a9380; }.roster-staff li.roster-vacant { background:transparent; border:0; font-weight:400; font-size:10px; color:#ad916e; }.roster-edit { width:100%; padding:8px 4px; border:1px solid #cad9be; background:#fff; border-radius:6px; color:#557240; font-size:10px; font-weight:750; min-height:36px; }.roster-edit:hover { background:#eaf2e1; }.roster-capacity { font-size:8px; color:#939c85; line-height:1.5; }
.schedule-table-scroll { overflow:auto; max-height:70vh; }.employee-roster,.schedule-audit-table { border-collapse:separate; border-spacing:0; width:100%; font-size:12px; }.employee-roster { min-width:900px; }.employee-roster th,.employee-roster td,.schedule-audit-table td,.schedule-audit-table th { padding:12px 10px; border-bottom:1px solid #e7ecdf; text-align:left; vertical-align:top; }.employee-roster thead th,.schedule-audit-table thead th { position:sticky; top:0; background:#f2f6ec; z-index:2; font-size:10px; color:#71825e; }.employee-roster th:first-child { position:sticky; left:0; background:#f8fbf4; z-index:1; min-width:150px; }.employee-roster thead th:first-child { z-index:3; }.employee-roster small,.schedule-audit-table small { display:block; font-size:10px; font-weight:400; line-height:1.6; color:#819074; margin-top:4px; }.employee-shift { display:block; width:100%; padding:7px 6px; border:1px solid #e5ebdd; border-radius:5px; margin-bottom:5px; font-size:10px; color:#9aab8a; white-space:nowrap; }.employee-shift.selected { background:#e3efda; color:#356238; border-color:#bed2ad; font-weight:750; }.employee-shift.dim { opacity:.35; }.schedule-audit-table { min-width:650px; }.schedule-warning-text { color:#a57928; }.schedule-ok-text { color:#497847; }.schedule-empty { padding:30px; text-align:center; font-size:13px; color:#7d8b71; }
.schedule-shortages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.schedule-shortages>button { padding:13px; display:flex; justify-content:space-between; align-items:center; gap:9px; background:#fff9ee; border:1px solid #f0e1c7; border-radius:9px; text-align:left; }.schedule-shortages span { font-size:10px; color:#9e8b6b; }.schedule-shortages strong { display:block; margin-top:6px; color:#77643f; font-size:12px; }.schedule-shortages b { font-size:11px; color:#ae7a35; }
.schedule-lock-badge { padding:7px 10px; background:#edf5e5; color:#5a7b3b; border:1px solid #d7e5c9; border-radius:8px; font-size:11px; font-weight:700; }.schedule-lock-badge.locked { background:#fff3e7; color:#ac7b3e; border-color:#ead4b4; }
.schedule-modal { position:fixed; inset:0; z-index:60; background:#10241880; display:flex; justify-content:center; align-items:center; padding:20px; }.schedule-modal.hidden { display:none; }.schedule-dialog { background:white; border-radius:17px; padding:25px; width:min(620px,100%); max-height:92dvh; overflow:auto; box-shadow:0 20px 70px #10291835; color:#30462f; }.schedule-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.schedule-dialog-heading h2 { font-size:23px; font-weight:800; margin:7px 0 10px; }.schedule-dialog-heading>button { font-size:16px; padding:5px; }.schedule-dialog>input[type=search] { width:100%; border:1px solid #d9e3d1; border-radius:9px; padding:11px 13px; font-size:13px; margin:12px 0; }#rosterEditorCount { font-size:11px; color:#7e8a6b; display:block; margin:2px 0 10px; }#rosterEditorPeople { max-height:38vh; overflow:auto; }.roster-person { display:flex; align-items:center; gap:12px; border:1px solid #e4eadd; border-radius:10px; padding:13px; margin-bottom:8px; cursor:pointer; }.roster-person.is-selected { border-color:#b2cb9b; background:#f0f7e7; }.roster-person input { width:19px; height:19px; accent-color:#4f8140; flex-shrink:0; }.roster-person strong { display:block; font-size:13px; }.roster-person small { display:block; margin-top:5px; font-size:10px; line-height:1.6; color:#8c967d; }.schedule-override { display:flex; gap:9px; align-items:flex-start; font-size:10px; line-height:1.7; color:#8d8164; padding-top:12px; }.schedule-override input { margin-top:3px; accent-color:#6c8c4d; }.schedule-dialog-footer { display:flex; justify-content:flex-end; gap:10px; padding-top:15px; margin-top:12px; border-top:1px solid #e8edde; }
@media(max-width:1250px) and (min-width:961px) { .roster-week { grid-template-columns:repeat(4,minmax(0,1fr)); }.personal-week { grid-template-columns:repeat(4,minmax(0,1fr)); }.personal-day,.roster-day { margin-bottom:15px; } }
@media(max-width:960px) { .personal-week,.roster-week { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.schedule-shortages { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .schedule-heading { flex-direction:column; align-items:stretch; padding:20px; }.schedule-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.schedule-stats>div { padding:13px; }.schedule-stats strong { font-size:20px; }.schedule-panel { padding:13px; }.personal-week,.roster-week { display:block; }.personal-day { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding-bottom:18px; margin-bottom:15px; border-bottom:1px solid #e5ebdc; }.personal-day .schedule-day-heading,.personal-day .schedule-day-total { grid-column:1/-1; }.personal-day .schedule-day-heading { flex-direction:row; justify-content:space-between; padding:9px; margin-bottom:3px; }.personal-day .personal-shift { grid-row:2; min-height:128px; padding:9px 7px; }.personal-day .shift-colleagues { grid-row:3; min-height:0; margin:0; }.personal-day .schedule-day-total { margin-top:5px; }.roster-day { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-bottom:13px; margin-bottom:12px; }.roster-day>.schedule-day-heading { grid-column:1/-1; margin-bottom:0; flex-direction:row; justify-content:space-between; }.roster-cell { padding:9px 6px; margin:0; }.roster-cell-heading strong { font-size:11px; }.roster-cell-heading span { font-size:11px; }.roster-time { font-size:8px; }.roster-state { font-size:9px; }.roster-edit { font-size:9px; }.schedule-toolbar>label:first-child { flex-basis:100%; }.schedule-toolbar>label { flex:1; min-width:0; }.schedule-toolbar select { min-width:0; width:100%; }.schedule-shortages { grid-template-columns:1fr; }.schedule-modal { padding:9px; }.schedule-dialog { padding:20px; }.schedule-dialog-heading h2 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .personal-shift { transition:none; } }
.schedule-heading { padding:18px 22px; }.schedule-heading h1 { font-size:27px; }.schedule-stats>div { padding:12px 15px; }.schedule-stats strong { font-size:20px; margin:5px 0; }#personalUserControl label { flex-direction:row; align-items:center; gap:12px; }#personalUserControl select { min-width:230px; max-width:320px; }.personal-shift { min-height:105px; padding:9px; }.personal-shift-action { margin-top:7px; }.shift-colleagues { min-height:27px; margin-bottom:8px; }.roster-cell { min-height:180px; }
@media(max-width:640px) { #personalUserControl label { flex-direction:column; align-items:flex-start; width:100%; }#personalUserControl select { width:100%; max-width:none; }.schedule-heading h1 { font-size:24px; }.personal-day .personal-shift { min-height:117px; } }
.schedule-pane.space-y-5> :not([hidden])~ :not([hidden]) { margin-top:12px; }.schedule-heading { padding:14px 20px; }.schedule-heading h1 { font-size:25px; margin:5px 0; }.schedule-stats>div { padding:10px 14px; }.schedule-stats strong { font-size:19px; }.schedule-notice { padding:9px 13px; font-size:11px; }#personalUserControl { padding:10px 14px; }#personalUserControl select { padding:7px 9px; }.personal-shift { min-height:96px; }.shift-colleagues { height:29px; min-height:29px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }.schedule-section-title { margin-bottom:10px; }
@media(min-width:641px) { .roster-week { grid-template-rows:auto repeat(3,minmax(180px,auto)); }.roster-day { display:grid; grid-row:span 4; grid-template-rows:subgrid; gap:10px; }.roster-day>.schedule-day-heading { grid-row:1; margin:0; }.roster-day>.roster-cell { margin:0; } }
@media(max-width:640px) { .roster-cell { grid-row:2 !important; }.personal-day .shift-colleagues { height:auto; min-height:29px; }.schedule-heading h1 { font-size:24px; } }
.roster-staff li { font-size:11px; }.roster-time { font-size:10px; }.roster-state,.roster-edit { font-size:11px; }.roster-capacity { font-size:9px; }
.schedule-day-heading { position:sticky; top:70px; z-index:5; background:#fff; }.is-today>.schedule-day-heading { background:#f1f6e9; }
@media(max-width:640px) { .roster-time,.roster-capacity { font-size:8px; }.roster-staff li { font-size:10px; }.roster-state,.roster-edit { font-size:9px; } }