/* ─────────────────────────────────────────────────────────────────────────
   House Finance Manager — Design System
   Palette: editorial minimalism × fintech premium
   ───────────────────────────────────────────────────────────────────────── */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --bg:           #F7F3EA;
  --bg-alt:       #F0EBE0;
  --surface:      #FFFFFF;
  --surface-2:    #FDFAF5;
  --border:       #E7DED0;
  --border-soft:  #F0EAE0;

  --text-primary:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --text-inverse:   #FFFFFF;

  --navy:     #0F172A;
  --navy-mid: #1E293B;
  --green:    #2F6F5E;
  --green-lt: #D1FAE5;
  --gold:     #C6A15B;
  --gold-lt:  #FEF3C7;

  --danger:      #B42318;
  --danger-bg:   #FEF2F2;
  --success:     #027A48;
  --success-bg:  #ECFDF5;
  --warning:     #B54708;
  --warning-bg:  #FFFBEB;
  --info:        #1D4ED8;
  --info-bg:     #EFF6FF;

  --sidebar-w:   260px;
  --topbar-h:    64px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:   0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:   0 10px 30px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--green); }

/* Suprimir tap-highlight em mobile (Android/iOS) */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Prevenir selecção de texto ao long-press em elementos interativos */
.btn, .nav-item, .period-tab, .period-toggle-btn, .topbar-hamburger, .sidebar-close {
  user-select: none;
  -webkit-user-select: none;
}

img { display: block; max-width: 100%; }

/* ── App Layout ────────────────────────────────────────────────────────── */
.app-layout {
  display: block;
  min-height: 100vh;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-w);
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--navy);
  color: var(--text-inverse);
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: .5rem;
}

.brand-icon {
  font-size: 1.375rem;
  color: var(--gold);
  line-height: 1;
}

.brand-text {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #F8F5EF;
}

.sidebar-nav {
  flex: 1;
  padding: .5rem 0;
}

.nav-section {
  margin-bottom: 1.5rem;
}

.nav-section-label {
  display: block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: 0 1.25rem .5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.25rem;
  font-size: .8125rem;
  font-weight: 450;
  color: rgba(255,255,255,.65);
  border-radius: 0;
  cursor: pointer;
  transition: background .12s, color .12s;
  border-left: 2px solid transparent;
}

.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }

.nav-item--active {
  color: #fff;
  background: rgba(198,161,91,.1);
  border-left-color: var(--gold);
}

.nav-item--disabled {
  color: rgba(255,255,255,.2);
  cursor: not-allowed;
}

.nav-item--disabled:hover { background: transparent; color: rgba(255,255,255,.2); }

.nav-icon {
  font-size: 1rem;
  width: 1.125rem;
  text-align: center;
  flex-shrink: 0;
}

/* ── Lucide icon sizing ───────────────────────────────────────────────── */
.lucide { display:inline-block; vertical-align:middle; }
.nav-icon svg, .nav-icon .lucide { width:1rem; height:1rem; }
.icon-sm svg, .icon-sm .lucide { width:.875rem; height:.875rem; }
.icon-md svg, .icon-md .lucide { width:1.125rem; height:1.125rem; }
.icon-lg svg, .icon-lg .lucide { width:1.5rem; height:1.5rem; }
.icon-xl svg, .icon-xl .lucide { width:2rem; height:2rem; }

.nav-section--future .nav-section-label { opacity: .5; }

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: .625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.user-name {
  font-size: .8125rem;
  font-weight: 500;
  color: #F8F5EF;
  line-height: 1.2;
}

.user-email {
  font-size: .6875rem;
  color: rgba(255,255,255,.35);
}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 2rem;
}

