/* Design system LBBR aplicado ao JogaBank — carrega por último, depois de todas
 * as outras folhas, porque a função dele é corrigir forma, não inventar layout.
 *
 * As cores já foram levadas pros tokens do guia arquivo a arquivo; aqui fica o
 * que as folhas antigas não sabiam dizer: fundo creme com cartão branco, borda
 * de 1px no lugar de sombra, raios generosos, escala de texto curta e as três
 * famílias tipográficas. */

:root{
  --canvas:#f2f0ea; --surface:#fff; --surface-2:#fbfaf7; --elevated:#eceae3;
  --border:#e3e0d8; --border-strong:#d7d4cc;
  --ink:#1b1b19; --ink-2:#33332e; --muted-2:#76756d; --faint:#9a998f;
  --green:#05171c; --green-dark:#0f0f0f; --green-bright:#3fa77e;
  --green-soft:color-mix(in srgb, var(--green) 8%, white);
  --gold:#c9a24b; --gold-dark:#a9854e; --info:#274c63; --danger:#b00020;

  /* os nomes que o JogaBank já usava, agora apontando pro guia */
  --brand-primary:var(--green); --brand-action:var(--green);
  --brand-hover:var(--green-dark); --brand-text:var(--green-dark);
  --brand-soft:var(--green-soft); --brand-focus:var(--green);
  --surface-raised:var(--surface); --surface-subtle:var(--surface-2);
  --field:var(--surface); --control-border:var(--border-strong);
  --bg:var(--canvas); --muted:var(--muted-2); --line:var(--border);

  --raio-cartao:18px; --raio-g:14px; --raio-m:12px; --raio-p:10px; --raio-pp:6px;
  --sombra-suave:0 1px 2px rgba(27,27,25,.04), 0 10px 30px -18px rgba(40,44,30,.2);
}

