/**
 * Khoddam Design System
 * Dark: navy gradient, gold titles, white text
 * Light: soft purple gradient, indigo titles
 */

:root {
    --font-sans: 'Cairo', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Cairo', Georgia, serif;

    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;

    --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    --reveal-duration: 0.4s;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-distance: 6px;
}

body.theme-light {
    --color-bg-1: #f5f0ff;
    --color-bg-2: #ede4ff;
    --color-bg-3: #e8efff;
    --gradient-bg: linear-gradient(135deg, var(--color-bg-1) 0%, var(--color-bg-2) 45%, var(--color-bg-3) 100%);

    --color-surface: rgba(255, 255, 255, 0.82);
    --color-surface-hover: rgba(255, 255, 255, 0.95);
    --color-surface-border: rgba(124, 58, 237, 0.15);

    --color-title: #5b21b6;
    --color-title-accent: #7c3aed;
    --color-text: #334155;
    --color-text-muted: #64748b;
    --color-link: #6d28d9;
    --color-link-hover: #5b21b6;

    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-primary-text: #ffffff;

    --color-nav-bg: rgba(255, 255, 255, 0.88);
    --color-nav-border: rgba(124, 58, 237, 0.12);
    --color-nav-text: #475569;
    --color-nav-active: #6d28d9;

    --color-success: #059669;
    --color-danger: #dc2626;
    --color-warning: #d97706;

    --shadow-sm: 0 2px 8px rgba(91, 33, 182, 0.08);
    --shadow-md: 0 8px 24px rgba(91, 33, 182, 0.12);
    --shadow-lg: 0 16px 40px rgba(91, 33, 182, 0.16);
    --shadow-glow: 0 0 0 1px rgba(124, 58, 237, 0.08), 0 12px 32px rgba(124, 58, 237, 0.15);

    --color-table-head-bg: rgba(124, 58, 237, 0.08);
    --color-table-row-bg: transparent;
    --color-table-hover-bg: rgba(124, 58, 237, 0.06);
    --color-table-border: rgba(124, 58, 237, 0.12);

    --swal-surface: rgba(255, 255, 255, 0.96);
    --swal-text: var(--color-text);
    --swal-title: var(--color-title);
    --swal-border: var(--color-surface-border);
    --swal-cancel-bg: rgba(148, 163, 184, 0.2);
    --swal-cancel-text: var(--color-text-muted);
    --swal-input-bg: #ffffff;
    --swal-input-border: var(--color-surface-border);
    --swal-backdrop: transparent;
}

body.theme-dark {
    --color-bg-1: #070f1f;
    --color-bg-2: #0f2744;
    --color-bg-3: #1a3a5c;
    --gradient-bg: linear-gradient(145deg, var(--color-bg-1) 0%, var(--color-bg-2) 42%, var(--color-bg-3) 100%);

    --color-surface: rgba(15, 39, 68, 0.72);
    --color-surface-hover: rgba(22, 52, 86, 0.88);
    --color-surface-border: rgba(212, 175, 55, 0.18);

    --color-table-head-bg: rgba(10, 28, 52, 0.95);
    --color-table-row-bg: rgba(7, 15, 31, 0.35);
    --color-table-hover-bg: rgba(212, 175, 55, 0.1);
    --color-table-border: rgba(212, 175, 55, 0.15);

    /* Bootstrap tokens used by .table-light, .bg-light, cards, etc. */
    --bs-body-color: #f8fafc;
    --bs-body-bg: transparent;
    --bs-emphasis-color: #f8fafc;
    --bs-secondary-color: #cbd5e1;
    --bs-secondary-bg: rgba(15, 39, 68, 0.85);
    --bs-tertiary-color: #94a3b8;
    --bs-tertiary-bg: rgba(10, 28, 52, 0.75);
    --bs-border-color: rgba(212, 175, 55, 0.18);
    --bs-light: #0f2744;
    --bs-light-rgb: 15, 39, 68;
    --bs-dark: #f8fafc;
    --bs-dark-rgb: 248, 250, 252;
    --bs-card-bg: rgba(15, 39, 68, 0.72);
    --bs-card-color: #f8fafc;
    --bs-table-color: #f8fafc;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(212, 175, 55, 0.15);
    --bs-table-striped-bg: rgba(15, 39, 68, 0.45);
    --bs-table-striped-color: #f8fafc;
    --bs-table-active-bg: rgba(212, 175, 55, 0.14);
    --bs-table-active-color: #f8fafc;
    --bs-table-hover-bg: rgba(212, 175, 55, 0.1);
    --bs-table-hover-color: #f8fafc;

    --color-title: #d4af37;
    --color-title-accent: #f0d875;
    --color-text: #f8fafc;
    --color-text-muted: #cbd5e1;
    --color-link: #f0d875;
    --color-link-hover: #ffe08a;

    --color-primary: #d4af37;
    --color-primary-hover: #c9a227;
    --color-primary-text: #0a1628;

    --color-nav-bg: rgba(7, 15, 31, 0.92);
    --color-nav-border: rgba(212, 175, 55, 0.2);
    --color-nav-text: #e2e8f0;
    --color-nav-active: #d4af37;

    --color-success: #34d399;
    --color-danger: #f87171;
    --color-warning: #fbbf24;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 0 1px rgba(212, 175, 55, 0.12), 0 12px 36px rgba(0, 0, 0, 0.4);

    --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    --reveal-duration: 0.4s;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-distance: 6px;

    --swal-surface: rgba(15, 39, 68, 0.96);
    --swal-text: var(--color-text);
    --swal-title: var(--color-title);
    --swal-border: var(--color-surface-border);
    --swal-cancel-bg: rgba(71, 85, 105, 0.45);
    --swal-cancel-text: var(--color-text-muted);
    --swal-input-bg: rgba(7, 15, 31, 0.65);
    --swal-input-border: var(--color-surface-border);
    --swal-backdrop: transparent;
}

/* ── Event mode — "Liturgical" sub-theme (burgundy + gold) for special church events.
   Toggled by the `event-liturgical` body class (see App\Support\EventTheme). Overrides the
   base Khoddam tokens; layers over both the light and dark themes. ── */
body.event-liturgical.theme-light {
    --color-bg-1: #f7efe9;
    --color-bg-2: #efdfda;
    --color-bg-3: #f3e7e2;
    --color-surface-border: rgba(110, 31, 42, 0.16);
    --color-title: #6e1f2a;
    --color-title-accent: #8a2b34;
    --color-link: #6e1f2a;
    --color-link-hover: #501019;
    --color-primary: #6e1f2a;
    --color-primary-hover: #501019;
    --color-nav-border: rgba(110, 31, 42, 0.12);
    --color-nav-active: #6e1f2a;
    --shadow-glow: 0 0 0 1px rgba(110, 31, 42, 0.1), 0 12px 32px rgba(110, 31, 42, 0.18);
    --color-table-head-bg: rgba(110, 31, 42, 0.08);
    --color-table-hover-bg: rgba(110, 31, 42, 0.06);
    --color-table-border: rgba(110, 31, 42, 0.12);
}

