/* ====================================================================
   FINANCE — stylesheet
   Layout: fixed sidebar (desktop) / bottom tabbar (mobile).
   Colors and spacing come from the variables in :root.
   ==================================================================== */

:root {
  --bg: #f7f5f0;
  --paper: #fffefa;
  --ink: #202a25;
  --muted: #7c847d;
  --line: #e9e7df;
  --green: #245d48;
  --green-2: #dcebe1;
  --lime: #d6f078;
  --orange: #f0a46b;
  --rose: #f7e4dc;
  --danger: #b84d3b;
  --shadow: 0 12px 32px #25372b0b;
}

* { box-sizing: border-box; }

/* Author `display` would beat the UA [hidden] rule — keep hidden hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

/* Boot failure banner: the app never dies silently again. */
.boot-error {
  margin: 0;
  padding: 14px 18px;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

/* --- shell / sidebar ------------------------------------------------ */

.shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: 240px;
  height: 100vh;
  height: 100dvh;
  padding: 27px 17px 22px;
  background: var(--green);
  color: #f6f7ed;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -1px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--lime);
  color: var(--green);
  font-size: 21px;
}

.brand small {
  display: block;
  margin-top: -3px;
  color: #c2d5c8;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
}

.nav-caption {
  margin-bottom: 10px;
  padding: 0 13px;
  color: #b8cdbf;
  font-size: 10px;
  letter-spacing: 1.6px;
}

.nav { display: grid; gap: 6px; }

.nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #d7e3d9;
  text-align: left;
}

.nav button .ni {
  width: 21px;
  font-size: 18px;
  text-align: center;
}

.nav button.active,
.nav button:hover { background: #ffffff1a; color: #fff; }

.side-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 15px;
  border: 1px solid #ffffff28;
  border-radius: 16px;
  color: #d7e3d9;
  font-size: 12px;
}

.side-bottom b {
  display: block;
  margin-bottom: 5px;
  color: var(--lime);
  font-size: 13px;
}

/* O Planejamento virou um ícone no box do usuário, à direita do nome.
   Com o nome em `flex: 1` ele já é empurrado para a ponta sozinho. */
.side-gear {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #ffffff14;
  color: #d7e3d9;
  font-size: 16px;
  cursor: pointer;
}

.side-gear:hover,
.side-gear.active { background: #ffffff2b; color: #fff; }

/* --- main / header -------------------------------------------------- */

.main {
  grid-column: 2;
  width: 100%;
  max-width: 1500px;
  min-width: 0;
  margin: 0 auto;
  padding: 29px clamp(18px, 3.4vw, 48px) 50px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.overline {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.top h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -1.2px;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Month / fortnight pickers: the native select must stay readable and
   must never collapse to an empty box, so width is fluid, not 0. */
.month-picker,
.btn {
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
}

.btn-primary {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  font-weight: 650;
}

.btn-primary:hover { background: #194b38; }
.btn-danger { color: var(--danger); }

/* --- sections ------------------------------------------------------- */

.section { display: none; }
.section.active { display: block; }

/* --- barra de ferramentas dos cards (Panorama) -------------------------- */
/* Antes aqui havia um título dizendo "Panorama de outubro de 2026" e um
   subtítulo com a mesma informação do topo. Os dois saíram: o que fica
   é o filtro, que é a única coisa que a barra faz de útil. */

.stats-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 13px;
}

/* --- filtro de cartões (Panorama) -------------------------------------- */
/* Fica no lugar da tag "R$ · BRL", que era só enfeite: agora o canto
   direito carrega o controle de "o que eu quero ver". */

.card-filter {
  position: relative;
  flex-shrink: 0;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #d9dfd7;
  border-radius: 30px;
  background: #edf3eb;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.filter-btn:hover { background: #e2ece0; }
.filter-btn .caret { font-size: 9px; opacity: .7; }

.filter-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 20;
  min-width: 232px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  box-shadow: 0 12px 28px rgba(31, 41, 35, .16);
}

.filter-menu-all {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.filter-menu-all:hover { background: var(--bg); }

.filter-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.filter-option:hover { background: var(--bg); }
.filter-option .tick { width: 14px; color: var(--green); font-weight: 700; }
.filter-option.off .tick { color: transparent; }
.filter-option .who { margin-left: auto; color: var(--muted); font-size: 11px; }

/* --- stats ---------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 22px;
}

.stat {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.stat-symbol {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #f0f0e9;
  color: var(--green);
  font-size: 16px;
}

.stat strong {
  display: block;
  margin: 13px 0 5px;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.9px;
  overflow-wrap: anywhere;
}

.stat small { color: var(--muted); font-size: 11px; }

.good { color: var(--green) !important; }
.bad { color: var(--danger) !important; }

/* --- panels / grid -------------------------------------------------- */

.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.9fr);
  gap: 17px;
  margin-bottom: 17px;
}

/* O total do ano ocupa a linha inteira: comparar uma pessoa com o total
   dela lado a lado invites a leitura errada. */
.grid-main .year-panel { grid-column: 1 / -1; }

.panel {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-head h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -0.2px; }

.sub { color: var(--muted); font-size: 12px; }

.plain-link {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.bottom-panel { margin-bottom: 18px; }

.note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* --- fortnight cards ------------------------------------------------- */

.fortnight-list { display: grid; gap: 12px; }

.fortnight {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
}

.fortnight::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--green);
}

.fortnight.second::before { background: var(--orange); }

/* A quinzena que está no escopo do topo — no painel de comparação as
   duas continuam visíveis, mas fica claro em qual você está olhando. */
.fortnight.scoped {
  border-color: var(--green);
  box-shadow: 0 0 0 2px #245d4826;
}

.fortnight.second.scoped {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px #f0a46b40;
}

.fort-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.fort-title { font-size: 14px; font-weight: 750; }

.fort-dates { margin-top: 2px; color: var(--muted); font-size: 11px; }

.fort-badge {
  padding: 5px 8px;
  border-radius: 20px;
  background: var(--green-2);
  color: var(--green);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.second .fort-badge { background: var(--rose); color: #99552f; }

.fort-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 13px;
}

.fort-total-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
}

.fort-total strong { font-size: 24px; letter-spacing: -0.8px; }
.fort-total span { color: var(--muted); font-size: 11px; }

.money-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.money-cell {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: #f7f6f0;
}

.money-cell span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.money-cell b { font-size: 12px; overflow-wrap: anywhere; }

.fort-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.meter {
  flex: 1;
  max-width: 120px;
  height: 5px;
  border-radius: 20px;
  background: #e9e8df;
  overflow: hidden;
}

.meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 20px;
  background: var(--green);
}