/* ── base ───────────────────────────────────────────────────────────────── */
html,body{background:var(--canvas)}
body{font-family:"Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
h1,h2,h3,h4{font-family:"Schibsted Grotesk","Geist",system-ui,sans-serif;letter-spacing:-.02em}
::selection{background:color-mix(in srgb, var(--green) 22%, transparent)}
:focus-visible{outline:2px solid color-mix(in srgb, var(--green) 35%, transparent); outline-offset:1px}

/* o único lugar com caixa-alta no guia */
.eyebrow,.navlabel,.login-eyebrow{
  font-family:"Geist Mono",ui-monospace,monospace; text-transform:uppercase;
  letter-spacing:.32em; font-size:11px; line-height:1.2; color:var(--faint); font-weight:400;
}

/* número é sempre tabular: coluna de tabela, saldo, eixo */
.value,.amount,.statvalue,.mainstat .value,td,.cardbalance b,.ab-value,.kpi-value{font-variant-numeric:tabular-nums}

/* ── casca ──────────────────────────────────────────────────────────────── */
aside{background:var(--surface); border-right:1px solid var(--border)}
aside .brand{font-family:"Schibsted Grotesk","Geist",sans-serif; letter-spacing:-.02em; color:var(--ink)}
aside .business{color:var(--faint)}
main{background:var(--canvas)}
main>header,main>header.minimal-header{
  background:color-mix(in srgb, var(--surface) 75%, transparent);
  backdrop-filter:blur(16px); border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.content{max-width:1152px; margin-inline:auto; padding-inline:20px}
@media(min-width:640px){.content{padding-inline:32px}}

/* A faixa colorida do topo não existe no guia: cabeçalho de página é o próprio
 * creme, com o título em tinta e as ações à direita. */
.titlebar{background:none!important; box-shadow:none!important; padding-block:20px}
.titlebar h1,.titlebar h2,.titlebar p,.titlebar .ledger-back{color:var(--ink)}
.titlebar p,.titlebar .subtitle{color:var(--muted-2)}
.titlebar .eyebrow{color:var(--faint)}
.titlebar>.btn.primary{background:var(--green); border-color:var(--green); color:#fff}
.titlebar>.btn.primary:hover{background:var(--green-dark); border-color:var(--green-dark)}

h1,#pagetitle{font-size:20px; letter-spacing:-.01em; font-weight:600; color:var(--ink)}
#pagedesc,.subtitle{font-size:14px; color:var(--muted-2)}

/* ── superfícies: tudo é cartão branco de borda fina ────────────────────── */
.panel,.stat,.cardbox,.chart-kpis article,.tablewrap,.note,.receipt,
.deposit-item,.ab-card,.detail-data,dialog{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--raio-g);
  box-shadow:none;
}
.stat,.chart-kpis article{border-radius:var(--raio-m); padding:12px 16px}
dialog{border-radius:var(--raio-cartao); box-shadow:0 26px 60px -28px rgba(40,44,30,.3)}
.stat .statvalue,.stat .value{
  font-family:"Schibsted Grotesk","Geist",sans-serif; font-size:24px; line-height:1;
  letter-spacing:-.02em; font-weight:600; color:var(--ink);
}
.statlabel{font-size:12.5px; color:var(--muted-2)}
.statfoot{font-size:11.5px; color:var(--faint)}

/* ── controles ──────────────────────────────────────────────────────────── */
.btn,button.btn{
  border-radius:var(--raio-pp); font-weight:500; font-size:14px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2);
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--green); border-color:var(--green); color:#fff}
.btn.primary:hover{background:var(--green-dark); border-color:var(--green-dark)}
.linkbtn{color:var(--green); text-underline-offset:4px}
.linkbtn:hover{text-decoration:underline}

input,select,textarea,.field,.chart-period{
  border-radius:var(--raio-pp)!important; border:1px solid var(--border)!important;
  background:var(--surface)!important; color:var(--ink)!important; font-size:13.5px;
}
input:focus,select:focus,textarea:focus{border-color:var(--green)!important; outline:none}
input::placeholder{color:var(--faint)}

/* ── tabela ─────────────────────────────────────────────────────────────── */
.tablewrap{overflow:hidden}
th{background:var(--surface-2); color:var(--muted-2); font-size:11px; letter-spacing:.08em; border-bottom:1px solid var(--border)}
td{border-color:var(--border); color:var(--ink); font-size:13.5px}
tr:hover td{background:color-mix(in srgb, var(--surface-2) 70%, transparent)}

/* ── navegação lateral: pílula do guia ──────────────────────────────────── */
.nav{border-radius:var(--raio-p); color:var(--muted-2); font-size:13.5px}
.nav:hover{background:var(--elevated); color:var(--ink)}
.nav.active{
  background:var(--green-soft); color:var(--green-dark);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--green) 10%, transparent);
}
.avatar{background:var(--green); color:#fff}

/* ── login ─────────────────────────────────────────────────────────────── */
/* Era escuro de propósito, com foto de fundo e um degradê por cima. No guia a
 * tela de entrada é a mesma coisa que qualquer outra: creme, com a grade sutil
 * atrás e um cartão branco no meio. O !important aqui é obrigatório — as
 * folhas antigas fixam o fundo escuro com !important também. */
#authPanel{
  background:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    var(--canvas) !important;
  background-size:44px 44px, 44px 44px, auto !important;
  display:grid; place-items:center; min-height:100vh; padding:24px;
}
#authPanel::before,#authPanel::after{display:none!important}   /* foto e véu escuro */
#authPanel .login-visual{display:none!important}

#authPanel .login-frame{
  display:block!important; width:100%; max-width:420px; min-height:0!important;
  background:var(--surface)!important; border:1px solid var(--border)!important;
  border-radius:var(--raio-cartao)!important; box-shadow:var(--sombra-suave);
}
#authPanel .login-form-side{background:transparent!important; min-height:0; padding:32px 28px}
#authPanel input{
  background:var(--surface)!important; border:1px solid var(--border)!important;
  color:var(--ink)!important; height:44px; border-radius:var(--raio-pp)!important;
}
#authPanel input:focus{border-color:var(--green)!important}
#authPanel input::placeholder{color:var(--faint)!important}
#authPanel #loginSubmit{
  background:var(--green)!important; border:1px solid var(--green)!important; color:#fff!important;
  height:44px; border-radius:var(--raio-pp)!important; font-weight:500;
}
#authPanel #loginSubmit:hover{background:var(--green-dark)!important; border-color:var(--green-dark)!important}
#authPanel label,#authPanel .login-intro{color:var(--muted-2)!important}
#authPanel h1,#authPanel h2,#authPanel .login-title{color:var(--ink)!important}
#authPanel .login-foot,#authPanel .login-private{color:var(--faint)!important}

/* ── vazio: frase inteira, nunca "No data" ──────────────────────────────── */
.empty,.emptystate{
  border:1px dashed var(--border); border-radius:var(--raio-m); background:none;
  padding:32px 16px; text-align:center; font-size:13.5px; color:var(--muted-2);
}

