/* =============================================================================
   SplitLedger — Design System
   ============================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --background:    oklch(97.5% 0.008 75);
  --surface:       oklch(99.8% 0.003 75);
  --surface-muted: oklch(94.5% 0.010 75);

  /* Text */
  --text:  oklch(16%   0.014 260);
  --muted: oklch(52%   0.018 260);

  /* Borders */
  --line:  oklch(88.5% 0.009 260);

  /* Brand: deep slate-indigo (business) */
  --business:      oklch(38%   0.155 255);
  --business-soft: oklch(93.5% 0.035 255);

  /* Personal: warm amber */
  --personal:      oklch(58%   0.165 65);
  --personal-soft: oklch(95%   0.040 65);

  /* Income / positive */
  --success:       oklch(46%   0.150 160);
  --success-soft:  oklch(94%   0.038 160);

  /* Danger / expense */
  --danger:        oklch(50%   0.160 25);
  --danger-soft:   oklch(95%   0.038 25);

  /* Warnings */
  --warning-bg:   oklch(95%   0.055 80);
  --warning-text: oklch(40%   0.120 65);

  /* Elevation */
  --shadow-xs: 0 1px 2px  oklch(16% 0 260 / 0.05);
  --shadow-sm: 0 2px 8px  oklch(16% 0 260 / 0.06);

  /* Shape */
  --radius-sm: 0.375rem;
  --radius:    0.5rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--background);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
}

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

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }

/* ---------- Typography utilities ---------- */
.text-xs   { font-size: 0.6875rem; }
.text-sm   { font-size: 0.8125rem; }
.text-base { font-size: 0.9375rem; }
.text-lg   { font-size: 1rem; }
.text-xl   { font-size: 1.125rem; }
.text-2xl  { font-size: 1.375rem; }
.text-3xl  { font-size: 1.75rem; }
.text-4xl  { font-size: 2rem; }

/* ---------- Layout: 3-column on large screens ---------- */
#app-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  #app-shell {
    display: grid;
    grid-template-columns: 220px 1fr 296px;
  }
}

/* Sidebar */
#sidebar {
  display: none;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 1.5rem 1rem;
}
@media (min-width: 1024px) {
  #sidebar { display: flex; flex-direction: column; }
}

/* Main content */
#main-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { #main-content { padding-bottom: 0; } }

