:root {
  --navy: #1f3a5f;
  --accent: #7a1f2f;
  --green: #2f6f4f;
  --grey: #5b6b7a;
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --border: #dfe3e8;
  --text: #222222;
  --radius: 10px;
}

* { box-sizing: border-box; }

html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}

.screen { display: none; min-height: 100vh; max-width: 100%; min-width: 0; }
.screen.active { display: block; }

/* --------- Login --------- */
#login-screen {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
#login-screen.active { display: flex; }

/* --------- Troca de senha obrigatória (reaproveita o layout do login) --------- */
#change-password-screen {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
#change-password-screen.active { display: flex; }

/* --------- Tela de usuários --------- */
.user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.user-row:last-child { border-bottom: none; }
.user-row .meta { color: var(--grey); font-size: 12px; }
.role-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7eef6;
  color: var(--navy);
  font-weight: 600;
}
.pending-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff4e0;
  color: #8a5a00;
  margin-left: 6px;
}
.temp-password-box {
  margin-top: 16px;
  background: #e7f1ec;
  border: 1px solid #bfdccf;
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
}
.temp-password-box .pw {
  font-family: Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
  display: block;
  margin: 8px 0;
  user-select: all;
}

.login-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 32px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.login-brand {
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
}
.login-brand img,
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}
.login-card > .subtitle {
  text-align: center;
}
.login-card h1 {
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 4px;
  text-align: center;
}
.platform-login-brand {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}
.platform-login-brand img {
  height: 36px;
  width: auto;
}
.platform-admin-brand .brand-logo-sm {
  height: 22px;
  width: auto;
  display: block;
}
.login-card p.subtitle {
  color: var(--grey);
  font-size: 14px;
  margin: 0 0 20px;
}
/* Selo de versão — visível já na tela de login, sem precisar logar. Depois de um
   deploy novo, é a forma mais rápida de confirmar se o código novo realmente subiu
   (em vez de vasculhar telas atrás de um botão específico). */
.build-tag {
  text-align: center;
  color: var(--grey);
  font-size: 11px;
  margin: 20px 0 0;
}
.login-text-btn {
  display: block;
  width: auto;
  margin: 12px auto 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.login-text-btn:hover { text-decoration: underline; }
.login-help {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.login-help .login-text-btn { margin: 0; }
.login-help-or {
  color: var(--grey);
  font-size: 12px;
}
.signup-disclaimer {
  background: #fff4e0;
  border: 1px solid #ead7b0;
  color: #8a5a00;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 16px;
}

.signup-card {
  max-width: 720px;
  margin: 24px auto;
}
.signup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.signup-grid .span-2 { grid-column: 1 / -1; }
.signup-section {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 16px 0 4px;
}
.signup-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 8px;
  font-size: 13px;
  color: var(--grey);
}
.signup-terms input { width: auto; margin-top: 3px; }
.invite-ok { color: var(--green); font-size: 13px; margin: 0 0 12px; }
.signup-q {
  background: #f6f8fb;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 8px;
}
.signup-q-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.signup-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 14px;
  color: var(--text);
}
.signup-choice input { width: auto; margin: 0; }
.signup-whatsapp-addon-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 2px;
}
.signup-whatsapp-addon-head .signup-q-title { margin-bottom: 0; flex: 1; }
.signup-whatsapp-logo {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  display: block;
}
.signup-card-fields {
  background: #f6f8fb;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 8px;
}
.signup-card-grid { margin-top: 4px; }
.signup-tier-hint {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--navy);
}
.signup-price-box {
  background: #eef4fb;
  border: 1px solid #c8d9ed;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 8px;
}
.signup-price-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: space-between;
  align-items: flex-start;
}
.signup-price-plan {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.signup-price-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--grey);
  line-height: 1.4;
  max-width: 36em;
}
.signup-cycle-toggle {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.signup-cycle-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.signup-cycle-opt:has(input:checked) {
  background: var(--navy);
  color: #fff;
}
.signup-cycle-opt input { width: auto; margin: 0; }
.signup-price-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.signup-price-amount {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.signup-price-amount.is-selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}
.signup-price-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey);
  margin-bottom: 4px;
}
.signup-price-amount strong {
  font-size: 18px;
  color: var(--navy);
}
.signup-price-charge {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--navy);
}
.signup-price-extras {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--grey);
}
.signup-extra-count {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.signup-extra-count label { margin-top: 0; }
.signup-extra-count input[type="number"] { max-width: 8rem; }
.signup-progress {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}
.signup-progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: var(--grey);
  font-size: 12px;
  position: relative;
}
.signup-progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.signup-progress-step.is-done:not(:last-child)::after,
.signup-progress-step.is-active:not(:last-child)::after {
  background: #9bb4d0;
}
.signup-progress-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  background: #eef2f7;
  color: var(--grey);
  border: 2px solid var(--border);
  z-index: 1;
  position: relative;
}
.signup-progress-step.is-active .signup-progress-num {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.signup-progress-step.is-done .signup-progress-num {
  background: #d7e4f3;
  color: var(--navy);
  border-color: #9bb4d0;
}
.signup-progress-label { font-weight: 600; line-height: 1.2; }
.signup-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.signup-nav .btn-primary,
.signup-nav .btn-secondary {
  flex: 1 1 140px;
  min-width: 0;
}
.signup-pay-intro {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.signup-pay-choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.signup-pay-opt {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.signup-pay-opt:has(input:checked) {
  background: #eef4fb;
  border-color: #c8d9ed;
}
@media (max-width: 700px) {
  .signup-progress-label { font-size: 11px; }
  .signup-progress-step:not(:last-child)::after {
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
  }
}
.trial-banner {
  display: none;
  background: #e7eef6;
  color: var(--navy);
  border-bottom: 1px solid #c8d9ed;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.trial-banner .trial-banner-cta {
  margin-left: 10px;
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  vertical-align: middle;
}
.trial-banner.billing-locked {
  background: #f8e8e8;
  border-bottom-color: #e2b6b6;
  color: #7a2e2e;
}
.trial-banner.billing-locked .trial-banner-cta {
  border-color: #7a2e2e;
  color: #7a2e2e;
}
body.billing-soft-locked #main-app-header button.nav-billing-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
body.billing-soft-locked #entity-switcher:disabled,
body.billing-soft-locked #tenant-switcher:disabled,
body.billing-soft-locked #month-switcher:disabled,
body.billing-soft-locked #year-switcher:disabled,
body.billing-soft-locked #pending-actions-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.billing-status-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg, #f4f7fb);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.45;
}
.billing-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.billing-badge-trial { background: #e8f0fa; color: var(--navy); }
.billing-badge-active { background: #e6f4ea; color: #1e6b3a; }
.billing-badge-warn { background: #f8ebe0; color: #8a4b12; }
.billing-badge-danger { background: #f8e8e8; color: #7a2e2e; }
.billing-status-title { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.billing-status-meta { color: var(--grey); font-size: 13px; margin-top: 4px; }
.billing-status-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
  font-size: 13px;
}
.billing-status-prices strong { color: var(--navy); }
.billing-risk-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8e8e8;
  color: #7a2e2e;
  font-size: 13px;
}
.billing-catalog-list {
  display: grid;
  gap: 10px;
}
.billing-plan-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.billing-plan-option:hover { border-color: var(--navy); }
.billing-plan-option.selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}
.billing-plan-option input { margin-top: 3px; width: auto; }
.billing-plan-option .plan-label { font-weight: 700; color: var(--navy); }
.billing-plan-option .plan-desc { font-size: 13px; color: var(--grey); margin-top: 2px; }
.billing-plan-option .plan-price { font-size: 13px; font-weight: 600; margin-top: 6px; }
.billing-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 10px;
}
.billing-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#billing-method-choices {
  grid-template-columns: 1fr;
}
.billing-choice-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.billing-choice-option input { position: absolute; opacity: 0; pointer-events: none; }
.billing-choice-option:hover { border-color: var(--navy); }
.billing-choice-option.selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}
.billing-choice-option .choice-title { font-weight: 700; color: var(--navy); }
.billing-choice-option .choice-price,
.billing-choice-option .choice-desc { font-size: 13px; color: var(--grey); }
.billing-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.billing-pix-box {
  margin-top: 12px;
  text-align: center;
}
.billing-pix-box img {
  max-width: 220px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.billing-pix-payload,
.billing-boleto-line {
  margin-top: 10px;
  font-size: 12px;
  word-break: break-all;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px;
}
@media (max-width: 700px) {
  .billing-options-row,
  .billing-choice-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .signup-grid { grid-template-columns: 1fr; }
  .signup-grid .span-2 { grid-column: auto; }
}

label { display: block; font-size: 13px; color: var(--grey); margin: 14px 0 6px; }
input, select, textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px; /* >=16px evita zoom automático no iOS */
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}
/* Caret nativo do <select> costuma ficar miúdo; seta SVG um pouco maior
   (desktop + mobile) sem mudar o restante do campo. */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  padding-right: 34px;
}
select::-ms-expand { display: none; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
}

