/* ==========================================
   EstacionAndo Admin — Tri-Theme System v3
   dark | dim | light
   Modern semantic tokens for every surface
   ========================================== */

/* ── Dark (OLED — default) ── */
:root,
:root[data-theme='dark'] {
    --color-primary: #6366f1;
    --color-primary-strong: #4f46e5;
    --color-primary-soft: #a5b4fc;
    --color-secondary: #10b981;
    --color-tertiary: #f59e0b;
    --color-accent-1: #38bdf8;
    --color-accent-2: #f472b6;
    --color-accent-3: #a78bfa;

    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-strong);
    --primary-light: var(--color-primary-soft);
    --secondary: var(--color-secondary);
    --accent: var(--color-accent-3);
    --accent2: var(--color-accent-1);
    --accent3: var(--color-accent-2);

    --bg-body: #000000;
    --bg-card: #0c0c0e;
    --bg-card-hover: #141418;
    --bg-sidebar: #060608;
    --bg-elevated: #111114;
    --surface: #0c0c0e;
    --surface-hover: rgba(99, 102, 241, 0.08);
    --surface-header: rgba(6, 8, 14, 0.92);
    --surface-overlay: rgba(0, 0, 0, 0.72);

    --text-main: #f4f4f5;
    --text-secondary: #9ca3af;
    --text-light: #6b7280;
    --text-white: #ffffff;
    --text-muted: #52525b;
    --text-title: #ffffff;
    --text-copy: #a1a1aa;

    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.12);

    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #38bdf8;
    --success-soft: rgba(16, 185, 129, 0.14);
    --warning-soft: rgba(245, 158, 11, 0.16);
    --danger-soft: rgba(239, 68, 68, 0.15);
    --info-soft: rgba(56, 189, 248, 0.14);

    --ring-focus: rgba(99, 102, 241, 0.28);
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    --gradient-sidebar-active: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-title: linear-gradient(135deg, #ffffff 0%, var(--primary-light) 60%, var(--accent) 100%);

    --glow-primary: 0 0 24px rgba(99, 102, 241, 0.3);
    --glow-success: 0 0 20px rgba(16, 185, 129, 0.25);
    --glow-info: 0 0 20px rgba(56, 189, 248, 0.25);

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.55);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.75);

    --surface-panel: var(--bg-card);
    --surface-panel-2: var(--bg-elevated);
    --surface-panel-hover: var(--bg-card-hover);
    --scrollbar-track: #050505;
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --atmosphere-strength: 0.85;

    color-scheme: dark;
}

/* ── Dim (Slate Midnight — intermediate) ── */
:root[data-theme='dim'] {
    --color-primary: #7c89ff;
    --color-primary-strong: #6366f1;
    --color-primary-soft: #a5b4fc;
    --color-secondary: #34d399;
    --color-tertiary: #fbbf24;
    --color-accent-1: #38bdf8;
    --color-accent-2: #f472b6;
    --color-accent-3: #c4b5fd;

    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-strong);
    --primary-light: var(--color-primary-soft);
    --secondary: var(--color-secondary);
    --accent: var(--color-accent-3);
    --accent2: var(--color-accent-1);
    --accent3: var(--color-accent-2);

    --bg-body: #12151c;
    --bg-card: #1a1f2b;
    --bg-card-hover: #222836;
    --bg-sidebar: #0f1219;
    --bg-elevated: #1e2433;
    --surface: #1a1f2b;
    --surface-hover: rgba(124, 137, 255, 0.1);
    --surface-header: rgba(15, 18, 28, 0.94);
    --surface-overlay: rgba(8, 10, 18, 0.76);

    --text-main: #e8ecf4;
    --text-secondary: #9aa3b5;
    --text-light: #7b8496;
    --text-white: #ffffff;
    --text-muted: #5f6778;
    --text-title: #f3f6fb;
    --text-copy: #b0b8c7;

    --border: rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.22);

    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #38bdf8;
    --success-soft: rgba(52, 211, 153, 0.14);
    --warning-soft: rgba(251, 191, 36, 0.14);
    --danger-soft: rgba(248, 113, 113, 0.14);
    --info-soft: rgba(56, 189, 248, 0.14);

    --ring-focus: rgba(124, 137, 255, 0.28);
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent2) 100%);
    --gradient-sidebar-active: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-title: linear-gradient(135deg, #f8fafc 0%, var(--primary-light) 60%, var(--accent) 100%);

    --glow-primary: 0 0 22px rgba(124, 137, 255, 0.22);
    --glow-success: 0 0 18px rgba(52, 211, 153, 0.2);
    --glow-info: 0 0 18px rgba(56, 189, 248, 0.2);

    --shadow-sm: 0 1px 4px rgba(2, 6, 18, 0.35);
    --shadow: 0 8px 24px rgba(2, 6, 18, 0.38);
    --shadow-lg: 0 16px 40px rgba(2, 6, 18, 0.45);
    --shadow-xl: 0 28px 56px rgba(2, 6, 18, 0.52);

    --surface-panel: var(--bg-card);
    --surface-panel-2: var(--bg-elevated);
    --surface-panel-hover: var(--bg-card-hover);
    --scrollbar-track: #10141d;
    --scrollbar-thumb: rgba(148, 163, 184, 0.22);
    --atmosphere-strength: 0.55;

    color-scheme: dark;
}

