/* ============================================================
   SAVANT CG — Portal Standards  v1.0
   Single shared stylesheet for all portal pages.
   Load BEFORE any per-page <style> block so per-page rules
   can override these defaults without !important.
   Sidebar / nav styles are managed by sidebar.js — not here.
   ============================================================ */

/* ── 1. Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* ── 2. CSS Custom Properties ────────────────────────────── */
/*
   Two naming conventions coexist across pages.
   Both sets are defined here as aliases so every page works
   whether it uses --bg / --surface / --text (payapps-style)
   or --blk / --d1 / --txt (contracts-style).
*/
:root {
  /* ── Gold palette ── */
  --gold:        #C9A84C;
  --gold-l:      #e2c47a;
  --gold-light:  #e2c47a;
  --gold-d:      #a07c30;
  --gold-dim:    rgba(201,168,76,.13);
  --gold-bg:     rgba(201,168,76,.08);
  --gold-b:      rgba(201,168,76,.28);
  --gold-bdr:    rgba(201,168,76,.20);
  --gold-border: rgba(201,168,76,.30);

  /* ── Backgrounds (both naming sets) ── */
  --bg:       #0a0a0a;
  --blk:      #080808;
  --bg2:      #111111;
  --surface:  #111111;
  --d1:       #101010;
  --panel:    #101010;
  --topbar:   #111111;
  --surface2: #161616;
  --d2:       #161616;
  --surface3: #1a1a1a;
  --d3:       #1e1e1e;
  --d4:       #262626;
  --d5:       #303030;
  --bdr:      #2a2a2a;
  --border:   rgba(255,255,255,.07);

  /* ── Text (both naming sets) ── */
  --text:       #e8e8e8;
  --txt:        #ebebeb;
  --txt1:       #ebebeb;   /* used by project, sitevisits, monthlyreport */
  --text-muted: #888888;
  --txt2:       #aaaaaa;
  --txt3:       #666666;
  --text-dim:   #555555;

  /* ── Danger / Red ── */
  --danger:        #e05252;
  --red:           #e05858;
  --danger-dim:    rgba(224,82,82,.15);
  --red-d:         rgba(224,88,88,.14);
  --red-dim:       rgba(224,88,88,.14);
  --red-bg:        rgba(224,88,88,.10);
  --danger-border: rgba(224,82,82,.35);
  --red-b:         rgba(224,88,88,.35);
  --red-bdr:       rgba(224,88,88,.25);

  /* ── Success / Green ── */
  --success:        #4caf82;
  --grn:            #4db88a;
  --green:          #4db88a;
  --success-dim:    rgba(76,175,130,.15);
  --grn-d:          rgba(77,184,138,.14);
  --grn-dim:        rgba(77,184,138,.14);
  --grn-bg:         rgba(77,184,122,.10);
  --success-border: rgba(76,175,130,.35);
  --grn-b:          rgba(77,184,138,.35);
  --grn-bdr:        rgba(77,184,122,.25);

  /* ── Warning / Amber ── */
  --warn:        #e0a052;
  --amb:         #e09a35;
  --amber:       #e09a35;
  --warn-dim:    rgba(224,160,82,.15);
  --amb-d:       rgba(224,154,53,.14);
  --amb-dim:     rgba(224,154,53,.14);
  --amb-bg:      rgba(212,168,67,.10);
  --warn-border: rgba(224,160,82,.35);
  --amb-b:       rgba(224,154,53,.35);
  --amb-bdr:     rgba(212,168,67,.25);

  /* ── Blue ── */
  --blue:        #6495ed;
  --blu:         #5b8fd4;
  --blue-dim:    rgba(100,149,237,.15);
  --blu-d:       rgba(91,143,212,.14);
  --blu-dim:     rgba(91,143,212,.14);
  --blu-bg:      rgba(91,155,213,.10);
  --blue-border: rgba(100,149,237,.30);
  --blue-b:      rgba(100,149,237,.35);
  --blu-b:       rgba(91,143,212,.35);
  --blu-bdr:     rgba(91,155,213,.25);

  /* ── Purple ── */
  --purple:        #7c5fc8;
  --purple-border: rgba(124,95,200,.35);
  --purple-dim:    rgba(124,95,200,.14);

  /* ── Teal ── */
  --teal:     #3db8a8;
  --teal-dim: rgba(61,184,168,.14);

  /* ── Orange ── */
  --ora: #e07a35;

  /* ── Typography ── */
  --font:           'Barlow', sans-serif;
  --sans:           'Barlow', sans-serif;
  --font-serif:     'Cormorant Garamond', serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-cond:      'Barlow Condensed', sans-serif;
  --mono:           'Courier New', monospace;

  /* ── Layout ── */
  --radius:        6px;
  --rad:           6px;
  --sidebar-width: 220px;
  --sb-w:          220px;
  --sw:            220px;
  --topbar-height: 52px;
  --top-h:         52px;
}

