:root{
    --bg:#f3f6f9;
    --panel:#fff;
    --text:#172033;
    --muted:#64748b;
    --border:#dbe2ea;
    --accent:#2563eb;
    --accent2:#1d4ed8;
    --danger:#b91c1c;
    --warn:#92400e;
    --shadow:0 8px 24px rgba(15,23,42,.08)
}
 *{
    box-sizing:border-box
}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif
}
.container{
    max-width:1800px;
    margin:0 auto;
    padding:18px
}
.schedule-container{
    max-width:none;
    width:100%
}
.install-wrap{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px
}
.install-panel{
    max-width:780px;
    width:100%
}
.topnav{
    position:sticky;
    top:0;
    z-index:50;
    background:#0f172a;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 18px;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
    flex-wrap:wrap;
    gap:8px 14px
}
.brand{
    font-weight:750;
    font-size:16px
}
.navlinks{
    display:flex;
    gap:6px
}
.navlinks a{
    color:#dbeafe;
    text-decoration:none;
    padding:8px 11px;
    border-radius:7px
}
.navlinks a:hover,.navlinks a.active{
    background:#1e293b;
    color:white
}
.topnav-context{
    flex:0 0 100%;
    min-width:0;
    padding-top:8px;
    border-top:1px solid rgba(148,163,184,.24)
}
.schedule-header-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:7px;
    width:100%
}
.schedule-header-controls label{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    color:#cbd5e1;
    font-size:11px;
    font-weight:700
}
.schedule-header-controls label span{
    white-space:nowrap
}
.schedule-header-controls select{
    min-width:120px;
    max-width:220px;
    height:31px;
    padding:4px 7px;
    border-color:#475569;
    background:#1e293b;
    color:#fff
}
.schedule-header-controls label:first-child select{
    min-width:150px
}
.schedule-header-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px
}
.schedule-header-actions .btn,
.schedule-header-actions button{
    min-height:31px;
    padding:5px 9px;
    border-color:#475569;
    background:#1e293b;
    color:#e2e8f0
}
.schedule-header-actions .btn:hover,
.schedule-header-actions button:hover{
    background:#334155;
    color:#fff
}
.schedule-header-actions .btn.primary{
    border-color:#3b82f6;
    background:#2563eb;
    color:#fff
}
.schedule-header-actions .btn.primary:hover{
    background:#1d4ed8
}
.schedule-header-hint{
    margin-left:auto;
    padding-bottom:6px;
    color:#94a3b8;
    font-size:11px;
    white-space:nowrap
}
.schedule-container{
    padding:8px 10px 14px
}
.export-schedule-modal{
    width:min(560px,100%)
}
.export-schedule-modal .print-sheet-picker{
    min-width:0;
    margin:0;
    background:#fff
}
.export-schedule-modal .print-page-choices{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
}
.export-schedule-modal .print-page-choices label{
    padding:7px 8px;
    border:1px solid var(--border);
    border-radius:7px;
    background:#f8fafc
}
@media(max-width:980px){
    .schedule-header-hint{
        flex:1 1 100%;
        margin-left:0;
        padding-bottom:0
    }
}
@media(max-width:700px){
    .topnav{
        align-items:flex-start
    }
    .schedule-header-controls label{
        flex:1 1 180px
    }
    .schedule-header-controls select{
        width:100%;
        max-width:none
    }
    .schedule-header-actions{
        flex:1 1 100%
    }
    .export-schedule-modal .print-page-choices{
        grid-template-columns:1fr
    }
}
.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:16px;
    margin-bottom:16px
}
.panel h1,.panel h2,.panel h3{
    margin-top:0
}
.muted{
    color:var(--muted)
}
.small{
    font-size:12px
}
.flash{
    padding:10px 12px;
    border-radius:8px;
    margin:10px 0;
    border:1px solid transparent
}
.flash.success{
    background:#dcfce7;
    border-color:#86efac
}
.flash.error{
    background:#fee2e2;
    border-color:#fca5a5
}
.flash.warning{
    background:#fef3c7;
    border-color:#fcd34d
}
.toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:end;
    margin-bottom:12px
}
.toolbar label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:var(--muted)
}
input,select,textarea{
    font:inherit;
    border:1px solid #cbd5e1;
    border-radius:7px;
    padding:8px;
    background:white;
    color:var(--text)
}
input[type=color]{
    padding:2px;
    height:36px
}
.btn,button{
    display:inline-block;
    border:1px solid #cbd5e1;
    background:#fff;
    border-radius:7px;
    padding:8px 11px;
    color:#172033;
    text-decoration:none;
    cursor:pointer;
    font:inherit
}
.btn:hover,button:hover{
    background:#f8fafc
}
.btn.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:white
}
.btn.primary:hover{
    background:var(--accent2)
}
.btn.danger{
    background:#fff1f2;
    border-color:#fecdd3;
    color:#9f1239
}
.btn.small{
    padding:5px 8px;
    font-size:12px
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
}
.form-grid label{
    display:flex;
    flex-direction:column;
    gap:5px
}
.form-grid .span-2{
    grid-column:1/-1
}
.check{
    flex-direction:row!important;
    align-items:center
}
.check input{
    width:auto
}
.table-wrap{
    overflow:auto;
    border:1px solid var(--border);
    border-radius:10px;
    background:white
}
.schedule-table{
    border-collapse:separate;
    border-spacing:0;
    min-width:max-content;
    width:100%
}
.schedule-table th,.schedule-table td{
    border-right:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
    padding:5px;
    text-align:center;
    vertical-align:middle
}
.schedule-table thead th{
    position:sticky;
    top:0;
    background:#f8fafc;
    z-index:8
}
.schedule-table .sticky-col{
    position:sticky;
    left:0;
    z-index:9;
    background:#fff;
    min-width:220px;
    max-width:220px;
    text-align:left
}
.schedule-table thead .sticky-col{
    z-index:10;
    background:#f8fafc
}
.schedule-table .coverage-label{
    font-weight:700;
    background:#f1f5f9
}
.schedule-table .date-head{
    min-width:106px
}
.schedule-table .date-head.weekend{
    background:#fefce8
}
.date-dow{
    font-weight:700
}
.date-date{
    font-size:12px;
    color:var(--muted)
}
.coverage-cell{
    font-weight:800;
    min-width:106px
}
.coverage-cell small{
    display:block;
    font-weight:500;
    color:#334155
}
.staff-cell{
    font-weight:700
}
.staff-meta{
    font-size:11px;
    font-weight:500;
    color:var(--muted);
    margin-top:3px
}
.hours-pill{
    display:inline-block;
    border-radius:999px;
    background:#eef2ff;
    padding:2px 6px;
    margin-top:4px;
    font-size:11px
}
.hours-pill.hours-complete::after{
    content:"✓";
    color:#15803d;
    font-weight:900;
    margin-left:4px
}
.assignment-cell{
    min-width:106px;
    height:58px;
    cursor:pointer;
    position:relative;
    background:#fff
}
.schedule-table td.assignment-cell{
    border-right-color:#d1d5db;
    border-bottom-color:#d1d5db
}
.assignment-cell:not(.read-only){
    -webkit-user-select:none;
    user-select:none
}
.assignment-cell.weekend{
    background:#fffdf2
}
.assignment-cell.wrong-weekend{
    box-shadow:inset 0 0 0 2px #f59e0b
}
.shift-label{
    font-weight:750;
    font-size:12px
}
.shift-hours{
    font-size:11px;
    color:#475569
}
.status-label{
    font-weight:800;
    font-size:12px
}
.cell-note-badge{
    position:absolute;
    top:4px;
    right:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    line-height:1;
    cursor:help
}
.request-badge{
    display:block;
    margin-top:3px;
    font-size:10px;
    color:#7c3aed
}
.history-note{
    display:block;
    margin-top:3px;
    font-size:9px;
    color:#94a3b8
}
.empty-mark{
    color:#cbd5e1
}
.legend{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:8px 0
}
.legend span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12px
}
.legend i{
    width:14px;
    height:14px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:3px
}
.modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:18px
}
.modal-backdrop.open{
    display:flex
}
.modal{
    display:flex;
    flex-direction:column;
    width:min(640px,100%);
    max-height:90vh;
    overflow:hidden;
    background:#fff;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    padding:18px
}
.modal-head{
    display:flex;
    flex:0 0 auto;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start
}
.modal-head-copy{
    min-width:0
}
.modal h2{
    margin:0
}
.modal-subtitle{
    margin:4px 0 0
}
.modal-close{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text);
    font-size:22px;
    line-height:1;
    cursor:pointer
}
.modal-close:hover{
    background:#f8fafc
}
.modal-close:focus-visible{
    outline:2px solid #93c5fd;
    outline-offset:2px
}
.modal-form{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-height:0;
    overflow:hidden
}
.modal-content{
    flex:1 1 auto;
    min-height:0;
    margin-top:14px;
    overflow-y:auto;
    overscroll-behavior:contain
}
.choice-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:10px 0
}
.choice{
    padding:10px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    text-align:left
}
.choice.selected{
    border-color:#2563eb;
    box-shadow:inset 0 0 0 1px #2563eb;
    background:#eff6ff
}
.choice strong,.choice small{
    display:block
}
.modal-footer{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:12px;
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid var(--border)
}
.modal-footer-left,
.modal-footer-right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}
.modal-footer-right{
    justify-content:flex-end;
    margin-left:auto
}
.modal-field{
    display:block;
    margin-top:10px
}
.modal-field textarea{
    width:100%
}
.config-table{
    border-collapse:collapse;
    width:100%
}
.config-table th,.config-table td{
    border-bottom:1px solid var(--border);
    padding:7px;
    text-align:left;
    vertical-align:middle
}
.config-table input,.config-table select{
    width:100%
}
.section-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}

