/* ON staff UI. Loaded after the legacy modules and scoped to staff pages.
   Keep the existing panel visibility and trip-phase rules as the source of truth. */
body.on-staff {
    --on-paper: #f6f4ee;
    --on-surface: #fff;
    --on-sunken: #eeede6;
    --on-line: #e2ded3;
    --on-ink: #202a2b;
    --on-muted: #62696a;
    --on-brand: #0f6e56;
    --on-accent: #3446a0;
    --on-accent-soft: #eef0fb;
    --on-ok: #1e7a4c;
    --on-warn: #a35200;
    --on-bad: #b3361e;
    --on-shadow: 0 2px 8px rgb(32 42 43 / 4%);
    --on-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Bridge the legacy components to one local token vocabulary. */
    --page-bg: var(--on-paper);
    --app-bg: var(--on-paper);
    --surface: var(--on-surface);
    --ink: var(--on-ink);
    --muted: var(--on-muted);
    --line: var(--on-line);
    --blue: var(--on-accent);
    --blue-soft: var(--on-accent-soft);
    --font: var(--on-font);
    --card-shadow: var(--on-shadow);
    --aimom-page-bg: var(--on-paper);
    --aimom-surface: var(--on-surface);
    --aimom-surface-soft: var(--on-sunken);
    --aimom-border: var(--on-line);
    --aimom-card-border: var(--on-line);
    --aimom-card-bg: var(--on-surface);
    --aimom-text: var(--on-ink);
    --aimom-text-color: var(--on-ink);
    --aimom-muted: var(--on-muted);
    --aimom-text-muted: var(--on-muted);
    --aimom-text-subtle: var(--on-muted);
    --aimom-primary: var(--on-accent);
    --aimom-primary-soft: var(--on-accent-soft);
    --aimom-color-accent: var(--on-accent);
    --aimom-font-base: var(--on-font);
    --aimom-font-body: 16px;
    --aimom-font-small: 14px;
    --aimom-font-eyebrow: 12px;
    --aimom-line-height: 1.5;
    --aimom-card-radius: 16px;
    --aimom-inner-radius: 10px;
    --aimom-section-padding: 24px;
    --aimom-section-gap: 16px;
    --aimom-shell-gap: 20px;
    --aimom-card-shadow: var(--on-shadow);
    --aimom-soft-shadow: none;
    margin: 0;
    color: var(--on-ink);
    background: var(--on-paper);
    font: 400 16px/1.5 var(--on-font);
    color-scheme: light;
}
body.on-teacher { --on-accent: #1f6a9a; --on-accent-soft: #eaf3f9; }
body.on-bus { --on-accent: #7a5800; --on-accent-soft: #fff5cc; }
body.on-staff.on-bus { background: var(--on-paper); color: var(--on-ink); }
body.on-center { --on-accent: #6a4ba8; --on-accent-soft: #f1edf9; }
body.on-staff *, body.on-staff *::before, body.on-staff *::after { box-sizing: border-box; }
body.on-staff :focus-visible { outline: 3px solid var(--on-accent); outline-offset: 3px; }
body.on-staff [hidden] { display: none; }
body.on-staff a { color: var(--on-accent); text-underline-offset: 3px; }
body.on-staff :is(.school-shell, .teacher-shell, .bus-shell) {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 28px 28px calc(104px + env(safe-area-inset-bottom, 0px));
    gap: 20px;
    min-width: 0;
}
body.on-teacher .teacher-shell { max-width: 920px; }
body.on-bus .bus-shell { max-width: 760px; }
body.on-staff.on-center .school-shell { grid-template-columns: minmax(0, 1fr); }
/* The source already puts the summary, deadlines and inquiries first. */
body.on-staff.on-center .school-shell > * { order: 0; }
body.on-staff.on-center .school-board { border-color: var(--on-line); background: var(--on-surface); box-shadow: var(--on-shadow); }
body.on-staff.on-bus .bus-hero { padding: 24px; border: 1px solid var(--on-line); border-top: 4px solid var(--on-accent); background: var(--on-surface); box-shadow: none; }
body.on-staff :is(.school-shell, .teacher-shell, .bus-shell) > * { min-width: 0; max-width: 100%; }
body.on-staff :is(.school-hero, .bus-hero) {
    padding: 24px;
    border: 1px solid var(--on-line);
    border-top: 4px solid var(--on-accent);
    border-radius: 16px;
    background: var(--on-surface);
    color: var(--on-ink);
    box-shadow: none;
}
body.on-staff .school-hero-grid { gap: 24px; align-items: center; }
body.on-staff :is(.school-hero, .bus-hero) h1 {
    margin: 12px 0 8px;
    color: var(--on-ink);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.04em;
}
body.on-staff :is(.school-hero, .bus-hero) p { max-width: 58ch; margin: 0; color: var(--on-muted); font-size: 16px; line-height: 1.6; }
body.on-staff .hero-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 700;
}
body.on-staff .school-hero-summary { gap: 12px; }
body.on-staff .school-hero-summary article { padding: 16px; border: 1px solid var(--on-line); border-radius: 10px; background: var(--on-sunken); }
body.on-staff .school-hero-summary span { color: var(--on-muted); font-size: 14px; font-weight: 400; }
body.on-staff .school-hero-summary strong { color: var(--on-ink); font-size: 24px; font-weight: 700; }
body.on-staff :is(.school-board, .school-workflow-panel, .bus-panel) {
    padding: 24px;
    border: 1px solid var(--on-line);
    border-radius: 16px;
    background: var(--on-surface);
    color: var(--on-ink);
    box-shadow: var(--on-shadow);
    scroll-margin-top: 24px;
}
body.on-staff .section-heading { align-items: center; gap: 12px; margin-bottom: 16px; }
body.on-staff .section-heading > div { min-width: 0; gap: 10px; }
body.on-staff .section-heading h2 { margin: 0; color: var(--on-ink); font-size: 20px; line-height: 1.4; font-weight: 700; }
body.on-staff .section-heading h3 { color: var(--on-ink); font-size: 18px; line-height: 1.4; font-weight: 600; }
body.on-staff :is(.section-icon, .driver-mode-card__icon, .driver-assigned-card__icon) { color: var(--on-accent); background: var(--on-accent-soft); }
body.on-staff :is(.school-helper-text, .bus-helper-text, .form-hint, .school-list-head small) { color: var(--on-muted); font-size: 14px; font-weight: 400; line-height: 1.6; }
body.on-staff :is(.count-chip, .status-pill, .school-workflow-status) {
    flex-shrink: 0;
    padding: 5px 10px;
    min-height: 30px;
    color: var(--on-accent);
    background: var(--on-accent-soft);
    border: 1px solid var(--on-line);
    font-size: 12px;
    font-weight: 600;
}
body.on-staff :is(.school-editor-card, .school-list-card, .teacher-board-card, .teacher-attendance-card, .teacher-medication-card, .school-workflow-card, .school-day-card, .driver-setting-summary, .bus-stop-card, .bus-music-card, .driver-assigned-card) {
    padding: 16px;
    border: 1px solid var(--on-line);
    border-radius: 10px;
    background: var(--on-surface);
    color: var(--on-ink);
    box-shadow: none;
    min-width: 0;
}
body.on-staff :is(.school-editor-card, .school-field-grid, .driver-settings-grid, .driver-safety-form, .bus-music-form) label { color: var(--on-ink); font-size: 14px; font-weight: 600; }
body.on-staff :is(.text-input, .select-input, .school-route-text, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="url"], select) {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--on-line);
    border-radius: 6px;
    background: var(--on-surface);
    color: var(--on-ink);
    font: 400 16px/1.5 var(--on-font);
}
body.on-staff :is(.primary-button, .secondary-button, .ghost-button, .danger-button, .mini-button, .teacher-ops-link) {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    font: 600 14px/1.4 var(--on-font);
    text-decoration: none;
    box-shadow: none;
}
body.on-staff .primary-button { border: 1px solid var(--on-accent); color: #fff; background: var(--on-accent); }
body.on-staff :is(.secondary-button, .ghost-button, .mini-button, .teacher-ops-link) { border: 1px solid var(--on-line); color: var(--on-accent); background: var(--on-surface); }
body.on-staff .danger-button { border: 1px solid var(--on-bad); color: var(--on-bad); background: var(--on-surface); }
body.on-staff button:disabled { opacity: .55; cursor: not-allowed; }
body.on-staff :is(.teacher-attendance-card, .teacher-medication-card, .school-workflow-card, .bus-stop-card, .bus-music-card) strong { font-size: 16px; font-weight: 600; color: var(--on-ink); }
body.on-staff :is(.teacher-attendance-card, .teacher-medication-card, .school-workflow-card, .bus-stop-card, .bus-music-card) small { font-size: 14px; color: var(--on-muted); line-height: 1.5; }
body.on-staff :is(.school-split, .teacher-dashboard-grid, .school-workflow-grid) { gap: 20px; min-width: 0; }
body.on-staff :is(.school-field-grid, .driver-settings-grid, .driver-safety-form, .school-admin-summary-grid) { gap: 16px; }
body.on-staff :is(.school-list-head, .school-editor-actions, .command-row) { flex-wrap: wrap; gap: 12px; }
body.on-staff .school-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
body.on-staff .school-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--on-line);
    border-radius: 10px;
    color: var(--on-muted);
    background: var(--on-surface);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