/* ── 3. Base Reset ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 4. Document Base ────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── 5. Scrollbars ───────────────────────────────────────── */
::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: #2a2a4e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── 6. Topbar ───────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--gold-border);
  padding: 0 24px;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Page title — Cormorant, gold, uppercase */
/* The topbar title is the larger, uppercase treatment. A .page-title is
   excluded: it is the page's own title and keeps the 20px treatment whatever
   element or container holds it. */
.topbar-left h1:not(.page-title),
.topbar h1:not(.page-title) {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
}

/* Page subtitle — Barlow, muted */
.topbar-left p,
.topbar p,
.topbar-left .page-sub {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.topbar-right,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Breadcrumb topbar (contracts-style) */
.topbar-logo {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .08em;
  text-decoration: none;
}
.topbar-sep   { color: var(--txt3); }
.topbar-title { color: var(--txt2); font-size: 13px; }

/* Separate page-header section below topbar (contracts-style) */
.page-header {
  padding: 28px 32px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--d3);
}

/* Directly beneath the page header sits a tab strip on some pages; those want
   the border to meet the tabs with no gap. */
.page-header.is-flush { padding-bottom: 0; }

/* Some pages put their header INSIDE a max-width container that already
   supplies horizontal padding -- clients, intake, master. Repeating the
   full-bleed padding there double-indents the title and draws a rule that
   stops short of both edges. This is that pattern, named rather than
   re-invented per page. */
.page-header.is-inline {
  padding: 0;
  border-bottom: none;
  margin-bottom: 28px;
}

/* The Budget Control treatment, adopted as the standard: Cormorant at 22px,
   weight 700, gold, with a muted subtitle beneath. Every page title now uses
   it, so changing it here changes all of them. */
.page-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.page-sub,
.page-subtitle,
.budget-subtitle,
.mod-meta,
.screen-sub {
  font-family: var(--font);
  font-size: 12px;
  color: var(--txt3);
  margin: 2px 0 0;
}

.back-link {
  display: inline-block;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: .04em;
  margin: 0 0 8px;
  cursor: pointer;
  transition: color .15s;
}
.back-link:hover { color: var(--gold); }

.back-to-project {
  color: var(--text-muted) !important;
  text-decoration: none;
}
.back-to-project:hover { color: var(--gold) !important; }

/* Section label (group header inside page body) */
.section-label,
.ps-section-label {
  font-family: var(--font-condensed);
  font-size: 10px;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ── 7. Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Gold outline — default portal action */
.btn-gold,
.btn-outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.btn-gold:hover,
.btn-outline:hover {
  background: var(--gold);
  color: #1a1a2e;
}

/* Gold filled — primary CTA */
.btn-primary,
.btn-filled,
.btn-gold {
  background: var(--gold);
  color: #1a1a2e;
  border: none;
  font-weight: 600;
  letter-spacing: .04em;
}
.btn-primary:hover,
.btn-filled:hover,
.btn-gold:hover {
  background: var(--gold-light);
  color: #1a1a2e;
}

/* Ghost — secondary / cancel */
.btn-ghost,
.btn-outline {
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text-muted);
}
.btn-ghost:hover,
.btn-outline:hover {
  border-color: rgba(255,255,255,.3);
  color: var(--text);
}