/* Right panel */
#right-panel {
  display: none;
  border-left: 1px solid var(--line);
  background: var(--surface);
  padding: 1.5rem 1.25rem;
}
@media (min-width: 1024px) { #right-panel { display: block; } }

/* Mobile bottom nav */
#mobile-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 0.5rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
}
@media (min-width: 1024px) { #mobile-nav { display: none; } }

/* ---------- Header ---------- */
#page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: oklch(97.5% 0.008 75 / 0.92);
  background: color-mix(in oklch, var(--background) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0.75rem 1rem;
}
@media (min-width: 640px)  { #page-header { padding: 0.875rem 1.5rem; } }
@media (min-width: 1024px) { #page-header { padding: 0.875rem 2rem; } }

.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
@media (min-width: 640px) { .header-inner { align-items: center; } }

.header-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 11rem;
}
@media (min-width: 640px) { .header-title { font-size: 1.1875rem; max-width: none; } }

.header-sub {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ---------- Navigation ---------- */
.nav-desktop {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
}
.nav-btn:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.nav-btn.active {
  background: var(--business-soft);
  color: var(--business);
  font-weight: 600;
}

.nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.12s;
}
.nav-btn:hover .nav-icon,
.nav-btn.active .nav-icon { opacity: 1; }

.nav-mobile-btn {
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  padding: 0.25rem;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  overflow: hidden;
}
.nav-mobile-btn svg { width: 1.5rem; height: 1.5rem; opacity: 0.5; transition: opacity 0.15s; }
.nav-mobile-btn span { display: none; }
.nav-mobile-btn:hover { background: var(--surface-muted); color: var(--text); }
.nav-mobile-btn:hover svg { opacity: 0.8; }
.nav-mobile-btn.active {
  color: var(--business);
  background: var(--business-soft);
}
.nav-mobile-btn.active svg { opacity: 1; }

/* ---------- Content wrapper ---------- */
.content-wrap {
  padding: 1.25rem 1rem;
}
@media (min-width: 640px)  { .content-wrap { padding: 1.5rem; } }
@media (min-width: 1024px) { .content-wrap { padding: 2rem; } }

/* ---------- Stack spacing ---------- */
.stack-sm { display: flex; flex-direction: column; gap: 0.75rem; }
.stack-md { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .stack-md { gap: 1.25rem; } }
.stack-lg { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 640px) { .stack-lg { gap: 1.5rem; } }

/* ---------- Panels ---------- */
.panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
}
@media (min-width: 640px) { .panel { padding: 1.5rem; } }

.panel-title {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Reusable panel header row */
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.panel-header .panel-title { margin-bottom: 0; }

.panel-desc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Panel with a flush expense/table list at the bottom */
.panel-flush-list {
  overflow: hidden;
  padding-bottom: 0;
}
.panel-flush-list > .expense-list-wrap {
  margin: 0 -1.25rem;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
  .panel-flush-list > .expense-list-wrap { margin: 0 -1.5rem; }
}

/* ---------- Summary grids ---------- */
.summary-grid-2 { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .summary-grid-2 { grid-template-columns: 1fr 1fr; } }

.summary-grid-3 { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .summary-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.summary-grid-4 { display: grid; gap: 0.75rem; }
@media (min-width: 640px)  { .summary-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .summary-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.summary-grid-5 { display: grid; gap: 0.75rem; }
@media (min-width: 640px)  { .summary-grid-5 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .summary-grid-5 { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Summary cards ---------- */
.summary-card {
  min-width: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-top-width: 3px;
  border-top-color: var(--line);
  background: var(--surface);
  padding: 1rem;
  box-shadow: var(--shadow-xs);
}
@media (min-width: 640px) { .summary-card { padding: 1.125rem; } }

.summary-card.business { border-top-color: var(--business); }
.summary-card.personal { border-top-color: var(--personal); }
.summary-card.neutral  { border-top-color: var(--line); }

/* Badge is now a plain label, not a chip */
.summary-card-badge {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.5rem;
}
.summary-card-badge.business { color: var(--business); }
.summary-card-badge.personal { color: var(--personal); }
.summary-card-badge.neutral  { color: var(--muted); }

.summary-card-value {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .summary-card-value { font-size: 1.125rem; } }

.summary-card-detail {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  padding: 0 1rem;
  height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn:focus-visible { outline: 2px solid var(--business); outline-offset: 2px; }

.btn-primary {
  background: var(--business);
  color: oklch(99% 0.003 255);
}
.btn-primary:hover:not(:disabled) { background: oklch(42% 0.155 255); }

.btn-accent {
  background: var(--business);
  color: oklch(99% 0.003 255);
}
.btn-accent:hover:not(:disabled) { background: oklch(42% 0.155 255); }

.btn-outline {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-outline:hover:not(:disabled) { background: var(--surface-muted); }

.btn-ghost {
  background: none;
  color: var(--muted);
  border: 1px solid var(--line);
  font-weight: 500;
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-muted); color: var(--text); }

.btn-danger {
  background: var(--danger);
  color: oklch(99% 0.003 25);
}
.btn-danger:hover:not(:disabled) { background: oklch(45% 0.165 25); }

.btn-sm   { height: 2rem; padding: 0 0.625rem; font-size: 0.8125rem; }
.btn-lg   { height: 2.75rem; padding: 0 1.25rem; }
.btn-full { width: 100%; }

/* ---------- Form elements ---------- */
.form-group { display: flex; flex-direction: column; gap: 0.3rem; }

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 0.875rem;
  height: 2.75rem;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  color: var(--text);
  -webkit-appearance: none;
}

/* Prevent iOS Safari from auto-zooming on input focus (requires font-size >= 16px) */
@media (hover: none) and (pointer: coarse) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 1rem;
  }
}
.form-input:focus,
.form-select:focus {
  border-color: var(--business);
  box-shadow: 0 0 0 3px var(--business-soft);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-muted);
}

.form-textarea {
  height: auto;
  min-height: 5.5rem;
  padding: 0.625rem 0.875rem;
  resize: none;
  line-height: 1.5;
}
.form-textarea:focus {
  border-color: var(--business);
  box-shadow: 0 0 0 3px var(--business-soft);
}

/* ---------- Segmented control ---------- */
.segment-group {
  display: grid;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  padding: 0.1875rem;
  gap: 0.125rem;
}
.segment-group.cols-2 { grid-template-columns: 1fr 1fr; }
.segment-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.segment-group.cols-4 { grid-template-columns: repeat(4, 1fr); }

.segment-btn {
  height: 2.125rem;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: none;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.segment-btn:hover { color: var(--text); }
.segment-btn.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.segment-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Minimum 44px touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .segment-btn { height: 2.75rem; }
  .btn-sm { height: 2.5rem; padding: 0 0.875rem; }
}

/* ---------- Quick amount buttons ---------- */
.quick-amounts { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.quick-btn {
  height: 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-variant-numeric: tabular-nums;
}
.quick-btn:hover:not(:disabled) {
  background: var(--surface-muted);
  color: var(--text);
}
.quick-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* ---------- Alerts ---------- */
.alert {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.alert svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.alert-error   { background: var(--danger-soft);  color: var(--danger); }
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid oklch(86% 0.055 80);
}

/* ---------- Loading spinner ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.75s linear infinite; }

/* ---------- Expense list ---------- */
.expense-list-wrap {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.expense-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: var(--surface);
  padding: 3rem 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
}
.expense-empty svg { width: 2rem; height: 2rem; opacity: 0.3; }

.expense-date-group { border-bottom: 1px solid var(--line); }
.expense-date-group:last-child { border-bottom: none; }

.expense-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--surface-muted);
  padding: 0.3125rem 1rem;
}
@media (min-width: 640px) { .expense-date-header { padding: 0.3125rem 1.25rem; } }

.expense-date-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.expense-subtotal {
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.expense-subtotal.positive { color: var(--success); }
.expense-subtotal.negative { color: var(--danger); }

/* ---------- Expense row ---------- */
.expense-row {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  border-bottom: 1px solid var(--line);
  padding: 0.6875rem 1rem;
}
.expense-row:last-child { border-bottom: none; }
@media (min-width: 640px) { .expense-row { padding: 0.75rem 1.25rem; } }

/* Line 1: note (flex-1, truncates) + amount (flex-shrink-0) */
.expense-row-top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.expense-note {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  margin: 0;
}

.expense-amount {
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

/* Line 2: tags (flex-1) + delete (flex-shrink-0) */
.expense-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.expense-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 0.1875rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.tag-business { background: var(--business-soft); color: var(--business); }
.tag-personal { background: var(--personal-soft); color: var(--personal); }
.tag-income   { background: var(--success-soft);  color: var(--success); }
.tag-transfer { background: var(--business-soft); color: var(--business); }
.tag-expense  { background: var(--surface-muted); color: var(--muted); }
.tag-payment  { background: var(--surface-muted); color: var(--muted); }

/* Line 3: date (only when not grouped) */
.expense-meta { font-size: 0.625rem; color: var(--muted); margin: 0; }

.expense-amount.income   { color: var(--success); }
.expense-amount.transfer { color: var(--muted); font-weight: 500; }

.expense-delete-wrap { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }

.delete-trigger {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--muted);
  opacity: 0.3;
  transition: background 0.12s, color 0.12s, opacity 0.12s;
  flex-shrink: 0;
}
.delete-trigger:hover { background: var(--danger-soft); color: var(--danger); opacity: 1; }
.delete-trigger:disabled { opacity: 0.15; cursor: not-allowed; }
.delete-trigger:disabled:hover { background: none; color: var(--muted); }
.delete-trigger svg { width: 0.9375rem; height: 0.9375rem; }

/* On touch devices: expand to full 44px tap target */
@media (hover: none) and (pointer: coarse) {
  .delete-trigger { width: 2.75rem; height: 2.75rem; opacity: 0.45; }
}

/* ---------- Dashboard hero ---------- */
.hero-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .hero-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }
}

.hero-body { flex: 1; min-width: 0; }

.hero-snapshot-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.hero-net {
  font-size: clamp(1.875rem, 5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.hero-desc {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Stat strip below the hero number */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: 1.375rem;
  padding-top: 1.125rem;
}

.hero-stat { padding-right: 1rem; }
.hero-stat + .hero-stat {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.hero-stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.hero-stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-stat-value.success { color: var(--success); }
.hero-stat-value.danger  { color: var(--danger); }

@media (max-width: 639px) {
  .hero-stats { margin-top: 1rem; padding-top: 0.875rem; }
  .hero-stat { padding-right: 0.375rem; }
  .hero-stat + .hero-stat { padding-left: 0.375rem; }
  .hero-stat-label { letter-spacing: 0.04em; }
  .hero-stat-value { font-size: 0.8125rem; }
}

/* Action buttons column */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 479px) {
  .hero-actions .btn { width: 100%; }
}
@media (min-width: 480px) and (max-width: 719px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 720px) {
  .hero-actions { min-width: 11rem; }
}

/* Legacy class stubs — kept so JS references don't error */
.hero-grid {}
.dashboard-hero {}
.mini-metrics { display: none; }
.mini-metric {}
.mini-metric.filled {}
.mini-metric.ghost {}
.mini-metric-label {}
.mini-metric-value {}
.mini-metric-value.success {}
.mini-metric-value.danger {}

/* ---------- Home action cards ---------- */
.home-actions-grid {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) { .home-actions-grid { grid-template-columns: 1fr 1fr; } }

.home-action-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.125rem 1.25rem;
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: background 0.12s, box-shadow 0.12s;
  cursor: pointer;
  width: 100%;
}
.home-action-card:hover {
  background: var(--surface-muted);
  box-shadow: var(--shadow-sm);
}
.home-action-card:focus-visible { outline: 2px solid var(--business); outline-offset: 2px; }

.home-action-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.home-action-label { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }

.home-action-value {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.home-action-value.business { color: var(--business); }
.home-action-value.personal { color: var(--personal); }

.home-action-detail { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--muted); }

/* ---------- Transaction filter bar ---------- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 640px) { .filter-bar { flex-direction: row; align-items: center; } }

.filter-select {
  height: 2.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.12s;
}
.filter-select:focus { border-color: var(--business); }

/* ---------- Transaction entry closed state ---------- */
.transaction-entry-closed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.125rem;
  box-shadow: var(--shadow-xs);
}
@media (max-width: 639px) {
  .transaction-entry-closed .btn { width: 100%; }
}
@media (min-width: 640px) {
  .transaction-entry-closed {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
  }
}

/* ---------- Right panel summary ---------- */
.right-summary { display: flex; flex-direction: column; gap: 1.25rem; }

.right-summary-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.right-summary-sub { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted); }