button {
  font-size: 16px;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
}
/* border transparente do mesmo peso do btn-secondary — sem isso os dois botões
   calculam altura ligeiramente diferente (um com borda, outro sem) mesmo com
   box-sizing:border-box, e ficam visivelmente desalinhados lado a lado. */
.btn-primary { background: var(--navy); color: #fff; width: 100%; margin-top: 20px; border: 1px solid var(--navy); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.btn-link { background: none; color: var(--navy); text-decoration: underline; padding: 8px 0; }

.error-msg {
  background: #fdeceb;
  color: var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-top: 14px;
  display: none;
}
.error-msg.visible { display: block; }

/* --------- App shell --------- */
header.app-header {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: 100%;
  box-sizing: border-box;
}
header.app-header .app-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
header.app-header .app-header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
header.app-header .title { font-size: 16px; font-weight: 600; }
/* Marca (ícone) no header escuro — sem wordmark; sem invert (marca já tem contraste). */
header.app-header .app-header-logo {
  height: 36px;
  width: 36px;
  display: block;
  flex-shrink: 0;
  border-radius: 8px;
}
header.app-header select#entity-switcher,
header.app-header select#tenant-switcher {
  background-color: rgba(255,255,255,0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 13px 13px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 14px;
  padding: 6px 28px 6px 8px;
}
/* Na tela principal o dropdown de entidade fica no lugar do título estático — antes
   "Família" aparecia duas vezes (título fixo + dropdown). Fonte maior/negrito pra
   continuar parecendo um título, mas ainda é o seletor funcional.
   width:auto sobrescreve a regra global "select { width:100% }" (lá em cima, pensada
   pra campos de formulário em telas/cards) — sem isso, dentro de um flex container
   width:100% vira o flex-basis e o dropdown estica pra ocupar quase o header inteiro,
   em vez de ficar do tamanho do texto como antes. max-width é só uma trava de
   segurança pra nome de entidade muito comprido não estourar o header. */
header.app-header select#entity-switcher.entity-switcher-title,
header.app-header select#tenant-switcher.entity-switcher-title {
  width: auto;
  max-width: 55%;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 28px 6px 10px;
}
/* A lista aberta do <select> é renderizada pelo navegador (não pelo nosso CSS de
   fundo escuro do header) — sem isso, texto branco em fundo branco fica ilegível. */
header.app-header select#entity-switcher option,
header.app-header select#tenant-switcher option {
  background: #ffffff;
  color: var(--text);
}
/* Nome da entidade sempre em maiúsculas na exibição (ex.: "Família" -> "FAMÍLIA"),
   igual ao padrão de "ASLTI" — só visual, o dado no banco continua com acentuação e
   capitalização normais (ver entities.name em schema_findash.sql). */
#entity-switcher,
#accounts-entity-label,
#users-entity-label,
#categories-entity-label {
  text-transform: uppercase;
}

/* Seletores de mês/ano da lista "Lançamentos recentes" — mesma linha do dropdown de
   entidade, mas mais discretos (fonte menor, sem negrito) por serem secundários. */
header.app-header select.period-switcher {
  width: auto;
  background-color: rgba(255,255,255,0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 13px;
  padding: 6px 24px 6px 8px;
}
header.app-header select.period-switcher option {
  background: #ffffff;
  color: var(--text);
}
header.app-header button.logout-btn {
  background: none;
  color: #fff;
  font-size: 13px;
  opacity: 0.85;
  padding: 6px 4px;
}
/* ▾ dos menus Contas / Administração — um pouco maior que o rótulo. */
header.app-header .menu-caret {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin-left: 3px;
  vertical-align: -1px;
  opacity: 0.95;
}
/* Destaca a aba atual (Dashboard/Lançamentos/Contas/Categorias/Usuários) no menu fixo —
   sem isso, com o menu sempre visível, não dava pra saber em qual tela você estava só
   olhando o header. */
header.app-header button.logout-btn.active-nav {
  background: rgba(255,255,255,0.18);
  border-radius: 6px;
  opacity: 1;
  font-weight: 600;
}

main {
  padding: 16px;
  max-width: 720px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding-bottom: 90px;
  box-sizing: border-box;
}

/* Dashboard v0.2: grade de 12 colunas. Cada card pode ser arrastado para mudar a
   ordem e redimensionado horizontalmente pelo canto inferior direito. O layout é salvo
   por usuário+entidade no backend. Em telas pequenas tudo volta para uma coluna. */
#app-screen main.dashboard-grid {
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;
  grid-auto-rows: 8px;
  align-items: start;
}
.dashboard-widget {
  position: relative;
  grid-column: span 12;
  min-width: 0;
  margin-bottom: 0;
  transition: box-shadow .15s ease, opacity .15s ease;
}
.dashboard-widget.dragging { opacity: .55; }
.dashboard-widget.drag-over { box-shadow: 0 0 0 2px rgba(32,66,105,.28), 0 4px 16px rgba(0,0,0,.08); }
.dashboard-widget-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.dashboard-widget-header h2 { margin:0; }
.dashboard-drag-handle {
  color: var(--grey);
  cursor: grab;
  user-select: none;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -3px;
  padding: 2px 5px;
}
.dashboard-drag-handle:active { cursor: grabbing; }
.dashboard-resize-handle {
  position:absolute;
  right:5px;
  bottom:5px;
  width:14px;
  height:14px;
  padding:0;
  margin:0;
  border:0;
  background: transparent;
  cursor: ew-resize;
}
.dashboard-resize-handle::after {
  content:"";
  position:absolute;
  right:1px;
  bottom:1px;
  width:7px;
  height:7px;
  border-right:2px solid var(--border);
  border-bottom:2px solid var(--border);
}
@media (min-width: 760px) {
  .dashboard-widget { grid-column: span var(--dashboard-span, 6); }
}
@media (max-width: 759px) {
  #app-screen main.dashboard-grid { display:block; max-width:720px; }
  .dashboard-widget { margin-bottom:16px; }
  .dashboard-drag-handle, .dashboard-resize-handle, .dashboard-size-btn { display:none; }
}