/* ── Light (Soft Cloud) ── */
:root[data-theme='light'] {
    --color-primary: #4f46e5;
    --color-primary-strong: #4338ca;
    --color-primary-soft: #818cf8;
    --color-secondary: #059669;
    --color-tertiary: #d97706;
    --color-accent-1: #0284c7;
    --color-accent-2: #db2777;
    --color-accent-3: #0d9488;

    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-strong);
    --primary-light: var(--color-primary-soft);
    --secondary: var(--color-secondary);
    --accent: var(--color-accent-3);
    --accent2: var(--color-accent-1);
    --accent3: var(--color-accent-2);

    --bg-body: #f3f6fc;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafd;
    --bg-sidebar: #eef2f9;
    --bg-elevated: #f8fafc;
    --surface: #ffffff;
    --surface-hover: rgba(79, 70, 229, 0.07);
    --surface-header: rgba(255, 255, 255, 0.94);
    --surface-overlay: rgba(15, 23, 42, 0.42);

    --text-main: #0f172a;
    --text-secondary: #475569;
    --text-light: #64748b;
    --text-white: #ffffff;
    --text-muted: #94a3b8;
    --text-title: #0f172a;
    --text-copy: #475569;

    --border: rgba(15, 23, 42, 0.09);
    --border-strong: rgba(15, 23, 42, 0.16);

    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0284c7;
    --success-soft: rgba(5, 150, 105, 0.1);
    --warning-soft: rgba(217, 119, 6, 0.1);
    --danger-soft: rgba(220, 38, 38, 0.1);
    --info-soft: rgba(2, 132, 199, 0.1);

    --ring-focus: rgba(79, 70, 229, 0.2);
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent2) 100%);
    --gradient-sidebar-active: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-title: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent) 100%);

    --glow-primary: 0 8px 24px rgba(79, 70, 229, 0.12);
    --glow-success: 0 8px 20px rgba(5, 150, 105, 0.1);
    --glow-info: 0 8px 20px rgba(2, 132, 199, 0.1);

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 24px 52px rgba(15, 23, 42, 0.12);

    --surface-panel: var(--bg-card);
    --surface-panel-2: var(--bg-elevated);
    --surface-panel-hover: var(--bg-card-hover);
    --scrollbar-track: #e8edf5;
    --scrollbar-thumb: rgba(100, 116, 139, 0.35);
    --atmosphere-strength: 0.18;

    color-scheme: light;
}

/* ── Global surfaces ── */
html,
body,
.admin-body {
    background: var(--bg-body) !important;
    color: var(--text-main);
    transition: background-color 0.35s ease, color 0.35s ease;
}

.main-content {
    background: var(--bg-body) !important;
}

.dashboard,
.content {
    color: var(--text-main);
}

.sidebar {
    background: var(--bg-sidebar) !important;
    border-right-color: var(--border) !important;
    color: var(--text-main);
}

.sidebar-header {
    border-bottom-color: var(--border) !important;
}

