/* =========================================================
   ADULLAM LEARNING — RESPONSIVE THEME SYSTEM
   Day: Concept 07  |  Night: Concept 02
   UI-only layer. No application/data behavior is changed.
   ========================================================= */

html,
html[data-theme="light"] {
    color-scheme: light;
    --page: #f5f8ff;
    --surface: #ffffff;
    --surface-soft: rgba(255,255,255,.88);
    --surface-muted: #f7f9fe;
    --ink-950: #101739;
    --ink-900: #172049;
    --ink-800: #22305f;
    --ink-700: #354675;
    --ink-600: #53658d;
    --ink-500: #7382a4;
    --ink-400: #98a4bf;
    --ink-300: #c3cbdd;
    --ink-200: #dce2ef;
    --ink-100: #edf1f8;
    --ink-50: #f7f9fd;
    --primary-800: #4037bf;
    --primary-700: #4e46d8;
    --primary-600: #5b53ec;
    --primary-500: #7068f5;
    --primary-400: #8c86fa;
    --primary-300: #b4b0ff;
    --primary-100: #e7e6ff;
    --primary-50: #f2f1ff;
    --cyan-700: #087f9b;
    --cyan-600: #0b97b5;
    --cyan-500: #14b8c8;
    --cyan-400: #45cbd8;
    --cyan-100: #d6f7fa;
    --emerald-600: #078b73;
    --emerald-500: #10a98b;
    --emerald-100: #d8f7ee;
    --border: rgba(40,55,104,.10);
    --border-strong: rgba(40,55,104,.17);
    --border-glow: rgba(91,83,236,.20);
    --shadow-xs: 0 1px 3px rgba(30,42,86,.055);
    --shadow-sm: 0 6px 18px rgba(34,48,95,.065), 0 1px 2px rgba(34,48,95,.04);
    --shadow-md: 0 14px 36px rgba(34,48,95,.09), 0 3px 8px rgba(34,48,95,.035);
    --shadow-lg: 0 24px 60px rgba(34,48,95,.13);
    --shadow-glow: 0 10px 28px rgba(91,83,236,.20);
    --glow-primary: rgba(91,83,236,.18);
    --glow-cyan: rgba(20,184,200,.16);
    --mesh-1: rgba(91,83,236,.09);
    --mesh-2: rgba(20,184,200,.07);
    --mesh-3: rgba(112,104,245,.055);
    --concept-accent: #5b53ec;
    --concept-accent-2: #14b8c8;
    --concept-positive: #10a98b;
    --concept-header: rgba(249,251,255,.88);
    --concept-sidebar: #ffffff;
    --concept-sidebar-text: #5b688e;
    --concept-sidebar-active: #f0efff;
    --concept-card: rgba(255,255,255,.92);
    --concept-card-strong: #ffffff;
    --concept-input: #fbfcff;
    --concept-input-border: #dfe5f1;
    --concept-muted-panel: #f5f7fd;
    --concept-bottom-nav: rgba(255,255,255,.96);
    --concept-scrollbar: #cdd4e6;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page: #06101c;
    --surface: #0b1727;
    --surface-soft: rgba(11,23,39,.90);
    --surface-muted: #0e1c30;
    --ink-950: #f4f8ff;
    --ink-900: #edf5ff;
    --ink-800: #d8e6f8;
    --ink-700: #bdd0e8;
    --ink-600: #96acc9;
    --ink-500: #7188a7;
    --ink-400: #536a88;
    --ink-300: #405674;
    --ink-200: #293d58;
    --ink-100: #182b43;
    --ink-50: #102238;
    --primary-800: #066b91;
    --primary-700: #087da9;
    --primary-600: #0798cf;
    --primary-500: #18b6e6;
    --primary-400: #48cef3;
    --primary-300: #85e0f7;
    --primary-100: #10344b;
    --primary-50: #0b2538;
    --cyan-700: #048a9e;
    --cyan-600: #0aa9bd;
    --cyan-500: #22d3ee;
    --cyan-400: #67e8f9;
    --cyan-100: #113b47;
    --emerald-600: #16b8e6;
    --emerald-500: #35c9f2;
    --emerald-100: #0d334b;
    --amber-100: #3a2d11;
    --rose-100: #3a1721;
    --violet-100: #291e48;
    --border: rgba(132,191,233,.10);
    --border-strong: rgba(132,191,233,.18);
    --border-glow: rgba(34,211,238,.24);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.30);
    --shadow-sm: 0 8px 24px rgba(0,0,0,.24);
    --shadow-md: 0 16px 44px rgba(0,0,0,.32);
    --shadow-lg: 0 28px 70px rgba(0,0,0,.40);
    --shadow-glow: 0 10px 34px rgba(24,182,230,.18), 0 0 0 1px rgba(34,211,238,.06);
    --glow-primary: rgba(24,182,230,.24);
    --glow-cyan: rgba(34,211,238,.22);
    --mesh-1: rgba(18,137,192,.14);
    --mesh-2: rgba(34,211,238,.08);
    --mesh-3: rgba(69,87,255,.06);
    --concept-accent: #18b6e6;
    --concept-accent-2: #22d3ee;
    --concept-positive: #35c9f2;
    --concept-header: rgba(6,16,28,.86);
    --concept-sidebar: #071525;
    --concept-sidebar-text: #88a2c2;
    --concept-sidebar-active: rgba(16,111,160,.22);
    --concept-card: rgba(10,24,41,.92);
    --concept-card-strong: #0b1a2d;
    --concept-input: #0a1b2e;
    --concept-input-border: #1b3955;
    --concept-muted-panel: #0b1d31;
    --concept-bottom-nav: rgba(5,15,27,.97);
    --concept-scrollbar: #24445f;
}

:root { accent-color: var(--concept-accent); }

html.theme-ready,
html.theme-ready body,
html.theme-ready .admin-sidebar,
html.theme-ready .student-sidebar,
html.theme-ready .admin-header,
html.theme-ready .student-header,
html.theme-ready .panel,
html.theme-ready .dashboard-panel,
html.theme-ready .summary-card,
html.theme-ready .student-panel,
html.theme-ready .student-profile-card,
html.theme-ready input,
html.theme-ready select,
html.theme-ready textarea {
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

html, body { background: var(--page); }
body { color: var(--ink-900); }
body::before {
    background:
        radial-gradient(70% 55% at 86% -8%, var(--mesh-1), transparent 68%),
        radial-gradient(55% 48% at -8% 36%, var(--mesh-2), transparent 68%),
        radial-gradient(45% 40% at 52% 110%, var(--mesh-3), transparent 70%),
        linear-gradient(180deg, var(--page), var(--page));
}
body::after {
    opacity: .28;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-600) 12%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
}
html[data-theme="dark"] body::after {
    opacity: .22;
    background-image:
        linear-gradient(rgba(78,150,197,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,150,197,.045) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 84%);
}

h1, h2, h3 { color: var(--ink-950); }
.muted, .student-muted, .dashboard-subtitle { color: var(--ink-500); }
.eyebrow {
    color: var(--concept-accent);
    background: none;
    -webkit-text-fill-color: currentColor;
    letter-spacing: .13em;
}

/* ---------- Brand ---------- */
.brand-mark,
.student-brand-mark,
.student-login-mobile-brand,
.redirect-mark {
    overflow: hidden;
    color: transparent !important;
    text-indent: -9999px;
    background: transparent url("../assets/adullam-logo.webp") center / contain no-repeat;
    border: 1px solid color-mix(in srgb, var(--concept-accent) 18%, transparent);
    box-shadow: none;
    animation: none !important;
}
.brand-mark::after { display: none !important; }

/* ---------- Custom SVG icon system ---------- */
.adullam-svg-icon {
    width: 1em;
    height: 1em;
    overflow: visible;
    color: currentColor;
    flex: 0 0 auto;
}
.sidebar-nav a .adullam-svg-icon,
.student-sidebar-nav a .adullam-svg-icon { width: 18px; height: 18px; }

