/* app.css — Family Real Estate Loan Tracker
   Professional, low-color financial dashboard. Light + dark aware. */

:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --fg: #1e293b;
  --fg-muted: #64748b;
  --accent: #0f766e;         /* deep teal */
  --accent-fg: #ffffff;
  --accent-soft: #ccfbf1;
  --navy: #1e3a5f;
  --pos: #15803d;
  --neg: #b91c1c;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #131c2e;
    --surface-2: #0f1728;
    --border: #24304a;
    --border-strong: #33415f;
    --fg: #e2e8f0;
    --fg-muted: #94a3b8;
    --accent: #2dd4bf;
    --accent-fg: #04201c;
    --accent-soft: #134e4a;
    --navy: #93c5fd;
    --pos: #4ade80;
    --neg: #f87171;
    --warn: #fbbf24;
    --warn-soft: #422006;
    --shadow: 0 1px 3px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--fg); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .75rem; }
.muted { color: var(--fg-muted); }
.mono { font-family: var(--mono); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---- Layout ---- */
.topbar {
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.2);
}
@media (prefers-color-scheme: dark) { .topbar { background: #0d1526; } }
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { font-weight: 700; color: #fff; font-size: 1.05rem; letter-spacing: -.01em; }
.brand small { display: block; font-weight: 400; font-size: .68rem; opacity: .75; letter-spacing: .02em; }
.topbar nav { display: flex; gap: .15rem; flex-wrap: wrap; margin-left: auto; }
.topbar nav a {
  color: #cbd5e1; padding: .35rem .6rem; border-radius: 6px; font-size: .85rem;
}
.topbar nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.topbar nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.userchip { font-size: .8rem; color: #cbd5e1; display: flex; align-items: center; gap: .5rem; }
.userchip .role { background: rgba(255,255,255,.14); padding: .1rem .45rem; border-radius: 100px; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.userchip button { background: none; border: 1px solid rgba(255,255,255,.25); color: #cbd5e1; border-radius: 6px; padding: .2rem .5rem; cursor: pointer; font-size: .78rem; }
.userchip button:hover { background: rgba(255,255,255,.1); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* ---- Cards / KPI ---- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem;
}
.grid { display: grid; gap: 1rem; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: .15rem; }
.kpi .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.kpi .value { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: .78rem; color: var(--fg-muted); }
.kpi.hero { background: linear-gradient(135deg, var(--accent), var(--navy)); color: #fff; border: none; }
.kpi.hero .label, .kpi.hero .sub { color: rgba(255,255,255,.85); }
.kpi.hero .value { color: #fff; }

.section-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }

/* Dashboard top cards: a GUARANTEED 3-equal-column grid so the Ownership &
   equity card spans columns 1–2 exactly under Loan + Payments-to-date and is
   flush against Property & equity's left edge (column 3). Not auto-fit — the
   3 tracks are fixed, so alignment is structural, not coincidental. */
.dash-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "loan payments property"
    "note note     property";
  align-items: start;
}
.dash-grid .a-loan { grid-area: loan; }
.dash-grid .a-pay  { grid-area: payments; }
.dash-grid .a-prop { grid-area: property; }   /* column 3, spans both rows */
.dash-grid .a-note { grid-area: note; }       /* cols 1–2 of row 2 */
@media (max-width: 860px) {
  .dash-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "loan" "payments" "property" "note";
  }
}

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: var(--surface-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-muted); font-weight: 600; position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
tbody tr:hover { background: var(--surface-2); }
tr.reversed td { color: var(--fg-muted); text-decoration: line-through; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
dl.kv dt { color: var(--fg-muted); font-size: .85rem; }
dl.kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Badges ---- */
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 100px; font-size: .72rem; font-weight: 600; letter-spacing: .01em; }
.b-paid { background: var(--accent-soft); color: var(--accent); }
.b-scheduled { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); }
.b-partial { background: var(--warn-soft); color: var(--warn); }
.b-late { background: #fee2e2; color: var(--neg); }
.b-missed { background: #fee2e2; color: var(--neg); }
.b-reversed { background: var(--surface-2); color: var(--fg-muted); border: 1px dashed var(--border-strong); }
.b-draft { background: var(--warn-soft); color: var(--warn); border: 1px solid currentColor; }
@media (prefers-color-scheme: dark) { .b-late, .b-missed { background: #422; } }

/* ---- Forms ---- */
form.stack { display: flex; flex-direction: column; gap: .9rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .8rem; font-weight: 600; color: var(--fg-muted); }
.field .hint { font-size: .74rem; color: var(--fg-muted); font-weight: 400; }
input, select, textarea {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--fg); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: .9rem; }
.btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: var(--accent); color: var(--accent-fg); border: none;
  padding: .55rem 1rem; border-radius: 8px; font-weight: 600; font-size: .9rem;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn.secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); }
.btn.danger { background: var(--neg); color: #fff; }
.btn.small { padding: .3rem .6rem; font-size: .8rem; }
.inline-form { display: inline; }

/* ---- Flash / notices ---- */
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.flash.success { background: var(--accent-soft); color: var(--accent); border-color: currentColor; }
.flash.error { background: #fee2e2; color: var(--neg); border-color: currentColor; }
.flash.warn { background: var(--warn-soft); color: var(--warn); border-color: currentColor; }
.disclaimer { background: var(--warn-soft); color: var(--warn); border: 1px solid currentColor; border-radius: 8px; padding: .6rem .9rem; font-size: .82rem; margin: 1rem 0; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }
.filters a { font-size: .82rem; padding: .25rem .6rem; border-radius: 100px; border: 1px solid var(--border); color: var(--fg-muted); }
.filters a.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { text-align: center; }
.login-card .sub { text-align: center; color: var(--fg-muted); margin-bottom: 1.25rem; font-size: .88rem; }

details.row-detail { margin: 0; }
details.row-detail summary { cursor: pointer; color: var(--accent); font-size: .8rem; }
footer.foot { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 2rem; color: var(--fg-muted); font-size: .78rem; }