/* ============================================================================
   SHARED DISMISSAL CARD STYLES (active.html, arrived.html, left.html)
   Each page sets --accent / --accent-soft on body; dark mode swaps the surface tokens below.
   ============================================================================ */
:root {
  --card-bg: #ffffff;
  --card-body-bg: #fafbfc;
  --card-border: #dee2e6;
  --text: #212529;
  --muted: #6c757d;
  --line: #e9ecef;
  --pill-bg: #e9ecef;
  --pill-text: #495057;
  --bus: #6f42c1;
  --bus-soft: #e8daff;
  --walker: #17a2b8;
  --walker-soft: #d1ecf1;
  --tap: 44px;
  --group-band: #e9edf2;
}
body.dark-mode {
  --card-bg: #1e1e1e;
  --card-body-bg: #181818;
  --card-border: #2d2d2d;
  --text: #e9ecef;
  --muted: #9aa0a6;
  --line: #2d2d2d;
  --pill-bg: #2d2d2d;
  --pill-text: #ced4da;
  --bus-soft: rgba(111, 66, 193, 0.35);
  --walker-soft: rgba(23, 162, 184, 0.3);
  --group-band: #262a30;
}

/* Keep wide screens readable instead of stretching cards edge to edge (the page background still fills the window) */
body { max-width: 790px; margin-left: auto !important; margin-right: auto !important; }

/* ---------- Accordion card ---------- */
.acc-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-left: 5px solid var(--accent);
  border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.04); margin-bottom: 8px; overflow: hidden;
  padding: 0 !important; gap: 0 !important;
}
.acc-card.is-bus { border-left-color: var(--bus); }
.acc-card.is-walker { border-left-color: var(--walker); }
/* The pages' own dark rules recolor every .card border; keep the colored edge */
body.dark-mode .acc-card { border-left-color: var(--accent); }
body.dark-mode .acc-card.is-bus { border-left-color: var(--bus); }
body.dark-mode .acc-card.is-walker { border-left-color: var(--walker); }