body.event-liturgical.theme-dark {
    --color-bg-1: #1e0e11;
    --color-bg-2: #3a1a1e;
    --color-bg-3: #4a2228;
    --color-surface: rgba(58, 26, 30, 0.72);
    --color-surface-hover: rgba(74, 34, 40, 0.88);
    --color-surface-border: rgba(198, 161, 91, 0.2);
    --color-title: #d8b46a;
    --color-title-accent: #ecd08a;
    --color-link: #d8b46a;
    --color-link-hover: #f2e0a4;
    --color-primary: #c6a15b;
    --color-primary-hover: #a9843f;
    --color-primary-text: #200a0e;
    --color-nav-bg: rgba(20, 8, 10, 0.92);
    --color-nav-border: rgba(198, 161, 91, 0.2);
    --color-nav-active: #d8b46a;
    --color-table-head-bg: rgba(30, 12, 15, 0.95);
    --color-table-row-bg: rgba(20, 8, 10, 0.35);
    --color-table-hover-bg: rgba(198, 161, 91, 0.1);
    --bs-secondary-bg: rgba(58, 26, 30, 0.85);
    --bs-tertiary-bg: rgba(30, 12, 15, 0.75);
    --bs-card-bg: rgba(58, 26, 30, 0.72);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

[x-cloak] {
    display: none !important;
}

body.app-body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--gradient-bg);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    transition: background var(--transition-base), color var(--transition-base);
}

/* Guest auth forms (login, password reset, etc.) — avoid phantom scroll on mobile. */
body.auth-form-page {
    overflow-x: hidden;
}

body.auth-form-page .app-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

body.app-body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 20%, rgba(17, 75, 79, 0.08), transparent 35%),
        radial-gradient(circle at 90% 10%, rgba(201, 162, 39, 0.06), transparent 30%);
    z-index: 0;
}

body.theme-dark.app-body::before {
    background:
        radial-gradient(circle at 15% 15%, rgba(201, 162, 39, 0.08), transparent 32%),
        radial-gradient(circle at 85% 0%, rgba(17, 75, 79, 0.08), transparent 28%);
}

.app-shell {
    position: relative;
    z-index: 1;
}

/* Typography */
.app-title,
h1, h2, h3, .h1, .h2, .h3,
.page-title {
    color: var(--color-title);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.page-title {
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    margin-bottom: 1rem;
}

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

.text-success,
.table .text-success {
    color: var(--color-success) !important;
}

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

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

/* Navigation */
.app-nav {
    background: var(--color-nav-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-nav-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.app-nav .brand-link {
    color: var(--color-title);
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.app-nav .brand-link:hover {
    color: var(--color-title-accent);
    transform: translateY(-1px);
}

/* Brand lockup: Deaconia mark + wordmark + church subtitle */
.app-nav .brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-mark {
    width: 1.7rem;
    height: 1.7rem;
    flex: none;
    color: var(--color-title);
    transition: color var(--transition-fast);
}

.app-nav .brand-link:hover .brand-mark {
    color: var(--color-title-accent);
}

.app-nav .brand-names {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
    max-width: min(14rem, 42vw);
}

.app-nav .brand-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.app-nav .brand-subtitle {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .app-nav .brand-subtitle {
        display: none;
    }
}

/* Auth screens: centered brand block */
.brand-mark-lg {
    width: 3.25rem;
    height: 3.25rem;
    color: var(--color-primary);
}

.brand-wordmark {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-title);
}

/* Deaconia geometric wordmark (hand-built vector logotype) */
.brand-logotype {
    height: 1.5rem;
    width: auto;
    color: var(--color-title);
    transition: color var(--transition-fast);
}

.app-nav .brand-link:hover .brand-logotype {
    color: var(--color-title-accent);
}

.brand-logotype-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 3px;
}

.brand-logotype-lg {
    height: 2.7rem;
    width: auto;
    color: var(--color-primary);
}

.brand-wordmark-ar {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-title-accent);
    direction: rtl;
}

.app-nav-link {
    color: var(--color-nav-text);
    text-decoration: none;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.app-nav-link:hover {
    color: var(--color-nav-active);
    background: rgba(17, 75, 79, 0.08);
    transform: translateY(-1px);
}

body.theme-dark .app-nav-link:hover {
    background: rgba(201, 162, 39, 0.1);
}

.app-nav-link.active {
    color: var(--color-nav-active);
    background: rgba(17, 75, 79, 0.12);
}

body.theme-dark .app-nav-link.active {
    background: rgba(201, 162, 39, 0.14);
}

/* Toolbar controls */
.app-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-surface-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.app-toolbar-btn:hover {
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Cards & surfaces — no entrance animation (avoids login/logout/locale flicker). */
.app-card,
.card.app-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.app-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    background: var(--color-surface-hover);
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-surface-border));
}

.app-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--color-surface-border);
    color: var(--color-title);
    font-weight: 700;
}

.app-card .card-body,
.app-card .card-footer {
    color: var(--color-text);
}

.app-card .list-group-item {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-surface-border);
}

/* Forms */
.form-label {
    color: var(--color-text);
    font-weight: 600;
}

.form-control,
.form-select,
textarea.form-control {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--color-surface-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark textarea.form-control {
    background: rgba(4, 26, 26, 0.55);
    color: var(--color-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(17, 75, 79, 0.15);
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.18);
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.85;
}

body.theme-dark .form-control::placeholder,
body.theme-dark .form-select::placeholder,
body.theme-dark textarea.form-control::placeholder {
    color: #cbd5e1;
    opacity: 1;
}

body.theme-dark input[type="date"].form-control,
body.theme-dark input[type="time"].form-control,
body.theme-dark input[type="datetime-local"].form-control {
    color-scheme: dark;
}

body.theme-dark input[type="date"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

.input-group-text {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--color-surface-border);
    color: var(--color-text);
}

body.theme-dark .input-group-text {
    background: rgba(4, 26, 26, 0.55);
    color: var(--color-text);
    border-color: var(--color-surface-border);
}

.phone-input-group .form-control {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.dob-picker-input {
    max-width: 220px;
    direction: ltr;
}

.dob-flatpickr-alt {
    direction: ltr;
    text-align: left;
    cursor: pointer;
}

.flatpickr-calendar {
    font-family: var(--font-sans);
}

body.theme-dark .flatpickr-calendar {
    box-shadow: var(--shadow-lg);
}

.profile-preview-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-color: var(--color-surface-border) !important;
}

.app-card .card-footer {
    background: transparent;
    border-top: 1px solid var(--color-surface-border);
}

/* Buttons */
.btn-primary,
.btn.app-btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    border: none;
    color: var(--color-primary-text);
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.15rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.btn-primary:hover,
.btn.app-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.05);
    color: var(--color-primary-text);
}

