/* PennySpent brand layer -----------------------------------------------------
   Money is green: a deep "penny jar" green for the frame, mid green for income,
   a mint tint for savings, and red only where money leaves. Everything else is
   quiet, so the numbers carry the page. */
:root {
  --ps-green-900: #0b3b26;
  --ps-green-800: #0f5132;
  --ps-green-600: #1e8150;
  --ps-green-300: #a8d8bd;
  --ps-green-100: #eaf6ef;
  --ps-red-600: #b02a37;
  --ps-red-200: #e8a1a7;
  --ps-red-900: #4a0d13;
  --ps-ink: #12211a;
  --ps-coin-ring: #a8d8bd;
  --ps-coin-face: #f2fbf6;

  --bs-primary: var(--ps-green-600);
  --bs-primary-rgb: 30, 129, 80;
  --bs-link-color: var(--ps-green-800);
  --bs-link-color-rgb: 15, 81, 50;
  --bs-link-hover-color: var(--ps-green-600);
  --bs-border-radius: .65rem;
  --bs-body-color: var(--ps-ink);
}

body {
  background:
    radial-gradient(1200px 380px at 50% -140px, var(--ps-green-100), transparent 70%),
    var(--bs-body-bg);
}

/* Brand mark ---------------------------------------------------------------- */
.brand-lockup { display: inline-flex; align-items: center; gap: .5rem; color: inherit; }
.brand-coin { flex: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25)); }
.brand-name { font-weight: 700; letter-spacing: -.015em; }
.brand-name-accent { color: var(--ps-green-300); }
.brand-tagline { color: var(--bs-secondary-color); }

/* Navigation ---------------------------------------------------------------- */
.ps-navbar {
  background: linear-gradient(100deg, var(--ps-green-900), var(--ps-green-800) 55%, var(--ps-green-600));
  box-shadow: 0 1px 0 rgb(0 0 0 / .15), 0 6px 18px -12px rgb(11 59 38 / .8);
}
.ps-navbar .navbar-brand { color: #fff; font-size: 1.15rem; }
.ps-navbar .nav-link { color: rgb(255 255 255 / .82); border-radius: 999px; padding: .35rem .75rem; }
.ps-navbar .nav-link:hover, .ps-navbar .nav-link:focus { color: #fff; background: rgb(255 255 255 / .12); }
.ps-navbar .nav-link.active { color: var(--ps-green-900); background: var(--ps-green-300); font-weight: 600; }
.ps-navbar .navbar-toggler { border-color: rgb(255 255 255 / .35); }
.ps-navbar .dropdown-toggle::after { opacity: .7; }

/* Cards and headings -------------------------------------------------------- */
.card { border-color: rgb(11 59 38 / .1); box-shadow: 0 1px 2px rgb(11 59 38 / .05); }
.card-header { background: var(--ps-green-100); border-bottom-color: rgb(11 59 38 / .1); }
h1, h2, h3 { letter-spacing: -.02em; }
.page-lead { color: var(--bs-secondary-color); max-width: 46rem; }

/* Sign-in and sign-up ------------------------------------------------------- */
.ps-gate { max-width: 26rem; margin: 2.5rem auto 0; }
.ps-gate-head { text-align: center; margin-bottom: 1.25rem; }
.ps-gate-head .brand-lockup { color: var(--ps-green-800); font-size: 1.6rem; }
.ps-gate-head .brand-name-accent { color: var(--ps-green-600); }
.ps-gate .card { box-shadow: 0 12px 30px -20px rgb(11 59 38 / .55); }

/* Footer -------------------------------------------------------------------- */
.ps-footer { color: var(--bs-secondary-color); border-top: 1px solid rgb(11 59 38 / .1); }
.ps-footer .brand-lockup { color: var(--ps-green-800); font-size: .95rem; }
.ps-footer .brand-name-accent { color: var(--ps-green-600); }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.stat-value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-header h2 { font-size: 1.05rem; margin: 0; }
.table td, .table th { vertical-align: middle; }
.amount-input { max-width: 8.5rem; }
.form-narrow { max-width: 42rem; }

/* Budget tiles: money in shades of green, money spent in red. The greens run
   darkest (gross pay) to lightest (savings). Each pairs a background with a
   text colour that stays readable in both light and dark mode. */
.tile-income-gross { background: #0f5132; color: #f2fbf6; }
.tile-income-net   { background: #1e8150; color: #f2fbf6; }
.tile-savings      { background: #a8d8bd; color: #0b3b26; }
.tile-expenses     { background: #b02a37; color: #fdf2f3; }

.tile-income-gross .stat-label,
.tile-income-net .stat-label,
.tile-savings .stat-label,
.tile-expenses .stat-label { color: inherit; opacity: .85; }

.tile-income-gross .text-body-secondary,
.tile-income-net .text-body-secondary,
.tile-savings .text-body-secondary,
.tile-expenses .text-body-secondary { color: inherit !important; opacity: .85; }

.tile-income-gross a,
.tile-income-net a,
.tile-savings a,
.tile-expenses a { color: inherit; text-decoration: underline; }

/* Card payments due on the next payday: a lighter red than expenses. */
.tile-card-payments { background: #e8a1a7; color: #4a0d13; }
.tile-card-payments .stat-label { color: inherit; opacity: .85; }
.tile-card-payments .text-body-secondary { color: inherit !important; opacity: .85; }
.tile-card-payments a { color: inherit; text-decoration: underline; }

/* History: how a figure moved from the month before. Never colour alone —
   the arrow carries the direction for anyone who can't see the difference. */
.change {
  display: inline-block;
  margin-left: .4rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.change-good { color: var(--ps-green-600); }
.change-bad { color: var(--ps-red-600); }