/* =====================================================================
 * Reserve Study Dashboard — styles
 * Visual language matches reserveadvisors.com: Poppins throughout, the
 * site's actual green (#00853F) and amber (#D48800) accent, pill buttons,
 * white cards floating on a light page background. --spend is intentionally
 * left at its original value — js/charts.js (frozen) hardcodes the same hex
 * for negative-balance dots, so the two must stay in sync without a shared
 * variable. --serif is aliased to --sans rather than removed outright, so
 * every selector below that still names var(--serif) renders in Poppins
 * without needing an individual edit.
 * ===================================================================== */
:root {
  --green-deep:#046A34; --green:#00853F; --green-bright:#1DA157;
  --brass:#D48800; --spend:#B5552F;
  --ink:#262B27; --muted:#6B7280; --faint:#9CA3AF;
  --paper:#FFFFFF; --panel:#F5F6F3; --hair:#E7E9E4;
  --amber:#B8760A; --gold:#E3B65C; --hl:#FBF0DD;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --serif: var(--sans);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--panel); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }
.neg { color: var(--spend); font-weight: 600; }
.pos { color: var(--green); }
.hint { color: var(--faint); font-size: 11.5px; font-weight: 400; }

/* ---- top bar ---- */
.topbar {
  background: var(--paper); border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 40px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
/* joint lockup: ForeSite (product) on the left, then the tenant's
   management-company logo/mark on the right of a divider — RA itself moved
   to the "Powered by" footer credit (see .site-footer below). */
.brand { display: flex; align-items: center; gap: 0; }
.brand-name { font-weight: 500; font-size: 22px; letter-spacing: .01em; color: var(--green); text-transform: uppercase; }
.brand-name b { font-weight: 700; }
.brand-divider { width: 1px; height: 30px; background: var(--hair); margin: 0 1rem; display: inline-block; }
.brand-mark { background: var(--green-deep); color: #fff; font-family: var(--sans); border-radius: 5px; padding: 0.12rem 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: .04em; }
.brand-logo { height: 30px; max-width: 160px; object-fit: contain; }
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar nav a { color: var(--ink); font-weight: 500; font-size: 12.5px; text-decoration: none; }
.topbar nav a:hover { color: var(--green); }
.asof-ctl { font-size: 11.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.asof-ctl select { padding: 0.25rem 0.4rem; font-size: 12.5px; font-weight: 600; color: var(--green-deep); }

/* staleness banner */
.stale-banner { background: #FBF1DC; border: 1px solid #EAD9B0; border-left: 4px solid var(--amber); border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 1.1rem; font-size: 12.5px; color: #6f5312; }
.stale-banner b { color: var(--green-deep); }
.linklike { background: none; border: none; color: var(--brass); font-weight: 600; font-size: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* flat page background (var(--panel) on body) shows through; individual
   panels/cards below carry their own white background and shadow, rather
   than one big "paper" card wrapping the whole page. */
main { max-width: 1180px; margin: 0 auto; padding: 34px 40px 70px; }

/* ---- headings ---- */
.page-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0.3rem 0 1.1rem; }
h1 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--green-deep); line-height: 1.1; }
h2 { font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--green-deep); margin: 0 0 0.85rem; }
h2.inline { display: inline; font-size: 15px; }
h3 { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--green-deep); margin: 0 0 0.5rem; }
.page-stats { color: var(--muted); font-size: 12px; }
/* Metro reads as part of the stat line until hovered — it is an editable
   field, not a link, so it must not shout for attention. */
.metro-edit { color: inherit; font-weight: inherit; text-decoration: none; border-bottom: 1px dashed var(--hair); }
.metro-edit:hover { color: var(--brass); border-bottom-color: var(--brass); }
.back { font-size: 12px; font-weight: 600; color: var(--brass); }
.sec-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--brass); margin: 0 0 0.6rem; }

/* ---- panels ---- */
.panel { background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; padding: 18px 20px; margin-bottom: 1.2rem; }
.panel > details > summary { cursor: pointer; list-style: none; color: var(--green-deep); }
.panel > details > summary::-webkit-details-marker { display: none; }
.panel > details > summary::before { content: "▸ "; color: var(--brass); }
.panel > details[open] > summary::before { content: "▾ "; }

