/* ═══════════════════════════════════════════════════════════════
   BOLSILLO — STYLES.CSS
   Architecture: Variables → Reset → Layout → Components → Utils → Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Colors */
  --clr-bg:       #0f0f13;
  --clr-bg2:      #18181f;
  --clr-bg3:      #1f1f28;
  --clr-card:     #1a1a24;
  --clr-border:   rgba(255,255,255,.08);
  --clr-accent:   #7c6bff;
  --clr-accent2:  #5eead4;
  --clr-green:    #4ade80;
  --clr-red:      #f87171;
  --clr-amber:    #fbbf24;
  --clr-text:     #f0f0f5;
  --clr-muted:    #888899;

  /* Gradients */
  --grad-accent: linear-gradient(135deg,var(--clr-accent),var(--clr-accent2));
  --grad-cc:     linear-gradient(90deg,var(--clr-amber),var(--clr-red));

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* Spacing */
  --gap-xs: .25rem;
  --gap-sm: .5rem;
  --gap:    1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2rem;

  /* Typography */
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Transitions */
  --transition: 150ms ease;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0,0,0,.25);
  --shadow-nav:  0 -2px 16px rgba(0,0,0,.35);
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
/* Critical: ensure [hidden] always overrides display:flex/grid rules */
[hidden] { display: none !important; }
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  height: 100%;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button { cursor: pointer; }

a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Focus-visible ring for keyboard nav */
:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* ── 3. SCROLLBARS ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* ── 4. LOADING ANIMATION ─────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.spin {
  width: 34px; height: 34px;
  border: 3px solid var(--clr-border);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ── 5. SPLASH ────────────────────────────────────────────── */
#splash {
  position: fixed; inset: 0;
  background: var(--clr-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  z-index: 999;
}
.splash-logo { font-size: 3rem; }

/* ── 6. AUTH SCREEN ───────────────────────────────────────── */
#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  background: var(--clr-bg);
}

.auth-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 440px;
  text-align: center;
  box-shadow: var(--shadow-card);
  animation: fadeIn .3s ease;
}

.auth-header { margin-bottom: var(--gap-lg); }
.auth-logo { font-size: 2.75rem; margin-bottom: .5rem; }
.auth-title {
  font-size: 1.9rem;
  font-weight: 800;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-tagline { color: var(--clr-muted); font-size: .9rem; margin-top: .25rem; }

/* Google button */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: #fff;
  color: #333;
  border: none;
  border-radius: var(--r-md);
  padding: .75rem 1.5rem;
  width: 100%;
  font-size: .95rem;
  font-weight: 500;
  min-height: 48px;
  transition: box-shadow var(--transition);
  margin-bottom: .75rem;
}
.btn-google:hover { box-shadow: 0 4px 18px rgba(124,107,255,.4); }
.google-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .75rem 0;
  color: var(--clr-muted);
  font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--clr-border); }

