/**
 * JACE.ONE Mining Dashboard - Authentic Design System
 * 1:1 Match with jaceone.de (Deep Black Tobacco & Outfit Editorial Quant Aesthetics)
 * With Dual Mode: Dark Luxury Cockpit vs. Bright Olivgrün & Creme
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    /* JACE Dark Palette Tokens (Default) */
    --jace-bg:              #000000;
    --jace-bg-elevated:     #0A0A0A;
    --jace-surface:         #0F0E0D;
    --jace-surface-raised:  #1A1916;
    --jace-surface-overlay: #242220;

    --jace-text:            #F5F2EB;
    --jace-text-secondary:  #9E948A;
    --jace-text-muted:      #A39A8E; /* High contrast (6.95:1 on card, 6.34:1 on raised) */
    --jace-text-disabled:   #685E54;
    --jace-text-inverse:    #0F0E0D;

    --jace-border:          #2E2620;
    --jace-border-subtle:   #1C1A18;
    --jace-border-strong:   #4A433C;

    --jace-gold:            #D1A15B;
    --jace-gold-dim:        #8A6A35;
    --jace-gold-bg:         rgba(209, 161, 91, 0.16);
    --jace-gold-border:     rgba(209, 161, 91, 0.35);

    --jace-green:           #22C55E;
    --jace-green-dim:       #15803D;
    --jace-green-bg:        rgba(34, 197, 94, 0.14);
    --jace-green-border:    rgba(34, 197, 94, 0.30);

    --jace-red:             #EF4444;
    --jace-red-dim:         #991B1B;
    --jace-red-bg:          rgba(239, 68, 68, 0.14);
    --jace-red-border:      rgba(239, 68, 68, 0.30);

    --jace-blue:            #38BDF8;
    --jace-blue-dim:        #0284C7;
    --jace-blue-bg:         rgba(56, 189, 248, 0.14);
    --jace-blue-border:     rgba(56, 189, 248, 0.30);

    --jace-purple:          #C084FC;
    --jace-purple-bg:       rgba(192, 132, 252, 0.14);
    --jace-purple-border:   rgba(192, 132, 252, 0.30);
}

/* ==========================================================================
   BRIGHT / LIGHT MODE: OLIVGRÜN & CREME EDITORIAL SYSTEM
   ========================================================================== */
html.light {
    --jace-bg:              #F2EDE4; /* Wärmer, samtiger Creme-Canvas */
    --jace-bg-elevated:     #E5DDD0;
    --jace-surface:         #FCFAF6; /* Alabaster-Creme Oberfläche */
    --jace-surface-raised:  #EFE8DC; /* Angehobene Creme-Fläche */
    --jace-surface-overlay: #E3DBD0;

    --jace-text:            #111610; /* Tiefes klares Wald-Anthrazit (17.5:1 Kontrast) */
    --jace-text-secondary:  #2D3A28; /* Sattes Waldmoos-Anthrazit (11.5:1 Kontrast) */
    --jace-text-muted:      #33432E; /* Kräftiges tiefes Waldsalbei (10.1:1 Kontrast) */
    --jace-text-disabled:   #687865;
    --jace-text-inverse:    #FCFAF6;

    --jace-border:          #C5BCAE; /* Deutlichere, edle Leinen-Kontur */
    --jace-border-subtle:   #D6CEBF;
    --jace-border-strong:   #9A8F7D;

    --jace-gold:            #2D4F23; /* Kraftvolles, dunkles Wald-Olivgrün */
    --jace-gold-dim:        #1F3718;
    --jace-gold-bg:         #EAF0E6;
    --jace-gold-border:     #9AB690;

    --jace-green:           #14532D; /* Sattes Jägergrün */
    --jace-green-dim:       #0D3B1E;
    --jace-green-bg:        #DCFCE7;
    --jace-green-border:    #86EFAC;

    --jace-red:             #991B1B; /* Tiefes Rubinrot */
    --jace-red-dim:         #7F1D1D;
    --jace-red-bg:          #FEE2E2;
    --jace-red-border:      #FCA5A5;

    --jace-blue:            #0C4A6E; /* Tiefes Nordsee-Saphirblau */
    --jace-blue-dim:        #08334C;
    --jace-blue-bg:         #E0F2FE;
    --jace-blue-border:     #7DD3FC;

    --jace-purple:          #581C87; /* Majestätisches Dunkelpurpur */
    --jace-purple-bg:       #F3E8FF;
    --jace-purple-border:   #D8B4FE;
}