.page-title { font-size: 1rem; font-weight: 600; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.topbar-logout {
  font-size: .8125rem;
  color: var(--text-muted);
  transition: color .12s;
}
.topbar-logout:hover { color: var(--danger); }

/* ── Page Content ──────────────────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 2rem;
  max-width: 1280px;
  width: 100%;
}

/* ── Page Header ───────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}

.page-heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.page-sub {
  font-size: .875rem;
  color: var(--text-muted);
  margin-top: .25rem;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.breadcrumb {
  font-size: .8125rem;
  color: var(--text-muted);
  display: inline-block;
  margin-bottom: .375rem;
  transition: color .12s;
}
.breadcrumb:hover { color: var(--green); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.125rem;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn--primary:hover { background: var(--navy-mid); color: #fff; }

.btn--secondary {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn--secondary:hover { background: var(--bg-alt); border-color: #D1C9BD; }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--bg-alt); color: var(--text-primary); }

.btn--full { width: 100%; justify-content: center; }

/* ── Stats Grid ────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ── Stat Card ─────────────────────────────────────────────────────────── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.stat-card:hover { box-shadow: var(--shadow-md); }

/* Drill-down interactive elements */
.drill { cursor: pointer; }
a.stat-card.drill:hover { border-color: var(--primary); }
a.stat-card.drill:hover .drill-hint { opacity: 1; }
.drill-hint {
  font-size: .7rem;
  opacity: 0;
  transition: opacity .15s;
  color: var(--primary);
}
.cat-row { text-decoration: none; color: inherit; display: block; }
a.cat-row.drill:hover { background: var(--bg-hover); border-radius: .25rem; }
.transaction-row { transition: background .1s; }
a.transaction-row.drill:hover { background: var(--bg-hover); border-radius: .25rem; }
.predicted-row { transition: background .1s; border-radius: .25rem; }
a.predicted-row.drill:hover { background: var(--bg-hover); }

.stat-card--featured {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.stat-card--featured .stat-card-label { color: rgba(255,255,255,.5); }
.stat-card--featured .stat-card-sub { color: rgba(255,255,255,.4); }

.stat-card-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.stat-card-value {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.stat-card-sub {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .375rem;
}

/* ── Dashboard Grid ────────────────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.dashboard-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.dashboard-card--placeholder {
  opacity: .6;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.card-title {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.card-link {
  font-size: .75rem;
  color: var(--text-muted);
  transition: color .12s;
}
.card-link:hover { color: var(--green); }

/* ── Account list (dashboard) ──────────────────────────────────────────── */
.account-list { display: flex; flex-direction: column; }

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background .1s;
  cursor: pointer;
}
.account-row:last-child { border-bottom: none; }
.account-row:hover { background: var(--bg); }

.account-name {
  font-size: .875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.account-bank { font-size: .75rem; color: var(--text-muted); margin-top: .125rem; }
.account-balance { font-size: .9375rem; font-weight: 600; }

/* ── Account Cards (accounts page) ────────────────────────────────────── */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
  display: block;
  cursor: pointer;
}
.account-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.account-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.account-type-badge {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.account-card-name {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: .25rem;
}

.account-card-bank {
  font-size: .8125rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.account-card-balance {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .25rem;
}

.account-card-overdrawn {
  font-size: .6875rem;
  color: var(--danger);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.account-card-footer {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border-soft);
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── Transaction List ──────────────────────────────────────────────────── */
.transaction-list { display: flex; flex-direction: column; }

.transaction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}
.transaction-row:last-child { border-bottom: none; }

.tx-desc { font-size: .875rem; font-weight: 500; }
.tx-date { font-size: .75rem; color: var(--text-muted); margin-top: .125rem; }
.tx-amount { font-size: .9375rem; font-weight: 600; flex-shrink: 0; }

/* ── Import list ───────────────────────────────────────────────────────── */
.import-list { display: flex; flex-direction: column; }

.import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background .1s;
}
.import-row:last-child { border-bottom: none; }
.import-row:hover { background: var(--bg); }

.import-filename { font-size: .8125rem; font-weight: 500; }
.import-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── Data Table ────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}

.data-table thead tr {
  border-bottom: 1px solid var(--border);
}

.data-table th {
  padding: .75rem 1rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg); }

.row-link { font-weight: 500; transition: color .12s; }
.row-link:hover { color: var(--green); }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .125rem .5rem;
  border-radius: 9999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}

.badge--success  { background: var(--success-bg); color: var(--success); }
.badge--danger   { background: var(--danger-bg);  color: var(--danger);  }
.badge--warning  { background: var(--warning-bg); color: var(--warning); }
.badge--info     { background: var(--info-bg);    color: var(--info);    }
.badge--muted    { background: var(--bg-alt);     color: var(--text-muted); }

.type-pill {
  display: inline-flex;
  padding: .125rem .5rem;
  border-radius: var(--radius);
  font-size: .6875rem;
  font-weight: 500;
}
.type-pill--income   { background: var(--success-bg); color: var(--success); }
.type-pill--expense  { background: var(--danger-bg);  color: var(--danger);  }
.type-pill--transfer { background: var(--info-bg);    color: var(--info);    }
.type-pill--adjustment { background: var(--bg-alt);   color: var(--text-muted); }

/* ── Flash Messages ────────────────────────────────────────────────────── */
.flash {
  padding: .875rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .875rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}

.flash--success { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.flash--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger);  }
.flash--warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.flash--info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info);    }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  max-width: 760px;
}

.hfm-form { display: flex; flex-direction: column; gap: 0; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-grid--small { grid-template-columns: auto 1fr; align-items: center; }

.form-group { display: flex; flex-direction: column; gap: .375rem; }
.form-group--full { grid-column: 1 / -1; }
.form-group--checkbox { flex-direction: row; align-items: center; gap: .5rem; }

.form-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-control,
.hfm-form input[type="text"],
.hfm-form input[type="email"],
.hfm-form input[type="password"],
.hfm-form input[type="number"],
.hfm-form input[type="date"],
.hfm-form select,
.hfm-form textarea {
  width: 100%;
  padding: .5625rem .875rem;
  font-size: .875rem;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .14s, box-shadow .14s;
  line-height: 1.5;
  appearance: none;
}

.form-control:focus,
.hfm-form input:focus,
.hfm-form select:focus,
.hfm-form textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}

