/* Budgeter -- Vercel's Geist system, per DESIGN.md.
   Near-black ink on a near-white canvas; the only color left in is a small,
   fixed accent family (link blue, violet, cyan, pink, warning amber) used for
   category dots and semantic states -- never as chrome fill. Two button
   shapes: nav links are full pills (per the nav-link token), every other
   control is a tight 6px square. Geist Sans carries all type; Geist Mono is
   reserved for small uppercase eyebrow labels. */

:root {
  --ink:            #171717;
  --on-primary:     #ffffff;
  --body:           #4d4d4d;
  --mute:           #8f8f8f;
  --faint:          #a1a1a1;
  --hairline:       #ebebeb;
  --hairline-soft:  #f2f2f2;
  --canvas:         #fafafa;
  --canvas-elevated:#ffffff;

  --link:       #0070f3;
  --link-deep:  #0761d1;
  --link-soft:  #d3e5ff;
  --error:      #ee0000;
  --error-deep: #c50000;
  --error-soft: rgba(238, 0, 0, .08);
  --warning:      #f5a623;
  --warning-soft: #ffefcf;
  --warning-deep: #ab570a;
  --violet:      #7928ca;
  --violet-soft: #d8ccf1;
  --cyan:        #50e3c2;
  --cyan-soft:   #aaffec;
  --pink:    #ff0080;
  --magenta: #eb367f;
  /* Not in DESIGN.md -- Geist's own "success" is the link blue, but that
     reads wrong on a money app where green-in/red-out is the whole point.
     Picked to sit comfortably next to the existing palette rather than
     clash with it. */
  --success:      #178a44;
  --success-deep: #0f6934;
  --success-soft: #dcfce7;

  /* Category dots draw only from the accent family above -- five slots,
     kept under their original names so no template or seed data changes. */
  --terracotta: var(--pink);
  --clay:       var(--violet);
  --amber:      var(--warning);
  --sage:       var(--cyan);
  --dusty:      var(--link);

  --positive: var(--success);
  --negative: var(--error);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill-category: 64px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --gap: var(--space-lg);

  --font-sans: "Geist", Inter, Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Flat by default: a 1px hairline does the separating. Shadow only for
     anything that genuinely floats above the page (nothing does, yet). */
  --shadow-floating: 0px 2px 2px rgba(0,0,0,.06), 0px 8px 16px -4px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:             #ededed;
    --on-primary:      #0a0a0a;
    --body:            #a1a1a1;
    --mute:            #8f8f8f;
    --faint:           #666666;
    --hairline:        #2e2e2e;
    --hairline-soft:   #262626;
    --canvas:          #0a0a0a;
    --canvas-elevated: #141414;
    --link-soft:    #133463;
    --warning-soft: #4a3311;
    --violet-soft:  #2f1f47;
    --cyan-soft:    #123f36;
    --error-soft:   rgba(238, 0, 0, .16);
    --success:      #34c76f;
    --success-deep: #7ee2a3;
    --success-soft: #0f2e1c;
    --shadow-floating: 0px 2px 2px rgba(0,0,0,.4), 0px 8px 20px -6px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --ink:             #ededed;
  --on-primary:      #0a0a0a;
  --body:            #a1a1a1;
  --mute:            #8f8f8f;
  --faint:           #666666;
  --hairline:        #2e2e2e;
  --hairline-soft:   #262626;
  --canvas:          #0a0a0a;
  --canvas-elevated: #141414;
  --link-soft:    #133463;
  --warning-soft: #4a3311;
  --violet-soft:  #2f1f47;
  --cyan-soft:    #123f36;
  --error-soft:   rgba(238, 0, 0, .16);
  --success:      #34c76f;
  --success-deep: #7ee2a3;
  --success-soft: #0f2e1c;
  --shadow-floating: 0px 2px 2px rgba(0,0,0,.4), 0px 8px 20px -6px rgba(0,0,0,.7);
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Nav links and buttons override this with their own color further down --
   this is what plain inline/table links (a fund name, "see all funds") fall
   back to, matching the system's own use of {colors.link} for exactly this. */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- shell ------------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 216px;
  flex: 0 0 216px;
  padding: 26px 14px;
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.4px;
  margin: 0 0 4px 10px;
}
.brand-sub {
  margin: 0 0 22px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Nav links stay pill-shaped even in-app -- that is what the nav-link token
   specifies. Buttons, below, are the square shape instead. */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--body);
  font-size: 14px;
  font-weight: 400;
}
.nav a:hover { background: var(--hairline-soft); color: var(--ink); }
.nav a.active { background: var(--ink); color: var(--on-primary); font-weight: 500; }
.nav a.active .pill { background: rgba(255,255,255,.16); color: var(--on-primary); }
.nav-group {
  margin: 20px 0 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
}

