/* ==========================================================================
   Madressah Management System — Design System
   Serious, understated administrative UI.
   No gradients. No bright colours. No glassmorphism.
   ========================================================================== */

:root {
    /* Always render native controls (selects, date pickers, scrollbars) in
       light mode — prevents dark-on-dark text when the OS/browser is in dark mode. */
    color-scheme: light;

    /* Surfaces */
    --bg: #FAFAF8;
    --surface: #FFFFFF;
    --surface-alt: #F5F5F2;

    /* Text */
    --text: #1C1C1C;
    --text-2: #6B6B6B;

    /* Structure */
    --border: #E0E0E0;

    /* Accent — ISOG navy (primary) */
    --accent: #16357e;
    --accent-hover: #0f2657;
    --accent-ring: rgba(22, 53, 126, 0.18);
    --accent-soft: rgba(22, 53, 126, 0.08);

    /* Gold — secondary accent (highlights, selections) */
    --gold: #C8A24A;
    --gold-dark: #A8842F;
    --gold-soft: rgba(200, 162, 74, 0.14);

    /* Sidebar — deep navy */
    --sidebar-bg: #122A5E;
    --sidebar-bg-2: #0E2350;
    --sidebar-text: rgba(255, 255, 255, 0.82);
    --sidebar-muted: rgba(255, 255, 255, 0.55);
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-active: rgba(255, 255, 255, 0.12);

    /* Status */
    --danger: #8B1A1A;
    --danger-soft: #FAF0F0;
    --warning: #7A5A00;
    --success: #2E5E3E;
    --inactive: #6B6B6B;

    /* Semantic palette (tinted pastel bg + dark text) */
    --success-bg: #EAF2EC;  --success-border: #CFE0D3;
    --warning-bg: #FBF3DE;  --warning-border: #EDDFB7;
    --warning-fg: #8A6A1A;
    --danger-bg:  #F7E6E6;  --danger-border:  #EBCACA;
    --info:       #1E4E6E;  --info-bg:        #E4EEF4;  --info-border: #C3D5E0;
    --neutral:    #6B6B6B;  --neutral-bg:     #F0EFEC;  --neutral-border: #DAD8D2;

    /* Radius */
    --radius: 4px;
    --radius-sm: 2px;

    /* Layout */
    --sidebar-width: 240px;
    --topbar-height: 56px;

    /* Typography */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
h1 { font-size: 20px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4, h5 { font-size: 15px; }
h6 { font-size: 13px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* --------------------------------------------------------------------------
   Layout grid (sidebar + topbar + main)
   -------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-bg-2);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.sidebar-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 2px solid var(--gold);
    background: var(--sidebar-bg-2);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.2px;
}
.sidebar-brand:hover { color: #FFFFFF; text-decoration: none; background: var(--sidebar-bg-2); }
.sidebar-brand .brand-mark {
    width: 26px; height: 26px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    margin-right: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF;
    font-size: 13px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 16px;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

.menu-header {
    padding: 18px 16px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sidebar-muted);
    opacity: 1;
}

.menu-item { list-style: none; }
.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 14px;
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-link:hover {
    background: var(--sidebar-hover);
    color: #FFFFFF;
    text-decoration: none;
}
.menu-link.active {
    background: var(--sidebar-active);
    color: #FFFFFF;
    font-weight: 600;
    border-left-color: var(--gold);
}
.menu-icon {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sidebar-text);
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    font-size: 12px;
    flex-shrink: 0;
}
.menu-link:hover .menu-icon { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.menu-link.active .menu-icon { background: var(--gold); color: var(--sidebar-bg); }
.menu-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.menu-arrow {
    font-size: 10px;
    color: var(--sidebar-muted);
    transition: transform 0.15s ease;
}
.menu-item.open > .menu-link .menu-arrow { transform: rotate(90deg); }
.nav-badge { background: var(--gold); color: #1a1a1a; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 10px; margin-left: 6px; flex-shrink: 0; }
.menu-subhead { padding: 12px 16px 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--sidebar-muted); }

/* Sidebar: always-expanded navigation (no collapse/expand) */
.submenu { max-height: none !important; overflow: visible; }
.menu-arrow { display: none !important; }
.menu-item > .menu-link[onclick] { cursor: default; }
/* Colour-coded section headings */
.menu-header { border-top: 1px solid rgba(255,255,255,0.07); margin-top: 6px; padding-top: 12px; opacity: 1; }
.menu-header.c-students { color: #4FC3F7; }
.menu-header.c-teaching { color: #81C784; }
.menu-header.c-admin    { color: #B79CEB; }
.menu-header.c-finance  { color: var(--gold); }
.menu-header.c-system   { color: #FF8A80; }

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.menu-item.open > .submenu { max-height: 800px; }
.submenu .menu-link {
    height: 30px;
    padding-left: 46px;
    font-size: 12.5px;
    color: var(--sidebar-muted);
    border-left: 3px solid transparent;
}
.submenu .menu-link:hover { color: #FFFFFF; background: var(--sidebar-hover); }
.submenu .menu-link.active {
    color: #FFFFFF;
    background: var(--sidebar-active);
    border-left-color: var(--gold);
    font-weight: 600;
}

.topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 999;
}
.topbar .page-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.topbar .topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}
.topbar .school-name {
    font-size: 12px;
    color: var(--text-2);
}
.user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    cursor: pointer;
}

.main-wrapper { margin-left: var(--sidebar-width); }
.main-content {
    margin-top: var(--topbar-height);
    padding: 24px 32px 48px;
    min-height: calc(100vh - var(--topbar-height));
}

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
    .sidebar.mobile-open { transform: translateX(0); }
    .topbar { left: 0; }
    .main-wrapper { margin-left: 0; }
    .main-content { padding: 16px; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    margin-bottom: 16px;
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    border-radius: 0;
}
.card-body { padding: 20px; }
.card-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 20px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    box-shadow: none !important;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:focus, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-ring) !important;
}

.btn-primary, .btn-success {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:active, .btn-success:active,
.btn-primary:focus, .btn-success:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-dark, .btn-outline-light {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-info:hover,
.btn-outline-dark:hover, .btn-outline-light:hover {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}

.btn-danger, .btn-outline-danger {
    background: var(--surface);
    border-color: var(--danger);
    color: var(--danger);
}
.btn-danger:hover, .btn-outline-danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.btn-warning {
    background: var(--surface);
    border-color: var(--border);
    color: var(--warning);
}
.btn-warning:hover { background: var(--surface-alt); color: var(--warning); }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 38px; padding: 0 18px; font-size: 14px; }

.btn-link {
    background: transparent;
    border: none;
    color: var(--accent);
    padding: 0;
    height: auto;
}
.btn-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label, label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
    display: block;
}
.form-text, .help-text {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 4px;
}

.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="tel"], input[type="search"], textarea, select {
    height: 36px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    width: 100%;
    box-shadow: none !important;
    transition: border-color 0.12s, box-shadow 0.12s;
}
textarea, textarea.form-control { min-height: 80px; height: auto; padding: 8px 10px; }

/* Force light option rendering so dropdown text never goes dark-on-dark */
.form-select option, select option { background: var(--surface); color: var(--text); }
.form-select, select { color-scheme: light; }

.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-ring) !important;
}

