/* ==========================================================================
   Vault Ledger — App-level extensions to the design system.
   Depends on: design-tokens.css + design-ui.css
   Contains: login screen, modal, onboarding, loading/empty states,
             and backward-compat classes for pages not yet ported.
   ========================================================================== */

/* ---------- Hidden attribute fix ---------- */
/* Explicit display rules below (.login-screen, .app) override the UA's
   [hidden] { display: none } — force it back so hidden= works as expected. */
[hidden] { display: none !important; }

/* ---------- Compat aliases ---------- */
/* Map old var names (used in not-yet-ported pages) to new design tokens. */
:root {
  --bg2: var(--surface-2);
  --card: var(--surface);
  --card-hover: var(--surface-hover);
  --text: var(--fg);
  --text2: var(--fg-3);
  --accent2: var(--brand-400);
  --red: var(--neg);
  --green: var(--pos);
  --orange: var(--warn);
  --blue: var(--info);
  --eur: var(--c-eur);
  --usd: var(--c-usd);
  --rub: var(--c-rub);
  --kgs: var(--c-kgs);
  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);
  --shadow: var(--shadow-sm);
  --font: var(--font-sans);
}

/* ==========================================================================
   Login screen — not in design system, built on new tokens
   ========================================================================== */
.login-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sp-5) + env(safe-area-inset-top))
           calc(var(--sp-5) + env(safe-area-inset-right))
           calc(var(--sp-5) + env(safe-area-inset-bottom))
           calc(var(--sp-5) + env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at top right, var(--accent-tint), transparent 50%),
    radial-gradient(ellipse at bottom left, color-mix(in oklab, var(--info-500) 14%, transparent), transparent 50%),
    var(--bg);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.login-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: var(--fw-bold); font-size: var(--fs-lg);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-6);
}
.login-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin-bottom: 4px;
}
.login-sub {
  color: var(--fg-3);
  font-size: var(--fs-sm);
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-3);
  color: var(--fg-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.login-remember input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.login-note {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  margin-top: var(--sp-5);
  line-height: var(--lh-relaxed);
}
.login-note code {
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sp-4) + env(safe-area-inset-top))
           calc(var(--sp-4) + env(safe-area-inset-right))
           calc(var(--sp-4) + env(safe-area-inset-bottom))
           calc(var(--sp-4) + env(safe-area-inset-left));
  animation: fadeIn var(--t-base) var(--ease-out);
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: fadeUp var(--t-slow) var(--ease-out);
}
.modal-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-5);
}
.form-row { margin-bottom: var(--sp-4); }
.form-row label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-3);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: 6px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-row textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 14px;
  resize: vertical;
  font-family: var(--font-sans);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-ring);
  background: var(--surface);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Loading / Empty / Onboarding
   ========================================================================== */
.loading, .empty-state {
  text-align: center;
  color: var(--fg-3);
  padding: var(--sp-8) var(--sp-5);
  font-size: var(--fs-md);
}
.empty-state-card {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
.onboarding {
  background: var(--surface);
  border: 1px dashed var(--accent);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  margin-bottom: var(--sp-5);
}
.onboarding h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-2);
}
.onboarding p {
  color: var(--fg-2);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-5);
}
.btn-row {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}
.btn-row.left { justify-content: flex-start; }

/* ==========================================================================
   Shared layouts
   ========================================================================== */
.good-morning { font-size: var(--fs-sm); color: var(--fg-3); margin-top: 2px; }
.chart-wrap { position: relative; padding-top: 8px; }

/* ==========================================================================
   BACKWARD COMPAT — classes still used by pages not yet ported.
   Remove each block as its corresponding page is rewritten.
   ========================================================================== */

/* OLD: summary-row / summary-card  (history, accounts, settings still reference) */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.summary-card .label {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}
.summary-card .value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.summary-card .sub {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  margin-top: 4px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }
.section-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-4);
  margin-top: var(--sp-5);
}

/* OLD: chart */
.chart-container { padding: var(--sp-4) 0; }
.chart-container svg { width: 100%; }
.bar-label { font-size: 10px; fill: var(--fg-3); }
.bar-value { font-size: 10px; fill: var(--fg); font-weight: var(--fw-semibold); }

/* OLD: cat-bar-row */
.cat-bar-row { display: flex; align-items: center; margin-bottom: 10px; gap: 12px; }
.cat-bar-row .cat-name {
  width: 140px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-bar-row .cat-bar {
  flex: 1; height: 8px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.cat-bar-row .cat-fill {
  height: 100%;
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease-out);
  background: var(--accent);
}
.cat-bar-row .cat-amount {
  width: 100px;
  text-align: right;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* OLD: tx-card */
.tx-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tx-card:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.tx-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--surface-3); flex-shrink: 0;
}
.tx-info { min-width: 0; }
.tx-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.tx-meta { font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px; }
.tx-amount {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-snug);
  text-align: right;
  white-space: nowrap;
}
.tx-amount.expense { color: var(--fg); }
.tx-amount.income  { color: var(--pos); }
.tx-amount.transfer { color: var(--info); }

