/* =====================================================================
   Casca nova do painel (pedido do dono, 03/11/2026: "mais moderno, assim
   como foi feito no sistema financeiro"). A linguagem é a do sistema do
   Álvaro (visual aprovado em 02/11): menu escuro com indicador que desliza,
   topo de vidro com busca e ações (⌘K), barra flutuante e botão + no
   celular, entrada escalonada. A identidade continua a do TutuZap:
   verde dinheiro e neutros frios (financas.css).

   Carregado DEPOIS de theme.css, financas.css e painel.css: as telas que já
   usam as classes do tema herdam o visual sem reescrever.
   Movimento: só transform/opacity; prefers-reduced-motion desliga tudo.
   ===================================================================== */

:root {
    --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px;
    --spring: cubic-bezier(.34, 1.4, .5, 1);
    /* Menu: verde quase preto (a marca acende por cima, não briga). */
    --side-1: #0a1d16; --side-2: #0f2a20; --side-ink: #d9ebe3; --side-muted: #8eab9f; --side-accent: #4fe0a3;
    --glass: rgb(255 255 255 / .74);
    --money: #0e7a55;
    --gold: #a86b00; --gold-bg: #fdf1d6;
}
[data-bs-theme="dark"] {
    --side-1: #060f0c; --side-2: #0a1914; --side-ink: #d3e6dd; --side-muted: #7f998d; --side-accent: #4fe0a3;
    --glass: rgb(20 27 25 / .76);
    --money: #4fd39a;
    --gold: #f0b54a; --gold-bg: #2f240c;
}