.form-control::placeholder { color: var(--text-2); }
.form-control:disabled, .form-select:disabled {
    background: var(--surface-alt);
    color: var(--text-2);
}

.form-check-input {
    width: 16px; height: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none !important;
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input:focus {
    box-shadow: 0 0 0 2px var(--accent-ring) !important;
    border-color: var(--accent);
}
.form-check-label { font-size: 13px; color: var(--text); font-weight: 400; }

.required::after { content: " *"; color: var(--danger); }

.input-group-text {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    margin: 0;
    border-radius: 0;
}
.table thead th {
    background: var(--surface-alt);
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-alt); }
.table tbody tr.selected,
.table tbody tr.row-selected {
    background: var(--surface-alt);
    box-shadow: inset 2px 0 0 var(--accent);
}

.table-striped tbody tr:nth-of-type(odd) { background: var(--bg); }
.table-striped tbody tr:nth-of-type(odd):hover { background: var(--surface-alt); }

.table-responsive {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.table-responsive .table thead th:first-child,
.table-responsive .table tbody td:first-child { padding-left: 16px; }
.table-responsive .table thead th:last-child,
.table-responsive .table tbody td:last-child { padding-right: 16px; }

/* --------------------------------------------------------------------------
   Badges — mapped to semantic palette
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 3px;
    background: var(--neutral-bg);
    color: var(--neutral);
    border: 1px solid var(--neutral-border);
}
.badge.bg-success, .badge.bg-primary {
    background: var(--success-bg) !important;
    color: var(--success) !important;
    border: 1px solid var(--success-border) !important;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 3px;
}
.badge.bg-warning {
    background: var(--warning-bg) !important;
    color: var(--warning-fg) !important;
    border: 1px solid var(--warning-border) !important;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 3px;
}
.badge.bg-danger {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger-border) !important;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 3px;
}
.badge.bg-info {
    background: var(--info-bg) !important;
    color: var(--info) !important;
    border: 1px solid var(--info-border) !important;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 3px;
}
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark {
    background: var(--neutral-bg) !important;
    color: var(--neutral) !important;
    border: 1px solid var(--neutral-border) !important;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Status pills (semantic)
   -------------------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    border: 1px solid transparent;
    line-height: 20px;
}
.pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}
.pill-success { background: var(--success-bg); color: var(--success);    border-color: var(--success-border); }
.pill-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.pill-danger  { background: var(--danger-bg);  color: var(--danger);     border-color: var(--danger-border); }
.pill-info    { background: var(--info-bg);    color: var(--info);       border-color: var(--info-border); }
.pill-neutral { background: var(--neutral-bg); color: var(--neutral);    border-color: var(--neutral-border); }

/* Row / cell tint utilities */
.row-tint-success { background: var(--success-bg) !important; }
.row-tint-warning { background: var(--warning-bg) !important; }
.row-tint-danger  { background: var(--danger-bg)  !important; }
.row-tint-info    { background: var(--info-bg)    !important; }
.row-tint-neutral { background: var(--neutral-bg) !important; }

/* --------------------------------------------------------------------------
   Status dots
   -------------------------------------------------------------------------- */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--inactive);
}
.status-dot.active, .status-dot.success, .status-dot.present { background: var(--accent); }
.status-dot.overdue, .status-dot.danger, .status-dot.absent, .status-dot.left { background: var(--danger); }
.status-dot.pending, .status-dot.warning, .status-dot.late, .status-dot.suspended { background: var(--warning); }
.status-dot.inactive { background: var(--inactive); }

.status-text { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; }
.status-text.success, .text-success { color: var(--success) !important; }
.status-text.danger, .text-danger { color: var(--danger) !important; }
.status-text.warning, .text-warning { color: var(--warning) !important; }
.status-text.muted, .text-muted { color: var(--text-2) !important; }
.text-meta { font-size: 12px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-2);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 16px;
}
.alert-success { border-left-color: var(--accent); }
.alert-success, .alert-success * { color: var(--success); }
.alert-danger { border-left-color: var(--danger); }
.alert-danger, .alert-danger * { color: var(--danger); }
.alert-warning { border-left-color: var(--warning); }
.alert-warning, .alert-warning * { color: var(--warning); }
.alert-info { border-left-color: var(--text-2); }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "·";
    color: var(--text-2);
    padding: 0 6px 0 2px;
}
.breadcrumb-item.active { color: var(--text); }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination { gap: 4px; margin: 0; }
.page-link {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    border-radius: var(--radius);
    padding: 4px 10px;
    min-width: 28px;
    text-align: center;
    box-shadow: none;
}
.page-link:hover { background: var(--surface-alt); color: var(--text); }
.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.page-item.disabled .page-link { color: var(--text-2); background: var(--surface); }

/* --------------------------------------------------------------------------
   Tabs (underline style)
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--border);
    gap: 4px;
}
.nav-tabs .nav-link {
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
    color: var(--text);
    background: transparent;
    border-bottom-color: var(--border);
}
.nav-tabs .nav-link.active {
    color: var(--text);
    background: transparent;
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.modal-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--text); }
.modal-body { padding: 20px; font-size: 14px; }
.modal-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 20px;
    gap: 8px;
}
/* Legacy / off-system modal header colours mapped to brand navy */
.modal-header.purple,
.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-success,
.modal-header.bg-dark {
    background: var(--accent) !important;
    border-bottom: 1px solid var(--accent) !important;
}
.modal-header.purple, .modal-header.purple *,
.modal-header.bg-primary, .modal-header.bg-primary *,
.modal-header.bg-info, .modal-header.bg-info *,
.modal-header.bg-success, .modal-header.bg-success *,
.modal-header.bg-dark, .modal-header.bg-dark * { color: #fff !important; }
.modal-header.purple .btn-close,
.modal-header.bg-primary .btn-close,
.modal-header.bg-info .btn-close,
.modal-header.bg-success .btn-close,
.modal-header.bg-dark .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* --------------------------------------------------------------------------
   Dropdown
   -------------------------------------------------------------------------- */
.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 4px;
    font-size: 13px;
    min-width: 180px;
}
.dropdown-item {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--surface-alt);
    color: var(--text);
}
.dropdown-divider { border-top: 1px solid var(--border); margin: 4px 0; }

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    top: calc(var(--topbar-height) + 12px);
    right: 16px;
    z-index: 9999;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-2);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    min-width: 300px;
    max-width: 380px;
    backdrop-filter: none;
    color: var(--text);
    font-size: 13px;
    margin-bottom: 8px;
}
.toast-success { border-left-color: var(--accent); }
.toast-error, .toast-danger { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-info { border-left-color: var(--text-2); }
.toast-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 12px;
    color: var(--text) !important;
    font-weight: 600;
    font-size: 13px;
}
.toast-body { padding: 10px 12px; color: var(--text) !important; font-weight: 400; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-wrap {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 360px;
    padding: 32px;
}
.login-wordmark {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.login-tagline {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   KPI tiles
   -------------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 992px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-tile {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    background: var(--neutral-bg);
    color: var(--neutral);
}
.kpi-icon.success { background: var(--success-bg); color: var(--success); }
.kpi-icon.warning { background: var(--warning-bg); color: var(--warning-fg); }
.kpi-icon.danger  { background: var(--danger-bg);  color: var(--danger); }
.kpi-icon.info    { background: var(--info-bg);    color: var(--info); }
.kpi-icon.neutral { background: var(--neutral-bg); color: var(--neutral); }
.kpi-icon.accent  { background: var(--accent-soft); color: var(--accent); }
.kpi-icon.gold    { background: var(--gold-soft);   color: var(--gold-dark); }

/* Profile-completeness ring */
.comp-ring {
    --pct: 0; --ring: var(--success);
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: conic-gradient(var(--ring) calc(var(--pct) * 3.6deg), var(--surface-alt) 0);
}
.comp-ring > span {
    width: 30px; height: 30px; border-radius: 50%; background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--text);
}
.comp-ring.lg { width: 92px; height: 92px; }
.comp-ring.lg > span { width: 72px; height: 72px; font-size: 19px; }

.kpi-body { flex: 1; min-width: 0; }

.kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0;
}
.kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
    margin-top: 2px;
}
.kpi-meta {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
}

