/* ============================================================
   DarkMode.css -- global dark-theme layer.
   Loaded last, on every page, via both _Layout.cshtml/_Layout2.cshtml, so
   its [data-theme="dark"] rules win in the cascade without fighting
   page-specific stylesheet specificity.

   Two-tier strategy:
   1. Most of the site's color system already runs on CSS custom
      properties (subscription.css's --bg/--ink/--surface/--border, loaded
      on every page) or plain Bootstrap components (.card/.table/.alert/
      .form-control -- used raw across ~40 views: Admin, Login/Register,
      Board, Dashboard). Redefining those variables/component colors here
      covers most of the site in one place.
   2. Page-specific stylesheets with no variable system of their own
      (CardTest.css, Account.css, Articles.css -- fully hardcoded hex) get
      their own small [data-theme="dark"] blocks appended directly to
      those files instead, so each stylesheet's dark rules stay next to
      the light rules they override.

   Accent colors (the brand gold #d4af37 and purple #6b3fa0/#4a2d6b family)
   are deliberately left alone in most places -- they already read well
   against a dark background (this is the same palette the hero-banner
   dark-indigo treatment already used), so only backgrounds/surfaces/body
   text/borders actually need a dark-mode value.
   ============================================================ */

:root[data-theme="dark"] {
    /* ---- subscription.css's global palette (loaded on every page) ---- */
    --bg: #1c1330;
    --surface: #2a1f42;
    --surface-alt: #241a38;
    --border: #4a3a63;
    --border-strong: #5e4a7c;
    --ink: #f0eaf7;
    --ink-muted: #c9bcd8;
    --ink-faint: #9987ac;

    /* ---- Home.css's brand palette ---- */
    --tarot-cream-50: #241a38;
    --tarot-lavender-50: #2a1f42;
    --tarot-ink: #f0eaf7;
    --tarot-ink-light: #c9bcd8;

    /* ---- CardLibrary.css's own copy of the same palette ---- */
    --lib-cream-50: #241a38;
    --lib-lavender-50: #2a1f42;
    --lib-ink: #f0eaf7;
    --lib-ink-light: #c9bcd8;

    /* ---- Bootstrap primitives ---- */
    --bs-body-bg: #1c1330;
    --bs-body-color: #f0eaf7;
    --bs-border-color: #4a3a63;
    --bs-border-color-translucent: rgba(240, 234, 247, 0.15);
    --bs-secondary-bg: #2a1f42;
    --bs-tertiary-bg: #241a38;
    --bs-emphasis-color: #fffdf8;
    --bs-heading-color: #f0eaf7;
    --bs-link-color: #d9b3ff;
    --bs-link-hover-color: #e8cd7a;
}

/* ---- Base page background/text (subscription.css's body rule already
   reads --bg/--ink, so this just needs the variables above -- but the
   background-image radial gradients on body use hardcoded rgba tints
   tuned for a light page, so those get a dark-appropriate version here). */
[data-theme="dark"] body {
    background-image: radial-gradient(ellipse 60% 40% at 15% 10%, rgba(204, 121, 220, 0.10) 0%, transparent 70%), radial-gradient(ellipse 50% 35% at 85% 90%, rgba(139, 196, 67, 0.08) 0%, transparent 70%);
}

/* ---- Nav: the light-lavender bar (subscription.css's .navbar.bg-purple)
   would clash badly against a dark page -- a deep-plum bar with the same
   gold-accented language as the hero banner reads as part of the same
   family instead. */