.btn-outline-theme {
    border: 1px solid var(--color-surface-border);
    color: var(--color-text);
    background: transparent;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.btn-outline-theme:hover {
    background: var(--color-surface-hover);
    color: var(--color-title);
    transform: translateY(-1px);
}

/* Alerts */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.alert-success { background: rgba(5, 150, 105, 0.12); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.alert-danger  { background: rgba(220, 38, 38, 0.12); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); }
.alert-warning { background: rgba(217, 119, 6, 0.12); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); }
.alert-info    { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-title-accent); border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); }

body.theme-dark .alert-success { background: rgba(52, 211, 153, 0.14); }
body.theme-dark .alert-danger  { background: rgba(248, 113, 113, 0.14); }
body.theme-dark .alert-warning { background: rgba(251, 191, 36, 0.14); }
body.theme-dark .alert-info    { background: rgba(201, 162, 39, 0.12); color: var(--color-title); }

/* Tables — Bootstrap 5.3 colors cells via inset box-shadow + --bs-table-accent-bg */
.table {
    color: var(--color-text);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-surface-border);
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
}

.table > thead > tr > th {
    color: var(--color-title);
    border-bottom-color: var(--color-surface-border);
    background-color: var(--color-table-head-bg);
}

body.theme-light .table-light,
body.theme-light thead.table-light > tr > th,
body.theme-light .table-light > :not(caption) > * > * {
    --bs-table-color: var(--color-title);
    --bs-table-bg: var(--color-table-head-bg);
    --bs-table-border-color: var(--color-table-border);
    --bs-table-accent-bg: var(--color-table-head-bg);
    color: var(--color-title) !important;
    background-color: var(--color-table-head-bg) !important;
    border-color: var(--color-table-border) !important;
}

body.theme-light .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--color-table-hover-bg);
    --bs-table-accent-bg: var(--color-table-hover-bg);
    background-color: var(--color-table-hover-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--color-table-hover-bg) !important;
}

.table > :not(caption) > * > * {
    color: var(--color-text);
    border-color: var(--color-surface-border);
}

.table tbody tr {
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--color-text);
    --bs-table-bg-state: rgba(17, 75, 79, 0.08);
}

/* Dark mode: override Bootstrap table paint (inset 9999px shadow) project-wide */
body.theme-dark,
[data-bs-theme="dark"] body {
    --bs-table-color: var(--color-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-table-border);
    --bs-table-striped-color: var(--color-text);
    --bs-table-striped-bg: var(--color-table-row-bg);
    --bs-table-active-color: var(--color-text);
    --bs-table-active-bg: var(--color-table-hover-bg);
    --bs-table-hover-color: var(--color-text);
    --bs-table-hover-bg: var(--color-table-hover-bg);
}

body.theme-dark .table,
[data-bs-theme="dark"] .table {
    --bs-table-color: var(--color-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-table-border);
    --bs-table-accent-bg: var(--color-table-row-bg);
    color: var(--color-text);
}

body.theme-dark .table-light,
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--color-title);
    --bs-table-bg: var(--color-table-head-bg);
    --bs-table-border-color: var(--color-table-border);
    --bs-table-accent-bg: var(--color-table-head-bg);
    --bs-table-striped-bg: var(--color-table-head-bg);
    --bs-table-active-bg: var(--color-table-head-bg);
    --bs-table-hover-bg: var(--color-table-head-bg);
    color: var(--color-title);
}

body.theme-dark .table > :not(caption) > * > *,
[data-bs-theme="dark"] .table > :not(caption) > * > * {
    --bs-table-color-state: var(--color-text);
    --bs-table-color-type: var(--color-text);
    --bs-table-bg-type: var(--color-table-row-bg);
    --bs-table-bg-state: var(--color-table-row-bg);
    --bs-table-accent-bg: var(--color-table-row-bg);
    color: var(--color-text) !important;
    border-color: var(--color-table-border) !important;
    background-color: var(--color-table-row-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--color-table-row-bg) !important;
}

body.theme-dark .table > thead > tr > th,
body.theme-dark .table > thead.table-light > tr > th,
body.theme-dark thead.table-light > tr > th,
body.theme-dark .table-light > :not(caption) > * > *,
[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table > thead.table-light > tr > th,
[data-bs-theme="dark"] thead.table-light > tr > th,
[data-bs-theme="dark"] .table-light > :not(caption) > * > * {
    --bs-table-color-state: var(--color-title);
    --bs-table-color-type: var(--color-title);
    --bs-table-bg-type: var(--color-table-head-bg);
    --bs-table-bg-state: var(--color-table-head-bg);
    --bs-table-accent-bg: var(--color-table-head-bg);
    color: var(--color-title) !important;
    border-color: var(--color-table-border) !important;
    background-color: var(--color-table-head-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--color-table-head-bg) !important;
}

body.theme-dark .table > tfoot > tr > th,
body.theme-dark .table > tfoot > tr > td,
body.theme-dark tfoot.table-light > tr > *,
[data-bs-theme="dark"] .table > tfoot > tr > th,
[data-bs-theme="dark"] .table > tfoot > tr > td,
[data-bs-theme="dark"] tfoot.table-light > tr > * {
    --bs-table-accent-bg: var(--color-table-head-bg);
    color: var(--color-title) !important;
    background-color: var(--color-table-head-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--color-table-head-bg) !important;
}

body.theme-dark .table-hover > tbody > tr:hover > *,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--color-text);
    --bs-table-bg-state: var(--color-table-hover-bg);
    --bs-table-accent-bg: var(--color-table-hover-bg);
    color: var(--color-text) !important;
    background-color: var(--color-table-hover-bg) !important;
    box-shadow: inset 0 0 0 9999px var(--color-table-hover-bg) !important;
}

body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--color-table-row-bg);
    box-shadow: inset 0 0 0 9999px var(--color-table-row-bg) !important;
    background-color: var(--color-table-row-bg) !important;
}

body.theme-dark .table-striped > tbody > tr:nth-of-type(even) > *,
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: rgba(4, 26, 26, 0.5);
    box-shadow: inset 0 0 0 9999px rgba(4, 26, 26, 0.5) !important;
    background-color: rgba(4, 26, 26, 0.5) !important;
}

body.theme-dark .app-card .table,
body.theme-dark .app-card .table-responsive,
[data-bs-theme="dark"] .app-card .table,
[data-bs-theme="dark"] .app-card .table-responsive {
    background: transparent;
}

