/* =========================================
   1. CORE THEME & RESET
   ========================================= */
body {
    background-color: #0f172a;
    font-family: 'Inter', sans-serif;
    color: #e2e8f0;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
}

/* =========================================
   2. SCROLLBARS (Desktop Only)
   ========================================= */
@media (min-width: 1024px) {
    body { overflow: hidden; } /* Locks viewport on desktop */
    
    .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #1e293b; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #64748b; border-radius: 3px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}

.subtabs-container::-webkit-scrollbar { height: 4px; }
.subtabs-container::-webkit-scrollbar-track { background: transparent; }
.subtabs-container::-webkit-scrollbar-thumb { background: #475569; border-radius: 2px; }
.subtabs-container { scrollbar-width: thin; scrollbar-color: #475569 transparent; }

/* =========================================
   3. MOBILE LAYOUT ADJUSTMENTS
   ========================================= */
@media (max-width: 1024px) {
    .mobile-panel {
        min-height: 50vh;
        width: 100% !important;
        height: auto !important;
        /* Let the parent container handle scrolling now to prevent double-scrollbars */
    }
    
    .mobile-graph {
        min-height: 400px; /* Ensure chart doesn't squish to 0px */
        height: auto !important;
        width: 100% !important;
    }
    
    /* Force panels to stack full-width on mobile, overriding any JS inline styles */
    #cf-left-panel, #cf-right-panel, #mixer-left-panel, #mixer-right-panel {
        width: 100% !important;
    }

    .resizer { display: none !important; }
    .digital-display { min-width: 80px; }
    .pot-row { margin-bottom: 0.5rem; }
}

/* =========================================
   4. ROW & DRAWER SYSTEM
   ========================================= */
:root { --row-pad: 0.75rem; --row-gap: 0.75rem; }

/* Main Container for each Expense Item */
.pot-row {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 0.75rem;
    background-color: rgba(30, 41, 59, 0.6);
    border-radius: 0.75rem;
    
    /* Visible Borders */
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent;
    border-top: 3px solid #475569; 
    border-bottom: 1px solid #1e293b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    
    transition: all 0.2s ease-in-out;
}

/* The Top Bar (Always Visible) */
.row-main-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    min-height: 64px; /* Prevents height collapse */
    width: 100%;
}

/* The Expandable Drawer (Settings) using Modern Grid Trick */
.settings-drawer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    background-color: #020617;
    border-top: 0px solid transparent;
}

.settings-drawer-wrapper.open {
    grid-template-rows: 1fr;
    border-top: 1px solid #334155;
}

.settings-drawer-content {
    overflow: hidden;
    padding: 0 1rem;
}