[data-theme="dark"] .navbar.bg-purple {
    background-color: #241a38 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

    [data-theme="dark"] .navbar.bg-purple .nav-link {
        color: #e8dcf2;
    }

        [data-theme="dark"] .navbar.bg-purple .nav-link:hover,
        [data-theme="dark"] .navbar.bg-purple .nav-link:focus {
            color: #e8cd7a;
        }

    [data-theme="dark"] .navbar.bg-purple .navbar-toggler {
        border-color: rgba(232, 205, 122, 0.4);
    }

    [data-theme="dark"] .navbar.bg-purple .navbar-toggler-icon {
        filter: invert(1);
    }

    /* Dropdown submenus (Practice Readings / Lessons / Your Journey) --
       Bootstrap's dropdown-menu defaults to a light popup, which would
       read as a jarring light rectangle against this dark nav/page. */
    [data-theme="dark"] .navbar.bg-purple .dropdown-menu {
        background-color: #241a38;
        border-color: rgba(212, 175, 55, 0.2);
    }

        [data-theme="dark"] .navbar.bg-purple .dropdown-item {
            color: #e8dcf2;
        }

            [data-theme="dark"] .navbar.bg-purple .dropdown-item:hover,
            [data-theme="dark"] .navbar.bg-purple .dropdown-item:focus {
                background-color: rgba(232, 205, 122, 0.12);
                color: #e8cd7a;
            }

/* ---- Theme toggle button ---- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 8px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(74, 45, 107, 0.25);
    border-radius: 50%;
    color: #4a2d6b;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .theme-toggle-btn:hover {
        background: rgba(107, 63, 160, 0.1);
    }

    .theme-toggle-btn .icon-moon {
        display: inline-block;
    }

    .theme-toggle-btn .icon-sun {
        display: none;
    }

[data-theme="dark"] .theme-toggle-btn {
    color: #e8cd7a;
    border-color: rgba(232, 205, 122, 0.4);
}

    [data-theme="dark"] .theme-toggle-btn:hover {
        background: rgba(232, 205, 122, 0.12);
    }

    [data-theme="dark"] .theme-toggle-btn .icon-moon {
        display: none;
    }

    [data-theme="dark"] .theme-toggle-btn .icon-sun {
        display: inline-block;
    }

/* ---- Bootstrap .card (Login/Register/Settings/Admin forms, Dashboard
   panels -- used raw, with no page-specific override, across ~40 views) */
[data-theme="dark"] .card {
    --bs-card-bg: #2a1f42;
    --bs-card-color: #f0eaf7;
    --bs-card-border-color: #4a3a63;
    --bs-card-cap-bg: #241a38;
    --bs-card-cap-color: #f0eaf7;
}

/* ---- Bootstrap tables (Admin lists, Dashboard progress table) ---- */
[data-theme="dark"] .table {
    --bs-table-color: #f0eaf7;
    --bs-table-bg: transparent;
    --bs-table-border-color: #4a3a63;
    --bs-table-striped-bg: rgba(240, 234, 247, 0.04);
    --bs-table-striped-color: #f0eaf7;
    --bs-table-hover-bg: rgba(240, 234, 247, 0.06);
    --bs-table-hover-color: #f0eaf7;
}

/* ---- Form controls (no CSS-variable support in Bootstrap 5.2, so these
   need direct overrides -- used on every login/register/settings/admin
   form site-wide) ---- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #241a38;
    color: #f0eaf7;
    border-color: #4a3a63;
}

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus {
        background-color: #241a38;
        color: #f0eaf7;
        border-color: #6b3fa0;
    }

    [data-theme="dark"] .form-control::placeholder {
        color: #9987ac;
    }

    [data-theme="dark"] .form-control:disabled,
    [data-theme="dark"] .form-select:disabled {
        background-color: #1c1330;
        color: #9987ac;
    }

[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: #f0eaf7;
}

[data-theme="dark"] .form-text {
    color: #c9bcd8;
}

/* ---- Alerts (TempData success/error/warning banners, used everywhere) */
[data-theme="dark"] .alert-info {
    background-color: rgba(107, 63, 160, 0.18);
    color: #e8dcf2;
    border-color: rgba(107, 63, 160, 0.4);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(46, 125, 50, 0.22);
    color: #b8e6bb;
    border-color: rgba(46, 125, 50, 0.5);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(192, 57, 43, 0.22);
    color: #f3b8b1;
    border-color: rgba(192, 57, 43, 0.5);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(176, 141, 0, 0.22);
    color: #f0dd9a;
    border-color: rgba(176, 141, 0, 0.5);
}

/* ---- Modals, list-groups, dropdowns (Bootstrap defaults) ---- */
[data-theme="dark"] .modal-content {
    background-color: #2a1f42;
    color: #f0eaf7;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: #4a3a63;
}

[data-theme="dark"] .list-group-item {
    background-color: #2a1f42;
    color: #f0eaf7;
    border-color: #4a3a63;
}

[data-theme="dark"] .dropdown-menu {
    background-color: #2a1f42;
    border-color: #4a3a63;
}

    [data-theme="dark"] .dropdown-item {
        color: #f0eaf7;
    }

        [data-theme="dark"] .dropdown-item:hover,
        [data-theme="dark"] .dropdown-item:focus {
            background-color: rgba(240, 234, 247, 0.08);
            color: #f0eaf7;
        }

/* ---- hr / footer text ---- */
[data-theme="dark"] hr {
    border-color: #4a3a63;
    opacity: 1;
}

[data-theme="dark"] footer,
[data-theme="dark"] footer p {
    color: #9987ac;
}

/* ---- Home.css hero banner & related hardcoded whites ---- */
[data-theme="dark"] .hero-banner {
    background: radial-gradient(ellipse at 25% 15%, rgba(107, 63, 160, 0.22), transparent 60%), radial-gradient(ellipse at 80% 85%, rgba(212, 175, 55, 0.14), transparent 55%), #201636;
    border-color: rgba(212, 175, 55, 0.25);
}

[data-theme="dark"] .hero-logo-frame {
    background: #241a38;
}

[data-theme="dark"] .btn-hero-secondary {
    background: #241a38;
    color: #e8cd7a;
    border-color: rgba(232, 205, 122, 0.35);
}

    [data-theme="dark"] .btn-hero-secondary:hover {
        background: #2a1f42;
        color: #fffdf8;
    }

/* ---- subscription.css's Monthly/Annual plan cards: the gradient uses a
   hardcoded #fff, not var(--surface), so they didn't flip along with the
   Free card and the rest of the page. ---- */
[data-theme="dark"] .plan-monthly {
    background: linear-gradient(160deg, #2a1f42 70%, rgba(204, 121, 220, 0.14) 100%);
}

[data-theme="dark"] .plan-yearly {
    background: linear-gradient(160deg, #2a1f42 60%, rgba(139, 196, 67, 0.14) 100%);
}