.header {
    background: var(--surface-header) !important;
    border-bottom-color: var(--border) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.sidebar-title {
    background: var(--gradient-title) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.sidebar-subtitle,
.nav-link {
    color: var(--text-secondary);
}

.nav-link:hover {
    background: var(--surface-hover) !important;
    color: var(--text-main) !important;
}

.nav-link.active {
    color: #ffffff !important;
}

.badge {
    color: #ffffff;
}

/* ── Cards & panels (override hardcoded dark values) ── */
.card,
.scene-card,
.stat-card,
.report-card,
.settings-card,
.glow-panel,
.table-container,
.activity-card,
.assistant-panel,
.kyc-card,
.kyc-detail-panel,
.info-box,
.settings-sidebar,
.filters-card,
.pulse-step,
.modal-content,
.shell-confirm-modal,
.login-panel,
.withdrawal-card,
.kyc-summary-card {
    background: var(--surface-panel) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover,
.scene-card:hover,
.report-card:hover,
.kyc-card:hover,
.setting-item:hover,
.stat-card:hover,
.activity-card:hover {
    background: var(--surface-panel-hover) !important;
    border-color: var(--border-strong) !important;
}

.scene-card.highlight {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border)) !important;
}

.filters-card {
    box-shadow: var(--shadow) !important;
}

.glow-panel {
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--info) 8%, var(--surface-panel)),
        color-mix(in srgb, var(--primary) 6%, var(--surface-panel))
    ) !important;
    border-color: color-mix(in srgb, var(--info) 18%, var(--border)) !important;
    box-shadow: var(--shadow) !important;
}

.pulse-step {
    background: var(--surface-panel-2) !important;
}

.pulse-step.active {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel)) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border)) !important;
    box-shadow: var(--glow-primary) !important;
}

.pulse-step:hover {
    background: var(--surface-panel-hover) !important;
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border)) !important;
}

.kyc-summary-card {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface-panel) 96%, var(--primary)),
        var(--surface-panel-2)
    ) !important;
}

.kyc-summary-card h3 {
    color: var(--text-secondary) !important;
}

.kyc-summary-card strong {
    color: var(--text-title) !important;
}

.kyc-summary-card small {
    color: var(--text-copy) !important;
}

/* ── Typography hierarchy ── */
.scene-card strong,
.pulse-step strong,
.report-card strong,
.stat-value,
.kyc-summary-card strong,
.header-title {
    color: var(--text-title) !important;
    -webkit-text-fill-color: currentColor !important;
}

.scene-card.highlight strong {
    background: linear-gradient(135deg, var(--text-title), var(--primary-light)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

:root[data-theme='light'] .scene-card.highlight strong {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.scene-card h3,
.report-card h3,
.pulse-step h4,
.card h3,
.card h4,
.settings-card h3,
.settings-card h4,
.activity-card header h3 {
    color: var(--text-secondary) !important;
}

.card p,
.card small,
.scene-card p,
.scene-card small,
.report-card p,
.report-card small,
.settings-card p,
.settings-card small,
.help-text,
.info-box p,
.setting-item .info p,
.breadcrumbs,
.breadcrumbs a {
    color: var(--text-copy) !important;
}

.breadcrumbs .current,
.setting-item .info strong,
.info-box h4 {
    color: var(--text-title) !important;
}

/* ── Forms ── */
input,
textarea,
select,
.filter-select,
.search-input {
    background: var(--surface-panel-2) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-light) !important;
}

input:focus,
textarea:focus,
select:focus,
.filter-select:focus,
.search-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--ring-focus) !important;
    background: var(--surface-panel) !important;
}

.setting-item {
    background: var(--surface-panel-2) !important;
    border-color: var(--border) !important;
}

.toggle-btn {
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
    border-color: var(--border);
}

.toggle-btn.active {
    background: var(--success);
}

.toggle-btn .dot {
    background: #ffffff;
}