body.on-staff .school-nav a.is-active { color: var(--on-accent); border-color: var(--on-accent); background: var(--on-accent-soft); }
body.on-staff .on-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
body.on-staff .on-section-label { display: block; width: 100%; color: var(--on-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
body.on-staff :is(.school-class-card, .school-vehicle-card, .school-child-card, .school-staff-card, .school-command-card, .work-action-card, .school-admin-summary-card) {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--on-line);
    border-radius: 10px;
    background: var(--on-surface);
    color: var(--on-ink);
    box-shadow: none;
}
body.on-staff :is(.school-class-card, .school-vehicle-card, .school-child-card, .school-staff-card, .school-command-card, .work-action-card, .school-admin-summary-card) strong { color: var(--on-ink); font-size: 16px; font-weight: 600; }
body.on-staff :is(.school-class-card, .school-vehicle-card, .school-child-card, .school-staff-card, .school-command-card, .work-action-card, .school-admin-summary-card) :is(small, p, .eyebrow) { color: var(--on-muted); font-size: 14px; line-height: 1.5; }
body.on-staff .school-empty { padding: 16px; border-radius: 10px; color: var(--on-muted); background: var(--on-sunken); font-size: 14px; }
body.on-staff.on-center .center-admin-hero::before,
body.on-staff.on-center .school-admin-summary-card::before { content: none; }
body.on-staff.on-center :is(.center-deadline-card, .center-program-card, .center-news-card, .center-location-card, .center-survey-card, .center-inquiry-card) {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--on-line);
    border-left: 3px solid var(--on-accent);
    border-radius: 10px;
    background: var(--on-surface);
    color: var(--on-ink);
    overflow-wrap: anywhere;
}
body.on-staff.on-center :is(.center-deadline-card, .center-program-card, .center-news-card, .center-location-card, .center-survey-card, .center-inquiry-card) strong { color: var(--on-ink); font-size: 16px; font-weight: 600; }
body.on-staff.on-center :is(.center-deadline-card, .center-program-card, .center-news-card, .center-location-card, .center-survey-card, .center-inquiry-card) :is(p, small) { color: var(--on-muted); font-size: 14px; line-height: 1.5; }
body.on-staff.on-center :is(.center-program-card.is-open, .center-survey-card.is-open, .center-inquiry-card.is-contacted) { border-left-color: var(--on-ok); }
body.on-staff.on-center :is(.center-deadline-card.is-urgent, .center-inquiry-card.is-open) { border-left-color: var(--on-warn); }
body.on-staff.on-center :is(.center-program-card.is-draft, .center-survey-card.is-draft, .center-program-card.is-closed, .center-program-card.is-cancelled, .center-survey-card.is-closed, .center-inquiry-card.is-closed) { border-left-color: var(--on-muted); }
body.on-staff.on-center .school-nav a { justify-content: flex-start; }
body.on-staff.on-center .school-nav a:is(.is-active, :hover) { color: var(--on-accent); border-color: var(--on-accent); background: var(--on-accent-soft); }
body.on-staff .bottom-nav {
    width: min(100%, 920px);
    min-height: 72px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--on-line);
    border-radius: 0;
    background: var(--on-surface);
    box-shadow: 0 -4px 16px rgb(32 42 43 / 4%);
}
body.on-staff .bottom-nav__item { min-height: 56px; color: var(--on-muted); background: transparent; font: 600 14px/1.4 var(--on-font); text-decoration: none; }
body.on-staff .bottom-nav__item i { min-height: 22px; font-size: 22px; }
body.on-staff .bottom-nav__item.is-active { color: var(--on-accent); background: var(--on-accent-soft); }
body.on-teacher .teacher-inspect-panel { order: 10; }
body.on-teacher .teacher-main-board { order: 20; }
body.on-teacher .teacher-activity-panel { order: 30; }
body.on-teacher .teacher-meal-panel { order: 40; }
body.on-teacher .teacher-pickup-panel { order: 50; }
body.on-teacher .teacher-closing-panel { order: 60; }
body.on-staff.on-bus .bus-role-links { display: flex; flex-wrap: wrap; gap: 12px; }
body.on-staff.on-bus .bus-role-links a { padding: 10px 12px; min-height: 44px; font-size: 14px; }
body.on-staff.on-bus :is(.driver-mode-card, .driver-flow-card, .driver-assigned-card) { padding: 20px; border: 1px solid var(--on-line); background: var(--on-accent-soft); border-radius: 10px; color: var(--on-ink); }
body.on-staff.on-bus .driver-flow-card strong { color: var(--on-ink); font-size: 30px; line-height: 1.35; }
body.on-staff.on-bus :is(.driver-flow-card, .driver-mode-card, .driver-assigned-card) :is(small, .eyebrow) { color: var(--on-muted); font-size: 14px; line-height: 1.5; }
body.on-staff.on-bus .driver-assigned-card strong { color: var(--on-ink); font-size: 18px; line-height: 1.4; }
body.on-staff.on-bus .driver-assigned-card span { font-size: 14px; line-height: 1.5; }
body.on-staff.on-bus :is(.driver-mode-card__icon, .driver-assigned-card__icon) { color: var(--on-accent); background: var(--on-surface); }
body.on-staff.on-bus .driver-mode-card strong { color: var(--on-ink); font-size: 20px; }
body.on-staff.on-bus .driver-command { min-height: 64px; padding: 16px; gap: 8px; }
body.on-staff.on-bus .driver-command span { font: 600 22px/1.4 var(--on-font); }
body.on-staff.on-bus .driver-command small { font: 400 14px/1.4 var(--on-font); }
body.on-staff.on-bus .driver-command--start { color: #202a2b; border-color: #f5c232; background: #f5c232; }
body.on-staff.on-bus .driver-command--start span { color: inherit; }
body.on-staff.on-bus .section-heading h2 { font-size: 20px; }
body.on-staff.on-bus .count-chip { min-height: 30px; font-size: 12px; padding: 5px 10px; }
body.on-staff.on-bus[data-trip-phase="active"] :is(.driver-mode-card, .driver-flow-card) { border-color: var(--on-accent); background: var(--on-accent-soft); box-shadow: none; }
body.on-staff.on-bus[data-trip-phase="active"] .driver-mode-card__icon { color: var(--on-accent); background: var(--on-surface); box-shadow: none; }
body.on-staff.on-bus .kinderbus-copy strong { font-size: 20px; }
body.on-staff.on-bus .kinderbus-copy :is(p, small) { font-size: 14px; line-height: 1.5; }
body.on-staff.on-bus[data-bus-role="driver"] :is(.driver-boarding-actions, .bus-stop-actions) button { min-height: 44px; padding: 8px; font-size: 14px; }
body.on-staff.on-bus[data-bus-role="driver"] :is(.driver-safety-toggle, .driver-safety-input) { min-height: 44px; padding: 10px 12px; font-size: 16px; }
body.on-staff.on-bus[data-bus-role="driver"] :is(.driver-prerun-card, .driver-boarding-card, .driver-safety-stat) { padding: 16px; gap: 10px; }
/* The legacy trip layer marks this size important. Match only that safety control. */
body.on-staff.on-bus[data-trip-phase="active"] .driver-command--active span { font-size: 18px !important; }
@media (min-width: 1100px) {
    body.on-principal .school-shell, body.on-center .school-shell { max-width: 1440px; padding-left: 252px; }
    body.on-principal .school-nav, body.on-center .school-nav {
        position: fixed;
        top: 28px;
        bottom: 28px;
        left: max(20px, calc((100vw - 1440px) / 2 + 20px));
        width: 204px;
        margin: 0;
        padding: 16px 12px;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-y: auto;
        border: 1px solid var(--on-line);
        border-radius: 16px;
        background: var(--on-surface);
    }
    body.on-principal .school-nav a, body.on-center .school-nav a { width: 100%; flex-shrink: 0; border-color: transparent; }
    body.on-principal .school-nav a.is-active, body.on-center .school-nav a.is-active { border-color: var(--on-line); }
    body.on-principal .bottom-nav, body.on-center .bottom-nav { display: none; }
}
@media (max-width: 700px) {
    body.on-staff { --aimom-section-padding: 16px; }
    body.on-staff :is(.school-shell, .teacher-shell, .bus-shell) { padding: 16px 12px calc(104px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
    body.on-staff :is(.school-hero, .bus-hero, .school-board, .school-workflow-panel, .bus-panel) { padding: 16px; }
    body.on-staff.on-bus .bus-hero { padding: 16px; }
    body.on-staff .school-hero-grid { grid-template-columns: 1fr; gap: 20px; }
    body.on-staff :is(.school-hero, .bus-hero) h1 { font-size: 24px; }
    body.on-staff :is(.school-hero, .bus-hero) p { font-size: 14px; }
    body.on-staff .school-hero-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body.on-staff .school-hero-summary article { padding: 12px 8px; }
    body.on-staff .school-hero-summary span { font-size: 12px; }
    body.on-staff .school-hero-summary strong { font-size: 20px; }
    body.on-staff :is(.school-split, .school-field-grid, .teacher-dashboard-grid, .driver-settings-grid, .driver-safety-form, .bus-music-form, .school-workflow-grid) { grid-template-columns: minmax(0, 1fr); }
    body.on-staff .section-heading { align-items: flex-start; }
    body.on-staff .section-heading h2 { font-size: 18px; }
    body.on-staff .section-heading > div { flex-wrap: wrap; }
    body.on-staff .school-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 216px; overflow-y: auto; padding: 2px; }
    body.on-staff .school-nav a { min-width: 0; padding: 10px; }
    body.on-staff .school-nav .on-section-label { grid-column: 1 / -1; }
    body.on-staff .on-quick-actions > * { flex: 1 1 130px; }
    body.on-staff .school-workflow-card { overflow-wrap: anywhere; }
    body.on-staff.on-bus .bus-command-grid--driver { grid-template-columns: minmax(0, 1fr); }
    body.on-staff.on-bus .driver-flow-card strong { font-size: 28px; }
    body.on-staff.on-bus .section-heading h2 { font-size: 18px; }
}
@media (prefers-color-scheme: dark) {
    body.on-staff {
        --on-paper: #151b1c; --on-surface: #202829; --on-sunken: #283234;
        --on-line: #435153; --on-ink: #f2f2e9; --on-muted: #b7c2c2;
        --on-accent: #a6b6ff; --on-accent-soft: #2d3553;
        --on-brand: #80c9af; --on-ok: #8ed2ab; --on-warn: #f0c385; --on-bad: #ffb4a5;
        --on-shadow: none;
        color-scheme: dark;
    }
    body.on-teacher { --on-accent: #9ed4f4; --on-accent-soft: #213c4d; }
    body.on-bus { --on-accent: #f5d875; --on-accent-soft: #37321f; }
    body.on-center { --on-accent: #d2bafa; --on-accent-soft: #3b2d4f; }
    body.on-staff .primary-button { color: #151b1c; }
    body.on-staff :is(.school-command-card, .school-center-recommend, .center-school-block, .school-day-card, .routine-check-card, .role-check-card, .work-action-card, .driver-setting-summary, .driver-prerun-panel, .driver-safety-panel, .teacher-history-panel, .teacher-routine-panel) { color: var(--on-ink); background: var(--on-surface); border-color: var(--on-line); }
}
@media (prefers-reduced-motion: reduce) {
    body.on-staff { scroll-behavior: auto; }
    body.on-staff :is(button, a, input) { transition: none; }
}