/* Troca de página: o navegador cruza as telas (Chrome/Edge/Safari novos). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: var(--ease-out); }
.app-sidebar { view-transition-name: menu; }

/* ---------------- Menu lateral escuro ---------------- */
.app-sidebar { background: linear-gradient(180deg, var(--side-1), var(--side-2)); border-right: 0; color: var(--side-ink); overflow: hidden; }
.app-sidebar::after { content: ''; position: absolute; inset: auto -40% -30% -40%; height: 55%; background: radial-gradient(closest-side, rgb(14 122 85 / .38), transparent); pointer-events: none; }
.app-sidebar .sidebar-brand { border-bottom: 0; padding-bottom: .4rem; position: relative; z-index: 1; }
.app-sidebar .brand-mark { background: linear-gradient(135deg, #14a36f, #0b5e41); color: #fff; border-radius: 12px; box-shadow: 0 8px 20px -8px rgb(20 163 111 / .75); text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.app-sidebar .brand-text strong { color: #fff; }
.app-sidebar .brand-text span { color: var(--side-muted); }
.app-sidebar .nav-section-title { color: var(--side-muted); opacity: .9; }
.app-sidebar .sidebar-nav { position: relative; z-index: 1; scrollbar-color: rgb(255 255 255 / .15) transparent; }
.app-sidebar .nav-link { color: var(--side-ink); opacity: .8; border-radius: 11px; position: relative; z-index: 1; background: transparent !important; }
.app-sidebar .nav-link:hover { opacity: 1; background: rgb(255 255 255 / .05) !important; color: #fff; }
.app-sidebar .nav-link.active { opacity: 1; color: #fff; box-shadow: none; }
.app-sidebar .nav-link.active::before { display: none; }
.app-sidebar .nav-badge { background: var(--side-accent); color: #062016; font-weight: 700; }
.app-sidebar .sidebar-foot { border-top: 1px solid rgb(255 255 255 / .08); position: relative; z-index: 1; }
.app-sidebar .sidebar-foot .btn-ghost { color: var(--side-muted); }
.app-sidebar .sidebar-foot .btn-ghost:hover { color: #fff; background: rgb(255 255 255 / .06); }
/* Indicador que desliza até o item ativo (posição pelo ui.js). */
.nav-ind { position: absolute; left: 0; right: 0; top: 0; border-radius: 11px; background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
    transition: transform .38s var(--spring), height .3s; z-index: 0; pointer-events: none; opacity: 0; }
.nav-ind.on { opacity: 1; }
.nav-ind::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--side-accent); }
.side-user { display: flex; gap: 10px; align-items: center; padding: 10px 8px 4px; color: var(--side-ink); text-decoration: none; min-width: 0; }
.side-user:hover { color: #fff; }
.side-user b { display: block; font-size: 13px; color: #fff; line-height: 1.2; font-weight: 600; }
.side-user .nav-label span { font-size: 11.5px; color: var(--side-muted); display: block; }
.side-streak { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font: 600 12px var(--font-mono); color: #ffc46b; background: rgb(255 196 107 / .12); padding: 3px 7px; border-radius: 99px; flex: none; }
body.sidebar-collapsed .side-streak { display: none; }

/* ---------------- Topo de vidro ---------------- */
.app-topbar { background: var(--glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); gap: .5rem; }
.cmd-btn { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 10px; padding: 9px 14px; min-height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text-faint); box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s; font-size: .9rem; text-align: left; text-decoration: none; }
.cmd-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: var(--text-muted); }
.cmd-btn .ico { width: 17px; height: 17px; flex: none; }
.cmd-btn kbd { margin-left: auto; font: 500 11px var(--font-mono); padding: 2px 6px; border-radius: 6px; background: var(--bg-subtle); color: var(--text-muted); box-shadow: none; }
.icon-btn { border-radius: 12px; }
.top-mark { display: none; }

/* ---------------- Cabeçalho de página e cartões ---------------- */
.page-head h1 { font: 700 1.6rem/1.15 var(--font-display); letter-spacing: -.02em; }
.card, .panel { border-radius: var(--r-lg); border-color: var(--border); box-shadow: var(--shadow-xs); }
.card-header { background: transparent; border-bottom-color: var(--border); }
.card-header:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.lift { transition: transform .22s var(--ease-out), box-shadow .22s; }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------------- Botões ---------------- */
.btn { border-radius: 12px; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 84%, #fff), var(--brand)); border-color: var(--brand);
    box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 8px 18px -8px rgba(var(--brand-rgb), .7); }
.btn-primary:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 12px 24px -8px rgba(var(--brand-rgb), .8); }

/* ---------------- Entrada escalonada ---------------- */
.rise { animation: ui-rise .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes ui-rise { from { opacity: 0; transform: translateY(12px) scale(.99); } }
@keyframes ui-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ui-fade { to { opacity: 1; } }

/* ---------------- Confete (selo novo, meta batida, desafio vencido) ---------------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1090; overflow: hidden; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 12px; border-radius: 2px; opacity: 0;
    animation: ui-fall var(--d, 1.6s) var(--delay, 0s) cubic-bezier(.25, .6, .4, 1) forwards; }
@keyframes ui-fall {
    0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
    100% { opacity: 0; transform: translate3d(var(--dx), 92vh, 0) rotate(var(--r)); }
}
.burst { position: absolute; pointer-events: none; inset: 0; overflow: visible; z-index: 50; }
.burst i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 2px; animation: ui-fly .8s var(--ease-out) forwards; }
@keyframes ui-fly { to { transform: translate(var(--x), var(--y)) rotate(220deg); opacity: 0; } }

/* Aviso de conquista: desliza de baixo, com o selo. */
.toast-item.trophy { align-items: center; }
.toast-item .trophy-emo { font-size: 1.6rem; line-height: 1; animation: ui-pop .5s var(--spring) both; }
.toast-item .trophy-txt b { display: block; font-weight: 650; }
.toast-item .trophy-txt span { font-size: .8rem; opacity: .8; }

/* ---------------- Busca e ações (⌘K) ---------------- */
.palette-ov { position: fixed; inset: 0; z-index: 1080; background: rgb(6 16 12 / .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 12vh 12px 12px; }
.palette-ov.on { display: flex; animation: ui-fade .18s forwards; opacity: 0; }
.palette { width: min(620px, 100%); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; animation: ui-pal .28s var(--spring); }
@keyframes ui-pal { from { transform: translateY(-10px) scale(.97); opacity: 0; } }
.palette-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--text-faint); }
.palette-in .ico { width: 18px; height: 18px; flex: none; }
.palette input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 17px 0; font: 500 16px var(--font-sans); color: var(--text); }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: min(420px, 58vh); overflow: auto; overscroll-behavior: contain; }
.palette .g { font: 500 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px 4px; }
.palette .i { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 11px; cursor: pointer; color: var(--text); text-decoration: none; min-height: 44px; }
.palette .i .ico { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.palette .i small { color: var(--text-faint); margin-left: auto; font-size: 12px; white-space: nowrap; }
.palette .i[aria-selected="true"] { background: var(--brand-light); color: var(--brand-text); }
.palette .i[aria-selected="true"] .ico { color: var(--brand-text); }
.palette-foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }
.palette-foot kbd { font: 500 10.5px var(--font-mono); padding: 1px 5px; border-radius: 5px; background: var(--bg-subtle); color: var(--text-muted); box-shadow: none; }

/* ---------------- Toast ---------------- */
.toast-item { background: #0f1c17; color: #fff; border: 0; border-radius: 14px; box-shadow: var(--shadow-lg); }
.toast-item .btn-close { filter: invert(1) grayscale(1) brightness(2); }
[data-bs-theme="dark"] .toast-item { background: #e8f1ec; color: #0f1c17; }
[data-bs-theme="dark"] .toast-item .btn-close { filter: none; }

/* ---------------- Celular: barra flutuante e botão + ---------------- */
.fab-new { display: none; }
@media (max-width: 767.98px) {
    .mobile-nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 24px; padding: 6px;
        background: var(--glass); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
    .mobile-nav a, .mobile-nav button { border-radius: 18px; position: relative; isolation: isolate; min-height: 50px; }
    .mobile-nav a[aria-current="page"] { color: var(--brand-text); }
    .mobile-nav a[aria-current="page"]::before { content: ''; position: absolute; inset: 2px 4px; border-radius: 16px; background: var(--brand-light); z-index: -1; animation: ui-pop .35s var(--spring); }
    .fab-new { position: fixed; z-index: 1036; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; border: 0;
        background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); box-shadow: 0 14px 30px -10px rgba(var(--brand-rgb), .85); transition: transform .2s var(--spring); }
    .fab-new:active { transform: scale(.92) rotate(90deg); }
    .fab-new .ico { width: 24px; height: 24px; stroke-width: 2.2; }
    .app-content { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
    .page-head h1 { font-size: 1.35rem; }
    .top-mark { display: grid; width: 34px; height: 34px; border-radius: 11px; place-items: center; color: #fff; font: 800 1rem/1 var(--font-display);
        background: linear-gradient(135deg, #14a36f, #0b5e41); text-decoration: none; flex: none; }
    .palette-ov { padding-top: 8vh; }
}
/* Tela com barra de ação própria (formulário, conversa): o + sairia por cima. */
body:has(.form-actions) .fab-new, body.chat-page .fab-new, body.bulk-on .fab-new { display: none; }

/* ---------------- Movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
    .rise, .burst i, .confetti, .palette, .mobile-nav a::before, .toast-item .trophy-emo { animation: none !important; }
    .confetti { display: none; }
    .nav-ind, .fab-new, .lift { transition: none; }
    @view-transition { navigation: none; }
}

/* Fogo da sequência no rodapé do menu. */
.side-streak .ico { width: 13px; height: 13px; }
.side-user .avatar { flex: none; }