/* ==========================================================================
   BRLove API - Global Unified Theme Engine 4.0
   Clean White (Light) & Cyber Obsidian (Dark) + 6 Reactive Color Palettes
   Engineered for Instant Switching, Maximum Contrast, and Flawless Aesthetics
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis Base (Clean White vs Cyber Dark)
   -------------------------------------------------------------------------- */
:root {
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f1f5f9;
    --bg-surface-subtle: #f8fafc;
    --bg-sidebar: #ffffff;
    --border-color: #e2e8f0;
    --border-highlight: #cbd5e1;
    --text-heading: #0f172a;
    --text-body: #1e293b;
    --text-muted: #64748b;
    --nav-bg: rgba(255, 255, 255, 0.96);
    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    --code-bg: #0f172a;
    --code-text: #f8fafc;
    
    /* Padrão: Cyber Neon (purple_cyan) */
    --accent-primary: #6366f1;
    --accent-primary-hover: #4f46e5;
    --accent-secondary: #06b6d4;
    --active-nav-bg: rgba(99, 102, 241, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --brand-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #06b6d4 100%);
    --badge-bg: #eef2ff;
    --badge-text: #4338ca;
    --badge-border: #c7d2fe;
}

/* Modo Escuro Nativo (suporta classe .dark e data-theme="dark") */
html.dark, html[data-theme="dark"] {
    --bg-base: #07090e;
    --bg-surface: #0d121f;
    --bg-surface-elevated: #141b2d;
    --bg-surface-subtle: #0f172a;
    --bg-sidebar: rgba(11, 15, 25, 0.96);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.16);
    --text-heading: #f8fafc;
    --text-body: #94a3b8;
    --text-muted: #64748b;
    --nav-bg: rgba(7, 9, 14, 0.92);
    --card-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    --code-bg: #03060d;
    --code-text: #f1f5f9;

    --accent-primary: #818cf8;
    --accent-primary-hover: #6366f1;
    --accent-secondary: #38bdf8;
    --active-nav-bg: rgba(99, 102, 241, 0.22);
    --brand-btn-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --brand-gradient: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #38bdf8 100%);
    --badge-bg: rgba(99, 102, 241, 0.15);
    --badge-text: #c7d2fe;
    --badge-border: rgba(99, 102, 241, 0.35);
}

/* --------------------------------------------------------------------------
   2. As 6 Paletas de Cores Reativas (Light & Dark)
   -------------------------------------------------------------------------- */

