/* ══════════════════════════════════════════════════════════════
   COGNIX-THEME.CSS — reskin do tema ESCURO do Fenanza
   Base visual: modelo "Cognix" (fundo quase-preto violeta, blobs
   índigo/azul, acentos índigo→fúcsia→ciano, vidro, grid sutil).
   Botões com vidro (folder glass-effect2). Gráficos mais elegantes.
   ESSÊNCIA PRESERVADA: receitas = verde, despesas = rosa/vermelho.
   Só ajusta o tema escuro (não toca em claro/azul/rosa).
   ══════════════════════════════════════════════════════════════ */

:is([data-theme="dark"], [data-theme="pink"]) {
    --bg-body: #050311;
    --bg-surface: #0a0817;
    --bg-card: rgba(18, 15, 34, 0.62);
    --bg-card-alt: rgba(26, 22, 46, 0.7);
    --bg-input: rgba(255, 255, 255, 0.045);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.09);
    --border-light: rgba(255, 255, 255, 0.16);
    --text-1: #f3f2fb;
    --text-2: #a7abc9;
    --text-3: #6a6e90;
    --header-bg: rgba(10, 8, 23, 0.72);

    /* Acentos Cognix */
    --accent-logo: #6366f1;   /* índigo */
    --accent-logo-2: #d946ef; /* fúcsia */
    --purple: #a855f7;
    --purple-bright: #c98bff;
    --purple-bg: rgba(168, 85, 247, 0.14);
    --purple-border: rgba(168, 85, 247, 0.34);
    --blue: #22d3ee;          /* ciano */
    --blue-bright: #67e8f9;
    --blue-bg: rgba(34, 211, 238, 0.12);
    --blue-border: rgba(34, 211, 238, 0.32);
    /* receitas (green) e despesas (rose) mantidos do :root — essência preservada */
}

/* ── Ambiência do fundo: blobs líquidos + grid + granulado ── */
:is([data-theme="dark"], [data-theme="pink"]) body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(46vw 46vw at 8% -8%, rgba(99, 102, 241, 0.28) 0%, transparent 60%),
        radial-gradient(50vw 50vw at 104% 8%, rgba(217, 70, 239, 0.16) 0%, transparent 62%),
        radial-gradient(60vw 55vw at 40% 112%, rgba(34, 211, 238, 0.12) 0%, transparent 60%),
        var(--bg-body);
}
:is([data-theme="dark"], [data-theme="pink"]) body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.012) 2px, rgba(255,255,255,.012) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,.012) 2px, rgba(255,255,255,.012) 4px);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 90%);
}
:is([data-theme="dark"], [data-theme="pink"]) body { background: transparent; }

/* ── Painéis de vidro ── */
:is([data-theme="dark"], [data-theme="pink"]) .card,
:is([data-theme="dark"], [data-theme="pink"]) .section-block,
:is([data-theme="dark"], [data-theme="pink"]) .chart-card,
:is([data-theme="dark"], [data-theme="pink"]) .consolidated-chart-card,
:is([data-theme="dark"], [data-theme="pink"]) .mc-card,
:is([data-theme="dark"], [data-theme="pink"]) .summary-card,
:is([data-theme="dark"], [data-theme="pink"]) .modal-dialog {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:is([data-theme="dark"], [data-theme="pink"]) .card { border-radius: 18px; }
:is([data-theme="dark"], [data-theme="pink"]) .card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
}
:is([data-theme="dark"], [data-theme="pink"]) .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .1);
    border-color: var(--border-light);
}

/* ── Header de vidro ── */
:is([data-theme="dark"], [data-theme="pink"]) #main-header {
    background: var(--header-bg);
    backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid var(--border);
}
:is([data-theme="dark"], [data-theme="pink"]) .logo-icon {
    background: linear-gradient(135deg, var(--accent-logo), var(--accent-logo-2));
    box-shadow: 0 6px 20px rgba(99, 102, 241, .4);
}

/* ══════ BOTÕES DE VIDRO (glass-effect2) ══════ */
/* CTA principal (Importar) → gradiente índigo→fúcsia com sheen */
:is([data-theme="dark"], [data-theme="pink"]) .header-import-btn {
    background: linear-gradient(135deg, var(--accent-logo), var(--accent-logo-2));
    box-shadow: 0 6px 22px rgba(139, 92, 246, .35);
    position: relative; overflow: hidden;
}
/* Abas de navegação */
:is([data-theme="dark"], [data-theme="pink"]) .header-center { background: rgba(255,255,255,.04); border-color: var(--border); backdrop-filter: blur(10px); }
:is([data-theme="dark"], [data-theme="pink"]) .tab-btn { color: var(--text-2); }
:is([data-theme="dark"], [data-theme="pink"]) .tab-btn.active {
    background: linear-gradient(135deg, var(--accent-logo), var(--accent-logo-2));
    color: #fff; box-shadow: 0 6px 18px rgba(139, 92, 246, .35);
}

