/* Elevate Treasury — The Nathia Reserve palette.
   Editorial-luxe, not framework-default: hairlines instead of boxes, wide-tracked
   micro-labels, a display serif for figures, mono for every column of data. */

:root {
  --canvas:      #1c1503;
  --panel:       #241b04;
  --panel-2:     #2e2205;
  --raised:      #3b2c06;
  --olive:       #644e23;
  --mark:        #c5aa90;
  --sand:        #c6ab91;
  --sand-bright: #d9c3a6;
  --taupe:       #a99c8d;
  --cream-soft:  #e9e3d3;
  --cream:       #f1ede2;

  --line:        rgba(197, 170, 144, 0.16);
  --line-strong: rgba(197, 170, 144, 0.32);
  --line-faint:  rgba(197, 170, 144, 0.08);

  --pos:  #8fae74;
  --neg:  #cf6f56;
  --warn: #d2a83c;
  --info: #8fa5b8;

  --serif: "Didot", "Bodoni 72", "Playfair Display", "Hoefler Text", Georgia, serif;
  --sans:  "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono:  "SF Mono", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  --rail: 232px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--cream-soft);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

a { color: var(--sand); text-decoration: none; }
a:hover { color: var(--cream); }

::selection { background: var(--olive); color: var(--cream); }

/* ------------------------------------------------------------ typography */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
}

.serif { font-family: var(--serif); font-weight: 400; }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.figure {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1;
}
.figure .unit { font-size: 0.5em; letter-spacing: 0.1em; color: var(--taupe); margin-left: 0.5em; }
.stat .value .unit { font-size: 0.46em; letter-spacing: 0.12em; color: var(--taupe); margin-left: 0.5em; font-family: var(--sans); text-transform: uppercase; }

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.muted { color: var(--taupe); }
.dim { opacity: 0.6; }

/* ----------------------------------------------------------------- shell */
#app { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--canvas) 60%);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { padding: 26px 22px 20px; border-bottom: 1px solid var(--line); }
.brand .mark {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.25;
}
.brand .sub { margin-top: 7px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); }
.brand .sub b { color: var(--taupe); font-weight: 500; }

.nav { padding: 14px 0; flex: 1; overflow-y: auto; }
.nav-group { margin-bottom: 18px; }
.nav-group > .eyebrow { padding: 0 22px 8px; display: block; }

.nav a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 22px;
  color: var(--taupe);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-left: 2px solid transparent;
}
.nav a .idx { font-family: var(--mono); font-size: 10px; color: var(--olive); }
.nav a:hover { color: var(--cream); background: rgba(197, 170, 144, 0.04); }
.nav a.active { color: var(--cream); border-left-color: var(--mark); background: rgba(197, 170, 144, 0.06); }
.nav a.active .idx { color: var(--mark); }

.rail-foot { padding: 14px 22px 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--taupe); }
.rail-foot .who { color: var(--sand); letter-spacing: 0.04em; }
.rail-foot .role { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive); margin-top: 3px; }
.rail-foot button { margin-top: 10px; }

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 30px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--canvas) 70%, rgba(28, 21, 3, 0.86));
  backdrop-filter: blur(8px);
  z-index: 40;
}
.topbar h1 { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: 0.03em; color: var(--cream); }
.topbar .sub { font-size: 11px; color: var(--taupe); margin-top: 4px; letter-spacing: 0.04em; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.view { padding: 26px 30px 90px; }

/* --------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px 22px;
}
.panel + .panel { margin-top: 18px; }
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-faint);
}
.panel-head h2 { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: 0.04em; color: var(--cream); }
.panel-head .hint { font-size: 11px; color: var(--taupe); }

.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ----------------------------------------------------------- stat tiles */
.stat {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 18px 20px 20px;
  position: relative;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--line-strong);
}
.stat.lead::after { background: var(--mark); }
.stat.danger::after { background: var(--neg); }
.stat.good::after { background: var(--pos); }
.stat .label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }
.stat .value { font-family: var(--serif); font-size: 32px; color: var(--cream); line-height: 1; margin-top: 14px; font-variant-numeric: tabular-nums; }
.stat .value.sm { font-size: 24px; }
.stat .foot { margin-top: 10px; font-size: 11px; color: var(--taupe); font-family: var(--mono); }

