/* ============================================
   LIGHT MODE FIX — Dashboard de Tráfego
   Correções abrangentes para o modo claro
   ============================================ */

/* ---- Sidebar ---- */
.light-mode .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-right: 1px solid rgba(0,0,0,0.08);
}
.light-mode .sidebar .nav-item {
    color: #475569;
}
.light-mode .sidebar .nav-item:hover {
    background: rgba(0,0,0,0.04);
    color: #0f172a;
}
.light-mode .sidebar .nav-item.active {
    background: rgba(124,58,237,0.08);
    color: #7c3aed;
}
.light-mode .sidebar-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.light-mode .sidebar-logo {
    color: #0f172a;
}
.light-mode .sidebar-footer {
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* ---- Header ---- */
.light-mode .top-header {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.light-mode .header-title {
    color: #0f172a;
}
.light-mode .filter-label {
    color: #64748b;
}
.light-mode .filter-select {
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}
.light-mode .filter-select:hover {
    border-color: rgba(0,0,0,0.2);
}
.light-mode .filter-divider {
    background: rgba(0,0,0,0.08);
}

/* ---- Source Chips (header) ---- */
.light-mode .source-chip {
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
    color: #64748b;
}
.light-mode .source-chip:hover {
    border-color: rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.04);
}
.light-mode .source-chip-dot {
    background: rgba(0,0,0,0.15);
}
.light-mode .source-chip.active[data-source="meta"] {
    background: rgba(24,119,242,0.08);
    border-color: rgba(24,119,242,0.3);
    color: #1877f2;
}
.light-mode .source-chip.active[data-source="google"] {
    background: rgba(66,133,244,0.08);
    border-color: rgba(66,133,244,0.3);
    color: #4285f4;
}

/* ---- Source Config Panel ---- */
.light-mode .source-config-panel {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.light-mode .source-panel-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #fafbfc;
}
.light-mode .source-panel-select {
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,0.1);
    color: #0f172a;
}
.light-mode .source-panel-footer {
    border-top: 1px solid rgba(0,0,0,0.06);
}
.light-mode .source-config-overlay {
    background: rgba(0,0,0,0.2);
}

/* ---- Botão Atualizar ---- */
.light-mode .btn-apply-filters {
    background: #7c3aed;
    color: white;
}
.light-mode .btn-apply-filters:hover {
    background: #6d28d9;
}

/* ---- Cards (page content) ---- */
.light-mode .card,
.light-mode [class*="card"] {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ---- Main Content ---- */
.light-mode .main-content {
    background: #f8fafc;
}
.light-mode .page-content {
    color: #0f172a;
}

/* ---- Kit do Cliente button ---- */
.light-mode .btn-client-kit {
    background: rgba(124,58,237,0.08);
    border-color: rgba(124,58,237,0.2);
    color: #7c3aed;
}

/* ---- KPI Cards — gradient cards são OK, mas labels precisam ajuste ---- */
.light-mode .kpi-card .kpi-label {
    color: rgba(255,255,255,0.85);
}

/* ---- Texts that use hardcoded dark-mode colors ---- */
.light-mode h1, .light-mode h2, .light-mode h3, .light-mode h4, .light-mode h5 {
    color: #0f172a;
}

/* ---- Tables ---- */
.light-mode table {
    color: #0f172a;
}
.light-mode th {
    background: #f1f5f9;
    color: #475569;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.light-mode td {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    color: #334155;
}
.light-mode tr:hover td {
    background: rgba(0,0,0,0.02);
}

/* ---- Glass/overlay elements ---- */
.light-mode [style*="rgba(255,255,255,0.05)"],
.light-mode [style*="rgba(255, 255, 255, 0.05)"] {
    background: rgba(0,0,0,0.02) !important;
}
.light-mode [style*="rgba(255,255,255,0.08)"],
.light-mode [style*="rgba(255, 255, 255, 0.08)"] {
    border-color: rgba(0,0,0,0.08) !important;
}

/* ---- Modals / Overlays ---- */
.light-mode .ck-overlay {
    background: rgba(0,0,0,0.3);
}
.light-mode .ck-modal {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 25px 80px rgba(0,0,0,0.15);
}

/* ---- Inputs generais ---- */
.light-mode input[type="text"],
.light-mode input[type="password"],
.light-mode input[type="email"],
.light-mode input[type="url"],
.light-mode input[type="number"],
.light-mode textarea,
.light-mode select {
    background: #f8fafc;
    border-color: rgba(0,0,0,0.12);
    color: #0f172a;
}
.light-mode input:focus,
.light-mode textarea:focus,
.light-mode select:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.light-mode input::placeholder {
    color: #94a3b8;
}

/* ---- Buttons ---- */
.light-mode .btn {
    border-color: rgba(0,0,0,0.1);
}
.light-mode .btn-ghost {
    color: #475569;
    background: transparent;
}
.light-mode .btn-ghost:hover {
    background: rgba(0,0,0,0.04);
    color: #0f172a;
}

/* ---- Scrollbar ---- */
.light-mode ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.light-mode ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}
.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ---- User Chip ---- */
.light-mode #user-chip {
    background: rgba(124,58,237,0.06) !important;
    border-color: rgba(124,58,237,0.15) !important;
}
.light-mode #user-chip-name {
    color: #475569 !important;
}
.light-mode #user-menu {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* ---- Client Cards (Clientes tab) ---- */
.light-mode .client-card,
.light-mode [style*="api-block"] {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ---- Integration fields ---- */
.light-mode .integration-input {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #0f172a !important;
}

/* ---- Sidebar account switcher ---- */
.light-mode #sidebar-account-switcher > div {
    background: rgba(124,58,237,0.04) !important;
    border-color: rgba(124,58,237,0.12) !important;
}

/* ---- Toggle switch visual fix ---- */
.light-mode .toggle-slider {
    background: #e2e8f0;
}
.light-mode .toggle-switch input:checked + .toggle-slider {
    background: #7c3aed;
}

/* ---- Advanced filters row ---- */
.light-mode .advanced-filters-bar {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
}

/* ---- Evy Chat ---- */
.light-mode .evy-chat-container {
    background: #ffffff;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.light-mode .evy-chat-header {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

/* ---- Code blocks / pre ---- */
.light-mode pre, .light-mode code {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* ---- Charts container bg ---- */
.light-mode .chart-container,
.light-mode .chart-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
}

/* ---- Collapse button ---- */
.light-mode #btn-collapse-header {
    background: #f1f5f9 !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #475569 !important;
}

/* ---- Sidebar footer client info ---- */
.light-mode #client-name {
    color: #0f172a !important;
}
.light-mode #period-label {
    color: #64748b !important;
}