/*
 * Tema do protótipo Receber-Pagar (React/Tailwind) aplicado às telas Django.
 * Carregado por último: redefine as variáveis ct-* / app-* e afina menu, topo, KPIs, abas e botões
 * para os mesmos tons (slate + indigo, entradas emerald, saídas rose), fontes e cantos do protótipo.
 */

:root {
    --tp-fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ct-bg: #f1f5f9;            /* slate-100 */
    --ct-surface: #ffffff;
    --ct-muted: #f8fafc;         /* slate-50 */
    --ct-border: #e2e8f0;        /* slate-200 */
    --ct-text: #0f172a;          /* slate-900 */
    --ct-text-2: #64748b;        /* slate-500 */
    --ct-accent: #4f46e5;        /* indigo-600 */
    --ct-accent-strong: #4338ca; /* indigo-700 */
    --ct-accent-soft: #eef2ff;   /* indigo-50 */
    --ct-pos: #059669;           /* emerald-600 */
    --ct-neg: #e11d48;           /* rose-600 */
    --ct-warn-bg: #fffbeb;
    --ct-warn-border: #fde68a;
    --ct-warn: #b45309;
    --ct-info-bg: #f0f9ff;
    --ct-bar-a: #10b981;         /* entradas: emerald-500 */
    --ct-bar-b: #f43f5e;         /* saídas: rose-500 */
    --ct-radius: 16px;
    --ct-sombra: 0 1px 2px rgba(15, 23, 42, 0.05);

    --ct-serie-1: #6366f1;       /* indigo-500 */
    --ct-serie-2: #0ea5e9;       /* sky-500 */
    --ct-serie-3: #10b981;       /* emerald-500 */
    --ct-serie-4: #f59e0b;       /* amber-500 */
    --ct-serie-5: #a855f7;       /* purple-500 */
    --ct-serie-outros: #94a3b8;  /* slate-400 */
    --ct-grade: #f1f5f9;
    --ct-eixo: #cbd5e1;

    --tp-custo: #0ea5e9;         /* sky-500: natureza custo (CPV) */
    --tp-resultado: #a855f7;     /* purple-500: natureza resultado (DRE) */
    --tp-lucro: #10b981;         /* emerald-500 */

    /* Menu lateral escuro também no tema claro. */
    --app-side-bg: #0f172a;      /* slate-900 */
    --app-side-text: #cbd5e1;    /* slate-300 */
    --app-side-muted: #94a3b8;   /* slate-400 */
    --app-side-hover: rgba(148, 163, 184, 0.1);
    --app-side-ativo: rgba(99, 102, 241, 0.2);
    --app-side-borda: #1e293b;   /* slate-800 */
    --app-sombra: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html.dark {
    --ct-bg: #0f172a;            /* slate-900 */
    --ct-surface: #1e293b;       /* slate-800 */
    --ct-muted: #172033;
    --ct-border: #334155;        /* slate-700 */
    --ct-text: #f1f5f9;          /* slate-100 */
    --ct-text-2: #94a3b8;        /* slate-400 */
    --ct-accent: #818cf8;        /* indigo-400 (texto e destaques) */
    --ct-accent-strong: #a5b4fc;
    --ct-accent-soft: rgba(99, 102, 241, 0.16);
    --ct-pos: #34d399;           /* emerald-400 */
    --ct-neg: #fb7185;           /* rose-400 */
    --ct-warn-bg: rgba(245, 158, 11, 0.12);
    --ct-warn-border: rgba(245, 158, 11, 0.35);
    --ct-warn: #fbbf24;
    --ct-info-bg: rgba(14, 165, 233, 0.1);
    --ct-bar-a: #10b981;
    --ct-bar-b: #f43f5e;
    --ct-sombra: 0 1px 2px rgba(0, 0, 0, 0.35);

    --ct-serie-1: #818cf8;
    --ct-serie-2: #38bdf8;
    --ct-serie-3: #34d399;
    --ct-serie-4: #fbbf24;
    --ct-serie-5: #c084fc;
    --ct-serie-outros: #64748b;
    --ct-grade: #263247;
    --ct-eixo: #475569;

    --app-side-bg: #020617;      /* slate-950: mais escuro que o fundo da página */
    --app-side-text: #cbd5e1;
    --app-side-muted: #8794a8;
    --app-side-hover: rgba(148, 163, 184, 0.08);
    --app-side-ativo: rgba(99, 102, 241, 0.18);
    --app-side-borda: #1e293b;
    --app-sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------ tipografia */
body.app-body, .app-publica { font-family: var(--tp-fonte); }
body.app-body ::selection { background: #6366f1; color: #fff; }
.ct-kpi-value, .ct-num, .ct-table td.ct-num, .ct-barra-valor, .ct-codigo, .tl-celula, .tp-mono { font-family: var(--tp-mono); font-weight: 600; letter-spacing: -0.01em; }
.ct-kpi-value { font-size: clamp(14px, 1.12vw, 20px); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ct-title { letter-spacing: -0.02em; font-weight: 800; }
.ct-eyebrow { color: var(--ct-accent); }

/* ------------------------------------------------------------ menu lateral e topo */
.app-sidebar { border-right: 1px solid var(--app-side-borda); box-shadow: none; }
.app-marca { border-bottom-color: var(--app-side-borda) !important; }
.app-marca-logo { background: linear-gradient(135deg, #6366f1, #2563eb) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25); border-radius: 10px !important; }
.app-marca-nome, .app-usuario-nome { color: #f8fafc !important; }
.app-nav-titulo { color: var(--app-side-muted) !important; }
.app-nav-link:hover { color: #fff !important; }
.app-nav-link:hover i { color: #a5b4fc; }
.app-nav-link.is-ativo { color: #fff !important; font-weight: 600; }
.app-nav-link.is-ativo i { color: #818cf8; }
.app-nav-link.is-ativo::before { background: #6366f1; }
.app-usuario { border-top-color: var(--app-side-borda) !important; }
.app-avatar { background: linear-gradient(135deg, #6366f1, #2563eb) !important; color: #fff !important; }
.app-recolher, .app-sair { color: var(--app-side-muted) !important; }

.app-topo { background: color-mix(in srgb, var(--ct-surface) 95%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ct-border); }
.app-topo-titulo strong { color: var(--ct-text); }
.app-topo-titulo i { color: var(--ct-accent); }
.app-icone-btn { border-radius: 8px; }
html.dark .app-tema .fa-sun { color: #fbbf24; }

/* ------------------------------------------------------------ cards, KPIs e tabelas */
.ct-card, .tl-painel, .tl-cartao { border-radius: var(--ct-radius); }
.ct-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ct-kpi { border-radius: 12px; padding: 14px 14px; min-width: 0; }
.ct-kpi-label { font-weight: 600; }
.tp-kpi--entradas .ct-kpi-label, .tp-kpi--entradas .ct-kpi-value { color: var(--ct-pos); }
.tp-kpi--saidas .ct-kpi-label, .tp-kpi--saidas .ct-kpi-value { color: var(--ct-neg); }
.tp-kpi--resultado .ct-kpi-label { color: #4f46e5; }
.tp-kpi--margem .ct-kpi-label, .tp-kpi--margem .ct-kpi-value { color: #0284c7; }
.tp-kpi--caixa .ct-kpi-label, .tp-kpi--caixa .ct-kpi-value { color: #b45309; }
html.dark .tp-kpi--resultado .ct-kpi-label { color: #818cf8; }
html.dark .tp-kpi--margem .ct-kpi-label, html.dark .tp-kpi--margem .ct-kpi-value { color: #38bdf8; }
html.dark .tp-kpi--caixa .ct-kpi-label, html.dark .tp-kpi--caixa .ct-kpi-value { color: #fbbf24; }
.tp-kpi--saidas { border-color: color-mix(in srgb, var(--ct-neg) 22%, var(--ct-border)); }
.tp-kpi--entradas { border-color: color-mix(in srgb, var(--ct-pos) 22%, var(--ct-border)); }

.ct-table th { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 700; color: var(--ct-text-2); background: var(--ct-muted); }
.ct-row-total td { background: var(--ct-accent-soft); }

/* ------------------------------------------------------------ abas (pílulas) e botões */
.ct-tabs { border-bottom: 0; gap: 8px; }
.ct-tab { border: 1px solid var(--ct-border); border-radius: 10px; padding: 7px 14px; background: var(--ct-surface); font-weight: 600; font-size: 13px; color: var(--ct-text-2); margin-bottom: 0; }
.ct-tab:hover { color: var(--ct-text); border-color: color-mix(in srgb, #6366f1 45%, var(--ct-border)); }
.ct-tab--ativa, .ct-tab--ativa:hover { background: #4f46e5; border-color: #4f46e5; color: #fff !important; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25); }
.tl-tabs-dentro { padding: 12px 16px 0; }

.ct-btn { border-radius: 10px; font-weight: 600; }
.ct-btn--primario { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25); }
.ct-btn--primario:hover { background: #4338ca; border-color: #4338ca; }
html.dark .ct-btn--primario { background: #4f46e5; border-color: #4f46e5; }
html.dark .ct-btn--primario:hover { background: #6366f1; border-color: #6366f1; }
.ct-btn--perigo { color: var(--ct-neg); }

.ct-input, .ct-page select, .ct-page input[type="date"], .ct-page input[type="text"], .ct-page input[type="number"],
.ct-page input[type="search"], .ct-page input[type="month"], .ct-page input[type="email"], .ct-page textarea { border-radius: 10px; }
.ct-page select:focus, .ct-page input:focus, .ct-page textarea:focus { outline: 2px solid color-mix(in srgb, #6366f1 55%, transparent); outline-offset: 0; border-color: #6366f1; }

/* ------------------------------------------------------------ natureza custo × resultado */
.tl-comp-custo { background: var(--tp-custo); }
.tl-comp-resultado { background: var(--tp-resultado); }
.tl-comp-lucro { background: var(--tp-lucro); }
.tp-barra--custo { background: var(--tp-custo) !important; }
.tp-barra--resultado { background: var(--tp-resultado) !important; }
.ct-barra-preenchida { background: #6366f1; }

/* ------------------------------------------------------------ selos */
.ct-badge--ok, .tl-status--ok, .ct-situacao--pago, .ct-situacao--recebido { background: rgba(16, 185, 129, 0.12); color: #047857; }
html.dark .ct-badge--ok, html.dark .tl-status--ok, html.dark .ct-situacao--pago, html.dark .ct-situacao--recebido { color: #34d399; }
.ct-situacao--vencido, .tl-status--critico { background: rgba(244, 63, 94, 0.12); color: #be123c; }
html.dark .ct-situacao--vencido, html.dark .tl-status--critico { background: rgba(244, 63, 94, 0.16); color: #fb7185; }
.ct-situacao--a_vencer, .ct-situacao--vence_em_breve, .tl-status--alerta { background: rgba(245, 158, 11, 0.14); color: #b45309; }
html.dark .ct-situacao--a_vencer, html.dark .ct-situacao--vence_em_breve, html.dark .tl-status--alerta { color: #fbbf24; }

/* ------------------------------------------------------------ barra de rolagem (como no protótipo) */
::-webkit-scrollbar { width: 9px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(148, 163, 184, 0.15); border-radius: 9999px; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.5); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.85); border: 2px solid transparent; background-clip: padding-box; }
html.dark ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
html.dark ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); }

/* Entradas × saídas nos gráficos (emerald × rose, como no protótipo). */
.tp-entrada { fill: var(--ct-bar-a); background: var(--ct-bar-a); }
.tp-saida { fill: var(--ct-bar-b); background: var(--ct-bar-b); }