/* ---------- Theme switch ---------- */
.ui-theme-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    color: var(--ink-800);
    background: var(--surface-soft);
    box-shadow: var(--shadow-xs);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.ui-theme-toggle:hover { transform: translateY(-1px); border-color: var(--border-glow); box-shadow: var(--shadow-sm); }
.ui-theme-toggle .adullam-svg-icon { width: 16px; height: 16px; color: var(--concept-accent); }
html[data-theme="dark"] .ui-theme-toggle { color: #dff7ff; background: rgba(12,32,52,.88); border-color: rgba(74,190,229,.18); }

/* ---------- Admin shell / Concept 07 light, Concept 02 dark ---------- */
.admin-shell { grid-template-columns: 204px minmax(0,1fr); }
.admin-sidebar,
.student-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    width: 204px;
    height: 100vh;
    height: 100dvh;
    gap: 13px;
    padding: 14px 10px max(14px, var(--safe-bottom));
    color: var(--concept-sidebar-text);
    background: var(--concept-sidebar);
    border-right: 1px solid var(--border);
    box-shadow: 10px 0 34px rgba(34,48,95,.045);
}
html[data-theme="dark"] .admin-sidebar,
html[data-theme="dark"] .student-sidebar {
    background:
        radial-gradient(70% 38% at 0% 0%, rgba(24,182,230,.10), transparent 70%),
        linear-gradient(180deg, #071525 0%, #06121f 100%);
    box-shadow: 12px 0 44px rgba(0,0,0,.22);
}
.admin-sidebar::before,
.student-sidebar::before { opacity: .09; }
.sidebar-brand,
.student-sidebar-brand { min-height: 58px; gap: 9px; padding: 5px 6px 10px; border-color: var(--border); }
.brand-mark,
.student-brand-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
.sidebar-brand-copy strong,
.student-sidebar-brand strong { color: var(--ink-950); font-size: .80rem; }
.sidebar-brand-copy small,
.student-sidebar-brand small { color: var(--ink-500); font-size: .58rem; }
.nav-section-label { margin: 10px 8px 3px; color: var(--ink-400); }
.sidebar-nav a,
.student-sidebar-nav a {
    min-height: 39px;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--concept-sidebar-text);
    font-size: .70rem;
    font-weight: 700;
}
.sidebar-nav a svg,
.student-sidebar-nav a svg { color: var(--ink-400); }
.sidebar-nav a:hover,
.student-sidebar-nav a:hover { color: var(--ink-950); background: var(--surface-muted); transform: none; }
.sidebar-nav a.active,
.student-sidebar-nav a.active {
    color: var(--concept-accent);
    background: var(--concept-sidebar-active);
    border-color: color-mix(in srgb, var(--concept-accent) 14%, transparent);
    box-shadow: inset 3px 0 0 var(--concept-accent);
}
.sidebar-nav a.active::before,
.student-sidebar-nav a.active::before { display: none; }
.sidebar-nav a.active svg,
.student-sidebar-nav a.active svg { color: var(--concept-accent); }
.admin-sidebar > #admin-logout-button,
.student-sidebar > #student-logout-button {
    min-height: 39px;
    color: var(--ink-600);
    background: var(--surface-muted);
    border-color: var(--border);
    box-shadow: none;
}
html[data-theme="dark"] .admin-sidebar > #admin-logout-button,
html[data-theme="dark"] .student-sidebar > #student-logout-button { color: #9cb1cc; background: #0a1b2e; }

.admin-main { margin-left: 0; padding: 0 clamp(14px,1.7vw,24px) 30px; }
.admin-header {
    min-height: 68px;
    padding: 11px 0;
    background: var(--concept-header);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px) saturate(125%);
}
.admin-header::after,
.student-header::after { background: linear-gradient(90deg, var(--concept-accent), var(--concept-accent-2)); box-shadow: none; height: 2px; }
.admin-header h1 { font-size: clamp(1.36rem,2vw,1.85rem); }
.page-header-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dashboard-search { min-width: min(280px, 30vw); background: var(--concept-input); border-color: var(--concept-input-border); box-shadow: none; }
.dashboard-search input { color: var(--ink-900); }
.dashboard-date { color: var(--ink-500); background: var(--surface); border: 1px solid var(--border); }

/* ---------- Shared cards and controls ---------- */
.panel,
.dashboard-panel,
.summary-card,
.student-panel,
.student-profile-card,
.course-card,
.batch-card,
.registration-panel,
.login-card,
.student-login-card,
.form-live-preview {
    border-color: var(--border) !important;
    background: var(--concept-card) !important;
    box-shadow: var(--shadow-sm) !important;
}
.panel,
.dashboard-panel,
.student-panel { border-radius: 16px; }
.summary-grid { gap: 9px; }
.summary-card {
    min-height: 102px;
    padding: 14px;
    border-radius: 15px;
}
.summary-card::before { display: none; }
.summary-card::after { background: linear-gradient(90deg, var(--concept-accent), var(--concept-accent-2)); height: 2px; }
.summary-card-top { color: var(--ink-500); font-size: .62rem; }
.summary-card > strong { color: var(--ink-950); font-size: 1.65rem; }
.summary-icon,
.student-stat-icon,
.activity-icon,
.published-form-icon {
    color: var(--concept-accent) !important;
    background: color-mix(in srgb, var(--concept-accent) 9%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--concept-accent) 13%, transparent) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .summary-icon,
