/* ============================================================
   design-system.css — SMS visual redesign (COLOR-ONLY layer)
   St. Gonzaga Secondary School SMS | 2026

   PURPOSE
   ------------------------------------------------------------------
   This file is a pure visual-override layer. It defines the new
   education-themed color system and re-maps existing components to
   it. It does NOT alter layout, markup, logic or behaviour.

   LOADING RULE
   ------------------------------------------------------------------
   Must be loaded LAST in every page <head>, AFTER all page-specific
   stylesheets and inline <style> blocks, so its rules win the
   cascade. It is injected via a <link> just before </head>.

   DARK MODE
   ------------------------------------------------------------------
   Dark mode is driven by the existing `html.dark-mode` class
   (dark-mode.js) and, for the two standalone auth pages, the
   `:root[data-theme="dark"]` attribute.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS — LIGHT
   ═══════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
    /* Brand blues */
    --primary: #001f60;
    --primary-strong: #031a65;
    --primary-hover: #031f6b;
    --primary-soft: #DBEAFE;
    --primary-pale: #EFF6FF;

    /* Secondary/brand red (unified with danger) */
    --secondary: #DC2626;

    /* Semantic — fills (for backgrounds/borders) */
    --success: #16A34A;
    --success-strong: #15803D;
    --success-bg: #DCFCE7;
    --warning: #F59E0B;
    --warning-strong: #B45309;
    --warning-bg: #FEF3C7;
    --danger: #DC2626;
    --danger-strong: #B91C1C;
    --danger-bg: #FEE2E2;
    --info: #06B6D4;
    --info-strong: #0E7490;
    --info-bg: #CFFAFE;

    /* Accent extras */
    --accent: #06B6D4;
    --purple: #7C3AED;
    --female: #DB2777;

    /* Neutrals */
    --body-bg: #F8FAFC;
    --surface: #FFFFFF;
    --border: #cdd0d3;
    --border-strong: #CBD5E1;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-disabled: #94A3B8;

    /* Sidebar */
    --sidebar-bg: #0F172A;
    --sidebar-hover: #1E293B;
    --sidebar-header: #1E40AF;
    --sidebar-text: #CBD5E1;
    --sidebar-icon: #94A3B8;

    /* Shadows + focus */
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .07);
    --shadow-pop: 0 10px 40px -6px rgba(15, 23, 42, .20);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, .25);
    --ring-primary: rgba(37, 99, 235, .25);
    --ring-danger: rgba(220, 38, 38, .20);

    /* Chart palette (single source of truth for the 6 tokens) */
    --chart-blue: #2563EB;
    --chart-green: #16A34A;
    --chart-amber: #F59E0B;
    --chart-purple: #7C3AED;
    --chart-cyan: #06B6D4;
    --chart-red: #DC2626;
    --chart-female: #DB2777;

    /* Compat: legacy bootstrap-ish tokens used by page :root blocks */
    --text-dark: #0F172A;
    --text-light: #CBD5E1;
    --card-bg: #FFFFFF;

    /* Admin premium stat-card accents (defined inline in admin_dashboard.php) */
    --card-accent-1: #2563EB;
    /* students   */
    --card-accent-2: #3B82F6;
    /* male       */
    --card-accent-3: #DB2777;
    /* female     */
    --card-accent-4: #06B6D4;
    /* teachers   */
    --card-accent-5: #7C3AED;
    /* classes    */
    --card-accent-6: #F59E0B;
    /* subjects   */
    --card-accent-7: #DC2626;
    /* debt       */

    /* Auth-family brand tokens (index.php / portal_login.php) */
    --brand-navy: #13357d;
    --brand-navy-deep: #1E40AF;
    --brand-navy-soft: #3B82F6;
    --brand-crimson: #DC2626;
    --brand-crimson-soft: #F87171;
}

/* ═══════════════════════════════════════════════════════════
   2. DESIGN TOKENS — DARK
   ═══════════════════════════════════════════════════════════ */