/* Legacy .stat-card variants (referenced in older pages) */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.stat-card.green,  .stat-card.success  { border-left-color: var(--success); }
.stat-card.red,    .stat-card.danger   { border-left-color: var(--danger); }
.stat-card.yellow, .stat-card.warning  { border-left-color: var(--warning-fg); }
.stat-card.blue,   .stat-card.info     { border-left-color: var(--info); }
.stat-card.purple, .stat-card.neutral  { border-left-color: var(--neutral); }
.stat-card .num { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; }
.stat-card .lbl { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

/* Card headers that still use bootstrap bg-primary / bg-info / bg-warning / bg-danger
   (mostly modal / form card headers) — map to tinted neutral surface. */
.card-header.bg-primary,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-success,
.card-header.bg-secondary,
.card-header.bg-dark {
    background: var(--neutral-bg) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
}
.card-header.bg-primary.text-white,
.card-header.bg-info.text-white,
.card-header.bg-warning.text-white,
.card-header.bg-danger.text-white,
.card-header.bg-success.text-white,
.card-header.bg-secondary.text-white,
.card-header.bg-dark.text-white,
.card-header.bg-primary *,
.card-header.bg-info *,
.card-header.bg-warning *,
.card-header.bg-danger * {
    color: var(--text) !important;
}

/* Progress bar — accent green */
.progress {
    height: 10px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.progress .progress-bar {
    background: var(--accent) !important;
    color: #fff;
}
.progress .progress-bar.bg-success { background: var(--success) !important; }
.progress .progress-bar.bg-warning { background: var(--warning-fg) !important; }
.progress .progress-bar.bg-danger  { background: var(--danger) !important; }
.progress .progress-bar.bg-info    { background: var(--info) !important; }

/* Waitlist / report chart bars */
.bar-fill-success { background: var(--success) !important; }
.bar-fill-warning { background: var(--warning-fg) !important; }
.bar-fill-danger  { background: var(--danger) !important; }
.bar-fill-info    { background: var(--info) !important; }
.bar-fill-neutral { background: var(--neutral) !important; }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 0 16px 14px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--accent);
}
.page-header h1, .page-title-text {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.2px;
}
.page-subtitle {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 4px;
}
.page-actions { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.filter-bar .filter-group { min-width: 140px; flex: 0 0 auto; }
.filter-bar .filter-group.grow { flex: 1; min-width: 200px; }
.filter-bar label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-2);
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Identity panel (detail pages)
   -------------------------------------------------------------------------- */
.detail-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}
@media (max-width: 991px) {
    .detail-layout { grid-template-columns: 1fr; }
}
.identity-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.identity-photo {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 12px;
    overflow: hidden;
}
.identity-photo img { width: 100%; height: 100%; object-fit: cover; }
.identity-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.identity-meta {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 12px;
}
.identity-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.identity-actions .btn { justify-content: flex-start; width: 100%; }

.identity-facts {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.identity-facts .fact {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.identity-facts .fact:last-child { border-bottom: 0; }
.identity-facts .fact .k { color: var(--text-2); font-size: 12px; }
.identity-facts .fact .v { color: var(--text); font-weight: 500; }

/* --------------------------------------------------------------------------
   Cards & generic panels
   -------------------------------------------------------------------------- */
.card { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.panel-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
}
.panel-body { padding: 16px 20px; }
.panel-body.flush { padding: 0; }

.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.list-row:last-child { border-bottom: 0; }
.list-row .list-main { flex: 1; color: var(--text); }
.list-row .list-meta { color: var(--text-2); font-size: 12px; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-muted { color: var(--text-2) !important; }
.text-meta { font-size: 12px; color: var(--text-2); }
.bg-surface { background: var(--surface) !important; }
.bg-alt { background: var(--surface-alt) !important; }
.border-light { border: 1px solid var(--border) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-pill { border-radius: var(--radius) !important; }

.footer {
    border-top: 1px solid var(--border);
    padding: 12px 32px;
    font-size: 12px;
    color: var(--text-2);
    background: var(--surface);
    display: flex;
    justify-content: space-between;
}

/* Print */
@media print {
    .sidebar, .topbar, .footer, .btn, .no-print { display: none !important; }
    .main-wrapper, .main-content { margin: 0 !important; padding: 0 !important; }
    .card, .panel { border: 1px solid #ccc; page-break-inside: avoid; }
}

/* ==========================================================================
   Shared page utilities — reused across many modules.
   Minimal neutral geometry; colour comes from palette tokens.
   ========================================================================== */

/* Content card — generic white card used on many pages */
.content-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.content-card-header,
.content-card > .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
}
.content-card-header h5,
.content-card-header h6 { margin: 0; font-size: 14px; font-weight: 600; }
.content-card-body,
.content-card > .card-body { padding: 16px; }

/* View-card: detail-page white panel */
.view-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.view-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.view-section:last-child { border-bottom: 0; }
.view-section h6 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-2);
    margin: 0 0 10px;
}

/* Info grid — key/value pairs, 2-col responsive */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}
.info-grid .info-item.full { grid-column: 1 / -1; }
.info-grid .info-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-grid .info-item .label,
.info-grid .info-item span.label {
    font-size: 11px;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.info-grid .info-item .value,
.info-grid .info-item span.value { font-size: 13px; color: var(--text); word-break: break-word; }
@media (max-width: 600px) { .info-grid { grid-template-columns: 1fr; } }

/* Info row — label/value in a horizontal row (vendor view style) */
.info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.info-row:last-child { border-bottom: 0; }
.info-row .label, .info-row > span:first-child { color: var(--text-2); font-size: 12px; }
.info-row .value, .info-row > span:last-child { color: var(--text); font-weight: 500; text-align: right; }

/* Stats row — 4-col grid of stat-cards */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }

/* stat-card styling refinements for pages using --stat-color */
.stat-card { position: relative; padding: 14px 16px; }
.stat-card[style*="--stat-color"] { border-left: 3px solid var(--stat-color, var(--accent)); }
.stat-card .stat-value,
.stat-card .value,
.stat-card h2 { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.15; margin: 0; }
.stat-card .stat-label,
.stat-card .label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

/* Stat box (vendor view) */
.stat-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
}
.stat-box .num,
.stat-box .value { font-size: 20px; font-weight: 600; color: var(--text); }
.stat-box .lbl,
.stat-box .label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }

/* Generic avatar (user/staff/teacher/vendor) */
.user-avatar,
.staff-avatar,
.teacher-avatar,
.vendor-avatar,
.student-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--neutral-bg);
    color: var(--text);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    flex-shrink: 0;
}
.user-avatar img,
.staff-avatar img,
.teacher-avatar img,
.vendor-avatar img,
.student-avatar img { width: 100%; height: 100%; object-fit: cover; }
.staff-avatar .initials,
.teacher-avatar .initials,
.student-avatar .initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   Audit trail page
   -------------------------------------------------------------------------- */
.log-entry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--action-color, var(--neutral));
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.card-custom {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.card-custom .card-header {
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.card-custom .card-body { padding: 14px; }
.action-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.table-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-2);
    font-family: monospace;
}
.json-viewer {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text);
}
.progress-mini { height: 6px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Staff/Student attendance
   -------------------------------------------------------------------------- */
.view-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.view-tab {
    padding: 8px 16px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.view-tab:hover { color: var(--text); text-decoration: none; }
.view-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.attendance-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.attendance-table th, .attendance-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.attendance-table th {
    background: var(--surface-alt);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-2);
    font-weight: 600;
}
.staff-info { display: flex; align-items: center; gap: 10px; }
.staff-name { font-weight: 600; color: var(--text); font-size: 13px; }
.staff-id { font-size: 11px; color: var(--text-2); }

.status-options { display: inline-flex; gap: 4px; }
.status-option input[type="radio"] { display: none; }
.status-option label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}
.status-option label:hover { background: var(--surface-alt); }
.status-option input:checked + label.present { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.status-option input:checked + label.absent  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.status-option input:checked + label.late    { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.status-option input:checked + label.excused { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }

.notes-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--surface);
}

.legend {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-2);
    background: var(--surface-alt);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-icon {
    width: 20px; height: 20px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    border: 1px solid var(--border);
}
.legend-icon.present { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.legend-icon.absent  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.legend-icon.late    { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.legend-icon.excused { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }

.date-nav { display: inline-flex; gap: 4px; align-items: center; }
.date-nav button {
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.date-nav button:hover { background: var(--surface-alt); }
.date-nav input[type="date"], .date-nav input[type="month"] {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--surface);
}
.bulk-btn, .export-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
}
.bulk-btn:hover, .export-btn:hover { background: var(--surface-alt); }
.btn-submit {
    padding: 8px 20px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.btn-submit:hover { background: var(--accent-hover); }

/* Monthly calendar grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.calendar-header {
    background: var(--surface-alt);
    padding: 8px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.calendar-day {
    background: var(--surface);
    min-height: 80px;
    padding: 6px;
    font-size: 12px;
    position: relative;
}
.calendar-day.other-month { background: var(--bg); }
.calendar-day.today { background: var(--success-bg); }
.calendar-day a { color: var(--text); text-decoration: none; display: block; height: 100%; }
.calendar-day .day-num { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.calendar-day .day-stats { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10px; }
.calendar-day .day-stats .present { color: var(--success); }
.calendar-day .day-stats .absent  { color: var(--danger); }
.calendar-day .day-stats .late    { color: var(--warning-fg); }

/* Report table */
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th, .report-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.report-table th { background: var(--surface-alt); font-size: 11px; text-transform: uppercase; color: var(--text-2); letter-spacing: 0.4px; }
.report-table td:first-child { text-align: left; }
.percentage {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
}
.percentage.good    { background: var(--success-bg); color: var(--success); }
.percentage.warning { background: var(--warning-bg); color: var(--warning-fg); }
.percentage.bad     { background: var(--danger-bg);  color: var(--danger); }

/* --------------------------------------------------------------------------
   Student attendance mark page
   -------------------------------------------------------------------------- */
.stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.stats-bar .stats-left { display: flex; gap: 20px; flex-wrap: wrap; }
.stats-bar .stat-item { text-align: center; min-width: 50px; }
.stats-bar .stat-item .value { font-size: 18px; font-weight: 600; color: var(--text); }
.stats-bar .stat-item .label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.quick-actions { display: flex; gap: 8px; }
.quick-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    color: var(--text);
}
.quick-btn.success:hover { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.quick-btn.danger:hover  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }

.students-list { display: flex; flex-direction: column; gap: 8px; }
.student-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.student-card.marked-present { border-left-color: var(--success); }
.student-card.marked-absent  { border-left-color: var(--danger); }
.student-card.marked-late    { border-left-color: var(--warning-fg); }
.student-card.marked-leave   { border-left-color: var(--info); }
.student-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.student-info { display: flex; align-items: center; gap: 10px; }
.student-name { margin: 0; font-size: 14px; font-weight: 600; }
.student-id { font-size: 11px; color: var(--text-2); }
.student-badges { display: flex; gap: 6px; }
.badge-warning {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--warning-bg);
    color: var(--warning-fg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}
.status-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}
.status-btn:hover { background: var(--surface-alt); }
.status-btn.present.selected { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.status-btn.absent.selected  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.status-btn.late.selected    { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.status-btn.leave.selected   { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.late-time-row { display: none; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.late-time-row.show { display: flex; }
.remarks-row { display: flex; align-items: center; gap: 8px; }
.remarks-row input {
    flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; background: var(--surface);
}
.save-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; margin-top: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: sticky; bottom: 8px; z-index: 5;
}
.save-info { font-size: 12px; color: var(--text-2); }
.save-btn {
    padding: 8px 20px; border: 1px solid var(--accent); background: var(--accent); color: #fff;
    border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; cursor: pointer;
}
.save-btn:hover { background: var(--accent-hover); }
.session-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-2);
}
.back-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); text-decoration: none; }
.back-btn:hover { color: var(--text); text-decoration: underline; }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-2); }
.empty-state i { font-size: 32px; color: var(--text-2); display: block; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Classes view page
   -------------------------------------------------------------------------- */
.class-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.class-badges .badge {
    background: var(--surface-alt);
    color: var(--text-2);
    border: 1px solid var(--border);
    font-weight: 500;
}
.arabic-name { color: var(--text-2); font-size: 14px; margin-top: 2px; direction: rtl; }
.capacity-bar-large {
    width: 100%; height: 8px;
    background: var(--surface-alt);
    border-radius: 4px;
    overflow: hidden;
    margin: 6px 0;
}
.capacity-bar-large .fill { height: 100%; background: var(--success); transition: width 0.2s ease; }
.capacity-bar-large .fill.medium { background: var(--warning-fg); }
.capacity-bar-large .fill.high    { background: var(--danger); }
.capacity-visual { display: flex; align-items: center; gap: 10px; }
.schedule-display { display: flex; flex-wrap: wrap; gap: 6px; }
.day-badge, .time-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text);
}
.time-badge { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }

.teacher-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.teacher-card:last-child { border-bottom: 0; }
.teacher-info { flex: 1; min-width: 0; }
.teacher-name { font-size: 13px; font-weight: 600; color: var(--text); }
.teacher-role { font-size: 11px; color: var(--text-2); }
.teacher-badge {
    padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600;
    background: var(--neutral-bg); color: var(--neutral); border: 1px solid var(--neutral-border);
}
.teacher-badge.primary { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }

.student-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.student-table th, .student-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.student-table th { background: var(--surface-alt); font-size: 11px; text-transform: uppercase; color: var(--text-2); letter-spacing: 0.4px; }

/* --------------------------------------------------------------------------
   Leads view + waitlist reports + convert success
   -------------------------------------------------------------------------- */
.status-badge, .class-badge, .waitlist-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
}
.waitlist-badge { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); text-decoration: none; }
.waitlist-badge:hover { text-decoration: none; }
.class-badge { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.notes-box {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    white-space: pre-wrap;
}
.timeline { display: flex; flex-direction: column; gap: 10px; }
.timeline-item { border-left: 2px solid var(--border); padding: 2px 0 2px 12px; }
.timeline-date { font-size: 11px; color: var(--text-2); }
.timeline-text { font-size: 13px; color: var(--text); }

.success-container { display: flex; justify-content: center; padding: 40px 16px; }
.success-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
}
.success-icon {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}
.student-info {
    text-align: left;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 16px 0;
}
.student-info-row {
    display: flex; justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.student-info-row:last-child { border-bottom: 0; }
.action-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Waitlist reports */
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}
.chart-card h6 { font-size: 13px; font-weight: 600; margin: 0 0 12px; color: var(--text); }
.progress-bar-item { margin-bottom: 10px; }
.progress-bar-item .label {
    display: flex; justify-content: space-between;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 4px;
}
.progress-bar-item .bar,
.bar {
    width: 100%; height: 8px;
    background: var(--surface-alt);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar-item .bar-fill,
.bar .bar-fill,
.bar-fill { height: 100%; background: var(--accent); transition: width 0.2s ease; }
.days-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    background: var(--neutral-bg); color: var(--neutral); border: 1px solid var(--neutral-border);
}
.days-badge.warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.days-badge.danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.waiting-table { width: 100%; }

/* --------------------------------------------------------------------------
   Vendors list + view
   -------------------------------------------------------------------------- */
.vendor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.vendor-row:last-child { border-bottom: 0; }
.vendor-avatar {
    width: 40px; height: 40px;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}
.vendor-info { flex: 1; min-width: 0; }
.vendor-info .name, .vendor-info h6 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.vendor-info .contact { font-size: 11px; color: var(--text-2); }
.vendor-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); }
.category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Finance hub
   -------------------------------------------------------------------------- */
.hero-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .hero-kpis { grid-template-columns: repeat(2, 1fr); } }
.hero-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--neutral);
    border-radius: var(--radius);
    padding: 16px;
    position: relative;
}
.hero-kpi.income { border-left-color: var(--success); }
.hero-kpi.expense { border-left-color: var(--danger); }
.hero-kpi.net.positive { border-left-color: var(--success); }
.hero-kpi.net.negative { border-left-color: var(--danger); }
.hero-kpi.pending { border-left-color: var(--warning-fg); }
.hero-kpi-icon {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.hero-kpi-value { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; }
.hero-kpi-label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.hero-kpi-sub { font-size: 11px; color: var(--text-2); margin-top: 4px; }

.period-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.period-stat { padding: 6px 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.period-stat .value { font-size: 14px; font-weight: 600; color: var(--text); }
.period-stat .label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }

.alert-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--neutral);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
}
.alert-card:hover { background: var(--surface-alt); text-decoration: none; color: var(--text); }
.alert-card.warning, .alert-card.yellow { border-left-color: var(--warning-fg); }
.alert-card.danger, .alert-card.red { border-left-color: var(--danger); }
.alert-card.info, .alert-card.blue { border-left-color: var(--info); }
.alert-card.success, .alert-card.green { border-left-color: var(--success); }
.alert-card .alert-content { flex: 1; min-width: 0; }
.alert-card .alert-title { font-size: 13px; font-weight: 600; }
.alert-card .alert-message { font-size: 11px; color: var(--text-2); }

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.breakdown-item:last-child { border-bottom: 0; }
.breakdown-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}
.breakdown-info { flex: 1; min-width: 0; }
.breakdown-name { font-size: 13px; font-weight: 500; color: var(--text); }
.breakdown-count { font-size: 11px; color: var(--text-2); }
.breakdown-amount { font-size: 14px; font-weight: 600; color: var(--text); text-align: right; }
.breakdown-pct { font-size: 11px; color: var(--text-2); text-align: right; }

.transaction-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.transaction-item:last-child { border-bottom: 0; }
.transaction-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--surface-alt);
    color: var(--text-2);
}
.transaction-icon.income  { background: var(--success-bg); color: var(--success); }
.transaction-icon.expense { background: var(--danger-bg);  color: var(--danger); }
.transaction-info { flex: 1; min-width: 0; }
.transaction-desc { font-size: 13px; font-weight: 500; color: var(--text); }
.transaction-meta { font-size: 11px; color: var(--text-2); }
.transaction-amount { font-size: 14px; font-weight: 600; }
.transaction-amount.income  { color: var(--success); }
.transaction-amount.expense { color: var(--danger); }

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 12px;
    text-align: center;
    min-height: 72px;
}
.quick-action:hover { background: var(--surface); color: var(--text); text-decoration: none; border-color: var(--accent-ring); }
.quick-action i { font-size: 18px; color: var(--accent); }

.chart-container { position: relative; width: 100%; height: 260px; }

/* --------------------------------------------------------------------------
   Hifz shared bits (choice grid, steps, progress summary)
   -------------------------------------------------------------------------- */
.steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-2);
    background: var(--surface);
}
.step.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.step.done   { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.step-num { font-weight: 600; }
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.choice-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.choice-card:hover { background: var(--surface-alt); border-color: var(--accent-ring); text-decoration: none; color: var(--text); }
.choice-card .icon { font-size: 28px; margin-bottom: 8px; }
.choice-card h6 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.choice-card p { font-size: 11px; color: var(--text-2); margin: 0; }
.progress-summary {
    display: flex; gap: 16px; justify-content: center;
    padding: 10px 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}
.progress-item { text-align: center; }
.progress-item .num { font-size: 18px; font-weight: 600; color: var(--text); }
.progress-item .lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.help-box {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Form sections, sticky action bar, stepper, drop-zone (page-specific reuse)
   -------------------------------------------------------------------------- */
.form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 16px;
}
.form-section > .form-section-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
}
.form-section > .form-section-header .badge,
.form-section > .form-section-header small { font-size: 11px; font-weight: 500; color: var(--text-2); margin-left: auto; }
.form-section > .form-section-body { padding: 16px; }
.form-section hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.form-section h6.section-subhead {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.action-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 0;
}
.action-bar .summary { margin-right: auto; color: var(--text-2); font-size: 13px; align-self: center; }