.staff-section-stack{
    grid-template-columns:1fr
}
.request-calendar{
    display:grid;
    grid-template-columns:repeat(7,minmax(90px,1fr));
    gap:7px
}
.day-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:9px;
    padding:8px;
    min-height:104px
}
.day-card.weekend{
    background:#fffdf0
}
.day-head{
    display:flex;
    justify-content:space-between;
    font-weight:700;
    margin-bottom:7px
}
.pref-buttons{
    display:grid;
    grid-template-columns:1fr;
    gap:4px
}
.pref-btn{
    padding:5px 6px;
    font-size:12px
}
.pref-btn.active{
    background:#dbeafe;
    border-color:#60a5fa
}
.pref-btn.off.active{
    background:#fee2e2;
    border-color:#f87171
}
.request-summary{
    padding:8px;
    border-radius:8px;
    background:#f8fafc;
    margin:8px 0
}
.suggestion{
    border-left:4px solid #60a5fa;
    padding:10px 12px;
    background:#fff;
    border-radius:8px;
    box-shadow:var(--shadow);
    margin-bottom:8px
}
.suggestion strong{
    display:block
}
.badge{
    display:inline-block;
    border-radius:999px;
    background:#e2e8f0;
    padding:2px 7px;
    font-size:11px
}
.badge.warn{
    background:#fef3c7
}
.badge.bad{
    background:#fee2e2
}
.badge.good{
    background:#dcfce7
}
.qr-wrap{
    text-align:center
}
.qr-wrap svg{
    max-width:340px;
    width:100%;
    height:auto;
    background:white;
    padding:12px;
    border:1px solid var(--border)
}
code{
    background:#f1f5f9;
    padding:2px 4px;
    border-radius:4px
}
@media(max-width:900px){
    .section-grid,.form-grid{
        grid-template-columns:1fr
    }
    .form-grid .span-2{
        grid-column:auto
    }
    .request-calendar{
        grid-template-columns:repeat(7,110px);
        overflow:auto
    }
    .topnav{
        align-items:flex-start;
        gap:8px
    }
    .navlinks{
        flex-wrap:wrap
    }
    .choice-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media print{
    .topnav,.no-print,.btn,button{
        display:none!important
    }
    .container{
        max-width:none;
        padding:0
    }
    .panel{
        box-shadow:none;
        border:none
    }
    .table-wrap{
        overflow:visible
    }
    .schedule-table .sticky-col,.schedule-table thead th{
        position:static
    }
}
 .config-list{
    display:flex;
    flex-direction:column
}
.config-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:8px;
    align-items:end;
    padding:9px 0;
    border-bottom:1px solid var(--border)
}
.config-row:last-child{
    border-bottom:0
}
.config-row label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:var(--muted)
}
.config-row .check{
    padding-bottom:8px
}
/* Compact employee request editor (v1.2) */
 .request-page{
    background:#eef2f6
}
.request-container{
    max-width:900px;
    padding:10px
}
.request-header-panel,.request-editor-panel{
    padding:12px;
    margin-bottom:10px
}
.request-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px
}
.request-title-row h1{
    font-size:20px;
    margin:0 0 2px
}
.request-person-form{
    margin-top:10px
}
.request-person-form label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--muted)
}
.request-person-form select{
    min-width:260px;
    max-width:100%;
    padding:6px 8px
}
.request-selector-form{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(260px,1fr);
    gap:10px
}
.request-selector-form label{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px
}
.request-selector-form select{
    width:100%;
    min-width:0
}
.request-locked{
    margin:0 0 10px
}
.request-pin-offer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:12px;
    padding:10px 12px;
    border:1px solid #dbe3ed;
    border-radius:10px;
    background:#f8fafc
}
.request-pin-offer>div{
    display:flex;
    flex-direction:column;
    gap:2px
}
.request-pin-locked-summary{
    border-color:#bfdbfe;
    background:linear-gradient(180deg,#eff6ff 0,#fff 100%)
}
[data-request-pin-modal]{
    align-items:stretch;
    justify-content:stretch;
    padding:0;
    background:#fff
}
.request-pin-modal{
    width:100vw;
    height:100vh;
    height:100dvh;
    max-height:none;
    border-radius:0;
    box-shadow:none;
    padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))
}
.request-pin-modal .modal-content{
    display:flex;
    flex-direction:column;
    justify-content:center
}
.request-pin-form{
    width:100%
}
.request-pin-keypad-shell{
    display:flex;
    flex-direction:column;
    gap:16px;
    width:min(410px,100%);
    margin:auto
}
.request-pin-step-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    text-align:center
}
.request-pin-step-copy strong{
    font-size:16px
}
.request-pin-display{
    display:grid;
    place-items:center;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #dbe3ed;
    border-radius:12px;
    background:#f8fafc
}
.request-pin-a11y{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.request-pin-dots{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
    width:min(250px,100%)
}
.request-pin-dot{
    width:8px;
    height:8px;
    border:1.5px solid #94a3b8;
    border-radius:999px;
    background:#fff;
    transition:background .1s ease,border-color .1s ease,transform .1s ease
}
.request-pin-dot.filled{
    border-color:#172033;
    background:#172033;
    transform:scale(1.05)
}
.request-pin-number-pad{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    width:min(320px,100%);
    margin:0 auto
}
.request-pin-key{
    min-height:58px;
    border:1px solid #cbd5e1;
    border-radius:13px;
    background:#fff;
    color:#172033;
    font-size:22px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    cursor:pointer;
    box-shadow:0 2px 5px rgba(15,23,42,.06);
    transition:background .1s ease,border-color .1s ease,box-shadow .1s ease,transform .05s ease
}
.request-pin-key:hover{
    border-color:#94a3b8;
    background:#f8fafc
}
.request-pin-key:active{
    transform:translateY(1px);
    box-shadow:none
}
.request-pin-key:focus-visible{
    outline:2px solid #60a5fa;
    outline-offset:2px
}
.request-pin-key-utility{
    background:#f8fafc;
    color:#475569;
    font-size:12px;
    font-weight:800
}
.request-pin-key-backspace{
    font-size:20px
}
.request-pin-feedback{
    min-height:18px;
    text-align:center
}
.request-pin-feedback.error{
    color:#b91c1c;
    font-weight:750
}
.request-pin-modal-actions{
    justify-content:flex-end
}
.request-pin-status{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:12px;
    padding:9px 11px;
    border:1px solid #bbf7d0;
    border-radius:10px;
    background:#f0fdf4
}
.request-pin-status-mark{
    display:grid;
    place-items:center;
    flex:0 0 24px;
    width:24px;
    height:24px;
    border-radius:999px;
    background:#166534;
    color:#fff;
    font-weight:900
}
.request-pin-status>div{
    display:flex;
    flex-direction:column;
    gap:1px
}
.request-instructions{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:10px
}
.request-period{
    border:1px solid var(--border);
    border-radius:9px;
    overflow:hidden;
    margin:10px 0;
    background:#fff
}
.request-period-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:7px 9px;
    background:#f8fafc;
    border-bottom:1px solid var(--border)
}
.request-period-head strong{
    margin-right:5px
}
.request-hours{
    font-weight:750;
    font-size:12px;
    background:#e0e7ff;
    border-radius:999px;
    padding:3px 8px;
    white-space:nowrap
}
.request-week{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:stretch;
    border-bottom:1px solid #edf0f3
}
.request-week:last-child{
    border-bottom:0
}
.request-week-label{
    display:grid;
    place-items:center;
    font-size:10px;
    font-weight:800;
    color:#64748b;
    background:#f8fafc;
    border-right:1px solid #edf0f3
}
.request-week-days{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:3px;
    padding:4px
}
.request-day{
    position:relative;
    min-width:0;
    height:59px;
    padding:3px 2px;
    border:1px solid #d7dee7;
    border-radius:6px;
    background:#fff;
    text-align:center;
    line-height:1.05;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    user-select:none
}
.request-day:hover{
    background:#f8fafc
}
.request-day:disabled{
    cursor:default;
    opacity:1
}
.request-day-dow{
    font-size:13px;
    font-weight:800
}
.request-day-date{
    font-size:11px;
    color:#64748b
}
.request-day-state{
    font-size:13px;
    font-weight:850;
    margin-top:1px
}
.request-day.state-none .request-day-state{
    color:#b7c0cc
}
.request-day.state-12{
    background:#dbeafe;
    border-color:#93c5fd
}
.request-day.state-8{
    background:#dcfce7;
    border-color:#86efac
}
.request-day.state-off{
    background:#fee2e2;
    border-color:#fca5a5
}
.request-day.state-off .request-day-state{
    color:#991b1b
}
.request-day.mandated-weekend,
.request-day.mandated-weekend:hover{
    box-shadow:inset 0 0 0 2px var(--request-weekend-color,#93c5fd)
}
.request-note{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:10px;
    font-size:12px;
    color:var(--muted)
}
.request-note textarea{
    width:100%;
    padding:7px
}
.request-submit-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px
}
.request-submit-row .btn{
    padding:7px 11px
}
 @media(max-width:600px){
    .request-container{
        padding:6px
    }
    .request-header-panel,.request-editor-panel{
        padding:8px;
        border-radius:8px
    }
    .request-title-row h1{
        font-size:18px
    }
    .request-person-form label{
        display:block
    }
    .request-person-form select{
        display:block;
        width:100%;
        min-width:0;
        margin-top:3px
    }
    .request-selector-form{
        grid-template-columns:1fr
    }
    .request-pin-offer{
        align-items:stretch;
        flex-direction:column
    }
    .request-pin-offer .btn{
        width:100%
    }
    .request-instructions{
        display:block
    }
    .request-instructions .small{
        margin-top:3px
    }
    .request-period-head{
        padding:6px
    }
    .request-period-head .small{
        display:block
    }
    .request-hours{
        font-size:11px
    }
    .request-week{
        grid-template-columns:22px minmax(0,1fr)
    }
    .request-week-days{
        gap:2px;
        padding:3px
    }
    .request-day{
        height:55px;
        padding:2px 1px;
        border-radius:5px
    }
    .request-day-dow{
        font-size:12px
    }
    .request-day-date{
        font-size:10px
    }
    .request-day-state{
        font-size:12px
    }
}
/* Schedule editor refinements (v1.3) */
 .schedule-table-wrap{
    max-height:calc(100vh - 145px);
    overflow:auto;
    position:relative;
    overscroll-behavior:contain
}
 .schedule-table .schedule-sticky-head{
    position:sticky;
    top:0;
    z-index:20
}
 .schedule-table .schedule-sticky-head th,.schedule-table .schedule-sticky-head td{
    position:relative;
    top:auto;
    background:#f8fafc;
    background-clip:padding-box
}
 .schedule-table .schedule-sticky-head .coverage-cell{
    background:#fff
}
 .schedule-table .schedule-sticky-head .coverage-label{
    background:#f1f5f9
}
 .schedule-table .schedule-sticky-head .sticky-col{
    position:sticky;
    left:0;
    z-index:24
}
 .schedule-table .coverage-row .coverage-label{
    font-size:11px;
    white-space:nowrap
}
 .schedule-table .coverage-cell{
    font-size:11px;
    line-height:1.15;
    height:32px;
    padding:3px 5px;
    cursor:help;
    white-space:normal
}
.coverage-role-number{
    font-size:13px;
    font-weight:900;
    white-space:nowrap
}
.coverage-role-separator{
    color:#94a3b8;
    margin:0 3px;
    font-weight:500
}
 .schedule-table .date-head{
    position:relative
}
 .assignment-cell.off-weekend{
    background:#fafafa
}
 .page-membership-field{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:var(--muted);
    min-width:220px
}
 .multi-checks{
    display:flex;
    flex-wrap:wrap;
    gap:5px 10px;
    align-items:center;
    border:1px solid #cbd5e1;
    border-radius:7px;
    padding:7px 8px;
    background:#fff;
    min-height:38px
}
 .multi-checks label{
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center;
    gap:4px;
    color:var(--text)!important;
    font-size:12px!important;
    white-space:nowrap
}
 .multi-checks input{
    width:auto!important;
    margin:0
}
 .staff-config-row .page-membership-field{
    align-self:stretch
}
 @media(max-width:900px){
    .schedule-table-wrap{
        max-height:calc(100vh - 110px)
    }
}
 @media print{
    .schedule-table-wrap{
        max-height:none;
        overflow:visible
    }
    .schedule-table .schedule-sticky-head{
        position:static
    }
    .schedule-table .schedule-sticky-head .sticky-col{
        position:static
    }
}
/* Configuration autosave + delete controls (v1.4) */
 .autosave-note{
    align-self:end;
    color:var(--muted);
    font-size:12px;
    padding:8px 0
}
 .autosave-row{
    transition:background-color .18s ease,opacity .18s ease
}
 .autosave-row.is-saving,.autosave-form.is-saving{
    opacity:.72
}
 .autosave-row.save-ok{
    background:#f0fdf4
}
 .autosave-row.save-error{
    background:#fff1f2
}
 .trash-btn{
    width:32px;
    height:32px;
    padding:6px;
    display:inline-grid;
    place-items:center;
    border:1px solid #fecaca;
    border-radius:7px;
    background:#fff1f2;
    color:#b91c1c;
    cursor:pointer
}
 .trash-btn:hover{
    background:#fee2e2;
    border-color:#fca5a5;
    color:#991b1b
}
 .trash-btn:disabled{
    opacity:.5;
    cursor:not-allowed
}
 .trash-btn svg{
    width:16px;
    height:16px;
    fill:currentColor;
    display:block
}
 .toast-container{
    position:fixed;
    top:68px;
    right:18px;
    z-index:300;
    display:flex;
    flex-direction:column;
    gap:8px;
    pointer-events:none;
    max-width:min(390px,calc(100vw - 24px))
}
 .config-toast{
    transform:translateY(-8px);
    opacity:0;
    transition:opacity .2s ease,transform .2s ease;
    padding:10px 13px;
    border-radius:9px;
    border:1px solid #86efac;
    background:#dcfce7;
    color:#166534;
    box-shadow:0 10px 28px rgba(15,23,42,.18);
    font-size:13px;
    font-weight:650
}
 .config-toast.error{
    border-color:#fca5a5;
    background:#fee2e2;
    color:#991b1b
}
 .config-toast.show{
    transform:translateY(0);
    opacity:1
}
 @media(max-width:600px){
    .toast-container{
        top:60px;
        right:8px;
        left:8px;
        max-width:none
    }
}
/* Configurable weekend + schedule-day coverage highlighting (v1.5) */
 .coverage-highlight-check{
    align-self:end;
    display:flex!important;
    flex-direction:row!important;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    padding-bottom:7px
}
 .coverage-highlight-check input{
    width:auto!important;
    margin:0
}
 .assignment-cell.coverage-day-highlight{
    background:var(--coverage-day-color,#fff)
}
/* Fast schedule editing, read-only archives, and editable groups (v1.6) */
 .schedule-edit-help{
    margin-top:6px;
    color:#475569
}
 .assignment-cell.cell-saving{
    opacity:.58;
    cursor:progress
}
 .assignment-cell.cell-saved{
    outline:2px solid #22c55e;
    outline-offset:-2px
}
 .assignment-cell.read-only{
    cursor:default
}
 .assignment-cell.read-only:hover{
    outline:none
}
/* Configuration tabs */
 .config-intro{
    margin-bottom:10px
}
.config-tabs-shell{
    min-width:0
}
.config-tabs{
    display:flex;
    gap:5px;
    align-items:flex-end;
    overflow-x:auto;
    overflow-y:hidden;
    padding:3px 4px 0;
    margin:0 0 12px;
    border-bottom:1px solid var(--border);
    scrollbar-width:thin
}
.config-tab{
    flex:0 0 auto;
    border:1px solid transparent;
    border-bottom:0;
    background:transparent;
    color:var(--muted);
    font-weight:750;
    padding:10px 15px;
    border-radius:9px 9px 0 0;
    margin-bottom:-1px
}
.config-tab:hover{
    background:#f8fafc;
    color:var(--text)
}
.config-tab.active{
    background:var(--panel);
    color:var(--accent2);
    border-color:var(--border);
    box-shadow:0 -3px 10px rgba(15,23,42,.035)
}
.config-tab:focus-visible{
    outline:2px solid #93c5fd;
    outline-offset:2px
}
.config-tab-panel{
    display:none;
    min-width:0
}
.config-tab-panel.active{
    display:block
}
.config-tab-panel>.panel:last-child,.config-tab-panel>.section-grid:last-child .panel{
    margin-bottom:16px
}
@media(max-width:600px){
    .config-tabs{
        gap:2px
    }
    .config-tab{
        padding:9px 11px;
        font-size:12px
    }
}
 
/* Configuration add-record sections */
.config-add{
    margin:0 0 14px;
    padding:12px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:9px
}
.config-add .toolbar{
    margin-bottom:0
}
.config-add > form + form{
    margin-top:8px
}
.request-action-form{
    display:inline-block;
    margin:0 6px 0 0
}
.request-action-form.is-saving{
    opacity:.7
}

/* Staff request notes */
.request-note-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:6px;
    cursor:help;
    font-size:14px;
    line-height:1;
}