/* 1. Cyberpunk Neon (purple_cyan) */
html[data-scheme="purple_cyan"] {
    --accent-primary: #6366f1;
    --accent-secondary: #06b6d4;
    --active-nav-bg: rgba(99, 102, 241, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --brand-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #06b6d4 100%);
    --badge-bg: #eef2ff;
    --badge-text: #4338ca;
    --badge-border: #c7d2fe;
}
html.dark[data-scheme="purple_cyan"],
html[data-theme="dark"][data-scheme="purple_cyan"] {
    --accent-primary: #818cf8;
    --accent-secondary: #38bdf8;
    --active-nav-bg: rgba(99, 102, 241, 0.22);
    --brand-btn-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --brand-gradient: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #38bdf8 100%);
    --badge-bg: rgba(99, 102, 241, 0.15);
    --badge-text: #c7d2fe;
    --badge-border: rgba(99, 102, 241, 0.35);
}

/* 2. Midnight Emerald (emerald_teal) */
html[data-scheme="emerald_teal"] {
    --accent-primary: #059669;
    --accent-secondary: #0d9488;
    --active-nav-bg: rgba(16, 185, 129, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    --brand-gradient: linear-gradient(135deg, #059669 0%, #10b981 50%, #06b6d4 100%);
    --badge-bg: #ecfdf5;
    --badge-text: #065f46;
    --badge-border: #a7f3d0;
}
html.dark[data-scheme="emerald_teal"],
html[data-theme="dark"][data-scheme="emerald_teal"] {
    --accent-primary: #10b981;
    --accent-secondary: #14b8a6;
    --active-nav-bg: rgba(16, 185, 129, 0.22);
    --brand-btn-gradient: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    --brand-gradient: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #22d3ee 100%);
    --badge-bg: rgba(16, 185, 129, 0.15);
    --badge-text: #a7f3d0;
    --badge-border: rgba(16, 185, 129, 0.35);
}

/* 3. Ocean Sapphire (blue_indigo) */
html[data-scheme="blue_indigo"] {
    --accent-primary: #2563eb;
    --accent-secondary: #0284c7;
    --active-nav-bg: rgba(37, 99, 235, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
    --brand-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #06b6d4 100%);
    --badge-bg: #eff6ff;
    --badge-text: #1e40af;
    --badge-border: #bfdbfe;
}
html.dark[data-scheme="blue_indigo"],
html[data-theme="dark"][data-scheme="blue_indigo"] {
    --accent-primary: #3b82f6;
    --accent-secondary: #38bdf8;
    --active-nav-bg: rgba(59, 130, 246, 0.22);
    --brand-btn-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #38bdf8 100%);
    --badge-bg: rgba(59, 130, 246, 0.15);
    --badge-text: #bfdbfe;
    --badge-border: rgba(59, 130, 246, 0.35);
}

/* 4. Sunset Gold (amber_orange) */
html[data-scheme="amber_orange"] {
    --accent-primary: #d97706;
    --accent-secondary: #ea580c;
    --active-nav-bg: rgba(245, 158, 11, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
    --brand-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
    --badge-bg: #fffbeb;
    --badge-text: #92400e;
    --badge-border: #fde68a;
}
html.dark[data-scheme="amber_orange"],
html[data-theme="dark"][data-scheme="amber_orange"] {
    --accent-primary: #f59e0b;
    --accent-secondary: #fb923c;
    --active-nav-bg: rgba(245, 158, 11, 0.22);
    --brand-btn-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --brand-gradient: linear-gradient(135deg, #f59e0b 0%, #fb923c 50%, #fcd34d 100%);
    --badge-bg: rgba(245, 158, 11, 0.15);
    --badge-text: #fde68a;
    --badge-border: rgba(245, 158, 11, 0.35);
}

/* 5. Crimson Rose (rose_crimson) */
html[data-scheme="rose_crimson"] {
    --accent-primary: #e11d48;
    --accent-secondary: #be123c;
    --active-nav-bg: rgba(225, 29, 72, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    --brand-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 50%, #fb7185 100%);
    --badge-bg: #fff1f2;
    --badge-text: #9f1239;
    --badge-border: #fecdd3;
}
html.dark[data-scheme="rose_crimson"],
html[data-theme="dark"][data-scheme="rose_crimson"] {
    --accent-primary: #f43f5e;
    --accent-secondary: #fb7185;
    --active-nav-bg: rgba(244, 63, 94, 0.22);
    --brand-btn-gradient: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    --brand-gradient: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #fda4af 100%);
    --badge-bg: rgba(244, 63, 94, 0.15);
    --badge-text: #fecdd3;
    --badge-border: rgba(244, 63, 94, 0.35);
}

/* 6. Titanium Minimal (titanium_minimal) */
html[data-scheme="titanium_minimal"] {
    --accent-primary: #475569;
    --accent-secondary: #334155;
    --active-nav-bg: rgba(71, 85, 105, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    --brand-gradient: linear-gradient(135deg, #1e293b 0%, #334155 50%, #64748b 100%);
    --badge-bg: #f1f5f9;
    --badge-text: #1e293b;
    --badge-border: #cbd5e1;
}
html.dark[data-scheme="titanium_minimal"],
html[data-theme="dark"][data-scheme="titanium_minimal"] {
    --accent-primary: #94a3b8;
    --accent-secondary: #cbd5e1;
    --active-nav-bg: rgba(148, 163, 184, 0.22);
    --brand-btn-gradient: linear-gradient(135deg, #475569 0%, #334155 100%);
    --brand-gradient: linear-gradient(135deg, #64748b 0%, #94a3b8 50%, #e2e8f0 100%);
    --badge-bg: rgba(148, 163, 184, 0.15);
    --badge-text: #e2e8f0;
    --badge-border: rgba(148, 163, 184, 0.35);
}

/* 7. Claude Terracotta (claude_terracotta - Estilo Oficial Anthropic / InfiniteModel) */
html[data-scheme="claude_terracotta"] {
    --accent-primary: #d97736;
    --accent-primary-hover: #c9642c;
    --accent-secondary: #e27d42;
    --active-nav-bg: rgba(217, 119, 54, 0.12);
    --brand-btn-gradient: linear-gradient(135deg, #d97736 0%, #c9642c 100%);
    --brand-gradient: linear-gradient(135deg, #d97736 0%, #e27d42 50%, #f59e0b 100%);
    --badge-bg: #fff7ed;
    --badge-text: #9a3412;
    --badge-border: #ffedd5;
}
html.dark[data-scheme="claude_terracotta"],
html[data-theme="dark"][data-scheme="claude_terracotta"] {
    --bg-base: #141413 !important;
    --bg-surface: #1c1c1a !important;
    --bg-surface-elevated: #262624 !important;
    --bg-surface-subtle: #181816 !important;
    --bg-sidebar: #181816 !important;
    --border-color: rgba(255, 255, 255, 0.08) !important;
    --border-highlight: rgba(217, 119, 54, 0.35) !important;
    --text-heading: #faf9f6 !important;
    --text-body: #b4b0a8 !important;
    --text-muted: #8e8b85 !important;
    --nav-bg: rgba(20, 20, 19, 0.95) !important;
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8) !important;
    --code-bg: #10100f !important;
    --code-text: #faf9f6 !important;

    --accent-primary: #d97736 !important;
    --accent-primary-hover: #c9642c !important;
    --accent-secondary: #e27d42 !important;
    --active-nav-bg: rgba(217, 119, 54, 0.18) !important;
    --brand-btn-gradient: linear-gradient(135deg, #d97736 0%, #c9642c 100%) !important;
    --brand-gradient: linear-gradient(135deg, #d97736 0%, #e27d42 50%, #f59e0b 100%) !important;
    --badge-bg: rgba(217, 119, 54, 0.16) !important;
    --badge-text: #fed7aa !important;
    --badge-border: rgba(217, 119, 54, 0.35) !important;
}

/* Customizações refinadas específicas para o tema Claude Terracotta */
html.dark[data-scheme="claude_terracotta"] .glass-sidebar {
    background: #181816 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}
html.dark[data-scheme="claude_terracotta"] .glass-header {
    background: rgba(20, 20, 19, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
html.dark[data-scheme="claude_terracotta"] .sidebar-item-active {
    background: rgba(217, 119, 54, 0.16) !important;
    border-left: 3.5px solid #d97736 !important;
    color: #ffffff !important;
}
html.dark[data-scheme="claude_terracotta"] .glass-card,
html.dark[data-scheme="claude_terracotta"] .bg-gray-900,
html.dark[data-scheme="claude_terracotta"] .bg-gray-900\/80,
html.dark[data-scheme="claude_terracotta"] .bg-gray-900\/90,
html.dark[data-scheme="claude_terracotta"] .bg-gray-900\/50 {
    background-color: #1c1c1a !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
html.dark[data-scheme="claude_terracotta"] .bg-gray-950 {
    background-color: #141413 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
html.dark[data-scheme="claude_terracotta"] .bg-gray-800,
html.dark[data-scheme="claude_terracotta"] .bg-gray-800\/50,
html.dark[data-scheme="claude_terracotta"] .bg-gray-800\/60 {
    background-color: #262624 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark[data-scheme="claude_terracotta"] body {
    background-color: #141413 !important;
    color: #e5e5e2 !important;
}
html.dark[data-scheme="claude_terracotta"] .text-purple-400,
html.dark[data-scheme="claude_terracotta"] .text-indigo-400 {
    color: #d97736 !important;
}
html.dark[data-scheme="claude_terracotta"] .text-cyan-400,
html.dark[data-scheme="claude_terracotta"] .text-cyan-300 {
    color: #e27d42 !important;
}
html.dark[data-scheme="claude_terracotta"] .border-purple-500\/30,
html.dark[data-scheme="claude_terracotta"] .border-cyan-500\/30,
html.dark[data-scheme="claude_terracotta"] .border-indigo-500\/30 {
    border-color: rgba(217, 119, 54, 0.3) !important;
}
html.dark[data-scheme="claude_terracotta"] .bg-purple-500\/20,
html.dark[data-scheme="claude_terracotta"] .bg-cyan-500\/20,
html.dark[data-scheme="claude_terracotta"] .bg-indigo-500\/20 {
    background-color: rgba(217, 119, 54, 0.15) !important;
    color: #fed7aa !important;
}
html.dark[data-scheme="claude_terracotta"] .bg-gradient-to-r.from-purple-600,
html.dark[data-scheme="claude_terracotta"] .bg-gradient-to-tr.from-purple-600 {
    background-image: linear-gradient(135deg, #d97736 0%, #c9642c 100%) !important;
}



/* --------------------------------------------------------------------------
   3. Aplicação Universal do Tema aos Componentes
   -------------------------------------------------------------------------- */

/* Botões de Ação do Sistema */
.btn-brand,
.gradient-brand {
    background: var(--brand-btn-gradient) !important;
    color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-brand:hover,
.gradient-brand:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
}

/* Texto Gradiente de Marca */
.gradient-brand-text {
    background: var(--brand-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Item Ativo da Barra Lateral (Muda conforme o esquema escolhido!) */
.sidebar-item-active {
    background: var(--active-nav-bg) !important;
    border-left: 4px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
}
html.dark .sidebar-item-active,
html[data-theme="dark"] .sidebar-item-active {
    color: #ffffff !important;
}

/* Botão Seja Revendedor */
.btn-reseller-badge {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.btn-reseller-badge:hover {
    background-color: #fef3c7 !important;
    color: #78350f !important;
    border-color: #fcd34d !important;
}
html.dark .btn-reseller-badge,
html[data-theme="dark"] .btn-reseller-badge {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
html.dark .btn-reseller-badge:hover,
html[data-theme="dark"] .btn-reseller-badge:hover {
    background-color: rgba(245, 158, 11, 0.25) !important;
    color: #fde68a !important;
}

/* --------------------------------------------------------------------------
   4. Modo Claro (Clean White) - Fundo Branco Limpo & Zero Cinza Lama
   -------------------------------------------------------------------------- */
html:not(.dark) body,
html[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

html:not(.dark) .bg-gray-950,
html:not(.dark) .bg-slate-950,
html[data-theme="light"] .bg-gray-950,
html[data-theme="light"] .bg-slate-950 {
    background-color: #f8fafc !important;
}

/* Cartões Principais (Glass & Glass-Card) no modo claro */
html:not(.dark) .glass,
html:not(.dark) .glass-card,
html:not(.dark) .surface-card,
html[data-theme="light"] .glass,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .surface-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}

/* Retângulos Internos de Modelos e Logs no Dashboard */
html:not(.dark) [class*="bg-gray-900"],
html:not(.dark) [class*="bg-gray-800"],
html:not(.dark) [class*="bg-slate-900"],
html:not(.dark) [class*="bg-slate-800"],
html[data-theme="light"] [class*="bg-gray-900"],
html[data-theme="light"] [class*="bg-gray-800"],
html[data-theme="light"] [class*="bg-slate-900"],
html[data-theme="light"] [class*="bg-slate-800"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Bordas em geral no modo claro */
html:not(.dark) [class*="border-gray-800"],
html:not(.dark) [class*="border-gray-700"],
html:not(.dark) [class*="border-slate-800"],
html[data-theme="light"] [class*="border-gray-800"],
html[data-theme="light"] [class*="border-gray-700"],
html[data-theme="light"] [class*="border-slate-800"] {
    border-color: #e2e8f0 !important;
}

/* Tipografia de Alto Contraste no modo claro */
html:not(.dark) .text-white,
html[data-theme="light"] .text-white {
    color: #0f172a !important;
}
html:not(.dark) .text-gray-100,
html[data-theme="light"] .text-gray-100 {
    color: #0f172a !important;
}
html:not(.dark) .text-gray-200,
html[data-theme="light"] .text-gray-200 {
    color: #1e293b !important;
}
html:not(.dark) .text-gray-300,
html[data-theme="light"] .text-gray-300 {
    color: #334155 !important;
}
html:not(.dark) .text-gray-400,
html[data-theme="light"] .text-gray-400 {
    color: #475569 !important;
}
html:not(.dark) .text-gray-500,
html[data-theme="light"] .text-gray-500 {
    color: #64748b !important;
}

/* Cores de Destaque no modo claro */
html:not(.dark) .text-cyan-300,
html:not(.dark) .text-cyan-400,
html[data-theme="light"] .text-cyan-300,
html[data-theme="light"] .text-cyan-400 {
    color: #0369a1 !important;
    font-weight: 700 !important;
}
html:not(.dark) .text-purple-300,
html:not(.dark) .text-purple-400,
html[data-theme="light"] .text-purple-300,
html[data-theme="light"] .text-purple-400 {
    color: #6d28d9 !important;
    font-weight: 600 !important;
}
html:not(.dark) .text-indigo-300,
html:not(.dark) .text-indigo-400,
html[data-theme="light"] .text-indigo-300,
html[data-theme="light"] .text-indigo-400 {
    color: #4338ca !important;
    font-weight: 600 !important;
}

/* Sidebar no Modo Claro */
html:not(.dark) .glass-sidebar,
html[data-theme="light"] .glass-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) .glass-sidebar nav a:not(.sidebar-item-active),
html[data-theme="light"] .glass-sidebar nav a:not(.sidebar-item-active) {
    color: #334155 !important;
}
html:not(.dark) .glass-sidebar nav a:not(.sidebar-item-active):hover,
html[data-theme="light"] .glass-sidebar nav a:not(.sidebar-item-active):hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Header no Modo Claro */
html:not(.dark) .glass-header,
html:not(.dark) .glass-nav,
html[data-theme="light"] .glass-header,
html[data-theme="light"] .glass-nav {
    background-color: var(--nav-bg) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) .glass-header button,
html:not(.dark) .glass-header a,
html[data-theme="light"] .glass-header button,
html[data-theme="light"] .glass-header a {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

/* Formulários no modo claro */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Manter texto branco EXCLUSIVAMENTE em botões com gradiente */
html:not(.dark) .btn-brand,
html:not(.dark) .btn-brand *,
html[data-theme="light"] .btn-brand,
html[data-theme="light"] .btn-brand * {
    color: #ffffff !important;
}

/* Blocos de Código em Terminal escuro limpo */
html:not(.dark) pre,
html:not(.dark) .code-block,
html[data-theme="light"] pre,
html[data-theme="light"] .code-block {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #1e293b !important;
}
html:not(.dark) pre *,
html:not(.dark) .code-block *,
html[data-theme="light"] pre *,
html[data-theme="light"] .code-block * {
    color: inherit;
}

/* ==========================================================================
   Responsividade Mobile & Botões de Controle
   ========================================================================== */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Botões de Controle de Tema e Paleta */
.btn-theme-toggle,
.btn-scheme-picker {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html:not(.dark) .btn-theme-toggle,
html:not(.dark) .btn-scheme-picker,
html[data-theme="light"] .btn-theme-toggle,
html[data-theme="light"] .btn-scheme-picker {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

html:not(.dark) .btn-theme-toggle:hover,
html:not(.dark) .btn-scheme-picker:hover,
html[data-theme="light"] .btn-theme-toggle:hover,
html[data-theme="light"] .btn-scheme-picker:hover {
    background-color: #e2e8f0 !important;
}

/* Scroll suave e seguro para tabelas no mobile */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}