.second .meter span { background: var(--orange); }

/* --- lists of entries ------------------------------------------------ */

.bill-preview { display: grid; }

.bill-row,
.move-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
}

.bill-row:last-child,
.move-row:last-child { border-bottom: 0; }

.bill-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f0f0e9;
  color: var(--green);
  font-size: 16px;
}

.bill-desc { flex: 1; min-width: 0; }

.bill-desc b {
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bill-desc span { color: var(--muted); font-size: 11px; }

.bill-val {
  font-size: 12px;
  font-weight: 750;
  text-align: right;
  white-space: nowrap;
}

.status {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 20px;
  background: #f9ecd0;
  color: #8a6417;
  font-size: 10px;
  font-weight: 750;
}

.empty {
  padding: 24px 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.empty .empty-mark {
  display: block;
  margin-bottom: 7px;
  color: #a1aa9f;
  font-size: 25px;
}

/* --- tables / toolbars ------------------------------------------------ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.toolbar h2 { margin: 0; font-size: 21px; letter-spacing: -0.5px; }

.filter {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.7px;
  text-align: left;
}

td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

tr:last-child td { border-bottom: 0; }

.type-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 750;
}

.type-tag.income { background: #e3edff; color: #3c5f9d; }
.type-tag.expense { background: var(--rose); color: #99552f; }

.actions { display: flex; gap: 5px; }

.small-btn {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #536057;
}

/* --- settings / forms -------------------------------------------------- */

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

/* Campo sem rótulo (a Recorrência): a grade dá a mesma altura às duas
   células da linha, e a de uma linha só absorveria essa altura extra —
   a caixa ficaria mais alta e desalinhada da do lado. `end` mantém a
   altura natural e cola a caixa embaixo, na mesma linha de base. */
.field.no-label { align-content: end; }

/* Um campo que é dois botões em vez de um select. A grade 1fr 1fr dá
   metade da largura do campo para cada um — juntos eles fecham a mesma
   medida de um input, então a linha não desalinha. */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* A borda é do grupo, não de cada botão: dois retângulos colados
     mostrariam a costura do meio. */
  border: 1px solid #dcded4;
  border-radius: 10px;
  overflow: hidden;
  background: #fffefa;
}

.segmented button {
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* O escolhido pinta; o outro fica apagado. Assim dá para ler o estado
   sem precisar de texto explicando qual está ligado. */
.segmented button[aria-pressed="true"] {
  background: var(--green);
  color: #fff;
  font-weight: 700;
}

.segmented button[aria-pressed="false"] {
  color: #8b948d;
}

/* Rótulo do seletor herda a medida dos campos normais, para a linha não
   ficar com texto de tamanho diferente do resto do form. */
.seg-label {
  color: #5b675f;
  font-size: 12px;
  font-weight: 700;
}

.field label { color: #5b675f; font-size: 12px; font-weight: 700; }

.field input,
.field select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dcded4;
  border-radius: 10px;
  background: #fffefa;
  color: var(--ink);
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #245d4818;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.field.full { grid-column: 1 / -1; }

.hint {
  margin: 12px 0 14px;
  color: var(--muted);
  font-size: 11px;
}

/* Aviso dentro do modal quando o que está sendo editado é uma série */
.recurring-hint {
  margin: 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: #edf3eb;
  color: var(--green);
  font-size: 12px;
  line-height: 1.5;
}

/* Linhas que abrem os detalhes */
[data-detail] { cursor: pointer; }
[data-detail]:hover { background: #f7f6f0; }
[data-detail]:hover b { text-decoration: underline; }
tr[data-detail]:hover { background: #f7f6f0; }

/* ====================================================================
   Faturas, responsáveis e cartões
   ==================================================================== */

/* Uma linha por cartão, na MESMA grade das três contas do mês.
   `display: contents` é o que faz isso: o container some da fluxo de
   layout e os cartões viram itens da grade do `.stats`, dividindo a
   linha com as outras três em vez de ocuparem uma fileira própria.
   Sem ele, um cartão só esticaria pela largura toda (auto-fit) ou
   ficaria numa segunda linha estreita demais. */
.invoice-row { display: contents; }

/* Sem cartão nenhum não sobra vão entre as grades */
.invoice-row:empty { display: contents; }

.stat-card { border-top: 3px solid var(--green); }
.stat-card-legacy { border-top-color: var(--orange); }

/* Saldo por responsável, na FRENTE das três contas do mês: o container
   some do fluxo com `display: contents` e os cards viram itens da grade
   do `.stats`, dividindo a linha em vez de ocuparem fileira própria. */
.balance-row { display: contents; }

/* A faixa de cima é a cor do responsável, a mesma do avatar — o card
   fica com a cara dele em vez de uma cor genérica. */
.stat-user { border-top: 3px solid var(--line); }

/* Avatar e nome ficam juntos: o `space-between` do `.stat-top` os
   jogaria nas duas pontas do card. */
.stat-user .stat-top { justify-content: flex-start; gap: 9px; }

/* Quanto a pessoa vai gastar no mês, menor que o saldo: ela é a despesa
   dela, e fica entre os dois números sem disputar atenção com nenhum. */
.stat-user-spend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.list .empty { padding: 16px 4px; }

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
}

.list-item-main { flex: 1; min-width: 0; }

.list-item-main b {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

/* Campo de valor editável dentro de um item da lista (salário do
   responsável). Rótulo e caixa na mesma linha, sem quebrar o cartão. */
.card-invoice {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
}

.card-invoice input {
  width: 96px;
  padding: 7px 9px;
  border: 1px solid #dcded4;
  border-radius: 9px;
  background: #fffefa;
  color: var(--ink);
  outline: none;
}

.card-invoice input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #245d4818;
}

.inline-label {
  font-size: 11px;
  font-weight: 700;
  color: #5b675f;
  white-space: nowrap;
}

.tag-balance {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.tag-balance.good { color: var(--green); }
.tag-balance.bad { color: var(--danger); }

.inline-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.inline-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dcded4;
  border-radius: 10px;
  background: #fffefa;
  color: var(--ink);
  outline: none;
}

.inline-form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #245d4818;
}

.card-form {
  grid-template-columns: 1fr 1fr auto;
  align-items: flex-end;
  gap: 12px;
}
.card-form .field { margin-bottom: 0; }
@media (max-width: 700px) {
  .card-form { grid-template-columns: 1fr; }
}

/* O container de faturas acompanha as quebras das .stats sem ter
   grade própria — quem manda na largura é o `.stats`. */
@media (max-width: 700px) {
  .card-invoice input { width: 78px; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .list-item { flex-wrap: wrap; }
  .list-item-main { flex-basis: 100%; }
}

/* --- modal de detalhes --------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0 0 4px;
}

.detail-grid > div { min-width: 0; }

.detail-grid dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.detail-grid dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.detail-grid .good dd { color: var(--green); }
.detail-grid .bad dd { color: var(--danger); }

@media (max-width: 700px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* --- modal / toast ----------------------------------------------------- */

.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #14251db0;
}

.modal-bg.open { display: flex; }

.modal {
  width: min(520px, 100%);
  max-height: 92vh;
  padding: 24px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 30px 80px #0003;
  overflow: auto;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 19px;
}

.modal-head h2 { margin: 0; font-size: 19px; }

.close {
  width: 33px;
  height: 33px;
  border: 0;
  border-radius: 9px;
  background: #f0f0e9;
  font-size: 20px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: none;
  padding: 13px 17px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow);
}

.mobile-nav { display: none; }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1050px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { width: 210px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .shell { display: block; padding-bottom: 75px; }
  .sidebar { display: none; }
  .main { grid-column: auto; padding: 20px 14px 28px; }
  .top { align-items: flex-start; margin-bottom: 23px; }
  .top h1 { font-size: 25px; }
  .top-right { flex-wrap: wrap; gap: 6px; }
  .month-picker { max-width: 142px; padding: 9px 7px; font-size: 11px; }
  .top-right .btn { padding: 9px 10px; font-size: 12px; }
  .stats-tools { margin-bottom: 9px; }
  .stats { gap: 9px; }
  .stat { padding: 14px; border-radius: 14px; }
  .stat strong { font-size: 21px; }
  .stat-top { font-size: 11px; }
  .stat-symbol { width: 27px; height: 27px; }
  .panel { padding: 16px; border-radius: 16px; }
  .fortnight { padding: 14px; }
  .fort-total strong { font-size: 22px; }
  .money-lines { gap: 6px; }
  .money-cell { padding: 8px; }
  .money-cell b { font-size: 11px; }
  .settings-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field input, .field select { font-size: 16px; }
  .modal { padding: 19px; }
  .fort-footer { font-size: 10px; }
  .bill-row { gap: 8px; }
  .mobile-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .mobile-nav button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 55px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #78847a;
    font-size: 10px;
  }
  .mobile-nav button span:first-child { font-size: 18px; }
  .mobile-nav button.active { color: var(--green); font-weight: 800; }
}

@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .top-right .btn { display: none; }
  .money-cell b { font-size: 10px; }
  .fort-head { gap: 5px; }
}
/* --- poupança ---------------------------------------------------------- */
/* As caixinhas são divs em grade, não uma lista: cada uma é um banco com
   o seu valor, e a grade deixa o numero de bancos ditar as colunas. */