/* ---------------------------------------------------------------- meter */
.meter { height: 6px; background: var(--raised); position: relative; overflow: hidden; margin-top: 12px; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--mark); }
.meter i.over { background: var(--neg); }
.meter i.warn { background: var(--warn); }
.meter i.good { background: var(--pos); }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--panel);
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-faint); color: var(--cream-soft); vertical-align: middle; }
tbody tr:hover td { background: rgba(197, 170, 144, 0.045); }
tbody tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.name { font-family: var(--sans); font-size: 13px; color: var(--cream); }
tfoot td { padding: 11px 12px; border-top: 1px solid var(--line-strong); color: var(--cream); font-weight: 600; }

.empty { padding: 40px 12px; text-align: center; color: var(--taupe); font-size: 13px; font-family: var(--sans); }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  color: var(--taupe);
  white-space: nowrap;
}
.chip.posted   { border-color: rgba(143, 174, 116, 0.5); color: var(--pos); }
.chip.pending  { border-color: rgba(210, 168, 60, 0.55); color: var(--warn); }
.chip.rejected { border-color: rgba(207, 111, 86, 0.5); color: var(--neg); }
.chip.paid     { border-color: rgba(143, 174, 116, 0.5); color: var(--pos); }
.chip.skipped  { color: var(--olive); }
.chip.flag     { border-color: rgba(210, 168, 60, 0.55); color: var(--warn); }
.chip.in  { border-color: rgba(143, 174, 116, 0.5); color: var(--pos); }
.chip.out { border-color: rgba(207, 111, 86, 0.45); color: var(--neg); }

/* -------------------------------------------------------------- buttons */
button, .btn {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 15px;
  background: transparent;
  color: var(--sand);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
button:hover, .btn:hover { background: rgba(197, 170, 144, 0.08); color: var(--cream); border-color: var(--mark); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary { background: var(--mark); color: #241b04; border-color: var(--mark); font-weight: 600; }
button.primary:hover { background: var(--sand-bright); color: #241b04; }
button.ghost { border-color: transparent; color: var(--taupe); padding: 6px 9px; }
button.ghost:hover { border-color: var(--line); }
button.danger { color: var(--neg); border-color: rgba(207, 111, 86, 0.4); }
button.danger:hover { background: rgba(207, 111, 86, 0.12); border-color: var(--neg); color: var(--neg); }
button.tiny { font-size: 9px; padding: 4px 8px; letter-spacing: 0.1em; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); }
.seg button { border: 0; border-right: 1px solid var(--line); padding: 7px 13px; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--mark); color: #241b04; font-weight: 600; }

/* --------------------------------------------------------------- inputs */
label.field { display: block; margin-bottom: 14px; }
label.field > span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 6px;
}
input, select, textarea {
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 13px;
  padding: 9px 11px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--mark); background: #191202; }
input::placeholder { color: var(--olive); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--taupe) 50%), linear-gradient(135deg, var(--taupe) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
textarea { resize: vertical; min-height: 62px; font-family: var(--sans); }
input[type="file"] { font-family: var(--sans); font-size: 12px; padding: 7px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters label.field { margin-bottom: 0; min-width: 132px; flex: 0 1 auto; }
.filters label.field.wide { flex: 1 1 220px; }

/* --------------------------------------------------------------- drawer */
.scrim { position: fixed; inset: 0; background: rgba(12, 9, 1, 0.7); backdrop-filter: blur(3px); z-index: 100; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--panel-2);
  border-left: 1px solid var(--line-strong);
  z-index: 101;
  display: flex;
  flex-direction: column;
  animation: slide 0.16s ease-out;
}
@keyframes slide { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.drawer header { padding: 22px 26px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer header h2 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: 0.03em; color: var(--cream); }
.drawer .body { padding: 22px 26px; overflow-y: auto; flex: 1; }
.drawer footer { padding: 16px 26px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* --------------------------------------------------------------- toasts */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--mark);
  padding: 11px 18px;
  font-size: 12px;
  color: var(--cream);
  max-width: 480px;
  animation: rise 0.16s ease-out;
}
.toast.err { border-left-color: var(--neg); color: var(--cream); }
.toast.ok  { border-left-color: var(--pos); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- login */
/* margin:auto inside a flex container centres without clipping when the card is
   taller than the viewport — grid/place-items would cut off the top. */
.gate { min-height: 100vh; display: flex; padding: 24px; }
.gate .card { width: min(400px, 100%); margin: auto; border: 1px solid var(--line-strong); background: var(--panel); padding: 38px 34px; }
.gate .mark { font-family: var(--serif); font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); text-align: center; }
.gate .sub { text-align: center; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive); margin: 9px 0 30px; }
.gate .err { color: var(--neg); font-size: 12px; margin-bottom: 12px; min-height: 16px; }

/* ---------------------------------------------------------- month sheet */
.sheet-wrap { overflow-x: auto; border: 1px solid var(--line); }
table.sheet { font-size: 11px; border-collapse: separate; border-spacing: 0; }
table.sheet th, table.sheet td { border-bottom: 1px solid var(--line-faint); }
table.sheet thead th { background: var(--panel-2); padding: 10px 10px 9px; }
table.sheet th.rowhead, table.sheet td.rowhead {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 2;
  min-width: 216px;
  max-width: 216px;
  text-align: left;
  border-right: 1px solid var(--line-strong);
}
table.sheet thead th.rowhead { z-index: 3; background: var(--panel-2); }
table.sheet td.rowhead { font-family: var(--sans); font-size: 12px; color: var(--cream); padding: 8px 12px; }
table.sheet td.rowhead .who { font-size: 10px; color: var(--taupe); margin-top: 2px; }
table.sheet td.cell { padding: 0; text-align: right; min-width: 92px; }
table.sheet td.cell button {
  width: 100%;
  border: 0;
  border-left: 1px solid var(--line-faint);
  padding: 9px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  color: var(--taupe);
  background: transparent;
}
table.sheet td.cell button:hover { background: rgba(197, 170, 144, 0.09); color: var(--cream); }
table.sheet td.cell.paid button { color: var(--pos); }
table.sheet td.cell.due button { color: var(--warn); }
table.sheet td.cell.overdue button { color: var(--neg); background: rgba(207, 111, 86, 0.08); }
table.sheet td.cell.skipped button { color: var(--olive); text-decoration: line-through; }
table.sheet td.cell.none button { color: var(--olive); opacity: 0.45; }
table.sheet tr.group td { background: var(--panel-2); font-family: var(--sans); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mark); padding: 9px 12px; }
table.sheet tfoot td { background: var(--panel-2); font-family: var(--mono); font-size: 11px; }
.now-col { box-shadow: inset 0 0 0 1px rgba(197, 170, 144, 0.22); }