.hfm-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-right: 2.5rem;
}

.hfm-form input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--navy);
  flex-shrink: 0;
}

.form-hint {
  font-size: .75rem;
  color: var(--text-muted);
}

.form-section-title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .875rem;
  padding-top: .25rem;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  margin-top: .5rem;
}

/* ── Detail Card ───────────────────────────────────────────────────────── */
.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 640px;
  box-shadow: var(--shadow-sm);
}

.detail-amount {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -.05em;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .625rem 1.5rem;
  font-size: .875rem;
}

.detail-list dt { color: var(--text-muted); font-weight: 500; }
.detail-list dd { font-weight: 400; }

/* ── Categories ────────────────────────────────────────────────────────── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.category-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: var(--shadow-sm);
}

.category-card-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .875rem;
}

.category-icon { font-size: 1.25rem; }

.category-name {
  font-size: .9375rem;
  font-weight: 600;
  flex: 1;
}

.category-children {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-bottom: .875rem;
}

.category-child {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .75rem;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: .8125rem;
}

.category-card-meta {
  font-size: .75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  padding-top: .625rem;
}

/* ── Import page ───────────────────────────────────────────────────────── */
.import-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
}

.import-info-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.import-info-panel h3 {
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .75rem;
  color: var(--text-secondary);
  letter-spacing: .01em;
}

.import-info-panel h3 + h3 { margin-top: 1.25rem; }

.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.info-list li {
  font-size: .8125rem;
  color: var(--text-secondary);
  padding-left: 1rem;
  position: relative;
}
.info-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}
ol.info-list { counter-reset: info-counter; }
ol.info-list li { counter-increment: info-counter; }
ol.info-list li::before { content: counter(info-counter) '.'; font-size: .6875rem; }

/* File drop zone */
.file-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.file-drop-zone:hover { border-color: var(--navy); background: var(--bg); }
.file-drop-zone.has-file {
  border-style: solid;
  border-color: #2e7d32;
  background: rgba(46, 125, 50, .08);
}
.file-drop-zone.has-file .file-drop-icon { color: #2e7d32; }
.file-drop-zone.has-file .file-drop-text { color: #2e7d32; }

.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.file-drop-icon { font-size: 2rem; color: var(--text-muted); margin-bottom: .75rem; }
.file-drop-text { font-size: .9375rem; font-weight: 500; margin-bottom: .25rem; }
.file-drop-sub  { font-size: .8125rem; color: var(--text-muted); }

/* ── Empty States ──────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: .4; }
.empty-state h2 { font-size: 1.125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .5rem; }
.empty-state p { font-size: .875rem; margin-bottom: 1.5rem; }

.empty-state-inline {
  padding: 1.5rem 1.25rem;
  font-size: .875rem;
  color: var(--text-muted);
}
.empty-state-inline a { color: var(--green); text-decoration: underline; }

.placeholder-content {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .875rem;
}
.placeholder-icon { font-size: 1.75rem; margin-bottom: .75rem; opacity: .3; }

/* ── Auth Layout ───────────────────────────────────────────────────────── */
.auth-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.auth-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}

.auth-header { text-align: center; margin-bottom: 2rem; }

.auth-logo {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: .75rem;
  display: block;
}

.auth-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: .375rem;
}

.auth-subtitle {
  font-size: .875rem;
  color: var(--text-muted);
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-hint {
  margin-top: 1.5rem;
  text-align: center;
  font-size: .75rem;
  color: var(--text-muted);
}

.auth-hint code {
  background: var(--bg-alt);
  padding: .125rem .375rem;
  border-radius: 4px;
  font-size: .75rem;
}

/* ── Helpers ───────────────────────────────────────────────────────────── */
.text-right { text-align: right; }
.text-muted  { color: var(--text-muted); }
.font-mono   { font-family: var(--font-mono); }

.text--primary { color: var(--text-primary); }
.text--success { color: var(--success); }
.text--danger  { color: var(--danger); }
.text--warning { color: var(--warning); }
.text--muted   { color: var(--text-muted); }

.row--muted td  { opacity: .45; }
.row--warning td { background: rgba(245, 158, 11, .06); }

.form-help { font-size: .8rem; color: var(--text-muted); margin-top: .125rem; }

/* ── Period Filter Bar (Phase 5) ───────────────────────────────────────── */
.period-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1rem;
}

/* ── Account filter bar ───────────────────────────────────────────────────── */
.account-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.account-filter-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.account-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.account-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3125rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-secondary);
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.account-filter-tab:hover {
  background: var(--bg-alt);
  color: var(--text-primary);
  border-color: var(--navy);
}
.account-filter-tab--active {
  background: var(--navy);
  color: #fff !important;
  border-color: var(--navy);
}
.badge--xs {
  font-size: .65rem;
  padding: .1rem .35rem;
  line-height: 1.2;
}