/* Tabs */
.auth-tabs {
  display: flex;
  background: var(--clr-bg3);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 4px;
  margin-bottom: var(--gap);
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--clr-muted);
  padding: .45rem;
  border-radius: var(--r-sm);
  font-size: .88rem;
  font-weight: 500;
  transition: all var(--transition);
  min-height: 44px;
}
.auth-tab.active { background: var(--clr-accent); color: #fff; }

/* Form fields */
.field-group { text-align: left; margin-bottom: .65rem; }
.field-group label {
  display: block;
  font-size: .78rem;
  color: var(--clr-muted);
  margin-bottom: .3rem;
  font-weight: 500;
}
.field-group input {
  width: 100%;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  border-radius: var(--r-md);
  padding: .65rem .9rem;
  font-size: .95rem;
  transition: border-color var(--transition);
  min-height: 48px;
}
.field-group input:focus { outline: none; border-color: var(--clr-accent); }

.btn-submit {
  width: 100%;
  background: var(--clr-accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: .75rem;
  font-size: .95rem;
  font-weight: 600;
  transition: opacity var(--transition);
  min-height: 48px;
  margin-top: .5rem;
}
.btn-submit:hover { opacity: .88; }
.btn-submit:disabled { opacity: .45; cursor: not-allowed; }

.auth-feedback {
  font-size: .82rem;
  margin-top: .5rem;
  min-height: 1.2rem;
  color: var(--clr-red);
}
.auth-feedback.ok { color: var(--clr-green); }

/* ── 7. APP SHELL ─────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.app-header {
  background: var(--clr-bg2);
  border-bottom: 1px solid var(--clr-border);
  padding: 0 var(--gap-xl);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-brand { display: flex; align-items: center; gap: .6rem; }
.brand-logo { font-size: 1.3rem; }
.brand-name {
  font-size: 1.1rem;
  font-weight: 800;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.saving-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clr-accent2);
  opacity: 0;
  transition: opacity .3s;
}
.saving-dot.active { opacity: 1; animation: pulse 1s infinite; }

.header-user { display: flex; align-items: center; gap: .6rem; }
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-name {
  font-size: .88rem;
  color: var(--clr-muted);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-signout {
  background: none;
  border: none;
  color: var(--clr-muted);
  font-size: .82rem;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: all var(--transition);
  min-height: 36px;
}
.btn-signout:hover { color: var(--clr-red); background: rgba(248,113,113,.1); }

/* App body */
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── 8. SIDEBAR ───────────────────────────────────────────── */
.sidebar {
  width: 220px;
  background: var(--clr-bg2);
  border-right: 1px solid var(--clr-border);
  padding: var(--gap-lg) 0;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  flex-shrink: 0;
}

.nav-group { padding: 0 .75rem var(--gap); }
.nav-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-muted);
  padding: .4rem .5rem .2rem;
  display: block;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--clr-muted);
  padding: .55rem .65rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  text-align: left;
  transition: all var(--transition);
  min-height: 44px;
}
.nav-btn:hover { background: var(--clr-bg3); color: var(--clr-text); }
.nav-btn.active { background: rgba(124,107,255,.15); color: var(--clr-accent); }
.nav-btn[aria-current="page"] { background: rgba(124,107,255,.15); color: var(--clr-accent); }

/* ── 9. MAIN CONTENT ──────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: var(--gap-xl);
  overflow-y: auto;
  min-width: 0; /* prevent flex overflow */
  animation: fadeIn .2s ease;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  height: 60vh;
  color: var(--clr-muted);
}

/* ── 10. CARD & SECTION-BOX ───────────────────────────────── */
.card, .section-box {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap) var(--gap-lg);
  margin-bottom: var(--gap);
}

.section-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--clr-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .65rem;
}

/* ── 11. SUMMARY CARDS ────────────────────────────────────── */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
}

.summary-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap) var(--gap-lg);
}

.summary-label {
  font-size: .72rem;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .35rem;
}
.summary-value { font-size: 1.35rem; font-weight: 700; }
.summary-value.income  { color: var(--clr-green); }
.summary-value.expense { color: var(--clr-red); }
.summary-value.balance { color: var(--clr-accent); }

/* ── 12. MONTHS GRID ──────────────────────────────────────── */
.months-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap-xl);
}

.month-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
  position: relative;
}
.month-card:hover:not(.locked) { border-color: var(--clr-accent); transform: translateY(-2px); }
.month-card.locked { opacity: .4; cursor: default; }
.month-card.month-closed { border-color: rgba(124,107,255,.3); }

.month-name { font-size: .95rem; font-weight: 600; margin-bottom: .2rem; }
.month-balance { font-size: 1.05rem; font-weight: 700; color: var(--clr-green); }
.month-balance.neg { color: var(--clr-red); }
.lock-icon { position: absolute; top: 10px; right: 10px; font-size: .85rem; color: var(--clr-muted); }

.unlock-btn, .lock-month-btn {
  display: block;
  width: 100%;
  margin-top: .6rem;
  border: none;
  border-radius: var(--r-sm);
  padding: .35rem;
  font-size: .78rem;
  transition: opacity var(--transition);
  min-height: 36px;
}
.unlock-btn { background: var(--clr-accent); color: #fff; }
.lock-month-btn { background: rgba(248,113,113,.1); color: var(--clr-red); border: 1px solid rgba(248,113,113,.2); }

/* ── 13. MONTH DETAIL ─────────────────────────────────────── */
.month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: var(--gap-lg);
}
.month-title { font-size: 1.5rem; font-weight: 700; }

