/* css/main.css — FinanceAI · Redesign */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    /* ── Accent palette ─────────────────────────────── */
    --acc:   #00ffc8;          /* electric mint */
    --acc2:  #3d8bff;          /* electric blue  */
    --acc3:  #b66dff;          /* violet         */
    --red:   #ff4566;
    --amb:   #ffb830;
    --grn:   #00e57a;
    --cyn:   #00cfff;
    --pur:   #b66dff;

    /* glow helpers */
    --acc-glow:  0 0 18px rgba(0, 255, 200, 0.30);
    --acc2-glow: 0 0 18px rgba(61, 139, 255, 0.30);
    --red-glow:  0 0 14px rgba(255, 69, 102, 0.35);
    --amb-glow:  0 0 14px rgba(255, 184, 48, 0.35);

    /* ── Backgrounds ────────────────────────────────── */
    --bg:    #070b13;
    --bg1:   #0d1220;
    --bg2:   #121929;
    --bg3:   #1a2438;
    --bg4:   #233049;

    /* ── Borders ────────────────────────────────────── */
    --line:  rgba(255,255,255,0.06);
    --line2: rgba(255,255,255,0.13);
    --line3: rgba(0,255,200,0.18);

    /* ── Text ───────────────────────────────────────── */
    --txt:   #eef2ff;
    --txt1:  #ffffff;
    --txt2:  #8496bb;
    --txt3:  #4d6080;

    /* ── Typography ─────────────────────────────────── */
    --f:     'Plus Jakarta Sans', sans-serif;
    --fm:    'JetBrains Mono', monospace;

    /* ── Shape ──────────────────────────────────────── */
    --r:     14px;
    --rs:    10px;
    --pill:  100px;

    /* ── Layout dims ────────────────────────────────── */
    --nav:     60px;
    --hdr:     52px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ── Shadows ────────────────────────────────────── */
    --shadow:    0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px var(--line);
    --shadow-sm: 0 6px 20px rgba(0,0,0,0.35);
    --shadow-lg: 0 28px 60px rgba(0,0,0,0.7);

    /* ── Motion ─────────────────────────────────────── */
    --tr:  all 0.22s cubic-bezier(0.4,0,0.2,1);
    --tr-spring: all 0.35s cubic-bezier(0.34,1.56,0.64,1);

    /* ── Buttons ────────────────────────────────────── */
    --btn-bg:  var(--acc);
    --btn-txt: #050c0a;
}

/* ── Light mode ─────────────────────────────────────── */
html.light {
    --acc:   #007a5e;
    --acc2:  #1c6fd4;
    --acc3:  #7c3aed;
    --red:   #e01b41;
    --amb:   #c97a00;
    --grn:   #008a4a;
    --cyn:   #007aab;

    --bg:    #eef1f7;
    --bg1:   #ffffff;
    --bg2:   #f4f6fb;
    --bg3:   #eaecf4;
    --bg4:   #dde0ed;

    --line:  rgba(0,0,0,0.06);
    --line2: rgba(0,0,0,0.11);
    --line3: rgba(0,122,94,0.18);

    --txt:   #0c1428;
    --txt1:  #050c1a;
    --txt2:  #4d5e80;
    --txt3:  #8494b0;

    --btn-bg:  var(--acc);
    --btn-txt: #ffffff;

    --acc-glow:  0 0 0 transparent;
    --acc2-glow: 0 0 0 transparent;
    --red-glow:  0 0 0 transparent;
    --amb-glow:  0 0 0 transparent;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--f);
    background: var(--bg);
    color: var(--txt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbars ─────────────────────────────────────── */
::-webkit-scrollbar        { width: 3px; height: 3px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
    background: var(--bg4);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover { background: var(--txt3); }

/* ── App shell ──────────────────────────────────────── */
#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

#desktop-wrap {
    display: block;
    width: 100%;
    height: 100%;
}

.hidden { display: none !important; }

/* ── Color utilities ────────────────────────────────── */
.c-acc  { color: var(--acc);  }
.c-acc2 { color: var(--acc2); }
.c-red  { color: var(--red);  }
.c-amb  { color: var(--amb);  }
.c-cyn  { color: var(--cyn);  }
.c-grn  { color: var(--grn);  }
.c-pur  { color: var(--pur);  }

/* ── Spacing ────────────────────────────────────────── */
.mt1{margin-top:5px}  .mt2{margin-top:10px}  .mt3{margin-top:18px}
.mb1{margin-bottom:5px} .mb2{margin-bottom:10px} .mb3{margin-bottom:18px}
.ml1{margin-left:5px}   .mr1{margin-right:5px}
.p1{padding:5px}   .p2{padding:10px}  .p3{padding:18px}

/* ── Flex ───────────────────────────────────────────── */
.flex{display:flex}   .flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap1{gap:5px}  .gap2{gap:10px}  .gap3{gap:18px}
.flex-1{flex:1}  .flex-shrink-0{flex-shrink:0}

/* ── Typography ─────────────────────────────────────── */
.text-center{text-align:center}  .text-right{text-align:right}
.text-sm{font-size:.65rem}  .text-base{font-size:.8rem}
.text-lg{font-size:.9rem}   .text-xl{font-size:1.05rem}
.text-2xl{font-size:1.3rem}
.font-light{font-weight:300}  .font-normal{font-weight:400}
.font-medium{font-weight:500}  .font-semibold{font-weight:600}
.font-bold{font-weight:700}  .font-extrabold{font-weight:800}

/* ── Mono code block ────────────────────────────────── */
.mono {
    font-family: var(--fm);
    font-size: .72rem;
    background: var(--bg2);
    padding: 3px 8px;
    border-radius: 6px;
    word-break: break-all;
    border: 1px solid var(--line);
    color: var(--acc);
    letter-spacing: .02em;
}

/* ── Empty state ────────────────────────────────────── */
.empty {
    text-align: center;
    padding: 44px 16px;
    color: var(--txt3);
    font-size: .83rem;
    letter-spacing: .02em;
}

.empty-ic {
    font-size: 2.2rem;
    margin-bottom: 10px;
    opacity: .25;
    display: block;
}

/* ── Spinner ────────────────────────────────────────── */
.spin {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--line2);
    border-top-color: var(--acc);
    border-radius: 50%;
    animation: rot .75s linear infinite;
}