.period-month-nav {
  display: flex;
  align-items: center;
  gap: .375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .1875rem .375rem;
}

.period-nav-btn {
  padding: .25rem .5rem;
  font-size: .8125rem;
  color: var(--text-muted);
  border-radius: 4px;
  transition: background .1s, color .1s;
}
.period-nav-btn:hover { background: var(--bg-alt); color: var(--text-primary); }
.period-nav-btn--today { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.period-month-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 .375rem;
  min-width: 5rem;
  text-align: center;
}

.period-badge {
  font-size: .75rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .25rem .625rem;
}

.form-control--sm {
  padding: .3125rem .625rem;
  font-size: .8125rem;
  width: auto;
}

.btn--sm {
  padding: .3125rem .75rem;
  font-size: .8125rem;
}

/* ── Settings: period type radio cards ─────────────────────────────────── */
.period-type-option {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.period-type-option input[type="radio"] { display: none; }
.period-type-option:hover { border-color: var(--navy); background: var(--bg); }
.period-type-option--active { border-color: var(--navy); background: var(--navy); color: #fff; }
.period-type-option--active .period-type-desc { color: rgba(255,255,255,.6); }

.period-type-label { font-size: .9375rem; font-weight: 600; }
.period-type-desc  { font-size: .8125rem; color: var(--text-muted); }

/* ── Settings: period preview ──────────────────────────────────────────── */
.period-preview-box {
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .875rem;
}
.period-preview-label { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .375rem; }

/* ── Transaction competence date ───────────────────────────────────────── */
.tx-competence-date { font-size: .6875rem; color: var(--text-muted); }

/* ── Period Filter ─────────────────────────────────────────────────────── */
.period-filter {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .25rem;
  width: fit-content;
}

.period-tab {
  padding: .3125rem .875rem;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: background .12s, color .12s;
  white-space: nowrap;
  cursor: pointer;
}
.period-tab:hover { color: var(--text-primary); background: var(--bg); }
.period-tab--active {
  background: var(--navy);
  color: #fff;
}
.period-tab--active:hover { background: var(--navy); color: #fff; }

/* ── Dashboard: Period mode toggle ─────────────────────────────────────── */
.period-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .1875rem;
  gap: .125rem;
  flex-shrink: 0;
}
.period-toggle-btn {
  display: inline-block;
  padding: .3125rem 1rem;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
}
.period-toggle-btn:hover { color: var(--text-primary); background: var(--bg-alt); }
.period-toggle-btn--active { background: var(--navy); color: #fff !important; }
.period-toggle-btn--active:hover { background: var(--navy); color: #fff !important; }
.period-toggle-btn--locked {
  font-size: .75rem;
  opacity: .55;
  pointer-events: auto;
}
.period-toggle-btn--locked:hover { background: transparent; cursor: help; opacity: .75; }

/* Custom date button */
.period-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  white-space: nowrap;
  font-family: inherit;
}
.period-custom-btn:hover { border-color: var(--primary); color: var(--primary); }
.period-custom-btn--active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(79,70,229,.06);
  font-weight: 600;
}

/* Custom date form inline */
.period-custom-form {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.period-custom-form--visible { display: flex; }
.period-custom-form label { font-size: .8125rem; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* ── Variation Indicator ───────────────────────────────────────────────── */
.variation {
  font-size: .6875rem;
  font-weight: 600;
  padding: .0625rem .3125rem;
  border-radius: 4px;
  margin-right: .1875rem;
}
.variation--up   { background: var(--success-bg); color: var(--success); }
.variation--down { background: var(--danger-bg);  color: var(--danger);  }

/* ── Category Spending ─────────────────────────────────────────────────── */
.category-spending-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cat-row {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}
.cat-row:last-child { border-bottom: none; }

.cat-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .375rem;
}

.cat-name {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.cat-amount {
  font-size: .8125rem;
  font-weight: 600;
}

.cat-bar-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cat-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-alt);
  border-radius: 9999px;
  overflow: hidden;
}

.cat-bar-fill {
  height: 100%;
  background: var(--danger);
  border-radius: 9999px;
  transition: width .3s ease;
}

.cat-pct {
  font-size: .6875rem;
  color: var(--text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* ── Predicted Balance ─────────────────────────────────────────────────── */
.predicted-body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  gap: 0;
}

.predicted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.predicted-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0 .25rem;
}

.predicted-label {
  font-size: .8125rem;
  color: var(--text-muted);
}

.predicted-value {
  font-size: .9375rem;
  font-weight: 600;
}

.predicted-total {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── Dashboard Full-width grid ─────────────────────────────────────────── */
.dashboard-grid--full {
  grid-template-columns: 1fr;
}

/* ── Installment-specific ──────────────────────────────────────────────── */
.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #059669; }
.btn--danger  { background: var(--danger);  color: #fff; }
.btn--danger:hover  { background: #b91c1c; }

.row--danger td { background: rgba(220, 38, 38, .05); }

.action-group { display: flex; gap: .375rem; flex-wrap: wrap; align-items: center; }

.inline-details { display: inline-block; position: relative; }
.inline-details summary { cursor: pointer; list-style: none; }
.inline-details summary::-webkit-details-marker { display: none; }
.inline-details[open] { z-index: 10; }
.inline-form {
    display: flex;
    gap: .375rem;
    align-items: center;
    padding: .5rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    white-space: nowrap;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

/* ── Hamburger button (hidden on desktop) ──────────────────────────────── */
.topbar-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: .25rem;
  flex-shrink: 0;
  transition: background .12s;
}
.topbar-hamburger:hover { background: var(--bg-alt); }
.topbar-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* Sidebar close button (hidden on desktop) */
.sidebar-close {
  display: none;
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background .12s;
}
.sidebar-close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s;
}
.sidebar-overlay--visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Large tablets / small desktops */
@media (max-width: 1200px) {
  :root { --sidebar-w: 230px; }
}

@media (max-width: 1024px) {
  .dashboard-grid--three { grid-template-columns: 1fr 1fr; }
  .accounts-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* Tablet / mobile breakpoint */
@media (max-width: 900px) {
  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
    box-shadow: none;
  }
  .sidebar--open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  .sidebar-overlay { display: block; }
  .sidebar-close   { display: flex; }
  .topbar-hamburger { display: flex; }

  /* Main content takes full width */
  .main-wrapper { margin-left: 0; }
  .page-content { padding: 1.25rem 1rem; }

  /* Touch targets mínimos de 44px (Apple HIG / WCAG 2.5.5) */
  .btn        { min-height: 44px; }
  .btn--sm    { min-height: 38px; }
  .nav-item   { min-height: 44px; padding-top: .625rem; padding-bottom: .625rem; }
  .period-nav-btn, .period-tab, .period-toggle-btn { min-height: 38px; }

  /* Grids */
  .dashboard-grid           { grid-template-columns: 1fr; }
  .dashboard-grid--three    { grid-template-columns: 1fr; }
  .import-layout            { grid-template-columns: 1fr; }
  .stats-grid               { grid-template-columns: 1fr 1fr; }
  .accounts-grid            { grid-template-columns: 1fr 1fr; }
  .goal-grid                { grid-template-columns: 1fr 1fr; }
  .household-grid           { grid-template-columns: 1fr; }

  /* Page header stacks on mobile */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .page-header-actions { flex-wrap: wrap; }

  /* Topbar */
  .topbar-inner { padding: 0 1rem; gap: .5rem; }
  .topbar-logout span { display: none; }
  .topbar-logout::after { content: '⎋'; font-size: 1rem; }

  /* Period filter bar */
  .period-filter-bar { flex-wrap: wrap; gap: .5rem; }
  .period-toggle { flex-wrap: wrap; }

  /* Alert items */
  .alert-item { grid-template-columns: 1fr; gap: .5rem; }
  .alert-item__severity { display: none; }
  .alert-item__actions { flex-direction: row; align-items: center; }

  /* Recurring bills summary */
  .rb-summary { flex-wrap: wrap; gap: .75rem; }

  /* Bulk bar */
  .bulk-bar { flex-direction: column; align-items: flex-start; padding: .75rem 1rem; }
  .bulk-bar__sep { display: none; }
}

/* Mobile */
@media (max-width: 600px) {
  html { font-size: 14px; }

  /* Prevenir iOS Safari auto-zoom: inputs com font-size < 16px causam zoom automático */
  .form-control,
  .hfm-form input[type="text"],
  .hfm-form input[type="email"],
  .hfm-form input[type="password"],
  .hfm-form input[type="number"],
  .hfm-form input[type="date"],
  .hfm-form select,
  .hfm-form textarea,
  .bulk-bar__select { font-size: 16px; }

  .page-content { padding: 1rem .75rem; }

  /* Single-column everything */
  .form-grid          { grid-template-columns: 1fr; }
  .form-row--3col     { grid-template-columns: 1fr; }
  .stats-grid         { grid-template-columns: 1fr; }
  .accounts-grid      { grid-template-columns: 1fr; }
  .goal-grid          { grid-template-columns: 1fr; }
  .rb-form .form-row  { grid-template-columns: 1fr; }

  /* Tables: enable horizontal scroll */
  .data-table {
    font-size: .75rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table thead, .data-table tbody, .data-table tfoot { display: table; width: 100%; }
  .data-table th, .data-table td { padding: .5rem .625rem; white-space: nowrap; }

  /* Topbar */
  .topbar { height: auto; min-height: var(--topbar-h); }
  .topbar-inner { flex-wrap: wrap; padding: .5rem .75rem; min-height: var(--topbar-h); }
  .page-title { font-size: .9375rem; }

  /* Page heading smaller */
  .page-heading { font-size: 1.25rem; }

  /* Buttons wrap */
  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1; justify-content: center; }

  /* Logout: remover símbolo ⎋ Mac-específico; mostrar texto em mobile */
  .topbar-logout::after { content: none !important; }
  .topbar-logout span   { display: inline !important; font-size: .75rem; }

  /* Period filter */
  .period-filter-bar { flex-direction: column; align-items: stretch; }
  .period-toggle { justify-content: stretch; }
  .period-toggle-btn { flex: 1; text-align: center; }
  .period-month-nav { justify-content: center; }
  .period-custom-form { flex-wrap: wrap; gap: .5rem; }
  .period-custom-form label { width: 100%; }
  .period-custom-form input[type=date] { flex: 1; min-width: 120px; }

  /* Stat cards */
  .stat-card-value { font-size: 1.375rem; }

  /* Card headers */
  .card-header { flex-wrap: wrap; gap: .375rem; }

  /* Filter bar */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-control,
  .filter-bar .btn { width: 100%; }

  /* Bulk bar */
  .bulk-bar { gap: .5rem; }
  .bulk-bar__group { flex-wrap: wrap; }
  .bulk-bar__select { min-width: 100px; }

  /* Alert item actions */
  .alert-item__actions { flex-direction: row; flex-wrap: wrap; }

  /* Form inside card - full width on mobile */
  .form-card { padding: 1rem; }
  .form-actions { flex-direction: column; gap: .5rem; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Stats row wraps */
  .stats-row { gap: .75rem; }

  /* KPI row */
  .kpi-row { gap: .5rem; }
  .mini-kpi { min-width: calc(50% - .25rem); }

  /* Household card */
  .household-card__actions { flex-direction: column; }
  .household-card__actions .btn { width: 100%; justify-content: center; }

  /* Dashboard KPIs */
  .dash-kpis { flex-wrap: wrap; }
  .dash-kpi { min-width: calc(50% - .25rem); }
}

/* Extra small screens */
@media (max-width: 400px) {
  .topbar-hamburger { margin-right: .25rem; }
  .page-content { padding: .75rem .5rem; }
  .btn { padding: .4375rem .875rem; font-size: .8125rem; }
}

/* ── Goals ─────────────────────────────────────────────────────────────── */
.goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.goal-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}

.goal-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.goal-card--completed { opacity: .8; }
.goal-card--paused    { opacity: .75; }
.goal-card--overdue   { border-color: var(--danger); }

.goal-grid--muted .goal-card:hover { border-color: var(--border); box-shadow: none; }

.goal-card__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.goal-type-icon { font-size: 1.25rem; }

.goal-card__name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    color: var(--text-primary);
}

.goal-card__deadline {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0 0 .75rem;
}

.goal-card__progress { margin-bottom: .5rem; }

.progress-bar {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 9999px;
    overflow: hidden;
}

.progress-bar--md { height: 10px; }
.progress-bar--lg { height: 14px; }

.progress-bar__fill {
    height: 100%;
    background: var(--primary);
    border-radius: 9999px;
    transition: width .3s;
}

.progress-bar__fill--success { background: var(--success); }
.progress-bar__fill--danger  { background: var(--danger); }
.progress-bar__fill--muted   { background: var(--text-muted); }

.progress-bar__labels {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

.goal-card__remaining {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0;
}

.goal-card__monthly {
    font-size: .8rem;
    margin: .25rem 0 0;
}

/* Stats / forecast row */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.stat-item { display: flex; flex-direction: column; gap: .2rem; }
.stat-item__label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-item__value { font-size: 1rem; font-weight: 600; }

/* KPI row inside card */
.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .5rem;
}

.mini-kpi { display: flex; flex-direction: column; gap: .1rem; }
.mini-kpi__label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mini-kpi__value { font-size: .9rem; font-weight: 600; }

/* Section headings within page */
.section-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 .75rem;
}

/* Form rows */
.form-row--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Progress bar mt helper */
.mt-1 { margin-top: .25rem; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */

/* Topbar bell */
.topbar-alerts {
    position: relative;
    display: flex;
    align-items: center;
    padding: .25rem .5rem;
    text-decoration: none;
    font-size: 1.1rem;
    color: var(--text-primary);
    border-radius: var(--radius);
    transition: background .15s;
}
.topbar-alerts:hover { background: var(--bg-hover); }

.alert-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--warning, #f59e0b);
    color: #fff;
    border-radius: 9999px;
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.alert-badge--critical { background: var(--danger, #ef4444); }

/* Nav badge */
.nav-badge {
    margin-left: auto;
    background: var(--warning, #f59e0b);
    color: #fff;
    border-radius: 9999px;
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

/* Alert severity badges */
.badge--critical { background: #7c3aed; color: #fff; }

/* Alert list */
.alert-list { display: flex; flex-direction: column; gap: .75rem; }

.alert-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    align-items: start;
}

.alert-item--unread { border-left-color: var(--primary); }
.alert-item--info     { border-left-color: #6366f1; }
.alert-item--warning  { border-left-color: #f59e0b; }
.alert-item--danger   { border-left-color: #ef4444; }
.alert-item--critical { border-left-color: #7c3aed; }

.alert-item__severity { display: flex; align-items: flex-start; }

.alert-item__body { display: flex; flex-direction: column; gap: .35rem; }

.alert-item__header {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
}

.alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    display: inline-block;
}

.alert-item__type { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }

.alert-item__title {
    font-weight: 600;
    font-size: .95rem;
    margin: 0;
    color: var(--text-primary);
}

.alert-item__message {
    font-size: .85rem;
    color: var(--text-secondary);
    margin: 0;
}

.alert-item__meta { font-size: .75rem; margin: 0; }

.alert-item__actions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: flex-end;
}

/* Filter bar */
.filter-bar {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* Alert center badge tweaks */
.badge--info    { background: #6366f1; color: #fff; }

/* ── Bulk selection bar (transactions) ─────────────────────────────────── */
.bulk-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #1e1b4b;
  color: #fff;
  padding: .625rem 1.5rem;
  /* Safe area iOS — garante que a barra não fica sob o home indicator */
  padding-bottom: max(.625rem, env(safe-area-inset-bottom));
  padding-left:   max(1.5rem, env(safe-area-inset-left));
  padding-right:  max(1.5rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap;
  z-index: 200;
  transform: translateY(100%);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  border-top: 1px solid rgba(255,255,255,.1);
}
.bulk-bar--visible { transform: translateY(0); }

.bulk-bar__count {
  font-weight: 700;
  font-size: .9375rem;
  white-space: nowrap;
  background: rgba(255,255,255,.12);
  padding: .25rem .75rem;
  border-radius: 999px;
}

.bulk-bar__sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

.bulk-bar__group {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.bulk-bar__label {
  font-size: .75rem;
  opacity: .7;
  white-space: nowrap;
}

.bulk-bar__select {
  padding: .25rem .5rem;
  border-radius: 4px;
  font-size: .8125rem;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  color: #fff;
  min-width: 130px;
}
.bulk-bar__select option { background: #1e1b4b; color: #fff; }

.bulk-bar__btn {
  padding: .3125rem .875rem;
  border-radius: 4px;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .12s;
}
.bulk-bar__btn--apply {
  background: #22c55e; color: #fff;
}
.bulk-bar__btn--apply:hover { background: #16a34a; }

.bulk-bar__btn--clear {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
.bulk-bar__btn--clear:hover { background: rgba(255,255,255,.22); }

/* Checkbox column */
.tx-chk-col { width: 36px; text-align: center; padding: .3rem .3rem; }
.tx-checkbox {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: #4f46e5;
  flex-shrink: 0;
}
.tx-row--selected { background: rgba(79,70,229,.08) !important; }
.tx-row--selected td { border-color: rgba(79,70,229,.15); }

/* ── Dashboard mini-widgets (Objectivos / Alertas / Importações) ─────────── */
.dash-widget {
  display: flex;
  flex-direction: column;
}

.dash-widget__body {
  flex: 1;
  padding: 0 1.25rem;
}

.dash-widget__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-soft);
  margin-top: .75rem;
}
.dash-widget__footer--row {
  display: flex;
  gap: .5rem;
}

/* Empty state inside widget */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .375rem;
  padding: 1.25rem .5rem;
  color: var(--text-muted);
  font-size: .875rem;
}
.dash-empty p { margin: 0; }
.dash-empty--ok { color: var(--success); }
.dash-empty--ok p { color: var(--text-muted); }

/* Inline alert banner inside widget */
.dash-alert {
  font-size: .8125rem;
  font-weight: 500;
  padding: .375rem .625rem;
  border-radius: var(--radius);
  margin-bottom: .75rem;
}
.dash-alert--danger { background: var(--danger-bg); color: var(--danger); }

/* KPI pills row */
.dash-kpis {
  display: flex;
  gap: .5rem;
  margin-bottom: .875rem;
}
.dash-kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem .25rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  text-align: center;
}
.dash-kpi__val {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
}
.dash-kpi__lbl {
  font-size: .65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .125rem;
}

/* Goal list inside widget */
.dash-goal-list { display: flex; flex-direction: column; gap: .5rem; }

.dash-goal-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: .5rem .625rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  transition: border-color .12s, background .12s;
}
.dash-goal-item:hover { border-color: var(--primary, #4f46e5); background: var(--bg-alt); }

.dash-goal-item__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .375rem;
}
.dash-goal-item__name {
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
}
.dash-goal-item__pct {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}
.dash-goal-item__bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.dash-goal-item__fill {
  height: 100%;
  background: #4f46e5;
  border-radius: 3px;
  transition: width .3s ease;
}

/* Alert item inside widget */
.dash-alert-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.dash-alert-item:last-child { border-bottom: none; }

/* Import list inside widget */
.dash-import-list { display: flex; flex-direction: column; gap: .25rem; }

.dash-import-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background .1s, border-color .1s;
}
.dash-import-row:hover { background: var(--bg-alt); border-color: var(--border-soft); }

.dash-import-icon { font-size: 1.125rem; flex-shrink: 0; }

.dash-import-info { flex: 1; min-width: 0; }

.dash-import-name {
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-import-meta {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

/* ── Recurring Bills (Contas Fixas) ──────────────────────────────────────── */

/* Management page summary bar */
.rb-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}
.rb-summary__label {
  font-size: .75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
}
.rb-summary__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--danger);
  display: block;
  line-height: 1.2;
}
.rb-summary__count {
  font-size: .85rem;
  color: var(--text-secondary);
}

/* Table */
.rb-table { width: 100%; }
.rb-row--inactive td { opacity: .55; }
.rb-row--inactive .rb-name { text-decoration: line-through; }
.rb-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-right: .5rem;
  flex-shrink: 0;
}
.rb-dot--off { background: var(--text-muted); }
.rb-name { display: flex; align-items: center; }
.rb-day { color: var(--text-muted); font-size: .85rem; }
.rb-amount { font-weight: 600; color: var(--danger); }
.rb-notes-hint {
  margin-left: .4rem;
  font-size: .75rem;
  color: var(--text-muted);
  cursor: help;
}
.rb-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.rb-total-row td { padding-top: .75rem; border-top: 2px solid var(--border); }

/* Info box */
.rb-info-box {
  display: flex;
  gap: .75rem;
  background: var(--gold-lt);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-top: 1.25rem;
}
.rb-info-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }

/* Form */
.rb-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Dashboard widget */
.dash-widget--bills { margin-bottom: 1rem; }

.rb-dash-list {
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.rb-dash-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  padding: .3rem .1rem;
  border-bottom: 1px solid var(--border-soft);
}
.rb-dash-item:last-child { border-bottom: none; }
.rb-dash-day {
  font-size: .72rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: 4px;
  padding: .1rem .35rem;
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
}
.rb-dash-name { flex: 1; color: var(--text-primary); }
.rb-dash-amount { font-weight: 600; color: var(--danger); flex-shrink: 0; }
.rb-dash-more {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: .25rem;
}

/* ── Recurring bills page helpers ─────────────────────────────────────────── */
.page-header__left { display: flex; flex-direction: column; gap: .25rem; }
.page-header__right { display: flex; align-items: center; gap: .5rem; }
.page-subtitle { font-size: .8125rem; color: var(--text-muted); margin: 0; }

.form-check { display: flex; align-items: center; gap: .5rem; }
.form-check input[type=checkbox] { width: 1rem; height: 1rem; cursor: pointer; }
.form-check label { cursor: pointer; font-size: .875rem; }

.d-inline { display: inline; }
.mt-2 { margin-top: .5rem; }
.req { color: var(--danger); }

/* ── Household switcher (sidebar) ─────────────────────────────────────────── */
.household-switcher {
  margin: .75rem .75rem 0;
  padding: .75rem 1rem;
  background: var(--navy-mid);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}
.household-switcher--empty { padding: .5rem; }
.household-switcher__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.4);
  margin-bottom: .2rem;
}
.household-switcher__name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-inverse);
  margin-bottom: .4rem;
}
.household-switcher__list {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-bottom: .4rem;
}
.household-switcher__option {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.06);
  border: none;
  border-radius: 5px;
  color: rgba(255,255,255,.7);
  font-size: .75rem;
  padding: .3rem .6rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.household-switcher__option:hover { background: rgba(255,255,255,.12); color: #fff; }
.household-switcher__manage {
  display: block;
  font-size: .68rem;
  color: var(--gold);
  text-decoration: none;
  margin-top: .25rem;
}
.household-switcher__manage:hover { text-decoration: underline; }

/* ── Household management page ────────────────────────────────────────────── */
.household-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}
.household-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.household-card--active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(47,111,94,.15);
}
.household-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.household-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.household-card__desc {
  font-size: .8125rem;
  color: var(--text-secondary);
  margin: 0;
}
.household-card__meta {
  display: flex;
  gap: 1rem;
  font-size: .75rem;
  color: var(--text-muted);
}
.household-card__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}

/* ── Danger button ─────────────────────────────────────────────────────────── */
.btn--danger {
  background: var(--danger);
  color: #fff;
  border: none;
}
.btn--danger:hover { background: #9b1c1c; color: #fff; }