/* Unit authentication and manager session controls */
.auth-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px
}
.auth-wrap{
    width:min(520px,100%)
}
.auth-panel{
    margin:0
}
.unit-name{
    display:block;
    margin-top:2px;
    color:#bfdbfe;
    font-size:11px;
    font-weight:600
}
.logout-form{
    display:inline-flex;
    margin:0 0 0 4px
}
.logout-form .btn{
    background:#1e293b;
    border-color:#334155;
    color:#e2e8f0
}
.logout-form .btn:hover{
    background:#334155
}
.recovery-qr code{
    overflow-wrap:anywhere
}

/* Role-specific coverage configuration */
.coverage-target-row{
    align-items:end
}
.coverage-target-fields{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:end
}
.coverage-target-fields label{
    min-width:90px
}
.coverage-target-fields input{
    width:82px
}
.coverage-colors-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px
}
.coverage-colors-heading h2{
    margin-bottom:4px
}
.coverage-role-tabs{
    display:flex;
    gap:4px;
    overflow-x:auto;
    margin:14px 0 0;
    padding:0 2px;
    border-bottom:1px solid var(--border);
    scrollbar-width:thin
}
.coverage-role-tab{
    flex:0 0 auto;
    border:1px solid transparent;
    border-bottom:0;
    border-radius:8px 8px 0 0;
    margin-bottom:-1px;
    padding:8px 12px;
    background:transparent;
    color:var(--muted);
    font-weight:700
}
.coverage-role-tab:hover{
    background:#f8fafc;
    color:var(--text)
}
.coverage-role-tab.active{
    background:var(--panel);
    color:var(--accent2);
    border-color:var(--border)
}
.coverage-role-tab:focus-visible{
    outline:2px solid #93c5fd;
    outline-offset:2px
}
.coverage-colors-panel{
    margin-top:14px
}
.coverage-role-rules[hidden]{
    display:none
}
.coverage-role-number{
    cursor:help
}

