/* ==========================================================================
   LRN "Midnight" Theme  —  near-black, flat, minimal (matched to aired.com).
   Scoped entirely under [data-theme="midnight"] so it is inert unless active.
   Recolors framework CSS variables + flattens the bright modern accents
   (gradient card headers, glows) for a deep, calm dark look. Modern pages only.
   ========================================================================== */

[data-theme="midnight"] {
    /* Accent — clean blue (like aired.com) */
    --lrn-primary: #4a8cff;
    --lrn-primary-dark: #3b78ed;
    --lrn-primary-light: #74a6ff;
    --lrn-primary-rgb: 74, 140, 255;
    --lrn-secondary: #8a93ad;
    --lrn-brand-primary: #4a8cff;
    --lrn-brand-primary-dark: #3b78ed;
    --lrn-brand-primary-light: #74a6ff;
    --lrn-brand-secondary: #4a8cff;

    /* Backgrounds — true near-black */
    --lrn-bg-primary: #030409;
    --lrn-bg-secondary: #06080e;
    --lrn-bg-tertiary: #0a0d14;
    --lrn-bg-elevated: #0f131c;
    --lrn-bg-overlay: rgba(2, 3, 6, 0.99);
    --lrn-bg-hover: rgba(74, 140, 255, 0.06);
    --lrn-bg-primary-rgb: 3, 4, 9;
    --lrn-bg-secondary-rgb: 6, 8, 14;
    --lrn-bg-tertiary-rgb: 10, 13, 20;

    /* Cards — flat, near-black, separated by a faint hairline (no gradients) */
    --lrn-card-bg: #080a10;
    --lrn-card-bg-hover: #0c0f17;
    --lrn-card-border: rgba(140, 160, 200, 0.10);

    /* Text — near-white over deep black */
    --lrn-text-primary: #e6ecf5;
    --lrn-text-secondary: #97a0b0;
    --lrn-text-muted: #646d80;
    --lrn-text-inverse: #06080e;

    /* Borders */
    --lrn-border-color: #181d28;
    --lrn-border-light: #0f131c;
    --lrn-border-dark: #232a38;
    --lrn-border-primary: rgba(74, 140, 255, 0.16);
    --lrn-border-secondary: rgba(140, 160, 200, 0.10);

    /* Shadows — deep black, no colored glow */
    --lrn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --lrn-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.72);
    --lrn-shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.85);
    --lrn-shadow-primary: 0 6px 18px rgba(74, 140, 255, 0.18);
    --lrn-shadow-glow: none;

    /* Gradients — flatten everything except the primary button */
    --lrn-gradient-primary: linear-gradient(135deg, #4a8cff 0%, #3b78ed 100%);
    --lrn-gradient-secondary: none;
    --lrn-gradient-card: none;
    --lrn-gradient-mesh: none;
}

/* Page body: true near-black with a single, faint top vignette (like aired) */
[data-theme="midnight"] body {
    background-color: #030409;
    background-image: radial-gradient(1200px 720px at 50% -12%, rgba(36, 58, 110, 0.08), transparent 62%);
    background-attachment: fixed;
}
[data-theme="midnight"] .lrn-main-content {
    background: transparent !important;
}

/* THE key fix: flatten the bright gradient card headers to flat dark bars. */
[data-theme="midnight"] .lrn-card-header {
    background: #080a11 !important;
    border-bottom: 1px solid var(--lrn-border-color) !important;
}
[data-theme="midnight"] .lrn-card-header,
[data-theme="midnight"] .lrn-card-header h1,
[data-theme="midnight"] .lrn-card-header h2,
[data-theme="midnight"] .lrn-card-header h3,
[data-theme="midnight"] .lrn-card-header i {
    color: var(--lrn-text-primary) !important;
}

/* Cards: flat near-black with hairline border */
[data-theme="midnight"] .lrn-card,
[data-theme="midnight"] .card,
[data-theme="midnight"] .card-modern {
    background: var(--lrn-card-bg) !important;
    border: 1px solid var(--lrn-card-border) !important;
    box-shadow: var(--lrn-shadow-sm);
}

/* Primary buttons keep a clean blue; secondary stay dark with a border */
[data-theme="midnight"] .btn-primary,
[data-theme="midnight"] .btn-primary-modern {
    background: var(--lrn-gradient-primary);
    border: none;
    color: #fff;
    font-weight: 600;
}
[data-theme="midnight"] .btn-primary:hover,
[data-theme="midnight"] .btn-primary-modern:hover {
    box-shadow: var(--lrn-shadow-primary);
    filter: brightness(1.06);
}
[data-theme="midnight"] .btn-secondary {
    background: #10141d;
    border: 1px solid var(--lrn-border-dark);
    color: var(--lrn-text-primary);
}

/* Inputs sit slightly below card black */
[data-theme="midnight"] .form-control,
[data-theme="midnight"] input[type="text"],
[data-theme="midnight"] input[type="number"],
[data-theme="midnight"] input[type="password"],
[data-theme="midnight"] input[type="email"],
[data-theme="midnight"] select,
[data-theme="midnight"] textarea {
    background-color: #020308;
    border-color: var(--lrn-border-color);
    color: var(--lrn-text-primary);
}
[data-theme="midnight"] .form-control:focus {
    border-color: var(--lrn-primary);
    box-shadow: 0 0 0 3px rgba(74, 140, 255, 0.15);
}

/* Top nav + sidebar blend into the black */
[data-theme="midnight"] .lrn-admin-header {
    background: #040509;
    border-bottom: 1px solid var(--lrn-border-color);
}

/* Dark version of the animated "wave" background. The default waves are bright
   blue (rgba(74,158,255,…)) which washes the page lighter. Keep the slow motion
   but recolor to deep, dim tints so it stays calm and near-black. */
[data-theme="midnight"] .wave,
[data-theme="midnight"] .lrn-bg-wave {
    background: rgba(34, 54, 104, 0.05) !important;
}
[data-theme="midnight"] .wave1,
[data-theme="midnight"] .lrn-bg-wave:nth-child(1) {
    background: rgba(34, 54, 104, 0.06) !important;
}
[data-theme="midnight"] .wave2,
[data-theme="midnight"] .lrn-bg-wave:nth-child(2) {
    background: rgba(26, 38, 78, 0.045) !important;
}
[data-theme="midnight"] .wave3,
[data-theme="midnight"] .lrn-bg-wave:nth-child(3) {
    background: rgba(46, 38, 92, 0.05) !important;
}