@keyframes rot { to { transform: rotate(360deg); } }

/* ── Acessibilidade: focus-visible global ─────────────────────────── */
/* Remove outline feio em cliques de mouse, mantém para teclado */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Botões e toggles */
button:focus-visible,
.tgl input:focus-visible + .tslider {
    outline: 2px solid var(--acc);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Inputs e selects — usa borda em vez de outline para não quebrar layout */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 3px rgba(0,255,200,.15);
}

/* Links */
a:focus-visible {
    outline: 2px solid var(--acc2);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Touch targets mínimos ────────────────────────────────────────── */
/* sb-close (era 26×26px, mínimo recomendado: 44px) */
.sb-close {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
}

/* cor-op swatches — mínimo de toque confortável */
.cor-op {
    min-width: 32px !important;
    min-height: 32px !important;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  MODO PRIVACIDADE                                    ║
   ╚══════════════════════════════════════════════════════╝ */

/*
 * html.privacy-mode: oculta valores com blur + substitui
 * por •••• via ::after. Os IDs cobertos:
 *
 * Painel geral : wd-rec, wd-desp, wd-saldo
 *                k-inc, k-exp, k-bal (saldo-destaque), k-avg, k-max, k-sav
 * Painel invest: pi-aportes, pi-total, pi-rent
 * Relatórios   : r-mes, r-ano, r-inv
 * Extrato      : ext-tot-rec, ext-tot-desp, ext-tot-saldo
 * Calc invest  : c-total, c-inv, c-rend, c-roi
 * Watchlist    : inv-total
 * Metas        : mt-total, mt-ok, mt-prog
 * Mini stats   : k-count (transações — não oculto), k-max, k-sav
 * Listas dynâm : .kv (classe genérica de valor em KPI cards)
 *                .txi-amt (valor em cada linha do extrato)
 *                .rank-item .c-red (maiores gastos)
 */

/* — Utilitário base — */
html.privacy-mode .pv {
    position:   relative;
    color:      transparent !important;
    user-select: none;
    pointer-events: none;
}

html.privacy-mode .pv::after {
    content: '••••';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt3);
    font-size: .75em;
    letter-spacing: .25em;
    font-family: var(--fm);
}

/* — KPI genérico (.kv) — */
html.privacy-mode .kv {
    color: transparent !important;
    position: relative;
    user-select: none;
}
html.privacy-mode .kv::after {
    content: '••••';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt3);
    font-size: .7em;
    letter-spacing: .2em;
    font-family: var(--fm);
}