.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; user-select: none; }
.acc-toggle { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1; min-width: 0; min-height: var(--tap); cursor: pointer; }
.acc-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Long bus or program names ("All-Star After-School Group") shrink with "…" instead of pushing into the Arrived button */
.acc-title > * { flex-shrink: 0; }
.acc-title > .car-num { flex-shrink: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Short car numbers (#109, #1234) never shrink: on a phone the admin buttons left too little room and showed "#…" (2026-11-06) */
.acc-title > .car-num.car-num-short { flex-shrink: 0; }
.acc-sub { font-size: 0.82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.acc-card .car-num { font-size: 1.3rem; font-weight: 800; padding: 2px 10px; border-radius: 6px; color: var(--text); white-space: nowrap; }
.acc-card.is-bus .car-num { background: var(--bus-soft) !important; }
.acc-card.is-walker .car-num { background: var(--walker-soft) !important; }

.count-pill { font-size: 0.85rem; font-weight: 700; color: var(--pill-text); background: var(--pill-bg); padding: 2px 9px; border-radius: 12px; }

.acc-actions { display: flex; gap: 8px; flex-shrink: 0; }
.acc-body { padding: 0 12px 10px; background: var(--card-body-bg); border-top: 1px solid var(--line); }

/* ---------- Buttons: every tappable control is at least 44px tall ---------- */
.btn { min-height: var(--tap); padding: 0 16px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-arrive { background: #28a745; min-width: 104px; }
.btn-left { background: #007bff; }
.btn-walker { background: var(--walker); }
.btn-undo { background: #6c757d; }
.btn-sm { min-height: 40px; padding: 0 12px; font-size: 0.85rem; }
.btn-tool { background: var(--pill-bg); color: var(--text); }
.btn-edit { background: #fd7e14; }
.btn-delete { background: #dc3545; }

/* Square icon buttons: edit and delete share one size so they line up */
.icon-btn { width: var(--tap); height: 40px; padding: 0; border: none; border-radius: 8px; font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-btn:active { transform: scale(0.95); }
/* Neutral gray so the colored action buttons (Arrived, Dismiss) stay the loudest thing on the card */
.icon-edit, .icon-delete { background: var(--pill-bg); box-shadow: inset 0 0 0 1px var(--card-border); }
.icon-tool { background: var(--pill-bg); height: 36px; width: 40px; }

/* 📢 alert buttons (admins): yellow while that student / car is in the alert banner */
.alert-btn { background: var(--pill-bg); box-shadow: inset 0 0 0 1px var(--card-border); color: #343a40; font-size: 0; }
/* Solid one-color megaphone (Bootstrap Icons "megaphone-fill", MIT) instead of the multicolor emoji, which looks different on every device */
.alert-btn::before { content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M13%202.5a1.5%201.5%200%200%201%203%200v11a1.5%201.5%200%200%201-3%200zm-1%20.724c-2.067.95-4.539%201.481-7%201.656v6.237a25%2025%200%200%201%201.088.085c2.053.204%204.038.668%205.912%201.56zm-8%207.841V4.934c-.68.027-1.399.043-2.008.053A2.02%202.02%200%200%200%200%207v2c0%201.106.896%201.996%201.994%202.009l.496.008a64%2064%200%200%201%201.51.048m1.39%201.081q.428.032.85.078l.253%201.69a1%201%200%200%201-.983%201.187h-.548a1%201%200%200%201-.916-.599l-1.314-2.48a66%2066%200%200%201%201.692.064q.491.026.966.06%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M13%202.5a1.5%201.5%200%200%201%203%200v11a1.5%201.5%200%200%201-3%200zm-1%20.724c-2.067.95-4.539%201.481-7%201.656v6.237a25%2025%200%200%201%201.088.085c2.053.204%204.038.668%205.912%201.56zm-8%207.841V4.934c-.68.027-1.399.043-2.008.053A2.02%202.02%200%200%200%200%207v2c0%201.106.896%201.996%201.994%202.009l.496.008a64%2064%200%200%201%201.51.048m1.39%201.081q.428.032.85.078l.253%201.69a1%201%200%200%201-.983%201.187h-.548a1%201%200%200%201-.916-.599l-1.314-2.48a66%2066%200%200%201%201.692.064q.491.026.966.06%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body.dark-mode .alert-btn { color: #ced4da; }
.icon-tool.alert-btn, .acc-title .alert-btn { height: 36px; width: 40px; }
.alert-btn.is-on, body.dark-mode .alert-btn.is-on { background: #ffc107; box-shadow: inset 0 0 0 2px #d39e00; color: #000; }
/* ✕ on the alert banner (admins) clears the alert for everyone */
#global-alert-banner-zone, #global-alert-banner { padding-right: 52px !important; }
.alert-clear-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.15); color: #000; font-size: 0; cursor: pointer; }
/* The X is two crossed bars drawn here (a text ✕ sits off-center differently on each device) */
.alert-clear-btn::before, .alert-clear-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; border-radius: 2px; background: currentColor; }
.alert-clear-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.alert-clear-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }
.alert-clear-btn:hover { background: rgba(0,0,0,.28); }

/* Car | Bus | Walker switch: the current method is filled in its color */
.mode-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mode-toggle { display: inline-flex; background: var(--pill-bg); border-radius: 9px; padding: 3px; gap: 3px; }
.mode-opt { min-height: 38px; padding: 0 10px; border: none; border-radius: 7px; background: transparent; color: var(--text); font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mode-opt.is-on { color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mode-opt.mode-car.is-on { background: #dc3545; }
.mode-opt.mode-bus.is-on { background: var(--bus); }
.mode-opt.mode-walker.is-on { background: var(--walker); }
.mode-opt.is-unavailable { opacity: 0.45; }

/* ---------- Student rows inside an expanded card ---------- */
/* Whole-group controls: a shaded full-width band with a solid divider so they read as separate from the students below */
.group-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 -12px 4px; padding: 10px 12px; background: var(--group-band); border-bottom: 2px solid var(--card-border); }
.group-tools-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text); }
.group-tools-label::before { content: "👥 "; }
.group-tools .mode-toggle { background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-border); }
.student-row { padding: 10px 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; }
.group-tools + .student-row { border-top: none; }
.student-row-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.student-name { font-weight: 600; font-size: 1.02rem; color: var(--text); }
.student-name.is-done { color: var(--muted); text-decoration: line-through; }
.student-meta { font-size: 0.85rem; color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Today-only ride changes: badge on the student, and a pointer on the card they usually ride in */
.today-ride-badge { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #fff3cd; color: #7a5b00; box-shadow: inset 0 0 0 1px #ffe08a; font-size: 0.8rem; font-weight: 800; }
.today-away-note { margin: 4px 0 8px; padding: 8px 10px; border-radius: 8px; background: #fff3cd; color: #7a5b00; font-size: 0.85rem; font-weight: 700; }
.today-away-note b { font-weight: 800; }
.today-btn { min-height: 38px; padding: 0 10px; border: none; border-radius: 9px; background: var(--pill-bg); color: var(--text); font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sub-bus-note { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: #fff3cd; color: #7a5b00; font-weight: 800; white-space: normal; }
body.dark-mode .sub-bus-note { background: #4a3b00; color: #ffe08a; }
.today-dialog .sub-bus-alert { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-weight: 600; color: var(--text); }
.today-dialog .sub-bus-alert input { width: 20px; min-height: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.today-btn.is-on { background: #fff3cd; color: #7a5b00; box-shadow: inset 0 0 0 1px #ffe08a; }
body.dark-mode .today-ride-badge, body.dark-mode .today-away-note, body.dark-mode .today-btn.is-on { background: #4a3b00; color: #ffe08a; box-shadow: inset 0 0 0 1px #7a5b00; }
.today-dialog .mode-toggle { display: flex; margin: 6px 0 12px; }
.today-dialog .mode-opt { flex: 1; }
.today-dialog label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.today-dialog input { width: 100%; min-height: 44px; padding: 0 12px; border: 2px solid var(--card-border); border-radius: 8px; font-size: 16px; background: var(--card-bg); color: var(--text); }
.today-dialog input:focus { outline: none; border-color: #007BFF; }
.today-dialog .today-hint { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.choice-dialog-actions.is-three .btn { padding-left: 6px; padding-right: 6px; }
.btn-today { background: #a87600; }
.student-arrival-note { margin-top: 6px; font-size: 0.85rem; font-weight: 700; color: #dc3545; cursor: pointer; display: flex; align-items: center; }
.student-arrival-note span:last-child { font-weight: 400; margin-left: 3px; }
body.dark-mode .student-arrival-note { color: #ff6b7a; }

/* ---------- Section headings ---------- */
.section-heading { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 10px; padding-bottom: 5px; border-bottom: 2px solid var(--accent-soft); color: var(--accent); }
.section-heading.is-bus { color: var(--bus); border-bottom-color: var(--bus-soft); }
.section-heading.is-walker { color: var(--walker); border-bottom-color: var(--walker-soft); }
/* Page heading block: title, school name and Online pill in one compact card with a colored line underneath */
.header { background: var(--card-bg); border: 1px solid var(--card-border); border-bottom: 3px solid var(--accent, #6c757d); border-radius: 10px; padding: 10px 14px 12px; margin-bottom: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.header h2 { font-size: 1.2rem; line-height: 1.3; }
.header .status-pill-badge { margin: 6px auto 0; }
.header .school-name-line { margin-top: 2px; }

/* Frozen bar (built by js/counts.js): filter tabs + search stay visible while scrolling */
.sticky-bar { position: sticky; top: var(--sticky-top, 0px); z-index: 900; background: #f8f9fa; margin: 0 -15px; padding: 6px 15px 2px; }
body.dark-mode .sticky-bar { background: #121212; }
.sticky-bar.is-stuck { box-shadow: 0 8px 10px -8px rgba(0,0,0,.25); }
.sticky-bar .toggle-track, .sticky-bar .search-container { margin-bottom: 8px !important; }
.sticky-bar .settings-tabs { margin-bottom: 8px !important; }
.sticky-mini { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 8px; font-size: 1rem; font-weight: 800; color: var(--accent, #495057); }
.sticky-bar.is-stuck .sticky-mini { display: flex; }
.sticky-mini .status-pill-badge { margin: 0; }
.sticky-mini-right { display: inline-flex; align-items: center; gap: 8px; }
/* Pinned: search tucks behind 🔍 until it's opened (or has text); at the top of the page it always shows */
.sticky-search-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 34px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); font-size: 1rem; cursor: pointer; padding: 0; }
.sticky-bar.is-stuck .sticky-search-btn { display: inline-flex; }
.sticky-bar.is-stuck.search-open .sticky-search-btn { background: var(--pill-bg); }
.sticky-bar.is-stuck:not(.search-open) .search-container { display: none !important; }
.sticky-search-close { display: none; width: var(--tap); height: 47px; border: none; border-radius: 8px; background: #6c757d; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.sticky-bar.is-stuck.search-open .sticky-search-close { display: inline-block; }
/* Section headings (CAR RIDERS …) stick just under the frozen bar while their section scrolls by */
.section-heading-wrap { position: sticky; top: calc(var(--sticky-top, 0px) + var(--bar-h, 0px)); z-index: 800; background: #f8f9fa; margin: 8px -15px 0; padding: 1px 15px 0; }
.section-heading-wrap .section-heading { margin-top: 8px; }
body.dark-mode .section-heading-wrap { background: #121212; }

/* School name under each page title, and under School ID in Settings */
.school-name-line { font-size: 1rem; font-weight: 700; color: var(--muted); margin-top: 4px; }
.session-school-name { font-size: 0.95rem; font-weight: 700; margin-top: 4px; }

/* ---------- Status line: a small dot + text instead of a full-width bar ---------- */
/* The pages still write a status sentence into #status; js/counts.js shows it as a small pill instead */
#status { display: none !important; }
.status-pill-badge { display: flex; align-items: center; gap: 6px; width: fit-content; margin: -6px auto 12px; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.3px; }
.status-pill-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill-badge.is-online { background: #d4edda; color: #155724; }
.status-pill-badge.is-offline { background: #f8d7da; color: #842029; }
.status-pill-badge.is-connecting { background: #e9ecef; color: #6c757d; }
body.dark-mode .status-pill-badge.is-online { background: rgba(40,167,69,.25); color: #75d68f; }
body.dark-mode .status-pill-badge.is-offline { background: rgba(220,53,69,.25); color: #ff8a95; }
body.dark-mode .status-pill-badge.is-connecting { background: #2d2d2d; color: #adb5bd; }

/* ---------- Drawers on the Not Arrived page (Quick Arrival Grid, Student Management Form) ---------- */
#quickGalleryPanel, #inputFormPanel { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
#quickGalleryPanel > div:first-child span, #inputFormPanel > div:first-child span { color: var(--text) !important; }
#formToggleIcon { display: none; }
/* Closed drawers shouldn't keep a blank strip under their title */
#quickGalleryPanel > div:first-child, #inputFormPanel > div:first-child { margin-bottom: 0 !important; }
#galleryBodyContent:not(.collapsed), #formBodyContent:not(.collapsed) { margin-top: 12px; }
#toggleGalleryBtn, #toggleFormBtn { min-width: var(--tap); min-height: 36px; color: var(--muted) !important; }
body.dark-mode #inputFormPanel label { color: #b0b0b0 !important; }
body.dark-mode #inputFormPanel input, body.dark-mode #inputFormPanel select { background: #2d2d2d !important; border-color: #404040 !important; color: #fff !important; }

.grid-tile { min-height: var(--tap); padding: 10px; font-weight: 700; font-size: 0.95rem; border-radius: 8px; border: 1px solid var(--card-border); cursor: pointer; text-align: center; color: var(--text); background: var(--accent-soft); }
.grid-tile { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-tile.is-bus { background: var(--bus-soft); }
.grid-tile.is-walker { background: var(--walker-soft); }


/* ---------- Live counts (js/counts.js) ---------- */
/* Filter tabs: small count after the label */
/* Tabs size to their label so "Walkers 12" fits on a phone; short labels like "All" give up the space */
.toggle-tab { flex: 1 1 auto !important; padding-left: 4px !important; padding-right: 4px !important; font-size: 0.82rem !important; }
.tab-count { display: inline-block; margin-left: 3px; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 0.7rem; line-height: 16px; vertical-align: 1px; background: rgba(0,0,0,.09); }
.active-tab .tab-count { background: rgba(255,255,255,.28); }
/* Phones: count sits under the label so four tabs with two-digit counts still fit */
@media (max-width: 480px) {
  .toggle-tab { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-top: 6px !important; padding-bottom: 6px !important; line-height: 1.1; }
  .tab-count { margin-left: 0; }
}
body.dark-mode .tab-count { background: rgba(255,255,255,.12); }

/* Section headings: "CAR RIDERS 12" */
.heading-count { display: inline-block; margin-left: 8px; min-width: 24px; padding: 0 8px; border-radius: 11px; font-size: 0.8rem; line-height: 22px; text-align: center; vertical-align: 2px; color: #fff; background: var(--accent); letter-spacing: 0; }
.section-heading.is-bus .heading-count { background: var(--bus); }
.section-heading.is-walker .heading-count { background: var(--walker); }

/* Bottom nav: small badge at the icon's top-right, in each page's color */
.bottom-nav .nav-tab { position: relative; }
.nav-count { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; color: #fff; background: #6c757d; }
.nav-tab[href*="active"] .nav-count { background: #dc3545; }
.nav-tab[href*="arrived"] .nav-count { background: #28a745; }
.nav-tab[href*="left"] .nav-count { background: #007bff; }
.tab-count.is-zero, .heading-count.is-zero, .nav-count.is-zero { opacity: 0.5; }

/* Section heading: title, count, then an Expand all / Collapse all button on the right */
.section-heading { display: flex; align-items: center; }
.section-toggle { margin-left: auto; min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.section-toggle:active { transform: scale(0.97); }

/* ---------- Confirm dialog (Car / Bus / Walker moves) ---------- */
.choice-dialog-backdrop { position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
@media (min-width: 600px) { .choice-dialog-backdrop { align-items: center; } }
.choice-dialog { width: 100%; max-width: 420px; background: var(--card-bg); color: var(--text); border-radius: 14px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.choice-dialog h3 { font-size: 1.1rem; margin-bottom: 8px; }
.choice-dialog p { font-size: 0.95rem; color: var(--muted); margin-bottom: 8px; line-height: 1.4; }
.choice-dialog-details { font-size: 0.85rem; color: var(--muted); background: var(--pill-bg); border-radius: 8px; padding: 10px; margin-bottom: 8px; line-height: 1.4; }
.choice-dialog-actions { display: flex; gap: 10px; margin-top: 14px; }
.choice-dialog-actions .btn { flex: 1; }
.btn-mode-car { background: #dc3545; }
.btn-mode-bus { background: var(--bus); }

/* After saving an edit, the student's new card flashes so it's easy to spot */
.acc-card.just-moved { animation: justMovedFlash 2.4s ease-out; }
@keyframes justMovedFlash {
  0%, 35% { box-shadow: 0 0 0 4px #ffc107, 0 2px 4px rgba(0,0,0,.04); }
  100% { box-shadow: 0 0 0 0 rgba(255,193,7,0), 0 2px 4px rgba(0,0,0,.04); }
}
.student-row.just-moved-row { animation: justMovedRow 2.4s ease-out; border-radius: 6px; }
@keyframes justMovedRow { 0%, 35% { background: rgba(255,193,7,.28); } 100% { background: transparent; } }

/* Empty roster (new school): explains how to add students */
.empty-roster { text-align: center; padding: 24px 18px; margin-top: 10px; border: 2px dashed var(--card-border); border-radius: 10px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; background: var(--card-bg); }
.empty-roster-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
/* Server notices (e.g. a word the demo doesn't allow) */
.notice-toast { position: fixed; left: 50%; bottom: 90px; z-index: 30000; transform: translate(-50%, 20px); width: calc(100% - 32px); max-width: 420px; padding: 14px 16px; border-radius: 12px; background: #343a40; color: #fff; font-size: 0.95rem; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.notice-toast.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Quick type-a-number keypad (Quick Arrival Grid) */
.kp-panel { margin-bottom: 10px; }
.kp-display { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border: 2px solid var(--card-border); border-radius: 10px; background: #fff; }
.kp-typed { font-size: 1.8rem; font-weight: 800; letter-spacing: 2px; color: #212529; }
.kp-typed.kp-empty { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: #6c757d; }
.kp-count { font-size: 0.85rem; font-weight: 700; color: #6c757d; }
.kp-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kp-key { min-height: 56px; font-size: 1.4rem; font-weight: 800; border-radius: 10px; border: 2px solid var(--card-border); background: #fff; color: #212529; cursor: pointer; }
.kp-key:active { background: var(--accent-soft); }
.kp-wide3 { grid-column: span 3; } .kp-wide2 { grid-column: span 2; font-size: 1.1rem; }

/* header buttons in the Quick Arrival Grid */
.kp-btn { background: var(--accent-soft); color: var(--text); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 14px; min-height: 40px; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.kp-btn.kp-on { background: #198754; color: #fff; border-color: #198754; }

/* QR tag scan (Quick Arrival Grid) */
.qr-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.qr-preview-wrap { flex: 0 0 40%; max-width: 220px; aspect-ratio: 4 / 3; overflow: hidden; background: #000; border-radius: 8px; }
.qr-preview { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.qr-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qr-status { font-weight: 700; font-size: 1rem; color: var(--text); }
.qr-info { font-size: 0.75rem; color: #6c757d; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-mini { flex: 1; min-width: 0; min-height: 40px; padding: 4px 6px; font-size: 0.85rem; border-radius: 8px; border: 1px solid var(--card-border); background: #fff; color: #212529; font-weight: 700; cursor: pointer; }
.qr-zoom-bar { flex: 1 0 100%; display: flex; gap: 8px; }
.qr-zoom-btn { flex: 1; min-height: 56px; font-size: 1.2rem; font-weight: 800; border-radius: 10px; border: 2px solid var(--card-border); background: #fff; color: #212529; cursor: pointer; }
.qr-zoom-btn.zoom-on { background: #198754; color: #fff; border-color: #198754; }

.qr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qr-chip { min-height: 36px; padding: 4px 10px; border-radius: 18px; border: 2px solid #198754; background: #e8f5ee; color: #14532d; font-size: 0.95rem; font-weight: 800; cursor: pointer; }
.qr-chip-miss { border-color: #adb5bd; background: #f1f3f5; color: #6c757d; }

/* the Scan tags / Keypad buttons sit in their own row under the title, with a gap between them */
.qg-actions { flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

/* Small phones (2026-11-06): tighter spacing so a full car number, its icons and the buttons fit on one row */
@media (max-width: 400px) {
  .acc-head { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .acc-title { gap: 5px; }
  .acc-card .car-num { padding-left: 7px; padding-right: 7px; }
  /* a car with several students has the wider Undo All / Left All buttons: they go on a second row, right-aligned */
  .acc-head-multi { flex-wrap: wrap; }
  .acc-head-multi > .acc-toggle { min-width: min-content; }
  .acc-head-multi > .acc-actions { margin-left: auto; }
}
@media (max-width: 350px) {
  .acc-title .icon-btn { width: 36px; min-width: 36px; }
  .acc-card .btn-arrive { min-width: 84px; padding-left: 10px; padding-right: 10px; }
  .acc-card .btn-undo, .acc-card .btn-left { padding-left: 10px; padding-right: 10px; }
}

/* Absent today + bus Boarded (2026-11-10) */
.absent-btn { background: #eef1f4; color: #4b5563; }
.section-heading.is-absent { color: #6b7280; }
.acc-card.is-absent { border-left: 6px solid #9ca3af; opacity: .95; }
.absent-body { padding: 10px 12px; }
.absent-note { margin: 0 0 8px; font-size: .85rem; color: #6b7280; }
.absent-row .student-name { color: #6b7280; }
.board-btn { width: 100%; min-height: 44px; border: 2px solid #f59e0b; border-radius: 10px; background: #fff8e6; color: #7a4a00; font-weight: 800; font-size: .95rem; cursor: pointer; }
.board-btn.is-on { border-color: #16a34a; background: #e8f7ee; color: #14532d; }
.student-row.not-boarded .student-name { color: inherit; }
.board-count { font-weight: 800; color: #9a5b00; }
.board-count.all-on { color: #15803d; }
.boarded-yes { color: #15803d; font-weight: 700; } .boarded-no { color: #9a5b00; font-weight: 700; }
.mode-line .board-btn { flex: 1 1 auto; width: auto; }
body.dark-mode .absent-btn { background: #2b3138; color: #cbd5e1; }
body.dark-mode .board-btn { background: #3a2a00; color: #ffd27a; border-color: #b7791f; }
body.dark-mode .board-btn.is-on { background: #12341f; color: #9ae6b4; border-color: #2f855a; }
body.dark-mode .board-count { color: #f6ad55; } body.dark-mode .board-count.all-on { color: #68d391; }