/* Danger */
.btn-danger,
.btn-red {
  background: transparent;
  border: 1px solid var(--danger-border);
  color: var(--danger);
}
.btn-danger:hover,
.btn-red:hover {
  background: var(--danger);
  color: #ffffff;
}

/* Back / subtle outline */
.btn-back,
.btn-subtle {
  background: none;
  border: 1px solid var(--gold-border);
  color: var(--gold);
  padding: 5px 14px;
  font-family: var(--font);
  font-size: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s;
}
.btn-back:hover,
.btn-subtle:hover { background: var(--gold-dim); }

/* Sizes */
.btn-lg { padding: 10px 24px; font-size: 14px; }
.btn-sm { padding: 4px 10px;  font-size: 12px; }
.btn-xs { padding: 2px 8px;   font-size: 11px; }

/* Icon-only */
.btn-icon,
.icon-btn {
  background: none;
  border: none;
  color: var(--txt3);
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 14px;
  transition: color .12s, background .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover,
.icon-btn:hover         { color: var(--text); background: rgba(255,255,255,.06); }
.icon-btn.danger:hover  { color: var(--danger); background: var(--danger-dim); }
.icon-btn.gold:hover    { color: var(--gold);   background: var(--gold-dim); }

/* ── 8. Form Elements ────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="password"],
input:not([type]),
select,
textarea {
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  transition: border-color .12s;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold-border);
}
select option    { background: var(--surface2); color: var(--text); }
textarea         { resize: vertical; min-height: 72px; }
input::placeholder,
textarea::placeholder { color: var(--txt3); }

/* Field / form row wrapper */
.field,
.fr { margin-bottom: 14px; }

.field label,
.fr label,
.form-label {
  display: block;
  font-family: var(--font-condensed);
  font-size: 10px;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 5px;
}

.field input, .field select, .field textarea,
.fr input,    .fr select,    .fr textarea {
  width: 100%;
  background: var(--surface3);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  transition: border-color .12s;
}
.field input:focus, .field select:focus, .field textarea:focus,
.fr input:focus,    .fr select:focus,    .fr textarea:focus {
  outline: none;
  border-color: var(--gold-border);
}

/* Form grids */
.form-grid,
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fg3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-grid .span2,
.fg2 .span2,
.fg-span2 { grid-column: 1 / -1; }

/* Form section divider */
.form-section {
  font-family: var(--font-condensed);
  font-size: 10px;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 20px 0 12px;
  border-top: 1px solid var(--d3);
  padding-top: 16px;
}

/* Error / hint messages */
.err-msg,
.form-error {
  background: var(--danger-dim);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px;
  margin-top: 12px;
  display: none;
}
.sov-hint,
.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Search input */
.search-wrap             { position: relative; }
.search-wrap input       { width: 100%; padding-left: 32px; }
.search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--txt3);
  font-size: 13px;
  pointer-events: none;
}

/* Filter select */
.filter-select {
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
}
.filter-select:focus   { outline: none; border-color: var(--gold-border); }
.filter-select option  { background: var(--surface2); }

/* ── 9. Toolbar ──────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.toolbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }

label.lbl {
  font-family: var(--font-condensed);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── 10. Tables ──────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead,
thead tr { background: var(--surface3); }

th {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--txt3);
  border-bottom: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
tr:last-child td  { border-bottom: none; }
tr:hover td       { background: rgba(255,255,255,.02); }
td.num, th.num    { text-align: right; font-family: var(--mono); }
td.actions        { text-align: right; white-space: nowrap; }
.num              { font-family: var(--mono); text-align: right; }

/* ── 11. Stat / Summary Cards ────────────────────────────── */
.cards,
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 20px 0;
}
@media (max-width: 1100px) {
  .cards, .stat-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cards, .stat-cards { grid-template-columns: 1fr; }
}