.right-summary-stats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.stat-value {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-value.positive { color: var(--success); }
.stat-value.negative { color: var(--danger); }

/* ---------- Login screen ---------- */
#login-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
}

.login-brand {
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 3.5rem;
  background: var(--business);
  color: oklch(98% 0.006 255);
  flex: 0 0 42%;
}
@media (min-width: 768px) { .login-brand { display: flex; } }

.login-brand .logo-wrap { margin-bottom: 3rem; }

.login-tagline {
  font-size: 1.625rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: oklch(88% 0.04 255);
  margin: 0;
  max-width: 18rem;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  flex: 1;
  background: var(--background);
}

.login-card {
  width: 100%;
  max-width: 24rem;
}

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

.login-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.login-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }

.login-notice { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); }

/* ---------- Reports view ---------- */
.reports-date-bar { display: grid; gap: 0.5rem; }
@media (min-width: 640px) {
  .reports-date-bar { grid-template-columns: 9rem 9rem auto; align-items: end; }
}

.reports-breakdown-grid { display: grid; gap: 0.75rem; }
@media (min-width: 1024px) { .reports-breakdown-grid { grid-template-columns: 1fr 1fr; } }

.breakdown-bar-row { margin-bottom: 1.125rem; }
.breakdown-bar-row:last-child { margin-bottom: 0; }