.back-btn {
  background: var(--clr-bg3);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  padding: .45rem .9rem;
  border-radius: var(--r-sm);
  font-size: .88rem;
  min-height: 44px;
  transition: background var(--transition);
}
.back-btn:hover { background: var(--clr-bg); }

.payment-toggle {
  display: flex;
  background: var(--clr-bg3);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
}
.toggle-btn {
  background: none;
  border: none;
  color: var(--clr-muted);
  padding: .4rem 1rem;
  border-radius: var(--r-sm);
  font-size: .88rem;
  transition: all var(--transition);
  min-height: 36px;
}
.toggle-btn.active { background: var(--clr-accent); color: #fff; }

.periods-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.period-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.period-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap);
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--clr-border);
}
.period-title { font-size: 1rem; font-weight: 600; }

/* Category group headers */
.cat-group-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .45rem 0 .3rem;
  margin-top: .5rem;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: .2rem;
}
.cat-group-header.ingr { color: var(--clr-green); }
.cat-group-header.egr  { color: var(--clr-red); }
.cat-group-header.aho  { color: var(--clr-accent2); }
.cat-group-total { margin-left: auto; font-size: .8rem; font-weight: 700; }

/* ── 14. TABLES ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.finance-table, .dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
  min-width: 320px;
}
.finance-table th, .dash-table th {
  background: var(--clr-bg3);
  color: var(--clr-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .45rem .65rem;
  text-align: left;
  white-space: nowrap;
}
.finance-table td, .dash-table td {
  padding: .4rem .65rem;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: middle;
}
.finance-table tr:last-child td,
.dash-table tr:last-child td { border-bottom: none; }
.finance-table tr:hover td { background: rgba(255,255,255,.02); }
.table-total { font-weight: 700; color: var(--clr-accent2); }

/* Inline inputs */
.cat-select {
  background: transparent;
  border: none;
  color: var(--clr-text);
  font-size: .87rem;
  width: 100%;
  outline: none;
  cursor: pointer;
  padding: 2px 4px;
  min-height: 32px;
}
.cat-select:focus { background: rgba(124,107,255,.1); border-radius: 4px; }
.cat-select option { background: var(--clr-card); color: var(--clr-text); }

.num-input {
  background: transparent;
  border: none;
  color: var(--clr-text);
  font-size: .87rem;
  text-align: right;
  width: 100px;
  outline: none;
  min-height: 32px;
  padding: 2px 4px;
}
.num-input:focus { background: rgba(124,107,255,.1); border-radius: 4px; }
.num-input::-webkit-inner-spin-button { opacity: .3; }

/* ── 15. BUTTONS ──────────────────────────────────────────── */
.btn-primary {
  background: var(--clr-accent);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: .55rem 1.4rem;
  font-size: .9rem;
  font-weight: 600;
  transition: opacity var(--transition);
  min-height: 44px;
}
.btn-primary:hover { opacity: .88; }

.add-row-btn {
  background: transparent;
  border: 1px dashed var(--clr-border);
  color: var(--clr-accent);
  border-radius: var(--r-sm);
  padding: .28rem .7rem;
  font-size: .8rem;
  transition: all var(--transition);
  min-height: 36px;
}
.add-row-btn:hover { border-color: var(--clr-accent); background: rgba(124,107,255,.1); }

.del-btn {
  background: none;
  border: none;
  color: var(--clr-muted);
  font-size: .9rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all var(--transition);
  min-height: 32px;
  min-width: 32px;
}
.del-btn:hover { color: var(--clr-red); background: rgba(248,113,113,.1); }

/* ── 16. STATUS BUTTONS & BADGES ─────────────────────────── */
.status-group { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }

.status-btn {
  background: none;
  border: 1px solid var(--clr-border);
  color: var(--clr-muted);
  border-radius: var(--r-sm);
  padding: 3px 9px;
  font-size: .73rem;
  transition: all var(--transition);
  min-height: 32px;
}
.status-btn:hover { border-color: var(--clr-muted); }
.status-btn.s-paid    { border-color:var(--clr-green);  color:var(--clr-green);  background:rgba(74,222,128,.1); }
.status-btn.s-skipped { border-color:var(--clr-red);    color:var(--clr-red);    background:rgba(248,113,113,.1); }
.status-btn.s-pending { border-color:var(--clr-amber);  color:var(--clr-amber);  background:rgba(251,191,36,.1); }

.badge-paid    { background:rgba(74,222,128,.15);  color:var(--clr-green);  border-radius:var(--r-sm); padding:2px 8px; font-size:.73rem; white-space:nowrap; }
.badge-skip    { background:rgba(248,113,113,.15); color:var(--clr-red);    border-radius:var(--r-sm); padding:2px 8px; font-size:.73rem; white-space:nowrap; }
.badge-pend    { background:rgba(251,191,36,.15);  color:var(--clr-amber);  border-radius:var(--r-sm); padding:2px 8px; font-size:.73rem; white-space:nowrap; }
.badge-partial { background:rgba(94,234,212,.15);  color:var(--clr-accent2);border-radius:var(--r-sm); padding:2px 8px; font-size:.73rem; white-space:nowrap; }
.badge-advance { background:rgba(124,107,255,.15); color:var(--clr-accent); border-radius:var(--r-sm); padding:2px 8px; font-size:.73rem; white-space:nowrap; }
.badge-cc      { background:rgba(251,191,36,.15);  color:var(--clr-amber);  border-radius:var(--r-sm); padding:2px 8px; font-size:.73rem; white-space:nowrap; }
.badge-fixed   { background:rgba(124,107,255,.15); color:var(--clr-accent); border-radius:var(--r-sm); padding:2px 8px; font-size:.73rem; white-space:nowrap; }

.debt-type-badge { display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:100px; margin-left:8px; vertical-align:middle; }

/* ── 17. PARTIAL PAYMENT ──────────────────────────────────── */
.partial-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .4rem;
  padding: .4rem 0;
}
.partial-input {
  background: var(--clr-bg3);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: .85rem;
  width: 150px;
  outline: none;
  min-height: 36px;
}
.partial-input:focus { border-color: var(--clr-accent); }
.partial-apply {
  background: var(--clr-accent);
  border: none;
  color: #fff;
  border-radius: var(--r-sm);
  padding: 5px 14px;
  font-size: .85rem;
  font-weight: 600;
  transition: opacity var(--transition);
  min-height: 36px;
}
.partial-apply:hover { opacity: .85; }

/* ── 18. DEBTS ────────────────────────────────────────────── */
.debt-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap);
  margin-bottom: var(--gap);
  transition: border-color var(--transition);
}
.debt-card.cc-card { border-color: rgba(251,191,36,.28); }
.debt-card:hover { border-color: var(--clr-border); }

.debt-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--gap); }
.debt-name { font-size:1rem; font-weight:600; }

.debt-progress { background:var(--clr-bg3); border-radius:100px; height:7px; margin:.4rem 0; }
.debt-bar { background:var(--grad-accent); border-radius:100px; height:100%; transition:width .5s; }

.debt-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: .6rem;
  margin-top: .65rem;
}
.debt-stat { text-align: center; }
.debt-stat-label { font-size: .68rem; color: var(--clr-muted); text-transform: uppercase; }
.debt-stat-value { font-size: .92rem; font-weight: 600; }

.debt-history { margin-top: .65rem; }
.debt-payment-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: .85rem;
  flex-wrap: wrap;
}
.debt-payment-row:last-child { border-bottom: none; }

.cc-purchase-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