.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.stepper .step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
}
.stepper .step .num {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-2);
}
.stepper .step.active .num { background: var(--accent); color: #fff; border-color: var(--accent); }
.stepper .step.done .num { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.stepper .step.active .label,
.stepper .step.done .label { color: var(--text); font-weight: 500; }
.stepper .sep {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 12px;
    min-width: 24px;
}

.drop-zone {
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    background: var(--bg);
    color: var(--text-2);
    font-size: 13px;
    transition: border-color 0.15s;
}
.drop-zone:hover { border-color: var(--accent); color: var(--text); }
.drop-zone i { font-size: 28px; display: block; margin-bottom: 6px; color: var(--text-2); }

.note-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
}
.note-card .note-card-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-2);
}
.note-card .note-card-body { padding: 12px 14px; font-size: 13px; color: var(--text); line-height: 1.5; }
.note-card .note-card-body .note-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--text); }

.identity-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}
.identity-strip .identity-name { font-weight: 600; font-size: 14px; color: var(--text); }
.identity-strip .identity-meta { font-size: 12px; color: var(--text-2); }
.identity-strip .identity-sep { width: 1px; height: 28px; background: var(--border); }

/* ==========================================================================
   Colour accent layer (2026-04) — tasteful pastel accents for cards, notices,
   section headers, consent grids, and chips. Uses existing palette tokens so
   it stays coherent with the admin-serious base.
   ========================================================================== */

/* ---- Notice cards (important info, medical, safeguarding, schedule) ---- */
.notice-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.notice-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--neutral);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
}
.notice-card .notice-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--neutral-bg);
    color: var(--neutral);
}
.notice-card .notice-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.notice-card .notice-body { color: var(--text); line-height: 1.45; }
.notice-card .notice-body ul { margin: 4px 0 0; padding-left: 18px; }
.notice-card .notice-body li { margin-bottom: 2px; }

.notice-card.notice-danger  { background: var(--danger-bg);  border-left-color: var(--danger); }
.notice-card.notice-danger  .notice-icon { background: rgba(139,26,26,0.12); color: var(--danger); }
.notice-card.notice-warning { background: var(--warning-bg); border-left-color: var(--warning-fg); }
.notice-card.notice-warning .notice-icon { background: rgba(138,106,26,0.12); color: var(--warning-fg); }
.notice-card.notice-info    { background: var(--info-bg);    border-left-color: var(--info); }
.notice-card.notice-info    .notice-icon { background: rgba(30,78,110,0.12); color: var(--info); }
.notice-card.notice-success { background: var(--success-bg); border-left-color: var(--success); }
.notice-card.notice-success .notice-icon { background: rgba(46,94,62,0.12); color: var(--success); }

/* ---- Accented panels (adds coloured rail + tinted header to .panel) ---- */
.panel.panel-accent-success { border-left: 3px solid var(--success); }
.panel.panel-accent-success > .panel-header { background: var(--success-bg); color: var(--success); }
.panel.panel-accent-info    { border-left: 3px solid var(--info); }
.panel.panel-accent-info    > .panel-header { background: var(--info-bg); color: var(--info); }
.panel.panel-accent-warning { border-left: 3px solid var(--warning-fg); }
.panel.panel-accent-warning > .panel-header { background: var(--warning-bg); color: var(--warning-fg); }
.panel.panel-accent-danger  { border-left: 3px solid var(--danger); }
.panel.panel-accent-danger  > .panel-header { background: var(--danger-bg); color: var(--danger); }
.panel.panel-accent-neutral { border-left: 3px solid var(--neutral); }
.panel.panel-accent-neutral > .panel-header { background: var(--neutral-bg); color: var(--text); }

.panel-header .panel-header-icon {
    width: 22px; height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 12px;
    background: rgba(0,0,0,0.06);
    color: currentColor;
}

/* ---- Form section (drop-in replacement for bespoke .form-card / .promo-card / .import-card) ---- */
.form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.form-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.form-section-header .section-step {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.form-section-header i { font-size: 14px; color: var(--accent); }
.form-section-body { padding: 16px 18px; }
.form-section-body > :last-child { margin-bottom: 0; }

.form-section.accent-success { border-left: 3px solid var(--success); }
.form-section.accent-success .form-section-header { background: var(--success-bg); color: var(--success); }
.form-section.accent-success .form-section-header i { color: var(--success); }
.form-section.accent-info { border-left: 3px solid var(--info); }
.form-section.accent-info .form-section-header { background: var(--info-bg); color: var(--info); }
.form-section.accent-info .form-section-header i { color: var(--info); }
.form-section.accent-warning { border-left: 3px solid var(--warning-fg); }
.form-section.accent-warning .form-section-header { background: var(--warning-bg); color: var(--warning-fg); }
.form-section.accent-warning .form-section-header i { color: var(--warning-fg); }
.form-section.accent-danger { border-left: 3px solid var(--danger); }
.form-section.accent-danger .form-section-header { background: var(--danger-bg); color: var(--danger); }
.form-section.accent-danger .form-section-header i { color: var(--danger); }
.form-section.accent-neutral { border-left: 3px solid var(--neutral); }
.form-section.accent-neutral .form-section-header { background: var(--neutral-bg); }

/* Legacy shade classes kept working (mapped to calm tints) */
.form-section-body.shade-blue    { background: color-mix(in srgb, var(--info-bg) 55%, var(--surface)); }
.form-section-body.shade-green   { background: color-mix(in srgb, var(--success-bg) 55%, var(--surface)); }
.form-section-body.shade-purple,
.form-section-body.shade-sky,
.form-section-body.shade-teal    { background: color-mix(in srgb, var(--info-bg) 35%, var(--surface)); }
.form-section-body.shade-orange,
.form-section-body.shade-pink    { background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface)); }
.form-section-body.shade-red     { background: color-mix(in srgb, var(--danger-bg) 40%, var(--surface)); }
.form-section-body.shade-gray    { background: var(--surface-alt); }

/* Legacy form-section-header colour variants (keeps old pages working) */
.form-section-header.personal,
.form-section-header.contacts,
.form-section-header.address,
.form-section-header.education,
.form-section-header.islamic,
.form-section-header.medical,
.form-section-header.consents,
.form-section-header.additional,
.form-section-header.employment,
.form-section-header.compliance {
    background: var(--surface-alt);
    color: var(--text);
}
.form-section-header.personal   { background: var(--info-bg);    color: var(--info); }
.form-section-header.contacts   { background: var(--success-bg); color: var(--success); }
.form-section-header.address    { background: var(--neutral-bg); color: var(--text); }
.form-section-header.education  { background: var(--warning-bg); color: var(--warning-fg); }
.form-section-header.islamic    { background: var(--success-bg); color: var(--success); }
.form-section-header.medical    { background: var(--danger-bg);  color: var(--danger); }
.form-section-header.consents   { background: var(--info-bg);    color: var(--info); }
.form-section-header.additional { background: var(--neutral-bg); color: var(--text); }
.form-section-header.employment { background: var(--info-bg);    color: var(--info); }
.form-section-header.compliance { background: var(--warning-bg); color: var(--warning-fg); }

/* ---- Consent grid (used in student add/edit) ---- */
.consent-category { margin-bottom: 14px; }
.consent-category:last-child { margin-bottom: 0; }
.consent-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-2);
    padding: 8px 0 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.consent-category-title i { color: var(--accent); font-size: 14px; }
