/* ══════════════════════════════════════════════════════════════════════════════
   AUTOFY — Marca em ROXO no tema claro                              2026-09-08
   ──────────────────────────────────────────────────────────────────────────────
   Pedido: "ao mudar o branco, o vermelho deve passar para o roxo da logo".
   O roxo foi AMOSTRADO nos pixels de assets/images/icon.gif (a arte-mestra da
   marca), não inventado: domina entre #4828A8 e #5828C8. Primário: #5B2CD6.

   DUAS ARMADILHAS que definem o formato deste arquivo:

   1) MARCA ≠ PERIGO. No tema claro --primary, --brand-red, --accent-red e --danger
      têm todos exatamente o MESMO #dc2626. São indistinguíveis por VALOR, então
      qualquer busca-e-substitui de cor pintaria de roxo o botão "Parar Operação",
      o "Excluir" e os alertas de erro — matando o sinal de perigo. Por isso a troca
      é sempre por SELETOR, nunca por valor, e há um bloco explícito no fim
      reafirmando o vermelho semântico.

   2) ORDEM DE CARGA. Escrever os tokens roxos no design-system.css não bastaria:
      dashboard-premium.css carrega depois e redeclara :root. Este arquivo entra
      por último, no footer.php.

   Só afeta o tema claro. O tema escuro segue vermelho, intacto.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens de marca ─────────────────────────────────────────────────────── */
