/* ==========================================================================
   Envelopes — painel de orçamento
   Paleta: azul-marinho (estrutura), cinza (texto/linhas), verde (dinheiro
   disponível), vermelho suave (estouro). Números sempre tabulares.
   ========================================================================== */

:root {
  --navy:        #1b2a4a;
  --navy-deep:   #13203a;
  --ink:         #1f2937;
  --slate:       #5f6b7a;
  --line:        #dfe3ea;
  --paper:       #f4f6f9;
  --white:       #ffffff;
  --green:       #1f8a5b;
  --green-soft:  #e3f4ea;
  --red:         #b83a2f;
  --red-soft:    #fbe9e7;
  --amber:       #9a6a12;
  --amber-soft:  #fdf3dc;
  --focus:       #3b82f6;
  --radius:      8px;
  --font: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* vence display:flex/grid de classes como .bulk-bar e .dlg-form label */
html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;   /* o iOS não aumenta o texto sozinho ao girar a tela */
  /* Sem o efeito elástico: no celular ele arrasta a página inteira ao chegar no
     fim, e leva junto o cabeçalho fixo e a barra de botões do rodapé. */
  overscroll-behavior: none;
  /* "clip" corta o transbordo lateral sem criar um contêiner de rolagem — é o que
     permite conter o arrasto para os lados sem quebrar o position: sticky. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
}
h1, h2 { margin: 0; font-weight: 600; }
h2 { font-size: 0.95rem; color: var(--slate); margin-bottom: .5rem; }
a { color: inherit; }
.muted { color: var(--slate); font-size: .9rem; margin: .25rem 0; }
.num, .money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Toque no Android: o Chrome pinta um retângulo cinza forte sobre o que foi tocado.
   Trocado por um realce discreto na cor da marca — mantém a resposta visual, sem o borrão. */
a, button, label, summary { -webkit-tap-highlight-color: rgba(27, 42, 74, .12); }
/* "manipulation" desliga a espera pelo duplo toque de zoom: o botão responde na hora. */
button, .btn, a.btn, .icon-btn, .card-toggle, .nav-toggle, .edit-btn, .clr-btn, .seg label { touch-action: manipulation; }

/* --- Barra superior ------------------------------------------------------ */
.topbar {
  background: var(--navy);
  color: var(--white);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1.5rem;
  /* O fundo azul vai de ponta a ponta, mas o conteúdo fica na mesma faixa de 1400px
     centralizada do painel (.layout): brand à esquerda e usuário à direita alinham
     com as bordas do conteúdo, em qualquer largura de tela. */
  padding: .9rem max(1.5rem, calc((100% - 1400px) / 2 + 1.5rem));
  /* Fica preso no topo ao rolar; abaixo dos diálogos (top layer) e dos toasts (z 50) */
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 8px rgba(19,32,58,.18);
  transition: padding .18s ease;
}
/* Compacto ao rolar (classe posta por assets/topbar.js): menos altura, logo e números menores.
   Só do tablet para cima: no celular o cabeçalho já nasce compacto e encolher de
   novo faria o conteúdo pular a cada rolagem. Lá ele fica fixo, sempre do mesmo tamanho. */
@media (min-width: 641px) {
  .topbar.is-compact { padding-top: .4rem; padding-bottom: .4rem; }
  .topbar.is-compact .brand .logo { height: 28px; }
  .topbar.is-compact .rta-card { padding: .3rem .8rem; }
  .topbar.is-compact .rta-value { font-size: 1.15rem; }
  .topbar.is-compact .rta-hint { display: none; }
  .topbar.is-compact .month-nav h1 { font-size: 1rem; }
  .topbar.is-compact .icon-btn { width: 1.7rem; height: 1.7rem; font-size: 1rem; }
  .topbar.is-compact .account-head h1 { font-size: 1.15rem; }
  .topbar.is-compact .balances { font-size: .9em; }
}
.brand .logo, .rta-card, .rta-value, .month-nav h1, .icon-btn, .account-head h1 { transition: height .18s ease, font-size .18s ease, padding .18s ease; }
.brand { font-weight: 700; letter-spacing: .01em; font-size: 1.1rem; }
.month-nav { display: flex; align-items: center; gap: .5rem; }
.month-nav h1 { font-size: 1.15rem; min-width: 12ch; text-align: center; text-transform: capitalize; }
.icon-btn {
  background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px; width: 2rem; height: 2rem; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.icon-btn:hover { background: rgba(255,255,255,.12); }
.user-box { font-size: .9rem; opacity: .9; }
.nav-toggle { display: none; }   /* só existe no celular; ver o bloco Responsivo */
.user-box a { margin-left: .75rem; opacity: .8; }

/* O elemento que carrega o painel: o card do "Pronto para atribuir". */
.rta-card {
  display: grid; grid-template-columns: auto auto; column-gap: 1rem; align-items: center;
  padding: .55rem 1.1rem; border-radius: var(--radius);
  background: var(--green); color: var(--white);
  transition: background-color .25s ease;
}
.rta-card.is-negative { background: var(--red); }
.rta-card.is-zero { background: var(--navy-deep); border: 1px solid rgba(255,255,255,.25); }
.rta-label { font-size: .8rem; opacity: .9; grid-row: 1; }
.rta-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; grid-row: 1 / span 2; }
.rta-hint { font-size: .75rem; opacity: .85; grid-row: 2; }

/* --- Layout -------------------------------------------------------------- */
.layout {
  display: grid; grid-template-columns: 270px 1fr; gap: 1.25rem;
  padding: 1.25rem 1.5rem; max-width: 1400px; margin: 0 auto;
}
/* Painel e lançamentos: uma coluna extra à direita para as métricas e os vencimentos.
   As demais telas (extrato) seguem com duas colunas, sem a classe .layout-rail. */
.layout-rail { grid-template-columns: 270px 1fr 270px; }
@media (max-width: 1200px) { .layout-rail { grid-template-columns: 240px 1fr 240px; } }
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
/* Coluna esquerda fixa enquanto a tabela rola (painel e lançamentos). Se ela for mais alta
   que a janela, rola por conta própria dentro do espaço, sem sumir da tela. */
.sidebar {
  position: sticky; top: calc(var(--topbar-h, 70px) + 1.25rem); align-self: start;
  max-height: calc(100vh - var(--topbar-h, 70px) - 2.5rem); overflow-y: auto;
  scrollbar-width: thin; padding-right: 2px;
}
.sidebar section { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.account-list { list-style: none; margin: 0; padding: 0; }
.account-list li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.account-list li:last-child { border-bottom: 0; }
/* Lista agrupada por tipo (cartão de contas): a única divisão é a linha contínua do bloco */
.account-list-grouped li { border-bottom: 0; }
/* Cabeçalho do bloco: rótulo à esquerda, subtotal do tipo à direita */
.account-list .acc-group { border-top: 1px solid var(--line); margin-top: .55rem; padding-top: .55rem;
  align-items: baseline; }
.account-list .acc-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.account-list .acc-group > span:first-child { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--navy); }
/* Subtotal do tipo: etiqueta como a do "Pronto para atribuir" - verde no positivo, vermelha no negativo */
.account-list .acc-group .money { font-size: .78rem; font-weight: 600; color: var(--white);
  background: var(--green); border-radius: 999px; padding: .1rem .5rem; }
.account-list .acc-group .money.is-negative { background: var(--red); }
.account-list .acc-group .money.is-zero { background: var(--slate); }
/* Cabeçalho do cartão com botão de recolher (cartão de contas) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.card-head h2 { margin: 0; }
.card-toggle { background: transparent; border: 1px solid var(--line); border-radius: 6px;
  width: 1.6rem; height: 1.6rem; line-height: 1; font-size: .8rem; color: var(--slate);
  cursor: pointer; display: grid; place-items: center; }
.card-toggle:hover { border-color: var(--slate); color: var(--ink); }
#accounts-box.is-collapsed .account-list { display: none; }
#accounts-box.is-collapsed .side-totals { margin-top: 0; border-top: 0; padding-top: 0; }
.side-totals { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.side-totals div { display: flex; justify-content: space-between; padding: .2rem 0; font-size: .92rem; }
.side-totals strong { font-variant-numeric: tabular-nums; }
.metric-value { font-size: 1.9rem; font-weight: 700; margin: 0; line-height: 1.1; }
.metric-value small { font-size: .85rem; font-weight: 400; color: var(--slate); }
.side-actions { display: flex; flex-direction: column; gap: .5rem; }

/* --- Próximos vencimentos / recorrências --------------------------------- */
.upcoming-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.upcoming-list li { padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.upcoming-list li:last-child { border-bottom: 0; }
.upcoming-list .up-head { display: flex; justify-content: space-between; gap: .5rem; }
.upcoming-list .up-date { color: var(--slate); font-variant-numeric: tabular-nums; }
.upcoming-list .up-title { font-weight: 600; }
.upcoming-list .up-meta { margin: 0; font-size: .78rem; }
.upcoming-list .up-actions { display: flex; gap: .35rem; margin-top: .3rem; }
.upcoming-list li.is-overdue .up-date, .upcoming-list li.is-overdue .up-meta strong { color: var(--red); }
.upcoming-list .money.in { color: var(--green); }
.dlg-wide { max-width: 640px; }
.rec-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.rec-list li { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.rec-list li:last-child { border-bottom: 0; }
.rec-list li.is-paused .rec-main { opacity: .6; }
.rec-list .rec-main { min-width: 0; }
.rec-list .rec-title { font-weight: 600; display: flex; gap: .75rem; flex-wrap: wrap; }
.rec-list .muted { margin: .1rem 0 0; font-size: .8rem; }
.rec-list .rec-actions { display: flex; gap: .35rem; flex: 0 0 auto; }
#tx-installments p, #tx-repeat-fields p { margin: 0; font-size: .8rem; }
#tx-repeat-fields { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; padding-left: .5rem; border-left: 2px solid var(--line); }

/* --- Botões -------------------------------------------------------------- */
.btn {
  font: inherit; cursor: pointer; border-radius: 6px; padding: .5rem .9rem;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
}
.btn:hover { border-color: var(--slate); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-block { width: 100%; }
.btn-sm { padding: .25rem .6rem; font-size: .82rem; }
.btn-danger { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }
/* Link vestido de botão (navegação entre telas): mesmo tamanho e alinhamento dos <button> */
a.btn { display: inline-block; text-decoration: none; text-align: center; }
.btn-link { border-color: var(--navy); color: var(--navy); }
.btn-link:hover { background: var(--navy); color: var(--white); }

/* --- Tabela de envelopes ------------------------------------------------- */
.table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.budget-table { width: 100%; border-collapse: collapse; }
.budget-table th, .budget-table td { padding: .55rem .9rem; border-bottom: 1px solid var(--line); }
.budget-table thead th { font-size: .8rem; color: var(--slate); font-weight: 600; text-align: left; background: var(--paper); }
.budget-table thead th.num { text-align: right; }
.budget-table tfoot td { font-weight: 600; background: var(--paper); border-bottom: 0; }
.col-name { width: 32%; }
.col-target { width: 26%; }

.group-row td { background: #eef1f6; font-weight: 600; cursor: pointer; user-select: none; }
.group-row .caret { display: inline-block; width: 1.1rem; transition: transform .15s ease; }
.group-row.is-collapsed .caret { transform: rotate(-90deg); }
.group-row td:first-child { padding-left: .6rem; }
.cat-row td:first-child { padding-left: 2rem; position: relative; }

/* Arrastar e soltar: alça discreta, linha de inserção e destaque do grupo de destino */
.drag-handle {
  position: absolute; left: .4rem; top: 50%; transform: translateY(-50%);
  color: var(--slate); opacity: 0; cursor: grab; font-size: 1.15rem; letter-spacing: -.15em; user-select: none;
  padding: .1rem .25rem; transition: opacity .12s ease, color .12s ease;
}
.cat-row:hover .drag-handle { opacity: 1; color: var(--navy); }
.drag-handle:active { cursor: grabbing; }
.cat-row.is-dragging, .group-row.is-dragging { opacity: .4; }
.cat-row.drop-before td, .group-row.drop-before td { box-shadow: inset 0 3px 0 0 var(--navy); }
.cat-row.drop-after td, .group-row.drop-after td { box-shadow: inset 0 -3px 0 0 var(--navy); }
.group-row.drop-into td { background: var(--green-soft) !important; box-shadow: inset 0 0 0 2px var(--green); }
/* Alça do grupo: o cabeçalho tem menos recuo, então ela fica à esquerda do caret */
.group-row td:first-child { position: relative; padding-left: 1.6rem; }
.drag-handle-group { left: .2rem; }
.group-row:hover .drag-handle-group { opacity: 1; color: var(--navy); }
.cat-row.is-cc td:first-child { padding-left: 2rem; font-style: italic; }
.cat-row.is-overspent td:first-child { color: var(--red); }

.alloc-input {
  font: inherit; font-variant-numeric: tabular-nums; text-align: right;
  width: 8.5rem; padding: .3rem .5rem; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--ink);
}
.alloc-input:hover { border-color: var(--line); background: var(--paper); }
.alloc-input:focus { border-color: var(--focus); background: var(--white); outline: none; }
.alloc-input:disabled { color: var(--slate); }

.pill {
  display: inline-block; min-width: 6.5rem; text-align: right;
  padding: .2rem .6rem; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Etiqueta com saldo: além de mostrar, é o atalho para mover esse saldo */
.pill.is-movable { cursor: pointer; }
.pill.is-movable:hover { box-shadow: inset 0 0 0 1px currentColor; }
.pill-pos { background: var(--green-soft); color: var(--green); }
.pill-zero { background: var(--paper); color: var(--slate); font-weight: 500; }
.pill-neg { background: var(--red-soft); color: var(--red); }
.pill-warn { background: var(--amber-soft); color: var(--amber); }

.target { font-size: .8rem; color: var(--slate); }
.target .bar { height: 5px; background: var(--paper); border-radius: 3px; overflow: hidden; margin-top: .25rem; border: 1px solid var(--line); }
.target .bar span { display: block; height: 100%; background: var(--green); transition: width .3s ease; }
.target.is-done .bar span { background: var(--green); }
.target.is-behind .bar span { background: var(--amber); }
.cover-btn { margin-left: .5rem; }

.empty { text-align: center; color: var(--slate); padding: 2rem !important; }

/* Botão de edição discreto: aparece ao passar o mouse na linha / item */
.edit-btn {
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--slate); padding: .15rem .4rem; margin-left: .45rem; opacity: 0; transition: opacity .12s ease;
}
tr:hover .edit-btn, li:hover .edit-btn, .edit-btn:focus-visible { opacity: 1; }
.edit-btn:hover { border-color: var(--line); background: var(--white); color: var(--navy); }
.dlg-actions .btn-danger { margin-right: auto; }

/* --- Lançamentos --------------------------------------------------------- */
.recent-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.recent-head h2 { margin: 0; }
.filters { display: flex; align-items: center; gap: .75rem; font-size: .88rem; color: var(--slate); }
.filters select { font: inherit; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); }
.filters .check { display: flex; align-items: center; gap: .35rem; }
.recent { margin-top: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.tx-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tx-table th, .tx-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.tx-table th { font-size: .78rem; color: var(--slate); }
.tx-table th.num { text-align: right; }
.tx-table .money.in { color: var(--green); }
.tx-table .money.out { color: var(--ink); }
.tx-table .flag { font-size: .75rem; color: var(--red); display: block; }
.tx-env { display: none; }   /* copia do envelope sob o beneficiário: só no celular */

/* --- Extrato por conta --------------------------------------------------- */
.topbar-register { grid-template-columns: auto 1fr auto auto; }
.brand-link { text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.brand-link:hover { text-decoration: none; opacity: .85; }
.brand .logo { height: 36px; width: auto; display: block; }     /* altura do logotipo no cabeçalho */
.brand .back { font-size: 1.3rem; line-height: 1; opacity: .8; }  /* seta "‹" de voltar nas telas internas */
@media (max-width: 640px) { .brand .logo { height: 30px; } }
.account-head { display: flex; align-items: baseline; gap: .75rem; }
.account-head h1 { font-size: 1.15rem; }
.account-head .acc-type { font-size: .8rem; opacity: .75; }
.balances { display: flex; gap: 1.25rem; }
.balances div { display: flex; flex-direction: column; align-items: flex-end; }
.balances span { font-size: .75rem; opacity: .8; }
.balances strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.balances .is-total strong { font-size: 1.3rem; }
.balances .is-total { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.25); }

.account-list li.is-active { font-weight: 600; }
.account-list li.is-active .acc-link { color: var(--navy); }
.acc-link { text-decoration: none; }
.acc-link:hover { text-decoration: underline; }

.field { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--slate); margin: .5rem 0; }
.field input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.field input.is-invalid { border-color: var(--red); }
#rec-diff.ok { color: var(--green); }
#rec-diff.off { color: var(--red); }
.rec-status { font-size: .85rem; margin: .5rem 0 0; color: var(--slate); }
.rec-status.is-ok { color: var(--green); font-weight: 600; }
.rec-status.is-off { color: var(--amber); }

.filters label { display: flex; align-items: center; gap: .35rem; }
.filters input[type="date"] { font: inherit; padding: .28rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); }
.bulk-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; background: var(--amber-soft); color: var(--amber); border-radius: 6px; font-size: .88rem; }
.bulk-bar span { margin-right: auto; font-weight: 600; }
.table-scroll { overflow-x: auto; }
.register-table th.col-sel, .register-table td.col-sel { width: 2rem; text-align: center; }
.register-table th.col-clr, .register-table td.col-clr { width: 2.5rem; text-align: center; }
.register-table .money.neg { color: var(--red); }
.register-table tr.is-cleared td { color: var(--slate); }
.register-table tr.is-cleared td.money.in { color: var(--green); opacity: .8; }
.register-table tr.is-selected td { background: var(--amber-soft); }
.register-table .row-opening td { background: var(--paper); font-style: italic; color: var(--slate); }
.register-table tfoot td { font-weight: 600; background: var(--paper); border-bottom: 0; padding: .55rem .5rem; }
.clr-btn {
  font: inherit; cursor: pointer; width: 1.7rem; height: 1.7rem; line-height: 1; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--slate); font-size: .95rem;
}
.clr-btn:hover { border-color: var(--green); color: var(--green); }
.clr-btn.is-on { background: var(--green-soft); border-color: var(--green); color: var(--green); font-weight: 700; }
.clr-btn:disabled { opacity: .5; cursor: wait; }
.clr-btn.is-locked { background: var(--paper); border-color: var(--line); font-size: .8rem; }
.clr-btn.is-locked:hover { border-color: var(--amber); }
.register-table tr.is-locked td { color: var(--slate); }
.rec-locked { padding: .5rem .6rem; margin-bottom: .6rem; background: var(--green-soft); border-radius: 6px; }
.rec-locked .muted { margin: 0 0 .4rem; color: var(--green); font-size: .82rem; }
.rec-drift { margin: 0 0 .4rem; font-size: .82rem; color: var(--red); font-weight: 600; }
#rec-close { margin-top: .6rem; }