/* ── Buttons ── */
.btn-secondary,
.theme-toggle,
.mobile-menu-btn,
.sidebar-toggle {
    background: var(--surface-panel-2) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

.btn-secondary:hover,
.theme-toggle:hover,
.mobile-menu-btn:hover {
    background: var(--surface-hover) !important;
    border-color: var(--border-strong) !important;
}

.btn-primary {
    background: var(--gradient-brand) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* ── Status & alerts ── */
.env-toggle.dev {
    background: var(--warning-soft) !important;
    border-color: color-mix(in srgb, var(--warning) 28%, transparent) !important;
    color: var(--warning) !important;
}

.env-toggle.prod {
    background: var(--success-soft) !important;
    border-color: color-mix(in srgb, var(--success) 28%, transparent) !important;
    color: var(--success) !important;
}

.env-toggle.maintenance {
    background: var(--danger-soft) !important;
    border-color: color-mix(in srgb, var(--danger) 28%, transparent) !important;
    color: var(--danger) !important;
}

.status-badge.pending {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
}

.status-badge.approved,
.status-badge.completed {
    background: var(--success-soft) !important;
    color: var(--success) !important;
}

.status-badge.rejected {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.status-badge.info {
    background: var(--info-soft) !important;
    color: var(--info) !important;
}

.trend.success { color: var(--success) !important; }
.trend.warning { color: var(--warning) !important; }
.trend.danger { color: var(--danger) !important; }

/* ── Tables ── */
.table-container thead th {
    background: color-mix(in srgb, var(--surface-panel-2) 92%, transparent) !important;
    color: var(--text-main) !important;
}

.table-container tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-panel)) !important;
}

.table-container td,
.table-container th {
    border-color: var(--border) !important;
    color: var(--text-main);
}

/* ── Modals & overlays ── */
.modal-overlay,
.sidebar-backdrop,
.shell-confirm-overlay {
    background: var(--surface-overlay) !important;
}

.modal-content,
.shell-confirm-modal {
    background: var(--surface-panel) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl) !important;
}

/* ── Atmosphere (ambient glow) ── */
.admin-atmosphere {
    opacity: var(--atmosphere-strength);
    transition: opacity 0.4s ease;
}

:root[data-theme='light'] .admin-atmosphere .layer {
    filter: blur(70px);
    opacity: 0.45;
}

/* ── Scrollbars ── */
::-webkit-scrollbar-track {
    background: var(--scrollbar-track) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
}

/* ── Theme toggle icons (3 states) ── */
.theme-toggle .theme-icon {
    display: none;
    width: 16px;
    height: 16px;
}

:root[data-theme='dark'] .theme-toggle .theme-icon-dark,
:root:not([data-theme]) .theme-toggle .theme-icon-dark {
    display: inline-block;
}

:root[data-theme='dim'] .theme-toggle .theme-icon-dim {
    display: inline-block;
}

:root[data-theme='light'] .theme-toggle .theme-icon-light {
    display: inline-block;
}

.theme-toggle .theme-label {
    font-size: 0;
    line-height: 1;
}

.theme-toggle .theme-label::after {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    content: 'Oscuro';
}

:root[data-theme='dim'] .theme-toggle .theme-label::after {
    content: 'Intermedio';
}

:root[data-theme='light'] .theme-toggle .theme-label::after {
    content: 'Claro';
}

@media (max-width: 768px) {
    .theme-toggle .theme-label {
        display: none;
    }
}

/* ── Login page ── */
.login-page {
    background: var(--bg-body) !important;
}

.login-panel,
.login-shell {
    background: var(--surface-panel) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* ── Section glow compatibility ── */
.nav-link:hover {
    transform: translateX(3px);
}

:root[data-theme='light'] .nav-link::after,
:root[data-theme='dim'] .nav-link::after {
    opacity: 0.35;
}

/* ── Save bar (settings mobile) ── */
.settings-save-bar {
    background: color-mix(in srgb, var(--surface-header) 96%, transparent) !important;
    border-top-color: var(--border) !important;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-open .settings-save-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(110%) !important;
}

/* ── Accounting module tokens ── */
:root[data-theme='light'] .acc-period-btn,
:root[data-theme='light'] .acc-tab {
    color: var(--text-secondary);
}

:root[data-theme='light'] .acc-period-btn.active,
:root[data-theme='light'] .acc-tab.active {
    color: var(--text-main);
}

/* ── Reduced motion preserved ── */
@media (prefers-reduced-motion: reduce) {
    html,
    body,
    .admin-body,
    .card,
    .scene-card,
    .header,
    .sidebar {
        transition: none !important;
    }
}