/* Multi-page paper schedule printing */
.print-sheet-picker{
    flex:1 1 100%;
    min-width:min(100%,560px);
    margin:2px 0 0;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#f8fafc
}
.print-sheet-picker legend{
    padding:0 4px;
    font-size:12px;
    font-weight:800
}
.print-page-choices{
    display:flex;
    flex-wrap:wrap;
    gap:5px 12px;
    margin-bottom:7px
}
.print-page-choices label{
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    font-size:12px;
    color:var(--text)
}
.print-page-choices input{
    width:auto;
    margin:0
}
.paper-print-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px
}
.paper-print-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end
}
.paper-print-sheet{
    page:paper-schedule;
    margin:0 0 18px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff
}
.paper-sheet-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:5px
}
.paper-sheet-header h1{
    margin:0;
    font-size:18px
}
.paper-sheet-order,.paper-role-order{
    font-size:11px
}
.paper-sheet-order{
    font-weight:800;
    text-align:right;
    white-space:nowrap
}
.paper-role-order{
    margin:0 0 5px
}
.paper-schedule-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed
}
.paper-schedule-table th,.paper-schedule-table td{
    border:1px solid #64748b;
    padding:3px 2px;
    text-align:center;
    vertical-align:middle
}
.paper-schedule-table .paper-staff-heading,.paper-schedule-table .paper-staff-cell{
    width:150px;
    text-align:left;
    padding-left:5px
}
.paper-week-head{
    font-size:9px;
    line-height:1.1;
    background:#f8fafc
}
.paper-date-head{
    font-size:9px;
    line-height:1.05
}
.paper-date-head small{
    display:block;
    font-size:9px;
    font-weight:500
}
.paper-date-head.weekend,.paper-assignment-cell.weekend{
    background:#fffdf2
}
.paper-schedule-table .week-start{
    border-left-width:2px
}
.paper-coverage-row th{
    font-size:9px;
    white-space:nowrap
}
.paper-coverage-cell{
    height:20px;
    font-size:9px;
    font-weight:800;
    line-height:1
}
.paper-role-count{
    font-size:12px
}
.paper-role-separator{
    margin:0 2px;
    font-weight:500
}
.paper-staff-cell strong,.paper-staff-cell small,.paper-assignment-cell strong,.paper-assignment-cell small{
    display:block
}
.paper-staff-cell{
    font-size:10px;
    line-height:1.15
}
.paper-staff-cell small{
    margin-top:2px;
    font-size:8px;
    font-weight:500
}
.paper-assignment-cell{
    height:38px;
    font-size:9px;
    line-height:1.05
}
.paper-assignment-cell small{
    margin-top:2px;
    font-size:8px
}
.paper-assignment-cell.assigned-weekend{
    background:var(--paper-weekend-color,#eef2ff)
}
.paper-empty-page{
    height:48px;
    text-align:left!important;
    padding-left:8px!important
}

@page paper-schedule{
    size:landscape;
    margin:0.18in
}

@media print{
    .paper-print-sheet{
        break-after:page;
        page-break-after:always;
        margin:0;
        padding:0;
        border:0;
        border-radius:0;
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact
    }
    .paper-print-sheet:last-child{
        break-after:auto;
        page-break-after:auto
    }
    .paper-sheet-header{
        margin-bottom:0.05in
    }
    .paper-sheet-header h1{
        font-size:10pt
    }
    .paper-sheet-order,.paper-role-order{
        font-size:6.4pt
    }
    .paper-role-order{
        margin-bottom:0.04in
    }
    .paper-schedule-table{
        width:100%;
        table-layout:fixed
    }
    .paper-schedule-table thead{
        display:table-header-group
    }
    .paper-schedule-table tr{
        break-inside:avoid;
        page-break-inside:avoid
    }
    .paper-schedule-table th,.paper-schedule-table td{
        padding:0.012in 0.006in;
        border:0.55pt solid #334155;
        overflow:hidden
    }
    .paper-schedule-table .week-start{
        border-left:1.15pt solid #475569
    }
    .paper-schedule-table .paper-staff-heading,.paper-schedule-table .paper-staff-cell{
        width:1.2in;
        padding-left:0.025in;
        overflow-wrap:anywhere
    }
    .paper-week-head{
        height:0.16in;
        font-size:5.2pt;
        white-space:nowrap
    }
    .paper-date-head{
        height:0.25in;
        font-size:5.1pt;
        white-space:nowrap
    }
    .paper-date-head small{
        font-size:4.6pt
    }
    .paper-coverage-row th,.paper-coverage-cell{
        height:0.15in;
        font-size:4.5pt;
        letter-spacing:-0.15pt
    }
    .paper-role-count{
        font-size:6pt
    }
    .paper-role-separator{
        margin:0 0.5px
    }
    .paper-staff-cell{
        font-size:5.6pt
    }
    .paper-staff-cell small{
        font-size:4.7pt
    }
    .paper-assignment-cell{
        height:0.32in;
        font-size:5.1pt;
        line-height:1
    }
    .paper-assignment-cell small{
        margin-top:1px;
        font-size:4.4pt
    }
}
/* Staff shift eligibility (v2.3) */
.shift-eligibility-field{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:var(--muted);
    min-width:280px
}
.shift-eligibility-field>.multi-checks{
    align-items:flex-start
}
.shift-eligibility-field .any-shift-option{
    font-weight:700
}
.shift-eligibility-field.allows-any-shift [data-specific-shift]+span{
    opacity:.5
}
.assignment-cell.wrong-shift{
    background-image:linear-gradient(rgba(126,34,206,.08),rgba(126,34,206,.08))
}
.shift-eligibility-badge{
    position:absolute;
    top:2px;
    right:3px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:#7e22ce;
    color:#fff;
    font-size:10px;
    line-height:16px;
    font-weight:900;
    text-align:center;
    z-index:2
}
.choice.shift-not-allowed{
    border-style:dashed;
    border-color:#a855f7;
    background:#faf5ff
}
.choice.shift-not-allowed::after{
    content:'Normally not allowed';
    display:block;
    margin-top:3px;
    font-size:10px;
    color:#7e22ce;
    font-weight:700
}
@media print{
    .shift-eligibility-badge,.schedule-cell-markers{display:none}
}

/* Compact staff configuration list + modal editor (v2.4 UI) */
.staff-panel-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px
}
.staff-panel-heading h2{
    margin-bottom:4px
}
.staff-panel-heading p{
    margin-top:0;
    max-width:760px
}
.staff-list-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:14px 0 8px
}
.staff-search{
    width:min(360px,100%)
}
.staff-search input{
    width:100%
}
.staff-summary-list{
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    background:#fff
}
.staff-summary-row{
    display:grid;
    grid-template-columns:minmax(180px,1.35fr) minmax(150px,.9fr) minmax(180px,1.15fr) auto auto;
    gap:14px;
    align-items:center;
    padding:10px 12px;
    border-bottom:1px solid var(--border)
}
.staff-summary-row:last-of-type{
    border-bottom:0
}
.staff-summary-row[hidden]{
    display:none
}
.staff-summary-primary,
.staff-summary-detail{
    min-width:0
}
.staff-summary-primary strong{
    display:block;
    font-size:14px;
    overflow-wrap:anywhere
}
.staff-summary-meta{
    display:flex;
    flex-wrap:wrap;
    gap:3px 10px;
    margin-top:3px;
    color:var(--muted);
    font-size:11px
}
.staff-summary-detail{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:12px;
    overflow-wrap:anywhere
}
.staff-summary-label{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase
}
.staff-summary-status,
.staff-summary-action{
    white-space:nowrap
}
.staff-filter-empty{
    padding:16px;
    text-align:center
}
.staff-edit-modal{
    width:min(760px,100%)
}
.staff-modal-section{
    padding:14px 0;
    border-top:1px solid var(--border)
}
.staff-modal-section h3{
    margin:0 0 10px;
    font-size:14px
}
.staff-modal-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.staff-modal-grid .page-membership-field,
.staff-modal-grid .shift-eligibility-field{
    min-width:0
}
.staff-active-field{
    align-self:end;
    min-height:38px
}
.staff-request-pin-control{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#f8fafc
}
.staff-request-pin-control>div{
    display:flex;
    flex-direction:column;
    gap:3px
}
.staff-request-pin-control small{
    color:var(--muted);
    line-height:1.35
}
.staff-request-pin-control .btn{
    flex:0 0 auto
}
.staff-modal-actions .trash-btn[hidden]{
    display:none
}
@media(max-width:900px){
    .staff-summary-row{
        grid-template-columns:minmax(0,1fr) auto;
        gap:8px 12px
    }
    .staff-summary-detail{
        grid-column:1 / -1
    }
    .staff-summary-status{
        grid-column:1
    }
    .staff-summary-action{
        grid-column:2;
        grid-row:1
    }
}
@media(max-width:620px){
    .staff-panel-heading,
    .staff-list-toolbar{
        align-items:stretch;
        flex-direction:column
    }
    .staff-panel-heading .btn,
    .staff-search{
        width:100%
    }
    .staff-modal-grid{
        grid-template-columns:1fr
    }
    .staff-modal-grid .span-2{
        grid-column:auto
    }
    .staff-request-pin-control{
        align-items:stretch;
        flex-direction:column
    }
    .staff-request-pin-control .btn{
        width:100%
    }
    .modal-footer{
        align-items:stretch;
        flex-direction:column-reverse
    }
    .modal-footer-left,
    .modal-footer-right{
        width:100%;
        margin-left:0
    }
    .modal-footer-right .btn{
        flex:1
    }
}