html.dark-mode,
:root[data-theme="dark"] {
    --primary: #3B82F6;
    --primary-strong: #2563EB;
    --primary-hover: #60A5FA;
    --primary-soft: #1E3A8A;
    --primary-pale: #172554;

    --secondary: #F87171;

    --success: #16A34A;
    --success-strong: #4ADE80;
    --success-bg: rgba(22, 163, 74, .16);
    --warning: #F59E0B;
    --warning-strong: #FBBF24;
    --warning-bg: rgba(245, 158, 11, .16);
    --danger: #DC2626;
    --danger-strong: #F87171;
    --danger-bg: rgba(220, 38, 38, .16);
    --info: #06B6D4;
    --info-strong: #67E8F9;
    --info-bg: rgba(6, 182, 212, .16);

    --body-bg: #0B1220;
    --surface: #111827;
    --border: #1E293B;
    --border-strong: #334155;
    --text-primary: #E2E8F0;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-disabled: #475569;

    --sidebar-bg: #0F172A;
    --sidebar-hover: #1E2A3A;
    --sidebar-header: #0A1020;
    --sidebar-text: #CBD5E1;
    --sidebar-icon: #94A3B8;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);

    --brand-navy: #6C84E6;
    --brand-navy-deep: #4F68C9;
    --brand-navy-soft: #8AA0EE;
    --brand-crimson: #EF6464;
    --brand-crimson-soft: #F48A8A;
}

/* ═══════════════════════════════════════════════════════════
   3. AUTH PAGES — unified login family backdrop
   (index.php, portal_login.php, portal_*_pin.php,
    forgot_password.php, reset_password.php)
   ═══════════════════════════════════════════════════════════ */