/* — Valor em linha do extrato (.txi-amt) — */
html.privacy-mode .txi-amt {
    color: transparent !important;
    position: relative;
    min-width: 60px;
}
html.privacy-mode .txi-amt::after {
    content: '••••';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--txt3);
    font-size: .7em;
    letter-spacing: .2em;
    font-family: var(--fm);
}

/* — Ranking de gastos (.rank-item) — */
html.privacy-mode .rank-item .c-red {
    color: transparent !important;
    position: relative;
    min-width: 50px;
}
html.privacy-mode .rank-item .c-red::after {
    content: '••••';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--txt3);
    font-size: .7em;
    letter-spacing: .15em;
    font-family: var(--fm);
}

/* — IDs específicos que têm layout próprio (sem classe .kv) — */
html.privacy-mode #wd-rec,
html.privacy-mode #wd-desp,
html.privacy-mode #wd-saldo,
html.privacy-mode #saldo-destaque,
html.privacy-mode #k-avg,
html.privacy-mode #k-max,
html.privacy-mode #k-sav,
html.privacy-mode #pi-aportes,
html.privacy-mode #pi-rent,
html.privacy-mode #r-mes,
html.privacy-mode #r-ano,
html.privacy-mode #r-inv,
html.privacy-mode #ext-tot-rec,
html.privacy-mode #ext-tot-desp,
html.privacy-mode #ext-tot-saldo,
html.privacy-mode #c-total,
html.privacy-mode #c-inv,
html.privacy-mode #c-rend,
html.privacy-mode #c-roi,
html.privacy-mode #inv-total,
html.privacy-mode #mt-total,
html.privacy-mode #mt-ok,
html.privacy-mode #mt-prog {
    color: transparent !important;
    position: relative;
    user-select: none;
}

html.privacy-mode #wd-rec::after,
html.privacy-mode #wd-desp::after,
html.privacy-mode #wd-saldo::after,
html.privacy-mode #saldo-destaque::after,
html.privacy-mode #k-avg::after,
html.privacy-mode #k-max::after,
html.privacy-mode #k-sav::after,
html.privacy-mode #pi-aportes::after,
html.privacy-mode #pi-rent::after,
html.privacy-mode #r-mes::after,
html.privacy-mode #r-ano::after,
html.privacy-mode #r-inv::after,
html.privacy-mode #ext-tot-rec::after,
html.privacy-mode #ext-tot-desp::after,
html.privacy-mode #ext-tot-saldo::after,
html.privacy-mode #c-total::after,
html.privacy-mode #c-inv::after,
html.privacy-mode #c-rend::after,
html.privacy-mode #c-roi::after,
html.privacy-mode #inv-total::after,
html.privacy-mode #mt-total::after,
html.privacy-mode #mt-ok::after,
html.privacy-mode #mt-prog::after {
    content: '••••';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt3);
    font-size: .65em;
    letter-spacing: .2em;
    font-family: var(--fm);
}

/* — Botão de privacidade no header — ativo = âmbar — */
#hdr-priv-btn { transition: color var(--tr); }
html.privacy-mode #hdr-priv-btn { color: var(--amb) !important; }

/* — Desativa seleção de texto nos valores ocultos — */
html.privacy-mode .txi-amt,
html.privacy-mode .kv,
html.privacy-mode .rank-item .c-red {
    user-select: none;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  NAV MODE — bottom (padrão) ou top                  ║
   ╚══════════════════════════════════════════════════════╝ */

/* ── Modo TOP: bnav vira barra horizontal acima do conteúdo ── */
html.nav-top .bnav {
    position: sticky;
    top: var(--hdr);          /* logo abaixo do header */
    bottom: auto;
    left: auto;
    right: auto;
    z-index: 190;
    border-top: none;
    border-bottom: 1px solid var(--line);
    /* sobreposição accent line no bottom */
}

html.nav-top .bnav::before {
    top: auto;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, var(--acc) 40%, var(--acc2) 65%, transparent 100%);
}

/* Remove o espaço reservado para o nav fixo no fundo */
html.nav-top .wrap {
    padding-bottom: 12px !important;
}

html.nav-top .scr {
    padding-bottom: 0;
}

/* Botão de voz: sobe para não colidir */
html.nav-top #voz-btn {
    bottom: 24px !important;
}

/* float-buy: sobe */
html.nav-top #float-buy {
    bottom: 24px !important;
}

/* badge offline: desce (estava relativo ao --hdr) */
html.nav-top #app-offline-badge {
    top: calc(var(--hdr) + var(--nav) + 8px);
}