/* In-schedule suggestions drawer */
.suggestions-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(460px,94vw);
    background:#fff;
    border-left:1px solid var(--border);
    box-shadow:-18px 0 48px rgba(15,23,42,.2);
    z-index:96;
    transform:translateX(102%);
    transition:transform .2s ease;
    overflow-y:auto
}
.suggestions-drawer.open{
    transform:translateX(0)
}
.suggestions-drawer-scrim{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.16);
    z-index:95
}
.suggestions-drawer-scrim.open{
    display:block
}
body.suggestions-drawer-open{
    overflow:hidden
}
.suggestions-drawer-head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:16px;
    background:#fff;
    border-bottom:1px solid var(--border)
}
.suggestions-drawer-head h2{
    margin:0 0 2px
}
.suggestions-drawer-head>button{
    width:34px;
    height:34px;
    padding:0;
    font-size:22px;
    line-height:1
}
.suggestions-drawer-tools{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px 12px;
    padding:10px 16px 0
}
.suggestions-marker-toggles{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    margin-left:auto
}
.suggestions-marker-toggles label{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#475569;
    font-size:11px;
    font-weight:700;
    cursor:pointer
}
.suggestions-marker-toggles input{
    width:auto;
    margin:0
}
#suggestionsDrawerStatus{
    min-height:28px;
    padding:7px 16px 0
}
.suggestions-drawer-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    padding:6px 16px 0;
    border-bottom:1px solid var(--border)
}
.suggestions-drawer-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    padding:9px 8px 8px;
    border:1px solid #cbd5e1;
    border-bottom:0;
    border-radius:8px 8px 0 0;
    background:#f8fafc;
    color:#475569;
    font-size:12px;
    font-weight:800;
    cursor:pointer
}
.suggestions-drawer-tab[aria-selected="true"]{
    margin-bottom:-1px;
    background:#fff;
    color:#0f172a;
    border-color:#94a3b8;
    box-shadow:0 1px 0 #fff
}
.suggestions-drawer-tab:disabled{
    opacity:.42;
    cursor:not-allowed
}
.suggestions-drawer-tab:focus-visible{
    outline:2px solid #2563eb;
    outline-offset:1px
}
.suggestions-drawer-content{
    padding:0 16px 18px
}
.suggestions-tab-panel{
    padding:14px 0 0
}
.drawer-tab-message{
    padding:14px 0
}
.drawer-count{
    display:inline-grid;
    min-width:22px;
    height:22px;
    place-items:center;
    padding:0 6px;
    border-radius:999px;
    background:#e2e8f0;
    color:#475569;
    font-size:11px
}
.drawer-gap-list{
    list-style:none;
    padding:0;
    margin:0 0 7px;
    display:grid;
    gap:6px
}
.drawer-gap-list li{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 9px;
    border:1px solid #fde68a;
    border-radius:7px;
    background:#fffbeb;
    font-size:12px
}
.drawer-gap-list span{
    text-align:right
}
.drawer-suggestion-group{
    margin-bottom:12px;
    border:1px solid #e2e8f0;
    border-radius:9px;
    background:#fff;
    overflow:hidden
}
.drawer-suggestion-group-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-bottom:1px solid #e2e8f0;
    background:#f1f5f9
}
.drawer-suggestion-group-head span{
    color:var(--muted);
    font-size:11px
}
.drawer-suggestion-group .drawer-suggestion-card{
    margin:8px 8px 0
}
.drawer-suggestion-group .drawer-suggestion-card:last-child{
    margin-bottom:8px
}
.drawer-suggestion-card{
    display:grid;
    gap:5px;
    padding:10px;
    margin-bottom:8px;
    border:1px solid #bfdbfe;
    border-left:4px solid #60a5fa;
    border-radius:8px;
    background:#f8fbff
}
.drawer-suggestion-title{
    display:flex;
    justify-content:space-between;
    gap:10px
}
.drawer-suggestion-title span{
    color:var(--muted);
    white-space:nowrap
}
.drawer-suggestion-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-top:2px
}
.drawer-warning{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    padding:8px 0;
    border-top:1px solid #f1f5f9
}
.drawer-warning:first-of-type{
    border-top:0
}
.drawer-warning .btn{
    flex:0 0 auto
}
.drawer-good{
    margin:0;
    color:#166534
}
.drawer-loading{
    padding:18px 0;
    color:var(--muted)
}
.assignment-cell.suggestion-focus{
    outline:3px solid #2563eb;
    outline-offset:-3px;
    box-shadow:inset 0 0 0 1px #fff
}
.schedule-cell-markers{
    position:absolute;
    top:2px;
    left:3px;
    z-index:3;
    display:flex;
    flex-wrap:nowrap;
    gap:2px;
    pointer-events:none
}
.schedule-cell-marker{
    display:inline-grid;
    width:16px;
    height:16px;
    place-items:center;
    border-radius:999px;
    box-shadow:0 0 0 1px rgba(255,255,255,.9);
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1
}
.schedule-cell-marker-warning.bad{
    background:#dc2626
}
.schedule-cell-marker-warning.warn{
    background:#d97706
}
.schedule-cell-marker-suggestion{
    background:#2563eb
}
@media(max-width:620px){
    .suggestions-drawer{
        width:100vw
    }
    .drawer-gap-list li,
    .drawer-suggestion-title,
    .drawer-warning{
        align-items:flex-start;
        flex-direction:column
    }
    .drawer-gap-list span{
        text-align:left
    }
}