/* Base Document Styling */
html, body {
    margin: 0;
    padding: 0;
    background-color: var(--jace-bg, #000000) !important;
    color: var(--jace-text, #F5F2EB) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Typography Standards */
.font-heading {
    font-family: 'Outfit', 'Inter', sans-serif !important;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace !important;
}

/* JACE.ONE Luxury Surface Card */
.jace-card {
    background-color: var(--jace-surface, #0F0E0D) !important;
    border: 1px solid var(--jace-border, #2E2620) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.25s ease;
}

.jace-card:hover {
    border-color: var(--jace-border-strong, #4A433C) !important;
}

/* Raised Inner Containers */
.jace-surface-raised {
    background-color: var(--jace-surface-raised, #1A1916) !important;
    border: 1px solid var(--jace-border, #2E2620) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* ==========================================================================
   FINTECH TYPOGRAPHY & TABULAR NUMERALS (TRADE REPUBLIC STANDARD)
   ========================================================================== */
.tabular-nums,
.font-mono,
[id^="top-"],
[id^="pa-"],
[id^="prl-"],
[id^="nock-"],
[id^="fleet-"],
table td,
table th,
.tr-row span,
.jace-switcher-btn,
.jace-pill-gold,
.jace-pill-green,
.jace-pill-purple,
.jace-pill-blue,
.jace-pill-red,
.jace-pill-neutral {
    font-variant-numeric: tabular-nums lining-nums;
    -webkit-font-feature-settings: "tnum" 1, "lnum" 1;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Trade Republic Minimalist Aesthetics */
.tr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 1rem;
    background-color: var(--jace-surface-raised, #161513);
    border: 1px solid var(--jace-border-subtle, #1C1A18);
    will-change: transform, background-color, border-color;
    transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tr-row:hover {
    border-color: var(--jace-border, #2E2620);
    background-color: var(--jace-surface-overlay, #1E1C19);
}

.tr-row:active {
    transform: scale(0.992);
}

.tr-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255, 255, 255, 0.05);
    color: var(--jace-text-secondary, #9E948A);
    border: 1px solid var(--jace-border-subtle, #1C1A18);
}

html.light .tr-stat-pill {
    background: #EFE8DC;
    color: #2D3A28;
    border-color: #C5BCAE;
}

/* Subtle Hairline Dividers */
hr, .border-jace {
    border-color: var(--jace-border-subtle, #1C1A18) !important;
}

/* High-Contrast Dark Mode Utility Overrides */
.text-\[\#7A726A\] {
    color: var(--jace-text-muted, #A39A8E) !important;
}

.text-\[\#444\] {
    color: #8A8075 !important;
}

.border-white\/5 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

input::placeholder, select::placeholder {
    color: #8A8075 !important;
}

/* Form Controls & Inputs */
input, select {
    background-color: var(--jace-surface-raised, #1A1916) !important;
    border: 1px solid var(--jace-border, #2E2620) !important;
    color: var(--jace-text, #F5F2EB) !important;
    border-radius: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color 0.15s ease, background-color 0.25s ease;
}

input:focus, select:focus {
    border-color: var(--jace-gold, #D1A15B) !important;
    outline: none !important;
}

/* Accessible & Elegant Focus Rings (Apple HIG) */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--jace-gold, #D1A15B) !important;
    outline-offset: 2px !important;
}

html.light button:focus-visible, html.light input:focus-visible, html.light select:focus-visible, html.light a:focus-visible {
    outline: 2px solid #2D4F23 !important;
    outline-offset: 2px !important;
}

/* Tactile Buttons (Trade Republic / Linear Feel) */
.jace-btn {
    background-color: var(--jace-surface-raised, #1A1916);
    border: 1px solid var(--jace-border, #2E2620);
    color: var(--jace-text, #F5F2EB);
    border-radius: 0.75rem;
    font-weight: 700;
    will-change: transform, background-color, border-color;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.jace-btn:hover {
    background-color: var(--jace-surface-overlay, #242220);
    border-color: var(--jace-border-strong, #4A433C);
}

.jace-btn:active {
    transform: scale(0.975);
}

.jace-btn-gold {
    background-color: var(--jace-gold, #D1A15B);
    color: #000000;
    border: 1px solid var(--jace-gold);
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(209, 161, 91, 0.20);
    will-change: transform, opacity, box-shadow;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, box-shadow 0.15s ease;
}

.jace-btn-gold:hover {
    opacity: 0.94;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(209, 161, 91, 0.32);
}

.jace-btn-gold:active {
    transform: scale(0.975) translateY(0);
    box-shadow: 0 1px 4px rgba(209, 161, 91, 0.15);
}

/* ==========================================================================
   SILK MODAL & OVERLAY TRANSITIONS (APPLE HIG / LINEAR FEEL)
   ========================================================================== */
.modal-backdrop-animate {
    animation: modalBackdropFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-content-animate {
    animation: modalContentPopIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalBackdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalContentPopIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* JACE Pill Badges - Trade Republic Minimalist Treatment */
.jace-pill-green {
    background: rgba(34, 197, 94, 0.08);
    color: #4ADE80;
    border: 1px solid rgba(34, 197, 94, 0.20);
}

.jace-pill-gold {
    background: rgba(209, 161, 91, 0.08);
    color: #E2BC7E;
    border: 1px solid rgba(209, 161, 91, 0.20);
}

.jace-pill-red {
    background: rgba(239, 68, 68, 0.08);
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.20);
}

.jace-pill-blue {
    background: rgba(56, 189, 248, 0.08);
    color: #7DD3FC;
    border: 1px solid rgba(56, 189, 248, 0.20);
}

.jace-pill-purple {
    background: rgba(192, 132, 252, 0.08);
    color: #D8B4FE;
    border: 1px solid rgba(192, 132, 252, 0.20);
}

.jace-pill-neutral {
    background: rgba(255, 255, 255, 0.03);
    color: var(--jace-text-secondary);
    border: 1px solid var(--jace-border-subtle);
}

/* JACE Segmented Switcher Controls (Timeframes, Tabs) */
.jace-switcher-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 0.75rem;
    background-color: var(--jace-surface-raised, #1A1916);
    border: 1px solid var(--jace-border, #2E2620);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.jace-switcher-btn {
    padding: 4px 10px;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--jace-text-secondary, #9E948A);
    will-change: transform, color, background-color;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
}

.jace-switcher-btn:hover {
    color: var(--jace-text, #F5F2EB);
}

.jace-switcher-btn:active {
    transform: scale(0.96);
}

.jace-switcher-btn.active {
    background-color: var(--jace-text, #F5F2EB) !important;
    color: var(--jace-bg, #000000) !important;
    font-weight: 900 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Tables */
.jace-table-wrap {
    border-radius: 1rem;
    border: 1px solid var(--jace-border, #2E2620);
    overflow: hidden;
    background-color: var(--jace-surface, #0F0E0D);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.jace-table-head {
    background-color: var(--jace-surface-raised, #1A1916);
    color: var(--jace-text-secondary, #9E948A);
    border-bottom: 1px solid var(--jace-border, #2E2620);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.jace-table-row {
    border-bottom: 1px solid var(--jace-border-subtle, #1C1A18);
    transition: background-color 0.15s ease;
}

.jace-table-row:hover {
    background-color: rgba(26, 25, 22, 0.5);
}

/* Minimalist Dark Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #000000;
}
::-webkit-scrollbar-thumb {
    background: #2E2620;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4A433C;
}

/* ==========================================================================
   SPECIFIC LIGHT MODE (OLIVGRÜN & CREME) OVERRIDES FOR TAILWIND UTILITIES
   ========================================================================== */
html.light, html.light body {
    background-color: var(--jace-bg) !important;
    color: var(--jace-text) !important;
}

html.light ::selection {
    background-color: #2D4F23 !important;
    color: #FFFFFF !important;
}

html.light header {
    background-color: rgba(242, 237, 228, 0.96) !important;
    border-color: var(--jace-border) !important;
    box-shadow: 0 1px 4px rgba(35, 45, 30, 0.05) !important;
}

html.light header .text-white {
    color: var(--jace-text) !important;
}

html.light header .text-\[\#D1A15B\] {
    color: #2D4F23 !important;
}

html.light .jace-card {
    background-color: var(--jace-surface) !important;
    border-color: var(--jace-border) !important;
    box-shadow: 0 1px 3px rgba(35, 45, 30, 0.04), 0 8px 24px -4px rgba(35, 45, 30, 0.08) !important;
}

html.light .jace-card:hover {
    border-color: var(--jace-border-strong) !important;
}

html.light .jace-surface-raised {
    background-color: var(--jace-surface-raised) !important;
    border-color: var(--jace-border) !important;
}

/* Inset boxes using dark utilities: high contrast border & clean creme */
html.light .bg-black {
    background-color: #EDE6DA !important;
    border-color: #C5BCAE !important;
}

html.light .bg-black\/40 {
    background-color: #EFE8DC !important;
    border-color: #C5BCAE !important;
}

html.light .bg-black\/60,
html.light .bg-black\/80,
html.light .bg-black\/95 {
    background-color: rgba(237, 230, 218, 0.90) !important;
}

html.light .bg-\[\#1E1C19\],
html.light .bg-\[\#141210\],
html.light .bg-\[\#1C1A18\],
html.light .bg-\[\#0F0E0D\] {
    background-color: #EFE8DC !important;
    border-color: #C5BCAE !important;
}

/* Active Workload Card & .tr-row in Light Mode - Crisp Olive-Cream on Forest Olive */
html.light #card-prof-pearl_nock_dual.bg-\[\#1E1C19\],
html.light .tr-row.bg-\[\#1E1C19\] {
    background-color: #E8EFE3 !important;
    border-color: #2D4F23 !important;
    --tw-ring-color: rgba(45, 79, 35, 0.35) !important;
}

/* Inactive .tr-row in Light Mode */
html.light .tr-row {
    background-color: #FAF8F5 !important;
    border-color: #D6CEBF !important;
}

html.light .tr-row:hover {
    background-color: #EFE8DC !important;
    border-color: #C5BCAE !important;
}

/* Highlighted / Alternate table rows */
html.light .bg-\[\#1A1916\]\/40 {
    background-color: #E2ECE0 !important; /* Soft emerald highlight */
}

html.light .bg-\[\#1A1916\]\/60 {
    background-color: #E8EFE3 !important; /* Soft olive highlight */
}

/* Report Buttons in Light Mode */
html.light #btn-download-report-csv,
html.light .bg-\[\#24201A\] {
    background-color: #EFE8DC !important;
    color: #2D4F23 !important;
    border-color: #9AB690 !important;
}
html.light #btn-download-report-csv:hover,
html.light .bg-\[\#342D24\] {
    background-color: #E3DBD0 !important;
    color: #1F3718 !important;
}

html.light #btn-open-report-pdf,
html.light .bg-\[\#2E4226\] {
    background-color: #2D4F23 !important;
    color: #FFFFFF !important;
    border-color: #1F3718 !important;
}
html.light #btn-open-report-pdf:hover,
html.light .bg-\[\#3B5431\] {
    background-color: #243F1C !important;
}

/* Break-Even Progress Bar Track & Gradient */
html.light #top-capex-progress {
    background: linear-gradient(to right, #991B1B, #2D4F23, #14532D) !important;
}

/* Borders */
html.light .border-\[\#2E2620\],
html.light .border-\[\#1C1A18\] {
    border-color: var(--jace-border) !important;
}

html.light .border-\[\#2E2620\]\/40,
html.light .border-\[\#2E2620\]\/50,
html.light .border-\[\#2E2620\]\/60 {
    border-color: #D6CEBF !important;
}

html.light .border-\[\#3E342B\],
html.light .border-\[\#4A3D2F\] {
    border-color: #C5BCAE !important;
}

html.light .border-\[\#48633C\] {
    border-color: #2D4F23 !important;
}

html.light .border-white\/5 {
    border-color: #C5BCAE !important;
}

html.light .border-\[\#D1A15B\],
html.light .border-\[\#D1A15B\]\/30,
html.light .border-\[\#D1A15B\]\/40,
html.light .border-\[\#D1A15B\]\/50 {
    border-color: #2D4F23 !important;
}

html.light .border-purple-400\/30 {
    border-color: rgba(88, 28, 135, 0.3) !important;
}

html.light .border-sky-400\/40 {
    border-color: rgba(12, 74, 110, 0.3) !important;
}

html.light .divide-\[\#1C1A18\] > :not([hidden]) ~ :not([hidden]),
html.light .divide-\[\#2E2620\] > :not([hidden]) ~ :not([hidden]),
html.light .divide-\[\#2E2620\]\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: #D6CEBF !important;
}

/* Typography & Text */
html.light .text-\[\#F5F2EB\],
html.light .text-white {
    color: var(--jace-text) !important; /* #111610 (17.58:1) */
}

html.light .text-\[\#9E948A\],
html.light .text-\[\#D6CEBF\] {
    color: var(--jace-text-secondary) !important; /* #2D3A28 (11.53:1) */
}

html.light .text-\[\#7A726A\] {
    color: var(--jace-text-muted) !important; /* #33432E (10.16:1) */
}

html.light .text-\[\#444\] {
    color: #8C8275 !important; /* 5.02:1 */
}

/* Brand Olive Green (replaces dark-mode gold) */
html.light .text-\[\#D1A15B\] {
    color: #2D4F23 !important; /* 8.94:1 */
}

/* Red / Negative / AfA Expenses - razor-sharp deep crimson */
html.light .text-rose-300,
html.light .text-rose-300\/80,
html.light .text-rose-400,
html.light .text-rose-500,
html.light .text-red-400,
html.light .text-red-500,
html.light .text-\[\#EF4444\] {
    color: #991B1B !important; /* 7.97:1 */
}

/* Green / Positive / Yield - deep hunter emerald */
html.light .text-emerald-200,
html.light .text-emerald-300,
html.light .text-emerald-300\/80,
html.light .text-emerald-400,
html.light .text-emerald-400\/80,
html.light .text-emerald-400\/90,
html.light .text-emerald-500,
html.light .text-green-400,
html.light .text-green-500,
html.light .text-\[\#22C55E\] {
    color: #14532D !important; /* 8.74:1 */
}

/* Purple / Pearl Assets - deep royal violet */
html.light .text-\[\#D8B4FE\],
html.light .text-purple-300,
html.light .text-\[\#C084FC\],
html.light .text-purple-400,
html.light .text-purple-500,
html.light .text-purple-600 {
    color: #581C87 !important; /* 10.43:1 */
}

/* Blue / Sky / Nockchain / Power - deep sapphire blue */
html.light .text-\[\#7DD3FC\],
html.light .text-\[\#38BDF8\],
html.light .text-sky-300,
html.light .text-sky-400,
html.light .text-sky-500,
html.light .text-blue-400,
html.light .text-blue-500 {
    color: #0C4A6E !important; /* 9.07:1 */
}

/* Amber / Temp / Warnings - deep bronze amber */
html.light .text-amber-300,
html.light .text-amber-400,
html.light .text-amber-500,
html.light .text-amber-600,
html.light .text-yellow-500 {
    color: #92400E !important; /* 6.80:1 */
}

/* Pill / Badge Overrides for Light Mode - Subtle & Desaturated */
html.light .jace-pill-purple {
    background-color: rgba(88, 28, 135, 0.06) !important;
    color: #4C1D95 !important;
    border-color: rgba(88, 28, 135, 0.20) !important;
}

html.light .jace-pill-green {
    background-color: rgba(20, 83, 45, 0.06) !important;
    color: #14532D !important;
    border-color: rgba(20, 83, 45, 0.20) !important;
}

html.light .jace-pill-blue {
    background-color: rgba(12, 74, 110, 0.06) !important;
    color: #0C4A6E !important;
    border-color: rgba(12, 74, 110, 0.20) !important;
}

html.light .jace-pill-gold {
    background-color: rgba(45, 79, 35, 0.06) !important;
    color: #1F3718 !important;
    border-color: rgba(45, 79, 35, 0.20) !important;
}

html.light .jace-pill-neutral {
    background-color: rgba(45, 60, 40, 0.05) !important;
    color: #2D3A28 !important;
    border-color: #C5BCAE !important;
}

html.light .jace-pill-red {
    background-color: rgba(153, 27, 27, 0.06) !important;
    color: #991B1B !important;
    border-color: rgba(153, 27, 27, 0.20) !important;
}

/* Confirmation Modal in Light Mode */
html.light #workload-confirm-modal {
    background-color: rgba(242, 237, 228, 0.85) !important;
}
html.light #workload-confirm-modal .bg-\[\#141210\] {
    background-color: #EFE8DC !important;
    border-color: #C5BCAE !important;
}
html.light #workload-confirm-modal #confirm-modal-consequences .bg-black\/40 {
    background-color: #FAF8F5 !important;
    border-color: #D6CEBF !important;
}
html.light #workload-confirm-modal #confirm-modal-consequences span {
    color: #2D3A28 !important;
}

/* Tinted Status Container Blocks */
html.light .bg-emerald-500\/10 {
    background-color: #DCFCE7 !important;
}
html.light .border-emerald-500\/20,
html.light .border-emerald-500\/30,
html.light .border-emerald-500\/40 {
    border-color: #86EFAC !important;
}

html.light .bg-rose-500\/10 {
    background-color: #FEE2E2 !important;
}
html.light .border-rose-500\/20,
html.light .border-rose-500\/30,
html.light .border-rose-500\/40 {
    border-color: #FCA5A5 !important;
}

html.light .border-purple-500\/40,
html.light .border-purple-500\/60 {
    border-color: #C084FC !important;
}

html.light .border-sky-500\/50,
html.light .border-sky-500\/60 {
    border-color: #7DD3FC !important;
}

/* Indicator Dots in Light Mode */
html.light .bg-\[\#C084FC\] {
    background-color: #6B21A8 !important;
}
html.light .bg-\[\#38BDF8\] {
    background-color: #0284C7 !important;
}
html.light .bg-\[\#D1A15B\] {
    background-color: #2D4F23 !important;
}
html.light .bg-emerald-400,
html.light .bg-emerald-500 {
    background-color: #15803D !important;
}

/* Buttons */
html.light .jace-btn {
    background-color: #EFE8DC !important;
    border-color: #C5BCAE !important;
    color: #111610 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(35, 45, 30, 0.04) !important;
}

html.light .jace-btn:hover {
    background-color: #E5DDCF !important;
    border-color: #2D4F23 !important;
    color: #111610 !important;
}

html.light .jace-btn-gold {
    background-color: #2D4F23 !important;
    color: #FFFFFF !important;
    border-color: #203A19 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(45, 79, 35, 0.25) !important;
}

html.light .jace-btn-gold:hover {
    background-color: #243F1C !important;
    box-shadow: 0 3px 10px rgba(45, 79, 35, 0.35) !important;
}

html.light .jace-btn-gold:active {
    transform: scale(0.975) translateY(0) !important;
    box-shadow: 0 1px 3px rgba(45, 79, 35, 0.15) !important;
}

html.light .border-l-\[\#D1A15B\] {
    border-left-color: #2D4F23 !important;
}

/* Switcher Controls */
html.light .jace-switcher-wrap {
    background-color: #E2DBD0 !important;
    border-color: #C0B6A4 !important;
}

html.light .jace-switcher-btn {
    color: #374334 !important;
    font-weight: 700 !important;
}

html.light .jace-switcher-btn:hover {
    color: #111610 !important;
}

html.light .jace-switcher-btn.active {
    background-color: #2D4F23 !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 5px rgba(30, 55, 20, 0.28) !important;
}

/* Break-Even Submode container */
html.light #profit-submode-container {
    background-color: #E2DBD0 !important;
    border-color: #C0B6A4 !important;
}

/* Tables */
html.light .jace-table-wrap {
    background-color: var(--jace-surface) !important;
    border-color: var(--jace-border) !important;
}

html.light .jace-table-head,
html.light thead.bg-\[\#0F0E0D\] {
    background-color: #E8E1D2 !important;
    color: #22321D !important;
    border-bottom: 2px solid #C0B6A4 !important;
    font-weight: 800 !important;
}

html.light .jace-table-head.sticky {
    background-color: #E8E1D2 !important;
}

html.light .jace-table-row {
    border-color: #E5DDD0 !important;
}

html.light .jace-table-row:hover {
    background-color: rgba(45, 79, 35, 0.06) !important;
}

/* Inputs */
html.light input, html.light select {
    background-color: #FFFFFF !important;
    border-color: #C5BCAE !important;
    color: #111610 !important;
    font-weight: 700 !important;
}

html.light input:focus, html.light select:focus {
    border-color: #2D4F23 !important;
    outline: 2px solid rgba(45, 79, 35, 0.25) !important;
}

/* Terminal Log Console: Deep forest olive for readability */
html.light pre#log-terminal {
    background-color: #121A11 !important;
    color: #86EFAC !important;
    border-color: #253322 !important;
}

/* Modals */
html.light #modal-2fa > div,
html.light #output-modal > div {
    background-color: var(--jace-surface) !important;
    border-color: var(--jace-border) !important;
    box-shadow: 0 20px 40px -10px rgba(35, 45, 30, 0.25) !important;
}

html.light pre#output-modal-content {
    background-color: #121A11 !important;
    color: #7DD3FC !important;
    border-color: #253322 !important;
}

/* Footer */
html.light footer {
    border-color: #C5BCAE !important;
    color: #4A5845 !important;
}

/* Scrollbars */
html.light ::-webkit-scrollbar-track {
    background: #F2EDE4 !important;
}

html.light ::-webkit-scrollbar-thumb {
    background: #C5BCAE !important;
}

html.light ::-webkit-scrollbar-thumb:hover {
    background: #2D4F23 !important;
}

/* ==========================================================================
   PWA & SMARTPHONE OPTIMIZATIONS (iPhone Notch, Safe Areas, Touch Feel)
   ========================================================================== */
header {
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
    min-height: 3.75rem;
}

@supports (padding-top: env(safe-area-inset-top)) {
    main {
        padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }
    footer {
        padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* No-Scrollbar utility for sliding button bars */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Touch & Native App Ergonomics */
html {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
}

/* Native feel in standalone PWA mode */
@media all and (display-mode: standalone) {
    header {
        user-select: none;
        -webkit-user-select: none;
    }
    .jace-btn, .jace-switcher-btn, .jace-pill-neutral, .jace-pill-gold {
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Touch target sizing, mobile card radius & iOS auto-zoom prevention */
@media (max-width: 640px) {
    .jace-card {
        border-radius: 1.125rem !important;
    }
    .jace-btn, .jace-switcher-btn {
        min-height: 36px;
    }
    input, select {
        font-size: 16px !important; /* Prevents iOS Safari auto-zoom on input focus */
    }
}