body.auth-page {
    background-color: #0E1742;
    background-image:
        radial-gradient(620px 420px at 14% 8%, rgba(37, 99, 235, .32), transparent 60%),
        radial-gradient(720px 520px at 92% 92%, rgba(6, 182, 212, .20), transparent 60%),
        linear-gradient(135deg, #16213E 0%, #1E40AF 55%, #0F3460 100%);
    background-attachment: fixed;
}

html.dark-mode body.auth-page,
:root[data-theme="dark"] body.auth-page {
    background-color: #07091A;
    background-image:
        radial-gradient(620px 420px at 14% 8%, rgba(59, 130, 246, .20), transparent 60%),
        radial-gradient(720px 520px at 92% 92%, rgba(6, 182, 212, .14), transparent 60%),
        linear-gradient(135deg, #05071A 0%, #0C1340 55%, #160D2A 100%);
}

/* forgot_password / reset_password — swap green primary to brand blue */
body.auth-page .btn-primary,
body.auth-page .btn {
    background: linear-gradient(180deg, var(--primary, #2563EB) 0%, var(--primary-strong, #1E40AF) 100%);
    border-color: var(--primary, #2563EB);
}

body.auth-page .btn-primary:hover,
body.auth-page .btn:hover {
    background: var(--primary-strong, #1E40AF);
    border-color: var(--primary-strong, #1E40AF);
}

/* ═══════════════════════════════════════════════════════════
   4. SIDEBAR — dark professional sidebar with bold active state
   ═══════════════════════════════════════════════════════════ */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.sidebar-header {
    background: var(--sidebar-header);
    border-bottom-color: var(--border-strong);
}

.nav-link {
    color: var(--sidebar-text);
}

.nav-link i {
    color: var(--sidebar-icon);
}

.nav-link:hover,
.nav-link:hover i {
    background: var(--sidebar-hover);
    color: #FFFFFF;
}

.nav-link.active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    box-shadow: inset 3px 0 0 var(--accent);
}

.nav-link.active i {
    color: #FFFFFF !important;
}

.nav-item.active > .nav-link.dropdown-toggle {
    color: #FFFFFF;
}

/* ── Centralized dropdown show/hide rules ───────────────────────────
   These rules ensure consistent collapsible menu behavior across ALL
   pages, regardless of which page-specific CSS file is loaded.
   Loaded LAST via design-system.css, so these are the authority.
   ──────────────────────────────────────────────────────────────────── */

/* Arrow indicator for dropdown toggles */
.dropdown-toggle::after,
.nested > .dropdown-toggle::after {
    content: "▶";
    margin-left: auto;
    font-size: 0.7rem;
    color: #7f8c8d;
    transition: transform 0.3s;
    transform: rotate(0deg);
}

/* Rotate arrow when dropdown is open */
.dropdown.active > .nav-link.dropdown-toggle::after,
.nested.active > .nav-link.dropdown-toggle::after {
    transform: rotate(90deg);
    color: #ecf0f1;
}

/* Collapse all dropdown and nested menus by default */
.dropdown-menu,
.nested-menu {
    list-style: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, .18);
    transition: max-height 0.3s ease;
}

/* Expand top-level dropdown when parent has .active */
.dropdown.active > .dropdown-menu {
    max-height: 1000px;
    padding: 0.45rem 0;
}

/* Expand nested dropdown independently (accordion-free) */
.nested.active > .nested-menu {
    max-height: 500px;
    padding: 0.3rem 0;
    background: rgba(0, 0, 0, .15);
}

.dropdown-menu .nav-link,
.nested-menu .nav-link {
    color: var(--sidebar-text);
}

.dropdown-menu .nav-link:hover,
.nested-menu .nav-link:hover {
    background: var(--sidebar-hover);
    color: #FFFFFF;
}

.logout-btn {
    color: #FCA5A5 !important;
}

.logout-btn:hover {
    background: rgba(248, 113, 113, .12);
    color: #FECACA !important;
}

/* Sidebar toggle (collapse) */
.sidebar-toggle {
    color: var(--text-muted);
}

.sidebar-toggle:hover {
    background: rgba(37, 99, 235, .08);
}

/* ═══════════════════════════════════════════════════════════
   5. SCHOOL BANNER / NAVBAR
   ═══════════════════════════════════════════════════════════ */
.school-banner {
    background: linear-gradient(135deg, var(--primary-strong) 0%, #16213E 55%, #0F3460 100%);
}

.school-banner::before {
    background: linear-gradient(90deg, var(--accent) 0%, var(--warning) 50%, var(--accent) 100%);
}

.header,
.header-top,
.header-widget,
.topbar {
    background: var(--surface);
    border-bottom-color: var(--border);
}

.header h1,
.header-top h1,
.admin-info h1,
.teacher-info h1 {
    color: var(--primary-strong);
}

/* ═══════════════════════════════════════════════════════════
   6. BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn-primary,
.btn.btn-primary,
.inactivity-btn-primary,
.um-btn-confirm-info,
.result-modal-btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.inactivity-btn-primary:hover,
.um-btn-confirm-info:hover {
    background: linear-gradient(135deg, var(--primary-strong) 0%, var(--primary-hover) 100%) !important;
}

.btn-success,
.btn.btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
}

.btn-success:hover,
.btn.btn-success:hover {
    background: var(--success-strong) !important;
    border-color: var(--success-strong) !important;
}

.btn-danger,
.btn.btn-danger,
.inactivity-btn-danger,
.um-btn-confirm-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-strong) 100%) !important;
    border-color: var(--danger) !important;
}

.btn-danger:hover,
.btn.btn-danger:hover,
.inactivity-btn-danger:hover,
.um-btn-confirm-danger:hover {
    background: linear-gradient(135deg, var(--danger-strong) 0%, #991B1B 100%) !important;
}

.btn-warning,
.btn.btn-warning {
    background: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--text-primary) !important;
}

.btn-warning:hover,
.btn.btn-warning:hover {
    background: var(--warning-strong) !important;
    color: #FFFFFF !important;
}

.btn-info,
.btn.btn-info {
    background: var(--info) !important;
    border-color: var(--info) !important;
}

.btn-info:hover,
.btn.btn-info:hover {
    background: var(--info-strong) !important;
    border-color: var(--info-strong) !important;
}

.btn.outline {
    border-color: var(--primary);
    color: var(--primary);
}

.btn.outline:hover {
    background: var(--primary);
    color: #FFFFFF;
}

.btn-secondary,
.btn.btn-secondary,
.inactivity-btn-secondary {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.inactivity-btn-secondary:hover {
    background: var(--primary-pale) !important;
    color: var(--primary-strong) !important;
}

.btn-export {
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-export:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-pdf,
.btn-pdf:hover {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-strong) 100%);
}

/* ═══════════════════════════════════════════════════════════
   7. TABLES — unified headers, zebra, hover
   ═══════════════════════════════════════════════════════════ */
thead th {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-bottom-color: var(--primary-strong) !important;
}

tbody tr:nth-child(even) {
    background: #F8FAFC;
}

html.dark-mode tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .025);
}

tbody tr:hover {
    background: var(--primary-pale) !important;
}

html.dark-mode tbody tr:hover {
    background: rgba(59, 130, 246, .12) !important;
}

/* ═══════════════════════════════════════════════════════════
   7b. REPORT CARDS — kept print-safe monochrome (single + bulk)
   The global table theme above (blue thead + zebra banding +
   hover tint) must never leak into report cards. Theme fills do
   not print reliably, which turns the white header text invisible
   on the printed card, and zebra banding is unwanted on an
   official report card. These exemptions keep both the single
   (report_card_template.php) and bulk (bulk_report_card_print.php)
   report cards black-on-white in screen AND print.
   ============================================================ */
.report-card thead th,
.report-card-page thead th,
.report-card .marks-table th,
.report-card-page .marks-table th,
.report-card .points-table th,
.report-card-page .points-table th,
.report-card .comments-table th,
.report-card-page .comments-table th,
.report-card .grading-scale th,
.report-card-page .grading-scale th {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom-color: #000000 !important;
}

.report-card tbody tr:nth-child(even),
.report-card-page tbody tr:nth-child(even) {
    background: #ffffff !important;
}

.report-card tbody tr:hover,
.report-card-page tbody tr:hover {
    background: #ffffff !important;
}

.report-card,
.report-card-page {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Column highlights — refreshed tints */
.total-col {
    background: var(--info-bg) !important;
}

.grade-col {
    background: var(--primary-pale) !important;
}

.achievement-col {
    background: var(--warning-bg) !important;
}

.remark-col {
    background: var(--info-bg) !important;
}

/* Text emphasis */
.fail-grade {
    color: var(--danger-strong) !important;
}

.distinction-grade {
    color: var(--success-strong) !important;
}

.cell-balance.balance-positive {
    color: var(--danger-strong) !important;
}

.cell-balance.balance-zero {
    color: var(--success-strong) !important;
}

/* finance_wallets.php — wallet balance colors (AA-safe) */
.balance-positive {
    color: var(--success-strong) !important;
}

.balance-zero {
    color: var(--text-muted) !important;
}

/* Overdue / inactive row emphasis */
tbody tr.row-overdue {
    border-left-color: var(--danger) !important;
    background: var(--danger-bg) !important;
}

/* ═══════════════════════════════════════════════════════════
   8. GRADE BADGES — AA-safe fills (also fixes reports.php,
   which uses these classes without linking dashboard.css)
   ═══════════════════════════════════════════════════════════ */
.grade-badge {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 800;
}

.grade-a {
    background: var(--success-strong);
    color: #FFFFFF;
}

.grade-b {
    background: var(--info-strong);
    color: #FFFFFF;
}

.grade-c {
    background: var(--warning);
    color: var(--text-primary);
}

.grade-d {
    background: #C2410C;
    color: #FFFFFF;
}

.grade-e {
    background: var(--danger);
    color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════
   9. BADGES — one unified semantic system (AA-safe text)
   ═══════════════════════════════════════════════════════════ */
.badge.paid,
.status-badge.paid,
.badge-modern.paid,
.badge.successful,
.status-active,
.badge-sms.sent {
    background: var(--success-bg) !important;
    color: var(--success-strong) !important;
}

.badge.partial,
.status-badge.partial,
.badge.pending-ok,
.badge-modern.partial {
    background: var(--info-bg) !important;
    color: var(--info-strong) !important;
}

.badge.pending,
.status-badge.pending,
.badge-modern.pending,
.badge-sms.queued {
    background: var(--warning-bg) !important;
    color: var(--warning-strong) !important;
}

.badge.overdue,
.status-badge.overdue,
.badge-modern.overdue,
.status-inactive,
.badge-sms.failed,
.badge-sms.no_phone {
    background: var(--danger-bg) !important;
    color: var(--danger-strong) !important;
}

.badge.cancelled,
.badge-modern.cancelled,
.badge-sms.not_sent {
    background: #F1F5F9 !important;
    color: var(--text-muted) !important;
}

html.dark-mode .badge.cancelled,
html.dark-mode .badge-modern.cancelled {
    background: rgba(100, 116, 139, .18) !important;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success-strong);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info-strong);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-strong);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger-strong);
}

/* Finance status badges (finance_invoices.php .status-badge) */
.status-badge.paid {
    background: var(--success-bg) !important;
    color: var(--success-strong) !important;
}

.status-badge.partial {
    background: var(--info-bg) !important;
    color: var(--info-strong) !important;
}

.status-badge.pending {
    background: var(--warning-bg) !important;
    color: var(--warning-strong) !important;
}

.status-badge.overdue {
    background: var(--danger-bg) !important;
    color: var(--danger-strong) !important;
}

.status-badge.cancelled {
    background: #F1F5F9 !important;
    color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════
   10. FORMS — focus indicators, validation, marks entry
   ═══════════════════════════════════════════════════════════ */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-control[type]:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none;
}

.mark-input {
    border-color: var(--border-strong) !important;
    background: var(--surface) !important;
}

.mark-input:focus {
    border-color: var(--primary) !important;
    background: #FFFFFF !important;
    box-shadow: var(--focus-ring) !important;
}

.mark-input.input-error {
    border-color: var(--danger) !important;
    background: var(--danger-bg) !important;
    box-shadow: inset 3px 0 0 var(--danger);
}

.mark-input.input-ok {
    border-color: var(--success) !important;
    background: var(--success-bg) !important;
    box-shadow: inset 3px 0 0 var(--success);
}

html.dark-mode .mark-input.input-error {
    background: rgba(220, 38, 38, .14) !important;
}

html.dark-mode .mark-input.input-ok {
    background: rgba(22, 163, 74, .14) !important;
}

/* Visible keyboard focus on interactive elements */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ═══════════════════════════════════════════════════════════
   11. STAT / SUMMARY CARDS — single consistent system
   ═══════════════════════════════════════════════════════════ */
.stat-card {
    background: var(--surface);
    border-color: var(--border) !important;
    box-shadow: var(--shadow-card) !important;
}

.stat-card h3,
.stat-card .value {
    color: var(--text-primary) !important;
}

.stat-card p,
.stat-card .label,
.asummary-text .label {
    color: var(--text-secondary) !important;
}

.stat-card .subtext,
.asummary-text .sub {
    color: var(--text-muted) !important;
}

.stat-card i {
    color: var(--primary) !important;
}

/* Bursar dashboard accent bars (nth-child) — refreshed */
.stats-cards .stat-card:nth-child(1) {
    border-top-color: var(--chart-blue) !important;
}

.stats-cards .stat-card:nth-child(2) {
    border-top-color: #3B82F6 !important;
}

.stats-cards .stat-card:nth-child(3) {
    border-top-color: var(--chart-female) !important;
}

.stats-cards .stat-card:nth-child(4) {
    border-top-color: var(--chart-cyan) !important;
}

.stats-cards .stat-card:nth-child(5) {
    border-top-color: var(--chart-amber) !important;
}

.stats-cards .stat-card:nth-child(6) {
    border-top-color: var(--chart-purple) !important;
}

.stats-cards .stat-card:nth-child(7) {
    border-top-color: var(--chart-red) !important;
    border-bottom: none !important;
}

.stats-cards .stat-card:nth-child(1) i {
    background: rgba(37, 99, 235, .09);
    color: var(--chart-blue) !important;
}

.stats-cards .stat-card:nth-child(2) i {
    background: rgba(59, 130, 246, .09);
    color: #3B82F6 !important;
}

.stats-cards .stat-card:nth-child(3) i {
    background: rgba(219, 39, 119, .09);
    color: var(--chart-female) !important;
}

.stats-cards .stat-card:nth-child(4) i {
    background: rgba(6, 182, 212, .09);
    color: var(--chart-cyan) !important;
}

.stats-cards .stat-card:nth-child(5) i {
    background: rgba(245, 158, 11, .09);
    color: var(--chart-amber) !important;
}

.stats-cards .stat-card:nth-child(6) i {
    background: rgba(124, 58, 237, .09);
    color: var(--chart-purple) !important;
}

.stats-cards .stat-card:nth-child(7) i {
    background: rgba(220, 38, 38, .09);
    color: var(--chart-red) !important;
}

/* Finance summary icon chips */
.summary-card .card-icon,
.stat-card .stat-icon,
.asummary-icon {
    background: var(--primary-pale) !important;
    color: var(--primary-strong) !important;
}

.summary-card.info .card-icon {
    background: var(--info-bg) !important;
    color: var(--info-strong) !important;
}

.summary-card.success .card-icon {
    background: var(--success-bg) !important;
    color: var(--success-strong) !important;
}

.summary-card.warning .card-icon {
    background: var(--warning-bg) !important;
    color: var(--warning-strong) !important;
}

.summary-card.danger .card-icon {
    background: var(--danger-bg) !important;
    color: var(--danger-strong) !important;
}

.asummary-icon.green {
    background: var(--success-bg) !important;
    color: var(--success-strong) !important;
}

.asummary-icon.red {
    background: var(--danger-bg) !important;
    color: var(--danger-strong) !important;
}

.asummary-icon.blue {
    background: var(--info-bg) !important;
    color: var(--info-strong) !important;
}

.asummary-icon.teal {
    background: var(--info-bg) !important;
    color: var(--info-strong) !important;
}

.asummary-icon.amber {
    background: var(--warning-bg) !important;
    color: var(--warning-strong) !important;
}

.asummary-icon.purple {
    background: var(--primary-pale) !important;
    color: var(--purple) !important;
}

/* Generic cards */
.card,
.chart-card,
.detailed-card,
.info-card,
.subject-card,
.class-card,
.schedule-card,
.quick-action-card,
.activity-mini-card,
.daily-summary-card,
.users-list,
.logs-container,
.table-container,
.analytics-table-wrap,
.tpt-table-wrap,
.invoice-table-wrapper,
.filter-panel-wrapper,
.filter-panel-body {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.chart-card,
.asummary-card,
.summary-card,
.bos-report,
.stat-card {
    box-shadow: var(--shadow-card) !important;
}

/* ═══════════════════════════════════════════════════════════
   12. MODALS & ALERTS & TOASTS
   ═══════════════════════════════════════════════════════════ */
.um-header.um-info {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
}

.um-header.um-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-strong) 100%);
}