/* Scheduling rules / holiday configuration */
.scheduling-rules-form{max-width:900px}
.holiday-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.holiday-seed-form{margin:12px 0 18px;align-items:end;flex-wrap:wrap}
.holiday-add-form{width:100%}
.holiday-form-grid{max-width:960px}
.holiday-config-row{grid-template-columns:minmax(150px,.7fr) minmax(220px,1.2fr) minmax(320px,2fr) auto;align-items:start}
.holiday-groups{border:0;padding:0;margin:0;min-width:0}
.holiday-groups legend{font-size:.85rem;font-weight:600;margin-bottom:6px}
.holiday-group-checks{display:flex;flex-wrap:wrap;gap:6px 12px}
.holiday-group-checks label{white-space:nowrap}
@media(max-width:900px){.holiday-config-row{grid-template-columns:1fr}.holiday-config-row .holiday-groups{width:100%}}
.drawer-pattern-note{margin-top:6px;padding:6px 8px;border-left:3px solid currentColor;opacity:.9}
.schedule-table .date-head.holiday{box-shadow:inset 0 3px 0 rgba(180,83,9,.65)}

/* Required holiday highlighting */
.holiday-display-form{
    max-width:520px;
    margin:10px 0 14px
}
.holiday-display-form input[type="color"]{
    width:64px;
    min-height:38px;
    padding:2px
}
.schedule-table .date-head.required-holiday-date{
    box-shadow:inset 0 4px 0 var(--holiday-highlight-color,#facc15)
}
.assignment-cell.required-workday{
    border-right-color:var(--required-workday-color,#94a3b8);
    border-bottom-color:var(--required-workday-color,#94a3b8)
}
.assignment-cell.required-workday::after{
    content:"";
    position:absolute;
    inset:-1px;
    box-sizing:border-box;
    border:2px solid var(--required-workday-color,#94a3b8);
    border-radius:0;
    pointer-events:none;
    z-index:2
}
.request-day.required-holiday,
.request-day.required-holiday:hover{
    box-shadow:inset 0 0 0 2px var(--holiday-highlight-color,#facc15)
}

/* Schedule color editor */
.schedule-colors-modal{
    width:min(960px,100%)
}
.schedule-colors-modal .modal-content{
    overflow-x:hidden
}
.schedule-color-help{
    margin:0 0 14px;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#f8fafc
}
.schedule-color-selected-preview{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:0 0 16px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#fff
}
.schedule-color-selected-preview-table-wrap{
    flex:0 0 auto;
    max-width:100%;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff
}
.schedule-color-selected-preview-table{
    width:auto;
    min-width:0;
    --coverage-day-color:#f8fafc;
    --required-workday-color:#94a3b8
}
.schedule-color-selected-preview-table .assignment-cell{
    cursor:default
}
.schedule-color-selected-preview-table.empty{
    --coverage-day-color:#f8fafc;
    --required-workday-color:#cbd5e1
}
.schedule-color-selected-preview-table.coverage-highlight-disabled .coverage-day-highlight{
    background:#fff
}
.schedule-color-section + .schedule-color-section{
    margin-top:18px
}
.schedule-color-section h3{
    margin:0 0 8px
}
.schedule-color-role-picker{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 7px;
    font-size:12px;
    font-weight:700
}
.schedule-color-role-picker select{
    width:auto;
    min-width:150px
}
.schedule-color-list,
.schedule-color-role-list{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:7px
}
.schedule-color-role{
    min-width:0;
    padding:10px;
    border:1px solid var(--border);
    border-radius:9px
}
.schedule-color-role h4{
    margin:0 0 7px
}
.schedule-color-row{
    display:grid;
    width:100%;
    min-width:0;
    grid-template-columns:minmax(220px,1fr) minmax(44px,auto) minmax(92px,auto);
    align-items:center;
    gap:10px;
    padding:7px 0;
    border-bottom:1px solid #e2e8f0
}
.schedule-color-selectable-row{
    grid-template-columns:28px minmax(200px,1fr) minmax(44px,auto) minmax(92px,auto);
    cursor:pointer
}
.schedule-coverage-color-row{
    grid-template-columns:28px minmax(170px,1fr) minmax(44px,auto) minmax(116px,auto) minmax(92px,auto)
}
.schedule-color-row.selected{
    margin:0;
    padding-left:6px;
    padding-right:6px;
    border-radius:6px;
    background:#eff6ff
}
.schedule-color-row:last-child{
    border-bottom:0
}
.schedule-color-select-control{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    font-size:12px!important
}
.schedule-color-select-control input[type="radio"]{
    width:auto;
    min-height:0;
    margin:0
}
.schedule-color-copy{
    min-width:0
}
.schedule-color-copy strong,
.schedule-color-copy span{
    display:block
}
.schedule-color-copy span{
    margin-top:2px;
    color:var(--muted);
    font-size:11px
}
.schedule-color-preview{
    display:inline-flex;
    width:38px;
    height:30px;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    font-size:11px;
    font-weight:800
}
.schedule-color-preview.border-preview{
    border:3px solid var(--schedule-color-preview,#94a3b8);
    background:#fff
}
.schedule-color-preview.fill-preview{
    border:1px solid #94a3b8;
    background:var(--schedule-color-preview,#fff)
}
.schedule-color-row > label:not(.schedule-color-select-control){
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    color:var(--muted);
    font-size:11px
}
.schedule-color-highlight-control{
    justify-content:flex-start!important;
    color:var(--text)!important;
    white-space:nowrap
}
.schedule-color-highlight-control input[type="checkbox"]{
    width:auto!important;
    min-height:0;
    margin:0
}
.schedule-color-row input[type="color"]{
    width:52px;
    min-height:34px;
    padding:2px
}
@media(max-width:650px){
    .schedule-color-row{
        grid-template-columns:minmax(0,1fr) minmax(44px,auto) 78px
    }
    .schedule-color-selectable-row{
        grid-template-columns:24px minmax(0,1fr) minmax(44px,auto) 78px
    }
    .schedule-coverage-color-row{
        grid-template-columns:24px minmax(0,1fr) minmax(44px,auto) 28px 78px
    }
    .schedule-color-row > label:not(.schedule-color-select-control){
        font-size:0
    }
    .schedule-color-selected-preview{
        align-items:flex-start
    }
}