/* ============================================================
   Versão Básica — página única
   Módulo isolado: nenhum seletor aqui alcança a versão completa.
   Todo seletor é prefixado por #screen-simple, #modal-simple-tx
   ou .sv- (simple version). Usa só os design tokens de styles.css,
   então tema claro/escuro funciona sem nenhuma regra extra.
   ============================================================ */

/* ── Casca e rolagem ──────────────────────────────────────── */
/* .screen.active dá só `min-height:100vh`, então a tela cresceria com o conteúdo e
   a rolagem aconteceria no nível da PÁGINA. Isso quebraria a posição de leitura toda
   vez que um modal abrisse (`body.modal-open` trava o scroll do documento) e deixaria
   o header sticky competindo com o scroll do html. Limitar a altura aqui faz o
   #simple-scroll receber altura real e rolar sozinho — mesmo padrão de
   #screen-dashboard{overflow:hidden} + .content{flex:1;overflow-y:auto}. */
#screen-simple {
  height: 100vh;
  height: 100dvh;   /* dvh: desconta a barra de endereço no mobile */
  overflow: hidden;
}
#simple-scroll {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
#simple-scroll > * { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ── Topo ─────────────────────────────────────────────────── */
.sv-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 0 10px;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
}
.sv-brand { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.sv-brand .sv-brand-2 { color: var(--accent-text, var(--accent)); }
.sv-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease;
}
.sv-icon-btn:hover { background: var(--surface3); }
.sv-icon-btn svg { width: 20px; height: 20px; stroke-width: 1.9; }

/* ── Seletor de mês ───────────────────────────────────────── */
.sv-period {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 2px 0 14px;
}
.sv-period-label {
  min-width: 148px; text-align: center;
  font-size: 0.95rem; font-weight: 700; color: var(--text);
  text-transform: capitalize;
}
.sv-period button {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.sv-period button:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
.sv-period button:disabled { opacity: .28; cursor: default; }
.sv-period button svg { width: 19px; height: 19px; stroke-width: 2.1; }

/* ── Card principal (Sobrou / Entrou / Saiu) ──────────────── */
.sv-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 24px);
  padding: 24px 20px 18px;
  text-align: center;
  margin-bottom: 14px;
}
.sv-hero-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.sv-hero-value {
  font-size: 2.15rem; font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.12; color: var(--text); word-break: break-word;
}
.sv-hero-value.is-neg { color: var(--danger); }
.sv-hero-hint { font-size: 0.76rem; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.sv-hero-split {
  display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center;
  gap: 12px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sv-hero-divider { width: 1px; height: 32px; background: var(--border); }
.sv-hero-cell { text-align: center; min-width: 0; }
.sv-hero-cell-top {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 0.74rem; font-weight: 600; color: var(--muted); margin-bottom: 4px;
}
.sv-hero-cell-top svg { width: 13px; height: 13px; stroke-width: 2.4; }
.sv-hero-cell-val { font-size: 1.0rem; font-weight: 700; word-break: break-word; }
.sv-in  { color: var(--success); }
.sv-out { color: var(--danger); }

/* ── Seções ───────────────────────────────────────────────── */
.sv-section { margin-bottom: 14px; }
.sv-section-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  margin: 20px 2px 10px;
}
.sv-section-title button {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: normal; text-transform: none;
  font-size: 0.78rem; font-weight: 600; color: var(--accent-text, var(--accent));
  -webkit-tap-highlight-color: transparent;
}
.sv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 20px);
  padding: 16px;
}

/* ── Donut ────────────────────────────────────────────────── */
.sv-donut-wrap { display: flex; align-items: center; gap: 16px; }
.sv-donut { position: relative; flex-shrink: 0; width: 124px; height: 124px; }
/* Rotação -90deg fica por CÍRCULO (não no <svg>) — necessário pro popout radial da
   fatia selecionada (translate + rotate por elemento, mesma matemática do donut da
   home avançada). Ver toggleDonutSlice() em js/simple.js. */
