/* =========================================================================
   MONVAEL OS - MASTER DATA-THEME VARIABLE INVERSION GRID
   Forced global overrides targeting absolute nested utility elements layout.
   ========================================================================= */

/* Centralized CSS Color Tokens Matrix */
:root {
    --app-bg: #eef1f6;
    --card-bg: rgba(255, 255, 255, 0.75);
    --text-main: #0f172a;
    --text-sub: #64748b;
    --border-line: rgba(226, 232, 240, 0.8);
    --input-fill: rgba(241, 245, 249, 0.8);
    --chart-bar: #0f172a;
    --chart-track: #f1f5f9;
}

[data-theme="dark"] {
    --app-bg: #090a0f;
    --card-bg: #12141c;
    --text-main: #f8fafc;
    --text-sub: #94a3b8;
    --border-line: rgba(30, 41, 59, 0.8);
    --input-fill: #1a1d29;
    --chart-bar: #f8fafc; /* FIXED: Analytics bars turn crisp pure white in dark mode */
    --chart-track: rgba(255, 255, 255, 0.05);
}

/* 1. Global Document Space Invalidation */
html, body {
    background-color: var(--app-bg) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2. Forced Inversion Overrides for Heavy Containers & Headers */
[data-theme="dark"] header,
[data-theme="dark"] div.bg-white,
[data-theme="dark"] section.bg-white {
    background-color: var(--card-bg) !important;
    border-color: var(--border-line) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Text Nodes & Typographical Color Correction */
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] span.text-slate-900,
[data-theme="dark"] span.text-slate-800 {
    color: var(--text-main) !important;
}

[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] p.text-slate-400 {
    color: var(--text-sub) !important;
}

/* 4. Active Mechanical Input Elements & Dropdowns Selection Panels */
[data-theme="dark"] input,
[data-theme="dark"] select {
    background-color: var(--input-fill) !important;
    border-color: var(--border-line) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* 5. Data List Stream Entries Alignment Protection */
[data-theme="dark"] #ledger-stream-container div.bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border-line) !important;
}

[data-theme="dark"] #ledger-stream-container div.bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 6. Dynamic Weekly Expense Velocity Chart Tracks & White Bars Engine */
[data-theme="dark"] #chart-container div.bg-slate-100 {
    background-color: var(--chart-track) !important;
    border-color: var(--border-line) !important;
}

[data-theme="dark"] #chart-container div.bg-slate-900 {
    background-color: var(--chart-bar) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
}

/* 7. Low-Profile Sponsor Banner Custom Inversion Layer */
[data-theme="dark"] footer a.bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border-line) !important;
}

[data-theme="dark"] footer a.bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* =========================================================================
   UNIVERSAL TYPOGRAPHY PRICE PILL VISIBILITY OVERRIDES
   Guarantees perfect readability across alternative dynamic canvas.
   ========================================================================= */

/* Default Light Mode Token Values mapping */
:root {
    --pill-bg: rgba(15, 23, 42, 0.08);
    --pill-text: #0f172a;
}

/* Elite Dark Mode Token Values mapping */
[data-theme="dark"] {
    --pill-bg: rgba(255, 255, 255, 0.12);
    --pill-text: #ffffff;
}

/* Master Fixed Core Rule - Prevents text fading inside layout changes */
.monvael-price-pill {
    background-color: var(--pill-bg) !important;
    color: var(--pill-text) !important;
    font-family: monospace !important;
    display: inline-block !important;
    transition: all 0.2s ease-in-out;
}