/* =========================================================================
   MONVAEL OS - HIGH CONTRAST PITCH BLACK & CRUISE WHITE GRID
   ========================================================================= */

/* 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"], .dark {
    --app-bg: #000000;                     /* Pure Pitch Black (No grey fillers) */
    --card-bg: #0a0a0c;                    /* Deepest Solid Obsidian Card */
    --text-main: #ffffff;                  /* Crisp Solid White */
    --text-sub: #a1a1aa;                   /* Sharp silver-grey for subtitles */
    --border-line: rgba(255, 255, 255, 0.15); /* High-contrast clean white border line */
    --input-fill: #050506;                 /* Ultra dark input pockets */
    --chart-bar: #ffffff;                  /* Analytics bars turn solid white */
    --chart-track: rgba(255, 255, 255, 0.08);
}

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

/* Hardcore Dark Scrollbar Injection */
[data-theme="dark"] ::-webkit-scrollbar, .dark ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: #000000 !important;
}
[data-theme="dark"] ::-webkit-scrollbar-track, .dark ::-webkit-scrollbar-track {
    background: #050506 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb {
    background: #27272a !important;
    border: 2px solid #050506 !important;
    border-radius: 5px !important;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover, .dark ::-webkit-scrollbar-thumb:hover {
    background: #52525b !important;
}

/* 2. Forced Inversion Overrides for Heavy Containers & Headers */
[data-theme="dark"] header, .dark header,
[data-theme="dark"] nav, .dark nav,
[data-theme="dark"] div.bg-white, .dark div.bg-white,
[data-theme="dark"] section.bg-white, .dark section.bg-white,
[data-theme="dark"] div[class*="bg-slate-"], .dark div[class*="bg-slate-"],
[data-theme="dark"] div[class*="bg-neutral-"], .dark div[class*="bg-neutral-"] {
    background-color: var(--card-bg) !important;
    border-color: var(--border-line) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* 3. HARDCORE LOGO INVERSION (M becomes Black, Background becomes White) */
[data-theme="dark"] .bg-slate-900:has(span:contains("M")), .dark .bg-slate-900:has(span:contains("M")),
[data-theme="dark"] div:has(> span:text("M")), .dark div:has(> span:text("M")),
[data-theme="dark"] .logo-container-selector, .dark .logo-container-selector,
[data-theme="dark"] header div.flex.items-center div.bg-slate-900, .dark header div.flex.items-center div.bg-slate-900 {
    background-color: #ffffff !important;   /* Outer box pure white */
    color: #000000 !important;              /* Inner 'M' text pure black */
}
[data-theme="dark"] header div.flex.items-center div.bg-slate-900 span, .dark header div.flex.items-center div.bg-slate-900 span {
    color: #000000 !important;
}

/* =========================================================================
   4. Active Top Navigation Header Buttons (Pure Mono Strict Mode)
   ========================================================================= */

/* Dark mode basic state for navbar buttons */
[data-theme="dark"] nav button, .dark nav button,
[data-theme="dark"] header button, .dark header button {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
}

/* Dark mode active selected state (e.g. Ledger Workspace Button) */
/* ==========================================
   DYNAMIC COMPONENT TABS ACTIVE STATE (DARK MODE)
   ========================================== */
[data-theme="dark"] nav button.active, .dark nav button.active,
[data-theme="dark"] nav button[class*="bg-slate-900"], .dark nav button[class*="bg-slate-900"],
[data-theme="dark"] header button.active, .dark header button.active {
    background-color: #ffffff !important;
    color: #000000 !important;              /* Crisp pure black text overlay */
    border-color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode hover interactions */
[data-theme="dark"] nav button:not(.active):hover, .dark nav button:not(.active):hover,
[data-theme="dark"] header button:not(.active):hover, .dark header button:not(.active):hover,
[data-theme="dark"] #theme-toggle-btn:hover, .dark #theme-toggle-btn:hover,
[data-theme="dark"] #hamburger-menu-btn:hover, .dark #hamburger-menu-btn:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

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

/* FIX: Target span nodes selectively to prevent overwriting high contrast button colors */
[data-theme="dark"] body :not(button):not(.monvael-price-pill) > span, 
.dark body :not(button):not(.monvael-price-pill) > span {
    color: var(--text-main) !important;
}
[data-theme="dark"] p, .dark p, [data-theme="dark"] .text-slate-400, .dark .text-slate-400, [data-theme="dark"] .text-slate-500, .dark .text-slate-500 {
    color: var(--text-sub) !important;
}

/* Keep action badges readable (Red/Green text updates won't overwrite completely) */
[data-theme="dark"] .text-red-500, .dark .text-red-500, [data-theme="dark"] .text-red-400, .dark .text-red-400 { color: #ff4545 !important; }
[data-theme="dark"] .text-emerald-500, .dark .text-emerald-500, [data-theme="dark"] .text-emerald-400, .dark .text-emerald-400 { color: #00e676 !important; }

/* 6. Active Mechanical Input Elements & Dropdowns Selection Panels */
[data-theme="dark"] input, .dark input,
[data-theme="dark"] select, .dark select,
[data-theme="dark"] textarea, .dark textarea {
    background-color: var(--input-fill) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8) !important;
    border-radius: 8px !important;
}
[data-theme="dark"] input:focus, .dark input:focus,
[data-theme="dark"] select:focus, .dark select:focus {
    border-color: #ffffff !important;
    outline: none !important;
}
[data-theme="dark"] input::placeholder, .dark input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* 7. Data List Stream Entries Alignment Protection */
[data-theme="dark"] #ledger-stream-container div.bg-slate-50, .dark #ledger-stream-container div.bg-slate-50,
[data-theme="dark"] div.border-slate-100, .dark div.border-slate-100 {
    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, .dark #ledger-stream-container div.bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* 8. Dynamic Weekly Expense Velocity Chart Tracks & White Bars Engine */
[data-theme="dark"] #chart-container div.bg-slate-100, .dark #chart-container div.bg-slate-100,
[data-theme="dark"] div.bg-slate-100, .dark 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, .dark #chart-container div.bg-slate-900,
[data-theme="dark"] div.bg-slate-900, .dark div.bg-slate-900 {
    background-color: var(--chart-bar) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
}

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

/* =========================================================================
   UNIVERSAL TYPOGRAPHY PRICE PILL VISIBILITY OVERRIDES (UNCHANGED)
   ========================================================================= */
.monvael-price-pill {
    background-color: rgba(254, 248, 248, 0.459) !important;
    color: #000000 !important;
    font-family: monospace !important;
    display: inline-block !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px;
}

/* Monvael Dark Mode CSS Adjustments for Features Section */
.dark #features-matrix {
  background-color: #0f172a !important; /* slate-900 */
  border-color: #334155 !important;     /* slate-700 */
  color: #ffffff !important;             /* Fixed contrast clash */
}

.dark #features-matrix h2, 
.dark #features-matrix h3 {
  color: #ffffff !important;
}

.dark #features-matrix p {
  color: #94a3b8 !important;             /* slate-400 */
}

.dark #features-matrix .bg-slate-50 {
  background-color: rgba(30, 41, 59, 0.4) !important; /* slate-800/40 */
  border-color: rgba(51, 65, 85, 0.5) !important;     /* slate-700/50 */
}

.dark #features-matrix .bg-slate-950 {
  background-color: #ffffff !important;   /* Numbers box block becomes white */
  color: #0f172a !important;             /* Number text becomes dark */
}