.sv-donut svg { width: 100%; height: 100%; display: block; }
.sv-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; padding: 0 12px;
}
.sv-donut-center-lbl { font-size: 0.6rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sv-donut-center-val { font-size: 0.86rem; font-weight: 800; color: var(--text); line-height: 1.2; word-break: break-all; }
.sv-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sv-legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.sv-legend-pct { font-weight: 700; color: var(--text); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── Grade de categorias ──────────────────────────────────── */
.sv-hint {
  font-size: 0.8rem; color: var(--muted); text-align: center;
  margin: 0 0 12px; line-height: 1.5;
}
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}
.sv-cat {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 5px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md, 16px);
  cursor: pointer; text-align: center; min-width: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  font-family: inherit;
}
.sv-cat:hover { background: var(--surface2); border-color: var(--border-hover, var(--border)); }
.sv-cat:active { transform: scale(.955); }
.sv-cat-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--surface3); color: var(--text2);
  font-size: 1.05rem; /* fallback p/ categoria custom criada com emoji */
}
.sv-cat-ico svg { width: 20px; height: 20px; stroke-width: 1.85; }
.sv-cat--income .sv-cat-ico { background: rgba(16, 185, 129, .13); color: var(--success); }
.sv-cat-name {
  font-size: 0.68rem; font-weight: 600; color: var(--text2);
  line-height: 1.25; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-cat-val {
  font-size: 0.68rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-cat-val.is-zero { color: var(--muted2, var(--muted)); font-weight: 500; }

/* ── Extrato ──────────────────────────────────────────────── */
.sv-tx-list { display: flex; flex-direction: column; }
.sv-tx {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; text-align: left; width: 100%;
  background: none; border-left: none; border-right: none; border-top: none;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.sv-tx:last-child { border-bottom: none; }
.sv-tx:active { opacity: .6; }
.sv-tx-ico {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  background: var(--surface3); color: var(--text2); font-size: 0.95rem;
}
.sv-tx-ico svg { width: 18px; height: 18px; stroke-width: 1.85; }
.sv-tx-mid { flex: 1; min-width: 0; }
.sv-tx-desc {
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-tx-sub {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--muted); margin-top: 2px;
}
.sv-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 5px;
  background: var(--surface3); color: var(--muted);
  font-size: 0.65rem; font-weight: 600; white-space: nowrap;
}
.sv-tag svg { width: 10px; height: 10px; stroke-width: 2.2; }
.sv-tx-val {
  font-size: 0.88rem; font-weight: 700; flex-shrink: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sv-empty {
  text-align: center; padding: 26px 16px;
  font-size: 0.84rem; color: var(--muted); line-height: 1.55;
}
.sv-note {
  display: flex; gap: 7px; align-items: flex-start;
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface2); border-radius: 10px;
  font-size: 0.72rem; color: var(--muted); line-height: 1.5;
}
.sv-note svg { width: 13px; height: 13px; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }

/* ── Modal de lançamento ──────────────────────────────────── */
.sv-modal-head { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 18px; }
.sv-modal-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--surface3); color: var(--text2); font-size: 1.4rem;
}
.sv-modal-ico svg { width: 26px; height: 26px; stroke-width: 1.7; }
.sv-modal-ico.is-income { background: rgba(16, 185, 129, .13); color: var(--success); }
.sv-modal-title { font-size: 1.02rem; font-weight: 700; color: var(--text); text-align: center; }
.sv-modal-kind { font-size: 0.74rem; font-weight: 600; color: var(--muted); }

.sv-amount-wrap { margin-bottom: 16px; }
#sv-amount {
  width: 100%; box-sizing: border-box;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 16px 14px;
  font-family: inherit; font-size: 1.7rem; font-weight: 800;
  color: var(--text); text-align: center; letter-spacing: -0.02em;
  transition: border-color .18s ease;
}
#sv-amount:focus { outline: none; border-color: var(--accent); }
#sv-amount::placeholder { color: var(--muted2, var(--muted)); font-weight: 700; }

.sv-field-label {
  font-size: 0.76rem; font-weight: 600; color: var(--muted);
  margin-bottom: 8px; display: block;
}
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.sv-chip {
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); font-family: inherit; font-size: 0.79rem; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: all .16s ease;
}
.sv-chip:hover { background: var(--surface3); }
.sv-chip.is-on {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent, #fff);
}
#sv-desc {
  width: 100%; box-sizing: border-box;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  font-family: inherit; font-size: 0.9rem; color: var(--text);
  transition: border-color .18s ease;
}
#sv-desc:focus { outline: none; border-color: var(--accent); }
#sv-desc::placeholder { color: var(--muted2, var(--muted)); }

.sv-date-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 0 18px;
}
.sv-date-row button {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  padding: 0; -webkit-tap-highlight-color: transparent;
}
.sv-date-row button:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
.sv-date-row button:disabled { opacity: .28; cursor: default; }
.sv-date-row button svg { width: 17px; height: 17px; stroke-width: 2.1; }
.sv-date-label {
  min-width: 132px; text-align: center;
  font-size: 0.85rem; font-weight: 600; color: var(--text);
}

.sv-btn-save {
  width: 100%; padding: 15px; border: none; border-radius: 14px;
  background: var(--accent); color: var(--on-accent, #fff);
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .18s ease;
}
.sv-btn-save:disabled { opacity: .45; cursor: default; }
.sv-btn-cancel {
  width: 100%; padding: 13px; margin-top: 8px; border: none; background: none;
  color: var(--muted); font-family: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sv-error {
  color: var(--danger); font-size: 0.78rem; text-align: center;
  margin: -8px 0 12px;
}

/* ── Menu ─────────────────────────────────────────────────── */
.sv-menu-title {
  font-size: 0.74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px 2px;
}
.sv-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  box-sizing: border-box; padding: 14px 16px; margin-bottom: 8px;
  border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(var(--fg-rgb), .02);
  border: 1px solid rgba(var(--fg-rgb), .05);
  color: var(--text); font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease;
}
.sv-menu-item:hover { background: rgba(var(--fg-rgb), .06); }
.sv-menu-item svg { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; color: var(--muted); }
.sv-menu-item.is-primary { background: rgba(var(--fg-rgb), .04); border-color: var(--border); }
.sv-menu-item.is-primary svg { color: var(--accent-text, var(--accent)); }
.sv-menu-texts { flex: 1; min-width: 0; }
.sv-menu-label { font-size: 0.88rem; font-weight: 600; }
.sv-menu-desc { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
.sv-menu-arrow { color: var(--muted); font-size: 0.9rem; flex-shrink: 0; }
.sv-menu-pill {
  display: flex; gap: 4px; padding: 3px; border-radius: 999px;
  background: var(--surface3); flex-shrink: 0;
}
.sv-menu-pill button {
  padding: 6px 13px; border-radius: 999px; border: none;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sv-menu-pill button.is-on { background: var(--surface); color: var(--text); }

/* ── Telas maiores ────────────────────────────────────────── */
@media (min-width: 560px) {
  .sv-hero-value { font-size: 2.5rem; }
  .sv-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}