.um-header.um-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-strong) 100%);
}

.um-input-wrap input:focus,
.um-input-wrap textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.um-btn-cancel {
    background: #F1F5F9 !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

/* Inactivity modal */
.inactivity-modal-header h2 {
    color: var(--primary-strong);
}

.inactivity-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
}

/* Alerts — AA text variants */
.alert-success,
.alert.success {
    background: var(--success-bg) !important;
    color: var(--success-strong) !important;
    border-color: var(--success-strong) !important;
}

.alert-danger,
.alert.error {
    background: var(--danger-bg) !important;
    color: var(--danger-strong) !important;
    border-color: var(--danger-strong) !important;
}

.alert-warning,
.alert.warning {
    background: var(--warning-bg) !important;
    color: var(--warning-strong) !important;
    border-color: var(--warning-strong) !important;
}

.alert-info,
.alert.info {
    background: var(--info-bg) !important;
    color: var(--info-strong) !important;
    border-color: var(--info-strong) !important;
}

/* Toasts */
.toast {
    border-color: var(--border);
}

.toast.success {
    border-left-color: var(--success) !important;
}

.toast.error {
    border-left-color: var(--danger) !important;
}

.toast.info {
    border-left-color: var(--primary) !important;
}

.toast.success i {
    color: var(--success-strong) !important;
}

