/**
 * global-theme.css — Site-wide dark theme enforcement
 *
 * Loaded once from resources/views/app.blade.php, AFTER the Vite bundle, so it wins
 * over page-local styles. Its job is to make EVERY page share the one dark look the
 * rest of the site uses, without editing each page component.
 *
 * Why this is needed:
 *   Many page components ship their own light palette — either hardcoded (#fff) or via
 *   page-local custom properties (--page-surface:#fff, --card-bg:#fff, etc.). Those are
 *   scoped to the page, so the layout dark overrides can't reach them and the page renders
 *   white with unreadable text. This file neutralises that at the root.
 *
 * Strategy (two layers):
 *   1. Re-point the common light palette CUSTOM PROPERTIES to dark values at :root, so any
 *      page that themes itself from those variables flips automatically.
 *   2. Force the dark surface + readable text on the common light CLASS PATTERNS
 *      (cards, panels, page wrappers, content areas) as a safety net.
 *
 * Scope guard: rules are limited to the authenticated app shell (body) and skip the public
 * marketing/auth layouts (.public-layout, .auth-layout) and anything the user explicitly set
 * to light ([data-theme-choice="light"]) so we don't fight intentional light pages.
 *
 * Pure CSS. No Bootstrap, no Tailwind. Semantic selectors only.
 *
 * @since 2026-11-07
 */

/* ============================================================================
   1. PALETTE VARIABLES — re-point common light tokens to the dark palette
   ============================================================================ */
:root:not([data-theme-choice="light"]) {
    /* Generic surface / background tokens used across page components */
    --page-surface: #1a1a2e;
    --page-bg: #0f0f1a;
    --page-border: #2a2a4a;
    --page-text-primary: #ffffff;
    --page-text-secondary: #c0c0d8;
    --page-text-muted: #8888aa;

    /* Card / panel tokens */
    --card-bg: #1a1a2e;
    --card-background: #1a1a2e;
    --card-border: #2a2a4a;
    --panel-bg: #1a1a2e;
    --surface: #1a1a2e;
    --surface-bg: #1a1a2e;

    /* App background tokens (only the light ones; dark theme already sets its own) */
    --content-bg: #0f0f1a;
    --body-bg: #0f0f1a;
    --border-color: #2a2a4a;
    --border: #2a2a4a;
    --text-color: #e0e0e0;
    --text-primary: #ffffff;
    --text-secondary: #c0c0d8;
    --text-muted: #8888aa;
    --heading-color: #ffffff;
    --hover-bg: rgba(99, 102, 241, 0.08);
}

/* ============================================================================
   2. CLASS-PATTERN SAFETY NET — force dark on common light wrappers
   Applies inside the app body, but NOT on public/auth layouts or an explicit
   light choice.
   ============================================================================ */

/* Page-level wrappers and content areas */
body:not(.public-page) :is(
    [class*="-page"],
    [class*="-dashboard"],
    [class*="-content-area"],
    [class*="-container"]
):not(.sidebar-nav):not([class*="sidebar"]) {
    background-color: transparent;
    color: inherit;
}

/* Cards / panels / boxes / surfaces */
body:not(.public-page) :is(
    .card,
    .panel,
    .box,
    .widget,
    .surface,
    [class*="-card"],
    [class*="-panel"],
    [class*="-surface"],
    [class*="-box"]
):not([class*="sidebar"]) {
    background-color: #1a1a2e;
    border-color: #2a2a4a;
    color: #e0e0e0;
}

/* Headings stay bright and readable */
body:not(.public-page) :is(h1, h2, h3, h4):not([class*="sidebar"] *) {
    color: #ffffff;
}

/* Secondary / muted text that would otherwise be pale-on-white */
body:not(.public-page) :is(
    [class*="-subtitle"],
    [class*="-muted"],
    [class*="-secondary"],
    [class*="-placeholder"],
    .muted,
    .subtitle
) {
    color: #c0c0d8;
}

/* Form controls — dark fields with readable text */
body:not(.public-page) :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    background-color: #0f0f1a;
    color: #e0e0e0;
    border-color: #2a2a4a;
}

body:not(.public-page) :is(input, textarea, select)::placeholder {
    color: #6b7280;
}

/* Tables */
body:not(.public-page) table {
    color: #e0e0e0;
}
body:not(.public-page) th {
    background-color: #16162b;
    color: #8888aa;
    border-color: #2a2a4a;
}
body:not(.public-page) td {
    border-color: #2a2a4a;
    color: #e0e0e0;
}

/* ============================================================================
   3. EXPLICIT OPT-OUTS
   Honour an explicit user light choice and leave public/auth chrome alone.
   ============================================================================ */
:root[data-theme-choice="light"] body :is(.card, .panel, [class*="-card"], [class*="-panel"]) {
    /* No override — user asked for light; page styles apply as authored. */
    background-color: revert;
    color: revert;
    border-color: revert;
}

/* ============================================================================
   4. PUBLIC LAYOUT DARK ENFORCEMENT
   PublicLayout and AppLayout use CSS variable fallbacks that default to white.
   Re-point them here so public pages (FAQ, Blog, etc.) stay dark.
   ============================================================================ */
:root:not([data-theme-choice="light"]) {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #2a2a4a;
    --border-color: #2a2a4a;
    --border-color-dark: #3a3a5a;
    --text-primary: #e0e0e0;
    --text-secondary: #94a3b8;
    --color-primary: #6366f1;
    --color-primary-dark: #4f46e5;
}

.public-layout,
.app-layout {
    background-color: #0f0f1a !important;
    color: #e0e0e0 !important;
}

.public-header {
    background-color: #1a1a2e !important;
    border-bottom-color: #2a2a4a !important;
}

.public-nav-link {
    color: #94a3b8 !important;
}

.public-main {
    background-color: #0f0f1a !important;
}