html[data-theme="dark"] .student-stat-icon,
html[data-theme="dark"] .activity-icon,
html[data-theme="dark"] .published-form-icon { color: #67e8f9 !important; background: rgba(24,182,230,.10) !important; }

.primary-button,
.student-hero-action,
.registration-submit-button,
.student-panel-link,
.student-login-card form button[type="submit"] {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--concept-accent), color-mix(in srgb, var(--concept-accent) 70%, var(--concept-accent-2)));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--concept-accent) 20%, transparent);
}
html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .student-hero-action,
html[data-theme="dark"] .registration-submit-button,
html[data-theme="dark"] .student-panel-link,
html[data-theme="dark"] .student-login-card form button[type="submit"] {
    color: #03111b;
    background: linear-gradient(135deg, #22d3ee, #18b6e6);
    box-shadow: 0 10px 28px rgba(24,182,230,.19);
}
.secondary-button,
.student-secondary-button,
.student-secondary-link,
.text-button,
.compact-icon-action,
.registration-coupon-button {
    color: var(--ink-800);
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: none;
}
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .student-secondary-button,
html[data-theme="dark"] .student-secondary-link,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .compact-icon-action,
html[data-theme="dark"] .registration-coupon-button { color: #d9e9f7; background: #0c1e32; border-color: #1b3b58; }

input, select, textarea,
.form-field input,
.form-field select,
.form-field textarea {
    color: var(--ink-900) !important;
    background: var(--concept-input) !important;
    border-color: var(--concept-input-border) !important;
    box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input:focus, select:focus, textarea:focus {
    border-color: color-mix(in srgb, var(--concept-accent) 48%, var(--concept-input-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--concept-accent) 10%, transparent) !important;
}
.form-field label { color: var(--ink-700); font-size: .66rem; }

.responsive-table,
table { border-color: var(--border); background: var(--surface); }
th { color: var(--ink-500); background: var(--surface-muted); border-color: var(--border); }
td { color: var(--ink-800); border-color: var(--border); }

/* ---------- Dashboard density ---------- */
.dashboard-analytics-grid,
.dashboard-detail-grid { gap: 10px; margin-bottom: 10px; }
.dashboard-panel { padding: 15px; }
.panel-header { margin-bottom: 11px; }
.panel-header h2 { font-size: 1rem; }
.activity-row { min-height: 46px; padding: 7px 8px; border-color: var(--border); background: var(--surface-muted); }
.quick-action-grid { gap: 8px; }
.quick-action {
    min-height: 72px;
    gap: 7px;
    border-color: var(--border);
    border-radius: 13px;
    color: var(--ink-800);
    background: var(--surface);
    box-shadow: none;
}
.quick-action:hover { transform: translateY(-1px); border-color: var(--border-glow); }
.quick-action svg { color: var(--concept-accent); background: color-mix(in srgb, var(--concept-accent) 8%, var(--surface)); }

/* ---------- Courses / Batches / Students ---------- */
.management-layout { gap: 10px; }
.course-grid { gap: 10px; }
.course-card { border-radius: 16px; overflow: hidden; }
.course-card-body { padding: 13px; }
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; }
.course-thumb { background: var(--surface-muted); }
.card-actions { gap: 6px; }
.batch-card-metrics > span,
.course-card-meta > span,
.student-card-meta > span { background: var(--surface-muted); border-color: var(--border); color: var(--ink-700); }
.students-directory-list,
#batch-students-list { gap: 8px; }
.student-directory-card,
.batch-student-item { border-color: var(--border); background: var(--surface); box-shadow: none; }

/* ---------- Forms / admissions / coupons ---------- */
.forms-toolbar,
.course-workspace-tabs {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.forms-tab,
.course-workspace-tabs button { color: var(--ink-500); }
.forms-tab.active,
.course-workspace-tabs button.active {
    color: var(--concept-accent);
    background: color-mix(in srgb, var(--concept-accent) 9%, var(--surface));
    box-shadow: none;
}
.admission-form-card,
.coupon-insight-card,
.registration-record-card {
    border-color: var(--border) !important;
    background: var(--concept-card-strong) !important;
    box-shadow: var(--shadow-xs) !important;
}
.published-form-status,
.coupon-status-badge,
.student-profile-status,
.student-header-status {
    color: var(--concept-positive) !important;
    background: color-mix(in srgb, var(--concept-positive) 10%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--concept-positive) 18%, transparent) !important;
}
.coupon-metric,
.published-form-meta-chip,
.registration-price-banner,
.registration-success-amount { background: var(--surface-muted) !important; border-color: var(--border) !important; }
.coupon-user-chip { color: var(--ink-700) !important; background: var(--surface-muted) !important; border-color: var(--border) !important; }

/* ---------- Public registration / Concept 07 & 02 ---------- */
.registration-body { background: var(--page) !important; }
.registration-page { width: min(980px, calc(100% - 28px)); gap: 14px; padding-top: 24px; }
.registration-hero {
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
        radial-gradient(60% 80% at 95% 0%, color-mix(in srgb, var(--concept-accent) 11%, transparent), transparent 70%),
        radial-gradient(50% 70% at 0 100%, color-mix(in srgb, var(--concept-accent-2) 10%, transparent), transparent 70%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}
.registration-brand-copy h1 { color: var(--ink-950); }
.registration-brand-copy p { color: var(--ink-500); }
.registration-kicker { color: var(--concept-accent); }
.registration-trust-chip { color: var(--ink-700); background: var(--surface-muted); border-color: var(--border); }
.registration-panel { border-radius: 20px !important; }
.registration-price-label { color: var(--ink-500); }
.registration-price-values strong { color: var(--ink-950); }
.registration-savings,
.registration-coupon-message.is-success { color: var(--concept-positive) !important; }
.registration-submit-button {
    min-height: 58px;
    border-radius: 14px;
    letter-spacing: 0;
}
.registration-submit-copy strong { font-size: .76rem; }
.registration-submit-copy small { opacity: .78; }
.registration-secure-note { color: var(--ink-500); }
.registration-success { color: var(--ink-800); }

/* ---------- Student experience ---------- */
.student-shell { grid-template-columns: 204px minmax(0,1fr); }
.student-header { grid-column: 2; min-height: 66px; padding: 10px clamp(16px,2vw,28px); background: var(--concept-header); border-color: var(--border); }
.student-main { grid-column: 2; padding: 15px clamp(16px,2vw,28px) 32px; }
.student-hero {
    min-height: 132px;
    margin-bottom: 10px;
    padding: 20px 22px;
    border-color: var(--border);
    border-radius: 18px;
    background:
        radial-gradient(48% 90% at 95% 8%, color-mix(in srgb, var(--concept-accent) 10%, transparent), transparent 72%),
        radial-gradient(50% 80% at 10% 100%, color-mix(in srgb, var(--concept-accent-2) 8%, transparent), transparent 72%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}
.student-hero::before,
.student-hero::after { display: none; }
.student-profile-card {
    grid-template-columns: auto minmax(0,1fr) minmax(230px,.70fr);
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 17px;
}
.student-profile-card::after { display: none; }
.student-profile-avatar { width: 52px; height: 52px; border-radius: 50%; border-color: var(--surface); background: linear-gradient(135deg, var(--concept-accent), var(--concept-accent-2)); }
.student-stats-grid { gap: 8px; margin-bottom: 10px; }
.student-stat-card { min-height: 82px; padding: 12px; border-radius: 14px; background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow-xs) !important; }
.student-course-card,
.student-dashboard-lesson,
.student-lesson-button,
.student-material-card { background: var(--surface) !important; border-color: var(--border) !important; }
.student-lesson-button.active { background: color-mix(in srgb, var(--concept-accent) 8%, var(--surface)) !important; border-color: color-mix(in srgb, var(--concept-accent) 28%, var(--border)) !important; box-shadow: inset 3px 0 0 var(--concept-accent) !important; }
.student-selected-description { color: var(--ink-700); background: var(--surface); border-color: var(--border); }
.student-video-player { border-color: color-mix(in srgb, var(--concept-accent-2) 30%, #1f3850) !important; background: #03101c !important; }

/* ---------- Login screens ---------- */
.admin-login-body,
.student-login-body { background: var(--page) !important; }
.admin-login-page,
.student-login-page { background: transparent !important; }
.admin-login-page::before,
.admin-login-page::after { border-color: color-mix(in srgb, var(--concept-accent) 11%, transparent); }
.login-card,
.student-login-card {
    position: relative;
    color: var(--ink-900);
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}
.login-brand { color: var(--ink-950); }
.login-intro,
.login-meta,
.student-login-heading p,
.student-login-footer { color: var(--ink-500) !important; }
.login-intro h1,
.student-login-heading h1 { color: var(--ink-950) !important; }
.auth-form { background: var(--surface-muted); }
.student-login-visual { background: linear-gradient(145deg, color-mix(in srgb, var(--concept-accent) 10%, var(--page)), var(--page)); }
html[data-theme="dark"] .student-login-visual img { opacity: .72; filter: saturate(.8) brightness(.72) contrast(1.08); }
.admin-login-body .ui-theme-toggle,
.student-login-body .ui-theme-toggle,
.registration-body .ui-theme-toggle { position: fixed; z-index: 120; top: max(14px, var(--safe-top)); right: max(14px, var(--safe-right)); }

/* ---------- Dark mode specific Concept 02 chrome ---------- */
html[data-theme="dark"] .admin-header,
html[data-theme="dark"] .student-header { box-shadow: 0 1px 0 rgba(61,166,218,.08); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .student-panel,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .batch-card,
html[data-theme="dark"] .student-profile-card,
html[data-theme="dark"] .admission-form-card,
html[data-theme="dark"] .coupon-insight-card,
html[data-theme="dark"] .registration-record-card {
    background:
        linear-gradient(180deg, rgba(13,31,51,.94), rgba(9,23,39,.95)) !important;
    border-color: rgba(94,171,218,.11) !important;
}
html[data-theme="dark"] .summary-card:hover,
html[data-theme="dark"] .dashboard-panel:hover,
html[data-theme="dark"] .course-card:hover { border-color: rgba(34,211,238,.20) !important; }
html[data-theme="dark"] .activity-row,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .coupon-metric,
html[data-theme="dark"] .published-form-meta-chip,
html[data-theme="dark"] .registration-price-banner,
html[data-theme="dark"] .batch-card-metrics > span,
html[data-theme="dark"] .course-card-meta > span { background: #0a1b2e !important; border-color: #17344f !important; }
html[data-theme="dark"] .registration-hero {
    background:
        radial-gradient(50% 70% at 95% 0%, rgba(24,182,230,.15), transparent 70%),
        linear-gradient(150deg, #091a2c, #071422) !important;
}
html[data-theme="dark"] .registration-trust-chip { background: #0a1d31; border-color: #173752; color: #b7cee6; }
html[data-theme="dark"] .student-hero { background: linear-gradient(145deg, #0a1b2f, #071524) !important; }
html[data-theme="dark"] .student-course-image,
html[data-theme="dark"] .student-course-hero-image,
html[data-theme="dark"] .student-dashboard-lesson-thumbnail,
html[data-theme="dark"] .student-lesson-thumbnail { background: #071727; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
    .admin-shell, .student-shell { grid-template-columns: 176px minmax(0,1fr); }
    .admin-sidebar, .student-sidebar { width: 176px; }
    .admin-main { margin-left: 0; }
    .sidebar-brand-copy small, .student-sidebar-brand small { display: none; }
    .sidebar-nav a, .student-sidebar-nav a { font-size: .66rem; padding-inline: 9px; }
    .summary-card { min-height: 92px; }
    .summary-card > strong { font-size: 1.45rem; }
    .student-profile-card { grid-template-columns: auto minmax(0,1fr); }
    .student-profile-meta { grid-column: 1 / -1; }
}

@media (min-width: 721px) and (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 78px minmax(0,1fr) !important;
    }

    .student-shell {
        grid-template-columns: 76px minmax(0,1fr) !important;
    }

    .admin-sidebar {
        width: 78px !important;
    }

    .student-sidebar {
        width: 76px !important;
    }

    .admin-sidebar,
    .student-sidebar {
        align-items: center;
        gap: 14px;
        padding: 14px 10px max(14px, var(--safe-bottom));
        overflow-x: hidden;
    }

    .sidebar-brand,
    .student-sidebar-brand {
        justify-content: center;
        width: 100%;
        padding-inline: 0;
    }

    .sidebar-brand-copy,
    .student-sidebar-brand > span:last-child,
    .nav-section-label,
    .student-sidebar-nav .nav-section-label,
    .sidebar-nav a > span,
    .student-sidebar-nav a > span,
    .admin-sidebar > #admin-logout-button > span,
    .student-sidebar > #student-logout-button > span {
        display: none !important;
    }

    .sidebar-nav,
    .student-sidebar-nav {
        width: 100%;
        gap: 8px;
    }

    .sidebar-nav a,
    .student-sidebar-nav a,
    .admin-sidebar > #admin-logout-button,
    .student-sidebar > #student-logout-button {
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 0 !important;
        border-radius: 16px;
    }

    .sidebar-nav a > :is(.adullam-svg-icon, svg.lucide),
    .student-sidebar-nav a > :is(.adullam-svg-icon, svg.lucide) {
        width: 20px !important;
        height: 20px !important;
    }

    .admin-main,
    .student-main {
        padding-inline: clamp(14px, 2.4vw, 22px);
    }

    .admin-header,
    .student-header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-header {
        margin-inline: 0;
    }

    .page-header-actions,
    .student-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
    }

    .dashboard-search {
        flex: 1 1 190px;
        width: auto;
        min-width: 0;
    }

    .dashboard-analytics-grid,
    .dashboard-detail-grid,
    .student-dashboard-grid,
    .student-course-layout,
    .forms-dashboard-grid,
    #form-builder-panel {
        grid-template-columns: minmax(0,1fr) !important;
    }

    .summary-grid,
    .student-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    }

    .student-profile-card {
        grid-template-columns: 48px minmax(0,1fr) !important;
    }

    .student-profile-meta {
        grid-column: 1 / -1;
    }
}

/* ---------- Mobile: preserve visible icon + text labels ---------- */
@media (max-width: 720px) {
    .admin-main { margin-left: 0; padding-inline: 9px; }
    .admin-header {
        margin: 0 -9px 10px !important;
        padding-left: 12px;
        padding-right: 104px;
        background: var(--concept-header);
    }
    .admin-header h1 { font-size: 1.08rem; }
    .page-header-actions .ui-theme-toggle,
    .student-header-actions .ui-theme-toggle {
        position: fixed;
        z-index: 91;
        top: calc(var(--safe-top) + 11px);
        right: max(54px, calc(var(--safe-right) + 54px));
        min-height: 38px;
        padding: 7px 9px;
        border-radius: 12px;
    }
    .ui-theme-label { display: inline !important; font-size: .58rem; }

    .admin-sidebar,
    .student-sidebar {
        position: fixed;
        top: auto;
        align-self: auto;
        width: auto;
        background: var(--concept-bottom-nav) !important;
        border-top: 1px solid var(--border);
        box-shadow: 0 -10px 30px rgba(22,35,74,.10);
    }
    html[data-theme="dark"] .admin-sidebar,
    html[data-theme="dark"] .student-sidebar { box-shadow: 0 -12px 34px rgba(0,0,0,.36); }
    .sidebar-nav a,
    .student-sidebar-nav a {
        color: var(--ink-500);
        font-size: .50rem;
        font-weight: 760;
    }
    .sidebar-nav a span,
    .student-sidebar-nav a span { display: block !important; max-width: 100%; }
    .sidebar-nav a svg,
    .student-sidebar-nav a svg { width: 18px; height: 18px; color: currentColor; }
    .sidebar-nav a.active,
    .student-sidebar-nav a.active {
        color: var(--concept-accent);
        background: color-mix(in srgb, var(--concept-accent) 8%, transparent);
        box-shadow: none;
    }
    .sidebar-nav a.active::after,
    .student-sidebar-nav a.active::after { background: var(--concept-accent); box-shadow: none; }

    .admin-sidebar > #admin-logout-button,
    .student-sidebar > #student-logout-button {
        color: var(--rose-600);
        background: var(--surface-soft);
        border-color: var(--border);
    }

    .summary-grid { gap: 7px; }
    .summary-card { min-height: 84px; padding: 11px; border-radius: 14px; }
    .summary-card > strong { font-size: 1.28rem; }
    .dashboard-panel, .panel { border-radius: 14px; padding: 12px; }
    .quick-action { min-height: 62px; }

    .registration-page { width: min(100% - 18px, 620px); padding: 12px 0 26px; gap: 8px; }
    .registration-hero { padding: 13px; border-radius: 15px; }
    .registration-panel { padding: 12px !important; border-radius: 15px !important; }
    .registration-brand { gap: 9px; padding-right: 82px; }
    .registration-brand .student-brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
    .registration-brand-copy h1 { font-size: 1.15rem; }
    .registration-brand-copy p { font-size: .64rem; }
    .registration-trust-row { gap: 5px; }
    .registration-trust-chip { padding: 5px 7px; font-size: .52rem; }
    .registration-body .ui-theme-toggle { top: calc(var(--safe-top) + 12px); right: max(12px, var(--safe-right)); }
    .registration-submit-button { min-height: 54px; }

    .student-header { grid-column: 1; padding-left: 12px; padding-right: 104px; background: var(--concept-header); }
    .student-main { grid-column: 1; padding: 10px 9px calc(var(--student-bottom-nav-h) + var(--safe-bottom) + 14px); }
    .student-hero { min-height: 112px; padding: 15px; border-radius: 15px; }
    .student-hero h1 { font-size: 1.15rem; }
    .student-profile-card { grid-template-columns: auto minmax(0,1fr); gap: 10px; padding: 12px; border-radius: 15px; }
    .student-profile-avatar { width: 48px; height: 48px; }
    .student-profile-meta { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .student-profile-meta > div { min-width: 0; padding: 8px; border-radius: 10px; background: var(--surface-muted); border: 1px solid var(--border); }
    .student-stats-grid { gap: 7px; }
    .student-stat-card { min-height: 72px; padding: 10px; }
    .student-course-layout { gap: 8px; }

    .admin-login-body .ui-theme-toggle,
    .student-login-body .ui-theme-toggle { top: calc(var(--safe-top) + 12px); right: max(12px, var(--safe-right)); }
    .login-card, .student-login-card { border-radius: 18px !important; }
}

@media (max-width: 390px) {
    .page-header-actions .ui-theme-toggle,
    .student-header-actions .ui-theme-toggle { right: max(50px, calc(var(--safe-right) + 50px)); padding-inline: 8px; }
    .ui-theme-label { font-size: .54rem; }
    .student-profile-meta { grid-template-columns: 1fr 1fr; }
    .student-profile-meta > div:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-ready *, html.theme-ready *::before, html.theme-ready *::after { transition-duration: .01ms !important; }
}

/* Final mobile label safeguards: every navigation/action icon keeps readable text. */
@media (max-width: 720px) {
    .admin-header,
    .student-header { padding-right: 88px; }

    .page-header-actions .ui-theme-toggle,
    .student-header-actions .ui-theme-toggle {
        right: max(10px, var(--safe-right));
    }

    .admin-sidebar > #admin-logout-button {
        flex: 0 0 54px;
        min-width: 54px;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--rose-600) !important;
        background: transparent !important;
    }
    .admin-sidebar > #admin-logout-button span {
        display: block !important;
        font-size: .48rem;
        font-weight: 760;
        line-height: 1;
    }

    .student-secondary-link {
        gap: 5px;
        padding: 6px 8px;
        font-size: .56rem;
    }
    .student-secondary-link span { display: inline !important; }
    .student-header-actions { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 720px) {
    /* Keep action text beside/under every custom SVG icon on small screens. */
    .course-card-actions,
    .batch-card-actions,
    .published-form-actions {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
    }
    .course-card-actions .compact-icon-action,
    .batch-card-actions .compact-icon-action,
    .published-form-actions .compact-icon-action {
        min-height: 39px !important;
        gap: 5px !important;
        padding: 6px 7px !important;
    }
    .course-card-actions .compact-icon-action .action-label,
    .batch-card-actions .compact-icon-action .action-label,
    .published-form-actions .compact-icon-action .action-label {
        display: inline !important;
        min-width: 0;
        overflow: hidden;
        font-size: .52rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.students-page #open-student-editor {
        width: auto !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        padding: 6px 9px !important;
    }
    body.students-page #open-student-editor span {
        display: inline !important;
        font-size: .55rem;
    }
}


/* =========================================================
   ADULLAM LEARNING — UI FIX PASS 02
   2026-09-06
   Fixes: duplicated sidebar spacing, Concept 02 blue dark mode,
   dark-surface contrast, and SVG/text alignment.
   UI only — no application/data behavior.
   ========================================================= */

/* ---------- Tighter shell geometry ---------- */
html.theme-ready body:has(.admin-shell) .admin-main {
    margin-left: 0 !important;
}

html.theme-ready .admin-main,
html.theme-ready .student-main {
    min-width: 0;
}

html.theme-ready .admin-sidebar,
html.theme-ready .student-sidebar {
    box-sizing: border-box;
}

html.theme-ready .admin-header {
    margin: 0 0 12px !important;
}

html.theme-ready .summary-grid,
html.theme-ready .dashboard-analytics-grid,
html.theme-ready .dashboard-detail-grid,
html.theme-ready .forms-dashboard-grid,
html.theme-ready .student-dashboard-grid {
    column-gap: 9px;
    row-gap: 9px;
}

/* ---------- Icon geometry and label alignment ---------- */
html.theme-ready .adullam-svg-icon,
html.theme-ready svg.lucide {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    vertical-align: middle;
    transform: none;
}

html.theme-ready :is(
    .sidebar-nav a,
    .student-sidebar-nav a,
    .primary-button,
    .secondary-button,
    .danger-button,
    .text-button,
    .inline-text-button,
    .compact-icon-action,
    .student-secondary-button,
    .student-secondary-link,
    .student-hero-action,
    .student-course-link,
    .student-material-link,
    .registration-coupon-button,
    .registration-submit-button,
    .ui-theme-toggle
) {
    align-items: center;
}

html.theme-ready :is(
    .primary-button,
    .secondary-button,
    .danger-button,
    .text-button,
    .inline-text-button,
    .compact-icon-action,
    .student-secondary-button,
    .student-secondary-link,
    .student-hero-action,
    .student-course-link,
    .student-material-link,
    .registration-coupon-button
) > :is(.adullam-svg-icon, svg.lucide) {
    width: 15px;
    height: 15px;
}

html.theme-ready .sidebar-nav a,
html.theme-ready .student-sidebar-nav a {
    display: flex;
    align-items: center;
}

html.theme-ready .sidebar-nav a > :is(.adullam-svg-icon, svg.lucide),
html.theme-ready .student-sidebar-nav a > :is(.adullam-svg-icon, svg.lucide) {
    width: 17px;
    height: 17px;
}

html.theme-ready .sidebar-nav a > span,
html.theme-ready .student-sidebar-nav a > span,
html.theme-ready .compact-icon-action .action-label,
html.theme-ready .ui-theme-label {
    line-height: 1.15;
}

html.theme-ready .compact-icon-action {
    display: inline-flex !important;
    justify-content: center;
    gap: 6px;
}


/* =========================================================
   CONTRAST SAFETY PATCH
   Fixes unreadable light/white surfaces without changing UI logic.
   ========================================================= */

/* Light / day mode: every neutral surface owns a dark foreground. */
html:not([data-theme="dark"]) body,
html[data-theme="light"] body {
    color: #172049 !important;
}

html:not([data-theme="dark"]) :is(
    .panel,
    .admin-panel,
    .dashboard-panel,
    .summary-card,
    .course-card,
    .batch-card,
    .student-directory-card,
    .batch-student-item,
    .lesson-item,
    .material-item,
    .coupon-item,
    .material-card,
    .overview-metrics > div,
    .status-chart,
    .form-live-preview,
    .preview-form-card,
    .panel-subpanel,
    .builder-fields-panel,
    .builder-field-item,
    .students-table-wrap,
    .student-action-menu-panel,
    .student-action-menu-toggle,
    .app-modal-card,
    .forms-toolbar,
    .course-workspace-tabs,
    .admission-form-card,
    .coupon-insight-card,
    .registration-record-card
),
html[data-theme="light"] :is(
    .panel,
    .admin-panel,
    .dashboard-panel,
    .summary-card,
    .course-card,
    .batch-card,
    .student-directory-card,
    .batch-student-item,
    .lesson-item,
    .material-item,
    .coupon-item,
    .material-card,
    .overview-metrics > div,
    .status-chart,
    .form-live-preview,
    .preview-form-card,
    .panel-subpanel,
    .builder-fields-panel,
    .builder-field-item,
    .students-table-wrap,
    .student-action-menu-panel,
    .student-action-menu-toggle,
    .app-modal-card,
    .forms-toolbar,
    .course-workspace-tabs,
    .admission-form-card,
    .coupon-insight-card,
    .registration-record-card
) {
    color: #172049 !important;
}

html:not([data-theme="dark"]) :is(
    .panel-header h1,
    .panel-header h2,
    .panel-header h3,
    .summary-card > strong,
    .overview-metrics strong,
    .activity-copy strong,
    .course-card-body > h3,
    .lesson-item-content strong,
    .material-info strong,
    .builder-field-copy strong,
    .published-form-head h3,
    .coupon-insight-code,
    .registration-name-cell strong
),
html[data-theme="light"] :is(
    .panel-header h1,
    .panel-header h2,
    .panel-header h3,
    .summary-card > strong,
    .overview-metrics strong,
    .activity-copy strong,
    .course-card-body > h3,
    .lesson-item-content strong,
    .material-info strong,
    .builder-field-copy strong,
    .published-form-head h3,
    .coupon-insight-code,
    .registration-name-cell strong
) {
    color: #101739 !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not([data-theme="dark"]) :is(
    .dashboard-subtitle,
    .panel-header p,
    .overview-metrics span,
    .activity-copy small,
    .course-description,
    .lesson-item-content small,
    .material-info small,
    .builder-field-copy small,
    .published-form-meta,
    .coupon-insight-subtitle,
    .registration-contact-cell,
    .registration-date-cell,
    .form-helper
),
html[data-theme="light"] :is(
    .dashboard-subtitle,
    .panel-header p,
    .overview-metrics span,
    .activity-copy small,
    .course-description,
    .lesson-item-content small,
    .material-info small,
    .builder-field-copy small,
    .published-form-meta,
    .coupon-insight-subtitle,
    .registration-contact-cell,
    .registration-date-cell,
    .form-helper
) {
    color: #53658d !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Inputs and tables must never inherit a white foreground in day mode. */
html:not([data-theme="dark"]) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    table,
    .responsive-table
),
html[data-theme="light"] :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    table,
    .responsive-table
) {
    color: #172049 !important;
}

html:not([data-theme="dark"]) th,
html[data-theme="light"] th {
    color: #53658d !important;
}

html:not([data-theme="dark"]) td,
html[data-theme="light"] td {
    color: #22305f !important;
}

/* Dark / night mode: remove the remaining legacy light surfaces. */
html[data-theme="dark"] :is(
    .overview-metrics > div,
    .form-live-preview,
    .panel-subpanel,
    .batch-card-initial,
    .student-avatar,
    .course-thumb,
    .students-table-wrap,
    .student-directory-card,
    .batch-student-item,
    .custom-field-builder,
    .empty-state
) {
    color: #dceaff !important;
    background: #0a192b !important;
    border-color: rgba(109,176,222,.14) !important;
}

html[data-theme="dark"] :is(
    .overview-metrics > div strong,
    .panel-subpanel strong,
    .form-live-preview strong,
    .student-directory-card strong,
    .batch-student-item strong
) {
    color: #f4f8ff !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] :is(
    .overview-metrics > div span,
    .panel-subpanel small,
    .form-live-preview p,
    .student-directory-card small,
    .batch-student-item small
) {
    color: #91aac8 !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] .course-thumb {
    background: linear-gradient(135deg, #0a1b2f, #0b2639) !important;
}

html[data-theme="dark"] :is(.batch-card-initial,.student-avatar) {
    color: #65ddff !important;
    background: linear-gradient(145deg, #0d2942, #0a2036) !important;
    border-color: #1b4767 !important;
}

/* ---------- Concept 02: truly blue dark theme ---------- */
html[data-theme="dark"] {
    --page: #040b15;
    --surface: #081524;
    --surface-soft: rgba(8,21,36,.94);
    --surface-muted: #0b1b2e;
    --concept-header: rgba(4,12,22,.94);
    --concept-sidebar: #050f1d;
    --concept-sidebar-text: #91a8c5;
    --concept-sidebar-active: rgba(21,126,190,.20);
    --concept-card: #0a192b;
    --concept-card-strong: #0b1c30;
    --concept-input: #091a2c;
    --concept-input-border: #1b3b58;
    --concept-muted-panel: #0a1a2c;
    --concept-bottom-nav: rgba(4,13,24,.98);
    --concept-accent: #21aef0;
    --concept-accent-2: #4bd8ff;
    --concept-positive: #53d9ff;
    --emerald-600: #22b9ef;
    --emerald-500: #45cef6;
    --emerald-100: #0c3048;
    --border: rgba(115,183,229,.13);
    --border-strong: rgba(115,183,229,.22);
    --border-glow: rgba(59,201,255,.30);
}

html[data-theme="dark"] body {
    color: #e8f2ff;
    background: #040b15 !important;
}

html[data-theme="dark"] body::before {
    background:
        radial-gradient(66% 52% at 84% -10%, rgba(25,128,198,.16), transparent 68%),
        radial-gradient(46% 44% at -8% 42%, rgba(42,197,247,.08), transparent 70%),
        linear-gradient(180deg, #040b15 0%, #06111f 100%) !important;
}

html[data-theme="dark"] :is(h1,h2,h3,h4,strong) {
    color: #f4f8ff;
}

html[data-theme="dark"] :is(.muted,.student-muted,.dashboard-subtitle,small,.form-helper) {
    color: #8fa7c5;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .panel-link,
html[data-theme="dark"] .student-profile-kicker {
    color: #4bd8ff !important;
}

/* ---------- Eliminate legacy white surfaces in dark mode ---------- */
html[data-theme="dark"] :is(
    .panel,
    .admin-panel,
    .dashboard-panel,
    .summary-card,
    .student-panel,
    .student-profile-card,
    .course-card,
    .batch-card,
    .registration-panel,
    .admission-form-card,
    .coupon-insight-card,
    .registration-record-card,
    .material-card,
    .lesson-item,
    .material-item,
    .coupon-item,
    .batch-student-row,
    .preview-form-card,
    .builder-fields-panel,
    .student-dashboard-lesson,
    .student-lesson-button,
    .student-material-card,
    .student-player-panel,
    .student-selected-description,
    .student-selected-description-block,
    .responsive-table,
    .app-modal-card,
    .student-action-menu-panel
) {
    color: #dceaff !important;
    background: #0a192b !important;
    border-color: rgba(109,176,222,.14) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] :is(
    .activity-row,
    .quick-action,
    .status-chart,
    .batch-student-summary,
    .preview-field,
    .builder-field-item,
    .coupon-metric,
    .published-form-meta-chip,
    .registration-price-banner,
    .registration-success-amount,
    .student-profile-meta > div,
    .batch-card-metrics > span,
    .course-card-meta > span,
    .course-meta-row > span,
    .course-meta-detail > span,
    .student-course-meta > span,
    .coupon-user-chip,
    .registration-trust-chip
) {
    color: #bfd2e8 !important;
    background: #0c1e32 !important;
    border-color: rgba(104,174,220,.14) !important;
}

html[data-theme="dark"] :is(
    .forms-toolbar,
    .course-workspace-tabs,
    .dashboard-date,
    .student-action-menu-toggle
) {
    color: #cfe1f4 !important;
    background: #09192b !important;
    border-color: rgba(109,176,222,.16) !important;
}

html[data-theme="dark"] :is(
    .forms-tab.active,
    .course-workspace-tabs button.active
) {
    color: #dff8ff !important;
    background: rgba(24,166,225,.16) !important;
    border-color: rgba(74,210,255,.18) !important;
}

html[data-theme="dark"] :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .dashboard-search
) {
    color: #edf6ff !important;
    background: #081a2d !important;
    border-color: #1a3a56 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] :is(input,textarea)::placeholder {
    color: #6983a3 !important;
    opacity: 1;
}

html[data-theme="dark"] select option {
    color: #edf6ff;
    background: #081a2d;
}

html[data-theme="dark"] :is(table,.responsive-table) {
    color: #dceaff !important;
    background: #09192a !important;
}

html[data-theme="dark"] th {
    color: #91aac8 !important;
    background: #0d2035 !important;
    border-color: #173751 !important;
}

html[data-theme="dark"] td {
    color: #cfdef0 !important;
    background: transparent !important;
    border-color: #16344d !important;
}

html[data-theme="dark"] .students-table-wrap tr {
    background: #0a192b !important;
    border-color: #173751 !important;
}

html[data-theme="dark"] .student-action-menu-panel {
    background: #071626 !important;
}

html[data-theme="dark"] .student-action-menu-toggle,
html[data-theme="dark"] .student-menu-action {
    color: #61d7ff !important;
    background: #0b1d31 !important;
    border-color: #1c405e !important;
}

/* ---------- Dashboard visual pieces ---------- */
html[data-theme="dark"] .status-chart-track {
    background: #14283c !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .status-chart-track > span {
    background: linear-gradient(90deg, #198ed0, #4bd8ff) !important;
    box-shadow: 0 0 14px rgba(39,185,237,.24) !important;
}

html[data-theme="dark"] .batch-ring {
    background: conic-gradient(#2bbdf1 0 var(--batch-active, 72%), #14283c var(--batch-active, 72%) 100%) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.25) !important;
}

html[data-theme="dark"] .batch-ring:hover {
    box-shadow: 0 10px 34px rgba(32,171,225,.16) !important;
}

html[data-theme="dark"] .batch-ring::after {
    background: #0a192b !important;
}

html[data-theme="dark"] .legend-dot.active {
    background: #48d4ff !important;
    box-shadow: 0 0 0 3px rgba(72,212,255,.10), 0 0 8px rgba(72,212,255,.20) !important;
}

/* ---------- Blue status system instead of green in Concept 02 ---------- */
html[data-theme="dark"] :is(
    .student-header-status,
    .student-profile-status,
    .student-profile-status.is-active,
    .student-status-badge.is-active,
    .batch-status.active,
    .batch-status.is-active,
    .published-form-status,
    .published-form-status.is-published,
    .coupon-status-badge.is-active,
    .coupon-status-badge.is-available,
    .course-price-pill,
    .registration-coupon-message.success,
    .registration-savings
) {
    color: #59dbff !important;
    background: rgba(29,166,222,.12) !important;
    border-color: rgba(76,211,255,.18) !important;
}

html[data-theme="dark"] .registration-success-amount,
html[data-theme="dark"] .registration-success {
    background: #0b1d31 !important;
    border-color: #19405f !important;
}

html[data-theme="dark"] .registration-success-icon {
    color: #04131f !important;
    background: linear-gradient(135deg, #57ddff, #21aef0) !important;
}

/* ---------- Registration page ---------- */
html[data-theme="dark"] .registration-body,
html[data-theme="dark"] .registration-page {
    background: transparent !important;
}

html[data-theme="dark"] .registration-hero {
    color: #dceaff !important;
    background:
        radial-gradient(55% 72% at 96% 0%, rgba(33,174,240,.16), transparent 70%),
        radial-gradient(45% 62% at 0% 100%, rgba(75,216,255,.07), transparent 72%),
        #081727 !important;
    border-color: #173750 !important;
}

html[data-theme="dark"] .registration-coupon-button,
html[data-theme="dark"] .registration-success .student-secondary-button {
    color: #dcecff !important;
    background: #0b1d31 !important;
    border-color: #1a405e !important;
}

/* ---------- Student experience ---------- */
html[data-theme="dark"] .student-profile-avatar {
    border-color: #12314a !important;
    background: linear-gradient(145deg, #198fd0, #2459d8) !important;
    box-shadow: 0 8px 24px rgba(16,98,171,.22) !important;
}

html[data-theme="dark"] .student-profile-avatar::after {
    border-color: #0a192b !important;
    background: #4bd8ff !important;
}

html[data-theme="dark"] :is(
    .student-course-image,
    .student-course-hero-image,
    .student-dashboard-lesson-thumbnail,
    .student-lesson-thumbnail,
    .lesson-item-thumbnail,
    .thumbnail-upload-preview,
    .lesson-thumbnail-preview
) {
    background: #071625 !important;
    border-color: #173650 !important;
}

html[data-theme="dark"] .student-video-player,
html[data-theme="dark"] .video-player-shell,
html[data-theme="dark"] .video-player-stage {
    background: #020914 !important;
}

html[data-theme="dark"] .video-player-toolbar {
    background: #071626 !important;
    border-color: #173750 !important;
}

html[data-theme="dark"] :is(.video-control-button,.video-control-link,.video-speed-select) {
    color: #dceaff !important;
    background: #0b1d31 !important;
    border-color: #1a405e !important;
}

/* ---------- Login/modal surfaces ---------- */
html[data-theme="dark"] :is(.auth-form,.login-card,.student-login-card,.app-modal-card) {
    color: #dceaff !important;
    background: #09192b !important;
    border-color: #183a57 !important;
}

html[data-theme="dark"] .app-modal-close {
    color: #dceaff !important;
    background: #0d2035 !important;
    border-color: #1b405d !important;
}

html[data-theme="dark"] .student-login-page,
html[data-theme="dark"] .student-login-workspace {
    background: #040b15 !important;
}

/* ---------- Mobile/tablet alignment ---------- */
@media (max-width: 1080px) and (min-width: 721px) {
    html.theme-ready .admin-main {
        margin-left: 0 !important;
        padding-inline: 13px 18px;
    }

    html.theme-ready .student-main {
        padding-inline: 13px 18px;
    }

    html.theme-ready .admin-header,
    html.theme-ready .student-header {
        gap: 10px;
    }
}

@media (max-width: 720px) {
    html.theme-ready .admin-main {
        margin-left: 0 !important;
    }

    /* Bottom navigation icons + labels are centered as a unit. */
    html.theme-ready .admin-sidebar,
    html.theme-ready .student-sidebar {
        align-items: stretch;
    }

    html.theme-ready .sidebar-nav a,
    html.theme-ready .student-sidebar-nav a,
    html.theme-ready .admin-sidebar > #admin-logout-button,
    html.theme-ready .student-sidebar > #student-logout-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center;
        line-height: 1.05;
    }

    html.theme-ready .sidebar-nav a > :is(.adullam-svg-icon,svg.lucide),
    html.theme-ready .student-sidebar-nav a > :is(.adullam-svg-icon,svg.lucide),
    html.theme-ready .admin-sidebar > #admin-logout-button > :is(.adullam-svg-icon,svg.lucide),
    html.theme-ready .student-sidebar > #student-logout-button > :is(.adullam-svg-icon,svg.lucide) {
        width: 18px !important;
        height: 18px !important;
    }

    html.theme-ready .sidebar-nav a > span,
    html.theme-ready .student-sidebar-nav a > span,
    html.theme-ready .admin-sidebar > #admin-logout-button > span,
    html.theme-ready .student-sidebar > #student-logout-button > span {
        display: block !important;
        max-width: 100%;
        overflow: hidden;
        font-size: .49rem !important;
        font-weight: 760;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Admin logout belongs to the bottom nav, not as a floating icon. */
    html.theme-ready .admin-sidebar > #admin-logout-button {
        position: static !important;
        inset: auto !important;
        flex: 0 0 52px !important;
        width: 52px !important;
        height: auto !important;
        min-height: 55px !important;
        margin: 0 !important;
        padding: 5px 2px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html.theme-ready .student-sidebar > #student-logout-button {
        position: static !important;
        min-height: 55px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Action buttons retain readable labels instead of floating icons. */
    html.theme-ready .course-card-actions,
    html.theme-ready .published-form-actions {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    html.theme-ready .batch-card-actions {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    html.theme-ready :is(
        .course-card-actions,
        .batch-card-actions,
        .published-form-actions
    ) .compact-icon-action {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 6px 8px !important;
    }

    html.theme-ready :is(
        .course-card-actions,
        .batch-card-actions,
        .published-form-actions
    ) .compact-icon-action .action-label {
        display: inline !important;
        min-width: 0;
        overflow: hidden;
        font-size: .51rem !important;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-theme="dark"] .admin-sidebar,
    html[data-theme="dark"] .student-sidebar {
        background: #050f1d !important;
        border-top-color: #15334d !important;
    }

    html[data-theme="dark"] .sidebar-nav a,
    html[data-theme="dark"] .student-sidebar-nav a {
        color: #8fa8c6 !important;
    }

    html[data-theme="dark"] .sidebar-nav a.active,
    html[data-theme="dark"] .student-sidebar-nav a.active {
        color: #62ddff !important;
        background: rgba(30,155,211,.13) !important;
    }

    html[data-theme="dark"] .admin-sidebar > #admin-logout-button,
    html[data-theme="dark"] .student-sidebar > #student-logout-button {
        color: #ff8094 !important;
    }
}

/* =========================================================
   MOBILE BOTTOM NAV — ACTIVE ICON STABILITY FIX
   Admin + Student only. UI-only; no application logic change.
   Keeps selected icons visible, centered and unclipped.
   ========================================================= */
@media (max-width: 720px) {
    html.theme-ready .sidebar-nav a,
    html.theme-ready .student-sidebar-nav a {
        position: relative !important;
        overflow: visible !important;
        isolation: isolate;
    }

    /* Keep the icon as a fixed-size visual element so the active
       indicator cannot push or compress it inside the flex column. */
    html.theme-ready .sidebar-nav a > :is(svg.adullam-svg-icon, svg.lucide),
    html.theme-ready .student-sidebar-nav a > :is(svg.adullam-svg-icon, svg.lucide) {
        display: block !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        overflow: visible !important;
        color: inherit !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    html.theme-ready .sidebar-nav a > svg.adullam-svg-icon,
    html.theme-ready .student-sidebar-nav a > svg.adullam-svg-icon {
        stroke: currentColor;
    }

    html.theme-ready .sidebar-nav a.active,
    html.theme-ready .student-sidebar-nav a.active {
        color: var(--concept-accent) !important;
        overflow: visible !important;
    }

    html.theme-ready .sidebar-nav a.active > :is(svg.adullam-svg-icon, svg.lucide),
    html.theme-ready .student-sidebar-nav a.active > :is(svg.adullam-svg-icon, svg.lucide) {
        color: var(--concept-accent) !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* The selected indicator is positioned independently rather than
       becoming a third flex item below icon + text. */
    html.theme-ready .sidebar-nav a.active::after,
    html.theme-ready .student-sidebar-nav a.active::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 2px !important;
        width: 18px !important;
        height: 2px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: currentColor !important;
        box-shadow: none !important;
        transform: translateX(-50%) !important;
        pointer-events: none;
    }

    html.theme-ready .sidebar-nav a > span,
    html.theme-ready .student-sidebar-nav a > span {
        flex: 0 0 auto;
        line-height: 1.05 !important;
    }

    /* Explicit active colors for reliable contrast in both themes. */
    html[data-theme="light"].theme-ready .sidebar-nav a.active,
    html[data-theme="light"].theme-ready .student-sidebar-nav a.active {
        color: #5148df !important;
        background: #eeecff !important;
    }

    html[data-theme="dark"].theme-ready .sidebar-nav a.active,
    html[data-theme="dark"].theme-ready .student-sidebar-nav a.active {
        color: #67e8f9 !important;
        background: rgba(24, 182, 230, .14) !important;
    }
}

/* =========================================================
   Logout icon color fix — Admin + Student, light + dark
   Keeps Lucide logout icon visibly red instead of inheriting
   white/current navigation icon colors on mobile.
   ========================================================= */
html.theme-ready #admin-logout-button,
html.theme-ready #student-logout-button {
    color: #dc2626 !important;
}

html.theme-ready #admin-logout-button > svg,
html.theme-ready #student-logout-button > svg,
html.theme-ready #admin-logout-button > svg.lucide,
html.theme-ready #student-logout-button > svg.lucide {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
    fill: none !important;
}

html.theme-ready #admin-logout-button > svg *,
html.theme-ready #student-logout-button > svg * {
    stroke: #dc2626 !important;
}

html[data-theme="dark"].theme-ready #admin-logout-button,
html[data-theme="dark"].theme-ready #student-logout-button {
    color: #ff6376 !important;
}

html[data-theme="dark"].theme-ready #admin-logout-button > svg,
html[data-theme="dark"].theme-ready #student-logout-button > svg,
html[data-theme="dark"].theme-ready #admin-logout-button > svg.lucide,
html[data-theme="dark"].theme-ready #student-logout-button > svg.lucide {
    color: #ff6376 !important;
    stroke: #ff6376 !important;
    fill: none !important;
}

html[data-theme="dark"].theme-ready #admin-logout-button > svg *,
html[data-theme="dark"].theme-ready #student-logout-button > svg * {
    stroke: #ff6376 !important;
}


/* =========================================================
   ADULLAM OFFICIAL EAGLE BRAND — SEPTEMBER 2026
   UI-only branding. No application functionality is changed.
   ========================================================= */
.brand-mark,
.student-brand-mark,
.student-login-mobile-brand,
.redirect-mark {
    background: transparent url("../assets/adullam-logo.webp") center / contain no-repeat !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(80, 52, 12, .14) !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.brand-mark,
.student-brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
}

.sidebar-brand,
.student-sidebar-brand {
    align-items: center !important;
}

.registration-brand .student-brand-mark {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
}

/* Large, centered logo above both login forms. */
.auth-brand-logo {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
    object-position: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 8px 18px rgba(20, 14, 6, .18));
}

.login-brand.login-brand-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 16px;
    text-align: center;
}