.breakdown-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.breakdown-bar-label { font-weight: 500; }
.breakdown-bar-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.breakdown-bar-value.success { color: var(--success); }
.breakdown-bar-value.danger  { color: var(--danger); }
.breakdown-bar-value.neutral { color: var(--business); }

.progress-track {
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-fill.success { background: var(--success); }
.progress-fill.danger  { background: var(--danger); }
.progress-fill.neutral { background: var(--business); }

/* ---------- Daily trend table ---------- */
.trend-table-wrap { overflow-x: auto; }

.trend-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.trend-table thead tr {
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.trend-table th {
  padding: 0.5rem 0.75rem;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.trend-table th:first-child { padding-left: 0; }
.trend-table th.text-right  { text-align: right; }

.trend-table tbody tr { border-bottom: 1px solid var(--line); }
.trend-table tbody tr:last-child { border-bottom: none; }

.trend-table td {
  padding: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.trend-table td:first-child { padding-left: 0; font-weight: 500; }
.trend-table td.text-right  { text-align: right; }

.trend-bar-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-width: 10rem;
}

.trend-bar-track {
  width: 5rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.trend-bar-fill { height: 100%; border-radius: 9999px; }
.trend-bar-fill.positive { background: var(--business); }
.trend-bar-fill.negative { background: var(--danger); }

.trend-bar-amount { min-width: 5rem; font-weight: 700; text-align: right; }

/* ---------- Top expenses list ---------- */
.top-expense-row {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.top-expense-row:first-child { padding-top: 0; }
.top-expense-row:last-child  { border-bottom: none; padding-bottom: 0; }

/* Line 1: note (truncates) + amount (right-aligned) on same baseline */
.top-expense-top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.top-expense-note {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
  margin: 0;
}

.top-expense-amount {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.top-expense-amount.income   { color: var(--success); }
.top-expense-amount.transfer { color: var(--muted); font-weight: 500; }

/* Line 2: tags */
.top-expense-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

/* Line 3: date */
.top-expense-date { font-size: 0.625rem; color: var(--muted); margin: 0; }

/* ---------- Monthly close panel ---------- */
.close-panel-header { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) {
  .close-panel-header { grid-template-columns: minmax(0,1fr) auto; align-items: start; }
}

.close-balance-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .close-balance-grid { grid-template-columns: 1fr 1fr; } }

.close-balance-box {
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  padding: 1rem;
  border: 1px solid var(--line);
}

.close-balance-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.close-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.close-balance-row:last-child { margin-bottom: 0; }
.close-balance-row-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.close-metrics-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .close-metrics-grid { grid-template-columns: repeat(3, 1fr); } }

.close-metric-box {
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
}

.close-metric-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.close-metric-value {
  margin-top: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}

.close-meta { margin-top: 0.625rem; font-size: 0.6875rem; color: var(--muted); }

/* ---------- Logo ---------- */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
}
.logo-img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  display: block;
}
/* Sidebar has more room — show slightly larger */
#sidebar .logo-img { width: 2.25rem; height: 2.25rem; }
/* Login screen — larger centered mark */
.login-brand .logo-img { width: 4rem; height: 4rem; filter: brightness(10); }

.sidebar-logo-wrap { margin-bottom: 2rem; }
.alerts-container  { margin-bottom: 1rem; }
.refresh-icon      { width: 1rem; height: 1rem; }

/* ---------- Language toggle ---------- */
.lang-btn {
  display: grid;
  place-items: center;
  height: 2.25rem;
  min-width: 3rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.lang-btn:hover { background: var(--surface-muted); }

/* ---------- Boot / loading screen ---------- */
#boot-screen {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 1rem;
  background: var(--background);
}

.boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.boot-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.boot-status svg { width: 1rem; height: 1rem; }

/* ---------- Hint box ---------- */
.hint-box {
  border-radius: var(--radius-sm);
  background: var(--business-soft);
  border: 1px solid oklch(88% 0.03 255);
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  color: oklch(35% 0.09 255);
  line-height: 1.5;
}

/* ---------- Refresh button ---------- */
.refresh-btn {
  display: none;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.refresh-btn:hover { background: var(--surface-muted); color: var(--text); }
.refresh-btn:disabled { cursor: not-allowed; opacity: 0.5; }
@media (min-width: 1024px) { .refresh-btn { display: flex; } }

/* ---------- Sign-out button ---------- */
.signout-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.signout-btn:hover { background: var(--surface-muted); }
@media (min-width: 640px) {
  .signout-btn { width: auto; padding: 0 0.75rem; }
  .signout-btn .signout-icon { display: none; }
  .signout-btn .signout-text { display: inline; }
}

.signout-icon svg { width: 1rem; height: 1rem; }
.signout-text { display: none; }

/* ---------- Form layout helpers ---------- */
.form-row-2 {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

/* Read-only display field that matches form-input height */
.form-field-display {
  display: flex;
  align-items: center;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Reports header grid: description + date bar */
.reports-header-grid {
  display: grid;
  gap: 1rem;
}

/* Filter panel section header */
.filter-header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

/* Trend table: colored cells */
.col-success { color: var(--success); }
.col-danger  { color: var(--danger); }

/* ---------- Form validation ---------- */
.input-error {
  border-color: var(--danger) !important;
}
.input-error:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important;
}
.field-error-msg {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--danger);
}

/* ---------- Utility ---------- */
.hidden { display: none !important; }

/* ---------- Mobile: compact form ---------- */
@media (max-width: 639px) {
  /* Tighten the form's own stack gap */
  form.stack-sm { gap: 0.5rem; }

  /* Smaller label + tighter label-to-input gap */
  .form-group { gap: 0.1875rem; }
  .form-label { font-size: 0.75rem; }

  /* Shorter text inputs — 36px is still comfortable to tap */
  .form-input,
  .form-select,
  .form-field-display { height: 2.25rem; padding: 0 0.75rem; }

  /* Textarea: notes are short, 3 lines is enough */
  .form-textarea { min-height: 3.25rem; padding: 0.5rem 0.75rem; }

  /* Compact hint box */
  .hint-box { padding: 0.5rem 0.625rem; font-size: 0.75rem; }

  /* Smaller quick-amount chips */
  .quick-btn { height: 1.75rem; font-size: 0.6875rem; padding: 0 0.5rem; }

  /* Tighter segment control for in-form use */
  .segment-btn { height: 2rem; font-size: 0.75rem; }
}