.app-card .table a:not(.btn) {
    color: var(--color-link);
    text-decoration: none;
}

.app-card .table a:not(.btn):hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* Dropdown */
.app-dropdown-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
    /* Long menus scroll inside the panel. Cap at 70% of the screen so the last
       items stay above the OS taskbar / browser chrome instead of filling 100vh. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;
    max-height: 70dvh;
}

.app-dropdown-link {
    display: block;
    padding: 0.55rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.app-dropdown-link:hover {
    background: rgba(17, 75, 79, 0.08);
    color: var(--color-title);
}

body.theme-dark .app-dropdown-link:hover {
    background: rgba(201, 162, 39, 0.1);
}

/* Dashboard tiles — no entrance animation on full page loads. */
.app-tile {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.app-tile:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--shadow-glow);
}

.hub-tile:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-surface-border));
    background: var(--color-surface-hover);
}

.app-tile h3 {
    color: var(--color-title);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

/* Entrance motion is gated: widgets stay visible by default. JS adds
   body.js-page-reveal only on first arrival at a path (not same-URL reload). */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(var(--reveal-distance, 8px)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes khoddamFadeIn {
    from { opacity: 0; transform: translateY(calc(var(--reveal-distance, 8px) * 0.5)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

body.js-page-reveal .app-card,
body.js-page-reveal .card.app-card,
body.js-page-reveal .app-tile,
body.js-page-reveal .hub-tile,
body.js-page-reveal .hub-link-tile,
body.js-page-reveal .animate-in {
    animation: fadeInUp var(--reveal-duration, 0.4s) var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

body.js-page-reveal .accordion-item,
body.js-page-reveal .roles-hub-panel {
    animation: khoddamFadeIn calc(var(--reveal-duration, 0.4s) * 0.9) var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* Mobile: skip expensive entrance motion — every navigation is a full reload. */
@media (max-width: 767.98px) {
    body.js-page-reveal .app-card,
    body.js-page-reveal .card.app-card,
    body.js-page-reveal .app-tile,
    body.js-page-reveal .hub-tile,
    body.js-page-reveal .hub-link-tile,
    body.js-page-reveal .animate-in,
    body.js-page-reveal .accordion-item,
    body.js-page-reveal .roles-hub-panel {
        animation: none !important;
    }
}

/* Local SweetAlert entrance (replaces Animate.css CDN). */
@keyframes khoddamSwalIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.khoddam-swal-popup.khoddam-swal-animate {
    animation: khoddamSwalIn 0.22s var(--reveal-ease, ease) both;
}
@media (prefers-reduced-motion: reduce) {
    .khoddam-swal-popup.khoddam-swal-animate {
        animation: none;
    }
}

/* .animate-delay-* remain valid Blade class markers (delays set by initReveal when gated). */

/* Roles hub — theme-aware panels and accordion */
.roles-hub .accordion-button {
    font-size: 0.95rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.roles-hub .accordion-button:not(.collapsed) {
    background: var(--color-surface-hover);
    color: var(--color-title);
    box-shadow: none;
}

.roles-hub .accordion-button:focus {
    box-shadow: none;
    border-color: var(--color-surface-border);
}

.roles-hub-panel,
.roles-hub-subpanel {
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-sm, 0.375rem);
    padding: 0.35rem 0.65rem;
    background: var(--color-surface);
}

.roles-hub-summary,
.roles-hub-subsummary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    list-style: none;
    color: var(--color-title);
}

.roles-hub-summary::-webkit-details-marker,
.roles-hub-subsummary::-webkit-details-marker {
    display: none;
}

.roles-hub-subpanel {
    margin-inline-start: 0.5rem;
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg-2) 12%);
}

.roles-hub .table thead th {
    background: var(--color-table-head-bg);
    color: var(--color-title);
    border-color: var(--color-surface-border);
}

/* Compact email template editor panels */
.email-template-panel {
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-sm, 0.375rem);
    padding: 0.35rem 0.65rem;
    background: var(--color-surface);
}

.email-template-summary {
    cursor: pointer;
    list-style: none;
    color: var(--color-title);
}

.email-template-summary::-webkit-details-marker {
    display: none;
}

.tox-tinymce {
    border-radius: var(--radius-sm, 0.375rem) !important;
    border-color: var(--color-surface-border) !important;
}


.khoddam-hover-lift:hover {
    transform: translateY(-2px);
}

.khoddam-hover-lift:active {
    transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Icon accent — fill icons with theme primary when their host is engaged
   (hover / focus / active) or marked for mobile scroll/touch emphasis.
   ------------------------------------------------------------------------- */
:root {
    --icon-accent-color: var(--color-primary);
}

.app-icon,
i.bi,
i.fas,
i.far,
i.fab,
i.fa,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    transition: color var(--transition-fast), opacity var(--transition-fast),
        text-shadow var(--transition-fast), filter var(--transition-fast);
}

:is(
    a,
    button,
    .btn,
    label.btn,
    .brand-link,
    .app-nav-link,
    .app-toolbar-btn,
    .app-dropdown-link,
    .hub-tile,
    .hub-link-tile,
    .app-tile,
    .khoddam-hover-lift,
    .accordion-button,
    summary,
    .nav-link,
    .list-group-item-action,
    .dropdown-item,
    .dropdown-toggle,
    [role="button"]
):is(:hover, :focus-visible, :active, .is-icon-accent, .is-icon-accent-touch)
:is(.app-icon, i.bi, i.fas, i.far, i.fab, i.fa) {
    color: var(--icon-accent-color) !important;
    filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--icon-accent-color) 35%, transparent));
}

/* Primary filled buttons already use the theme surface text — keep contrast */
:is(.btn-primary, .btn.app-btn-primary, .btn-danger, .bg-primary, .card-header.bg-primary):is(:hover, :focus-visible, :active, .is-icon-accent, .is-icon-accent-touch)
:is(.app-icon, i.bi, i.fas, i.far, i.fab, i.fa) {
    color: var(--color-primary-text) !important;
    filter: none;
}

/* Nav hardcodes older hover washes — keep icon accent tied to theme tokens */
.app-nav-link:hover,
.app-nav-link:focus-visible,
.app-nav-link.is-icon-accent,
.app-nav-link.is-icon-accent-touch {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-nav-active);
}

