/* Shared palette. Solid colors serve buttons/charts; ink colors serve small text.
   Loaded after legacy/scoped styles so all application pages share these values. */
:root {
    --hm-primary: #2563eb; --hm-primary-rgb: 37, 99, 235;
    --hm-primary-ink: #1e40af; --hm-primary-soft: #eff6ff; --hm-primary-border: #bfdbfe;
    --hm-success: #047857; --hm-success-rgb: 4, 120, 87;
    --hm-success-ink: #047857; --hm-success-soft: #ecfdf5; --hm-success-border: #a7f3d0;
    --hm-danger: #b91c1c; --hm-danger-rgb: 185, 28, 28;
    --hm-danger-ink: #b91c1c; --hm-danger-soft: #fef2f2; --hm-danger-border: #fecaca;
    --hm-warning: #b45309; --hm-warning-rgb: 180, 83, 9;
    --hm-warning-ink: #b45309; --hm-warning-soft: #fffbeb; --hm-warning-border: #f5d48a;
    --hm-info: #0369a1; --hm-info-rgb: 3, 105, 161;
    --hm-info-ink: #0369a1; --hm-info-soft: #f0f9ff; --hm-info-border: #bae6fd;
    --hm-ink: #0f172a; --hm-muted: #475569;
    --hm-page: #f1f5f9; --hm-surface: #fff; --hm-soft: #f8fafc;
    --hm-border: #d7e1ee; --hm-input-border: #b8c8dc; --hm-hover: #eef2f7;
    --hm-shadow: 0 8px 26px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.045);
    --hm-shadow-raised: 0 14px 34px rgba(15,23,42,.13), 0 3px 8px rgba(15,23,42,.06);
    --hm-filter-surface: #fdfbf5; --hm-filter-border: #e4ded0; --hm-filter-ink: #716957;
}
html.dark-style {
    color-scheme: dark;
    --hm-primary-ink: #93c5fd; --hm-primary-soft: #243d60; --hm-primary-border: #45658f;
    --hm-success-ink: #6ee7b7; --hm-success-soft: #193d36; --hm-success-border: #32665a;
    --hm-danger-ink: #fca5a5; --hm-danger-soft: #472c35; --hm-danger-border: #79515a;
    --hm-warning-ink: #fcd34d; --hm-warning-soft: #433a29; --hm-warning-border: #77623b;
    --hm-info-ink: #7dd3fc; --hm-info-soft: #233e50; --hm-info-border: #43677d;
    --hm-ink: #e2e8f0; --hm-muted: #b2bfd0;
    --hm-page: #182233; --hm-surface: #243247; --hm-soft: #2b3b52;
    --hm-border: #425570; --hm-input-border: #627792; --hm-hover: #354962;
    --hm-shadow: 0 10px 28px rgba(0,0,0,.26), 0 2px 7px rgba(0,0,0,.18);
    --hm-shadow-raised: 0 16px 38px rgba(0,0,0,.34), 0 3px 9px rgba(0,0,0,.2);
    --hm-filter-surface: #2d3441; --hm-filter-border: #525b68; --hm-filter-ink: #d3cabb;
}
html body {
    --bs-primary: var(--hm-primary); --bs-primary-rgb: var(--hm-primary-rgb);
    --bs-success: var(--hm-success); --bs-success-rgb: var(--hm-success-rgb);
    --bs-danger: var(--hm-danger); --bs-danger-rgb: var(--hm-danger-rgb);
    --bs-warning: var(--hm-warning); --bs-warning-rgb: var(--hm-warning-rgb);
    --bs-info: var(--hm-info); --bs-info-rgb: var(--hm-info-rgb);
    --bs-body-color: var(--hm-ink); --bs-heading-color: var(--hm-ink);
    --bs-secondary-color: var(--hm-muted); --bs-body-bg: var(--hm-page);
    --bs-card-bg: var(--hm-surface); --bs-border-color: var(--hm-border);
    background: var(--hm-page); color: var(--hm-ink);
}
#app .content-wrapper { background: var(--hm-page); }
#app :is(.card,.school-hub-card,.students-panel,.class-stat-card,.class-list-section,
    .class-tabs-shell,.schedule-panel,.schedule-summary-card,.weekly-workspace,
    .discipline-panel,.broadcast-composer-card,.broadcast-history-card,
    .summary-card,.staff-list-card,.analytics-context-card,.analytics-kpi-card,
    .analytics-chart-card,.analytics-pending-panel,.analytics-period-panel) {
    color: var(--hm-ink) !important; background-color: var(--hm-surface) !important;
    border: 1px solid var(--hm-border) !important; box-shadow: var(--hm-shadow) !important;
}
#app :is(.modal-content,.dropdown-menu) { background: var(--hm-surface) !important; color: var(--hm-ink) !important; border-color: var(--hm-border) !important; box-shadow: var(--hm-shadow-raised) !important; }
#app :is(h1,h2,h3,h4,h5,h6,.text-dark) { color: var(--hm-ink) !important; }
#app :is(.bg-primary,.bg-success,.bg-danger,.bg-info,.text-white) :is(h1,h2,h3,h4,h5,h6) { color: #fff !important; }
#app :is(.text-muted,.form-text,.form-label) { color: var(--hm-muted) !important; }
#app :is(.form-control,.form-select,.input-group-text) { color: var(--hm-ink) !important; background-color: var(--hm-surface) !important; border-color: var(--hm-input-border) !important; }
#app :is(.form-control,.form-select)::placeholder { color: var(--hm-muted) !important; opacity: .85; }
#app :is(.form-control,.form-select):focus { border-color: var(--hm-primary) !important; box-shadow: 0 0 0 3px rgba(var(--hm-primary-rgb),.17); }
#app .form-check-input:checked { background-color: var(--hm-primary); border-color: var(--hm-primary); }
/* Semantic colors for Bootstrap, reports, attendance and SMS. */
#app :is(.text-primary,.bg-label-primary,.btn-label-primary,.counter-normal,.scope-badge,.status-processing) { --hm-state-ink: var(--hm-primary-ink); --hm-state-soft: var(--hm-primary-soft); --hm-state-border: var(--hm-primary-border); }
#app :is(.text-success,.bg-label-success,.btn-label-success,.risk-low,.count-present,.status-completed,.broadcast-feedback-success) { --hm-state-ink: var(--hm-success-ink); --hm-state-soft: var(--hm-success-soft); --hm-state-border: var(--hm-success-border); }
#app :is(.text-danger,.bg-label-danger,.btn-label-danger,.risk-high,.count-absent,.status-failed,.counter-danger,.broadcast-feedback-error) { --hm-state-ink: var(--hm-danger-ink); --hm-state-soft: var(--hm-danger-soft); --hm-state-border: var(--hm-danger-border); }
#app :is(.text-warning,.bg-label-warning,.btn-label-warning,.risk-mid,.count-late,.status-warning,.status-pending,.counter-warning) { --hm-state-ink: var(--hm-warning-ink); --hm-state-soft: var(--hm-warning-soft); --hm-state-border: var(--hm-warning-border); }
#app :is(.text-info,.bg-label-info,.btn-label-info) { --hm-state-ink: var(--hm-info-ink); --hm-state-soft: var(--hm-info-soft); --hm-state-border: var(--hm-info-border); }
#app :is(.text-primary,.text-success,.text-danger,.text-warning,.text-info) { color: var(--hm-state-ink) !important; }
#app :is(.bg-label-primary,.bg-label-success,.bg-label-danger,.bg-label-warning,.bg-label-info,
    .btn-label-primary,.btn-label-success,.btn-label-danger,.btn-label-warning,.btn-label-info,
    .risk-badge,.count-present,.count-absent,.count-late,.status-completed,.status-failed,
    .status-warning,.status-pending,.status-processing,.counter-normal,.counter-warning,.counter-danger,
    .broadcast-feedback-success,.broadcast-feedback-error,.scope-badge) {
    color: var(--hm-state-ink) !important; background-color: var(--hm-state-soft) !important;
    border: 1px solid var(--hm-state-border) !important;
}
#app .btn-primary { --hm-button: var(--hm-primary); --hm-button-rgb: var(--hm-primary-rgb); }
#app .btn-success { --hm-button: var(--hm-success); --hm-button-rgb: var(--hm-success-rgb); }
#app .btn-danger { --hm-button: var(--hm-danger); --hm-button-rgb: var(--hm-danger-rgb); }
#app .btn-warning { --hm-button: var(--hm-warning); --hm-button-rgb: var(--hm-warning-rgb); }
#app .btn-info { --hm-button: var(--hm-info); --hm-button-rgb: var(--hm-info-rgb); }
#app :is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info) { color: #fff !important; background: var(--hm-button) !important; border-color: var(--hm-button) !important; box-shadow: 0 4px 10px rgba(var(--hm-button-rgb),.18) !important; }
#app :is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info):hover:not(:disabled) { background: color-mix(in srgb,var(--hm-button) 88%,#000) !important; }
#app .btn-outline-primary { --hm-outline-ink: var(--hm-primary-ink); --hm-outline-border: var(--hm-primary-border); --hm-outline-solid: var(--hm-primary); }
#app .btn-outline-success { --hm-outline-ink: var(--hm-success-ink); --hm-outline-border: var(--hm-success-border); --hm-outline-solid: var(--hm-success); }
#app .btn-outline-danger { --hm-outline-ink: var(--hm-danger-ink); --hm-outline-border: var(--hm-danger-border); --hm-outline-solid: var(--hm-danger); }
#app .btn-outline-warning { --hm-outline-ink: var(--hm-warning-ink); --hm-outline-border: var(--hm-warning-border); --hm-outline-solid: var(--hm-warning); }
#app .btn-outline-secondary { color: var(--hm-muted) !important; border-color: var(--hm-input-border) !important; }
#app .btn-outline-secondary:hover:not(:disabled) { color: var(--hm-ink) !important; background: var(--hm-hover) !important; }
#app :is(.btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-warning) { color: var(--hm-outline-ink) !important; border-color: var(--hm-outline-border) !important; }
#app :is(.btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-warning):hover:not(:disabled) { color: #fff !important; background: var(--hm-outline-solid) !important; border-color: var(--hm-outline-solid) !important; }
#app .btn:focus-visible { outline: 2px solid var(--hm-primary-ink); outline-offset: 3px; }
#app .btn:disabled { box-shadow: none !important; }
#app .table { --bs-table-bg: transparent; --bs-table-color: var(--hm-ink); --bs-table-striped-bg: var(--hm-soft); --bs-table-hover-bg: var(--hm-hover); --bs-table-border-color: var(--hm-border); }
#app .table > :not(caption) > * > * { color: var(--hm-ink) !important; border-color: var(--hm-border) !important; }
#app .table thead th { background-color: var(--hm-soft) !important; color: var(--hm-muted) !important; }
#app .table tbody tr:nth-child(even) { background-color: var(--hm-soft); }
#app .table tbody tr:hover { background-color: var(--hm-hover); }
/* Bridge existing custom component variables to the shared palette. */
#app .manager-analytics-shell { --analytics-ink: var(--hm-ink); --analytics-muted: var(--hm-muted); --analytics-border: var(--hm-border); --analytics-surface: var(--hm-surface); --analytics-soft: var(--hm-soft); }
#app .hm-report-page { --report-blue: var(--hm-primary); --report-ink: var(--hm-ink); --report-muted: var(--hm-muted); }
#app .weekly-workspace { --week-surface: var(--hm-surface); --week-tint: var(--hm-soft); --week-border: var(--hm-border); --week-ink: var(--hm-ink); --week-muted: var(--hm-muted); }
#app .discipline-workflow { --discipline-blue: var(--hm-primary-ink); --discipline-ink: var(--hm-ink); --discipline-muted: var(--hm-muted); --discipline-line: var(--hm-border); }
#app .broadcast-layout { --broadcast-primary: var(--hm-primary); --broadcast-primary-rgb: var(--hm-primary-rgb); --broadcast-success: var(--hm-success-ink); --broadcast-warning: var(--hm-warning-ink); --broadcast-danger: var(--hm-danger-ink); --broadcast-ink: var(--hm-ink); --broadcast-muted: var(--hm-muted); --broadcast-border: var(--hm-border); }
#app .discipline-workflow :is(.discipline-context,.discipline-timeline li.active,.search-row,.selection-chips button,.selection-chips > span,.selection-actions,.incident-card) { background: var(--hm-surface); color: var(--hm-ink); border-color: var(--hm-border); }
#app .discipline-workflow :is(.discipline-timeline,.discipline-filter-panel,.student-list-heading small,.contact-badge) { background: var(--hm-soft); color: var(--hm-muted); border-color: var(--hm-border); }
#app .discipline-workflow :is(.heading-icon,.selected-count,.discipline-selection,.student-avatar,.selection-summary-icon,.incident-card-icon) { background: var(--hm-primary-soft); color: var(--hm-primary-ink); border-color: var(--hm-primary-border); }
#app .discipline-workflow .discipline-student:hover { background: var(--hm-hover); border-color: var(--hm-primary-border); }
#app .discipline-workflow .discipline-student.selected { background: var(--hm-primary-soft); border-color: var(--hm-primary-border); }
#app .discipline-workflow :is(.contact-badge.available,.completed .step-marker) { background: var(--hm-success-soft); color: var(--hm-success-ink); }
#app .discipline-workflow .active .step-marker { background: var(--hm-primary); color: #fff; }
#app .discipline-workflow .step-marker { background: var(--hm-border); color: var(--hm-ink); }
#app .discipline-workflow .search-row .form-control { border: 0 !important; background: transparent !important; }
#app .broadcast-layout .metric-total .metric-icon { background: var(--hm-primary-soft); color: var(--hm-primary-ink); }
#app .broadcast-layout .metric-valid .metric-icon { background: var(--hm-success-soft); color: var(--hm-success-ink); }
#app .broadcast-layout .metric-invalid .metric-icon { background: var(--hm-danger-soft); color: var(--hm-danger-ink); }
#app .broadcast-toast > span { background: var(--hm-success); }
#app .dirty-badge { background: var(--hm-warning-soft); color: var(--hm-warning-ink); }
#app .icon-action.clear-action { color: var(--hm-danger-ink); }
#app .attendance-modal-icon.late { background: var(--hm-warning-soft); color: var(--hm-warning-ink); }
#app .confirm-icon.danger { background: var(--hm-danger-soft); color: var(--hm-danger-ink); }
#app .confirm-icon.warning { background: var(--hm-warning-soft); color: var(--hm-warning-ink); }
#app .confirm-icon.success { background: var(--hm-success-soft); color: var(--hm-success-ink); }
#app .analytics-kpi-card { --kpi-color: var(--hm-primary-ink); --kpi-soft: var(--hm-primary-soft); }
#app .analytics-kpi-card.tone-success { --kpi-color: var(--hm-success-ink); --kpi-soft: var(--hm-success-soft); }
#app .analytics-kpi-card.tone-danger { --kpi-color: var(--hm-danger-ink); --kpi-soft: var(--hm-danger-soft); }
#app .analytics-kpi-card.tone-warning { --kpi-color: var(--hm-warning-ink); --kpi-soft: var(--hm-warning-soft); }
#app :is(.analytics-period-card,.analytics-period-detail-item) { --period-color: var(--hm-danger-ink); --period-soft: var(--hm-danger-soft); --detail-color: var(--hm-danger-ink); }
#app :is(.analytics-period-card.is-complete,.analytics-period-detail-item.is-complete) { --period-color: var(--hm-success-ink); --period-soft: var(--hm-success-soft); --detail-color: var(--hm-success-ink); }
#app .summary-total { color: var(--hm-primary) !important; }
#app .summary-present { color: var(--hm-success) !important; }
#app .summary-absent { color: var(--hm-danger) !important; }
#app .summary-late { color: var(--hm-warning) !important; }
#app .summary-pending { color: var(--hm-muted) !important; }
#app .analytics-period-progress { background: color-mix(in srgb,var(--period-color) 12%,var(--hm-border)); }
#app .status-segment button.present { background: var(--hm-success) !important; color: #fff !important; }
#app .status-segment button.absent { background: var(--hm-danger) !important; color: #fff !important; }
#app .status-segment button.late { background: var(--hm-warning) !important; color: #fff !important; }
#app .class-stat-card.primary strong { color: var(--hm-primary-ink) !important; }
#app :is(.class-stat-card.success,.class-stat-card.teal) strong { color: var(--hm-success-ink) !important; }
#app :is(.class-stat-card.info,.class-stat-card.indigo) strong { color: var(--hm-info-ink) !important; }
#app :is(.class-stat-card.warning,.class-stat-card.orange) strong { color: var(--hm-warning-ink) !important; }
#app .alert-primary { color: var(--hm-primary-ink); background: var(--hm-primary-soft); border-color: var(--hm-primary-border); }
#app .alert-success { color: var(--hm-success-ink); background: var(--hm-success-soft); border-color: var(--hm-success-border); }
#app .alert-danger { color: var(--hm-danger-ink); background: var(--hm-danger-soft); border-color: var(--hm-danger-border); }
#app .alert-warning { color: var(--hm-warning-ink); background: var(--hm-warning-soft); border-color: var(--hm-warning-border); }
#app .alert-info { color: var(--hm-info-ink); background: var(--hm-info-soft); border-color: var(--hm-info-border); }
#app .hm-bar-primary { background: var(--hm-primary-ink) !important; }
#app .hm-bar-success { background: var(--hm-success-ink) !important; }
#app .hm-bar-danger { background: var(--hm-danger-ink) !important; }
#app .hm-bar-warning { background: var(--hm-warning-ink) !important; }
#app .hm-bar-info { background: var(--hm-info-ink) !important; }
#app .hm-bar-secondary { background: var(--hm-muted) !important; }
#app .legend-present::before { background: var(--hm-success-ink); }
#app .legend-absent::before { background: var(--hm-danger-ink); }
#app .legend-late::before { background: var(--hm-warning-ink); }
/* Filters keep their warm identity in both states; expansion adds elevation. */
#app .hm-report-page .report-hero { background: linear-gradient(115deg,var(--hm-primary-soft),var(--hm-surface) 75%) !important; border-color: var(--hm-primary-border) !important; }
#app .report-filter-card { background: var(--hm-filter-surface) !important; border-color: var(--hm-filter-border) !important; transition: border-color 220ms ease, box-shadow 220ms ease; }
#app .report-filter-card.is-expanded { border-color: color-mix(in srgb,var(--hm-filter-border) 94%,var(--hm-filter-ink)) !important; box-shadow: var(--hm-shadow-raised) !important; }
#app .report-filter-card :is(.filter-toggle-title,.filter-toggle-title i) { color: var(--hm-filter-ink) !important; }
#app .report-filter-content { border-color: var(--hm-filter-border); }
#app .footer-copyright { background: var(--hm-soft); color: var(--hm-muted); border: 1px solid var(--hm-border); }
.report-guide-popup { background: var(--hm-surface) !important; color: var(--hm-ink) !important; border: 1px solid var(--hm-border); }
.report-guide-list { text-align:right; padding-inline-start:24px; line-height:1.9; font-size:.92rem; }
.report-guide-list li + li { margin-top:12px; }
html.dark-style .report-preview-canvas { background:#182233; }
#app .report-filter-toggle { color: var(--hm-ink); }
#app .filter-toggle-title i { color: var(--hm-primary-ink); }
#app :is(.filter-toggle-summary,.report-eyebrow,.report-insight-item,.report-status-legend) { color: var(--hm-muted); }
#app :is(.report-table-scroll,.report-period-option) { border-color: var(--hm-border) !important; }
#app .report-period-option { background: var(--hm-surface); }
#app .count-zero { color: var(--hm-muted); }
#app .topbar-context-select { background-color: transparent !important; }
#app .topbar-year-control { background: var(--hm-success-soft); color: var(--hm-success-ink); border-color: var(--hm-success-border); }
#app .topbar-year-control .form-select { color: var(--hm-success-ink) !important; border-color: transparent !important; }
#app .topbar-badge-city { background: var(--hm-info-soft); color: var(--hm-info-ink); border-color: var(--hm-info-border); }
#app #layout-menu .menu-inner > .menu-item.active > .menu-link { background: var(--hm-primary) !important; color: #fff !important; }
#app #layout-menu .menu-inner > .menu-item.active > .menu-link :is(i,div) { color: #fff !important; }
#app #layout-menu .has-active-page > .hm-tree-toggle { color: var(--hm-primary-ink) !important; }
#app #layout-menu .hm-tree-item.active > .hm-tree-leaf { color: var(--hm-primary-ink) !important; background: var(--hm-primary-soft) !important; }
#app .report-table td { background: transparent; }
#app .report-table tbody tr:nth-child(even) { background: var(--hm-soft) !important; }
#app .report-table tbody tr:hover { background: var(--hm-hover) !important; }

/* Unified RTL form modals: keep every data-entry dialog consistent across the web app. */
#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) {
    direction: rtl;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-content {
    direction: rtl;
    text-align: right;
    color: var(--hm-ink) !important;
    background: var(--hm-surface) !important;
    border: 1px solid var(--hm-border) !important;
    border-radius: 22px;
    box-shadow: var(--hm-shadow-raised) !important;
    overflow: hidden;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-header {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--hm-border);
    background: linear-gradient(135deg, var(--hm-primary-soft), var(--hm-surface) 72%);
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-title {
    color: var(--hm-primary-ink) !important;
    font-weight: 800;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0;
    border-radius: 10px;
    opacity: .72;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-body,
#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-body.text-start,
#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-body.text-end {
    direction: rtl;
    text-align: right !important;
    padding: 1.25rem 1.35rem;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-footer {
    direction: rtl;
    justify-content: flex-start;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--hm-border);
    background: var(--hm-soft);
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-footer .btn {
    min-height: 42px;
    border-radius: 12px;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .form-label {
    display: block;
    text-align: right;
    font-weight: 700;
    color: var(--hm-muted) !important;
    margin-bottom: .4rem;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) :is(.form-control, .form-select) {
    direction: rtl;
    text-align: right;
    min-height: 44px;
    border-radius: 11px;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) :is(input[inputmode="numeric"], input[type="number"], input[type="tel"], .hm-modal-ltr-field) {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .form-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-right: 0;
    padding-left: 0;
    margin-inline-start: 0;
    text-align: right;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 0;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .35rem;
    border: 1px solid var(--hm-border);
    border-radius: 14px;
    background: var(--hm-soft);
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .nav-pills .nav-link {
    border-radius: 10px;
    color: var(--hm-muted);
    font-weight: 700;
    padding: .6rem .9rem;
}

#app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .nav-pills .nav-link.active {
    color: var(--hm-primary-ink) !important;
    background: var(--hm-surface) !important;
    box-shadow: var(--hm-shadow);
}

@media (max-width: 767.98px) {
    #app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-dialog {
        margin: .75rem;
    }

    #app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-header,
    #app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-body,
    #app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-footer {
        padding-inline: 1rem;
    }

    #app :is(.modal.fade.show:not(.schedule-board-modal), .modal.show:not(.schedule-board-modal)) .modal-content {
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) { #app .report-filter-card { transition: none; } }
@media print {
    html body { --hm-ink: #000; --hm-muted: #333; --hm-page: #fff; --hm-surface: #fff; --hm-soft: #f2f2f2; --hm-border: #999; --hm-shadow: none; --hm-shadow-raised: none; }
    #app :is(.risk-badge,.attendance-count) { color: #000 !important; background: #fff !important; border-color: #888 !important; }
}