/* Botões neutros → vidro translúcido com sheen (varredura no hover) */
:is([data-theme="dark"], [data-theme="pink"]) .header-import-btn,
:is([data-theme="dark"], [data-theme="pink"]) .cards-cta,
:is([data-theme="dark"], [data-theme="pink"]) .month-nav-arrow,
:is([data-theme="dark"], [data-theme="pink"]) .settings-btn {
    transition: all .3s var(--ease);
}
:is([data-theme="dark"], [data-theme="pink"]) .header-import-btn::before,
:is([data-theme="dark"], [data-theme="pink"]) .cards-cta::before {
    content: ''; position: absolute; top: 0; left: -120%; width: 120%; height: 100%; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transition: left .6s var(--ease); pointer-events: none;
}
:is([data-theme="dark"], [data-theme="pink"]) .header-import-btn:hover::before,
:is([data-theme="dark"], [data-theme="pink"]) .cards-cta:hover::before { left: 120%; }
:is([data-theme="dark"], [data-theme="pink"]) .header-import-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

:is([data-theme="dark"], [data-theme="pink"]) .settings-btn,
:is([data-theme="dark"], [data-theme="pink"]) .month-nav-arrow {
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
    backdrop-filter: blur(10px); color: var(--text-2);
}
:is([data-theme="dark"], [data-theme="pink"]) .settings-btn:hover,
:is([data-theme="dark"], [data-theme="pink"]) .month-nav-arrow:hover {
    background: rgba(255,255,255,.1); color: #fff; border-color: var(--border-light);
    transform: translateY(-1px);
}

/* CTA genérico de vidro (mantém cor semântica quando tem, senão índigo) */
:is([data-theme="dark"], [data-theme="pink"]) .cards-cta { position: relative; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.3); }

/* Inputs de vidro */
:is([data-theme="dark"], [data-theme="pink"]) .inline-input,
:is([data-theme="dark"], [data-theme="pink"]) .month-input,
:is([data-theme="dark"], [data-theme="pink"]) input[type="text"],
:is([data-theme="dark"], [data-theme="pink"]) input[type="number"],
:is([data-theme="dark"], [data-theme="pink"]) input[type="date"],
:is([data-theme="dark"], [data-theme="pink"]) select {
    background: rgba(255,255,255,.045); border: 1px solid var(--border);
    backdrop-filter: blur(6px);
}
:is([data-theme="dark"], [data-theme="pink"]) .inline-input:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,211,238,.16); background: rgba(34,211,238,.06);
}

/* Dropdown de opções */
:is([data-theme="dark"], [data-theme="pink"]) .settings-dropdown {
    background: rgba(12, 10, 24, .92); backdrop-filter: blur(20px);
    border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

/* Divisórias coloridas dos cards (stripe) — acompanham acento novo */
:is([data-theme="dark"], [data-theme="pink"]) .section-cards::before { background: linear-gradient(90deg, var(--accent-logo), var(--accent-logo-2)); }

/* Chips/tabs de vidro e realces */
:is([data-theme="dark"], [data-theme="pink"]) .theme-switcher { background: rgba(255,255,255,.04); border-color: var(--border); }

/* Modais de vidro */
:is([data-theme="dark"], [data-theme="pink"]) .modal-overlay { background: rgba(3, 2, 12, .7); backdrop-filter: blur(4px); }
:is([data-theme="dark"], [data-theme="pink"]) .modal-dialog { background: rgba(12, 10, 24, .92); }

/* Tabelas mais elegantes */
:is([data-theme="dark"], [data-theme="pink"]) .purchases-table thead th { color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; font-size: .66rem; }
:is([data-theme="dark"], [data-theme="pink"]) .purchases-table td { border-bottom: 1px solid rgba(255,255,255,.05); }

/* Barra de rolagem */
:is([data-theme="dark"], [data-theme="pink"]) ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
:is([data-theme="dark"], [data-theme="pink"]) ::-webkit-scrollbar-thumb:hover { background: var(--accent-logo); }

/* ══════════════════════════════════════════════════════════════
   TEMA ROSA → variante MAGENTA escura (fundo baseado no magenta)
   ══════════════════════════════════════════════════════════════ */
[data-theme="pink"] {
    --bg-body: #0c0413;
    --bg-surface: #14061f;
    --bg-card: rgba(38, 12, 46, 0.55);
    --bg-card-alt: rgba(48, 16, 58, 0.62);
    --border: rgba(255, 255, 255, 0.09);
    --border-light: rgba(240, 171, 252, 0.28);
    --text-1: #fbeffb;
    --text-2: #cdaecf;
    --text-3: #8a6c90;
    --header-bg: rgba(20, 6, 31, 0.72);
    /* Acento = magenta */
    --accent-logo: #d946ef;
    --accent-logo-2: #f0abfc;
    --purple: #e879f9;
    --purple-bright: #f5b8ff;
    --purple-bg: rgba(217, 70, 239, 0.15);
    --purple-border: rgba(217, 70, 239, 0.35);
    --blue: #22d3ee; --blue-bright: #67e8f9; --blue-bg: rgba(34,211,238,.12); --blue-border: rgba(34,211,238,.32);
    /* receitas verde / despesas rosa-vermelho mantidas */
}
[data-theme="pink"] body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(48vw 48vw at 6% -8%, rgba(217, 70, 239, 0.30) 0%, transparent 60%),
        radial-gradient(52vw 52vw at 106% 6%, rgba(147, 51, 234, 0.20) 0%, transparent 62%),
        radial-gradient(60vw 55vw at 45% 114%, rgba(236, 72, 153, 0.16) 0%, transparent 60%),
        var(--bg-body);
}