/* OLD: account card — used by accounts page */
.acc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.acc-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.acc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.acc-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
}
.acc-card[data-cur="EUR"]::before { background: var(--c-eur); }
.acc-card[data-cur="USD"]::before { background: var(--c-usd); }
.acc-card[data-cur="RUB"]::before { background: var(--c-rub); }
.acc-card[data-cur="KGS"]::before { background: var(--c-kgs); }
.acc-card .acc-name { font-size: var(--fs-sm); color: var(--fg-3); margin-bottom: 6px; }
.acc-card .acc-bal {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.acc-card .acc-cur { font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px; }
.acc-card.archived { opacity: 0.5; }

/* OLD: filters */
.filters {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}
.filters select, .filters input[type="date"], .filters input[type="text"] {
  height: 36px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: var(--fs-sm);
}
.filters select:focus, .filters input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-ring); }
.filters button {
  height: 32px;
  padding: 0 14px;
  background: var(--surface-3);
  border: 0;
  border-radius: var(--r-full);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.filters button:hover { background: var(--surface-hover); color: var(--fg); }
.filters button.active { background: var(--fg); color: var(--bg); }

/* OLD: tabs (used by history etc) */
.tabs {
  display: inline-flex; padding: 4px;
  background: var(--surface-3); border-radius: var(--r-full);
  gap: 2px; margin-bottom: var(--sp-5);
}
.tab-btn {
  height: 36px; padding: 0 18px;
  border: 0; background: transparent;
  border-radius: var(--r-full);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-xs); }

/* OLD: calendar (month grid) */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: var(--sp-4); }
.cal-header {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-align: left;
  padding: 8px 4px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.cal-day {
  min-height: 72px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 6px 8px;
  font-size: var(--fs-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-day:hover { background: var(--surface-hover); }
.cal-day.empty { background: transparent; cursor: default; }
.cal-day.empty:hover { background: transparent; }
.cal-day.has-tx { background: rgba(229, 72, 77, 0.09); }
.cal-day.has-tx.medium { background: rgba(229, 72, 77, 0.20); }
.cal-day.has-tx.high { background: rgba(229, 72, 77, 0.34); }
.cal-day.has-recurring { border-left: 3px solid var(--warn); }
.cal-day.selected { box-shadow: inset 0 0 0 2px var(--fg); background: var(--surface); }
.cal-day .day-num { font-weight: var(--fw-semibold); }
.cal-day.today .day-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
}
.cal-day .cal-amount { font-size: 10px; color: var(--neg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cal-day .cal-rec {
  font-size: 10px; color: var(--warn);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cal-month-nav {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.cal-month-nav .month-label {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.cal-month-nav button {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.cal-month-nav button:hover { border-color: var(--border-strong); background: var(--surface-hover); }

/* OLD: debt card */
.debt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.debt-card .debt-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.debt-card .debt-name { font-weight: var(--fw-semibold); font-size: var(--fs-md); flex: 1; }
.debt-card .debt-amount { font-size: var(--fs-xl); font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.debt-card.i_owe .debt-amount { color: var(--neg); }
.debt-card.owed_to_me .debt-amount { color: var(--pos); }
.debt-progress { height: 6px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; margin: 10px 0; }
.debt-progress .debt-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-500));
}
.debt-card .debt-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.debt-card.settled { opacity: 0.5; }
.debt-card .debt-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* OLD: sub card */
.sub-card {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: 8px;
}
.sub-card .sub-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 18px; background: var(--surface-3);
}
.sub-card .sub-info { min-width: 0; }
.sub-card .sub-name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.sub-card .sub-meta { font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px; }
.sub-card .sub-price {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.sub-card .sub-actions { display: flex; gap: 6px; }

/* OLD: capture */
.capture-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  font-size: var(--fs-lg);
  color: var(--fg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  margin-bottom: var(--sp-3);
  font-family: var(--font-sans);
  min-height: 84px;
  resize: vertical;
}
.capture-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-ring); }
.capture-input::placeholder { color: var(--fg-3); }
.capture-result {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
}
.parsed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  gap: var(--sp-3);
}
.parsed-row:last-child { border-bottom: 0; }
.parsed-label {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
}
.parsed-value { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.parsed-row select, .parsed-row input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  color: var(--fg);
  font-size: var(--fs-sm);
  max-width: 240px;
}

/* OLD: settings */
.settings-section { margin-bottom: var(--sp-7); }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.setting-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.setting-card .s-name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.setting-card .s-detail { font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px; }
.s-badge {
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.s-badge.active { background: var(--pos-bg); color: var(--pos); }
.s-badge.archived { background: var(--surface-3); color: var(--fg-3); }

/* OLD: btn-secondary → maps to btn-ghost */
.btn-secondary {
  background: transparent; color: var(--fg);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-hover); }

/* OLD: load-more */
.load-more {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-align: center;
  margin-top: var(--sp-3);
  transition: background var(--t-fast);
}
.load-more:hover { background: var(--surface-hover); }

/* OLD: currency-group */
.currency-group { margin-bottom: var(--sp-5); }
.currency-group-title {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.currency-group-title .cg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.currency-group-title[data-cur="EUR"] .cg-dot { background: var(--c-eur); }
.currency-group-title[data-cur="USD"] .cg-dot { background: var(--c-usd); }
.currency-group-title[data-cur="RUB"] .cg-dot { background: var(--c-rub); }
.currency-group-title[data-cur="KGS"] .cg-dot { background: var(--c-kgs); }
.total-by-cur { margin-left: auto; font-weight: var(--fw-semibold); color: var(--fg); font-variant-numeric: tabular-nums; }

/* Toast override — match design tokens */
.toast.error { background: var(--neg); color: #fff; }