.app-dropdown-link:hover,
.app-dropdown-link:focus-visible,
.app-dropdown-link.is-icon-accent,
.app-dropdown-link.is-icon-accent-touch {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* SweetAlert2 — Khoddam theme (tracks light/dark CSS variables) */
.swal2-container {
    font-family: var(--font-sans) !important;
}

/* No dimmed page overlay — alerts sit on the live page background. */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-no-backdrop,
.swal2-container.swal2-top,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-left,
.swal2-container.swal2-top-right {
    background: transparent !important;
}

.swal2-container:has(.swal2-toast) {
    background: transparent !important;
    pointer-events: none;
}

.swal2-container:has(.swal2-toast) .swal2-toast {
    pointer-events: auto;
}

.khoddam-swal-popup,
.swal2-popup.khoddam-swal-popup {
    background: var(--swal-surface) !important;
    color: var(--swal-text) !important;
    border: 1px solid var(--swal-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--font-sans) !important;
}

.khoddam-swal-title,
.swal2-popup.khoddam-swal-popup .swal2-title {
    color: var(--swal-title) !important;
    font-weight: 700 !important;
}

.khoddam-swal-body,
.swal2-popup.khoddam-swal-popup .swal2-html-container {
    color: var(--swal-text) !important;
}

.swal2-toast.khoddam-swal-popup {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
}

.swal2-toast.khoddam-swal-popup .swal2-title {
    color: var(--swal-text) !important;
    font-size: 0.9rem !important;
}

.swal2-popup.khoddam-swal-popup .swal2-styled.swal2-confirm {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-text) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 80%, #000) !important;
    box-shadow: var(--shadow-sm) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-styled.swal2-confirm:hover {
    background-color: var(--color-primary-hover) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-styled.swal2-cancel {
    background-color: var(--swal-cancel-bg) !important;
    color: var(--swal-cancel-text) !important;
    border: 1px solid var(--swal-border) !important;
}

.swal2-popup.khoddam-swal-popup.khoddam-swal-destructive .swal2-styled.swal2-confirm {
    background-color: var(--color-danger) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--color-danger) 80%, #000) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-input,
.swal2-popup.khoddam-swal-popup .swal2-textarea {
    background: var(--swal-input-bg) !important;
    color: var(--swal-text) !important;
    border: 1px solid var(--swal-input-border) !important;
    border-radius: var(--radius-sm) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-input:focus,
.swal2-popup.khoddam-swal-popup .swal2-textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-validation-message {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--swal-surface)) !important;
    color: var(--color-danger) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--color-success) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-icon.swal2-error {
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-icon.swal2-warning {
    border-color: var(--color-warning) !important;
    color: var(--color-warning) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-icon.swal2-info {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.swal2-popup.khoddam-swal-popup .swal2-icon.swal2-question {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.swal2-timer-progress-bar {
    background: var(--color-primary) !important;
}

/* Main content */
.app-main {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
}

/* Reusable page header row */
.page-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-header-bar .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Toast alerts (attendance AJAX, etc.) */
.app-toast-alert {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    z-index: 1090;
    min-width: min(100%, 320px);
    max-width: calc(100vw - 2rem);
    box-shadow: var(--shadow-md);
}

/* Hub navigation tiles */
.hub-tile {
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hub-tile:hover {
    border-color: var(--color-primary);
}
.hub-tile-active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary);
}
.hub-tile-superadmin {
    border-color: rgba(var(--bs-danger-rgb), 0.28);
}
.superadmin-entry-tag {
    font-size: 0.95em;
    vertical-align: -0.1em;
}

.qr-attendance-trigger {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.qr-attendance-trigger:hover {
    box-shadow: var(--shadow-md);
}
.qr-attendance-trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.student-roster-photo img {
    width: 56px;
    height: 56px;
    border: 1px solid var(--color-surface-border);
    background: var(--color-surface);
}

.student-photo-trigger,
.profile-photo-trigger {
    display: block;
    line-height: 0;
    border-radius: 50%;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.student-photo-trigger:hover,
.student-photo-trigger:focus,
.profile-photo-trigger:hover,
.profile-photo-trigger:focus {
    transform: scale(1.03);
    box-shadow: 0 0 0 3px rgba(17, 75, 79, 0.25);
}

.student-photo-modal-image {
    width: min(280px, 70vw);
    height: min(280px, 70vw);
    object-fit: cover;
    border: 3px solid var(--color-surface-border);
}

.profile-photo-wrap {
    width: 128px;
}

.profile-photo-img,
.profile-photo-placeholder {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border: 2px solid var(--color-surface-border);
}

.profile-photo-placeholder {
    background: var(--color-surface);
}

.nav-notification-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.nav-notifications-dropdown {
    width: min(22rem, calc(100vw - 1.5rem));
    padding: 0;
    overflow: hidden;
}

.nav-notifications-header,
.nav-notifications-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary));
    border-bottom: 1px solid var(--color-surface-border);
}

.nav-notifications-footer {
    border-bottom: 0;
    border-top: 1px solid var(--color-surface-border);
    justify-content: center;
}

.nav-notifications-list {
    max-height: min(22rem, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-notifications-empty {
    padding: 1.25rem 0.9rem;
    text-align: center;
    font-size: 0.9rem;
}

.nav-notification-preview-item {
    display: block;
    padding: 0.7rem 0.9rem;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-surface-border);
    transition: background var(--transition-fast);
}

.nav-notification-preview-item:last-child {
    border-bottom: 0;
}

.nav-notification-preview-item:hover,
.nav-notification-preview-item:focus-visible {
    background: rgba(17, 75, 79, 0.08);
    color: var(--color-title);
}

body.theme-dark .nav-notification-preview-item:hover,
body.theme-dark .nav-notification-preview-item:focus-visible {
    background: rgba(201, 162, 39, 0.1);
}

.nav-notification-preview-item.is-unread {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border-inline-start: 3px solid var(--color-primary);
}

.nav-notification-preview-item.is-announcement.is-unread {
    background: color-mix(in srgb, #f59e0b 12%, var(--color-surface));
    border-inline-start-color: #f59e0b;
}

.nav-notification-preview-title,
.nav-notification-preview-body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Character budget scales with viewport (~ch ≈ one glyph width). */
    max-width: 28ch;
}

.nav-notification-preview-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
}

.nav-notification-preview-body {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--color-text-muted, var(--color-text));
    opacity: 0.85;
}

.nav-notification-preview-meta {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--color-text-muted, var(--color-text));
    opacity: 0.75;
}

.nav-notifications-view-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-link, var(--color-primary));
    text-decoration: none;
}

.nav-notifications-view-all:hover {
    color: var(--color-link-hover, var(--color-title));
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .nav-notifications-dropdown {
        width: min(18rem, calc(100vw - 1rem));
    }

    .nav-notification-preview-title,
    .nav-notification-preview-body {
        max-width: 22ch;
    }
}

@media (min-width: 768px) {
    .nav-notification-preview-title,
    .nav-notification-preview-body {
        max-width: 36ch;
    }
}

