@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&family=Poppins:wght@400;600;700&family=Unbounded:wght@500;600&display=swap');

:root { --red:#d5232c; --maroon:#5f1828; --gold:#fbb327; --coal:#000; --ink:#1d252a; --muted:#657279; --canvas:#f4f4f1; --line:#d9ddd9; --card:#fff; --blue:#1967a3; --green:#008b7a; --orange:#e0a800; --vehicle-1:#172033; --vehicle-2:#0057b8; --vehicle-3:#a61b2b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:15px/1.5 Almarai,ui-sans-serif,system-ui,sans-serif; }

.app-shell { min-height:100vh; }
aside { min-height:172px; display:grid; grid-template-columns:minmax(330px,460px) auto; grid-template-rows:78px 44px 44px; align-items:center; gap:0 28px; padding:0 max(28px,5vw); color:#fff; background:#000; border-top:6px solid #2f2f2f; border-bottom:1px solid #2b2b2b; }
aside nav { grid-column:1 / 3; display:flex; justify-content:flex-end; align-self:stretch; align-items:center; gap:26px; overflow:auto; border-top:1px solid #2b2b2b; }
aside .main-menu { grid-row:2; justify-content:flex-start; gap:20px; }
aside #nav { grid-row:3; justify-content:flex-start; }
aside #nav #switch-user { margin-left:auto; align-self:center; border-bottom:0; }
aside .main-menu a { flex:none; align-self:stretch; display:flex; align-items:center; border-bottom:4px solid transparent; color:#d9d9d9; font:700 10px/1 Poppins,Arial,sans-serif; letter-spacing:.1px; text-decoration:none; text-transform:uppercase; white-space:nowrap; }
aside .main-menu a:hover, aside .main-menu a.active { color:#fff; border-bottom-color:var(--gold); }
aside nav button { flex:none; align-self:stretch; padding:0; border:0; border-bottom:4px solid transparent; background:transparent; color:#d9d9d9; cursor:pointer; font:700 11px/1 Poppins,Arial,sans-serif; letter-spacing:.1px; text-transform:uppercase; }
aside nav button:hover, aside nav button.active { color:#fff; border-bottom-color:var(--gold); }
.account { grid-column:2; grid-row:1; justify-self:end; display:flex; align-items:center; gap:12px; white-space:nowrap; }
.account strong { font:600 10px Poppins,Arial,sans-serif; text-transform:uppercase; }
.account small { display:block; color:#d8d8d8; font:10px Poppins,Arial,sans-serif; }
.text-button { padding:11px 16px; border:0; border-radius:999px; background:linear-gradient(#d5232c,#a40008); color:#fff; cursor:pointer; font:700 10px/1 Poppins,Arial,sans-serif; text-transform:uppercase; }
main { width:100%; max-width:1760px; margin:0 auto; padding:36px clamp(22px,3.5vw,64px) 72px; }
main > header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:28px; }
.eyebrow { margin:0; color:var(--gold)!important; font:600 10px/1.2 Unbounded,sans-serif; letter-spacing:1.4px; text-transform:uppercase; }
h1 { margin:6px 0 0; color:var(--maroon); font:600 clamp(26px,2.2vw,34px)/1.2 Unbounded,sans-serif; letter-spacing:-1px; text-transform:uppercase; }
h2 { margin:0 0 6px; color:var(--maroon); font:600 16px/1.35 Unbounded,sans-serif; text-transform:uppercase; }
h3 { margin:0 0 8px; color:var(--maroon); font:600 13px Unbounded,sans-serif; text-transform:uppercase; }
p { margin:0; }.muted { color:var(--muted); }.small { font-size:13px; }

.card { padding:22px; border:1px solid var(--line); border-radius:0; background:var(--card); box-shadow:0 2px 6px rgba(19,21,22,.04); }
.grid { display:grid; gap:20px; }.two-col { grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr); align-items:start; }
.officer-workspace { gap:24px; }.officer-workspace > .card:first-child { padding:28px; }.officer-workspace > .card:nth-child(3) { padding:28px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }.section-head > div:last-child { flex:none; }
.month-control { display:flex; align-items:center; gap:8px; }.month-control strong { min-width:145px; text-align:center; font:600 12px Poppins,sans-serif; }
button, input, select { font:inherit; }
.month-control button, .secondary, button.primary, button.danger { padding:10px 14px; border:1px solid #cbd4db; border-radius:0; background:#fff; color:#435362; cursor:pointer; font:700 11px/1 Poppins,Arial,sans-serif; letter-spacing:.25px; text-transform:uppercase; }
button.primary, .primary { border-color:var(--gold)!important; background:var(--gold)!important; color:#fff!important; }.primary:hover { background:#d99a00!important; }
button.danger, .danger { border-color:var(--red); background:var(--red); color:#fff; }.secondary:hover { background:#f3f5f6; }
input, select { width:100%; padding:9px 10px; border:1px solid #cbd4db; border-radius:0; background:#fff; color:var(--ink); }
label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:700; }
.form-row { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)) auto; gap:12px; align-items:end; }
.notice { margin:16px 0; padding:12px 14px; border-left:4px solid var(--gold); background:#fbf7ef; color:#5b5142; font-size:13px; }

.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.stat { min-height:105px; padding:18px; border:1px solid var(--line); border-top:4px solid var(--gold); background:#fff; }
.stat b { display:block; color:var(--maroon); font:600 28px/1.1 Unbounded,sans-serif; letter-spacing:-1px; }.stat small { display:block; margin-top:8px; color:var(--muted); font:700 10px/1.3 Poppins,sans-serif; letter-spacing:.35px; text-transform:uppercase; }
.coverage { display:flex; gap:10px; align-items:center; padding:12px; border-left:4px solid var(--green); background:#eff9f5; color:#166149; }.coverage.warning { border-left-color:var(--orange); background:#fff5e9; color:#8b5618; }

.availability-grid, .officer-calendar, .published-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; width:100%; }
.day-label { padding:5px 0; color:var(--muted); font:700 13px/1 Poppins,sans-serif; letter-spacing:.55px; text-align:center; text-transform:uppercase; }
.availability-grid .holiday, .published-day .muted, .schedule-day .muted { color:var(--red)!important; font-weight:700; }
.officer-calendar .schedule-day { display:flex; flex-direction:column; }
.officer-calendar .schedule-holiday { display:block; margin-top:auto; padding-top:8px; color:var(--red); font:700 11px/1.25 Poppins,Arial,sans-serif; overflow-wrap:anywhere; }
.day { min-width:0; border:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); cursor:pointer; text-align:left; }
.day:hover { border-color:var(--gold); }.day.empty { visibility:hidden; }
.day .date { font-weight:800; }.legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; color:var(--muted); font-size:12px; }.dot { display:inline-block; width:9px; height:9px; margin-right:5px; background:var(--blue); border-radius:50%; }
.published-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.published-actions button[disabled] { opacity:.5; cursor:not-allowed; }.print-assignment-summary { display:none; }.published-day { min-width:0; min-height:128px; padding:8px; border:1px solid var(--line); border-radius:0; background:#fff; }.published-day.empty { border:0; background:transparent; }.published-date { display:block; margin-bottom:7px; font-size:15px; font-weight:800; }.published-assignment { margin:5px 0; padding:7px; border-left:5px solid var(--vehicle-1); border-radius:0; background:#f5f6f7; font-size:13px; line-height:1.35; overflow-wrap:anywhere; }.published-assignment strong { font-size:13px; }.published-shift-filter { cursor:pointer; }.published-shift-filter:hover { filter:brightness(1.12); }.published-shift-filter:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }.published-assignment.v1,.published-assignment.v2,.published-assignment.v3 { color:#fff; }.published-assignment.v1 { border-color:var(--vehicle-1); background:var(--vehicle-1); }.published-assignment.v2 { border-color:var(--vehicle-2); background:var(--vehicle-2); }.published-assignment.v3 { border-color:var(--vehicle-3); background:var(--vehicle-3); }.published-assignment.unassigned { border-color:#d40000; background:#fff0f0; color:#8b0000; }.my-assignment-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.published-calendar-footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-top:4px solid var(--gold); background:#fff; color:var(--ink); }.legend-title { grid-column:1/-1; font:700 12px Poppins,sans-serif; letter-spacing:.6px; text-transform:uppercase; }.vehicle-legend { display:flex; gap:9px; align-items:flex-start; min-width:0; }.vehicle-legend i { display:block; flex:none; width:11px; height:42px; background:var(--vehicle-1); }.vehicle-legend.v2 i { background:var(--vehicle-2); }.vehicle-legend.v3 i { background:var(--vehicle-3); }.vehicle-legend strong { display:block; font:700 13px Poppins,sans-serif; }.vehicle-legend small { display:block; color:var(--muted); font-size:11px; line-height:1.35; overflow-wrap:anywhere; }

table { width:100%; border-collapse:collapse; font-size:14px; } th { padding:12px 10px; border-bottom:1px solid var(--line); color:var(--muted); font:700 10px Poppins,sans-serif; letter-spacing:.5px; text-align:left; text-transform:uppercase; } td { padding:12px 10px; border-bottom:1px solid #eef1f3; vertical-align:middle; }.table-wrap { overflow:auto; } td small.muted { display:block; margin-top:3px; font-size:11px; line-height:1.3; }.badge { display:inline-block; padding:4px 7px; border-left:3px solid var(--gold); background:#f3ebde; color:var(--maroon); font-size:11px; font-weight:700; }.badge.vehicle-1 { border-color:var(--vehicle-1); }.badge.vehicle-2 { border-color:var(--vehicle-2); }.badge.vehicle-3 { border-color:var(--vehicle-3); }.badge.alert { border-color:var(--red); background:#fff0f0; color:var(--red); }.assignment-actions { white-space:nowrap; }.assignment-actions button { margin-left:5px; }
.member-card { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }.member-card:last-child { border-bottom:0; }
.availability-modal { width:min(760px,100%)!important; }.manual-calendar-assignment { margin-top:18px; padding-top:18px; border-top:2px solid var(--gold); }.manual-calendar-assignment h3 { margin-bottom:4px; }.manual-calendar-assignment form { margin-top:12px; }
.hours-control { position:relative; display:flex; min-width:0; }
.hours-control > input[name="hours"] { flex:1 1 auto; min-width:0; border-radius:6px 0 0 6px; }
.hours-picker-toggle { flex:0 0 42px; border:1px solid #cbd4db; border-left:0; border-radius:0 6px 6px 0; background:#fff; color:#435362; cursor:pointer; font:700 23px/1 Arial,sans-serif; }
.hours-picker-toggle:hover,.hours-picker-toggle:focus-visible { background:#f5f7f8; outline:2px solid var(--gold); outline-offset:1px; }
.hours-picker { position:absolute; z-index:40; top:calc(100% + 6px); left:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:min(320px,90vw); padding:14px; border:1px solid #cbd4db; border-radius:8px; background:#fff; box-shadow:0 12px 28px rgba(19,21,22,.2); color:#435362; font:700 12px/1.4 Poppins,Arial,sans-serif; }
.hours-picker[hidden] { display:none; }
.hours-picker > span { display:grid; gap:5px; }
.hours-picker input[type="time"] { min-width:0; width:100%; }
.hours-picker-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; }
.hours-picker-actions button { padding:9px 11px; }
.availability-modal:has(.hours-picker:not([hidden])) { overflow:visible; }
.availability-modal.assignment-edit-modal { width:min(940px,100%)!important; }
#toast { position:fixed; right:24px; bottom:24px; z-index:20; padding:12px 16px; background:#000; color:#fff; box-shadow:0 6px 22px rgba(0,0,0,.25); opacity:0; transform:translateY(90px); transition:.25s; }#toast.show { opacity:1; transform:translateY(0); }
.scheduler-priority-list { display:grid; margin-top:18px; border-top:1px solid var(--line); }
.scheduler-priority { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.priority-number { display:grid; place-items:center; width:34px; height:34px; background:#f3ebde; color:var(--maroon); font:700 13px Poppins,Arial,sans-serif; }
.scheduler-priority strong { color:var(--ink); font:700 13px Poppins,Arial,sans-serif; }.scheduler-priority p { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.4; }
.scheduler-priority-actions { display:flex; align-items:center; gap:6px; }.scheduler-priority-actions button { min-width:34px; padding:9px 10px; font-size:15px; }.scheduler-priority-actions button:disabled { opacity:.35; cursor:not-allowed; }
.admin-actions { margin-top:18px; }
.admin-header { padding-bottom:0; }.admin-subnav { display:flex; gap:8px; margin-top:18px; }.admin-subnav button { padding:11px 16px; border:1px solid var(--line); border-bottom:0; border-radius:0; background:#f6f7f8; color:var(--muted); cursor:pointer; font:700 11px/1 Poppins,Arial,sans-serif; letter-spacing:.3px; text-transform:uppercase; }.admin-subnav button.active { border-color:var(--gold); background:var(--gold); color:#fff; }

@media (max-width:900px) { aside { grid-template-columns:minmax(220px,300px) auto; padding:0 24px; } aside nav { gap:16px; } aside nav button,aside .main-menu a { font-size:9px; } main { padding:30px 22px 58px; }.two-col { grid-template-columns:1fr; }.form-row { grid-template-columns:repeat(2,minmax(0,1fr)); }.form-row button { grid-column:1/-1; }.published-day { min-height:120px; } }
@media (max-width:620px) { aside { min-height:0; grid-template-columns:1fr auto; grid-template-rows:auto auto auto; padding:13px 16px 0; } .account { grid-column:2; grid-row:1; }.account strong,.account small { display:none; }.text-button { padding:10px 12px; font-size:9px; } aside nav { grid-column:1 / 3; justify-content:flex-start; gap:14px; } aside .main-menu { grid-row:2; } aside #nav { grid-row:3; } aside #nav #switch-user { margin-left:auto; } main { padding:25px 14px 52px; } main > header,.section-head { flex-direction:column; } main > header > button,.section-head > div:last-child,.month-control { width:100%; }.month-control { justify-content:space-between; }.stat-grid { grid-template-columns:1fr; }.form-row { grid-template-columns:1fr; }.availability-grid,.published-calendar { gap:4px; }.day-label { font-size:8px; }.published-day { min-height:94px; padding:5px; font-size:10px; }.published-assignment,.published-assignment strong { padding:4px; font-size:9px; }.legend { gap:8px; font-size:10px; }.published-actions { justify-content:flex-start; } }
@media (max-width:620px) { .scheduler-priority { grid-template-columns:34px minmax(0,1fr); }.scheduler-priority-actions { grid-column:2; }.scheduler-priority-actions .badge { margin-top:3px; } }
@media (max-width:620px) { .admin-subnav { display:grid; grid-template-columns:1fr 1fr; }.admin-subnav button { padding:11px 8px; } }

.mobile-schedule-view { display:none; }
@media screen and (max-width:820px) and (orientation:portrait) {
  .published-calendar,.officer-calendar { display:none!important; }
  .mobile-schedule-view { display:block; min-width:0; }
  #published-calendar .section-head { flex-direction:column; align-items:stretch; }
  #published-calendar .published-actions { width:100%; justify-content:flex-start; }
  .mobile-agenda-picker { padding:15px; background:#1d252a; color:#fff; border-top:4px solid var(--gold); }
  .mobile-picker-title { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 0 9px; color:#fff; font:700 15px/1.3 Poppins,Arial,sans-serif; }
  .mobile-picker-title span { color:#d9d6ce; font:500 10px/1.3 Poppins,Arial,sans-serif; text-align:right; }
  .mobile-date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
  .mobile-date-weekday { padding:4px 0; color:#e7c878; font:700 10px/1 Poppins,Arial,sans-serif; text-align:center; }
  .mobile-date-empty { display:block; }
  .mobile-date-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:0; min-height:42px; padding:3px; border:1px solid transparent; border-radius:6px; background:transparent; color:#fff; cursor:pointer; font:600 13px/1 Poppins,Arial,sans-serif; }
  .mobile-date-day.today:not(.selected) { border-color:#bfa56a; }
  .mobile-date-day.selected { background:var(--gold); color:#241b13; font-weight:800; }
  .mobile-date-day:focus-visible { outline:2px solid #fff; outline-offset:1px; }
  .mobile-date-day i { width:5px; height:5px; border-radius:50%; background:#f7bd35; }
  .mobile-date-day.selected i { background:#5f1828; }
  .mobile-agenda-list { scroll-margin-top:12px; }
  .mobile-agenda-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px 2px 10px; border-bottom:2px solid var(--gold); }
  .mobile-agenda-toolbar h3 { margin:4px 0 0; font-size:15px; }
  .mobile-agenda-stepper { display:flex; gap:6px; }
  .mobile-agenda-stepper button { width:36px; height:36px; padding:0; border:1px solid var(--line); background:#fff; color:var(--maroon); font-size:25px; line-height:1; cursor:pointer; }
  .mobile-agenda-stepper button:disabled { opacity:.35; cursor:not-allowed; }
  .mobile-agenda-day { padding:15px 0 4px; border-bottom:1px solid var(--line); }
  .mobile-agenda-day-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-bottom:9px; }
  .mobile-agenda-day-heading h3 { margin:0; color:var(--maroon); font:700 14px/1.3 Poppins,Arial,sans-serif; text-transform:none; }
  .mobile-agenda-day-heading small { display:block; color:var(--red); font-size:11px; font-weight:700; }
  .mobile-add-shift { flex:none; padding:7px 8px; border:1px solid var(--gold); background:#fff8e9; color:var(--maroon); font:700 10px Poppins,Arial,sans-serif; cursor:pointer; }
  .mobile-schedule-card { display:grid; grid-template-columns:minmax(75px,100px) minmax(0,1fr) 12px; align-items:center; gap:10px; width:100%; min-height:66px; margin:0 0 8px; padding:10px 12px; border:1px solid #dce1e5; border-left:5px solid var(--vehicle-1); background:#fff; color:var(--ink); box-shadow:0 2px 5px rgba(20,26,29,.06); text-align:left; font:inherit; }
  button.mobile-schedule-card { cursor:pointer; }
  button.mobile-schedule-card:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
  .mobile-schedule-card.v2 { border-left-color:var(--vehicle-2); }
  .mobile-schedule-card.v3 { border-left-color:var(--vehicle-3); }
  .mobile-schedule-card.unassigned { border-left-color:var(--red); background:#fff5f5; }
  .mobile-card-time { color:#36434d; font:700 11px/1.3 Poppins,Arial,sans-serif; }
  .mobile-card-content { min-width:0; }
  .mobile-card-content strong { display:block; overflow-wrap:anywhere; color:var(--maroon); font:700 13px/1.35 Poppins,Arial,sans-serif; }
  .mobile-card-content small { display:block; margin-top:3px; color:var(--muted); font:500 11px/1.3 Poppins,Arial,sans-serif; }
  .mobile-card-chevron { color:var(--muted); font-size:22px; }
  .mobile-agenda-empty { padding:10px 1px 17px; color:var(--muted); font-size:12px; }
  .mobile-agenda-more { width:100%; min-height:43px; margin:15px 0 4px; border:1px solid var(--gold); background:#fff8e9; color:var(--maroon); cursor:pointer; font:700 11px Poppins,Arial,sans-serif; text-transform:uppercase; }
  .published-calendar-footer { grid-template-columns:1fr; gap:10px; }
  .legend-title { grid-column:1; }
}
@media screen and (max-width:390px) and (orientation:portrait) {
  .mobile-picker-title span { max-width:120px; }
  .mobile-schedule-card { grid-template-columns:73px minmax(0,1fr) 9px; gap:7px; padding:9px; }
}
@media screen and (max-width:620px) and (orientation:portrait) {
  #app > .print-exclude .stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  #app > .print-exclude .stat { min-height:83px; padding:10px 7px; }
  #app > .print-exclude .stat b { font-size:18px; }
  #app > .print-exclude .stat small { font-size:8px; line-height:1.2; }
}
@media print { .mobile-schedule-view { display:none!important; }.published-calendar,.officer-calendar { display:grid!important; } }

/* Match the Box 55 form controls on iPad landscape: native date/time widgets
   get a real gutter and all four My Availability controls share one width. */
@media (min-width:801px) and (max-width:1400px) {
  #availability-form .form-row {
    /* The Availability card shares a two-column page with the calendar.
       Auto-fit prevents four fixed controls from escaping that narrower card. */
    grid-template-columns:repeat(auto-fit,minmax(204px,1fr));
    gap:16px;
    justify-content:start;
  }
  #availability-form .form-row label { min-width:0; padding-inline-end:24px; }
  #availability-form .form-row input[type="date"],
  #availability-form .form-row input[type="time"] {
    box-sizing:border-box;
    inline-size:100%;
    min-inline-size:0;
    max-inline-size:100%;
    margin-inline-end:0;
  }
}

@media print { @page { size:landscape; margin:.15in; } body { background:#fff; font-size:10pt; } header.topbar, .mission-strip { display:none!important; } main { max-width:none; padding:0; } #published-calendar { padding:.16in!important; border:1.5px solid #1d252a!important; box-shadow:none!important; } #published-calendar .section-head { align-items:center; margin:0 0 7px; padding:9px 12px; border-bottom:4px solid var(--gold); background:#151515; } #published-calendar h2 { margin:2px 0; color:#fff; font-size:24px; } #published-calendar .eyebrow { color:var(--gold)!important; font-size:8px; } #published-calendar .muted { color:#e2e5e6; font-size:9px; } .published-calendar { grid-template-rows:18px repeat(5, 1.12in); gap:3px; } .published-calendar:has(.published-day:nth-child(43)) { grid-template-rows:18px repeat(6, .9in); } .published-calendar .day-label { padding:3px 0; color:#374047; font-size:10px; } .published-day { min-height:0; height:auto; padding:3px; overflow:hidden; } .published-date { margin-bottom:2px; font-size:11px; } .published-assignment { margin:2px 0; padding:2px 3px; border-left-width:3px; line-height:1.1; } .published-assignment > :not(.print-assignment-summary),.published-assignment br { display:none!important; } .print-assignment-summary { display:block; overflow:hidden; color:#1d252a; font:700 6px/1.1 Poppins,Arial,sans-serif; text-overflow:clip; white-space:nowrap; } .published-calendar-footer { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:7px; padding:7px 9px; border-top-width:3px; } .legend-title { grid-column:1/-1; font-size:9px; }.vehicle-legend { gap:6px; }.vehicle-legend i { width:8px; height:30px; }.vehicle-legend strong { font-size:9px;}.vehicle-legend small { font-size:7.5px; line-height:1.2; overflow-wrap:anywhere; } }

@media print {
  #published-calendar { display:flex; flex-direction:column; min-height:7.9in; }
  #published-calendar .published-calendar { grid-template-rows:18px repeat(5,1.04in); }
  #published-calendar .published-calendar:has(.published-day:nth-child(43)) { grid-template-rows:18px repeat(6,.84in); }
  #published-calendar footer.published-calendar-footer { display:grid!important; margin-top:auto; break-inside:avoid; }
  #demo-focus, #toast { display:none!important; }
}

/* The shared /styles.css owns the complete Box 55 header. Schedule adds only
   its page-specific demo control; geometry, logo, menus and account use it. */
header.topbar { margin:0; }
header.topbar #switch-user { margin-left:auto; align-self:center; }
.form-subnav [hidden], #switch-user[hidden], #reset-demo[hidden] { display:none!important; }
.demo-focus { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 20px; padding:12px 16px; border-left:5px solid var(--gold); background:#fff8e8; color:var(--maroon); box-shadow:0 2px 10px rgba(0,0,0,.08); }
.demo-focus[hidden] { display:none; }
.demo-focus span { font:700 10px Poppins,Arial,sans-serif; letter-spacing:.6px; }
.demo-focus strong { font:700 17px Poppins,Arial,sans-serif; }
.demo-focus small { margin-left:auto; color:#495862; font:600 11px Poppins,Arial,sans-serif; }
.schedule-sign-in { width:min(420px,calc(100vw - 32px)); padding:24px; border:1px solid var(--line); background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.schedule-sign-in::backdrop { background:rgba(10,18,25,.55); }
.schedule-sign-in form { display:grid; gap:14px; }
.schedule-sign-in h2 { margin:0; color:var(--maroon); }
.schedule-sign-in p { margin:0; color:var(--muted); }
.schedule-sign-in #schedule-sign-in-error { color:#a20d0d; }
.sign-in-actions { display:flex; justify-content:flex-end; gap:8px; }
@media(min-width:761px) and (max-width:1024px) {
  header.topbar { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto; gap:0; padding:8px 18px 0; }
  header.topbar .brand { grid-column:1; grid-row:1; }
  header.topbar .account-area { grid-column:2; grid-row:1; }
  header.topbar .form-switcher { grid-column:1 / 3; grid-row:2; justify-content:flex-start; min-height:48px; padding:7px 0; border-top:1px solid #2b2b2b; }
  header.topbar .form-subnav { grid-column:1 / 3; grid-row:3; min-height:48px; padding:6px 0; }
}
@media(max-width:760px) { header.topbar #switch-user { margin-left:0; } }

/* Keep printed schedule cards readable while preserving the vehicle color bar. */
@media print { .published-assignment.v1,.published-assignment.v2,.published-assignment.v3 { background:#f5f6f7!important; color:#1d252a!important; } }

/* Shared Box 55 operational surface system.  The modest radii keep the
   schedule dense and practical while making its controls match the main app. */
:root{--radius-control:6px;--radius-surface:8px;--radius-dialog:12px;--shadow-surface:0 4px 14px rgba(19,21,22,.07);--shadow-raised:0 14px 36px rgba(19,21,22,.20);--focus-ring:0 0 0 3px rgba(251,179,39,.30)}
.card{border-radius:var(--radius-surface);box-shadow:var(--shadow-surface)}
.stat,.day,.published-day,.published-calendar-footer{border-radius:var(--radius-surface);box-shadow:0 1px 3px rgba(19,21,22,.035)}
.published-day.today,.officer-calendar .schedule-day.today,.availability-grid .day.today{border:2px solid var(--gold);background:#fffaf0;box-shadow:0 0 0 2px rgba(191,165,106,.28)}
.published-day.today .published-date{color:var(--maroon)}
.published-day.adjacent-month { background:#f6f7f8; }
.published-day.adjacent-month .published-date { color:var(--vehicle-3); }
.mobile-date-day.today{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.mobile-date-day.today.selected{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
.published-assignment,.badge,.priority-number{border-radius:var(--radius-control)}
input,select{border-radius:var(--radius-control);min-height:40px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
input:hover,select:hover{border-color:#9eabb3}
input:focus,select:focus{outline:none;border-color:#9b7f43;box-shadow:var(--focus-ring)}
.month-control button,.secondary,button.primary,button.danger{border-radius:var(--radius-control);min-height:40px;transition:transform .14s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:focus-visible,a:focus-visible{outline:3px solid rgba(251,179,39,.9);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.56}
.month-control button,.secondary{box-shadow:0 1px 2px rgba(19,21,22,.05)}button.primary,.primary{box-shadow:0 2px 5px rgba(92,65,8,.18)}
table th{background:#fafbfb}tbody tr{transition:background .14s ease}tbody tr:nth-child(even) td{background:#fcfcfb}tbody tr:hover td{background:#fbf7ef}
.notice,.coverage{border-radius:var(--radius-control)}
#toast{border-radius:var(--radius-surface);box-shadow:var(--shadow-raised)}
.app-footer{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;padding:18px clamp(22px,3.5vw,64px);border-top:1px solid #2b2b2b;background:#151515;color:#fff;font:600 10px/1.35 Poppins,Arial,sans-serif}.app-footer span{min-width:0}.footer-owner small,.footer-build small{display:block;margin-top:3px;color:#bdc4c8;font-size:9px}.footer-page-title{color:#fbb327;text-align:center;font-weight:700;letter-spacing:.55px;text-transform:uppercase}.footer-build{text-align:right}.footer-build b{display:block;color:#fff;font-size:10px}
@media(max-width:620px){input,select,.month-control button,.secondary,button.primary,button.danger{min-height:44px}.app-footer{grid-template-columns:1fr;padding:18px 16px;text-align:center}.footer-build{text-align:center}.footer-page-title{order:-1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media print{.app-footer{display:none!important}}

/* Final print rules also override the legacy inline calendar styles. */
@media print {
  @page { size:Letter landscape; margin:.2in;
    @bottom-left { content:"Box 55 Association · Published Schedule"; }
  }
  #published-calendar { height:7.8in!important; min-height:0!important; max-height:7.8in; overflow:hidden; break-inside:avoid; }
  #published-calendar .section-head { flex:none; }
  #published-calendar .published-calendar { grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:18px repeat(var(--calendar-weeks,5),minmax(0,1fr))!important; flex:1; min-height:0; gap:4px; }
  #published-calendar .published-day { min-height:0!important; min-width:0; margin:0; padding:4px!important; overflow:hidden; }
  #published-calendar .published-date { margin-bottom:3px!important; font-size:13px!important; line-height:1.15; }
  #published-calendar .published-date small { font-size:9px; }
  #published-calendar .published-assignment { margin:var(--print-entry-spacing,3px) 0!important; padding:var(--print-entry-spacing,3px) 4px!important; border-left-width:8px!important; min-width:0; max-width:100%; line-height:1.2!important; }
  #published-calendar .print-assignment-summary { font:700 var(--print-summary-size,10px)/1.2 Poppins,Arial,sans-serif!important; white-space:normal; overflow-wrap:anywhere; }
  #published-calendar .published-day.today { border:1px solid #d9e1eb!important; background:#fff!important; box-shadow:none!important; }
  #published-calendar .published-day.today .published-date { color:#1d252a!important; }
  #published-calendar .published-day.adjacent-month .published-date { color:var(--vehicle-3)!important; }
  #published-calendar footer.published-calendar-footer { flex:none; margin-top:7px!important; padding:7px 9px!important; }
  #published-calendar .vehicle-legend i { width:18px; }
  #published-calendar .vehicle-legend strong { font-size:11px; }
  #published-calendar .vehicle-legend small { font-size:9.5px; line-height:1.2; }
}

/* The availability card is narrower than the calendar: keep four native
   date/time widgets in equal, complete cells instead of a shrinking last cell. */
#availability-form .form-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#availability-form .form-row > label { min-width:0; padding:0; }
#availability-form .form-row input[type="date"],
#availability-form .form-row input[type="time"] { box-sizing:border-box; display:block; width:100%; min-width:0; max-width:100%; height:46px; margin:0; }
@media (max-width:1200px) { #app > .two-col:has(#availability-form) { grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px) { #availability-form .form-row { grid-template-columns:minmax(0,1fr); } }

.schedule-print-logo { display:none; }
/* Also match the canonical header when the browser's own Print command is used. */
@font-face { font-family:Poppins; font-weight:400; font-style:normal; src:url("fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family:Poppins; font-weight:700; font-style:normal; src:url("fonts/Poppins-Bold.ttf") format("truetype"); }
@media print {
  #published-calendar .section-head { display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:18px; padding:10px 15px!important; background:#202426!important; border-bottom:4px solid #ffb511!important; }
  #published-calendar .schedule-print-logo { display:block!important; flex:0 0 125px; width:125px; height:47px; max-height:47px; object-fit:contain; }
  #published-calendar .section-head h2 { margin:0!important; font:700 21px Arial,sans-serif!important; text-transform:none!important; }
  #published-calendar .section-head .eyebrow { margin:0 0 2px!important; font:400 10px Arial,sans-serif!important; color:#ffb511!important; }
  #published-calendar .section-head .muted { display:none!important; }
}

/* Officer assignment cards flow on the web instead of sharing three fixed
   absolute positions. Grid rows grow to fit every shift in the busiest day. */
@media screen {
  .officer-calendar .schedule-day { height:auto; overflow:visible; }
  .officer-calendar .assignment-timeline-bar { top:var(--screen-assignment-offset)!important; }
  .officer-calendar .unscheduled-availability-bar { top:var(--screen-availability-offset)!important; bottom:auto!important; }
  .officer-calendar .schedule-assignment-list { display:flex; flex-direction:column; gap:7px; margin-top:calc(5px + max(1,var(--timeline-lanes))*15px + var(--availability-lanes)*15px); }
  .officer-calendar .assignment-block { position:relative!important; top:auto!important; left:auto!important; display:block; width:100%!important; min-height:64px!important; }
}

.special-request-entry { margin:20px 0; padding:18px; border:1px solid #e2c98a; border-left:5px solid var(--gold); background:#fffaf0; }
.availability-status { display:inline-flex; align-items:center; gap:8px; width:max-content; margin:8px 0 0; padding:5px 10px; border:1px solid #b8d7c6; border-radius:999px; background:#edf8f1; color:#17633f; font:700 11px/1.2 Poppins,Arial,sans-serif; letter-spacing:.2px; text-transform:uppercase; }
.availability-status.is-locked { border-color:#d7b8be; background:#fff1f2; color:#8b2234; }
.availability-status-dot { width:8px; height:8px; flex:none; border-radius:50%; background:currentColor; }
.availability-control { display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:240px; padding:8px 12px; border:1px solid var(--line); border-left:4px solid var(--gold); background:#fbfaf7; }
.officer-workspace > .card:first-child .section-head { flex-wrap:wrap; }
.availability-control .availability-status { margin:0; }
.availability-control small { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.3; }
.availability-control button { flex:none; white-space:nowrap; }
#app .availability-grid .day:disabled { cursor:default; opacity:1; }
#app #availability-form :disabled,#app #special-request-form :disabled,#app .edit-slot:disabled,#app .remove-slot:disabled { cursor:not-allowed; opacity:.55; }
@media (max-width:720px) { .availability-control { width:100%; flex-wrap:wrap; } .availability-control button { width:100%; } }
.special-request-entry h3 { margin-bottom:4px; }
.special-request-entry form { gap:12px; margin-top:12px; }
.special-request-entry textarea { display:block; width:100%; min-height:100px; padding:10px 12px; border:1px solid #cbd4db; border-radius:4px; background:#fff; color:var(--ink); font:inherit; resize:vertical; }
.special-request-entry button { justify-self:start; }
.officer-special-requests { border-left:6px solid var(--gold); background:#fffaf0; }
.officer-special-requests .eyebrow { margin-bottom:7px; }
.request-count { display:inline-block; min-width:25px; padding:3px 7px; border-radius:99px; background:var(--maroon); color:#fff; font:700 13px Poppins,Arial,sans-serif; text-align:center; vertical-align:middle; }
.special-request-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; }
.special-request-card { padding:14px 16px; border:1px solid #ead8aa; background:#fff; }
.special-request-card strong { color:var(--maroon); font:700 13px Poppins,Arial,sans-serif; }
.special-request-card p { margin-top:7px; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-approval-form { display:grid; gap:9px; margin-top:14px; padding-top:12px; border-top:1px solid #ead8aa; }
.note-review-status { color:var(--maroon); font:700 11px Poppins,Arial,sans-serif; text-transform:uppercase; }
.note-suggestion { display:flex; align-items:flex-start; gap:8px; padding:9px; border:1px solid var(--line); background:#fff; }
.note-suggestion input { width:auto; margin:3px 0 0; }
.note-suggestion span { display:block; }
.note-suggestion strong,.note-suggestion small { display:block; }
.note-suggestion small { margin-top:3px; color:var(--muted); font-weight:400; }
.note-approval-form button { justify-self:start; }
.factor-suggestion-list { display:grid; gap:10px; margin:14px 0; }
.factor-suggestion { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px; border:1px solid var(--line); background:#fff; }
.factor-suggestion strong,.factor-suggestion small { display:block; }
.factor-suggestion small { color:var(--muted); }
.factor-values-form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-top:14px; }
.factor-values-form label { width:min(230px,100%); }
.factor-idea-form { display:grid; gap:10px; margin-top:12px; }
.factor-idea-form textarea { width:100%; min-height:70px; padding:10px; border:1px solid var(--line); font:inherit; }
.factor-idea-form button { justify-self:start; }
.factor-idea-list { display:grid; gap:8px; margin-top:12px; }
.factor-idea-list > div { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); }
.factor-idea-list span { flex:1 1 200px; }
.factor-idea-list small { color:var(--muted); }
.draft-review { border-top:5px solid var(--gold); }
.draft-review-toggle { border:1px solid var(--line); border-radius:8px; background:#fff; }
.draft-review-toggle > summary { padding:18px 22px; color:var(--maroon); font:700 18px Poppins,Arial,sans-serif; cursor:pointer; }
.draft-review-toggle > summary small { display:block; margin:4px 0 0 24px; color:var(--muted); font:600 12px Poppins,Arial,sans-serif; }
.draft-review-toggle > .draft-review { margin:0; border:0; border-top:5px solid var(--gold); border-radius:0 0 8px 8px; box-shadow:none; }
.review-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:18px 0; }
.review-stats > div { padding:13px; border:1px solid var(--line); background:#fbfaf6; }
.review-stats strong,.review-stats span { display:block; }
.review-stats strong { color:var(--maroon); font:700 23px Poppins,Arial,sans-serif; }
.review-stats span { color:var(--muted); font:700 10px Poppins,Arial,sans-serif; text-transform:uppercase; }
.review-method { padding:15px; border-left:4px solid var(--gold); background:#fffaf0; }
.review-method p { margin-top:6px; overflow-wrap:anywhere; }
.draft-review details { margin-top:12px; border:1px solid var(--line); }
.draft-review summary { padding:12px 15px; color:var(--maroon); font-weight:700; cursor:pointer; }
.review-assignments,.review-notes,.review-uncovered { max-height:420px; overflow:auto; padding:0 15px 15px; }
.review-assignments article,.review-notes article { padding:10px 0; border-top:1px solid var(--line); }
.review-assignments article p,.review-notes article p { margin-top:4px; }
.review-uncovered { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:7px; }
.review-uncovered span { padding:7px 9px; background:#fff4ef; }
.review-uncovered small { display:block; margin-top:3px; color:#5c6266; }
.review-warnings { margin-top:14px; padding:14px; border-left:4px solid #a86221; background:#fff5ea; }
.review-warnings p { margin-top:7px; }
.review-warning { color:#9d3b15; font-weight:700; }
@media (max-width:700px) { .review-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.factor-suggestion { align-items:flex-start; flex-direction:column; } }