.notes { background: #FBF4E2; border: 1px solid #EAD9B0; border-radius: 8px; padding: 0.6rem 1rem; margin-bottom: 1.1rem; font-size: 12px; }
.notes summary { cursor: pointer; color: var(--amber); font-weight: 700; }
.notes ul { margin: 0.5rem 0 0.2rem; padding-left: 1.2rem; }
.notes li { margin-bottom: 0.25rem; color: var(--muted); }

/* ---- KPI cards ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 0.7rem; }
.kpi { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 15px 17px; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi-value { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1; color: var(--green-deep); margin: 0.5rem 0 0.55rem; }
.kpi-value .neg { color: var(--spend); }
.kpi-sub { font-size: 11px; color: var(--faint); }
.kpi-edit { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--hair); background: var(--panel); color: var(--green-deep); cursor: pointer; font-size: 12px; line-height: 1; }
.kpi-edit:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.assume-reset { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.2rem; }

/* ---- assumptions ---- */
.assume { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin-bottom: 0.5rem; }
.ni { display: flex; flex-direction: column; gap: 0.3rem; font-size: 11px; font-weight: 600; color: var(--muted); }
.ni input { width: 8.6rem; }
.assume .btn { align-self: flex-end; }
input[type="number"], input[type="search"], input[type="text"], select {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  border: 1px solid var(--hair); border-radius: 6px; padding: 0.45rem 0.6rem; background: #fff;
}
input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(46,125,69,.12); }
.money-in { font-variant-numeric: tabular-nums; }