/* ── número herói ───────────────────────────────────────────────────────── */
/* "Nada de bloco saturado grande", diz o guia. O banking.css já trazia a versão
 * clara deste cartão — fundo branco e um filete da marca no topo — mas um
 * seletor mais específico do palette.css repintava por cima. Aqui só devolvo a
 * precedência a ela, em vez de inventar um terceiro visual. */
html body .stat.mainstat .value,html body .stat.mainstat .amount{
  font-family:"Schibsted Grotesk","Geist",sans-serif; color:var(--ink)!important;
}
html body .stat.mainstat .statlabel{color:var(--muted-2)!important}
html body .stat.mainstat .statfoot{color:var(--faint)!important}
html body .stat.mainstat .iconbtn{color:var(--muted-2)!important}

/* Ação ao lado de um título de seção é secundária: o guia reserva o preto da
 * marca pra ação principal da tela. */
.sectiontop .btn,.sectiontop .linkbtn{
  background:var(--surface); border:1px solid var(--border); color:var(--ink-2);
  font-weight:500; border-radius:var(--raio-pp);
}
.sectiontop .btn:hover{background:var(--surface-2)}

/* Botão é 6px no guia; redondo fica reservado a pílula, avatar e badge.
 * O banking.css arredondava a 100px com seletor mais específico. */
.titlebar>.btn,.sectiontop .btn,.profile-tabs .btn,.cardactions .btn{border-radius:var(--raio-pp)}

/* ── gráficos ───────────────────────────────────────────────────────────── */
/* O guia é explícito: o texto nunca usa a cor da série — quem identifica é o
 * quadradinho colorido ao lado. Valor e rótulo ficam em tinta. */
svg text,.chart text,.ab-chart text{fill:var(--faint); font-size:10.5px; font-variant-numeric:tabular-nums}
.ab-allocation-legend span{color:var(--ink-2)}
.ab-allocation-legend strong{color:var(--ink); font-variant-numeric:tabular-nums}
.ab-allocation-legend small{color:var(--faint)}
.ab-allocation-legend i{border-radius:3px}      /* quadradinho, não bolinha */

/* O gêmeo em tabela: o <details> já existia e entrega o mesmo número pra ler e
 * copiar. Só o deixo parecido com o resto. */
details>summary{
  cursor:pointer; font-size:12px; color:var(--muted-2); padding:6px 0;
  list-style:none;
}
details>summary::-webkit-details-marker{display:none}
details>summary:before{content:'⊞  '; color:var(--faint)}
details[open]>summary:before{content:'⊟  '}
details table{width:100%; font-size:12.5px; font-variant-numeric:tabular-nums}
details th{font-size:10.5px}

/* ── navbar no lugar da lateral ──────────────────────────────────────────── */
/* O guia desenha a casca assim: navbar de 64px, subnav de 44px com as pílulas,
 * ambas com borda /70 e vidro, e o conteúdo num container de 1152px.
 *
 * O <aside> fica no DOM, só invisível: três scripts guardam referência a ele.
 * O deslocamento do main vinha de --sidebar-width; zerá-la é o bastante. */