/* --- Relatórios ---------------------------------------------------------- */
.topbar-reports { grid-template-columns: auto 1fr auto; }
.reports { padding: 1.25rem 1.5rem; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.reports-filters { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; }
.reports-filters label { display: flex; align-items: center; gap: .5rem; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.stat-label { font-size: .8rem; color: var(--slate); }
.stat-value { font-size: 1.7rem; font-weight: 600; line-height: 1.15; }   /* algarismos proporcionais: número grande, não coluna */
.stat-delta { font-size: .8rem; color: var(--slate); }
.stat-delta.up { color: var(--green); }
.stat-delta.down { color: var(--red); }

.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; transition: opacity .15s ease; }
.report-grid.is-loading { opacity: .55; pointer-events: none; }
.report-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.report-card.report-wide { grid-column: 1 / -1; }
.report-card header h2 { color: var(--ink); font-size: 1.02rem; margin-bottom: .1rem; }
.report-card header .muted { margin: 0 0 .5rem; }
.card-tools { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .5rem; font-size: .82rem; }
.card-tools .muted { margin: 0; font-size: .8rem; }
.seg-sm label { padding: .2rem .6rem; font-size: .8rem; }
.seg-sm { flex: 0 0 auto; }

.chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .grid.zero { stroke: #c3c7cf; }
.chart .tick { font-size: 11px; fill: var(--slate); font-variant-numeric: tabular-nums; }
.chart .row-label { font-size: 12px; fill: var(--ink); }
.chart .end-label { font-size: 11px; fill: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .empty-text { font-size: 13px; fill: var(--slate); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--white); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit.is-hover { fill: rgba(27,42,74,.06); }

.legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--slate); margin-bottom: .35rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i, .chart-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

.chart-tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 300px;
  background: var(--navy-deep); color: var(--white); border-radius: 6px; padding: .5rem .7rem;
  font-size: .8rem; box-shadow: 0 6px 20px rgba(19,32,58,.3);
}
.chart-tip strong { display: block; margin-bottom: .25rem; text-transform: capitalize; }
.chart-tip div { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.chart-tip div b { margin-left: auto; padding-left: 1rem; font-variant-numeric: tabular-nums; font-weight: 600; }

.chart .ref-line { stroke: var(--slate); stroke-width: 1.5; }
.chart .ref-label { font-size: 10px; fill: var(--slate); }

/* Metas: pequenos múltiplos, dois por linha, mesma escala de meses */
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.goal { min-width: 0; border-top: 1px solid var(--line); padding-top: .6rem; }
.goal header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .25rem; }
.goal h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.goal header .muted { display: block; margin: 0; font-size: .78rem; }
.goal header em { font-style: normal; opacity: .8; }
.goal .pill { flex: 0 0 auto; min-width: 3.5rem; }
.goal-detail { margin: .15rem 0 0; font-size: .8rem; }
@media (max-width: 960px) { .goal-grid { grid-template-columns: 1fr; } }

/* Cartão: dois gráficos lado a lado (fluxo do mês × estoque no fechamento) */
.two-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.two-charts section { min-width: 0; }
.two-charts h3 { margin: 0 0 .15rem; font-size: .92rem; font-weight: 600; }
.two-charts .muted { margin: 0 0 .5rem; font-size: .8rem; }
@media (max-width: 960px) { .two-charts { grid-template-columns: 1fr; } }

.report-table { font-size: .85rem; }
.report-table td, .report-table th { white-space: nowrap; }
.report-table tfoot td { font-weight: 600; background: var(--paper); border-bottom: 0; }
.report-table .is-over { color: var(--red); font-weight: 600; }

@media (max-width: 960px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .report-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* --- Importar extrato ---------------------------------------------------- */
#dlg-import { max-width: 900px; }
.import-file input[type="file"] { font: inherit; padding: .4rem 0; }
.import-bulk { display: flex; gap: .75rem; align-items: center; margin: .25rem 0 .5rem; font-size: .85rem; color: var(--slate); }
.import-bulk label { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.import-bulk select, .import-table select { font: inherit; font-size: .85rem; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; max-width: 220px; background: var(--white); color: var(--ink); }
.import-table { font-size: .85rem; }
.import-table tr.is-imported td { color: var(--slate); }
.import-table tr.is-match td:nth-child(3) .muted { display: block; font-size: .78rem; }
#dlg-import .table-scroll { max-height: 55vh; overflow: auto; }
.mapping-table { font-size: .8rem; }
.mapping-table th { white-space: nowrap; }
.mapping-table td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapping-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem .9rem; margin: .75rem 0 .25rem; }
.mapping-fields label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--slate); }
.mapping-fields label.check { flex-direction: row; align-items: center; gap: .4rem; align-self: end; }
.mapping-fields select { font: inherit; font-size: .85rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); }
#import-summary a { color: var(--navy); font-weight: 600; }
@media (max-width: 640px) { .mapping-fields { grid-template-columns: 1fr 1fr; } }