.dark #features-matrix .bg-slate-100 {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

/* ==========================================
   MONVAEL OS: ALARMS FORM HYPER-DARK OVERRIDES (FIXED SELECTORS CONTRAST)
   ========================================== */

/* Main form area container default framework reset */
.dark #alarm-form {
    background-color: #000000 !important;             /* Pure premium pitch black velvet */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Super thin surgical white grid border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important; /* Low profile deep shadow effect */
}

/* Headings inside form (Arm Allocation Rule) */
.dark #alarm-form span.text-slate-900,
.dark #alarm-form span {
    color: #ffffff !important;                        /* Pure high-contrast silver white */
}

/* Form Label vectors (Target Category Vector, etc.) */
.dark #alarm-form label {
    color: #94a3b8 !important;                        /* Readable soft slate gray */
    opacity: 0.9 !important;
}

/* Interactive Input Elements Framework Integration */
.dark #alarm-category,
.dark #alarm-limit {
    background-color: #0b0f19 !important;             /* Deep tactical background for inner boxes */
    border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Clean defined vector edge line */
    color: #ffffff !important;                        /* High contrast input data values */
}

/* Safe Placeholder text mapping configuration */
.dark #alarm-limit::placeholder {
    color: #475569 !important;                        /* Highly visible dark slate indicator text */
    opacity: 1 !important;
}