.settings-drawer-wrapper.open .settings-drawer-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Dynamic Border Colors */
.border-t-red-500 { border-top-color: #ef4444 !important; }
.border-t-blue-500 { border-top-color: #3b82f6 !important; }
.border-t-purple-500 { border-top-color: #a855f7 !important; }
.border-t-amber-500 { border-top-color: #f59e0b !important; }
.border-t-orange-500 { border-top-color: #f97316 !important; }
.border-t-emerald-500 { border-top-color: #10b981 !important; }
.border-t-slate-600 { border-top-color: #475569 !important; }

/* Chevron Animation */
.chevron-icon { transition: transform 0.3s ease; }
.chevron-icon.rotate { transform: rotate(180deg); }

/* =========================================
   5. UI ELEMENTS
   ========================================= */

/* Navigation Tabs */
.nav-tab {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: all 0.2s;
    border: 1px solid #334155;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
    cursor: pointer;
    flex: 1;
}
@media (min-width: 768px) { .nav-tab { flex: none; } }
.nav-tab-inactive { background-color: #1e293b; color: #94a3b8; }
.nav-tab-inactive:hover { background-color: #e2e8f0; color: #0f172a; border-color: white; }
.nav-tab-active { background-color: #0ea5e9; color: white; border-color: #38bdf8; box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2); }

/* Inputs & Displays */
input[type="text"], input[type="number"], input[type="date"] {
    background: transparent;
    outline: none;
    font-family: 'Inter', sans-serif;
}

/* Digital Amount Display */
.digital-display {
    background: #0f172a;
    border: 1px solid #334155;
    color: #38bdf8;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    min-width: 100px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
}

/* Hide number spinners */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
    width: 12px; height: 12px;
}

/* Color Picker Swatch */
.color-swatch {
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: transform 0.1s, border-color 0.1s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}
.color-swatch:hover { transform: scale(1.1); border-color: white; }

/* Sliders */
.fader-track {
    -webkit-appearance: none; width: 100%; height: 8px;
    background: #1e293b; border-radius: 4px; outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.fader-track::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 32px;
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    border-radius: 3px; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    border: 1px solid #0ea5e9; margin-top: -2px;
}
.fader-track.locked { opacity: 0.5; }
.fader-track.locked::-webkit-slider-thumb {
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); border-color: #ef4444;
}

/* Scanner Slider */
.scanner-range { -webkit-appearance: none; width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; outline: none; }
.scanner-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
    background: white; cursor: pointer;
    box-shadow: 0 0 5px rgba(255,255,255,0.5); transition: transform 0.1s;
}
.scanner-range::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Animations */
@keyframes fadeInRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.animate-fade-in-right { animation: fadeInRight 0.3s ease-out forwards; }

/* Custom Checkbox */
.custom-checkbox { -webkit-appearance: none; appearance: none; background-color: #1e293b; margin: 0; }
.custom-checkbox:checked { background-color: #ef4444; }

/* Selects */
.cf-freq-select {
    background-color: black; color: #38bdf8;
    font-size: 10px; font-weight: bold; text-transform: uppercase;
    outline: none; border: 1px solid #334155; border-radius: 4px;
    padding: 2px 4px; cursor: pointer; text-align: center;
    appearance: none; transition: border-color 0.2s;
}
.cf-freq-select:hover { border-color: #38bdf8; }

.total-freq-select {
    background-color: transparent; color: #64748b;
    font-size: 10px; font-weight: bold; outline: none;
    cursor: pointer; text-align: center; appearance: none;
    transition: color 0.2s;
}
.total-freq-select:hover { color: white; }

/* Resizer */
.resizer {
    width: 8px; background: #0f172a;
    border-left: 1px solid #1e293b; border-right: 1px solid #1e293b;
    cursor: col-resize; transition: background 0.2s;
    z-index: 50; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center;
}
.resizer:hover, .resizer.active { background: #1e293b; }
.resizer::after { content: ''; width: 2px; height: 24px; background-color: #475569; border-radius: 2px; }
.resizer:hover::after, .resizer.active::after { background-color: #38bdf8; }

/* Login Screen */
#login-screen { background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, #020617 100%); }
.login-input {
    width: 100%; background-color: #0f172a;
    border: 1px solid #334155; border-radius: 0.5rem;
    padding: 0.75rem 1rem; color: white; outline: none;
    transition: all 0.2s;
}
.login-input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 1px #0ea5e9; }

/* --- SNAPSHOT (GHOST) ROW STYLING --- */
.snapshot-ghost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(236, 72, 153, 0.3);
    background-color: rgba(236, 72, 153, 0.08);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.snapshot-label { color: #f472b6; text-transform: uppercase; letter-spacing: 0.05em; }
.snapshot-value { color: #f472b6; font-weight: 800; font-size: 0.8rem; }

/* Orphaned Row (Deleted Item) Styling */
.pot-row.orphaned {
    border-left-color: #ec4899 !important;
    border-right-color: #ec4899 !important;
    border-top: 3px dashed #ec4899;
    opacity: 0.8;
}
.pot-row.orphaned .row-main-bar {
    opacity: 0.5;
    pointer-events: none;
}


/* =========================================
   6. LIGHT MODE OVERRIDES
   ========================================= */
body.light-mode { background-color: #f8fafc; color: #0f172a; }

/* Force high-contrast hover states on dropdowns in daylight mode */
body.light-mode #nav-dropdown-desktop button:hover,
body.light-mode #mobile-menu button:hover,
body.light-mode #login-dropdown button:hover {
    background-color: #e2e8f0 !important; 
    color: #0f172a !important;            
}

/* Backgrounds & Panels */
.light-mode .bg-slate-900 { background-color: #f8fafc !important; }
.light-mode .bg-slate-800 { background-color: #ffffff !important; border-color: #e2e8f0 !important; }
.light-mode .bg-slate-700 { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1e293b !important; }
.light-mode .bg-slate-900\/50, 
.light-mode .bg-slate-900\/40,
.light-mode .bg-slate-900\/30 { background-color: #f1f5f9 !important; }

.light-mode .bg-slate-800\/50, 
.light-mode .bg-slate-800\/80,
.light-mode .bg-slate-800\/40 { background-color: #ffffff !important; border-color: #e2e8f0 !important; }

.light-mode .bg-black { background-color: #f1f5f9 !important; color: #0f172a !important; border-color: #cbd5e1 !important; }

/* Row Backgrounds */
.light-mode .pot-row { background-color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.light-mode .settings-drawer-wrapper { background-color: #f8fafc !important; border-top-color: #e2e8f0 !important; }

/* Borders */
.light-mode .border-slate-800 { border-color: #e2e8f0 !important; }
.light-mode .border-slate-700 { border-color: #cbd5e1 !important; }
.light-mode .border-slate-600 { border-color: #94a3b8 !important; }
.light-mode .border-slate-500 { border-color: #64748b !important; }

/* Text Colors */
.light-mode .text-white { color: #0f172a !important; }
.light-mode .text-slate-200, .light-mode .text-slate-300 { color: #1e293b !important; }
.light-mode .text-slate-400 { color: #334155 !important; }
.light-mode .text-slate-500, .light-mode .text-slate-600 { color: #475569 !important; }

/* UI Colors */
.light-mode .text-sky-400 { color: #0284c7 !important; }
.light-mode .text-emerald-400 { color: #059669 !important; }
.light-mode .text-red-400 { color: #dc2626 !important; }
.light-mode .text-amber-400 { color: #d97706 !important; }
.light-mode .text-orange-400 { color: #ea580c !important; }
.light-mode .text-purple-400, .light-mode .text-purple-500 { color: #7e22ce !important; }
.light-mode .text-pink-400 { color: #be185d !important; }

/* Inputs & Tracks */
.light-mode input, .light-mode select { color: #0f172a !important; }
.light-mode input::placeholder { color: #64748b !important; }
.light-mode .digital-display { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.light-mode .fader-track { background: #cbd5e1 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important; }
.light-mode .scanner-range::-webkit-slider-thumb { background: #2563eb !important; box-shadow: 0 0 5px rgba(37, 99, 235, 0.5) !important; }

/* Monzo Buttons */
.light-mode .monzo-btn-active { border-color: black !important; background-color: #f1f5f9; }
.light-mode .monzo-btn-inactive { background-color: #e2e8f0; color: #475569; border-color: #94a3b8; }

/* Resizer */
.light-mode .resizer { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
.light-mode .resizer:hover { background: #e2e8f0 !important; }
.light-mode .resizer::after { background-color: #94a3b8 !important; }

/* Hover States */
.light-mode .hover\:text-white:hover { color: #000000 !important; }
.light-mode .hover\:bg-slate-800:hover { background-color: #e2e8f0 !important; color: #0f172a !important; }

/* Light Mode Overrides (Snapshots) */
body.light-mode .snapshot-ghost-row {
    background-color: #fce7f3;
    border-top-color: #fbcfe8;
}
body.light-mode .snapshot-label { color: #be185d; }
body.light-mode .snapshot-value { color: #be185d; }

/* Fix Toggle Switch Contrast in Light Mode */
body.light-mode input.peer:checked ~ div {
    background-color: #3b82f6 !important; /* Turns Blue when ON */
    border-color: #2563eb !important;
}

body.light-mode input.peer:not(:checked) ~ div {
    background-color: #94a3b8 !important; /* Darkens the track when OFF so the white circle pops */
}