/* ---------------------------------------------------------------- chart */
.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--taupe); margin-top: 12px; }
.legend i { display: inline-block; width: 14px; height: 2px; margin-right: 7px; vertical-align: middle; }

/* --------------------------------------------------------------- banner */
.banner { border: 1px solid var(--line-strong); border-left: 2px solid var(--warn); background: rgba(210, 168, 60, 0.06); padding: 13px 17px; font-size: 12px; color: var(--cream-soft); margin-bottom: 18px; }
.banner.bad { border-left-color: var(--neg); background: rgba(207, 111, 86, 0.07); }
.banner.good { border-left-color: var(--pos); background: rgba(143, 174, 116, 0.06); }
.banner b { color: var(--cream); }

/* -------------------------------------------------------------- palette */
.palette-scrim { position: fixed; inset: 0; background: rgba(12, 9, 1, 0.66); z-index: 150; display: grid; place-items: start center; padding-top: 14vh; }
.palette { width: min(540px, 92vw); background: var(--panel-2); border: 1px solid var(--line-strong); }
.palette input { border: 0; border-bottom: 1px solid var(--line); font-size: 15px; padding: 15px 18px; background: transparent; }
.palette ul { list-style: none; margin: 0; padding: 6px 0; max-height: 46vh; overflow-y: auto; }
.palette li { padding: 9px 18px; font-size: 13px; color: var(--taupe); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.palette li.on, .palette li:hover { background: rgba(197, 170, 144, 0.09); color: var(--cream); }
.palette li .k { font-family: var(--mono); font-size: 10px; color: var(--olive); }

/* ------------------------------------------------------------ utilities */
.stack { display: flex; flex-direction: column; gap: 4px; }
.rowline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-faint); font-size: 12px; }
.rowline:last-child { border-bottom: 0; }
.rowline .l { color: var(--taupe); font-family: var(--sans); }
.rowline .r { font-family: var(--mono); color: var(--cream); font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  #app { flex-direction: column; }
  .rail {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand { padding: 18px 18px 14px; }
  .nav { display: flex; overflow-x: auto; padding: 0; }
  .nav-group { display: contents; }
  .nav-group > .eyebrow { display: none; }
  .nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 13px 15px; white-space: nowrap; }
  .nav a.active { border-left: 0; border-bottom-color: var(--mark); }
  .nav a .idx { display: none; }
  .rail-foot { display: flex; align-items: center; gap: 12px; }
  .rail-foot button { margin-top: 0; }
  .topbar { padding: 16px 18px 14px; flex-wrap: wrap; }
  .topbar h1 { font-size: 21px; }
  .view { padding: 18px 16px 80px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .drawer { width: 100%; }
  .panel { padding: 16px 15px; }
}