:root{--ink:#111827;--muted:#64748b;--line:#e5e7eb;--soft:#f8fafc;--accent:#4f46e5}body{background:#f8fafc;color:var(--ink);min-height:100vh}.app-shell{max-width:1600px}.hero{background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid #fff;box-shadow:0 18px 45px rgba(15,23,42,.08);border-radius:24px}.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800}.status-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}.status-dot.offline{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)}.nav-tabs{border:0;gap:.35rem}.nav-tabs .nav-link{border:0;border-radius:999px;color:#475569;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.05);white-space:nowrap}.nav-tabs .nav-link.active{background:var(--ink);color:#fff}.tab-pane{background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:20px;padding:1rem;box-shadow:0 12px 35px rgba(15,23,42,.06)}.table-container{max-height:68vh;overflow:auto;border:1px solid var(--line);border-radius:16px}.schedule-table{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0;min-width:1050px}.schedule-table th,.schedule-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;padding:.3rem;background:#fff}.schedule-table thead th{position:sticky;top:0;z-index:3;background:#f8fafc}.time-cell{width:6.5rem;font-size:.78rem;font-weight:700;color:#475569;background:#f8fafc!important}.availability-cell{cursor:pointer;user-select:none;height:46px;transition:.12s}.availability-cell:hover{background:#eef2ff}.badge-sm{font-size:.68rem;padding:.3rem .45rem;margin:1px;color:#111827;border:1px solid rgba(15,23,42,.08)}.booking-card{display:grid;gap:.25rem}.booking-card input,.booking-card select{font-size:.72rem}.booked{background:#ecfdf5!important}.save-state{font-size:.8rem;color:var(--muted)}.controls-card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:.65rem}.small-muted{font-size:.8rem;color:var(--muted)}@media(max-width:768px){.hero{border-radius:18px}.tab-pane{padding:.6rem}.controls-card{width:100%}}.project-bar{background:rgba(255,255,255,.9);border:1px solid #fff;border-radius:18px;padding:.8rem 1rem;box-shadow:0 8px 25px rgba(15,23,42,.05)}.project-select{width:180px}.year-select{width:110px}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}.overview-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem;box-shadow:0 7px 22px rgba(15,23,42,.05)}.overview-card .metric{font-size:1.55rem;font-weight:800}.project-chip{font-size:.7rem;border-radius:999px;padding:.2rem .45rem;background:#eef2ff;color:#3730a3;font-weight:700}
.ready-slot{background:#ecfdf5!important;box-shadow:inset 0 0 0 2px #86efac}.ready-label{font-size:.64rem;font-weight:800;color:#15803d;margin-top:.15rem}.need-label{font-size:.62rem;font-weight:700;color:#b45309;margin-top:.15rem}.booking-card{border:1px solid var(--line);border-radius:10px;padding:.3rem;margin:.15rem 0}.booking-project{display:flex;justify-content:space-between;gap:.25rem;font-size:.65rem;font-weight:800;text-align:left}.booking-project span{color:#15803d}.slot-ready{background:#f0fdf4;border-color:#bbf7d0}.slot-not-ready{background:#fff7ed;border-color:#fed7aa}.slot-warning{font-size:.6rem;color:#b45309;text-align:left}.subject-id{font-weight:700}
.closed-slot{background:repeating-linear-gradient(135deg,#f8fafc,#f8fafc 8px,#eef2f7 8px,#eef2f7 16px)!important;color:#94a3b8!important;cursor:not-allowed!important}.scanner-booked{border:2px solid #64748b;background:#f8fafc}.scanner-booked .booking-project{font-weight:800}
.utility-bar,.calendar-view{background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:18px;padding:.8rem 1rem;box-shadow:0 8px 25px rgba(15,23,42,.05)}.view-date{width:150px}.search-wrap{position:relative;width:min(320px,100%)}.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.14);z-index:20;display:none;max-height:280px;overflow:auto}.search-result{padding:.6rem .75rem;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}.search-result:hover{background:#f8fafc}.search-result:last-child{border-bottom:0}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem}.cal-day{border:1px solid var(--line);border-radius:12px;min-height:115px;padding:.5rem;background:#fff}.cal-day.today{box-shadow:inset 0 0 0 2px var(--accent)}.cal-day.muted{opacity:.48}.cal-date{font-size:.75rem;font-weight:800;margin-bottom:.35rem}.cal-booking{font-size:.68rem;border-radius:8px;padding:.3rem .4rem;margin:.2rem 0;background:#eef2ff;border:1px solid #c7d2fe}.cal-booking.attended{background:#ecfdf5;border-color:#bbf7d0}.cal-booking.no_show{background:#fff7ed;border-color:#fed7aa}.day-list{display:grid;gap:.45rem}.day-row{display:grid;grid-template-columns:90px 1fr;gap:.6rem;border-bottom:1px solid var(--line);padding:.45rem 0}.attendance-select{font-size:.7rem!important}.attendance-pill{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.staff-manager-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(180px,1.4fr) auto;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line)}@media(max-width:700px){.calendar-grid{grid-template-columns:1fr}.cal-day{min-height:auto}.staff-manager-row{grid-template-columns:1fr}.view-date{width:100%}.search-wrap{width:100%}}

.topbar{min-height:38px}.sync-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem .75rem}.project-progress{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.project-progress>div:first-child{display:flex;align-items:baseline;gap:.65rem}.progress-label{font-size:.78rem;color:var(--muted);font-weight:700}.project-progress strong{font-size:1.15rem}.progress-meta{display:flex;gap:.8rem;color:var(--muted);font-size:.8rem}@media(max-width:576px){.project-progress{align-items:flex-start;flex-direction:column}.progress-meta{flex-wrap:wrap}}

.staff-email-editor{min-width:240px;flex:1}.staff-manager-row{gap:.75rem;align-items:center}@media(max-width:700px){.staff-manager-row{align-items:stretch}.staff-email-editor{min-width:100%}}

/* v13 compact system settings */
.settings-body{display:grid;gap:1rem}.settings-section{border:1px solid var(--bs-border-color);border-radius:14px;padding:1rem;background:#fff}.settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.settings-project-input{max-width:280px}.project-bar .d-flex{min-height:38px}.utility-bar #system-settings{margin-left:auto}@media(max-width:991.98px){.utility-bar #system-settings{margin-left:0}.settings-project-input{max-width:none;flex:1 1 220px}}

/* v16 booking dialog */
.schedule-subject,.edit-booking{border-radius:999px;font-weight:600}
.booking-note{margin-top:.5rem;padding:.45rem .6rem;border:1px solid var(--bs-border-color);border-radius:.55rem;background:rgba(255,255,255,.55);font-size:.78rem;white-space:pre-wrap}
.compact-status{max-width:135px}
#bookingModal .modal-content{border:0;border-radius:1rem;box-shadow:0 24px 70px rgba(15,23,42,.18)}
#bookingModal .modal-header,#bookingModal .modal-footer{border-color:#eef0f3}
#bookingModal textarea{resize:vertical}


/* v17 visual refinement */
:root{--ink:#172033;--muted:#6b7280;--line:#e7eaf0;--soft:#f7f8fb;--accent:#4856d8;--panel:#ffffff}
body{background:linear-gradient(180deg,#f7f8fb 0,#fbfcfe 34rem,#f8fafc 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app-shell{max-width:1540px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px}
.brand-mark{display:flex;align-items:center;gap:.55rem;font-weight:750;letter-spacing:-.02em;color:#293249;font-size:.95rem}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(72,86,216,.10)}
.sync-pill{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border:1px solid rgba(226,232,240,.9);box-shadow:0 4px 18px rgba(15,23,42,.035)}
.project-bar,.utility-bar,.calendar-view,.tab-pane{background:rgba(255,255,255,.88);border:1px solid rgba(226,232,240,.9);box-shadow:0 8px 30px rgba(15,23,42,.045);backdrop-filter:blur(14px)}
.project-bar{padding:.72rem .85rem;border-radius:16px}.project-controls{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.field-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.075em;color:#7a8497;font-weight:800}.project-select{width:210px}.year-select{width:100px}
.utility-bar{border-radius:16px;padding:.7rem .8rem}.utility-bar .btn,.project-bar .form-select,.utility-bar .form-control{border-radius:10px}.utility-bar .btn-group .btn{border-radius:0}.utility-bar .btn-group .btn:first-child{border-radius:10px 0 0 10px}.utility-bar .btn-group .btn:last-child{border-radius:0 10px 10px 0}
.project-progress{border:1px solid rgba(226,232,240,.95);box-shadow:0 6px 22px rgba(15,23,42,.035);border-radius:16px}
.nav-tabs .nav-link{box-shadow:none;border:1px solid #e8ebf1;background:rgba(255,255,255,.78);padding:.5rem .85rem}.nav-tabs .nav-link.active{border-color:var(--ink);box-shadow:0 5px 15px rgba(15,23,42,.10)}
.tab-pane{border-radius:18px;box-shadow:0 10px 32px rgba(15,23,42,.045)}.table-container{border-color:#e8ebf1;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.schedule-table th,.schedule-table td{border-color:#edf0f4}.schedule-table thead th{background:#fafbfc}.availability-cell:hover{background:#f3f5ff}.ready-slot{background:#f0fbf5!important;box-shadow:inset 0 0 0 1px #a7e6c1}.scanner-booked{background:#f7f8fb;border-color:#8a94a7}.booking-card{border-radius:12px;padding:.45rem}.schedule-subject{background:#1f2937;border-color:#1f2937;color:#fff}.schedule-subject:hover{background:#111827;border-color:#111827;color:#fff}
#bookingModal .modal-content,#settingsModal .modal-content{border:1px solid rgba(226,232,240,.9);border-radius:20px;box-shadow:0 28px 80px rgba(15,23,42,.18)}#bookingModal .modal-header,#settingsModal .modal-header{padding:1.15rem 1.25rem}.settings-section{border-color:#e8ebf1;border-radius:16px;background:#fbfcfd}
.connection-error{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:.75rem 1rem;box-shadow:0 6px 20px rgba(15,23,42,.035)}
.search-results{border-color:#e5e9f0;box-shadow:0 18px 45px rgba(15,23,42,.13)}.cal-day{border-color:#e8ebf1}.cal-day.today{box-shadow:inset 0 0 0 2px rgba(72,86,216,.65)}
@media(max-width:700px){.topbar{align-items:flex-start}.project-controls{align-items:stretch}.project-select{width:min(100%,260px)}.connection-error{align-items:flex-start;flex-direction:column}.utility-bar #system-settings{width:100%}}
/* v20: compact project membership controls */
.staff-edit-projects,#settings-staff-projects{min-height:72px}.staff-manager-row{align-items:flex-start}.staff-email-editor{min-width:240px}

.staff-select{width:210px}@media(max-width:700px){.staff-select{width:min(100%,260px)}}
.cal-booking-button{display:block;width:100%;text-align:left;border:0;font:inherit;cursor:pointer}.cal-booking-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* v28: consistent project colors in calendar overviews */
.cal-booking.cal-booking-button{background:var(--project-bg,#eef2ff);border:1px solid var(--project-border,#c7d2fe);color:#1f2937;transition:transform .12s ease,box-shadow .12s ease}.cal-booking.cal-booking-button:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,23,42,.08)}.cal-booking.cal-booking-button.attended,.cal-booking.cal-booking-button.no_show{background:var(--project-bg,#eef2ff);border-color:var(--project-border,#c7d2fe)}

.change-booking-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border,#e5e7eb)}.change-booking-row:last-child{border-bottom:0}.change-booking-row .min-w-0{min-width:0}