/* Dashboard page styles. Scope everything under .page-dashboard.
   The Customize modal renders into #overlay-root, outside the page, so its
   classes carry a .dashboard-modal- prefix instead. */

/* ── layout: two equal, independent stacks ────────────────────────────── */
.page-dashboard .db-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4); align-items: start;
}
.page-dashboard .db-grid.is-empty { grid-template-columns: minmax(0, 1fr); }
.page-dashboard .db-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.page-dashboard .db-empty { padding: var(--space-6); }
/* no accounts yet: D's full-width connect card above the widgets */
.page-dashboard .db-connect:empty { display: none; }
.page-dashboard .db-connect { margin-bottom: var(--space-4); }
.page-dashboard .db-connect .eg-connect-card { margin-bottom: 0; }
.page-dashboard .db-empty .btn { margin-top: var(--space-3); }

.page-dashboard .db-chart { width: 100%; min-width: 0; }
.page-dashboard .db-foot { margin-top: var(--space-4); }
.page-dashboard .db-note {
  margin: 0; padding: var(--space-6) var(--space-4);
  text-align: center; font-size: 13px; color: var(--muted);
}

/* ── Budget ───────────────────────────────────────────────────────────── */
.page-dashboard .db-budget-list { display: flex; flex-direction: column; gap: var(--space-1); }
.page-dashboard .db-budget-row {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); margin-inline: calc(-1 * var(--space-3));
  border-radius: var(--radius-md); color: inherit; text-decoration: none;
}
.page-dashboard .db-budget-row:hover { background: var(--hover); }
.page-dashboard .db-budget-row:active { background: var(--press); }
.page-dashboard .db-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  font-size: 14px;
}
.page-dashboard .db-budget-name { font-size: 15px; }
.page-dashboard .db-budget-of { font-size: 13px; color: var(--muted); }
.page-dashboard .db-budget-spent { font-weight: 700; }
.page-dashboard .db-line strong { font-weight: 700; }

/* ── Net worth: change chip next to the number ────────────────────────── */
.page-dashboard .db-change {
  gap: var(--space-1); font-size: 12px; font-weight: 600;
  padding: calc(var(--space-1) / 2) var(--space-2);
}
.page-dashboard .db-change.is-up { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.page-dashboard .db-change.is-down { background: var(--color-accent-100); color: var(--color-accent-800); }
.page-dashboard .db-change.is-flat { background: var(--color-neutral-100); color: var(--color-neutral-800); }

/* ── Cash flow: month figures above the mini chart ────────────────────── */
.page-dashboard .db-cf-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8);
  margin-bottom: var(--space-4);
}
.page-dashboard .db-stat { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); min-width: 0; }
.page-dashboard .db-stat-label { font-size: 12px; color: var(--muted); }
.page-dashboard .db-stat-value { font-size: 20px; font-weight: 700; line-height: 1.2; }

/* ── Transactions ─────────────────────────────────────────────────────────
   Every row shares one column grid (subgrid), so merchant, category and
   amount line up row to row however wide each row's amount cell is. */
.page-dashboard .db-tx-body { container-type: inline-size; }
.page-dashboard .db-tx-list {
  display: grid; column-gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
}
.page-dashboard .db-tx-list .tx-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
.page-dashboard .db-tx-list .tx-amt { grid-column: 4; }
.page-dashboard .db-tx-list .tx-chev { grid-column: 5; }
/* .cat is inline-flex, so cap it at its cell or long names run under the amount */
.page-dashboard .db-tx-list .tx-cat .cat { max-width: 100%; vertical-align: middle; }
.page-dashboard .db-review-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--color-accent);
}
.page-dashboard .db-flag { display: inline-flex; color: var(--muted); }
/* narrow cards (two columns at ~1100–1250px): keep the emoji, drop the name and the chevron */
@container (max-width: 420px) {
  .page-dashboard .db-tx-list { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .page-dashboard .db-tx-list .tx-cat .cat-name,
  .page-dashboard .db-tx-list .tx-chev { display: none; }
}

/* ── Recurring ────────────────────────────────────────────────────────── */
.page-dashboard .db-rec-list { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.page-dashboard .db-rec-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-2); margin-inline: calc(-1 * var(--space-2));
  border-radius: var(--radius-md); color: inherit; text-decoration: none;
}
.page-dashboard .db-rec-row:hover { background: var(--hover); }
.page-dashboard .db-rec-row:active { background: var(--press); }
.page-dashboard .db-rec-main { display: flex; flex-direction: column; min-width: 0; }
.page-dashboard .db-rec-name {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-dashboard .db-rec-meta {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-dashboard .db-rec-right { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; }
.page-dashboard .db-rec-due { font-size: 12px; color: var(--muted); }
.page-dashboard .db-rec-due.is-soon { color: var(--color-accent-700); font-weight: 600; }

/* ── responsive: one stack (left column's cards first) ────────────────── */
@media (max-width: 1000px) {
  .page-dashboard .db-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Customize modal (renders in #overlay-root) ───────────────────────── */
.dashboard-modal .dialog-body { opacity: 1; }
.dashboard-modal-sub { margin: 0 0 var(--space-4); font-size: 14px; color: var(--muted); }
.dashboard-modal-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3); align-items: start;
}
.dashboard-modal-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dashboard-modal-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: 999px; background: var(--inset); cursor: pointer;
  font-size: 14px; color: var(--color-text);
}
.dashboard-modal-row:hover { background: color-mix(in srgb, var(--color-text) 5%, var(--inset)); }
.dashboard-modal-row:active { background: color-mix(in srgb, var(--color-text) 10%, var(--inset)); }
.dashboard-modal-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.dashboard-modal-name .icon, .dashboard-modal-name svg { color: var(--color-accent-2-700); }

/* The toggles are the shared .switch (css/app.css). */

@media (max-width: 640px) {
  .dashboard-modal-grid { grid-template-columns: minmax(0, 1fr); }
}