@media (min-width: 992px) {
    .nav-notifications-dropdown {
        width: 24rem;
    }

    .nav-notification-preview-title,
    .nav-notification-preview-body {
        max-width: 42ch;
    }
}

.notification-unread {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border-inline-start: 3px solid var(--color-primary);
}

.notification-announcement.notification-unread {
    background: color-mix(in srgb, #f59e0b 12%, var(--color-surface));
    border-inline-start-color: #f59e0b;
}

.notification-row .notification-read-toggle {
    min-width: 2.25rem;
}

.hub-tile-highlight {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.announcement-card-unread {
    border-color: rgba(17, 75, 79, 0.45) !important;
    background: linear-gradient(135deg, rgba(17, 75, 79, 0.08), rgba(17, 75, 79, 0.02));
}

.announcement-banner {
    border-bottom: 1px solid var(--color-surface-border);
}

.announcement-banner-dismissible {
    background: rgba(17, 75, 79, 0.1);
    color: var(--color-text);
}

.announcement-banner-locked {
    background: rgba(245, 158, 11, 0.18);
    color: var(--color-text);
}

.profile-photo-banner {
    border-bottom: 1px solid rgba(245, 158, 11, 0.35);
}

.announcement-home-card {
    color: inherit;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-surface-border);
    transition: background var(--transition-fast);
}

.announcement-home-card:hover {
    background: rgba(17, 75, 79, 0.06);
}

/* Student-facing responsive data cards */
.student-data-hub .data-meta-list {
    display: grid;
    gap: 0.5rem 1rem;
}
.student-data-hub .data-meta-row {
    display: grid;
    grid-template-columns: minmax(7rem, 35%) 1fr;
    gap: 0.25rem 0.75rem;
    align-items: start;
}
.student-data-hub .data-meta-row dt {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    font-weight: 600;
}
.student-data-hub .data-meta-row dd {
    margin: 0;
    font-size: 0.95rem;
    word-break: break-word;
}
.student-data-hub .data-card {
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: var(--color-surface);
}
.student-data-hub .data-card + .data-card {
    margin-top: 0.75rem;
}
.student-data-hub .data-card-birthday-today {
    border-color: #198754 !important;
    background: rgba(25, 135, 84, 0.08);
    box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.35);
}
.student-data-hub .data-card-title .badge {
    vertical-align: middle;
}
.student-data-hub .data-card-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.student-data-hub .data-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Compact curriculum lecture list (student view) */
.lecture-list-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
}

.lecture-compact-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lecture-compact-item:hover {
    border-color: rgba(17, 75, 79, 0.25);
    box-shadow: var(--shadow-sm);
}

body.theme-dark .lecture-compact-item:hover {
    border-color: rgba(201, 162, 39, 0.3);
}

.lecture-compact-main {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

.lecture-compact-index {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: rgba(17, 75, 79, 0.08);
}

body.theme-dark .lecture-compact-index {
    background: rgba(201, 162, 39, 0.12);
}

.lecture-compact-body {
    min-width: 0;
}

.lecture-compact-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-title);
}

.lecture-compact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.25rem;
}

.lecture-compact-materials {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 0.15rem;
    border-top: 1px solid var(--color-surface-border);
}

.lecture-compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.lecture-compact-actions .btn {
    white-space: nowrap;
}

.lecture-compact-notes {
    font-size: 0.875rem;
    color: var(--color-text);
}

.lecture-compact-notes-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.lecture-compact-notes-body {
    white-space: pre-line;
    line-height: 1.45;
}

.lecture-compact-notes-more {
    margin-top: 0.15rem;
    text-decoration: none;
}

@media (max-width: 576px) {
    .lecture-list-compact {
        padding: 0.65rem 0.75rem 0.85rem;
    }

    .lecture-compact-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Admin / instructor responsive data cards (extends student-data-hub) */
.admin-data-cards,
.admin-data-cards.student-data-hub {
    padding: 0.75rem 1rem 1rem;
}

.admin-data-cards .data-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-data-cards .data-card-actions .btn,
.admin-data-cards .data-card-actions form {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
}

.admin-data-cards .data-card-actions .btn {
    justify-content: center;
}

.admin-data-cards .data-card-actions form .btn {
    width: 100%;
}

.admin-data-cards .data-card-actions .w-100,
.admin-data-cards .data-card-actions form.w-100 {
    flex: 1 1 100%;
}

.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.admin-page-header .page-title {
    margin-bottom: 0;
}

.admin-page-header .admin-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-mobile-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 0.75rem 0;
    margin-top: 0.5rem;
    background: linear-gradient(to top, var(--color-surface) 70%, transparent);
}

.admin-table-desktop {
    /* paired with d-none d-lg-block in Blade */
}

@media (max-width: 991.98px) {
    .admin-data-cards .data-card {
        padding: 0.85rem;
    }

    .admin-page-header .admin-page-actions .btn {
        flex: 1 1 auto;
    }

    .admin-filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .admin-filter-bar .btn {
        flex-shrink: 0;
    }

    .table-responsive.admin-table-desktop {
        display: none !important;
    }
}

/* Exams hub card layout */
.exams-hub .exam-meta-list { display: flex; flex-direction: column; gap: 0.65rem; }
.exams-hub .exam-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: start;
}
.exams-hub .exam-meta-row dt {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    word-break: break-word;
}
.exams-hub .exam-meta-row dd {
    margin: 0;
    font-size: 0.95rem;
    word-break: break-word;
}
.exams-hub .exam-schedule-card .btn,
.exams-hub .exam-admin-card .btn { white-space: normal; }

/* Scrollable modals — all viewports */
.modal-dialog-scrollable {
    display: flex;
    height: calc(100% - var(--bs-modal-margin) * 2);
    max-height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
}