.login-brand.login-brand-stacked > div {
    width: 100%;
    text-align: center;
}

.login-brand.login-brand-stacked .eyebrow,
.login-brand.login-brand-stacked h1 {
    text-align: center;
}

.student-login-heading .auth-brand-logo {
    width: 96px;
    height: 96px;
    margin-bottom: 15px;
}

@media (max-width: 900px) {
    .brand-mark,
    .student-brand-mark {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }

    .auth-brand-logo,
    .student-login-heading .auth-brand-logo {
        width: 82px;
        height: 82px;
    }
}

@media (max-width: 520px) {
    .registration-brand .student-brand-mark {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
    }

    .auth-brand-logo,
    .student-login-heading .auth-brand-logo {
        width: 76px;
        height: 76px;
        margin-bottom: 12px;
    }
}

/* =========================================================
   MOBILE SHELL VISIBILITY FIX — SEPTEMBER 2026
   Fixes a cascade conflict where the shared desktop theme
   restored 100dvh sidebar height after the Admin/Student
   mobile CSS had converted the sidebar to a bottom nav.
   UI-only: no auth/data/navigation functionality changed.
   ========================================================= */
@media (max-width: 720px) {
    /* Keep page content in the normal document flow and visibly above nav. */
    html.theme-ready .admin-shell,
    html.theme-ready .student-shell {
        display: block !important;
        width: 100% !important;
        min-height: 100dvh !important;
    }

    html.theme-ready .admin-main,
    html.theme-ready .student-main {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Admin sidebar must be a bottom bar, never a full-screen layer. */
    html.theme-ready .admin-sidebar {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--admin-bottom-nav-h) + var(--safe-bottom)) !important;
        min-height: 0 !important;
        max-height: calc(var(--admin-bottom-nav-h) + var(--safe-bottom)) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 5px max(7px, var(--safe-right)) max(5px, var(--safe-bottom)) max(7px, var(--safe-left)) !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-top: 1px solid var(--border) !important;
        z-index: 80 !important;
    }

    /* Student sidebar uses the same bottom-nav behavior with its own height. */
    html.theme-ready .student-sidebar {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--student-bottom-nav-h) + var(--safe-bottom)) !important;
        min-height: 0 !important;
        max-height: calc(var(--student-bottom-nav-h) + var(--safe-bottom)) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 2px !important;
        padding: 5px max(7px, var(--safe-right)) max(5px, var(--safe-bottom)) max(7px, var(--safe-left)) !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-top: 1px solid var(--border) !important;
        z-index: 80 !important;
    }

    /* Constrain the nav itself to the bar height so selected backgrounds
       cannot stretch vertically across the page. */
    html.theme-ready .sidebar-nav,
    html.theme-ready .student-sidebar-nav {
        align-self: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    html.theme-ready .sidebar-nav a,
    html.theme-ready .student-sidebar-nav a,
    html.theme-ready .admin-sidebar > #admin-logout-button,
    html.theme-ready .student-sidebar > #student-logout-button {
        height: auto !important;
        min-height: 54px !important;
        max-height: 58px !important;
        align-self: center !important;
    }

    /* Reserve clear space below content for the fixed bottom navigation. */
    body:has(.admin-shell) {
        padding-bottom: calc(var(--admin-bottom-nav-h) + var(--safe-bottom) + 16px) !important;
    }

    body:has(.student-shell) {
        padding-bottom: calc(var(--student-bottom-nav-h) + var(--safe-bottom) + 16px) !important;
    }
}