@media(min-width:751px){
  :root{--sidebar-width:0px}
  aside,.sidebar-toggle,.sidebar-backdrop,.mobile-sidebar-trigger{display:none!important}
  main{margin-left:0!important}

  /* as duas faixas: borda de ponta a ponta, conteúdo no container */
  main>header,main>header.minimal-header,.subnav{
    position:sticky; z-index:30; width:100%;
    padding-inline:max(20px, (100% - 1152px) / 2);
    border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
    backdrop-filter:blur(16px);
  }
  main>header,main>header.minimal-header{
    top:0; height:64px; min-height:64px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:color-mix(in srgb, var(--surface) 75%, transparent);
  }
  .subnav{
    top:64px; height:44px; display:flex; align-items:center;
    background:color-mix(in srgb, var(--surface) 60%, transparent);
  }
  .subnav-regua{display:flex; align-items:center; gap:6px; width:100%; min-width:0}
  .subnav #nav{display:flex; align-items:center; gap:6px; margin:0; padding:0; min-width:0}

  /* marca e conta nas pontas da navbar */
  .topbar-brand{display:flex; align-items:center; gap:10px; margin:0; padding:0; border:0}
  .topbar-brand img{height:22px; width:auto}
  .topbar-brand small{font-family:"Geist Mono",ui-monospace,monospace; text-transform:uppercase;
    letter-spacing:.24em; font-size:9.5px; color:var(--faint)}
  .topbar-perfil{display:flex; align-items:center; gap:8px; margin:0; padding:0; border:0; background:none}
  .topbar-perfil strong{font-size:12.5px; color:var(--ink); font-weight:600}
  .topbar-perfil small{font-size:11px; color:var(--faint)}
  .headright{display:flex; align-items:center; gap:14px}

  /* pílula do guia: ativa em verde-suave com aro, inativa só texto */
  .subnav .nav,.subnav-mais-gatilho{
    flex:0 0 auto; width:auto; height:auto; min-height:0;
    border:0; border-radius:999px; background:none; box-shadow:none!important;
    padding:6px 12px; font-size:13px; font-weight:500; color:var(--muted-2);
    white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
  }
  .subnav .nav:hover,.subnav-mais-gatilho:hover{background:none; color:var(--ink)}
  .subnav .nav.active,.subnav-mais-gatilho.active{
    background:var(--green-soft); color:var(--green-dark);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--green) 10%, transparent)!important;
  }
  .subnav .nav svg{width:15px; height:15px}

  /* o que não coube */
  .subnav-mais{position:relative; margin-left:auto; flex:0 0 auto}
  .subnav-mais-lista{
    position:absolute; right:0; top:calc(100% + 6px); min-width:190px; z-index:40;
    display:flex; flex-direction:column; gap:2px; padding:6px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--raio-g);
    box-shadow:0 26px 60px -28px rgba(40,44,30,.3);
  }
  .subnav-mais-lista .nav{width:100%; justify-content:flex-start; border-radius:var(--raio-p)}
  .subnav-mais-lista .nav:hover{background:var(--elevated); color:var(--ink)}

  /* rótulos de grupo não existem numa régua de pílulas */
  .desktop-sidebar-group,.navlabel,.sidebottom .help{display:none!important}
}

/* ── escala tipográfica do guia, em px ──────────────────────────────────── */
/* A tabela da seção 3, fixada. Hierarquia por tamanho e tom, nunca por peso:
 * ink → ink-2 → muted-2 → faint. */
.eyebrow,.navlabel,.login-eyebrow{font-size:11px!important; font-weight:400!important}

h1,#pagetitle{font-size:20px!important; letter-spacing:-.01em; font-weight:600}
#pagedesc{font-size:14px!important}

/* título de cartão e de seção: 13px semibold — não há 19px na escala */
.sectiontop h2,.panel h2,h2,h3,h4{font-size:13px!important; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.sectiontop .subtitle,.panel .subtitle,.subtitle{font-size:12.5px!important; color:var(--muted-2)}

/* Número em font-display, tabular e com o tracking do guia. O tamanho é a
 * única coisa que foge dele: os 24px da tabela servem a contador curto ("7",
 * "12"), e o saldo é a informação principal da tela. Fica grande; os KPIs
 * secundários ficam nos 24px, o que dá a hierarquia entre eles. */
html body .stat.mainstat .value,html body .stat.mainstat .amount,
.stat .value,.stat .statvalue,body[data-page=overview] #stats .mainstat .value{
  font-family:"Schibsted Grotesk","Geist",sans-serif!important;
  font-size:24px!important; line-height:1; letter-spacing:-.02em; font-weight:600;
  font-variant-numeric:tabular-nums;
}
html body .stat.mainstat .value,html body .stat.mainstat .amount,
body[data-page=overview] #stats .mainstat .value{
  font-size:clamp(34px, 3.6vw, 46px)!important;
}
.mainstat .value small,.stat .value small{font-size:12.5px!important; font-weight:500; color:var(--muted-2)}

.statlabel{font-size:12.5px!important; color:var(--muted-2)}
.statfoot{font-size:11.5px!important; color:var(--faint)}

td,.ledger-card,li{font-size:14px}
label,.lbl{font-size:12px; color:var(--muted-2)}
input,select,textarea{font-size:13.5px}
.footer,.modalnote,.receipt{font-size:11.5px; color:var(--faint)}

/* id e código em mono, como no hub */
.cardnumber,.ledger-id,code,.mono{font-family:"Geist Mono",ui-monospace,monospace; font-size:11.5px; color:var(--muted-2)}

/* a marca no topo fica só com a linha de contexto, sem logo */
.topbar-brand img,.login-brand img,.login-mobile-brand img{display:none}
.topbar-brand small{margin:0}