/* ---- buttons ---- */
.btn { font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 0.5rem 1.1rem; border: 1.5px solid var(--green-deep); background: var(--green-deep); color: #fff; border-radius: 50px; cursor: pointer; }
.btn:hover { background: var(--green); border-color: var(--green); }
.btn.on { background: var(--brass); border-color: var(--brass); }
.btn.subtle { background: #fff; color: var(--green-deep); }
.btn.subtle:hover { background: var(--panel); }
.mini { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--green-deep); background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 0.25rem 0.6rem; cursor: pointer; margin-right: 0.28rem; }
.mini:hover { border-color: var(--green); }
.mini.warn { color: var(--spend); }
.mini.primary { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.mini:disabled { opacity: 0.4; cursor: default; }

/* ---- filter bar / pills ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.9rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fbtn { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--hair); border-radius: 50px; padding: 0.32rem 0.85rem; cursor: pointer; transition: all .12s; }
.fbtn:hover { border-color: var(--green); }
.fbtn.on { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
#pf-search, #pv-search { min-width: 210px; flex: 1; max-width: 320px; }
#pf-costmin, #pf-costmax { width: 7rem; }

/* ---- scenario bar ---- */
/* A secondary, low-emphasis control: a one-click preset for the scenario
   you're already editing, not a primary action — so it uses the same light
   .fbtn pill as the project-filter row rather than the bold .btn style. */
.method-lbl { font-size: 11.5px; font-weight: 700; color: var(--brass); text-transform: uppercase; letter-spacing: .08em; margin: 0.6rem 0 0.35rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.method-lbl .hint { font-weight: 400; text-transform: none; letter-spacing: normal; }
.scenario-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.thr-group { display: inline-flex; gap: 0.35rem; align-items: center; }
.thr-group input { width: 8.5rem; }
.mode-note { font-size: 11.5px; color: var(--brass); font-weight: 600; }

/* ---- plan bar ---- */
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.7rem 0 0.2rem; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.plan-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 11.5px; font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 0.2rem 0.5rem 0.2rem 0.55rem; }
.plan-swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.plan-del { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0 0 0 0.1rem; }
.plan-del:hover { color: var(--spend); }

/* ---- funding ledger ---- */
.ledger { border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; margin-top: 0.8rem; }
.ledger-head, .ledger-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr 1fr 1fr 1.1rem;
  align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.9rem;
}
.ledger-head { background: var(--green-deep); color: #fff; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
/* value columns center-justified beneath their headers */
.ledger-head .r { text-align: center; }
.ledger-body { max-height: 420px; overflow-y: auto; }
.ledger-row { border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.ledger-row:last-child { border-bottom: none; }
.ledger-row:nth-child(even) { background: #FAFBF8; }
.ledger-row .yr { font-weight: 600; color: var(--muted); }
.ledger-row .bal { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green-deep); }
.ledger-row .bal.neg { color: var(--spend); }
.ledger-row.edited { background: var(--hl); }
.ledger-row.edited:nth-child(even) { background: var(--hl); }
.ledger-row .dot { font-size: 9px; color: var(--brass); text-align: center; }
.ledger-in {
  width: 100%; max-width: 9rem; justify-self: center; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
  border: 1px solid transparent; border-radius: 5px; padding: 0.25rem 0.45rem; background: transparent; color: var(--ink);
}
.ledger-in:hover { border-color: var(--hair); background: #fff; }
.ledger-in:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 2px rgba(46,125,69,.12); }
.ledger-in:disabled { color: var(--muted); cursor: default; }

/* Study recommendation is a reference view, not an editable scenario */
.readonly-note { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0; }

/* ---- tables ---- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 14px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; background: #fff; }
.tbl th { background: var(--green-deep); color: #fff; text-align: left; padding: 0.5rem 0.7rem; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { background: var(--green); }
.tbl th .arrow { opacity: 0.5; font-size: 9px; margin-left: 3px; }
.tbl th.sorted .arrow { opacity: 1; color: var(--gold); }
.tbl td { border-bottom: 1px solid var(--hair); padding: 0.5rem 0.7rem; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover td { background: #FAFBF8; }
.tbl .empty { text-align: center; color: var(--faint); padding: 1.4rem; }
.tbl tr.deleted td { opacity: 0.5; }
.tbl tr.deleted .cname { text-decoration: line-through; }
.cname { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.ccat { font-size: 11px; color: var(--faint); }
/* compact, consistent entry columns for unit cost / next year / useful life */
.cell-in { width: 5rem; padding: 0.28rem 0.4rem; font-size: 12px; font-variant-numeric: tabular-nums; }
.cell-in.year, .cell-in.ul { text-align: center; }
.cell-in.cost { text-align: right; }
/* give the Project name column room */
.tbl.projects th:first-child, .tbl.projects td:first-child { min-width: 18rem; }
.qtycol { min-width: 5.5rem; max-width: 8rem; white-space: normal; line-height: 1.2; }
.sched-note { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
/* stacked, equal-width action buttons (frees table width) */
.tbl td.actions { white-space: normal; width: 1%; }
.tbl td.actions .mini { display: block; width: 100%; min-width: 0; text-align: center; margin: 0 0 3px 0; }
.tbl td.actions .mini:last-child { margin-bottom: 0; }

.badge { display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 10px; padding: 0.08rem 0.4rem; vertical-align: 1px; margin-left: 0.15rem; }
.badge.tuned { background: #E9F2EA; color: var(--green); border: 1px solid #CBE0CE; }
.badge.edit { background: #FBF1DC; color: var(--amber); border: 1px solid #EAD9B0; }
.badge.del { background: #F7E9E4; color: var(--spend); border: 1px solid #E8CDC2; }

/* ---- coordination ---- */
.coord { margin: 0.4rem 0 1rem; }
.coord-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; margin-top: 0.5rem; }
.coord-card { border: 1px solid #CBE0CE; background: #F3F8F3; border-radius: 12px; padding: 0.6rem 0.8rem; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.coord-card:hover { border-color: var(--green); box-shadow: 0 1px 6px rgba(31,81,50,.12); }
.coord-card.active { border-color: var(--green-deep); box-shadow: 0 0 0 2px rgba(31,81,50,.18); }
.coord-card:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.cc-title { font-family: var(--serif); font-weight: 600; color: var(--green-deep); font-size: 14px; text-transform: capitalize; }
.cc-meta { font-size: 11px; color: var(--brass); font-weight: 600; margin: 0.15rem 0; }
.cc-props { font-size: 11px; color: var(--muted); }
.active-filter { display: flex; align-items: center; gap: 0.5rem; font-size: 12px; color: var(--muted); background: var(--hl); border: 1px solid #EAD9B0; border-radius: 7px; padding: 0.4rem 0.7rem; margin-bottom: 0.6rem; }
.active-filter b { color: var(--green-deep); text-transform: capitalize; }
.chip-clear { margin-left: auto; background: none; border: none; color: var(--brass); font-weight: 600; font-size: 11.5px; cursor: pointer; }
.chip-clear:hover { color: var(--spend); }
/* Properties with no metro are excluded from auto-grouping — say so, rather
   than letting an empty coordination row read as "nothing to coordinate". */
.coord-warn { background: #FBF1DC; border: 1px solid #EAD9B0; border-left: 4px solid var(--amber); border-radius: 8px; padding: 0.55rem 0.85rem; margin: 0.4rem 0 0.7rem; font-size: 12px; color: #6f5312; line-height: 1.5; }
.coord-warn b { color: var(--green-deep); }
.coord-warn .linklike { margin-left: 0.15rem; }

/* ---- metro suggestions: Census-derived, always just a suggestion until accepted ---- */
.explain.suggestion { background: var(--hl); border-radius: 6px; padding: 0.5rem 0.7rem; margin-top: 0.5rem; color: var(--ink); }
.metro-suggestions { background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: 0.5rem 0.85rem; margin: 0 0 0.7rem; font-size: 12px; }
.metro-suggestions .ms-head { color: var(--muted); margin-bottom: 0.3rem; }
.metro-suggestions .ms-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--hair); }
.metro-suggestions .ms-row:first-of-type { border-top: none; }
.metro-suggestions .ms-name { font-weight: 600; }
.metro-suggestions .ms-loc, .metro-suggestions .ms-arrow { color: var(--muted); }
.metro-suggestions .ms-metro { color: var(--green-deep); }
.metro-suggestions .ms-use { margin-left: auto; }
.coord h3 .hint em { font-style: normal; text-decoration: underline; }

/* ---- upload ---- */
.upload-zone { border: 2px dashed var(--hair); border-radius: 10px; background: #fff; padding: 1.6rem 1rem; margin-bottom: 1.2rem; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--green); background: #F6FAF6; }
.uz-icon { font-size: 1.4rem; color: var(--green); }
.uz-label { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--green-deep); margin-top: 0.2rem; }
.uz-sub { color: var(--muted); font-size: 12px; margin-top: 0.25rem; }

/* ---- property cards ---- */
.pcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; margin-bottom: 1.2rem; }
.pcard { background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 15px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.pcard:hover { border-color: var(--green); box-shadow: 0 1px 6px rgba(31,81,50,.10); }
.pcard-head { display: flex; justify-content: space-between; align-items: start; gap: 0.4rem; }
.pcard-name { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--green-deep); line-height: 1.2; }
.pcard-meta { color: var(--faint); font-size: 11.5px; margin: 0.25rem 0 0.7rem; }
.pcard-stats { display: flex; flex-direction: column; gap: 0.22rem; font-size: 12.5px; }
.pcard-stats .lbl { display: inline-block; width: 6rem; color: var(--muted); font-size: 11.5px; }
.pcard-flag { margin-top: 0.5rem; font-size: 10.5px; color: var(--amber); font-weight: 700; }
.icon-btn { background: none; border: none; color: #B7C0B7; cursor: pointer; font-size: 0.85rem; }
.icon-btn:hover { color: var(--spend); }

/* ---- chart ---- */
.chartwrap { position: relative; }
.cfchart .hovercol:hover { fill: rgba(31,81,50,.05); }
.chart-tip { position: absolute; pointer-events: none; z-index: 5; background: #fff; border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 4px 18px rgba(26,33,28,.16); padding: 0.55rem 0.7rem; font-size: 11.5px; width: 230px; }
.chart-tip .tip-year { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--green-deep); margin-bottom: 0.3rem; }
.chart-tip .tip-line { display: flex; justify-content: space-between; gap: 0.6rem; color: var(--muted); }
.chart-tip .tip-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tip .tip-line b.neg { color: var(--spend); }
.chart-tip .tip-projhd { margin: 0.4rem 0 0.2rem; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); border-top: 1px solid var(--hair); padding-top: 0.35rem; }
.chart-tip .tip-proj { display: flex; justify-content: space-between; gap: 0.6rem; }
.chart-tip .tip-proj span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-tip .tip-proj span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.chart-tip .tip-none, .chart-tip .tip-more { color: var(--faint); font-style: italic; }
.legend .leg-item, .legend .leg-static { display: inline-flex; align-items: center; margin-right: 1rem; }
.legend .leg-item { cursor: pointer; user-select: none; }
.legend .leg-item.off { opacity: 0.4; text-decoration: line-through; }
.cfchart { width: 100%; height: auto; }
.cfchart .grid { stroke: #ECEFE9; stroke-width: 1; }
.cfchart .zero { stroke: #A9B3AA; stroke-width: 1.1; stroke-dasharray: 2 2; }
.cfchart .ylab { font-size: 10px; fill: var(--faint); text-anchor: end; }
.cfchart .xlab { font-size: 10px; fill: var(--faint); text-anchor: middle; }
.cfchart .bar { fill: var(--green); }
.cfchart .bar:hover { fill: var(--green-deep); }
.cfchart .balline { fill: none; stroke: var(--brass); stroke-width: 2.2; }
.cfchart .baldot { fill: var(--brass); }
.cfchart .baldot.neg { fill: var(--spend); }
.cfchart .threshold { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 6 4; }
.legend { font-size: 11.5px; color: var(--muted); margin-top: 0.35rem; }
.sw { display: inline-block; width: 16px; height: 9px; border-radius: 2px; margin: 0 0.3rem 0 0.8rem; vertical-align: middle; }
.sw.bar { background: var(--green); }
.sw.line { background: var(--brass); height: 3px; }
.sw.thr { background: var(--amber); height: 3px; }
.sw.zero { background: none; height: 0; border-top: 2px dashed #A9B3AA; border-radius: 0; }

/* ---- modal (component editor) ---- */
.modal-back { position: fixed; inset: 0; background: rgba(31,81,50,.38); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; z-index: 60; overflow-y: auto; }
.modal { background: var(--paper); border-radius: 10px; box-shadow: 0 14px 50px rgba(0,0,0,.28); width: 100%; max-width: 720px; overflow: hidden; }
.modal-head { background: var(--green-deep); color: #fff; padding: 0.9rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-head h3 { color: #fff; margin: 0; font-size: 15px; }
.modal-head .sub { color: var(--gold); font-size: 11px; }
.modal-close { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.modal-body { padding: 1.2rem 1.3rem; }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: none; }
.field input { width: 100%; font-variant-numeric: tabular-nums; }
.field.readonly .val { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--green-deep); padding: 0.35rem 0; border-bottom: 1px solid var(--hair); }
.field.readonly.hi .val { color: var(--brass); }
.modal-sub-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brass); margin: 1.3rem 0 0.6rem; }
.modal-chartwrap { border: 1px solid var(--hair); border-radius: 8px; background: #fff; padding: 0.8rem; }
.modal-foot { border-top: 1px solid var(--hair); padding: 0.9rem 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.modal-foot .left { display: flex; gap: 0.5rem; }
.field input[type="date"] { font-family: var(--sans); }
/* current-reserves explanation */
.explain { margin-top: 1rem; font-size: 12.5px; color: var(--muted); }
.explain p { margin-bottom: 0.6rem; line-height: 1.5; }
.explain-calc { border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
/* shared with login.html's own <style> block (kept in sync, not deduped —
   that page is a standalone static file loaded without this app's JS) */
.login-error { color: var(--spend); font-size: 12.5px; font-weight: 500; margin-top: 0.6rem; min-height: 1em; }
.au-pw-row { display: flex; gap: 0.4rem; }
.au-pw-row input { flex: 1; }
.explain-calc > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--hair); }
.explain-calc > div:last-child { border-bottom: none; }
.explain-calc b { font-variant-numeric: tabular-nums; color: var(--ink); }
.explain-calc .tot { background: var(--hl); }
.explain-calc .tot span, .explain-calc .tot b { font-weight: 700; color: var(--green-deep); }
.explain-calc .tot b.neg { color: var(--spend); }

/* ---- toast ---- */
.toast { position: fixed; bottom: 1.3rem; left: 50%; transform: translate(-50%, 20px); background: var(--green-deep); color: #fff; border-radius: 8px; padding: 0.6rem 1.1rem; font-size: 12.5px; opacity: 0; transition: all .25s; z-index: 80; max-width: 80vw; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--spend); }

@media (max-width: 760px) {
  .topbar, main { padding-left: 20px; padding-right: 20px; }
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .ledger-head, .ledger-row { grid-template-columns: 3.2rem 1fr 1fr 1fr 0.8rem; }
}

/* ===== second-round tweaks ===== */
/* property card sort control */
.cards-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0.2rem 0 0.6rem; }
.sort-ctl { font-size: 11.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.sort-ctl select { padding: 0.25rem 0.4rem; font-size: 12px; }

/* two-row filter bar */
.filter-bar.row2 { margin-top: -0.3rem; }
.filter-bar.row2 #pf-search { min-width: 240px; }
.filter-bar.row2 #pf-prop { min-width: 12rem; }

/* dual-handle cost range slider */
.cost-range { display: flex; flex-direction: column; gap: 0.25rem; min-width: 15rem; }
.cr-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cr-label b { color: var(--green-deep); font-variant-numeric: tabular-nums; }
.range-dual { position: relative; height: 22px; }
.range-dual input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; height: 22px; }
.range-dual input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--hair); border-radius: 2px; margin-top: 9px; }
.range-dual input[type="range"]::-moz-range-track { height: 4px; background: var(--hair); border-radius: 2px; }
.range-dual input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: var(--green-deep); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; margin-top: 3.5px; }
.range-dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: var(--green-deep); border: 2px solid #fff; cursor: pointer; }

/* projects: next-year cell with quick steppers */
.yearcell { white-space: nowrap; }
.yearcell .yr-val { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 0.4rem; }
.yr-steps { display: inline-flex; gap: 0.15rem; }
.stepbtn { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--green-deep); background: #fff; border: 1px solid var(--hair); border-radius: 4px; padding: 0.12rem 0.35rem; cursor: pointer; }
.stepbtn:hover { border-color: var(--green); background: var(--panel); }
.stepbtn:disabled { opacity: 0.4; cursor: default; }

/* funding plan scenario tabs — one control for "which scenario is active"
   (click the name) and "is it on the chart" (click ☑/☐), instead of a
   separate pill row plus an Editing dropdown. */
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.7rem 0 0.2rem; }
.plan-bar-lbl { font-size: 11.5px; font-weight: 700; color: var(--brass); text-transform: uppercase; letter-spacing: .08em; margin-right: 0.1rem; }
/* Every pill (scenario wrap or the lone "+ New scenario" tab) shares one
   box-sizing recipe — same border width, same vertical padding, same
   line-height — so they render at an identical height regardless of how
   many sub-controls (tab/vis/del) are nested inside the wrap. */
.plan-tab-wrap, .plan-tab.new {
  box-sizing: border-box; height: 1.9rem; border-radius: 14px; border: 1px solid var(--hair);
  font-family: var(--sans); font-size: 11.5px; line-height: 1;
}
.plan-tab-wrap { display: inline-flex; align-items: center; background: var(--panel); padding: 0 0.3rem 0 0.7rem; gap: 0.05rem; }
.plan-tab-wrap:hover { border-color: var(--green); }
.plan-tab-wrap.active { background: var(--green-deep); border-color: var(--green-deep); box-shadow: 0 0 0 2px var(--gold); }
/* Two independent states on the same tab: shown/hidden on the chart (.off)
   and "this is the one you're editing" (.active). Must never look alike. */
.plan-tab-wrap.off:not(.active) { opacity: 0.5; }
.plan-tab-wrap.off:not(.active) .plan-tab { text-decoration: line-through; color: var(--faint); }
.plan-tab-wrap.off .plan-swatch { filter: grayscale(1); }
.plan-tab { display: inline-flex; align-items: center; height: 100%; gap: 0.35rem; font: inherit; font-weight: 600; color: var(--muted); background: none; border: none; padding: 0 0.15rem; cursor: pointer; }
.plan-tab-wrap.active .plan-tab { color: #fff; cursor: default; }
.plan-vis { display: inline-flex; align-items: center; height: 100%; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 0 0.3rem; border-radius: 4px; }
.plan-vis:hover { background: rgba(0, 0, 0, .06); }
.plan-vis:disabled { cursor: default; opacity: 0.55; }
.plan-tab-wrap.active .plan-vis { color: rgba(255, 255, 255, .85); }
.plan-tab-wrap.active .plan-vis:hover { background: rgba(255, 255, 255, .18); }
.plan-tab-wrap .plan-del { display: inline-flex; align-items: center; height: 100%; background: none; border: none; color: var(--faint); cursor: pointer; font-size: 0.75rem; line-height: 1; padding: 0 0.35rem 0 0; }
.plan-tab-wrap .plan-del:hover { color: var(--spend); }
.plan-tab-wrap.active .plan-del { color: rgba(255, 255, 255, .7); }
.plan-tab.new { display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border-style: dashed; padding: 0 0.85rem; color: var(--green-deep); font-weight: 700; }
.plan-tab.new:hover { border-color: var(--green); background: var(--hl); }

/* new-scenario modal: quick starting-point buttons */
.ns-methods { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* narrow modal + confirm */
.modal.narrow { max-width: 400px; }
.confirm-msg { font-size: 13px; color: var(--muted); line-height: 1.5; }
.btn.danger { background: var(--spend); border-color: var(--spend); }
.btn.danger:hover { background: #9c4526; border-color: #9c4526; }

/* ===== central storage: save-state + provenance ===== */
.save-state { font-family: var(--sans); font-size: 11px; font-weight: 600; vertical-align: middle; margin-left: 0.4rem; }
.save-state.idle { display: none; }
.save-state.saving { color: var(--amber); }
.save-state.saving::before { content: "● "; }
.save-state.saved { color: var(--green); }
.save-state.saved::before { content: "✓ "; }
.save-state.error { color: var(--spend); }
.save-state.error::before { content: "⚠ "; }

/* provenance badges — third-party must be visually distinct from RA */
.badge.src-ra { background: #E9F2EA; color: var(--green); border: 1px solid #CBE0CE; }
.badge.src-third { background: #F7E9E4; color: var(--spend); border: 1px solid #E8CDC2; }
.pcard-badges { margin: 0.1rem 0 0.35rem; }

/* ===== Phase 2: metro ===== */
.badge.metro { background: #EEF2F7; color: var(--navy, #12335c); border: 1px solid #D6DEE8; }
.badge.metro.unassigned { background: var(--panel); color: var(--faint); border: 1px solid var(--hair); font-style: italic; }
.cc-metro { font-size: 11px; color: var(--muted); margin: 0.1rem 0; }
#pf-metro { min-width: 9rem; }

/* ===== Phase 3a: inventory (third-party) properties ===== */
/* distinct persistent treatment so an inventory study is never mistaken for RA */
.view.property.inventory { border-left: 4px solid var(--brass); padding-left: 12px; background: linear-gradient(90deg, #fbf6ea 0, transparent 340px); }
.inv-banner { background: #fbf1dc; border: 1px solid #EAD9B0; border-radius: 8px; padding: 0.55rem 0.9rem; margin: 0.4rem 0 0.9rem; font-size: 12.5px; color: #6f5312; }
.inv-banner b { color: var(--green-deep); }
.inv-unavailable { background: var(--panel); border: 1px dashed var(--hair); border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 1.1rem; font-size: 12px; color: var(--faint); }
.pcard.inventory { border-left: 3px solid var(--brass); }
.pcard-flag.inv { color: var(--brass); }
/* overdue projects — distinct in both tables */
tr.overdue td { background: #fbece6; }
.overdue-tag { display: inline-block; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--spend); border-radius: 8px; padding: 0.02rem 0.4rem; vertical-align: 1px; }
/* which properties in a coordination group are third-party */
.cc-third { font-size: 10.5px; color: var(--brass); margin-top: 0.2rem; }

/* ===== Phase 3b: competitor Excel ingest ===== */
.import-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0.7rem 0 0.2rem; }
.import-actions .hint, .dev-seed .hint { margin-left: 0.1rem; }
.modal.wide { max-width: 900px; width: 92vw; }
.ingest-intake .ingest-sec { font-weight: 700; color: var(--green-deep); margin: 0.9rem 0 0.4rem; font-size: 12.5px; }
.ingest-intake .ingest-sec:first-child { margin-top: 0; }
.map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: center; padding: 0.18rem 0; }
.map-row label { font-size: 12.5px; color: var(--ink); }
.map-row .req { color: var(--spend); }
.map-row select { width: 100%; }
.ingest-note { font-size: 11.5px; color: var(--faint); margin-top: 0.6rem; }
#ig-maperr:empty { display: none; }
#ig-maperr { color: var(--spend); font-size: 12px; margin-top: 0.5rem; }
.ingest-grid-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; font-size: 12.5px; }
.ingest-grid-head .cost-type label { margin-left: 0.5rem; font-weight: 500; }
.ingest-grid { max-height: 52vh; overflow: auto; }
.ingest-grid table.tbl input { width: 100%; box-sizing: border-box; padding: 0.2rem 0.35rem; font-size: 12px; border: 1px solid var(--hair); border-radius: 4px; }
.ingest-grid input.g-qty, .ingest-grid input.g-cost, .ingest-grid input.g-year { text-align: right; }
.ingest-grid tr.row-error td { background: #fbece6; }
.ingest-grid td.g-flag { font-size: 10.5px; color: var(--spend); white-space: normal; max-width: 180px; }
.btn.disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Phase 3b: competitor PDF ingest — page picker ===== */
.pdf-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; max-height: 56vh; overflow: auto; padding: 0.2rem; }
.pdf-page-thumb { border: 2px solid var(--hair); border-radius: 8px; padding: 0.35rem; text-align: center; cursor: pointer; transition: border-color .1s; }
.pdf-page-thumb.selected { border-color: var(--green-deep); background: #eef4ee; }
.pdf-page-canvas-wrap { display: flex; align-items: center; justify-content: center; min-height: 90px; background: #f4f4f2; border-radius: 4px; overflow: hidden; }
.pdf-page-canvas-wrap canvas { max-width: 100%; height: auto; display: block; }
.pdf-page-loading { font-size: 11px; color: var(--faint); padding: 1.5rem 0; }
.pdf-page-check { display: block; margin-top: 0.3rem; font-size: 11.5px; cursor: pointer; }
.pdf-page-check input { vertical-align: -1px; margin-right: 0.25rem; }

/* ===== error box (surfaces load failures instead of hanging on "Loading…") ===== */
.err-box { max-width: 620px; margin: 2rem auto; background: var(--panel); border: 1px solid var(--hair); border-left: 4px solid var(--spend); border-radius: 10px; padding: 1.3rem 1.5rem; }
.err-box h2 { margin: 0 0 0.5rem; color: var(--green-deep); font-size: 18px; }
.err-box .err-msg { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; background: #fbece6; border-radius: 6px; padding: 0.5rem 0.7rem; color: #7a2e17; overflow-wrap: anywhere; }
.err-box .hint { margin: 0.7rem 0 1rem; }
.err-box code { background: #eef0ec; border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 12px; }

/* ===== Phase 4: custom coordination groups ===== */
.tbl .sel-col { width: 34px; text-align: center; }
.tbl input.occ-sel { width: 16px; height: 16px; cursor: pointer; }
.cc-badge { display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 8px; padding: 0.05rem 0.4rem; vertical-align: 1px; }
.cc-badge.auto { background: #e7efe7; color: var(--green-deep); }
.cc-badge.custom { background: #efe4c6; color: #6f5312; }
.coord-card.custom { border-left: 3px solid var(--brass); }
.coord-card .cc-edit { float: right; border: none; background: transparent; cursor: pointer; font-size: 12px; color: var(--faint); padding: 0 2px; }
.coord-card .cc-edit:hover { color: var(--ink); }
.cc-stale { color: var(--spend); }
/* floating action bar */
.coord-actionbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 60;
  background: var(--green-deep); color: #fff; border-radius: 10px; padding: 0.6rem 1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22); display: flex; align-items: center; gap: 1rem; }
.coord-actionbar[hidden] { display: none; }
.coord-actionbar .ab-label b { color: #fff; }
.coord-actionbar .btn { margin: 0; }
.coord-actionbar .btn.subtle { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
/* create/edit group modal lists */
.cg-list { list-style: none; margin: 0.3rem 0 0; padding: 0; max-height: 320px; overflow: auto; }
.cg-list li { padding: 0.35rem 0.2rem; border-bottom: 1px solid var(--hair); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.cg-list li.stale-item { background: #fbece6; }
.cg-list .stale-msg { font-size: 10.5px; color: var(--spend); margin-top: 0.15rem; }
.cg-review .sec-lbl { margin-top: 0.6rem; }

/* ===== footer credit: RA operates the platform, so it gets a quiet
   mention here rather than co-billing in the header ===== */
.site-footer {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 22px 40px 40px; color: var(--faint); font-size: 12px; font-weight: 500;
}
.ra-logo-footer { height: 20px; width: auto; opacity: 0.85; }