/* --- Alertas e toasts ---------------------------------------------------- */
.alert { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .92rem; }
.alert-error { background: var(--red-soft); color: var(--red); border: 1px solid #f3c9c4; }
.toast-stack { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; max-width: 420px; }
.toast { background: var(--navy-deep); color: var(--white); padding: .7rem 1rem; border-radius: var(--radius); font-size: .9rem; box-shadow: 0 6px 20px rgba(19,32,58,.25); }
.toast.warn { background: var(--amber); }
.toast.error { background: var(--red); }

/* --- Diálogos ------------------------------------------------------------ */
dialog { border: 0; border-radius: 10px; padding: 0; max-width: 460px; width: calc(100% - 2rem); box-shadow: 0 20px 50px rgba(19,32,58,.3); }
dialog::backdrop { background: rgba(19,32,58,.45); }
.dlg-form { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.dlg-form h2 { font-size: 1.15rem; color: var(--ink); margin: 0 0 .25rem; }
.dlg-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--slate); }
.dlg-form input[type="text"], .dlg-form input[type="date"], .dlg-form input[type="email"],
.dlg-form input[type="password"], .dlg-form select {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--white);
}
.dlg-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dlg-form .check { flex-direction: row; align-items: center; gap: .5rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg label { flex: 1; text-align: center; padding: .45rem; cursor: pointer; font-size: .88rem; color: var(--slate); }
.seg label:has(input:checked) { background: var(--navy); color: var(--white); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }

/* --- Login --------------------------------------------------------------- */
/* "safe center": um card mais alto que a tela (cadastro) encosta no topo e rola, em vez de ter o início cortado */
/* 100dvh = altura visível de verdade; com 100vh o Chrome do Android usa a altura
   COM a barra de endereço recolhida e a tela de login nasce rolável por alguns pixels. */
.login-body { display: grid; place-items: safe center; min-height: 100vh; min-height: 100dvh; padding: 1.5rem 0; background: var(--navy); }
/* Marca dentro do cartão, no lugar do antigo título de texto (versão escura do logotipo) */
.login-card .login-brand { margin: 0; font-size: 0; line-height: 0; }
.login-card .login-logo { height: 44px; width: auto; display: block; }
@media (max-width: 640px) { .login-card .login-logo { height: 38px; } }
.login-card { background: var(--white); border-radius: 12px; padding: 2rem; width: min(380px, calc(100% - 2rem)); display: flex; flex-direction: column; gap: .75rem; }
.login-card h1 { font-size: 1.5rem; }
.login-card form { display: flex; flex-direction: column; gap: .75rem; }
.login-card label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--slate); }
.login-card input { font: inherit; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 6px; }
.alert-ok { background: var(--green-soft); color: var(--green); border: 1px solid #bfe3cd; }
.alert-warn { background: var(--amber-soft); color: var(--amber); border: 1px solid #f0dcaa; }
/* Aviso do administrador para todos os usuários (logo abaixo da barra superior) */
.announce { padding: .6rem max(1.5rem, calc((100% - 1400px) / 2 + 1.5rem)); font-size: .9rem; text-align: center; border-bottom: 1px solid transparent; }
.announce-info { background: #e8effa; color: var(--navy); border-color: #c9d8f0; }
.announce-warn { background: var(--amber-soft); color: var(--amber); border-color: #f0dcaa; }
/* Escolha de início no cadastro: dois cartões-rádio empilhados */
.choice { border: 0; padding: 0; margin: .25rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.choice legend { font-size: .88rem; color: var(--slate); margin-bottom: .4rem; padding: 0; }
.login-card .choice label { flex-direction: row; align-items: flex-start; gap: .6rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); }
.choice label:has(input:checked) { border-color: var(--navy); background: var(--paper); }
.choice input { margin-top: .2rem; flex: 0 0 auto; }
.choice span { display: flex; flex-direction: column; gap: .15rem; }
.choice strong { font-size: .92rem; }
.choice small { font-size: .8rem; color: var(--slate); line-height: 1.35; }
.login-links { margin: .5rem 0 0; text-align: center; font-size: .88rem; color: var(--slate); }
.login-links a { color: var(--navy); font-weight: 600; }

/* --- Página de lançamentos (transactions.php) ---------------------------- */
.recent-page { margin-top: 0; }
.recent-page .recent-head { flex-wrap: wrap; gap: .75rem; }
.recent-page .filters { flex-wrap: wrap; }
.recent-page #tx-search { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 6px; min-width: 260px; flex: 1 1 260px; }
.recent-page .tx-table td { padding: .5rem .6rem; }
.recent-page .tx-table tbody tr:hover { background: var(--paper); }
#tx-count { margin: .6rem 0 0; font-size: .85rem; }

/* --- Minha conta --------------------------------------------------------- */
.settings { padding: 1.5rem 1.5rem 3rem; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.settings-intro { margin: 0 0 .25rem; color: var(--slate); font-size: .95rem; }
.settings .alert { margin: 0; }
.settings-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.5rem 1.5rem; box-shadow: 0 1px 2px rgba(19,32,58,.04); }
.settings-card > header { margin-bottom: 1rem; }
.settings-card > header h2 { color: var(--ink); font-size: 1.1rem; margin: 0 0 .2rem; }
.settings-card > header .muted { margin: 0; font-size: .88rem; }
.settings-card form { display: flex; flex-direction: column; gap: .9rem; }
.settings-card form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--slate); font-weight: 500; }
.settings-card form input[type="text"], .settings-card form input[type="email"], .settings-card form input[type="password"] {
  font: inherit; font-weight: 400; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--white); width: 100%;
}
.settings-card form input:focus { border-color: var(--focus); }
.settings-card form input:disabled { background: var(--paper); color: var(--slate); }
.settings-card .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.settings-card .check { flex-direction: row; align-items: center; gap: .55rem; color: var(--ink); font-weight: 400; font-size: .9rem; }
.settings-card .check input { width: 1rem; height: 1rem; margin: 0; }
.settings-card form .muted { margin: -.3rem 0 0; font-size: .82rem; }
.check-list { display: flex; flex-direction: column; gap: .5rem; }
.card-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.card-order li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.card-order .check { flex: 1; }
.order-btns { display: flex; gap: .25rem; }
.order-btns .btn { padding: .15rem .5rem; line-height: 1.2; }
.order-btns .btn:disabled { opacity: .35; cursor: default; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* Escolha do modo de recomeço: os dois cartões-rádio lado a lado (empilham no celular) */
.settings-card .choice { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.settings-card .choice legend { grid-column: 1 / -1; font-weight: 500; }
.settings-card .choice label { flex-direction: row; align-items: flex-start; gap: .6rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); font-weight: 400; }
.settings-card .choice label:has(input:checked) { border-color: var(--navy); background: var(--paper); box-shadow: inset 0 0 0 1px var(--navy); }
/* Zona de perigo */
.danger-title { color: var(--red); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: .75rem 0 -.5rem; }
.settings-card.is-danger { border-color: #efc4be; }
.settings-card.is-danger > header h2 { color: var(--red); }
.settings-card.is-danger .form-actions { border-top-color: #f3c9c4; }
.settings-card.is-danger .btn-danger { border-color: var(--red); background: var(--red); color: var(--white); }
.settings-card.is-danger .btn-danger:hover { background: #9a2f25; border-color: #9a2f25; }
.summary-label { margin: 0 0 .5rem; }
.summary-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.summary-list li { background: var(--paper); border-radius: 8px; padding: .6rem .5rem; text-align: center; display: flex; flex-direction: column; gap: .1rem; }
.summary-list strong { color: var(--ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.summary-list span { color: var(--slate); font-size: .75rem; }
.user-box a.user-link { opacity: 1; font-weight: 600; text-decoration: none; }
.user-box a.user-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .settings { padding: 1rem 1rem 2.5rem; }
  .settings-card { padding: 1rem 1.1rem 1.25rem; }
  .settings-card .row-2, .settings-card .choice { grid-template-columns: 1fr; }
  .summary-list { grid-template-columns: repeat(3, 1fr); }
  .form-actions .btn { width: 100%; }
}

/* --- Administração ------------------------------------------------------- */
.admin { padding: 1.5rem 1.5rem 3rem; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.admin .alert { margin: 0; }
.topbar-admin .account-head { display: flex; align-items: baseline; gap: 1.25rem; }
.admin-tabs { display: flex; gap: .25rem; }
.admin-tabs a { color: var(--white); opacity: .7; text-decoration: none; font-size: .9rem; padding: .3rem .7rem; border-radius: 6px; }
.admin-tabs a:hover { opacity: 1; background: rgba(255,255,255,.1); }
.admin-tabs a.is-active { opacity: 1; background: rgba(255,255,255,.16); font-weight: 600; }
.user-box a.admin-link { background: var(--amber-soft); color: var(--amber); opacity: 1; padding: .15rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; text-decoration: none; margin-left: 0; margin-right: .5rem; }
.admin-back { margin: -.25rem 0 -.5rem; font-size: .88rem; }
.admin-back a { color: var(--navy); font-weight: 600; text-decoration: none; }
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.kpi span { font-size: .75rem; color: var(--slate); line-height: 1.2; }
.kpi strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi.is-warn strong { color: var(--amber); }
.kpi.is-neg strong { color: var(--red); }
.settings-card form.admin-filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.settings-card form.admin-filters input[type="search"], .settings-card form.admin-filters select { font: inherit; width: auto; height: 2.3rem; padding: 0 .65rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); }
.settings-card form.admin-filters input[type="search"] { flex: 1 1 220px; max-width: 360px; min-width: 0; }
.admin-count { margin-left: auto; }
.admin-table th, .admin-table td { vertical-align: middle; padding: .55rem .6rem; }
.admin-table tbody tr:hover { background: var(--paper); }
.admin-user { font-weight: 600; color: var(--ink); text-decoration: none; }
.admin-user:hover { text-decoration: underline; }
.admin-table td small { display: block; color: var(--slate); font-size: .8rem; }
.admin-table .pill { vertical-align: middle; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.settings-card form.admin-inline { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; }
.settings-card form.admin-inline label { flex-direction: row; align-items: center; gap: .4rem; font-size: .88rem; color: var(--slate); font-weight: 400; }
.admin-inline input[type="number"] { font: inherit; width: 5rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.admin-user-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.admin-user-head h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem 1.25rem; margin: 0 0 1.1rem; }
.facts div { display: flex; flex-direction: column; gap: .1rem; }
.facts dt { font-size: .75rem; color: var(--slate); }
.facts dd { margin: 0; font-size: .92rem; font-variant-numeric: tabular-nums; }
.admin-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.admin-actions form { display: flex; flex-direction: column; gap: .35rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.admin-actions form small { font-size: .78rem; color: var(--slate); line-height: 1.3; }
.admin-actions .btn { align-self: flex-start; }
.admin-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.settings-card.is-danger .admin-actions form { border-color: #f3c9c4; background: #fdf5f4; }
.admin-delete { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.admin-delete label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--slate); font-weight: 500; }
.admin-delete input { font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 6px; max-width: 420px; }
.settings-card code { font-size: .85em; background: var(--paper); padding: .1rem .35rem; border-radius: 4px; }
/* Segurança / Sistema */
.admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.settings-card form.inline-form { display: inline; margin: 0; }
.actions-cell { white-space: nowrap; }
.actions-cell .btn, .actions-cell form { display: inline-block; vertical-align: middle; margin-left: .25rem; }
.table-tall { max-height: 420px; overflow-y: auto; }
.facts-tight { margin: 1rem 0 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.facts dd code { word-break: break-all; }
.admin-table td .pill + .pill { margin-left: .2rem; }
.settings-card p.muted code { word-break: break-all; }
/* Configuração */
.settings-card form textarea { font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--white); width: 100%; min-height: 4.5rem; resize: vertical; }
.settings-card form .seg { max-width: 320px; }
.settings-card form .seg label { display: block; }
.config-meta { font-size: .78rem; color: var(--slate); margin: -.25rem 0 0; }
.preview { margin: .5rem 0 0; border-radius: 6px; }
.config-state { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
/* Métricas */
.kpi small { font-size: .72rem; color: var(--slate); }
.chart-admin { margin-top: .25rem; }
.chart-admin .bar { fill: var(--navy); opacity: .85; }
.chart-admin .bar:hover { opacity: 1; }
.chart-admin .val { font-size: 10px; fill: var(--slate); font-variant-numeric: tabular-nums; }
.chart-admin .row-label { font-size: 12px; fill: var(--ink); }
@media (max-width: 960px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-two { grid-template-columns: 1fr; }
  .topbar-admin .account-head { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .admin-table th:nth-child(6), .admin-table td:nth-child(6), .admin-table th:nth-child(7), .admin-table td:nth-child(7) { display: none; }
}
@media (max-width: 640px) {
  .admin { padding: 1rem 1rem 2.5rem; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-table th:nth-child(2), .admin-table td:nth-child(2) { display: table-cell; }   /* vence a regra genérica da .tx-table */
  .admin-table th:nth-child(3), .admin-table td:nth-child(3), .admin-table th:nth-child(4), .admin-table td:nth-child(4) { display: none; }
}

/* --- Responsivo ---------------------------------------------------------- */
@media (max-width: 960px) {
  .topbar { grid-template-columns: 1fr auto; row-gap: .75rem; }
  .month-nav { grid-column: 1 / -1; justify-content: center; }
  .layout, .layout-rail { grid-template-columns: 1fr; }
  /* Sem isto a coluna não encolhe abaixo do conteúdo mais teimoso dela — no caso,
     a largura da opção mais longa do select de contas — e leva a tela toda junto. */
  .layout > * { min-width: 0; }
  /* No celular a coluna volta ao fluxo normal: sem rolagem própria e, por isso,
     sem o recuo de 2px que reserva espaço para a barra de rolagem dela no desktop
     (era ele que deixava os cartões 2px mais estreitos que a tabela). */
  /* Empilhado, a ordem é: contas, tabela de envelopes e por fim as métricas,
     os vencimentos e os atalhos. O cartão de contas vem primeiro porque é o
     retrato da situação — e ele pode ser recolhido no botão do próprio título. */
  .sidebar { order: 1; position: static; max-height: none; overflow: visible; padding-right: 0; }
  .content { order: 2; }
  .sidebar.rail { order: 3; }
  .col-name { width: auto; }
  .col-target { width: auto; }
}

/* ==========================================================================
   Celular (até 640px)
   Três princípios: nada de zoom automático ao focar um campo (16px nos
   controles), alvo de toque de no mínimo ~44px, e uma coluna só, com o
   conteúdo ocupando a largura útil da tela.
   ========================================================================== */
@media (max-width: 640px) {
  /* O corpo do texto NÃO encolhe no celular: espaço se ganha reduzindo margens. */

  /* 16px é o mínimo que impede o Safari do iPhone de dar zoom ao focar um campo.
     A lista repete os seletores com classe porque eles vencem "input, select". */
  input, select, textarea,
  .dlg-form input, .dlg-form select, .filters select, .filters input,
  .login-card input, .field input, .settings-card input, .settings-card select,
  .import-bulk select, .import-table select, .mapping-fields select,
  .settings-card form.admin-filters input[type="search"],
  .settings-card form.admin-filters select { font-size: 16px; }

  /* --- Barra superior em duas faixas: marca + botão do menu; mês + pronto para
         atribuir. O <button> do menu vem logo depois da marca no HTML, então as
         quatro peças caem sozinhas nas células certas, sem posição explícita. */
  .topbar, .topbar-register, .topbar-reports, .topbar-admin {
    grid-template-columns: auto minmax(0, 1fr); gap: .5rem .6rem; padding: .6rem 1rem;
  }
  .topbar > * { min-width: 0; }
  .brand { grid-column: 1; }
  .nav-toggle {
    grid-column: 2; justify-self: end; display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; font-size: 1.35rem; line-height: 1; cursor: pointer;
    background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
  }
  .nav-toggle:hover { background: rgba(255,255,255,.12); }
  .brand .logo { height: 30px; }

  /* Mês e "pronto para atribuir" dividem a segunda faixa. O mês encolhe primeiro
     (min-width: 0 + reticências), para o valor nunca ser espremido. */
  .month-nav { grid-column: 1; gap: .2rem; }
  .month-nav h1 { min-width: 0; flex: 0 1 auto; max-width: 8.5rem; font-size: .95rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .icon-btn { width: 2rem; height: 2rem; font-size: 1.15rem; }
  .rta-card { grid-column: 2; grid-template-columns: 1fr auto; column-gap: .6rem; padding: .35rem .8rem;
              justify-items: end; text-align: right; }
  .rta-label { font-size: .72rem; }
  .rta-value { font-size: 1.25rem; }
  .rta-hint { display: none; }               /* a mesma informação aparece na faixa de alerta */
  .account-head, .balances { grid-column: 1 / -1; }
  .account-head { flex-wrap: wrap; gap: .25rem .75rem; }
  .balances { justify-content: space-between; gap: .75rem; }

  /* Menu: escondido até o botão abrir, e então ocupa uma faixa inteira embaixo */
  .user-box { display: none; grid-column: 1 / -1; }
  .user-box.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    justify-self: end; width: auto; min-width: 11rem; max-width: 85%; text-align: right;
    background: var(--navy-deep); border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius); padding: .15rem .9rem; opacity: 1; font-size: .95rem;
  }
  .user-box.is-open a { margin: 0; padding: .8rem .1rem; opacity: .95; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.12); }
  .user-box.is-open a:last-child { border-bottom: 0; }
  .user-box.is-open a.admin-link { margin: .5rem 0 .5rem auto; border-bottom: 0; }
  .admin-tabs { overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
  .admin-tabs a { white-space: nowrap; }

  /* --- Respiro das telas: menos margem lateral, mais largura útil */
  .layout { padding: 1rem .5rem; padding-bottom: 2rem; gap: 1rem; }   /* laterais estreitas: a tabela precisa da largura */
  .reports { padding: 1rem; padding-bottom: 2rem; gap: 1rem; }
  .sidebar { gap: 1rem; }
  .sidebar section { padding: .85rem; }
  .recent { padding: .85rem; margin-top: 1rem; }
  .login-card { padding: 1.5rem 1.25rem; }

  /* --- Alvos de toque: mínimo confortável para o dedo */
  .btn { min-height: 2.75rem; padding: .6rem 1rem; }
  .btn-sm { min-height: 2.25rem; padding: .35rem .7rem; font-size: .9rem; }
  .order-btns .btn { min-height: 2.25rem; min-width: 2.5rem; }
  .edit-btn, .clr-btn, .card-toggle { min-width: 2rem; min-height: 2rem; }
  .seg label { padding: .6rem .45rem; }
  .card-order li { padding: .6rem .7rem; }

  /* --- Tabelas: menos folga lateral, nomes longos podem quebrar e o que
         não cabe rola na horizontal em vez de espremer as colunas */
  .table-wrap { overflow-x: auto; }
  .table-scroll, .table-wrap { -webkit-overflow-scrolling: touch; }
  /* Quatro colunas no celular: Envelope, Alocado, Gasto e Disponível. Só a Meta
     fica de fora. Cada folga daqui — fonte, recuo, largura do campo — existe
     para as três colunas de dinheiro caberem sem transbordar. */
  .budget-table { font-size: .82rem; }
  .budget-table th, .budget-table td { padding: .4rem .25rem; vertical-align: middle; }
  .budget-table thead th { font-size: .66rem; line-height: 1.15; }
  /* Larguras fixas do desktop: juntas reservavam ~230px só para os números e
     empurravam a coluna "Disponível" para fora da tela. */
  .alloc-input { width: 4.2rem; padding: .3rem .25rem; }
  .budget-table .pill { min-width: 0; padding: .2rem .35rem; }
  .budget-table thead th:nth-child(5), .budget-table td:nth-child(5) { display: none; }
  .col-name { overflow-wrap: anywhere; }
  .cat-row td:first-child, .cat-row.is-cc td:first-child { padding-left: .9rem; }
  .group-row td:first-child { padding-left: .3rem; }
  .drag-handle, .drag-handle-group { display: none; }   /* arrastar e soltar não funciona no toque */
  /* Lançamentos viram cartões: a tabela não cabe em quatro colunas de texto, então
     cada linha é remontada em três faixas, usando altura no lugar de largura.
        data · conta                          valor
        beneficiário
        envelope                            [editar] [excluir]
     É a mesma tabela do computador: só a apresentação muda, via display: grid. */
  .tx-table, .tx-table tbody { display: block; }
  .tx-table thead { display: none; }
  .tx-table tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .5rem; row-gap: .1rem;
    padding: .6rem .15rem; border-bottom: 1px solid var(--line);
  }
  .tx-table tbody td, .recent-page .tx-table tbody td {
    display: block; padding: 0; border: 0; overflow-wrap: anywhere;
  }
  .tx-table tbody td:nth-child(1) { grid-area: 1 / 1; font-size: .74rem; color: var(--slate); white-space: nowrap; }
  .tx-table tbody td:nth-child(2) { grid-area: 1 / 2; font-size: .74rem; color: var(--slate); }
  .tx-table tbody td:nth-child(2)::before { content: "· "; }
  .tx-table tbody td:nth-child(3) { grid-area: 2 / 1 / 3 / 3; font-weight: 600; }
  .tx-table tbody td:nth-child(4) { grid-area: 3 / 1 / 4 / 3; font-size: .78rem; color: var(--slate); }
  .tx-table tbody td:nth-child(5) { grid-area: 1 / 3 / 3 / 4; align-self: start; text-align: right;
    font-size: 1rem; font-weight: 600; white-space: nowrap; }
  .tx-table tbody td:nth-child(6) { grid-area: 3 / 3 / 4 / 4; align-self: center; justify-self: end; white-space: nowrap; }
  .tx-table tbody td.empty { grid-column: 1 / -1; text-align: center; color: var(--slate); padding: 1rem 0; }
  .tx-table .d-year { display: none; }        /* "10/09" basta; o filtro do mês já dá o contexto */
  .tx-table .btn-sm { min-height: 2rem; padding: .25rem .45rem; }
  .filters select { min-width: 0; max-width: 100%; }
  .register-table th:nth-child(2), .register-table td:nth-child(2) { display: table-cell; }
  .register-table th:nth-child(4), .register-table td:nth-child(4) { display: none; }

  /* --- Filtros da lista de lançamentos: busca em linha própria */
  .recent-head { gap: .6rem; }
  .filters { width: 100%; flex-wrap: wrap; gap: .5rem .75rem; }
  .filters input[type="search"], .recent-page #tx-search { flex: 1 1 100%; min-width: 0;
    padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; }
  .bulk-bar { flex-wrap: wrap; }

  /* --- Diálogos viram folha presa embaixo: o polegar alcança os botões */
  dialog { max-width: none; width: 100%; margin: auto auto 0; border-radius: 12px 12px 0 0; max-height: 92vh; }
  #dlg-import { max-width: none; }
  .dlg-form { padding: 1rem 1rem 1.25rem; max-height: 92vh; overflow-y: auto; }
  .dlg-form .row-2 { grid-template-columns: 1fr; }
  .dlg-actions { flex-direction: column-reverse; gap: .5rem; }
  .dlg-actions .btn { width: 100%; }

  /* --- Relatórios: um gráfico por vez, números menores */
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 1.4rem; }
  .report-card { padding: .85rem .9rem; }
  .card-tools { flex-wrap: wrap; }
  .mapping-fields { grid-template-columns: 1fr; }

  /* --- Criar: barra fixa no rodapé, ao alcance do polegar. Os rótulos podem
         quebrar em duas linhas para caber três botões lado a lado. */
  #actions-box {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    /* bottom: 0 basta: o Chrome do Android já ancora elementos fixos no limite
       do que está visível. O corte que aparece ao rolar é transitório, enquanto
       a barra de endereço do navegador entra ou sai. */
    flex-direction: row; gap: .4rem; padding: .4rem .6rem;
    background: var(--white); border: 0; border-top: 1px solid var(--line); border-radius: 0;
    box-shadow: 0 -2px 10px rgba(19,32,58,.12);
  }
  #actions-box { padding-left: .5rem; padding-right: .5rem; }   /* mesma margem lateral do conteúdo */
  #actions-box .btn { flex: 1; min-height: 2.6rem; padding: .35rem .2rem;
    font-size: .7rem; line-height: 1.15; white-space: normal; }
  body { padding-bottom: 4rem; }             /* a barra fixa não cobre o fim da página */

  /* --- Avisos ocupam a largura da tela, acima da barra de criar */
  .toast-stack { left: .5rem; right: .5rem; bottom: 4.4rem; max-width: none; }
}
/* Celular estreito: não há largura para o rótulo e o valor lado a lado, então o
   cartão verde empilha — "Pronto para atribuir" em cima, o valor embaixo. */
@media (max-width: 430px) {
  .rta-card { grid-template-columns: 1fr; column-gap: 0; padding: .3rem .7rem; min-width: 0; }   /* empilhado, os dois encostam na direita */
  .rta-label { grid-row: 1; font-size: .68rem; }
  .rta-value { grid-row: 2; font-size: 1.1rem; }
  /* mês numa linha, ano na outra: as duas partes viram blocos */
  .month-nav h1 { max-width: 6rem; white-space: normal; line-height: 1.12; font-size: .9rem; }
  .month-nav h1 .m-name, .month-nav h1 .m-year { display: block; }
  .month-nav h1 .m-year { text-transform: none; font-size: .82rem; opacity: .85; }
  .icon-btn { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}