.savings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}

/* O total mora no canto do cabeçalho, no lugar do ícone: é a resposta
   para "quanto eu tenho?", e por isso fica do lado do título em vez de
   ocupar uma faixa própria acima da grade. */
.savings-head-total {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.savings-head-total span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.savings-head-total strong {
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: -0.8px;
  overflow-wrap: anywhere;
}

.savings-box {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfa;
}

/* Nome e ações nas duas pontas: o nome manda, os botões seguem ele. */
.savings-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.savings-box-head b {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.savings-box-actions {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
}

/* O valor é o numero grande do cartao: ele que a pessoa vem ler. */
.savings-box strong {
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.7px;
  overflow-wrap: anywhere;
}

/* Sem caixinha o aviso pertence à grade inteira, não a uma célula: sem
   isso ele nasceria estreito, colado na primeira coluna. */
.savings-grid .empty { grid-column: 1 / -1; }

.savings-note { margin: 0 0 22px; }

/* --- poupança ---------------------------------------------------------- */
/* A aba nao tem duas colunas para dividir: um painel só, e ele precisa
   da linha inteira para as caixinhas respirarem. */
#savings .grid-main {
  display: block;
  width: 100%;
}

/* --- login ------------------------------------------------------------- */
/* A tela de entrada cobre tudo: sem sessão, o app nem chega a montar.
   O cartão é estreito e centrado, com a mesma linguagem dos modais. */
.login-bg {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 20px;
  overflow: auto;
  background: var(--bg);
}

/* O overlay só existe quando o boot o abre: `open` é ligado/desligado
   por bootAuth, e sem ele a caixa de login encontra a app já montada. */
.login-bg.open { display: grid; }

.login-card {
  width: min(370px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fffefa;
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-weight: 800;
}

.login-card h2 {
  margin: 0 0 4px;
  font-size: 21px;
  letter-spacing: -0.9px;
}

.login-sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
}

.login-btn { width: 100%; margin-top: 4px; }

.login-error {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #b84d3b1a;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

/* --- rodape do usuario ------------------------------------------------- */

/* O botão de sair é vermelho de propósito: é a única ação destrutiva do
   rodapé, e ela precisa se distinguir da engrenagem do Planejamento. */
.side-logout {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #b84d3b;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.side-logout:hover { background: #9d3f2f; }

/* Nome de quem está logado, no rodapé. Ocupa o meio da linha e cede
   espaço para os botões quando o nome é longo. */
.side-name {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .side-logout, .side-gear { display: none; }
}