/* Título leve no topo de Contas/Categorias/Usuários — substitui o antigo header
   próprio de cada tela (com "Voltar") agora que o menu principal fica fixo. */
.screen-subtitle { font-size: 16px; font-weight: 600; color: var(--navy); margin: 4px 0 16px; }

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.card h2 { font-size: 15px; margin: 0 0 12px; color: var(--navy); }

.balance-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.balance-row:last-child { border-bottom: none; }
.balance-owner-group + .balance-owner-group { margin-top: 10px; }
.balance-owner-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  padding: 4px 0 2px;
  letter-spacing: 0.01em;
}
.balance-owner-group .balance-row:last-child,
.balance-owner-group .user-row:last-child { border-bottom: none; }
.balance-row .amount.positive { color: var(--green); font-weight: 600; }
.balance-row .amount-with-ofx {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Cartões de crédito v0.3.1 — layout compacto em grade. O nome do cartão e os
   títulos das métricas compartilham a primeira linha; vencimento/fechamento ocupam a
   primeira coluna da linha de totais. Quando há mais de um titular, o expansor insere
   os subtotais por portador entre essas duas linhas, sem criar espaços vazios. */
.card-balance-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.card-balance-row:last-child { border-bottom: none; }
.card-balance-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1.55fr) repeat(3, minmax(92px, 1fr));
  column-gap: 14px;
  row-gap: 5px;
  align-items: baseline;
}
.cb-card-title-cell { display:flex; align-items:center; min-width:0; gap:4px; }
.cb-card-toggle,
.cb-card-toggle-placeholder {
  width: 22px;
  min-width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cb-card-toggle {
  padding:0;
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
  font-size:15px;
  line-height:1;
}
.cb-card-name-link {
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cb-card-name-link:hover { text-decoration: underline; }
.cb-column-label {
  color: var(--grey);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align:right;
  white-space:nowrap;
}
.cb-holder-name {
  padding-left: 26px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.cb-holder-value {
  text-align:right;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
}
.cb-holder-limit { min-height:1px; }
.cb-card-meta {
  padding-left:26px;
  color:inherit;
  font-size:12px;
  line-height:1.35;
}
.cb-total-value {
  text-align:right;
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
}
.cb-total-value.negative { color:var(--accent); }
.cb-total-value.positive { color:var(--green); }
.cb-muted { color: var(--grey); font-weight:400; font-size:11px; }
@media (max-width: 720px) {
  .card-balance-grid {
    grid-template-columns:minmax(150px, 1.35fr) repeat(3, minmax(76px, 1fr));
    column-gap:8px;
  }
  .cb-column-label { font-size:9px; }
  .cb-holder-name, .cb-card-meta { padding-left:22px; }
}
@media (max-width: 520px) {
  .card-balance-grid {
    grid-template-columns:minmax(125px, 1.2fr) repeat(3, minmax(68px, 1fr));
    column-gap:6px;
    font-size:12px;
  }
  .cb-column-label { white-space:normal; line-height:1.05; }
  .cb-total-value, .cb-holder-value { font-size:11px; }
  .cb-card-meta { font-size:10px; }
}
.balance-row .amount.negative { color: var(--accent); font-weight: 600; }
.balance-row.clickable, .user-row.clickable, .tx-row.clickable { cursor: pointer; }
.balance-row.clickable:active, .user-row.clickable:active, .tx-row.clickable:active { background: var(--bg); }

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--navy);
  font-size: 13px;
  color: var(--grey);
}
.total-row .amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
/* v0.8.0: totalizador com mais de uma linha (ex.: fatura atual + próx. fatura +
   limite, no widget de cartões) — cada .total-row interna vira só uma linha fina,
   sem repetir a borda grossa de baixo 3x; só a última mantém a borda (fecha o
   grupo). */
.total-row-group { display: block; border-bottom: none; padding-bottom: 0; }
.total-row-group .total-row {
  border-bottom: 1px solid var(--border, #e5e5e5);
  padding: 2px 0;
  margin-bottom: 0;
  font-size: 12px;
}
.total-row-group .total-row .amount { font-size: 14px; }
.total-row-group .total-row:last-child { border-bottom: 2px solid var(--navy); padding-bottom: 6px; margin-bottom: 4px; }

/* v0.8.0: texto de ajuda curto embaixo de um campo (ex.: explicação da recarga
   automática do cartão pré-pago) — mesmo tom visual de .empty-msg, mais discreto. */
.hint-text { font-size: 12px; color: var(--grey); margin: 4px 0 0; }

.detail-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}
.detail-summary-row .label { color: var(--grey); }
.detail-summary-row .value { font-weight: 600; }

.tx-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.tx-row:last-child { border-bottom: none; }
.tx-row-opening {
  background: #f4f7fb;
  border-radius: 6px;
  margin-top: 4px;
  padding-left: 8px;
  padding-right: 8px;
}
.tx-row-opening .desc { font-weight: 600; color: var(--navy); }
.tx-row .desc {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tx-row .meta { color: var(--grey); font-size: 12px; overflow-wrap: anywhere; }
.tx-row .amount { font-weight: 600; white-space: nowrap; margin-left: 0; flex-shrink: 0; }
.tx-row .amount.expense { color: var(--accent); }

/* "Fatura {cartão}" — linha-resumo que substitui as N linhas de um cartão em
   "Lançamentos recentes" (ver buildDashboardTxItems em app.js). Só agrupa cartão;
   lançamento de conta continua solto, linha a linha, como sempre foi. */
/* Seta ▸/▾ do grupo "Fatura …" (e do subgrupo por titular / import). Maior que o
   texto auxiliar pra ser fácil de achar no mobile sem dominar a linha. */
.fatura-caret {
  color: var(--grey);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  margin-right: 8px;
  width: 20px;
  height: 20px;
  padding: 5px;
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tx-fatura-toggle [data-pay-fatura-card-id] { margin-left: 10px; flex-shrink: 0; }
.tx-fatura-items {
  background: var(--bg);
  padding: 0 0 0 18px;
  border-bottom: 1px solid var(--border);
}
.tx-fatura-items .tx-row { padding: 8px 0; }
.tx-fatura-items .tx-row:last-child { border-bottom: none; }

/* Sub-grupo por titular/adicional dentro de "Fatura X" (ver faturaGroupHtml) — mesma
   ideia visual do grupo externo, só um pouco mais discreta (fonte menor no nome) pra
   deixar claro que é um nível abaixo. */
.tx-fatura-subtoggle .desc { font-size: 13px; font-weight: 600; }
.tx-fatura-subgroup:last-child .tx-fatura-items { border-bottom: none; }
.tx-row .amount.income { color: var(--green); }

/* Botões "Editar"/"Duplicar" em cada lançamento */
.tx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 0;
  flex-shrink: 0;
  max-width: 100%;
  justify-content: flex-end;
}
.btn-icon {
  background: none;
  border: 1px solid var(--border);
  color: var(--grey);
  font-size: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:active { background: var(--bg); }
/* Ícones de ação (editar/apagar/etc.) — antes misturava o glyph de texto "✎" com SVG
   de verdade (WhatsApp, cadeado) no mesmo grupo de botões, ficando com peso/traço
   visualmente diferentes lado a lado (pedido do usuário: "esses icones da gestao de
   usuario da interface client tambem nao estao muito bonitos"). Padronizado: todo
   .btn-icon/.cat-chip-icon agora usa SVG (mesmo estilo/peso), com tamanho e
   alinhamento centralizados aqui uma única vez em vez de regra por tela. */
.btn-icon svg, .cat-chip-icon svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
}

/* Botão pequeno "Desativar"/"Reativar" conta — mesma família visual do .btn-secondary,
   só que compacto o bastante pra caber ao lado do saldo e do ✎ na linha da conta. */
.btn-small { padding: 6px 10px; font-size: 12px; width: auto; margin-top: 0; }
.btn-pay-tx { margin-left: 8px; flex-shrink: 0; white-space: nowrap; }
.tx-actions .btn-pay-tx { margin-left: 0; }

.status-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.status-pill.PAID { background: #e7f1ec; color: var(--green); }
.status-pill.PLANNED { background: #fff4e0; color: #8a5a00; }

.empty-msg { color: var(--grey); font-size: 14px; text-align: center; padding: 20px 0; }

/* Botão flutuante de novo lançamento */
.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 28px;
  line-height: 56px;
  text-align: center;
  padding: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

/* --------- Modal de novo lançamento --------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  /* v0.8.0: precisa ficar ACIMA do .app-version-footer (z-index:20, mais abaixo neste
     arquivo). Antes os dois empatavam em 20 e o rodapé (que vem depois no HTML) vencia
     o empate, cobrindo o fim de todo modal — cortava os botões "Cancelar"/"Salvar" dos
     modais em formato de folha inferior. */
  z-index: 30;
  align-items: flex-end;
  /* Sem isso, modais estreitos (.modal-sheet-small) ficavam encostados à esquerda em
     vez de centralizados — só não aparecia em modais width:100% porque aí não sobra
     espaço horizontal pra notar. */
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-sheet {
  background: #fff;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 16px;
}
.modal-sheet h2 { margin-top: 0; margin-bottom: 10px; font-size: 16px; color: var(--navy); }
/* Modal mais compacto: rótulos e campos com menos respiro vertical que o resto do
   app (onde o espaçamento maior ajuda a ler telas com poucos campos). */
.modal-sheet label { margin: 10px 0 4px; font-size: 12px; }
.modal-sheet input, .modal-sheet select, .modal-sheet textarea { padding: 10px; }
.form-row-2 { display: flex; gap: 10px; }
.form-row-2 > div { flex: 1; }
.form-row-whatsapp-phone {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.form-row-whatsapp-phone .wa-phone-country { flex: 1.6; min-width: 0; }
.form-row-whatsapp-phone .wa-phone-area { flex: 0 0 72px; }
.form-row-whatsapp-phone .wa-phone-local { flex: 1.2; min-width: 0; }
.form-row-whatsapp-phone label { display: block; }
.signup-mobile-block .signup-field-label {
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--grey);
}
.signup-mobile-block .form-row-whatsapp-phone label span { display: block; margin-bottom: 5px; }
.signup-wa-optin { margin-top: 10px; }
@media (max-width: 560px) {
  .form-row-whatsapp-phone { flex-wrap: wrap; }
  .form-row-whatsapp-phone .wa-phone-country { flex: 1 1 100%; }
  .form-row-whatsapp-phone .wa-phone-area { flex: 0 0 80px; }
  .form-row-whatsapp-phone .wa-phone-local { flex: 1 1 auto; }
}
.type-toggle { display: flex; gap: 8px; margin-top: 4px; }
.type-toggle button {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--grey);
  padding: 10px 16px;
}
.type-toggle button.active[data-type="EXPENSE"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.type-toggle button.active[data-type="INCOME"] { background: var(--green); color: #fff; border-color: var(--green); }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
/* Especificidade (.modal-actions button) > (.btn-primary) — isso é o que garante que
   o margin-top:20px do .btn-primary (pensado pra botão solto abaixo de formulário)
   NÃO se aplique aqui dentro. Antes disso o Salvar (com a margem) inflava a altura
   da linha flex (align-items:stretch por padrão), e o Cancelar esticava pra
   acompanhar — ficando visivelmente mais alto que o Salvar. */
.modal-actions button { flex: 1; margin-top: 0; }

/* Checkbox "Despesa fixa" / "Receita recorrente" */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; }
.field-hint { margin: 4px 0 0; font-size: 12px; color: var(--grey); }
.recurring-badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e7eef6;
  color: var(--navy);
  margin-left: 4px;
}
.default-pill {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e7f1ec;
  color: var(--green);
  margin-left: 4px;
  font-weight: 600;
}
.tx-alert-chip {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff4e0;
  color: #8a5a00;
  margin-left: 4px;
  font-weight: 600;
}
.tx-alert-chip-due {
  background: #fde8e8;
  color: #9b1c1c;
}

.inline-subform {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0 4px;
}
.inline-subform label:first-child { margin-top: 0; }
.inline-subform .modal-actions { margin-top: 14px; }

/* Tela "Contas e cartões": botões que abrem os modais de cadastro, no lugar dos
   formulários que ficavam sempre visíveis. */
.add-buttons-row { display: flex; gap: 10px; }
.add-buttons-row button { flex: 1; }

/* Tela "Categorias" */
.cat-group { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cat-group:last-child { border-bottom: none; }
.cat-group-header { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.cat-chip.empty { color: var(--grey); font-style: italic; }
.cat-chip-icon {
  background: none;
  border: none;
  color: var(--grey);
  font-size: 11px;
  padding: 2px;
  line-height: 1;
}
.cat-chip-icon:active { color: var(--navy); }

/* Toggle "Já paguei" / "Ainda vou pagar" da tela de revisão de import de fatura —
   MESMO visual do .type-toggle, mas classe própria (não pode ser .type-toggle: o
   listener global de Despesa/Receita do modal de lançamento faz
   document.querySelectorAll(".type-toggle button") e pegaria estes botões também). */
.if-status-toggle { display: flex; gap: 8px; margin-top: 4px; }
.if-status-toggle button {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--grey);
  padding: 10px 12px;
  font-size: 13px;
}
.if-status-toggle button.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Tela de revisão "Importar fatura" — lista de lançamentos com checkbox antes de
   confirmar a gravação (nada é salvo antes do usuário clicar "Confirmar importação"). */
.if-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.if-row:last-child { border-bottom: none; }
.if-row input[type="checkbox"] { width: auto; margin: 2px 0 0; }
.if-row.if-row-dup { background: var(--bg); color: var(--grey); }
.if-row .if-row-main { flex: 1; }
.if-row .if-row-desc { display: block; }
.if-row .if-row-meta { color: var(--grey); font-size: 11px; }
.if-row .if-row-amount { font-weight: 600; white-space: nowrap; }

/* Agrupamento por comerciante na tela de revisão (ver renderImportFaturaRows) — uma
   compra parcelada em N meses vira UM cartão com um seletor de categoria só, em vez de
   pedir a categoria em cada parcela separadamente. */
.if-merchant-group { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.if-merchant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.if-merchant-name { font-weight: 600; font-size: 13px; }
.if-merchant-category { max-width: 55%; font-size: 12px; }
.if-merchant-group .if-row { border-bottom: 1px solid var(--border); }
.if-merchant-group .if-row:last-child { border-bottom: none; }

/* Separação por titular/adicional na tela de revisão do import (ver
   renderImportFaturaRows) — só aparece quando a fatura tem 2+ nomes distintos (hoje só
   Banco do Brasil). Reaproveita .fatura-caret (mesma classe da tela Lançamentos) pra
   manter a mesma seta ▸/▾ nos dois lugares. */
.if-holder-group { margin-bottom: 14px; }
.if-holder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  cursor: pointer;
  border-bottom: 2px solid var(--border);
  margin-bottom: 10px;
}
.if-holder-name { font-weight: 700; font-size: 14px; }
.if-holder-count { color: var(--grey); font-size: 12px; margin-left: auto; }
.if-holder-items { padding-left: 4px; }

/* Barra da lista da importação: contador + selecionar tudo. */
.if-list-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
}
.if-select-all-label {
  display:flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.if-select-all-label input[type="checkbox"] { width:auto; margin:0; }
.if-merchant-category-wrap { display:flex; align-items:center; gap:6px; flex:1; justify-content:flex-end; }
.if-merchant-category { width:auto; flex:1; min-width:170px; max-width:100%; }
.if-category-add-btn { width:34px; height:34px; padding:0; flex:0 0 34px; margin:0; }
.modal-sheet-small { max-width:460px; margin:0 auto; }
.pay-modal-summary {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}
.pay-code-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.pay-code-row input {
  flex: 1;
  font-family: Consolas, ui-monospace, monospace;
  font-size: 13px;
  background: var(--bg);
}
.pay-code-row .btn-small { flex-shrink: 0; }
@media (max-width: 560px) {
  .if-list-toolbar { align-items:flex-start; flex-direction:column; }
  .if-merchant-header { align-items:stretch; flex-direction:column; }
  .if-merchant-category-wrap { width:100%; }
}

/* #if-mismatch-warning (aviso de fechamento divergente na tela de import de fatura)
   reaproveita esta classe mas ganha um botão de ação inline — precisa de quebra de
   linha própria pra não espremer o botão junto do texto. */
.if-issuer-warning {
  background: #fde8e8;
  color: #8a1f1f;
  border: 1px solid #f0b4b4;
}
.if-issuer-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}
.if-issuer-confirm input { margin-top: 3px; }

#if-mismatch-warning #if-fix-closing-day { display: block; margin-top: 8px; }

.readonly-note {
  background: #fff4e0;
  color: #8a5a00;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  main { padding: 24px; }
}

/* v0.2.1 — filtro/categorização rápida de lançamentos sem categoria */
.tx-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; max-width:100%; min-width:0; }
.tx-list-heading h2 { margin-bottom:0; min-width:0; overflow-wrap:anywhere; }
.tx-filters { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border); min-width:0; max-width:100%; }
.tx-filter-wrap { position:relative; max-width:100%; min-width:0; }
.tx-filter-pill {
  display:inline-flex;
  align-items:center;
  gap:2px;
  width:auto;
  max-width:100%;
  margin:0;
  border:1px solid transparent;
  background:#e8f1f8;
  color:var(--navy);
  border-radius:6px;
  padding:2px 4px 2px 10px;
  font-size:13px;
  line-height:1.2;
}
.tx-filter-pill.open,
.tx-filter-pill.is-filtered { background:#d5e7f6; border-color:#9bbcdc; }
.tx-filter-pill-trigger {
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:5px 6px 5px 0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.tx-filter-pill-field { font-weight:500; }
.tx-filter-pill-op { color:#0f6cbd; font-weight:500; }
.tx-filter-pill-value { font-weight:700; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-filter-pill-clear {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin:0 2px 0 0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--grey);
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.tx-filter-pill-clear:hover { background:#c5d8eb; color:var(--navy); }
.tx-filter-popover {
  position:absolute;
  z-index:40;
  top:calc(100% + 8px);
  left:0;
  right:auto;
  width:280px;
  min-width:0;
  max-width:min(360px, calc(100vw - 48px));
  max-height:min(360px, 70vh);
  overflow:auto;
  padding:12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(31,58,95,.16);
  box-sizing:border-box;
}
.tx-filter-popover-title { font-size:14px; font-weight:700; color:var(--navy); margin:0 0 8px; }
.tx-filter-search {
  width:100%;
  margin:0 0 8px;
  padding:8px 10px 8px 32px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E") no-repeat 10px center;
  font-size:13px;
}
.tx-filter-option {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:6px 2px;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
}
.tx-filter-option input { width:16px; height:16px; margin:0; accent-color:var(--navy); flex:0 0 auto; }
.tx-filter-group { margin-top:6px; padding-top:4px; }
.tx-filter-group + .tx-filter-group { border-top:1px solid var(--border); margin-top:8px; padding-top:8px; }
.tx-filter-group-head { font-weight:700; color:var(--navy); }
.tx-filter-group .tx-filter-option:not(.tx-filter-group-head) { padding-left:22px; }
.tx-filter-empty { margin:8px 2px 0; color:var(--grey); font-size:12px; }
.uncategorized-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 360px) auto;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.uncategorized-row:last-child { border-bottom:none; }
.uncategorized-main { min-width:0; }
.uncategorized-desc { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.uncategorized-select { width:100%; min-width:0; font-size:12px; }

/* Indicação explícita de categoria já existente durante reimportação. */
.if-category-preserved {
  grid-column:1 / -1;
  width:100%;
  color:#2f6b49;
  font-size:11px;
  margin-top:2px;
  text-align:right;
}
.if-merchant-category:disabled {
  background-color:#eef3f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  color:#2f6b49;
  opacity:1;
}

/* Rodapé de versão em todas as telas do SPA.
   Desktop: fixed no rodapé visual (layout estável).
   Mobile: ver @media abaixo — em fluxo normal (evita gap/overlay com chrome do browser). */
body { padding-bottom:34px; }
.app-version-footer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  box-sizing:border-box;
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--border);
  color:var(--grey);
  font-size:11px;
  pointer-events:none;
}
.app-version-footer-logo {
  height:14px;
  width:auto;
  display:block;
  flex-shrink:0;
}
.fab { bottom:48px; }

@media (max-width: 760px) {
  /* Mobile header: row 1 = logo + entity/month/year (+ bell); row 2 = nav links. */
  header.app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  header.app-header .app-header-controls {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
  }
  header.app-header .app-header-logo {
    height: 32px;
    width: 32px;
    max-width: none;
  }
  header.app-header select#entity-switcher.entity-switcher-title,
  header.app-header select#tenant-switcher.entity-switcher-title {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: 0; /* flex grow fills; avoid intrinsic select min-width blowing the row */
    font-size: 13px;
    padding: 6px 24px 6px 6px;
    background-size: 12px 12px;
    background-position: right 6px center;
  }
  header.app-header select.period-switcher {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 5.75rem;
    font-size: 12px;
    padding: 6px 20px 6px 4px;
    background-size: 11px 11px;
    background-position: right 4px center;
  }
  header.app-header select#year-switcher {
    max-width: 4.75rem;
  }
  header.app-header .pending-actions-wrap {
    flex-shrink: 0;
    margin-left: auto;
  }
  header.app-header .pending-actions-btn {
    width: 30px;
    height: 30px;
  }
  /* Bell sits at the end of the top row — open the popover toward the left. */
  header.app-header .pending-actions-popover {
    left: auto;
    right: 0;
  }
  header.app-header .app-header-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 4px 8px;
  }
  header.app-header button.logout-btn {
    font-size: 12px;
    padding: 5px 3px;
  }

  main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .card {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .tx-list-heading { align-items:stretch; flex-direction:column; min-width:0; }
  .tx-filter-pill-value { max-width: min(140px, 42vw); }
  /* Popover sized to viewport; card overflow-x clips any edge spill so page won't drag. */
  .tx-filter-popover {
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
  }

  /* Keep tx rows inside the viewport: desc can shrink; actions wrap under. */
  .tx-row {
    flex-wrap: wrap;
  }
  .tx-actions {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .uncategorized-row {
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 100%;
  }
  .uncategorized-category-tools {
    grid-column: 1 / -1;
    max-width: 100%;
  }
  .uncategorized-select { grid-column: auto; }
  .uncategorized-row [data-uncat-save] {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* v0.2.2 — dashboard: redimensionamento mais evidente + preenchimento de lacunas. */
#app-screen main.dashboard-grid { grid-auto-flow: dense; }
.dashboard-widget-tools { display:flex; align-items:center; gap:3px; }
.dashboard-size-btn {
  width:24px;
  height:24px;
  padding:0;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  color:var(--navy);
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.dashboard-size-btn:hover { background:#f3f6fa; }
.dashboard-resize-handle {
  width:28px;
  height:28px;
  right:2px;
  bottom:2px;
  touch-action:none;
  z-index:2;
}
.dashboard-resize-handle::after { width:10px; height:10px; border-width:0 2px 2px 0; }
body.dashboard-resizing { user-select:none; cursor:ew-resize; }

/* v0.2.2 — sugestão automática + criação rápida na lista sem categoria. */
.uncategorized-category-tools {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
  min-width:0;
}
.uncategorized-add-category { min-width:38px; font-size:18px; line-height:1; padding:8px 10px; }
.uncategorized-suggestion { margin-top:3px; color:var(--grey); font-size:10px; }
.uncategorized-suggestion.has-suggestion { color:#2f6b49; font-weight:600; }

@media (max-width: 759px) {
  .dashboard-size-btn { display:none; }
}


/* v0.2.3 — movimentações entre contas */
.transfer-kind-banner { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-weight: 700; }
.transfer-kind-banner.pro-labore { border-left: 4px solid #7d5fff; }
.transfer-kind-banner.aporte { border-left: 4px solid #2f9e69; }
.transfer-kind-banner.transfer { border-left: 4px solid #5b6b7a; }
.transfer-badge { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; font-size:.72rem; font-weight:700; border:1px solid var(--border); }

/* v0.2.4 — exclusão assistida de categorias */
.category-delete-sheet { max-width: 620px; }
.category-delete-usage {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  max-height: 260px;
  overflow: auto;
}
.category-delete-usage .usage-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.category-delete-usage .usage-row:last-child { border-bottom: 0; }
.category-delete-usage .usage-label { font-weight: 600; }
.category-delete-usage .usage-count { white-space: nowrap; color: var(--muted); }
.btn-primary.danger { background: #9b1c1c; border-color: #9b1c1c; }
.btn-primary.danger:hover { background: #7f1717; }
/* v0.8.0: mesmo visual de .danger-icon do admin.css (botão secundário com tom de
   alerta) — precisa existir aqui também porque app.html não carrega admin.css. */
.danger-icon { color: var(--accent) !important; border-color: #e7c8ce !important; }
.danger-icon:hover { background: #fdeceb !important; }
.status-pill.OVERDUE { background: #fde8e8; color: #9b1c1c; }

/* v0.2.5 - Empréstimos */
.loan-row{align-items:center;gap:16px}.loan-row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}@media(max-width:700px){.loan-row{align-items:flex-start}.loan-row-actions{width:100%;justify-content:flex-start}}
.investment-row.is-redeemed{opacity:.62}
#investments-total-inline{font-weight:400;margin-left:8px}
.modal-subheading{font-size:15px;margin:0 0 10px;color:var(--navy)}
.inv-tax-pill.is-exempt{background:#e8f5e9;color:#1b5e20}
.inv-tax-pill.is-taxed{background:#fff4e5;color:#9a5b00}

/* v0.2.7 - Resumo Financeiro segue exatamente o padrão visual de Saldo por conta.
   O destaque principal usa .total-row e as métricas usam .balance-row, sem estilos
   próprios que criem pesos, alturas ou espaçamentos diferentes entre os cards. */
#status-totals .summary-group-row { font-weight: 600; color: var(--navy); }
#status-totals .summary-sub-row { padding-left: 16px; font-size: 13px; color: var(--grey); }
#status-totals .summary-sub-row .amount { font-size: 13px; font-weight: 500; color: var(--navy); }
#status-totals .summary-group:last-child .summary-sub-row:last-child { border-bottom: none; }

/* v0.3.0 — Administração central de usuários */
.admin-menu { position: relative; }
.accounts-menu .admin-submenu { left: 0; right: auto; }
.admin-submenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: #fff;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 6px;
  z-index: 2000;
}
.admin-submenu button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #17365d;
  text-align: left;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
}
.admin-submenu button:hover { background: #eef3f8; }
.admin-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #dfe5ec;
}
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-main { min-width: 0; }
.admin-user-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.admin-user-actions .btn-icon {
  flex: 0 0 auto;
}
/* Tamanho do svg dentro de .btn-icon já é global (ver regra .btn-icon svg acima). */

.admin-access-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.admin-access-pill {
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#eef3f8;
  font-size:.82rem;
}
.admin-access-grid { display:grid; gap:8px; margin:6px 0 14px; }
.admin-access-row {
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(190px,1fr);
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid #dfe5ec;
  border-radius:8px;
}
.admin-access-check { margin:0; font-weight:600; display:flex; align-items:center; gap:8px; }
@media (max-width:700px) {
  .admin-user-row { align-items:flex-start; flex-direction:column; }
  .admin-user-actions { justify-content:flex-start; }
  .admin-access-row { grid-template-columns:1fr; }
  .admin-submenu { left:0; right:auto; }
}

/* v0.3.1 — tela de Lançamentos com viewport fixa (desktop/tablet): cabeçalho/menu e
   rodapé ficam no lugar; somente a lista central de lançamentos rola. O cabeçalho da
   lista permanece visível porque fica fora do elemento #tx-list que recebe o overflow.
   Em mobile o rodapé de versão fica em fluxo normal (ver bloco abaixo) — Lançamentos
   então rola como as demais telas, sem position:fixed no selo. */
body.transactions-scroll-mode {
  overflow: hidden;
  overflow-x: hidden;
  max-width: 100%;
  overscroll-behavior-x: none;
}
#lancamentos-screen.active {
  height: calc(100dvh - var(--main-app-header-height, 58px) - 28px);
  min-height: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
}
#lancamentos-screen.active > main {
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: min(920px, 100%);
  box-sizing: border-box;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
#lancamentos-screen.active > main > .readonly-note { flex: 0 0 auto; }
#lancamentos-screen.active > main > .card {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#lancamentos-screen.active .tx-list-heading,
#lancamentos-screen.active #tx-filters,
#lancamentos-screen.active #uncategorized-hint { flex: 0 0 auto; min-width: 0; max-width: 100%; }
#lancamentos-screen.active #tx-list {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  /* stable gutter can widen the scrollport oddly on mobile WebViews */
  scrollbar-gutter: auto;
  padding-right: 4px;
}
@media (min-width: 640px) {
  #lancamentos-screen.active > main { padding-top: 24px; padding-bottom: 16px; }
  #lancamentos-screen.active #tx-list { scrollbar-gutter: stable; }
}

/* Mobile: selo de versão em fluxo do documento (não fixed). Evita o clássico
   position:fixed + chrome do browser (barra some no scroll → rodapé “sobe”,
   deixa gap / cobre conteúdo). Lançamentos deixa de usar viewport travada e
   rola com a página, igual às outras telas. Header sticky permanece. */
@media (max-width: 760px) {
  body { padding-bottom: 0; }
  .app-version-footer {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    height: auto;
    min-height: 28px;
    padding: 6px 10px;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  }
  .fab { bottom: 20px; }

  body.transactions-scroll-mode {
    overflow: visible;
    overflow-x: hidden;
  }
  #lancamentos-screen.active {
    height: auto;
    min-height: 0;
    overflow: visible;
    overflow-x: hidden;
  }
  #lancamentos-screen.active > main {
    height: auto;
    display: block;
  }
  #lancamentos-screen.active > main > .card {
    flex: none;
    display: block;
    overflow: visible;
  }
  #lancamentos-screen.active #tx-list {
    flex: none;
    overflow: visible;
    overscroll-behavior: auto;
  }
}
/* Keep filters wrapping so pills never force page-wide horizontal scroll. */

/* v0.4.3 — Administração > Gestão de entidades */
.management-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-entity-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 2px;border-bottom:1px solid #e1e8ef}
.admin-entity-row:last-child{border-bottom:0}.admin-entity-inactive{opacity:.68}.entity-type-pill{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;background:#eef3f8;color:#4e6178;font-size:11px;font-weight:600;vertical-align:middle}
@media(max-width:720px){.admin-entity-row{align-items:flex-start;flex-direction:column}}

/* v0.5.0 — separador leve para configuração WhatsApp na Gestão de usuários */
.form-section-divider { border-top: 1px solid #d9e1ea; margin: 18px 0 14px; }

/* v0.5.0 Hotfix 3 — modal de Gestão de usuários centralizado e com ações sempre visíveis. */
@media (min-width: 701px) {
  #admin-user-modal {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  #admin-user-modal .modal-sheet {
    width: min(460px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    border-radius: 14px;
    padding: 16px;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

#admin-user-modal .modal-actions {
  position: sticky;
  bottom: -16px;
  z-index: 2;
  margin: 16px -16px -16px;
  padding: 12px 16px 16px;
  background: #fff;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  #admin-user-modal .modal-sheet {
    max-height: 92dvh;
  }
}

/* v0.8.3 — Administração > Integrações > WhatsApp */
.whatsapp-capability-box{margin:10px 0 8px;padding:10px 12px;border:1px solid #dfe5ec;border-radius:8px;background:#f7f9fb}
.whatsapp-capability-box>strong{display:block;margin-bottom:6px;color:var(--navy);font-size:13px}
.integration-email-block{line-height:1.5;margin-top:8px}
.integration-email-address{font-size:1.15rem;font-weight:700;margin:8px 0 12px}
.integration-email-address a{color:var(--navy);text-decoration:underline}
.integration-email-hints{margin:0 0 12px;padding-left:1.2rem}
.integration-email-hints li{margin:4px 0}
#billing-whatsapp-actions.billing-actions,#integrations-whatsapp-status-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.integration-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700}
.integration-status-on{background:#e7f1ec;color:#236446}.integration-status-off{background:#fdeceb;color:#9c2f3d}
.integration-disabled-note{padding:14px;border:1px solid #e2c7ca;border-radius:9px;background:#fff7f7;margin-bottom:14px;line-height:1.45}
.whatsapp-contact-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center;padding:16px;border:1px solid #dfe5ec;border-radius:10px;margin-bottom:18px}
.whatsapp-qr-wrap{display:flex;align-items:center;justify-content:center;padding:8px;border:1px solid #dfe5ec;border-radius:10px;background:#fff}
.whatsapp-qr-wrap img{display:block;width:160px;height:160px;max-width:100%;object-fit:contain}
.whatsapp-contact-card h3,.whatsapp-permissions-card h3{margin:0 0 8px;color:var(--navy);font-size:15px}
.whatsapp-number{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}
.whatsapp-open-link{display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none;margin-top:4px}
.whatsapp-permissions-card{border-top:1px solid #dfe5ec;padding-top:16px}
.whatsapp-permission-row{display:grid;grid-template-columns:minmax(190px,1.4fr) minmax(150px,.8fr) minmax(170px,.9fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e1e8ef}
.whatsapp-permission-row:last-child{border-bottom:0}.whatsapp-permission-user{min-width:0}.whatsapp-permission-actions{display:flex;justify-content:flex-end}
.whatsapp-permission-row .checkbox-row{margin:0}.whatsapp-permission-row input:disabled{opacity:.5}
@media(max-width:850px){.whatsapp-permission-row{grid-template-columns:1fr 1fr}.whatsapp-permission-user{grid-column:1/-1}.whatsapp-permission-actions{justify-content:flex-start}}
@media(max-width:620px){.whatsapp-contact-card{grid-template-columns:1fr}.whatsapp-qr-wrap{justify-self:start}.whatsapp-permission-row{grid-template-columns:1fr}.whatsapp-permission-user{grid-column:auto}}

/* v0.8.4 — sino / ações pendentes. Mantém o padrão grayscale do app: nenhuma cor
   temática; o ícone herda currentColor e o badge usa branco/cinza. */
.pending-actions-wrap { position: relative; display: inline-flex; align-items: center; }
.pending-actions-btn {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pending-actions-btn:hover,
.pending-actions-btn[aria-expanded="true"] { background: rgba(255,255,255,.18); }
.pending-actions-btn svg { width: 18px; height: 18px; fill: currentColor; }
.pending-actions-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: #f5f5f5;
  color: #4b5563;
  border: 1px solid #d1d5db;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.pending-actions-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(390px, 88vw);
  max-height: 430px;
  overflow: auto;
  background: #fff;
  color: var(--text);
  border: 1px solid #d9dde3;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  padding: 12px;
  z-index: 40;
}
.pending-actions-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.pending-action-row { padding: 10px 0; border-top: 1px solid #e5e7eb; }
.pending-action-row:first-child { border-top: 0; }
.pending-action-row .pending-action-summary { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.pending-action-actions { display:flex; gap:8px; margin-top:9px; justify-content:flex-end; flex-wrap:wrap; }
.pending-action-actions button { width:auto; margin:0; }
.pending-action-source {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.pending-action-source select {
  width: 100%;
  margin: 0;
  font-size: 13px;
}
.loan-index-pill { display:inline-block; margin-left:6px; padding:2px 6px; border-radius:10px; background:#eef0f2; color:#4b5563; font-size:11px; }

/* v0.9.0 — BI/Insights Fase A */
.insights-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin: 0 0 12px;
  max-width: 100%;
  min-width: 0;
}
.insights-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--grey);
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.insights-control .period-switcher {
  min-width: 160px;
  max-width: 100%;
}
.insights-chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.insights-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.insights-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--navy);
}
.insights-summary .insights-stat {
  font-weight: 600;
}
.insights-summary .insights-stat span {
  font-weight: 500;
  color: var(--grey);
}
.insights-open-link {
  margin: 10px 0 0;
  font-size: 13px;
}
button.linkish {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  width: auto;
}
button.linkish:hover { opacity: .85; }

/* v0.9.1 — Análises (BI Fase B) */
.analises-main {
  max-width: 1180px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 90px;
  box-sizing: border-box;
  overflow-x: hidden;
}
.analises-panel {
  margin-bottom: 16px;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.analises-toolbar { margin-bottom: 0; max-width: 100%; min-width: 0; }
.analises-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
  max-width: 100%;
  min-width: 0;
}
.analises-toolbar-actions .insights-control .period-switcher {
  min-width: 200px;
  max-width: 100%;
}
.analises-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .analises-grid { grid-template-columns: 1fr 1fr; }
}
.analises-doughnut-wrap { max-width: 420px; margin: 0 auto; height: 280px; }
.analises-table-wrap { overflow-x: auto; }
.analises-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.analises-table th,
.analises-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.analises-table th { color: var(--grey); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.analises-table td.num,
.analises-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.analises-table .analises-bar-cell { min-width: 120px; }
.analises-table .analises-drill-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--navy, #1a2b4a);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.analises-table .analises-drill-link:hover { opacity: .8; }
.analises-table .analises-drill-muted { font-weight: 600; }
.analises-parent { color: var(--grey); font-size: 11px; font-weight: 400; margin-top: 2px; }
.analises-drill-list {
  max-height: min(60vh, 480px);
  overflow: auto;
  margin: 12px 0 4px;
  border-top: 1px solid var(--border);
}
.analises-drill-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.analises-drill-row .analises-drill-main { min-width: 0; flex: 1; }
.analises-drill-row .analises-drill-meta {
  color: var(--grey);
  font-size: 12px;
  margin-top: 2px;
}
.analises-drill-row .analises-drill-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.analises-bar {
  height: 8px;
  border-radius: 4px;
  background: #e8edf3;
  overflow: hidden;
}
.analises-bar > span {
  display: block;
  height: 100%;
  background: var(--navy);
  border-radius: 4px;
}

.insights-control-check {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.insights-control-check .analises-compare-toggle {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
}
.analises-compare-toggle input {
  accent-color: var(--navy);
  flex: 0 0 auto;
  margin: 2px 0 0;
}
.analises-compare-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .insights-control .period-switcher,
  .analises-toolbar-actions .insights-control .period-switcher {
    min-width: 0;
    width: 100%;
  }
  .insights-control {
    flex: 1 1 calc(50% - 7px);
  }
  /* Comparar + checkbox label stay on their own full-width row inside the card. */
  .insights-control-check,
  #analises-compare-wrap {
    flex: 1 1 100%;
    width: 100%;
  }
  .analises-toolbar-actions .insights-control {
    flex: 1 1 100%;
  }
  .analises-toolbar-actions .btn-secondary {
    flex: 0 0 auto;
  }
}

/* v0.9.2 — Import OFX */
.detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 16px;
}
.detail-title-row .screen-subtitle { margin: 0; }
/* Modal OFX centralizado (não folha inferior). */
.modal-overlay.modal-overlay-center {
  align-items: center;
  padding: 16px;
}
.modal-overlay.modal-overlay-center .modal-sheet-dialog {
  width: min(920px, 96vw);
  max-height: min(88vh, 900px);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.modal-sheet-wide { max-width: min(920px, 96vw); }
.io-loading {
  padding: 36px 16px;
  text-align: center;
  font-size: 15px;
}
.io-rows-list {
  max-height: 28vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 14px;
}
.io-section-title {
  margin: 14px 0 4px;
  font-size: 14px;
  color: var(--navy);
}
.io-balance {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f3f6f9;
  border: 1px solid var(--border);
  font-size: 13px;
  margin-bottom: 12px;
  color: var(--navy);
}
.io-balance.io-balance-warn {
  background: #fff6e8;
  border-color: #f0c987;
}
.io-balance.io-balance-ok {
  background: #eef8f0;
  border-color: #b7dfc0;
}
.io-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.io-row:last-child { border-bottom: 0; }
.io-row .io-meta { color: var(--grey); font-size: 12px; margin-top: 2px; }
.io-row .io-hint { color: var(--grey); font-size: 12px; margin-top: 4px; }
.io-row .io-vs {
  margin-top: 6px;
  padding: 6px 8px;
  background: #f7f8fa;
  border-radius: 6px;
  font-size: 12px;
}
.io-row select {
  font-size: 12px;
  padding: 4px 28px 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px 12px;
  color: var(--navy);
  max-width: 220px;
  margin-top: 6px;
}
.io-amount { font-weight: 600; white-space: nowrap; text-align: right; }
.balance-row .btn-import-ofx {
  flex-shrink: 0;
  margin-left: 6px;
}
.io-empty {
  padding: 10px 12px;
  color: var(--grey);
  font-size: 13px;
}