/* Currency Icon Adjuster Vector */
.dark #alarm-form .absolute.left-3 {
    color: #94a3b8 !important;                        /* Crisp and bright currency identifier */
}

/* Submit Trigger Button tactile hardware inversion */
.dark #alarm-form button[type="submit"] {
    background-color: #ffffff !important;             /* Crisp solid structural white block button */
    color: #000000 !important;                        /* Deep rich black font overlay */
    font-weight: 900 !important;
    border: 1px solid #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.dark #alarm-form button[type="submit"]:hover {
    background-color: #e2e8f0 !important;             /* Interactive premium tracking response */
    border-color: #e2e8f0 !important;
}

/* =========================================================================
   MONVAEL OS: CONTRAST MATRIX OVERRIDES FOR DYNAMIC SEO INFRASTRUCTURE
   ========================================================================= */

/* Main SEO Box Dark Theme Container Mapping */
[data-theme="dark"] #mv-seo-matrix, 
.dark #mv-seo-matrix {
    background-color: var(--card-bg) !important;                /* Deepest Solid Obsidian Card Matrix */
    border-color: var(--border-line) !important;                /* Surgical ultra-thin high-contrast line */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9) !important; /* Premium clean SaaS bounding drop shadow */
}

/* Primary Title Typography Vectors */
[data-theme="dark"] #mv-seo-matrix .mv-seo-title,
.dark #mv-seo-matrix .mv-seo-title {
    color: var(--text-main) !important;                         /* Pure Crisp White Heading Text */
}

/* Descriptive Paragraph Information Blocks */
[data-theme="dark"] #mv-seo-matrix .mv-seo-text,
.dark #mv-seo-matrix .mv-seo-text {
    color: var(--text-sub) !important;                          /* Sharp silver-grey for high-fidelity logs */
}

/* Structural Data Badges & Inner Vector Indicators */
[data-theme="dark"] #mv-seo-matrix .mv-seo-badge,
.dark #mv-seo-matrix .mv-seo-badge {
    background-color: var(--input-fill) !important;             /* Force pure ultra dark input pockets look */
    border-color: var(--border-line) !important;
    color: var(--text-sub) !important;
}

[data-theme="dark"] #mv-seo-matrix .mv-seo-vector,
.dark #mv-seo-matrix .mv-seo-vector {
    color: rgba(255, 255, 255, 0.35) !important;                /* Minimalist code vector terminal details */
}

/* Keywords Sidebar Box Inversion Matrix */
[data-theme="dark"] #mv-seo-matrix .mv-seo-kw-box,
.dark #mv-seo-matrix .mv-seo-kw-box {
    background-color: rgba(255, 255, 255, 0.02) !important;    /* Sleek transparent tracking layer border */
    border-color: var(--border-line) !important;
    color: rgba(255, 255, 255, 0.4) !important;                /* Strict architectural semantic layout */
}

[data-theme="dark"] #mv-seo-matrix .mv-seo-kw-box span,
.dark #mv-seo-matrix .mv-seo-kw-box span {
    color: var(--text-sub) !important;                          /* Symmetrical tag alignment properties */
}