/* Responsive */
@media (max-width: 768px) {
    body.app-body {
        background-attachment: scroll;
    }

    .app-nav .nav-links {
        background: var(--color-surface);
        border: 1px solid var(--color-surface-border);
        border-radius: var(--radius-md);
        padding: 0.75rem;
        margin-top: 0.5rem;
    }

    body.mobile-nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
    }

    .app-nav .mobile-nav-panel {
        max-height: min(70vh, calc(100dvh - 5.5rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .mobile-nav-group {
        border-radius: var(--radius-sm);
    }

    .mobile-nav-summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        color: var(--color-nav-text);
        padding: 0.55rem 0.85rem;
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: 0.92rem;
        user-select: none;
    }

    .mobile-nav-summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-summary:hover {
        color: var(--color-nav-active);
        background: rgba(17, 75, 79, 0.08);
    }

    body.theme-dark .mobile-nav-summary:hover {
        background: rgba(201, 162, 39, 0.1);
    }

    .mobile-nav-summary.active {
        color: var(--color-nav-active);
        font-weight: 700;
    }

    .mobile-nav-chevron {
        font-size: 0.75rem;
        opacity: 0.7;
        transition: transform var(--transition-fast);
    }

    .mobile-nav-group[open] .mobile-nav-chevron {
        transform: rotate(180deg);
    }

    .mobile-nav-submenu {
        padding: 0.25rem 0 0.35rem;
        margin: 0.15rem 0 0.25rem 0.85rem;
        border-inline-start: 2px solid var(--color-surface-border);
    }

    .mobile-nav-submenu .app-nav-link {
        padding: 0.45rem 0.75rem;
    }

    .app-nav .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .app-toolbar-btn span[data-theme-label] {
        display: none;
    }

    .page-title {
        font-size: 1.35rem;
    }

    .container > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .container > .d-flex.justify-content-between > .d-flex.gap-2,
    .container > .d-flex.justify-content-between > .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-dialog.modal-fullscreen-sm-down {
        margin: 0;
    }

    .student-data-hub .data-meta-row {
        grid-template-columns: 1fr;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive:not(.admin-table-desktop) .table {
        min-width: 640px;
    }

    .table-responsive.table-responsive-sm:not(.admin-table-desktop) .table {
        min-width: 480px;
    }

    .table-responsive.table-responsive-compact:not(.admin-table-desktop) .table {
        min-width: 0;
    }

    .dob-picker-input {
        max-width: 100%;
    }

    .exam-floating-timer {
        top: auto !important;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        inset-inline-end: 50% !important;
        transform: translateX(50%);
        min-width: 140px;
        max-width: calc(100vw - 1.5rem);
    }

    [dir="rtl"] .exam-floating-timer {
        transform: translateX(50%);
    }

    .exam-floating-timer.exam-timer-warning {
        transform: translateX(50%) scale(1.02);
    }

    .exam-question-nav-col {
        order: -1;
    }

    .exam-question-nav-col .sticky-top {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 576px) {
    .app-main {
        padding-inline: 0.65rem;
    }

    .display-5 {
        font-size: calc(1.275rem + 0.3vw);
    }

    .btn-lg:not(.w-sm-auto):not(.w-auto) {
        width: 100%;
    }

    .page-header-bar .btn,
    .page-header-bar .btn-group {
        flex: 1 1 auto;
    }
}

@media (hover: none) {
    .app-card:hover {
        transform: none;
    }
}

/* Bootstrap & legacy utility overrides for dark mode readability */
body.theme-dark .text-dark,
body.theme-dark .text-black {
    color: var(--color-text) !important;
}

body.theme-dark .text-gray-900,
body.theme-dark .text-gray-800 {
    color: var(--color-text) !important;
}

body.theme-dark .text-gray-700,
body.theme-dark .text-gray-600,
body.theme-dark .text-gray-500 {
    color: var(--color-text-muted) !important;
}

body.theme-dark .bg-white,
body.theme-dark tbody.bg-white,
body.theme-dark .card.bg-white {
    background-color: var(--color-surface) !important;
    color: var(--color-text);
}

body.theme-dark .bg-light,
body.theme-dark .bg-light-subtle,
body.theme-dark .card-footer.bg-light,
body.theme-dark .card-header.bg-light {
    background-color: rgba(5, 34, 33, 0.75) !important;
    color: var(--color-text) !important;
    border-color: var(--color-surface-border) !important;
}

body.theme-dark .badge.bg-light,
body.theme-dark .badge.bg-light.text-dark {
    background-color: rgba(15, 62, 59, 0.9) !important;
    color: var(--color-text) !important;
    border-color: var(--color-surface-border) !important;
}

body.theme-dark .bg-gray-50,
body.theme-dark .bg-gray-100,
body.theme-dark thead.bg-gray-50,
body.theme-dark tr.bg-gray-100,
body.theme-dark tr.bg-gray-100 th,
body.theme-dark tr.bg-gray-100 td {
    background-color: var(--color-table-head-bg) !important;
    color: var(--color-title) !important;
}

body.theme-dark .bg-gray-200 {
    background-color: rgba(10, 46, 45, 0.65) !important;
}

body.theme-dark .border-gray-100,
body.theme-dark .border-gray-200,
body.theme-dark .border-gray-300,
body.theme-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-surface-border) !important;
}

body.theme-dark tr[class*="hover:bg-gray"]:hover,
body.theme-dark [class*="hover:bg-gray-50"]:hover {
    background-color: var(--color-table-hover-bg) !important;
}

body.theme-dark .card:not(.app-card) {
    background: var(--color-surface);
    border-color: var(--color-surface-border);
    color: var(--color-text);
}

body.theme-dark .card:not(.app-card) .card-header,
body.theme-dark .card:not(.app-card) .card-footer {
    background: rgba(5, 34, 33, 0.65);
    border-color: var(--color-surface-border);
    color: var(--color-title);
}

body.theme-dark .card:not(.app-card) .card-body,
body.theme-dark .card-title,
body.theme-dark .card-text {
    color: var(--color-text);
}

body.theme-dark .list-group-item {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-surface-border);
}

body.theme-dark .list-group-item-action:hover,
body.theme-dark .list-group-item-action:focus {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

body.theme-dark .modal-content {
    background: var(--color-surface);
    border-color: var(--color-surface-border);
    color: var(--color-text);
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    border-color: var(--color-surface-border);
}

body.theme-dark .modal-title {
    color: var(--color-title);
}

body.theme-dark .page-link {
    background: var(--color-surface);
    border-color: var(--color-surface-border);
    color: var(--color-text);
}

body.theme-dark .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

body.theme-dark .page-link:hover {
    background: var(--color-surface-hover);
    color: var(--color-title);
}

body.theme-dark .dropdown-menu {
    background: var(--color-surface);
    border-color: var(--color-surface-border);
}

body.theme-dark .dropdown-item {
    color: var(--color-text);
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
    background: rgba(201, 162, 39, 0.1);
    color: var(--color-title);
}

body.theme-dark .table .btn-link {
    color: var(--color-link);
}

body.theme-dark .table .btn-link:hover {
    color: var(--color-link-hover);
}

body.theme-dark select.bg-white,
body.theme-dark .status-select {
    background-color: rgba(4, 26, 26, 0.55) !important;
    color: var(--color-text) !important;
    border-color: var(--color-surface-border) !important;
}

body.theme-dark .rounded-lg.shadow,
body.theme-dark .rounded-lg.shadow-lg {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-surface-border);
    color: var(--color-text);
}

body.theme-dark .shadow.p-6,
body.theme-dark .shadow-lg.p-6 {
    color: var(--color-text);
}

.app-pagination .pagination {
    margin-bottom: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}

