/* ── Theme CSS Custom Properties ───────────────────────────────── */
:root {
    color-scheme: dark;
    --bg-900: #0a0e17;
    --bg-800: #111827;
    --bg-700: #1a2035;
    --bg-600: #1e293b;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    --border-primary: #1e293b;
    --border-subtle: #334155;
    --input-bg: #1e293b;
    --input-placeholder: #475569;
    --gradient-start: #0a0e17;
    --gradient-mid: #111827;
    --gradient-end: #0f172a;
    --scrollbar-track: #0a0e17;
    --scrollbar-thumb: #64748b;
    --spinner-border: #1e293b;
    --spinner-active: #00d4aa;
    --error-bg: rgba(127,29,29,0.3);
    --error-border: rgba(153,27,27,0.4);
    --error-text: #f87171;
    --success-bg: rgba(6,78,59,0.3);
    --success-border: rgba(6,95,70,0.4);
    --success-text: #34d399;
    --modal-backdrop: rgba(0,0,0,0.6);
    --toggle-off: #1e293b;
    --btn-disabled: #475569;
    --date-picker-invert: 0.7;
    --date-picker-brightness: 2.2;
    --shadow-card: none;
    --accent-green: #00d4aa;
    --accent-green-dark: #00b894;
    --accent-green-text: #00d4aa;
}

body.light {
    color-scheme: light;
    --bg-900: #f1f5f9;
    --bg-800: #e2e8f0;
    --bg-700: #ffffff;
    --bg-600: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #334155;
    --text-muted: #475569;
    --text-faint: #64748b;
    --border-primary: #cbd5e1;
    --border-subtle: #e2e8f0;
    --input-bg: #f1f5f9;
    --input-placeholder: #94a3b8;
    --gradient-start: #f1f5f9;
    --gradient-mid: #e2e8f0;
    --gradient-end: #f1f5f9;
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #94a3b8;
    --spinner-border: #cbd5e1;
    --spinner-active: #00b894;
    --error-bg: rgba(254,226,226,0.6);
    --error-border: rgba(252,165,165,0.5);
    --error-text: #dc2626;
    --success-bg: rgba(209,250,229,0.6);
    --success-border: rgba(110,231,183,0.5);
    --success-text: #059669;
    --modal-backdrop: rgba(0,0,0,0.3);
    --toggle-off: #cbd5e1;
    --btn-disabled: #94a3b8;
    --date-picker-invert: 0;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
    --accent-green: #059669;
    --accent-green-dark: #047857;
    --accent-green-text: #059669;
}

/* ── Base ──────────────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-900);
    color: var(--text-primary);
}

/* Dark date picker — make entire input clickable */
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(var(--date-picker-invert)) brightness(var(--date-picker-brightness, 1));
    cursor: pointer;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes onAutofill { from {} to {} }

.spinner { width: 32px; height: 32px; border: 3px solid var(--spinner-border); border-top-color: var(--spinner-active); border-radius: 50%; animation: spin 0.7s linear infinite; }
.fade-in { animation: fadeIn 0.3s ease-out; }

/* Flag buttons */
.flag-btn { width: 28px; height: 20px; border-radius: 3px; cursor: pointer; opacity: 0.7; transition: all 0.2s; display: inline-block; }
.flag-btn:hover { opacity: 1; }

/* Lambo icon */
.lambo-icon {
    display: inline-block;
    width: 60px;
    height: 28px;
    background: url('/static/images/lambo-medium.png') no-repeat center/contain;
    vertical-align: middle;
    transition: background-image 0.5s ease;
}
.lambo-text { font-size: 1.5rem; font-weight: 700; color: var(--accent-green); }

/* Lambo deposit tiers — pre-colored images for cross-browser consistency */
.lambo-icon.lambo-silver   { background-image: url('/static/images/lambo-medium-silver.png'); }
.lambo-icon.lambo-platinum { background-image: url('/static/images/lambo-medium-platinum.png'); }
.lambo-icon.lambo-red      { background-image: url('/static/images/lambo-medium-red.png'); }
.lambo-icon.lambo-gold     { background-image: url('/static/images/lambo-medium-gold.png'); }

/* Dark Reader overrides — prevent it from mangling the lambo images */
[data-darkreader-mode] .lambo-icon,
.darkreader .lambo-icon,
html[data-darkreader-scheme] .lambo-icon { filter: none !important; }

/* Autofill detection (login page) */
input:-webkit-autofill { animation-name: onAutofill; }

/* ── Theme-aware utility classes ──────────────────────────────── */
/* These replace the Tailwind dark-* classes that can't use CSS vars */
.th-bg-900 { background: var(--bg-900) !important; }
.th-bg-800 { background: var(--bg-800) !important; }
.th-bg-700 { background: var(--bg-700) !important; }
.th-bg-600 { background: var(--bg-600) !important; }
.th-text-primary { color: var(--text-primary) !important; }
.th-text-secondary { color: var(--text-secondary) !important; }
.th-text-muted { color: var(--text-muted) !important; }
.th-text-faint { color: var(--text-faint) !important; }
.th-border { border-color: var(--border-primary) !important; }
.th-border-subtle { border-color: var(--border-subtle) !important; }
.th-input { background: var(--input-bg) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; }
.th-card { background: var(--bg-700) !important; border-color: var(--border-primary) !important; box-shadow: var(--shadow-card) !important; }
.th-header { background: var(--bg-800) !important; border-color: var(--border-primary) !important; }
.th-modal-backdrop { background: var(--modal-backdrop) !important; }
.th-error { background: var(--error-bg) !important; border-color: var(--error-border) !important; color: var(--error-text) !important; }
.th-success { background: var(--success-bg) !important; border-color: var(--success-border) !important; color: var(--success-text) !important; }
.th-gradient { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%) !important; }

/* ── Light theme accent color overrides ───────────────────────── */
/* Tailwind generates colors at build time, so we override them here for light mode */
body.light .text-accent-green { color: var(--accent-green-text) !important; }
body.light .bg-accent-green { background-color: var(--accent-green) !important; }
body.light .border-accent-green { border-color: var(--accent-green) !important; }
body.light .from-accent-green { --tw-gradient-from: var(--accent-green) !important; }
body.light .to-accent-green-dark { --tw-gradient-to: var(--accent-green-dark) !important; }
body.light .hover\:text-accent-green:hover { color: var(--accent-green-text) !important; }
body.light .hover\:border-accent-green\/20:hover { border-color: rgba(5,150,105,0.2) !important; }
body.light .bg-accent-green\/15 { background-color: rgba(5,150,105,0.15) !important; }
body.light .bg-accent-green\/\[0\.02\] { background-color: rgba(5,150,105,0.02) !important; }
body.light .hover\:bg-accent-green\/\[0\.02\]:hover { background-color: rgba(5,150,105,0.02) !important; }
body.light .focus\:border-accent-green:focus { border-color: var(--accent-green) !important; }