.card,
.stat-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.card-label,
.stat-label {
  font-family: var(--font-condensed);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.card-value,
.stat-value {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.1;
}
.card-sub,
.stat-sub {
  font-family: var(--font-condensed);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* Summary cards (contracts-style: inside page body) */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.sum-card {
  background: var(--surface2);
  border: 1px solid var(--d3);
  border-radius: var(--radius);
  padding: 16px;
}
.sum-card.gold { border-color: var(--gold-border); }
.sum-card.grn  { border-color: var(--grn-b); }
.sum-card.red  { border-color: var(--danger-border); }

.sum-label {
  font-family: var(--font-condensed);
  font-size: 10px;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.sum-value {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--text);
}
.sum-card.gold .sum-value { color: var(--gold); }
.sum-card.grn  .sum-value { color: var(--grn); }
.sum-card.red  .sum-value { color: var(--danger); }

/* Financial mini-cards (contracts detail panel) */
.fin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.fin-card {
  background: var(--surface2);
  border: 1px solid var(--d3);
  border-radius: var(--radius);
  padding: 12px;
}
.fin-label {
  font-family: var(--font-condensed);
  font-size: 9px;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.fin-value {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text);
}

/* ── 12. Status Badges ───────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-draft     { background: rgba(136,136,136,.12); color: #888888;          border: 1px solid rgba(136,136,136,.25); }
.badge-submitted,
.badge-sent      { background: var(--blue-dim);       color: var(--blue);       border: 1px solid var(--blue-border); }
.badge-review,
.badge-pending   { background: var(--warn-dim);       color: var(--warn);       border: 1px solid var(--warn-border); }
.badge-approved,
.badge-active,
.badge-complete  { background: var(--success-dim);    color: var(--success);    border: 1px solid var(--success-border); }
.badge-rejected  { background: var(--danger-dim);     color: var(--danger);     border: 1px solid var(--danger-border); }
.badge-void,
.badge-cancelled { background: rgba(60,60,60,.35);    color: #555555;           border: 1px solid rgba(100,100,100,.25); }
.badge-gold      { background: var(--gold-dim);       color: var(--gold);       border: 1px solid var(--gold-border); }
.badge-blue      { background: var(--blue-dim);       color: var(--blue);       border: 1px solid var(--blue-border); }

/* Pill status badge (no border, used inline in tables) */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.s-draft        { background: rgba(255,255,255,.07);  color: var(--txt3); }
.s-executed,
.s-issued       { background: var(--blu-d);            color: var(--blu); }
.s-active       { background: var(--grn-d);            color: var(--grn); }
.s-complete,
.s-received     { background: var(--gold-dim);         color: var(--gold); }
.s-terminated,
.s-cancelled,
.s-void         { background: var(--red-d);            color: var(--red); }
.s-pending,
.s-partial      { background: var(--amb-d);            color: var(--amb); }
.s-approved     { background: var(--grn-d);            color: var(--grn); }
.s-rejected     { background: var(--red-d);            color: var(--red); }

/* Code badge (cost code / ref number) */
.code-badge {
  font-family: var(--font-condensed);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .06em;
  background: var(--gold-dim);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ── 13. Modals ──────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface2);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  padding: 28px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-lg { max-width: 900px; }
.modal-xl { max-width: 1200px; }

.modal h2,
.modal-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.modal-sub,
.modal-subtitle { font-size: 12px; color: var(--txt3); margin-bottom: 22px; }

.modal-footer,
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--d3);
}

/* ── 14. Detail / Slide-in Panel ─────────────────────────── */
.detail-panel {
  position: fixed;
  top: 0;
  right: -620px;
  width: 600px;
  height: 100vh;
  background: var(--d1);
  border-left: 1px solid rgba(255,255,255,.07);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transition: right .28s cubic-bezier(.4,0,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.detail-panel.open { right: 0; }

.dp-head {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.dp-head h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  flex: 1;
}
.dp-body   { flex: 1; overflow-y: auto; padding: 20px 22px; }
.dp-section { margin-bottom: 20px; }
.dp-section h4 {
  font-family: var(--font-condensed);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dp-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.dp-row:last-child { border-bottom: none; }
.dp-lbl { font-size: 11px; color: var(--txt3); }
.dp-val { font-size: 12px; font-weight: 500; text-align: right; }

.panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 149;
}
.panel-overlay.open { display: block; }

/* ── 15. Toast Notifications ─────────────────────────────── */
#toast,
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* Single-element toast (payapps-style fade) */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--surface2);
  border: 1px solid var(--gold-border);
  color: var(--text);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font);
  opacity: 0;
  transition: opacity .3s;
  max-width: 340px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.toast.show  { opacity: 1; }