.consent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.consent-item {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    transition: border-color 0.12s, background 0.12s;
}
.consent-item:hover { border-color: var(--accent); background: var(--surface-alt); }
.consent-item.mandatory { border-left-color: var(--danger); }
.consent-item .form-check { margin-bottom: 0; display: flex; align-items: flex-start; gap: 8px; }
.consent-item .form-check-input { margin-top: 2px; }
.consent-item .consent-title { font-weight: 600; font-size: 13px; color: var(--text); cursor: pointer; }
.consent-item .consent-desc { font-size: 12px; color: var(--text-2); line-height: 1.4; margin-top: 4px; padding-left: 24px; }
.consent-item:has(input:checked) { border-left-color: var(--accent); background: var(--success-bg); }
.consent-item.mandatory:has(input:checked) { border-left-color: var(--success); }

/* ---- Section info (inline note inside form sections) ---- */
.section-info {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-left: 3px solid var(--info);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--info);
    margin-bottom: 14px;
}
.section-info.warning { background: var(--warning-bg); border-color: var(--warning-border); border-left-color: var(--warning-fg); color: var(--warning-fg); }
.section-info.danger  { background: var(--danger-bg);  border-color: var(--danger-border);  border-left-color: var(--danger); color: var(--danger); }
.section-info.success { background: var(--success-bg); border-color: var(--success-border); border-left-color: var(--success); color: var(--success); }

/* ---- Chip / pill helpers for class types, roles, statuses ---- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    background: var(--neutral-bg);
    color: var(--neutral);
    border: 1px solid var(--neutral-border);
}
.chip-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.chip-info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.chip-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.chip-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.chip-accent  { background: rgba(22,53,126,0.08); color: var(--accent); border-color: rgba(22,53,126,0.25); }

/* ---- Icon-box variants (used in page headers, callouts) ---- */
.icon-box {
    width: 36px; height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-bg);
    color: var(--neutral);
    font-size: 16px;
    flex-shrink: 0;
}
.icon-box.success { background: var(--success-bg); color: var(--success); }
.icon-box.info    { background: var(--info-bg);    color: var(--info); }
.icon-box.warning { background: var(--warning-bg); color: var(--warning-fg); }
.icon-box.danger  { background: var(--danger-bg);  color: var(--danger); }
.icon-box.accent  { background: rgba(22,53,126,0.1); color: var(--accent); }
.icon-box-lg { width: 44px; height: 44px; font-size: 20px; border-radius: 8px; }

/* ---- Stat card icon variants (for teachers/classes lists) ---- */
.stat-card .icon {
    width: 36px; height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-bg);
    color: var(--neutral);
    font-size: 16px;
    flex-shrink: 0;
}
.stat-card .icon.blue,   .stat-card .icon.info    { background: var(--info-bg);    color: var(--info); }
.stat-card .icon.green,  .stat-card .icon.success { background: var(--success-bg); color: var(--success); }
.stat-card .icon.yellow, .stat-card .icon.warning { background: var(--warning-bg); color: var(--warning-fg); }
.stat-card .icon.red,    .stat-card .icon.danger  { background: var(--danger-bg);  color: var(--danger); }
.stat-card .icon.purple, .stat-card .icon.accent  { background: rgba(22,53,126,0.1); color: var(--accent); }
.stat-card .icon.gray,   .stat-card .icon.neutral { background: var(--neutral-bg); color: var(--neutral); }

/* ---- Page header hero (title + subtitle + right actions) ---- */
.page-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 20px;
}
.page-hero .hero-left { display: flex; gap: 14px; align-items: center; min-width: 0; }
.page-hero h1, .page-hero h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-hero .hero-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Split layout (sidebar + content form) ---- */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}
.split-layout.left { grid-template-columns: 340px 1fr; }
@media (max-width: 1100px) {
    .split-layout, .split-layout.left { grid-template-columns: 1fr; }
}

/* ---- Upload / drop zone (csv upload etc.) ---- */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    background: var(--surface-alt);
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent);
    background: var(--success-bg);
}
.upload-zone .upload-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent);
    margin-bottom: 10px;
}
.upload-zone .upload-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.upload-zone .upload-meta  { font-size: 12px; color: var(--text-2); }

/* ---- Compact KPI strip (3–5 tiles inline) ---- */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* ---- Step cards (numbered sections in multi-step forms) ---- */
.step-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
}
.step-card .step-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-card .step-body { flex: 1; min-width: 0; }
.step-card .step-title { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.step-card .step-desc  { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }

/* ---- Student badge (inline info pills on edit page) ---- */
.student-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 3px;
    color: var(--text-2);
}

/* ---- Photo upload area (student/teacher photo upload) ---- */
.photo-upload-area {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    transition: border-color 0.12s;
}
.photo-upload-area:hover { border-color: var(--accent); }
.photo-upload-area img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload-area .placeholder { font-size: 28px; color: var(--text-2); }

/* Islamic level card (Tajweed / Arabic / Islamic Studies) */
.islamic-level-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.islamic-level-card label { font-size: 12px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.checkbox-group .form-check { margin: 0; }

.other-field { margin-top: 6px; display: none; }
.other-field.show { display: block; }

/* Consent section banner */

/* ==========================================================================
   Teacher list / Classes list — grid + card components
   ========================================================================== */

/* Generic .stats-row used on teachers/list.php & classes/list.php */
.stats-row.stats-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .stats-row.stats-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .stats-row.stats-5 { grid-template-columns: repeat(2, 1fr); } }
.stats-row .stat-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.12s, background 0.12s;
}
.stats-row a.stat-card:hover { background: var(--surface-alt); text-decoration: none; color: var(--text); }
.stats-row .stat-card.active { border-color: var(--accent); background: var(--success-bg); }
.stats-row .stat-card .info .num { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text); }
.stats-row .stat-card .info .lbl { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

/* Teacher / Class grid */
.teacher-grid, .class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.teacher-grid { display: none; }
.teacher-grid.active { display: grid; }

.teacher-card, .class-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.teacher-card:hover, .class-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.teacher-card .status-badge,
.class-card .status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--neutral-border);
    background: var(--neutral-bg);
    color: var(--neutral);
    text-transform: capitalize;
}
.status-badge.active    { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.status-badge.on_leave,
.status-badge.suspended,
.status-badge.paused    { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.status-badge.resigned,
.status-badge.left,
.status-badge.inactive  { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.status-badge.completed { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }

.teacher-card .teacher-card-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding-right: 80px; /* leave room for status badge */
}
.teacher-card .teacher-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(22,53,126,0.1);
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.teacher-card .teacher-avatar img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card .teacher-info { min-width: 0; flex: 1; }
.teacher-card .teacher-info h6 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teacher-card .teacher-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.teacher-card .teacher-id { font-size: 11px; color: var(--text-2); font-family: monospace; }
.teacher-card .role-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}
.teacher-card .teacher-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--text);
}
.teacher-card .teacher-detail { display: flex; align-items: center; gap: 6px; min-width: 0; }
.teacher-card .teacher-detail i { color: var(--text-2); font-size: 13px; }
.teacher-card .teacher-detail.full { grid-column: 1 / -1; }