/* ── 19. FORMS ────────────────────────────────────────────── */
.new-debt-form {
  background: var(--clr-bg3);
  border-radius: var(--r-lg);
  padding: var(--gap);
  margin-bottom: var(--gap);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .65rem;
}
.form-group label { font-size: .78rem; color: var(--clr-muted); display: block; margin-bottom: .25rem; font-weight: 500; }
.form-group input, .form-group select {
  width: 100%;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  border-radius: var(--r-sm);
  padding: .5rem .7rem;
  font-size: .88rem;
  outline: none;
  min-height: 44px;
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group select:focus { border-color: var(--clr-accent); }

.debt-type-tabs {
  display: flex;
  background: var(--clr-bg);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
  margin-bottom: var(--gap);
}
.dtt-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--clr-muted);
  padding: .45rem;
  border-radius: var(--r-sm);
  font-size: .86rem;
  transition: all var(--transition);
  min-height: 40px;
}
.dtt-btn.active { background: var(--clr-accent); color: #fff; }

/* ── 20. DASHBOARD ────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.chart-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap);
}
.chart-title { font-size: .82rem; font-weight: 600; color: var(--clr-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--gap); }

/* KPI cards */
.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .65rem;
  margin-bottom: var(--gap-lg);
}
.kpi-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap) var(--gap-lg);
  position: relative;
  overflow: hidden;
}
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.kpi-card.ingr::before { background: var(--clr-green); }
.kpi-card.egr::before  { background: var(--clr-red); }
.kpi-card.aho::before  { background: var(--clr-accent2); }
.kpi-card.debt::before { background: var(--clr-amber); }
.kpi-card.bal::before  { background: var(--clr-accent); }
.kpi-label { font-size: .68rem; color: var(--clr-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.kpi-value { font-size: 1.2rem; font-weight: 700; margin-bottom: .2rem; }
.kpi-trend { font-size: .72rem; display: flex; align-items: center; gap: 4px; }
.trend-up { color: var(--clr-green); }
.trend-dn { color: var(--clr-red); }
.trend-eq { color: var(--clr-muted); }

/* Filter pills */
.dash-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--gap-lg); align-items: center; }
.dash-pill {
  background: var(--clr-bg3);
  border: 1px solid var(--clr-border);
  color: var(--clr-muted);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: .8rem;
  transition: all var(--transition);
  min-height: 36px;
}
.dash-pill:hover { border-color: var(--clr-accent); color: var(--clr-text); }
.dash-pill.active { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; }
.dash-pill.locked { opacity: .3; cursor: default; }

/* Mini bar */
.dash-bar-cell { display: flex; align-items: center; gap: .5rem; }
.dash-mini-bar { height: 6px; border-radius: 3px; min-width: 2px; }

/* ── 21. SETTINGS ─────────────────────────────────────────── */
.settings-section {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--gap-lg);
  margin-bottom: var(--gap);
}
.settings-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--gap); padding-bottom: .65rem; border-bottom: 1px solid var(--clr-border); }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; flex-wrap: wrap; gap: .4rem; }
.setting-label { font-size: .9rem; }
.setting-input {
  background: var(--clr-bg3);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  border-radius: var(--r-sm);
  padding: .4rem .7rem;
  font-size: .9rem;
  outline: none;
  width: 200px;
  min-height: 40px;
}
.setting-input:focus { border-color: var(--clr-accent); }
.tag { background: rgba(94,234,212,.15); color: var(--clr-accent2); border-radius: var(--r-sm); padding: 2px 10px; font-size: .78rem; }