.main { flex: 1; min-width: 0; padding: 30px 34px 80px; max-width: 1180px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-bottom: 24px;
}
h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -1.2px;
  margin: 0;
}
.page-head p { margin: 4px 0 0; color: var(--body); font-size: 14px; }

h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.36px;
  margin: 0 0 12px;
}

/* --- cards --------------------------------------------------------------
   Level 0: hairline only, no shadow -- Geist's default depth treatment. */

.card {
  background: var(--canvas-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.grid { display: grid; gap: var(--gap); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.stat .value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.stat .foot { font-size: 12.5px; color: var(--body); margin-top: 4px; }

/* --- numbers ----------------------------------------------------------- */

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--positive); }
.neg { color: var(--negative); }
.muted { color: var(--faint); }
.cur {
  font-size: .72em;
  color: var(--faint);
  letter-spacing: .04em;
  margin-left: 3px;
}

/* --- tables ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--hairline);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hairline-soft); }
td.r, th.r { text-align: right; }
.table-wrap { overflow-x: auto; }

/* --- fund rows --------------------------------------------------------- */

.cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 10px;
}
.cat-head h2 { margin: 0; }
.cat-head .total { font-size: 13px; color: var(--body); }

/* Circular, not squared -- Geist's own geometry rule reserves circles for
   icons and avatars, which a category dot effectively is. */
.swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: baseline;
  background: var(--clay);
}
.swatch.terracotta { background: var(--terracotta); }
.swatch.clay       { background: var(--clay); }
.swatch.amber      { background: var(--amber); }
.swatch.sage       { background: var(--sage); }
.swatch.dusty      { background: var(--dusty); }

/* Progress of the month against a fund's budget. */
.meter {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--hairline-soft);
  overflow: hidden;
  min-width: 70px;
}
.meter > span { display: block; height: 100%; background: var(--success); border-radius: var(--radius-full); }
.meter.over > span { background: var(--negative); }

/* --- pills and tags -----------------------------------------------------
   Small status/category chips -- distinct from buttons, these keep the
   fully-rounded pill-category shape and draw their tints straight from the
   soft tokens the spec defines for exactly this purpose. */

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill-category);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  background: var(--hairline-soft);
  color: var(--body);
}
.pill.warn { background: var(--warning-soft); color: var(--warning-deep); }
.pill.neg  { background: var(--error-soft);   color: var(--error-deep); }
.pill.pos  { background: var(--success-soft); color: var(--success-deep); }
.pill.nzd  { background: var(--violet-soft);  color: var(--violet); }
.pill.usd  { background: var(--link-soft);    color: var(--link-deep); }

/* --- controls ------------------------------------------------------------
   The app-chrome button: a tight square, hairline border, ink text on white.
   Geist's literal padding (0 6px, height from line-height alone) reads as
   marketing-page chrome; a dense data app with many inline buttons needs a
   slightly taller hit target, so padding is a touch more generous while the
   shape, border, and type stay exactly to spec. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--canvas-elevated);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--hairline-soft); text-decoration: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
.btn.primary:hover { opacity: .85; background: var(--ink); }
.btn.sm { padding: 4px 9px; font-size: 13px; }

input, select, textarea {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--link);
  outline-offset: -1px;
}
input.num-input { text-align: right; font-variant-numeric: tabular-nums; }

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; }

.month-switch { display: flex; align-items: center; gap: 8px; }
.month-switch .label { font-family: var(--font-sans); font-weight: 600; font-size: 16px; letter-spacing: -0.3px; }

/* --- flash / empty ----------------------------------------------------- */

.flash {
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--canvas-elevated);
  margin-bottom: 18px;
  font-size: 14px;
}
.flash.ok   { border-color: var(--success); background: var(--success-soft); color: var(--success-deep); }
.flash.warn { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-deep); }

.empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--faint);
  font-size: 14px;
}

/* --- bars -------------------------------------------------------------- */

.barchart { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.barchart .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.barchart .bar i {
  display: block;
  background: var(--positive);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.barchart .bar i.spend { background: var(--error); }
.barchart .bar span {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  margin-top: 6px;
}

/* --- mobile ------------------------------------------------------------ */

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: auto;
    flex: none;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: 16px;
  }
  .brand-sub { display: none; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; }
  .nav a { white-space: nowrap; }
  .nav-group { display: none; }
  .main { padding: 20px 16px 60px; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3, .grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 25px; letter-spacing: -1px; }
}