.toast.error i {
    color: var(--danger-strong) !important;
}

.toast.info i {
    color: var(--primary-strong) !important;
}

/* Filter chips / tags */
.filter-chip {
    background: var(--primary-pale) !important;
    border-color: var(--primary-soft) !important;
    color: var(--primary-strong) !important;
}

.filter-chip .chip-remove:hover {
    color: var(--danger) !important;
}

/* ═══════════════════════════════════════════════════════════
   13. TEXT UTILITIES — AA-safe
   ═══════════════════════════════════════════════════════════ */
.text-success {
    color: var(--success-strong) !important;
}

.text-warning {
    color: var(--warning-strong) !important;
}

.text-danger {
    color: var(--danger-strong) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--primary-strong) !important;
}

.chart-subtitle {
    color: var(--text-muted) !important;
}

.chart-card-header h4,
.asummary-text .value,
.bos-name {
    color: var(--text-primary) !important;
}

.bos-class,
.class-cell {
    color: var(--text-muted) !important;
}

.bos-stat-val {
    color: var(--primary-strong) !important;
}

.subj-code,
.student-avatar {
    background: var(--primary-pale) !important;
    color: var(--primary-strong) !important;
}

.pts-cell {
    color: var(--primary-strong) !important;
}

/* ═══════════════════════════════════════════════════════════
   14. CHART INSIGHT STRIP / ANALYTICS ACCENTS
   ═══════════════════════════════════════════════════════════ */
