/* static/v2/pages.css — styles for the Wallets, Activity and Account pages
 * (static/v2/pages/{wallets,activity,account}.js). Ported from
 * design/ui-v2/src/screens/pages.mjs: same sizes/spacing as classes instead
 * of the design canvas's inline styles. Loaded after app.css (see
 * static/v2/index.html) so any rule here wins a same-specificity tie with a
 * shared class from app.css/ui.js (e.g. .row's gap).
 *
 * Kept separate from app.css because these three pages are this worktree's
 * own scope — app.css/parts.js/tokens.js are being edited by another agent
 * in parallel; see docs/plans/2026-09-17-ui-v2-build-plan.md Phase 6.
 */

/* ── generic: a control that cannot be used yet ─────────────────────────── */
.hint-text { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.btn[disabled], .chip[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── shared panel footer row (wallets pagination, activity "load older") ── */
.panel-foot-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 12.5px; color: var(--text-3); gap: 10px; flex-wrap: wrap; }

/* ── inline form (add wallets, add address-book entry) ──────────────────── */
.inline-form-panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); background: var(--bg-2); }

/* ── Wallets: treasury cards ─────────────────────────────────────────────── */
.treasury-grid { display: grid; gap: 12px; }
.treasury-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* ── Wallets: all-wallets table ──────────────────────────────────────────── */
.wallets-grid-head, .wallets-grid-row {
  display: grid;
  grid-template-columns: 20px 84px 150px 120px minmax(0,1fr) 150px 110px 100px 90px 24px;
  gap: 12px; align-items: center; padding: 0 16px; box-sizing: border-box;
}
.wallets-grid-head { height: 34px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.wallets-grid-row { height: 44px; border-bottom: 1px solid var(--line); }
.wallets-grid-row:last-child { border-bottom: none; }
.wallets-grid-row.wallet-table-row-selected { background: var(--accent-bg); }

/* ── Wallets: key export ──────────────────────────────────────────────────── */
.key-export-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.key-export-row:first-child { border-top: none; }
.masked-key { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ── Wallets: address book ───────────────────────────────────────────────── */
.address-book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.address-book-item { padding: 12px 16px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.address-book-item:nth-child(4n+1) { border-left: none; }

/* ── Activity: insights strip ────────────────────────────────────────────── */
.insights-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 424px; gap: 12px; }
.source-row { display: flex; align-items: center; gap: 10px; }
.source-label { width: 130px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-value { width: 84px; text-align: right; font-size: 12.5px; flex-shrink: 0; }
.week-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* ── Activity: filter row + table ────────────────────────────────────────── */
.activity-filters { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.activity-grid-head, .activity-grid-row {
  display: grid;
  grid-template-columns: 78px 96px minmax(0,1.6fr) 150px 110px 170px 110px;
  gap: 12px; align-items: center; padding: 0 16px; box-sizing: border-box;
}
.activity-grid-head { height: 34px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.activity-grid-row { min-height: 42px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.activity-grid-row:last-child { border-bottom: none; }
.tx-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); text-decoration: none; }

/* ── Account: two-column layout ──────────────────────────────────────────── */
.account-cols { display: flex; gap: 16px; align-items: flex-start; }
.account-col { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; flex-basis: 0; min-width: 0; }

/* ── Account: plan cards ──────────────────────────────────────────────────── */
.plan-cards-row { display: flex; gap: 12px; align-items: stretch; }
.plan-card { flex-grow: 1; flex-basis: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); box-sizing: border-box; }
.plan-card-active { background: var(--accent-bg); border-color: var(--accent-line); }
.meters-row { display: flex; gap: 20px; flex-wrap: wrap; }
.meter { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; flex-basis: 160px; min-width: 140px; }

/* ── Account: setting rows (defaults, notifications, data, security) ────── */
.setting-row { display: flex; gap: 16px; padding: 13px 16px; border-top: 1px solid var(--line); align-items: center; }
.setting-body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.setting-title { font-size: 13.5px; font-weight: 600; }
.setting-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

/* ── Account: notification sinks ─────────────────────────────────────────── */
.notify-sink-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.notify-sink-row .col { gap: 3px; min-width: 220px; }
.notify-sink-target { font-size: 13px; font-weight: 600; word-break: break-all; }
.notify-kind-reason { font-size: 12px; line-height: 1.45; }