/* ══════════════════════════════════════════════════════════════════════════════
   AUTOFY — LIGHT DESIGN SYSTEM (camada de componentes)          2026-09-09
   ──────────────────────────────────────────────────────────────────────────────
   Ordem de carga: light-theme-fixes.css → ESTE → brand-light.css
   Por quê: os "fixes" são correções pontuais de legibilidade (medidas por
   contraste) e precisam vir antes pra este arquivo poder dar forma por cima;
   o brand-light vem depois porque a cor de MARCA (accent) tem a palavra final.
   Este arquivo cuida de ESTRUTURA — superfície, borda, sombra, raio, foco,
   tipografia — e deliberadamente não mexe em accent.

   Princípio: profundidade vem de CAMADA e SOMBRA, não de cor. Accent é
   pontuação, não preenchimento.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fundo e ritmo ─────────────────────────────────────────────────────── */
html[data-theme="light"] body {
    background-color: var(--bg-primary) !important;
    /* gradiente quase imperceptível: dá volume ao topo sem virar "faixa" */
    background-image: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--bg-primary) 55%) !important;
}

/* ── 2. Cards ─────────────────────────────────────────────────────────────── */
/* Um card premium é: branco puro sobre fundo cinza + borda quase invisível +
   sombra curta em duas camadas. Sem borda grossa, sem sombra longa. */
html[data-theme="light"] .glass-card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .card,
html[data-theme="light"] .card-kpi,
html[data-theme="light"] .modern-card,
html[data-theme="light"] .pf-card,
html[data-theme="light"] .goal-card {
    background: var(--surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease !important;
}
html[data-theme="light"] .glass-card:hover,
html[data-theme="light"] .kpi-card:hover,
html[data-theme="light"] .card-kpi:hover,
html[data-theme="light"] .modern-card:hover,
html[data-theme="light"] .pf-card:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-1px) !important;   /* 1px, não 2 — refinamento, não salto */
}
/* Modal sobe pelo SOMBREAMENTO, não por cor: mesma superfície, sombra grande. */
html[data-theme="light"] .gp-modal,
html[data-theme="light"] .conn-box,
html[data-theme="light"] .lib-modal {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ── 3. Hierarquia dos KPIs ───────────────────────────────────────────────── */
/* O número tem que dominar. O rótulo recua, o ícone é complemento. */
html[data-theme="light"] .kpi-topline {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}
html[data-theme="light"] .kpi-title {
    color: var(--text-secondary) !important;
    font-weight: 650 !important;
}
html[data-theme="light"] .kpi-card .kpi-value,
html[data-theme="light"] .kpi-value-display {
    color: #0b1220 !important;
    -webkit-text-fill-color: #0b1220 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    filter: none !important;          /* sem glow no claro: sujava o número */
}
html[data-theme="light"] .kpi-value .kpi-currency {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
    font-weight: 600 !important;
}
/* Ícone complementa, não compete: menor peso visual que o número. */
html[data-theme="light"] .kpi-icon-badge {
    box-shadow: none !important;
    border-radius: 10px !important;
}
html[data-theme="light"] .kpi-icon-badge svg { opacity: .9 !important; }

/* ── 4. Inputs ────────────────────────────────────────────────────────────── */
/* Input é POÇO: desce em relação ao card. Sem isso ele some no branco. */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-control,
html[data-theme="light"] .pass-input,
html[data-theme="light"] .date-input,
html[data-theme="light"] .proj-input {
    background: var(--surface-sunken) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
html[data-theme="light"] input:hover:not(:focus),
html[data-theme="light"] select:hover:not(:focus),
html[data-theme="light"] textarea:hover:not(:focus) {
    border-color: var(--border-hover) !important;
}
/* Foco: anel suave + superfície sobe pra branco (indica "ativo") */
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .form-control:focus {
    background: var(--surface) !important;
    outline: none !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #9aa4b2 !important;
    opacity: 1 !important;
}
html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled,
html[data-theme="light"] textarea:disabled {
    background: #f1f3f7 !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}
html[data-theme="light"] input.is-invalid,
html[data-theme="light"] .form-control.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}
html[data-theme="light"] input.is-valid,
html[data-theme="light"] .form-control.is-valid {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12) !important;
}

/* ── 5. Sidebar ───────────────────────────────────────────────────────────── */
/* Não pode ser branca: precisa contrastar com a área de conteúdo. */
html[data-theme="light"] .sidebar {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] .nav-links a {
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
}
html[data-theme="light"] .nav-links a:hover {
    background: rgba(15, 23, 42, 0.045) !important;
    color: var(--text-primary) !important;
}
/* Ícones em grafite; accent SÓ no ativo/hover (regra do brand-light). */
html[data-theme="light"] .nav-links a svg,
html[data-theme="light"] .mn-ico svg,
html[data-theme="light"] .sidebar svg {
    color: #64707f !important;
}
html[data-theme="light"] .nav-links a:hover svg { color: var(--text-primary) !important; }

/* ── 6. Chips de filtro (Hoje / Ontem / 7 dias / 30 dias / Total) ─────────── */
html[data-theme="light"] .filter-chip,
html[data-theme="light"] .sales-pill,
html[data-theme="light"] .dashboard-preset-bar .filter-chip {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 999px !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 600 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
html[data-theme="light"] .filter-chip:hover:not(.active),
html[data-theme="light"] .sales-pill:hover:not(.active) {
    background: var(--surface-hover) !important;
    border-color: var(--border-hover) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .filter-chip:focus-visible,
html[data-theme="light"] .sales-pill:focus-visible {
    outline: 2px solid rgba(15, 23, 42, .35) !important;
    outline-offset: 2px !important;
}
/* O ativo é evidente por CONTRASTE, não por área colorida grande —
   grafite sólido lê melhor que um bloco vermelho e não compete com os KPIs. */
html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .sales-pill.active,
html[data-theme="light"] .dashboard-preset-bar .filter-chip.active {
    background: #101828 !important;
    border-color: #101828 !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ── 7. Tabelas ───────────────────────────────────────────────────────────── */
html[data-theme="light"] .premium-table thead th,
html[data-theme="light"] table thead th {
    background: var(--surface-sunken) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 650 !important;
    letter-spacing: .04em !important;
}
html[data-theme="light"] .premium-table tbody td,
html[data-theme="light"] table tbody td {
    border-bottom: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .premium-table tbody tr:hover td {
    background: var(--surface-hover) !important;
}

/* ── 8. Tipografia ────────────────────────────────────────────────────────── */
html[data-theme="light"] .page-header h1 {
    color: #0b1220 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .section-title,
html[data-theme="light"] .glass-card h3,
html[data-theme="light"] .kpi-card h3 {
    color: #0b1220 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
html[data-theme="light"] .kpi-meta-row,
html[data-theme="light"] .conn-hint,
html[data-theme="light"] .pf-card-hint,
html[data-theme="light"] small {
    color: var(--text-muted) !important;
}

/* ── 9. Estados vazios e carregamento ─────────────────────────────────────── */
html[data-theme="light"] .autofy-empty-icon {
    background: var(--surface-sunken) !important;
    border-color: var(--border) !important;
}
html[data-theme="light"] .skeleton,
html[data-theme="light"] .shimmer {
    background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%) !important;
}