.chart-insight {
    background: linear-gradient(90deg, var(--primary-pale) 0%, var(--surface) 100%) !important;
    border-left-color: var(--accent) !important;
    color: var(--text-secondary) !important;
}

.chart-insight i {
    color: var(--accent) !important;
}

.analytics-header h2 {
    color: var(--primary-strong) !important;
}

.analytics-header h2 i {
    color: var(--accent) !important;
}

.analytics-header .period-badge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
}

.chart-badge-info {
    background: var(--info-bg) !important;
    color: var(--info-strong) !important;
}

.chart-badge-warn {
    background: var(--warning-bg) !important;
    color: var(--warning-strong) !important;
}

.chart-badge-success {
    background: var(--success-bg) !important;
    color: var(--success-strong) !important;
}

/* ═══════════════════════════════════════════════════════════
   15. DARK-MODE TOGGLE BUTTON — refreshed blue
   ═══════════════════════════════════════════════════════════ */
.dark-toggle {
    border-color: rgba(37, 99, 235, .30) !important;
    color: #475569 !important;
}

.dark-toggle:hover {
    border-color: var(--primary) !important;
    color: var(--primary-strong) !important;
    background: rgba(37, 99, 235, .06) !important;
}

.dark-toggle.on-dark-bg {
    border-color: rgba(255, 255, 255, .22) !important;
    color: rgba(255, 255, 255, .85) !important;
}