.teacher-card .teacher-classes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.class-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text);
}
.class-chip.primary { background: var(--success-bg); color: var(--success); border-color: var(--success-border); font-weight: 500; }
.class-chip.unassigned { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }

.compliance-row { display: flex; gap: 6px; margin-bottom: 12px; }
.compliance-indicator {
    width: 26px; height: 26px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--neutral-bg);
    color: var(--neutral);
    border: 1px solid var(--neutral-border);
}
.compliance-indicator.success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.compliance-indicator.warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.compliance-indicator.danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }

.teacher-card .teacher-actions { display: flex; gap: 6px; }
.teacher-card .teacher-actions .btn { flex: 1; justify-content: center; }

/* Teacher / Classes table view */
.teacher-table, .table-card { display: none; }
.teacher-table.active, .table-card.active { display: block; }
.table-view, .table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.table-view thead th, .table-modern thead th {
    background: var(--surface-alt);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}
.table-view tbody td, .table-modern tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table-view tbody tr:hover, .table-modern tbody tr:hover { background: var(--surface-alt); }
.table-view tbody tr:last-child td, .table-modern tbody tr:last-child td { border-bottom: none; }

.table-teacher-info { display: flex; align-items: center; gap: 10px; }
.table-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(22,53,126,0.1);
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.table-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Search box in content-card-header */
.search-box {
    display: flex;
    gap: 6px;
    align-items: center;
}
.search-box input[type="text"],
.search-box input[type="search"] {
    height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--surface);
    min-width: 200px;
}

/* View toggle (card/table) */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.view-toggle button {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.view-toggle button + button { border-left: 1px solid var(--border); }
.view-toggle button:hover { background: var(--surface-alt); color: var(--text); }
.view-toggle button.active { background: var(--accent); color: #fff; }

/* Class card specifics */
.class-card .class-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; padding-right: 80px; }
.class-card .class-card-header h5 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.class-card .class-card-body { padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.class-card .class-info-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; gap: 10px; }
.class-card .class-info-row .label { color: var(--text-2); }
.class-card .class-info-row .value { color: var(--text); font-weight: 500; text-align: right; }
.class-card .badge-type {
    padding: 2px 8px;
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
}
.class-card .capacity-bar {
    height: 6px;
    background: var(--surface-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.class-card .capacity-bar .fill { height: 100%; background: var(--success); transition: width 0.2s; }
.class-card .capacity-bar .fill.medium { background: var(--warning-fg); }
.class-card .capacity-bar .fill.high    { background: var(--danger); }
.class-card .class-card-footer { display: flex; gap: 6px; }
.class-card .class-card-footer .btn { flex: 1; justify-content: center; }

/* Button aliases used on teacher list (match design tokens) */
.btn-add, .btn-attendance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid;
}
.btn-add { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-add:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; text-decoration: none; }
.btn-attendance { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-attendance:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

/* Teacher settings / Classes list — .nav-tabs-custom */
.nav-tabs-custom {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    padding: 0;
    list-style: none;
}
.nav-tabs-custom .nav-item { list-style: none; }
.nav-tabs-custom .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}
.nav-tabs-custom .nav-link:hover { color: var(--text); }
.nav-tabs-custom .nav-link.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* Form-card (legacy name on teachers/add.php) — alias to panel */
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.form-card-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-card-header.employment { background: var(--info-bg); color: var(--info); }
.form-card-header.compliance { background: var(--warning-bg); color: var(--warning-fg); }
.form-card-header.personal   { background: var(--success-bg); color: var(--success); }
.form-card-header.role       { background: rgba(22,53,126,0.08); color: var(--accent); }
.form-card-header.photo      { background: var(--neutral-bg); color: var(--text); }
.form-card-body { padding: 16px 18px; }

/* role section (teachers/add) */
.role-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface);
}
.role-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.role-chip-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

/* Other-input conditional field */
.other-input-group { margin-top: 8px; display: none; }
.other-input-group.show { display: block; }

/* DBS / leave / gender option tiles */
.gender-options, .leave-options, .dbs-status-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.gender-option, .leave-option, .dbs-status-option {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    margin: 0;
}
.gender-option:hover, .leave-option:hover, .dbs-status-option:hover {
    border-color: var(--accent);
    background: var(--surface-alt);
}
.gender-option:has(input:checked),
.leave-option:has(input:checked),
.dbs-status-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--success-bg);
    color: var(--accent);
    font-weight: 500;
}

.photo-preview {
    width: 100%;
    aspect-ratio: 1;
    max-width: 180px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview .placeholder { color: var(--text-2); font-size: 28px; }

.btn-cancel {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-cancel:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

/* Bulk actions bar (teachers/settings) */
.bulk-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--info);
}
.bulk-actions .ms-auto { margin-left: auto; }

/* Add form (teachers/settings) */
.add-form {
    padding: 12px 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
.add-form h6 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; }

/* badge-status alias used in some teachers pages */
.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--neutral-border);
    background: var(--neutral-bg);
    color: var(--neutral);
}
.badge-status.active { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-status.inactive { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-border); }

/* ==========================================================================
   Legacy component compatibility
   Restores bespoke component classes that older pages still reference but that
   were dropped in the 2026 redesign. On-brand, additive fallbacks only — page
   level scoped <style> blocks (loaded later) still override these where present.
   ========================================================================== */

/* Key/value detail rows (view pages) */
.detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.detail-row:last-child { border-bottom: 0; }
.detail-row > .label { color: var(--text-2); flex-shrink: 0; }
.detail-row > .value { color: var(--text); text-align: right; font-weight: 500; word-break: break-word; }

/* Simple info card (panel-like container) */
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.info-card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.info-card-body { padding: 14px 16px; }

/* Positive/negative type badges */
.badge-type { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--neutral-bg); color: var(--text); }
.badge-type.positive { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-type.negative { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }

/* Selectable category tiles (behaviour incident etc.) */
.category-item { position: relative; display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: var(--surface); transition: border-color .12s, background .12s; }
.category-item:hover { background: var(--surface-alt); }
.category-item input[type="radio"], .category-item input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.category-item.selected, .category-item:has(input:checked) { border-color: var(--accent); background: var(--success-bg); }
.category-item.negative.selected, .category-item.negative:has(input:checked) { border-color: var(--danger-border); background: var(--danger-bg); }
.category-item .cat-name { font-weight: 500; font-size: 13px; }
.category-item .cat-points { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.category-item.positive .cat-points { color: var(--success); }
.category-item.negative .cat-points { color: var(--danger); }

/* Colour & icon pickers (category/type modals) */
.color-picker, .icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.color-option { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border); }
.color-option.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.icon-option { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); color: var(--text); font-size: 16px; }
.icon-option:hover { background: var(--surface-alt); }
.icon-option.selected { border-color: var(--accent); background: var(--success-bg); color: var(--accent); }

/* Budget / progress bars */
.budget-progress { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.budget-progress > .fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* Guard: bespoke "icon" elements that take an inline background colour must stay
   a small swatch, never a full-width bar. */
.category-icon, .type-icon, .cat-icon, .item-icon {
    width: 32px; height: 32px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0; font-size: 16px; overflow: hidden;
}