.categories-box { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.cat-chip {
  background: var(--clr-bg3);
  border: 1px solid var(--clr-border);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cat-chip button { background: none; border: none; color: var(--clr-muted); cursor: pointer; font-size: .73rem; line-height: 1; min-width: 20px; min-height: 20px; }
.cat-add-input {
  background: var(--clr-bg3);
  border: 1px dashed var(--clr-border);
  color: var(--clr-text);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: .8rem;
  outline: none;
  width: 140px;
  min-height: 30px;
}

/* ── 22. BOTTOM NAV (mobile) ─────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--clr-bg2);
  border-top: 1px solid var(--clr-border);
  z-index: 200;
  height: 56px;
  box-shadow: var(--shadow-nav);
}

.bn-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--clr-muted);
  font-size: .6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 5px 0;
  transition: color var(--transition);
  min-height: 56px;
}
.bn-btn.active { color: var(--clr-accent); }
.bn-btn.active .bn-icon-wrap { background: rgba(124,107,255,.15); border-radius: var(--r-sm); }
.bn-icon-wrap { padding: 2px 10px; border-radius: var(--r-sm); transition: background var(--transition); }
.bn-icon-wrap span { font-size: 1.05rem; display: block; }


/* ── DASHBOARD FILTER BAR ─────────────────────────────────── */
.dash-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: var(--gap-lg);
  padding: .75rem 1rem;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
}
.dash-filter-group { display: flex; flex-direction: column; gap: .25rem; }
.dash-filter-label { font-size: .72rem; color: var(--clr-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.dash-filter-select {
  background: var(--clr-bg3);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  border-radius: var(--r-md);
  padding: .5rem .8rem;
  font-size: .9rem;
  outline: none;
  min-height: 44px;
  min-width: 160px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.dash-filter-select:focus { border-color: var(--clr-accent); }
.dash-filter-select option:disabled { color: var(--clr-muted); }
.btn-dash-goto {
  background: rgba(124,107,255,.15);
  border: 1px solid rgba(124,107,255,.3);
  color: var(--clr-accent);
  border-radius: var(--r-sm);
  padding: .5rem 1rem;
  font-size: .85rem;
  min-height: 44px;
  transition: all var(--transition);
  white-space: nowrap;
  align-self: flex-end;
}
.btn-dash-goto:hover { background: rgba(124,107,255,.25); }

/* ── FIX: chart-card and tables must scroll on mobile ──────── */
.chart-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 23. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 768px) {

  /* Layout */
  .sidebar { display: none; }
  .bottom-nav { display: flex !important; }
  .app-header { padding: 0 .75rem; height: 52px; }
  .brand-name { font-size: 1rem; }
  .user-name { display: none; }
  .saving-dot { display: none; }

  /* Content — clear bottom nav */
  .page-content { padding: .75rem .75rem 68px; }

  /* Summary cards — fluid 2-col */
  .summary-cards {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .5rem;
  }
  .summary-card { padding: .7rem; }
  .summary-label { font-size: .65rem; }
  .summary-value { font-size: 1.05rem; }

  /* Month header */
  .month-header { gap: .4rem; }
  .month-title { font-size: 1.1rem; }
  .payment-toggle .toggle-btn { padding: .3rem .55rem; font-size: .78rem; }
  .back-btn { padding: .35rem .7rem; font-size: .8rem; }

  /* Months grid */
  .months-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
  .month-card { padding: .75rem; }

  /* Tables — force horizontal scroll, never overflow */
  .section-box, .chart-card { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .75rem .6rem; }
  .finance-table th, .finance-table td { padding: .35rem .45rem; font-size: .78rem; }
  .num-input { width: 72px; font-size: .78rem; }
  .cat-select { font-size: .78rem; }
  /* Filter bar stacks vertically on mobile */
  .dash-filter-bar { flex-direction: column; align-items: stretch; gap: .5rem; padding: .65rem; }
  .dash-filter-select { width: 100%; min-width: unset; }
  .btn-dash-goto { text-align: center; }
  /* Debt rows wrap better */
  .debt-payment-row { font-size: .78rem; gap: .3rem; }
  /* Partial wrap */
  .partial-input { width: 110px; }

  /* Dashboard */
  .dash-grid { grid-template-columns: 1fr; }
  .kpi-cards { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .kpi-card { padding: .7rem; }
  .kpi-value { font-size: 1rem; }
  .kpi-label { font-size: .62rem; }

  /* Debts */
  .debt-card { padding: .75rem; }
  .debt-info { grid-template-columns: repeat(2, 1fr); }
  .status-group { flex-wrap: wrap; gap: 3px; }
  .status-btn { font-size: .7rem; padding: 2px 7px; }
  .partial-wrap { flex-wrap: wrap; }
  .partial-input { width: 130px; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr; }

  /* Always show unlock/lock */
  .unlock-btn, .lock-month-btn { opacity: 1 !important; }

  /* Auth */
  .auth-card { padding: 1.5rem 1rem; }

  /* Periods */
  .periods-container { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .kpi-cards { grid-template-columns: 1fr 1fr; }
  .months-grid { grid-template-columns: 1fr 1fr; }
}