html[data-theme="light"] {
    --brand-purple: #5B2CD6;
    --brand-purple-dark: #4A22B0;
    --brand-purple-deep: #3B1A8C;
    --brand-purple-tint: #EDE9FE;
    --brand-purple-tint-border: #C4B5FD;

    --brand-red: #5B2CD6;
    --brand-red-dark: #4A22B0;
    --brand-crimson: #4A22B0;
    --primary: #5B2CD6;
    --primary-hover: #4A22B0;
    --accent-red: #5B2CD6;
    --accent-primary: #5B2CD6;
    --accent-crimson: #5B2CD6;
    --accent-wine: #3B1A8C;
    --accent-pink: #5B2CD6;

    /* Parceiro do gradiente: sem isto os gradientes marca (vermelho -> roxo)
       virariam roxo -> roxo e ficariam chapados. */
    --secondary: #A855F7;
    --secondary-hover: #C084FC;
    --accent-purple: #A855F7;

    --btn-primario: linear-gradient(180deg, #5B2CD6 0%, #4A22B0 100%);
    --btn-primario-borda: rgba(91, 44, 214, .40);
    --btn-primario-sombra: 0 4px 14px rgba(91, 44, 214, .22);

    --border-accent: rgba(91, 44, 214, .35);
    --border-active: rgba(91, 44, 214, .55);
    --border-focus: rgba(91, 44, 214, .65);

    --shadow-glow: 0 0 16px rgba(91, 44, 214, .10);
    --shadow-glow-red: 0 0 16px rgba(91, 44, 214, .10);
    --glow-subtle: 0 0 25px rgba(91, 44, 214, .08);
    --glow-card: 0 0 35px rgba(91, 44, 214, .12);
    --glow-red: 0 0 30px rgba(91, 44, 214, .25);
    --glow-wine: 0 0 40px rgba(59, 26, 140, .35);
}

/* Mobile rebaixa a paleta de propósito (style.css:1154-1178 redefine --primary
   mais escuro). Sem este par, o roxo ficaria com saturação cheia no celular
   enquanto o resto da paleta continua rebaixado. */
@media (max-width: 768px) {
    html[data-theme="light"] {
        --primary: #4A22B0;
        --primary-hover: #5B2CD6;
        --brand-red: #4A22B0;
        --accent-red: #4A22B0;
        --border-active: rgba(74, 34, 176, .40);
        --shadow-glow: 0 0 20px rgba(74, 34, 176, .16);
    }
}

/* ── 2. Regras de marca com hex chumbado (token não alcança) ────────────────── */
html[data-theme="light"] .nav-links a.active {
    background: var(--brand-purple-tint) !important;
    border-color: var(--brand-purple-tint-border) !important;
    color: var(--brand-purple) !important;
    box-shadow: 0 2px 10px rgba(91, 44, 214, .12) !important;
}
html[data-theme="light"] .nav-links a.active svg,
html[data-theme="light"] .nav-links a.active .nav-item-copy strong { color: var(--brand-purple) !important; }
html[data-theme="light"] .nav-links a.active .nav-item-copy small { color: var(--brand-purple-deep) !important; }

html[data-theme="light"] .dashboard-greeting__name { color: var(--brand-purple) !important; }

html[data-theme="light"] .filter-chip.active {
    background: linear-gradient(135deg, #6D3AE8 0%, #5B2CD6 100%) !important;
    border-color: var(--brand-purple) !important;
    box-shadow: 0 4px 14px rgba(91, 44, 214, .30) !important;
}
html[data-theme="light"] .filter-chip:hover:not(.active) { border-color: rgba(91, 44, 214, .25) !important; }

/* 2026-09-09: a borda e a sombra roxas transformavam o card em destaque numa
   moldura colorida e ainda anulavam a sombra do design system. No claro, o
   destaque vem da SOMBRA e de um fio de accent, não de uma moldura. */
html[data-theme="light"] .kpi-card--featured {
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] .kpi-icon-badge,
html[data-theme="light"] .icon-red,
html[data-theme="light"] .icon-card,
html[data-theme="light"] .icon-clap,
html[data-theme="light"] .icon-gold,
html[data-theme="light"] .icon-user,
html[data-theme="light"] .icon-trend,
html[data-theme="light"] .section-title-icon,
html[data-theme="light"] .section-title-icon--orange {
    background: var(--brand-purple-tint) !important;
    border-color: var(--brand-purple-tint-border) !important;
    color: var(--brand-purple) !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .date-input:focus {
    box-shadow: 0 0 0 3px rgba(91, 44, 214, .15) !important;
    border-color: rgba(91, 44, 214, .45) !important;
}

/* Bordas animadas e brilhos dos cards */
html[data-theme="light"] .glass-card::after {
    background: linear-gradient(115deg, transparent 15%, rgba(91, 44, 214, .22) 40%, rgba(168, 85, 247, .22) 60%, transparent 85%) !important;
}
html[data-theme="light"] .glass-card::before {
    background: linear-gradient(90deg, transparent, rgba(91, 44, 214, .2), rgba(168, 85, 247, .2), transparent) !important;
}
html[data-theme="light"] .glass-card:hover { border-color: rgba(91, 44, 214, .28) !important; }
html[data-theme="light"] .kpi-card--featured::before {
    background: linear-gradient(135deg, rgba(91, 44, 214, .16), rgba(168, 85, 247, .16), rgba(91, 44, 214, .08)) !important;
}
/* Glow atrás do número sujava a leitura no claro — o número já domina por
   tamanho e contraste (medido em 18,7:1). */
html[data-theme="light"] .kpi-card .kpi-value,
html[data-theme="light"] .kpi-card--featured .kpi-value {
    filter: none !important;
}
html[data-theme="light"] .premium-table tr:hover td { background: rgba(91, 44, 214, .04) !important; }

/* Card de meta e barra de progresso (dashboard.php, <style> inline) */
html[data-theme="light"] .goal-card::after {
    background: linear-gradient(115deg, transparent 15%, rgba(91, 44, 214, .85) 40%, rgba(168, 85, 247, .85) 60%, transparent 85%) !important;
}
html[data-theme="light"] .goal-bar-fill {
    background: linear-gradient(90deg, #5B2CD6, #A855F7) !important;
    box-shadow: 0 0 10px rgba(91, 44, 214, .45) !important;
}
html[data-theme="light"] .sales-toast--sale,
html[data-theme="light"] .sales-toast--pending { border-color: rgba(91, 44, 214, .45) !important; }
html[data-theme="light"] .sales-toast--sale .sales-toast__icon,
html[data-theme="light"] .sales-toast--pending .sales-toast__icon {
    background: rgba(91, 44, 214, .12) !important;
    border-color: rgba(91, 44, 214, .22) !important;
}

/* ── 3. Identidade visual: logo e ícone ─────────────────────────────────────── */
/* content:url() e não <picture>: <source media> só enxerga prefers-color-scheme
   (preferência do SISTEMA), nunca o data-theme do painel — um usuário com o SO no
   escuro e o painel no claro receberia a arte errada. Ancorado na CLASSE de marca,
   nunca no src: icon.png também é placeholder de avatar em 5 lugares, e ali ele
   não deve virar roxo. */
html[data-theme="light"] .brand-mark { content: url('../images/icon-purple.png'); }
html[data-theme="light"] .brand-logo,
html[data-theme="light"] .brand-wordmark { content: url('../images/logo-light.png'); }

/* O halo da logo era vermelho e ficava em volta da arte roxa. */
html[data-theme="light"] .brand-mark,
html[data-theme="light"] .brand-logo { animation-name: autofyLogoGlowRoxo !important; }
@keyframes autofyLogoGlowRoxo {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(91, 44, 214, .45)) drop-shadow(0 0 32px rgba(59, 26, 140, .30)); }
    50%      { filter: drop-shadow(0 0 26px rgba(91, 44, 214, .80)) drop-shadow(0 0 46px rgba(91, 44, 214, .45)); }
}
html[data-theme="light"] .sidebar-header::before {
    background: radial-gradient(circle, rgba(91, 44, 214, .28) 0%, rgba(168, 85, 247, .16) 55%, transparent 78%) !important;
}

/* Loader global: o GIF em si continua vermelho (reexportar a arte é outra etapa),
   mas o halo é o que domina a percepção de cor. */
/* Só o HALO muda de cor. Nada de animar filter aqui: era o que travava o
   carregamento (ver comentário em design-system.css). */
html[data-theme="light"] .autofy-loader-box::before {
    background: radial-gradient(circle,
        rgba(91, 44, 214, 0.34) 0%,
        rgba(91, 44, 214, 0.14) 38%,
        rgba(59, 26, 140, 0.05) 62%,
        transparent 74%) !important;
}

/* ── 4. VERMELHO SEMÂNTICO — NÃO virar roxo ─────────────────────────────────── */
/* Estes usam exatamente o mesmo trio de cores das regras de marca acima. Reafirmar
   aqui protege contra uma futura regra roxa mais genérica alcançá-los. */
html[data-theme="light"] #btnParar,
html[data-theme="light"] #stopOperationBtn,
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .trend-pill.down,
html[data-theme="light"] .trend-badge.down,
html[data-theme="light"] .status-lost,
html[data-theme="light"] .badge.dead,
html[data-theme="light"] .act-icon.act-fail,
html[data-theme="light"] .proj-trash-btn,
html[data-theme="light"] .alert.danger,
html[data-theme="light"] .nav-badge-count,
html[data-theme="light"] input.is-invalid {
    --brand-red: #dc2626;
    --primary: #dc2626;
    --accent-red: #dc2626;
}