/* ============================================================================
   FUTURISTIC THEME — padrão visual oficial da plataforma (Design 3)
   ----------------------------------------------------------------------------
   Camada GLOBAL de componentes. Carregada por último no header.php, então
   sobrescreve os valores claros hardcoded dos componentes base sem precisar
   reescrever style.css/components.css/ga-ui.css.

   Princípios:
     • Dark + glassmorphism (blur translúcido) + bordas/realces neon ciano→magenta.
     • Reutiliza as variáveis de :root (style.css) → coeso e sem repetição.
     • SOMENTE visual. Não altera markup, dados ou comportamento.
   ============================================================================ */

/* ── Fundo global com brilho sutil ─────────────────────────────────────────── */
body {
    background:
        radial-gradient(1200px 420px at 85% -10%, rgba(168,85,247,.13), transparent 60%),
        radial-gradient(1000px 520px at -10% 4%, rgba(34,211,238,.11), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

/* Seleção de texto e foco coerentes com o accent */
::selection { background: rgba(34,211,238,.25); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Scrollbar futurista */
* { scrollbar-color: rgba(34,211,238,.35) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(34,211,238,.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,.4); background-clip: padding-box; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
    background: rgba(10,15,30,.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(34,211,238,.06);
}
.page-title { letter-spacing: .2px; }
.topbar-user:hover { background: var(--surface-2); }

/* ── Sidebar (já era escura; só harmoniza com o accent ciano) ───────────────── */
.sidebar { border-right: 1px solid var(--border); }
.sidebar-logo-icon svg { filter: drop-shadow(0 0 6px rgba(34,211,238,.5)); }
.sidebar-logo-text { background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Cards genéricos (glass + neon) ─────────────────────────────────────────── */
.card,
.chart-card {
    background: linear-gradient(160deg, rgba(34,211,238,.05), rgba(168,85,247,.04)), var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.card-title { color: var(--text); }

/* ── Tabelas ────────────────────────────────────────────────────────────────── */
.table-wrapper {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}
.table { background: transparent !important; color: var(--text); }
.table th {
    background: rgba(255,255,255,.03) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border) !important;
}
.table td { border-bottom: 1px solid var(--border) !important; color: var(--text); }
.table tbody tr:hover td { background: var(--surface-2) !important; }

/* ── Botões ───────────────────────────────────────────────────────────────── */
.btn-primary,
.c-btn-primary {
    background: var(--grad-neon) !important;
    border: none !important;
    color: #04121A !important;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 6px 18px rgba(34,211,238,.18);
}
.btn-primary:hover,
.c-btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 8px 26px rgba(34,211,238,.32) !important;
    transform: translateY(-1px);
}
.btn-secondary,
.c-btn-secondary,
.c-btn-ghost {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.btn-secondary:hover,
.c-btn-secondary:hover { background: rgba(34,211,238,.10) !important; border-color: var(--border-neon) !important; }
.btn-danger, .c-btn-danger { background: var(--danger) !important; color: #1a0606 !important; border: none !important; }

/* ── Formulários / inputs / selects ─────────────────────────────────────────── */
.form-control,
input[type="text"], input[type="number"], input[type="date"], input[type="search"],
input[type="email"], input[type="password"], input[type="time"], input[type="tel"],
input[type="url"], input[type="month"], input[type="week"], input[type="datetime-local"],
select, textarea {
    background: rgba(255,255,255,.05) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: rgba(135,148,179,.7); }
.form-control:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
}
/* opções do select em alguns browsers herdam o fundo claro */
select option { background: #0F1626; color: var(--text); }

/* ── Alertas (texto escuro → claro p/ contraste no dark) ────────────────────── */
.alert { border: 1px solid var(--border); }
.alert-success { color: #6EE7B7 !important; }
.alert-danger  { color: #FCA5A5 !important; }
.alert-warning { color: #FCD34D !important; }
.alert-info    { color: #7DD3FC !important; }

/* ── Modais (.c-modal e .ga-modal) ──────────────────────────────────────────── */
.c-modal, .ga-modal {
    background: linear-gradient(160deg, rgba(34,211,238,.06), rgba(168,85,247,.05)), #0C1322 !important;
    color: var(--text) !important;
    border: 1px solid var(--border-neon) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md), 0 0 40px rgba(34,211,238,.08) !important;
}
.c-modal::backdrop, .ga-modal::backdrop { background: rgba(2,6,18,.66) !important; backdrop-filter: blur(4px); }
.c-modal-hdr, .ga-modal-hdr,
.c-modal-footer, .ga-modal-footer { border-color: var(--border) !important; }
.c-modal-title, .ga-modal-title { color: var(--text) !important; }
.ga-modal-subtitle, .ga-modal-body { color: var(--text-muted) !important; }
.c-modal-close { color: var(--text-muted) !important; }
.c-modal-close:hover { background: var(--surface-2) !important; color: var(--text) !important; }

/* ── Divisores / código ─────────────────────────────────────────────────────── */
hr { border-color: var(--border); }
code, pre, kbd { background: rgba(255,255,255,.05); color: #8be9fd; border-radius: 6px; }

/* ============================================================================
   DASHBOARD (db-*) — visual Design 3 promovido a global
   ============================================================================ */
.db-total-card {
    background: linear-gradient(160deg, rgba(34,211,238,.07), rgba(168,85,247,.05)), var(--card-bg);
    backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 0 22px rgba(34,211,238,.06), inset 0 1px 0 rgba(255,255,255,.04);
}
.db-total-card .tl { color: var(--text-muted); letter-spacing: 1px; }
.db-total-card .tv {
    font-family: ui-monospace,'SF Mono',Menlo,monospace;
    background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.db-total-card .tv.text-success, .db-total-card .tv.text-danger { -webkit-text-fill-color: initial; background: none; }
.db-site-domain {
    font-family: ui-monospace,'SF Mono',Menlo,monospace; letter-spacing: .5px;
    background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.db-card {
    background: var(--card-bg); backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: 14px; border-left-width: 1px;
    box-shadow: 0 8px 30px rgba(3,7,18,.5);
}
.db-card.status-profitable { border-color: rgba(16,185,129,.45); box-shadow: 0 0 20px rgba(16,185,129,.16); }
.db-card.status-losing     { border-color: rgba(239,68,68,.45);  box-shadow: 0 0 20px rgba(239,68,68,.16); }
.db-card.status-warning    { border-color: rgba(245,158,11,.42); box-shadow: 0 0 20px rgba(245,158,11,.14); }
.db-metric   { background: var(--surface-2); border: 1px solid var(--border); }
.db-acct-hdr { background: var(--surface-2); border-left: 3px solid var(--primary); }
.db-acct-id  { background: rgba(255,255,255,.05); }
.db-card-badge.no_av { background: rgba(255,255,255,.07); color: #aab4cc; }
.db-site-analyze-btn { border-color: var(--primary); color: var(--primary); }
.db-site-analyze-btn:hover { background: var(--primary); color: #04121a; box-shadow: 0 0 18px rgba(34,211,238,.45); }
.db-filter { background: rgba(7,11,22,.85) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }

/* Skeleton loading em tons escuros (no claro ficava clarão) */
.db-skel, .db-total-card.is-loading .tv {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(34,211,238,.10) 50%, rgba(255,255,255,.04) 100%) !important;
    background-size: 200% 100% !important;
}

/* ============================================================================
   CORREÇÕES DE CONTRASTE NO DARK (ajuste geral)
   ----------------------------------------------------------------------------
   Superfícies com tint CLARO de status (linhas/cards/banners) e brancos
   genéricos (chips/botões/inputs) tinham texto claro herdado → ficavam
   ilegíveis. Aqui troco o FUNDO por uma versão escura translúcida da MESMA cor
   semântica (mantém o significado vermelho/âmbar/verde/azul) e garanto texto
   claro. Badges -100 (.pr-diag-*, .cr-diag-*) NÃO entram: têm cor própria
   escura e continuam legíveis como chip claro.
   ============================================================================ */

/* ── Linhas de tabela com tint de status ──────────────────────────────────── */
.pr-row-above,  .cr-row-critical, .seg-row-bad     { background: rgba(239,68,68,.13) !important; }
.pr-row-pmr,    .cr-row-warning,  .seg-row-warning { background: rgba(245,158,11,.13) !important; }
.pr-row-healthy,.cr-row-success,  .seg-row-good    { background: rgba(16,185,129,.13) !important; }
/* hover dessas linhas continua legível */
.pr-expandable-row:hover td, .cr-expandable-row:hover td { background: rgba(34,211,238,.06) !important; }

/* ── Cartões de diagnóstico/severidade (texto herda var(--text)) ──────────── */
.diag-card { color: var(--text); }
.diag-card.sev-critical { background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.32) !important; }
.diag-card.sev-warning  { background: rgba(245,158,11,.11) !important; border-color: rgba(245,158,11,.32) !important; }
.diag-card.sev-info     { background: rgba(56,189,248,.10) !important; border-color: rgba(56,189,248,.32) !important; }
.diag-card.sev-success  { background: rgba(16,185,129,.10) !important; border-color: rgba(16,185,129,.32) !important; }

/* ── Cards do AI Gestor (borda colorida mantida, fundo escurece) ──────────── */
.ai-gestor-card-warn     { background: rgba(245,158,11,.10) !important; }
.ai-gestor-card-decision { background: rgba(56,189,248,.10) !important; }
.ai-gestor-card-action   { background: rgba(16,185,129,.10) !important; }

/* ── Banner/ícone de aviso e contadores ───────────────────────────────────── */
.uri-warn-banner { background: rgba(245,158,11,.12) !important; color: var(--warning) !important; }
.sev-warning .diag-icon { background: rgba(245,158,11,.18) !important; }

/* ── Chips de métrica dos gráficos (eram brancos) ─────────────────────────── */
.ov-ga-chip        { background: var(--surface-2) !important; border-color: var(--border) !important; }
.ov-ga-chip.active { background: rgba(34,211,238,.12) !important; color: var(--text) !important; }

/* ── Botões/inputs/textareas/blocos claros das telas internas ─────────────── */
.ai-act-btn, .aim-correct-textarea,
.ga-btn-secondary, .ai-gestor-input, .ai-learn-rule {
    background: var(--surface-2) !important; color: var(--text) !important;
}
.ga-btn-secondary:hover, .c-btn--ghost:hover,
.ga-ms-option:hover, .ga-ms-option.active,
.c-modal-close:hover, .ai-gestor-quick-btn:hover { background: rgba(34,211,238,.10) !important; }
.ai-gestor-input:focus { background: rgba(255,255,255,.06) !important; }
.ai-learn-nicho { background: rgba(34,211,238,.12) !important; color: var(--primary) !important; }

/* ── Tabela .c-table (hover/zebra) ────────────────────────────────────────── */
.c-table tbody tr:hover td,
.c-table--striped tbody tr:nth-child(even) td { background: var(--surface-2) !important; }

/* ── Card "ruim" de imagem ────────────────────────────────────────────────── */
.ga-img-card--bad { background: rgba(239,68,68,.10) !important; }