/* ══════════════════════════════════════════════════════════════
   BALÕES DE MÊS + navegação (vidro, mesmos arredondamentos/fontes)
   ══════════════════════════════════════════════════════════════ */
:is([data-theme="dark"], [data-theme="pink"]) #month-nav {
    background: rgba(10, 8, 23, 0.5); backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--border);
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill {
    background: rgba(255,255,255,.045); border: 1px solid var(--border);
    color: var(--text-2); backdrop-filter: blur(10px); border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: all .3s var(--ease);
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill:hover {
    color: #fff; border-color: var(--border-light); transform: translateY(-1px);
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.active,
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.selected {
    background: linear-gradient(135deg, var(--accent-logo), var(--accent-logo-2));
    color: #fff; border-color: transparent;
    box-shadow: 0 8px 20px rgba(139, 92, 246, .35);
}
:is([data-theme="dark"], [data-theme="pink"]) .month-title-name { color: var(--text-1); }
:is([data-theme="dark"], [data-theme="pink"]) .month-title-year { color: var(--accent-logo-2); }
:is([data-theme="dark"], [data-theme="pink"]) .month-nav-arrow:hover {
    border-color: var(--accent-logo-2); color: #fff;
    background: rgba(217,70,239,.12);
}

/* ══════════════════════════════════════════════════════════════
   GRÁFICOS — detalhe premium de vidro (do 1º template)
   ══════════════════════════════════════════════════════════════ */
:is([data-theme="dark"], [data-theme="pink"]) .chart-card,
:is([data-theme="dark"], [data-theme="pink"]) .consolidated-chart-card,
:is([data-theme="dark"], [data-theme="pink"]) .inv-card.inv-alloc,
:is([data-theme="dark"], [data-theme="pink"]) .report-chart-box {
    position: relative; overflow: hidden; border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
}
/* brilho radial interno + linha superior de acento (estilo Cognix) */
:is([data-theme="dark"], [data-theme="pink"]) .chart-card::after,
:is([data-theme="dark"], [data-theme="pink"]) .consolidated-chart-card::after {
    content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
    width: 70%; height: 60%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-logo) 26%, transparent), transparent 70%);
    filter: blur(46px);
}
:is([data-theme="dark"], [data-theme="pink"]) .chart-card::before,
:is([data-theme="dark"], [data-theme="pink"]) .consolidated-chart-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, var(--accent-logo), var(--accent-logo-2), transparent);
    opacity: .8;
}
:is([data-theme="dark"], [data-theme="pink"]) .chart-card > *,
:is([data-theme="dark"], [data-theme="pink"]) .consolidated-chart-card > * { position: relative; z-index: 1; }
:is([data-theme="dark"], [data-theme="pink"]) .chart-card h2 i,
:is([data-theme="dark"], [data-theme="pink"]) .consolidated-chart-card h2 i { color: var(--accent-logo-2); }

/* ── Balões de mês: verde (saldo +) / vermelho (saldo −) mantidos, inclusive quando selecionados ── */
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.filled-positive {
    background: #16a87a; border-color: #16a87a; color: #fff; font-weight: 700;
    box-shadow: 0 0 14px rgba(34,211,167,.4);
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.filled-positive:hover {
    background: #1cc08e; border-color: #1cc08e; color: #fff;
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.filled-positive.active {
    background: #0f9468; border-color: #34ffc8; color: #fff;
    box-shadow: 0 0 22px rgba(34,211,167,.55);
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.filled-negative {
    background: #e0483a; border-color: #e0483a; color: #fff; font-weight: 700;
    box-shadow: 0 0 14px rgba(239,68,68,.35);
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.filled-negative:hover {
    background: #ef5a4c; border-color: #ef5a4c; color: #fff;
}
:is([data-theme="dark"], [data-theme="pink"]) .month-pill.filled-negative.active {
    background: #d1372a; border-color: #ff8a7a; color: #fff;
    box-shadow: 0 0 22px rgba(239,68,68,.55);
}