.toast.error { border-color: var(--danger-border); color: var(--danger); }
.toast.warn  { border-color: var(--warn-border);   color: var(--warn); }

/* Stacked toast items (contracts-style) */
.toast-item {
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: ps-slideUp .2s ease;
  pointer-events: auto;
  max-width: 340px;
}
.toast-item.good { border-left: 3px solid var(--grn); }
.toast-item.bad  { border-left: 3px solid var(--red); }
.toast-item.warn { border-left: 3px solid var(--amb); }

@keyframes ps-slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 16. Empty States ────────────────────────────────────── */
.empty,
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-icon { font-size: 40px; margin-bottom: 14px; opacity: .35; }
.empty h3,
.empty-state h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 8px;
}
.empty p,
.empty-state p { font-size: 13px; max-width: 380px; margin: 0 auto 20px; }

/* ── 17. Loading ─────────────────────────────────────────── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.loading::after {
  content: "";
  width: 28px; height: 28px;
  border: 2px solid var(--gold-border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ps-spin .7s linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #242424 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: ps-shimmer 1.4s infinite;
  border-radius: 4px;
}
@keyframes ps-shimmer { to { background-position: -200% 0; } }

/* ── 18. Utility Classes ─────────────────────────────────── */
.gold    { color: var(--gold); }
.muted   { color: var(--text-muted); font-size: 12px; }
.danger  { color: var(--danger); }
.success { color: var(--success); }
.warn    { color: var(--warn); }

.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.mt-4  { margin-top: 4px; }   .mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }  .mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; } .mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }.mb-24 { margin-bottom: 24px; }
.p-16  { padding: 16px; }      .p-20  { padding: 20px; }
.p-24  { padding: 24px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }

.text-right   { text-align: right; }
.text-center  { text-align: center; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap       { white-space: nowrap; }
.hidden       { display: none !important; }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-link     { color: var(--gold); text-decoration: none; cursor: pointer; }
.app-link:hover { text-decoration: underline; }

/* ── 19. Info Banner ─────────────────────────────────────── */
.info-banner {
  background: rgba(201,168,76,.06);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.warn-banner {
  background: var(--warn-dim);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--warn);
  margin-bottom: 12px;
}

/* ── 20. Print / PDF ─────────────────────────────────────── */
@media print {
  .no-print,
  #sb, #sidebar, .sidebar,
  .topbar, .toolbar,
  .modal-overlay,
  .detail-panel,
  .toast, #toast { display: none !important; }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: Arial, sans-serif;
    font-size: 11px;
  }
  .main-content, main, .content-area {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0;
  }
  .print-only { display: block !important; }
  table       { page-break-inside: avoid; }
  th          { background: #f0f0f0 !important; color: #000000 !important; }
  td          { border-color: #dddddd !important; }
}
.print-only { display: none; }

/* ── 21. iframe / embedded context ───────────────────────── */
html.in-iframe #sb,
html.in-iframe #sidebar { display: none !important; }
html.in-iframe .main-content,
html.in-iframe main,
html.in-iframe .content-area { margin-left: 0 !important; width: 100% !important; }

/* ── 22. Universal Title Override ────────────────────────── */
/*
   Catches every title pattern used across all 45 pages so the page heading
   renders gold Cormorant Garamond 28px uppercase regardless of which class
   or element a page uses. These !important rules win over any per-page style
   that forgets the standard.

   NOTE: .topbar-title is intentionally EXCLUDED here — it is used as a
   breadcrumb (small, muted) on ~10 pages and as a custom-sized heading on
   directcosts.html / sitevisits.html. Forcing it to 28px would break both.
   Those pages already declare Cormorant locally, so they need no override.
*/
/* A page title is 20px whatever element carries it. Without the :not() below,
   .page-header h1 won at 28px !important, so a page marking its title up as an
   h1 rendered visibly larger than the identical page using a div. That is the
   whole of why headers looked "close but not the same". */
.topbar h1:not(.page-title),
.topbar-left h1:not(.page-title),
.page-header h1:not(.page-title) {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: #C9A84C;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin: 0 0 4px;
}

/* Breadcrumb titles in the topbar stay small — they are NOT page titles.
   Scoped to .topbar-left so pages that use .topbar-title as a real heading
   (e.g. directcosts.html, sitevisits.html) keep their own size. */
.topbar-left .topbar-title {
  font-family: 'Barlow', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #888 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── 23. Light / Dark Mode ───────────────────────────────── */
html.theme-light {
  --bg:       #f4f4f4;
  --blk:      #f4f4f4;
  --surface:  #ffffff;
  --d1:       #ffffff;
  --surface2: #f8f8f8;
  --d2:       #f0f0f0;
  --surface3: #eeeeee;
  --d3:       #e0e0e0;
  --d4:       #d0d0d0;
  --d5:       #c0c0c0;
  --bdr:      #cccccc;
  --border:   rgba(0,0,0,.10);
  --text:     #1a1a1a;
  --txt:      #1a1a1a;
  --txt1:     #1a1a1a;
  --text-muted: #666666;
  --txt2:     #555555;
  --txt3:     #888888;
  --text-dim: #999999;
}
html.theme-light body         { background: var(--bg); color: var(--text); }
html.theme-light .topbar      { border-bottom-color: #e0e0e0; }
html.theme-light input,
html.theme-light select,
html.theme-light textarea     { background: #ffffff; border-color: #d0d0d0; color: #1a1a1a; }
html.theme-light select option { background: #ffffff; color: #1a1a1a; }
html.theme-light .modal       { background: #ffffff; }
html.theme-light thead,
html.theme-light thead tr     { background: #f0f0f0; }
html.theme-light th           { color: #666666; }
html.theme-light tr:hover td  { background: rgba(0,0,0,.02); }
html.theme-light .card,
html.theme-light .stat-card   { background: #ffffff; border-color: rgba(0,0,0,.08); }

/* ==========================================================================
   Shared chrome: the sidebar mark, the topbar, and the title aliases.

   These were defined per page -- .sb-logo by 36 pages, .topbar by 22, with
   four topbar heights, five paddings, five border colours and titles at 22px
   or 28px between them. That is why headers were never the same: they were not
   differently-padded copies of one component, they were different components.

   The declarations below are the majority form, lifted from the pages that
   already agreed with each other. Page-level copies are removed; a page that
   genuinely needs a different shape uses a named variant, not its own rule.
   ========================================================================== */

/* --- Sidebar mark ------------------------------------------------------- */
.sb-logo {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  display: flex;
  align-items: center;
  justify-content: center;
  /* never clip the mark: pages set padding that left it 25px tall against a
     36px image, and the shared rule used to hide the overflow */
  overflow: visible;
}
.sidebar-logo {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  /* the asset is black artwork on transparency, so it inverts to white here
     and stays black on a light ground */
  filter: brightness(0) invert(1);
}
html.theme-light .sidebar-logo { filter: brightness(0); }

/* --- Topbar ------------------------------------------------------------- */
.topbar {
  background: var(--d1);
  border-bottom: 1px solid var(--gold-b);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }

/* A few pages put the topbar inside a container that already pads, and pulled
   it back out with a negative margin. Named rather than repeated. */
.topbar.is-inset { margin: -28px -32px 28px; }

/* --- Title aliases ------------------------------------------------------ */
/* These are page titles wearing other class names. One treatment, so a page
   does not look different for having been written in a different month. */
.mod-title,
.screen-title,
.budget-title,
.page-hdr h1,
.page-hdr-left h1 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}
.page-hdr,
.page-hdr-left { display: flex; align-items: flex-start; gap: 14px; }
.page-hdr { justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; }