html.dark-mode .dark-toggle {
    border-color: rgba(147, 197, 253, .4) !important;
    color: #93C5FD !important;
    background: rgba(59, 130, 246, .1) !important;
}

/* Header-bar toggle group (mirrors admin_dashboard.php .header-controls) */
.header-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* Toggle row for auth/login cards (no header bar) */
.auth-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* Floating toggle used only on pages without a header bar */
.sms-float-toggle {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 9998;
    background: var(--surface, #FFFFFF);
    border: 1.5px solid rgba(37, 99, 235, .35);
    border-radius: 50px;
    padding: 8px 14px 8px 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    user-select: none;
}

.sms-float-toggle:hover {
    border-color: var(--primary);
    color: var(--primary-strong);
}

html.dark-mode .sms-float-toggle {
    background: #1E293B;
    border-color: rgba(147, 197, 253, .4);
    color: #93C5FD;
}

@media print {
    .sms-float-toggle {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   16. MISCELLANEOUS COMPONENT REFRESH
   ═══════════════════════════════════════════════════════════ */
/* Pagination */
.pagination a:hover,
.pagination .current,
.pagination-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
}

/* Progress bars */
.progress-fill.male {
    background: var(--chart-blue);
}

.progress-fill.female {
    background: var(--chart-female);
}

/* Links */
a {
    color: var(--primary-strong);
}

a:hover {
    color: var(--primary);
}

/* Detail rows */
.stat-row {
    border-bottom-color: var(--border) !important;
}

/* Marksheet info bars */
.marksheet-info {
    border-color: var(--primary-soft) !important;
}

.marksheet-info-item {
    background: var(--primary-pale) !important;
    border-right-color: var(--primary-soft) !important;
}

.marksheet-info-item .label {
    color: var(--primary-strong) !important;
}

/* Finance guide / inactive-state emphasis */
.info-box {
    border-left-color: var(--primary) !important;
}

.warning-popover,
#markWarningPopover {
    border-color: var(--warning) !important;
    background: var(--warning-bg) !important;
}

/* ============================================================
   STANDARD SITE FOOTER — master markup lives in includes/footer.php
   (originally defined in admin_dashboard.php). Keep this block in
   sync with that component. Scoped to .main-wrapper so standalone
   pages (e.g. maintenance.php) are unaffected.
   ============================================================ */
.main-wrapper .footer {
    padding: 0.8rem 1.4rem;
    background: white;
    border-top: 1px solid #e9ecef;
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
    flex-shrink: 0;
    margin-top: auto;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.main-wrapper .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.main-wrapper .copyright {
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-wrapper .footer-links {
    display: flex;
    gap: 1rem;
}

.main-wrapper .footer-links a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.main-wrapper .footer-links a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .main-wrapper .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }

    .main-wrapper .footer-links {
        justify-content: center;
    }
}

/* ------------------------------------------------------------------
   Unscoped footer styles — same master look for pages that render
   the footer outside a `.main-wrapper` (e.g. portal/standalone pages).
------------------------------------------------------------------- */
.footer {
    padding: 0.8rem 1.4rem;
    background: white;
    border-top: 1px solid #e9ecef;
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: auto;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.copyright {
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-links {
    display: flex;
    gap: 1rem;
}

.footer-links a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--secondary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }

    .footer-links {
        justify-content: center;
    }
}

/* ============================================================
   END OF design-system.css
   ============================================================ */