.app-pagination .page-link,
.app-pagination a,
.app-pagination span {
    flex: none !important;
    width: auto !important;
    min-width: 2.5rem;
    text-align: center;
}

/* Attendance report */
.report-stat-number {
    color: var(--color-title-accent);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}

.report-stat-number--present {
    color: var(--color-success);
}

.report-stat-number--absent {
    color: var(--color-danger);
}

.report-summary-badge {
    display: inline-block;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8125rem;
}

.report-summary-badge--high {
    background: rgba(5, 150, 105, 0.14);
    color: var(--color-success);
}

.report-summary-badge--low {
    background: rgba(220, 38, 38, 0.14);
    color: var(--color-danger);
}

body.theme-dark .report-summary-badge--high {
    background: rgba(52, 211, 153, 0.18);
}

body.theme-dark .report-summary-badge--low {
    background: rgba(248, 113, 113, 0.18);
}

.report-pct {
    display: inline-block;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
}

.report-pct--excellent {
    background: rgba(5, 150, 105, 0.14);
    color: var(--color-success);
}

.report-pct--good {
    background: rgba(217, 119, 6, 0.14);
    color: var(--color-warning);
}

.report-pct--average {
    background: rgba(17, 75, 79, 0.12);
    color: var(--color-title-accent);
}

.report-pct--poor {
    background: rgba(220, 38, 38, 0.14);
    color: var(--color-danger);
}

body.theme-dark .report-pct--excellent {
    background: rgba(52, 211, 153, 0.18);
}

body.theme-dark .report-pct--good {
    background: rgba(251, 191, 36, 0.18);
}

body.theme-dark .report-pct--average {
    background: rgba(240, 216, 117, 0.14);
    color: var(--color-title-accent);
}

body.theme-dark .report-pct--poor {
    background: rgba(248, 113, 113, 0.18);
}

/* Student onboarding wizard */
.onboarding-wizard-content {
    border: 1px solid var(--color-surface-border);
    box-shadow: var(--shadow-lg, 0 1rem 2rem rgba(0, 0, 0, 0.12));
}

.onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.onboarding-progress-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--color-surface-border);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.onboarding-progress-dot.is-active {
    transform: scale(1.35);
    background: var(--bs-primary);
}

.onboarding-progress-dot.is-done {
    background: var(--bs-primary);
    opacity: 0.45;
}

.onboarding-step-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1.75rem;
}

.onboarding-step-body {
    max-width: 34rem;
    margin-inline: auto;
    line-height: 1.7;
}

@media (min-width: 576px) {
    .onboarding-wizard-dialog {
        max-width: 560px;
    }
}

/* ── Accessibility (A11Y-01 skip link, A11Y-02 reduced motion) ─────────────── */

/* Skip-to-content: hidden until focused, then pinned top-start (RTL-aware). */
.skip-link {
    position: absolute;
    z-index: 2000;
}
.skip-link:focus,
.skip-link:focus-visible {
    inset-inline-start: 1rem;
    top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #111);
    border: 2px solid var(--bs-primary, #0d6efd);
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* Programmatic focus on <main> after skip should not draw an outline box. */
#app-main:focus {
    outline: none;
}

/* Honor users who ask for less motion: neutralize animations/transitions. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Orbit Loader system  (Deaconia — Brand Explorer "Orbit")
   Coptic cross (static) inside a sweeping gold ring.
   - .kh-page-loader : full-screen navigation overlay (driven by kh-loader.js)
   - .kh-loader      : inline loader for widgets / cards / tables
   - .kh-skeleton    : shimmer placeholder for async regions
   ============================================================ */
@keyframes kh-orbit-spin { to { transform: rotate(360deg); } }
@keyframes kh-loader-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kh-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- the mark (reusable SVG) --- */
.kh-orbit {
    width: var(--kh-orbit-size, 48px);
    height: var(--kh-orbit-size, 48px);
    display: inline-block;
    vertical-align: middle;
    flex: none;
}
.kh-orbit__cross { fill: var(--kh-orbit-cross, #7c3aed); }
.kh-orbit__ring {
    stroke: var(--kh-orbit-ring, #d4af37);
    transform-origin: 50% 50%;
    animation: kh-orbit-spin 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .kh-orbit__ring { animation-duration: 2.6s; }
}

/* --- full-page navigation overlay (Orbit brand; solid scrim, no GPU blur) --- */
.kh-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-bg-1, #f5f0ff) 88%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease, visibility 0.1s ease;
}
.kh-page-loader.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.kh-page-loader__box { display: grid; place-items: center; }
.kh-page-loader__disc {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 20% 0%, #7c3aed, #0a1628);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(15, 74, 78, 0.16));
}
.kh-page-loader__disc .kh-orbit {
    --kh-orbit-size: 54px;
    --kh-orbit-cross: #d4af37;
    --kh-orbit-ring: #d4af37;
}
.kh-page-loader.is-active .kh-page-loader__disc .kh-orbit__ring {
    animation-duration: 0.9s;
}
.kh-page-loader__label {
    margin-top: 0.75rem;
    font-family: var(--font-display, inherit);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--color-text, #22423f);
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .kh-page-loader {
        transition-duration: 0.01ms;
    }
    .kh-page-loader.is-active .kh-page-loader__disc .kh-orbit__ring {
        animation-duration: 2.6s;
    }
}

/* --- inline / widget loader --- */
.kh-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem;
    min-height: var(--kh-loader-min, 120px);
    color: var(--color-text-muted, #5b7773);
}
.kh-loader--overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.7);
    background: color-mix(in srgb, var(--color-surface, #ffffff) 72%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    min-height: 0;
}
.kh-loader__text { font-size: 0.85rem; }

/* --- skeleton shimmer --- */
.kh-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm, 0.5rem);
    background: var(--color-surface-border, rgba(17, 75, 79, 0.14));
    background: linear-gradient(
        90deg,
        var(--color-surface-border, rgba(17, 75, 79, 0.14)) 25%,
        color-mix(in srgb, var(--color-surface-border, rgba(17, 75, 79, 0.14)) 45%, transparent) 37%,
        var(--color-surface-border, rgba(17, 75, 79, 0.14)) 63%
    );
    background-size: 200% 100%;
    animation: kh-skeleton-shimmer 1.4s ease-in-out infinite;
}
.kh-skeleton + .kh-skeleton { margin-top: 0.55rem; }
.kh-skeleton--text,
.kh-skeleton--line { height: 0.85em; }
.kh-skeleton--title { height: 1.4em; width: 45%; }
.kh-skeleton--block { min-height: 80px; }
.kh-skeleton--circle { border-radius: 50%; aspect-ratio: 1; width: 42px; }
@media (prefers-reduced-motion: reduce) {
    .kh-skeleton { animation: none; }
}