/* T-VFX MENA Finance */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0C0F14;
  --surface: #131822;
  --raised: #1A2130;
  --border: #242D3E;
  --border-soft: #1D2534;
  --ink: #EDF1F7;
  --ink-2: #9AA5B8;
  --ink-3: #677182;
  --accent: #EFA33C;
  --accent-2: #E2702B;
  --accent-grad: linear-gradient(135deg, #F5B54A, #DE5F27);
  --good: #55C58C;
  --bad: #E56A56;
  --series-invoiced: #6B93DB;
  --series-funded: #D07E1F;
  --radius: 12px;
  --radius-sm: 8px;
  font-size: 15px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 14px;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.brand-mark { width: 42px; height: 38px; flex-shrink: 0; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.04em; }
.brand-sub { font-size: 0.68rem; color: var(--ink-2); letter-spacing: 0.22em; text-transform: uppercase; margin-top: 2px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; overflow-y: auto; }
.nav-section {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 12px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: none; border: none;
  color: var(--ink-2);
  font: inherit; font-weight: 500; font-size: 0.93rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.nav-item svg { width: 17px; height: 17px; fill: currentColor; opacity: 0.85; }
.nav-item:hover { background: var(--raised); color: var(--ink); }
.nav-item.active { background: var(--raised); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }

/* Yanes Ventures endorsement line — software chrome only, never on client documents */
.yv-endorse {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.yv-endorse svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.9; }
.sidebar-foot .yv-endorse { padding: 8px 8px 0; }

/* Clickable YV elements: inert until app.js wires YV_SITE_URL; hover color only, per YV motion rules */
.yv-link { cursor: pointer; text-decoration: none; transition: color 120ms cubic-bezier(0.2, 0, 0, 1); }
.yv-link:hover { color: var(--ink-2); }

.login-endorse { justify-content: center; margin-top: 26px; }

/* Logo sting: columns rise, the gap opens, the wordmark wipes in behind a hard edge */
.yv-sting {
  position: fixed; inset: 0; z-index: 200;
  background: #191B1F; color: #F5F4F1;
  display: flex; align-items: center; justify-content: center;
}
.yv-sting.out { opacity: 0; transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1); }
.yv-sting-inner { display: flex; align-items: center; gap: 14px; }
.yv-sting-mark { width: 42px; height: 42px; }
.yv-s-whole, .yv-s-top { animation: yv-rise 240ms cubic-bezier(0.2, 0, 0, 1) both; }
.yv-s-base { animation: yv-rise-gap 360ms cubic-bezier(0.2, 0, 0, 1) both; }
.yv-sting-word {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  clip-path: inset(0 100% 0 0);
  animation: yv-wipe 200ms cubic-bezier(0.2, 0, 0, 1) 360ms forwards;
}
@keyframes yv-rise { from { transform: translateY(64px); } to { transform: translateY(0); } }
@keyframes yv-rise-gap { 0% { transform: translateY(56px); } 66% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes yv-wipe { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .yv-s-whole, .yv-s-top, .yv-s-base { animation: none; }
  .yv-sting-word { animation: none; clip-path: none; }
}

/* ---------- Buttons & inputs ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: 0.9rem;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.12s, background 0.12s, border-color 0.12s;
}
.btn-primary { background: var(--accent-grad); color: #17120A; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--border); }
.btn-ghost:hover { background: var(--raised); color: var(--ink); }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(229, 106, 86, 0.4); }
.btn-danger:hover { background: rgba(229, 106, 86, 0.12); }
.btn-block { width: 100%; }

.input {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(239, 163, 60, 0.15); }
select.input { cursor: pointer; }
select.input option { background: var(--raised); color: var(--ink); }
select.input option:hover, select.input option:checked { background: var(--accent); color: #17120A; }

.field-label { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.field-hint { font-size: 0.78rem; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }

/* ---------- Main layout ---------- */
.main { flex: 1; padding: 28px 32px 48px; min-width: 0; }
.view-head { margin-bottom: 22px; }
.view-head h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.view-sub { color: var(--ink-2); font-size: 0.9rem; margin-top: 5px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.panel-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .panel-row { grid-template-columns: 1fr; } }

/* ---------- KPI tiles ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.kpi-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
/* A figure never breaks between its currency and its digits: the value stays on one line and
   scales to the tile's own width instead (container units), so a five-across dashboard reads
   the same as a four-across one. */
.kpi { container-type: inline-size; }
.kpi-value { font-size: clamp(0.95rem, 8.5cqi, 1.5rem); white-space: nowrap; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi-value.good { color: var(--good); }
.kpi-value.bad { color: var(--bad); }
.kpi-note { font-size: 0.75rem; color: var(--ink-3); margin-top: 4px; }
.kpi.kpi-hero { border-color: rgba(239, 163, 60, 0.35); background: linear-gradient(160deg, rgba(239, 163, 60, 0.09), var(--surface) 55%); }

/* ---------- Split stats ---------- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split-stat { padding: 12px 14px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.split-stat .s-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.split-stat { container-type: inline-size; }
.split-stat .s-value { font-size: clamp(0.9rem, 7cqi, 1.18rem); white-space: nowrap; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.split-stat .s-sub { font-size: 0.74rem; color: var(--ink-3); margin-top: 3px; }

/* ---------- Project chart ---------- */
.chart-legend { display: flex; gap: 18px; margin-bottom: 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--ink-2); }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.project-chart { display: flex; flex-direction: column; gap: 14px; }
.pc-row { display: grid; grid-template-columns: 170px 1fr 156px; gap: 14px; align-items: center; }
.pc-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-bars { display: flex; flex-direction: column; gap: 3px; }
.pc-bar-track { position: relative; height: 12px; border-radius: 4px; background: var(--bg); overflow: hidden; }
/* min-width was unconditional, so a project with NOTHING collected still painted a 2px sliver
   that read as a small payment. Zero has to look like zero. */
.pc-bar { position: absolute; inset: 0 auto 0 0; border-radius: 4px; transition: width 0.4s ease; }
.pc-bar.nonzero { min-width: 2px; }
.pc-bar.invoiced { background: var(--series-invoiced); }
.pc-bar.funded { background: var(--series-funded); }
.pc-amounts { font-size: 0.78rem; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.5; }
.pc-row:hover .pc-bar { filter: brightness(1.15); }

.chart-tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 0.8rem; line-height: 1.55; color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-width: 260px;
}
.chart-tip .tip-title { font-weight: 700; margin-bottom: 4px; }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); }
.chart-tip .tip-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Ledger ---------- */
.ledger-tools { display: flex; gap: 14px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 6px; }
.chip {
  font: inherit; font-size: 0.83rem; font-weight: 600;
  padding: 7px 14px; border-radius: 99px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--border); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.chip:hover { background: var(--raised); color: var(--ink); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #17120A; }
.search-input { max-width: 320px; }

.table-panel { padding: 6px; }
.table-scroll { overflow-x: auto; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ledger-table th {
  text-align: left; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ledger-table th.num, .ledger-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); color: var(--ink-2); vertical-align: top; }
.ledger-table tbody tr { cursor: pointer; transition: background 0.1s; }
.ledger-table tbody tr:hover { background: var(--raised); }
.ledger-table td.strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ledger-table td.desc { max-width: 260px; }
.ledger-table td .inv-type {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px; margin-top: 4px;
}
.inv-type.project { background: rgba(239, 163, 60, 0.14); color: var(--accent); }
.inv-type.investment { background: rgba(124, 138, 165, 0.18); color: #A9B4C9; }
.ledger-table td.zero { color: var(--ink-3); }
.ledger-table tfoot td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--border); border-bottom: none; padding: 13px 12px; }

/* ---------- Generator ---------- */
.gen-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .gen-layout { grid-template-columns: 1fr; } }
.gen-input { font-size: 1.15rem; padding: 13px 16px; margin-bottom: 20px; }

.gen-letters { display: flex; flex-wrap: wrap; gap: 8px; min-height: 66px; margin-bottom: 18px; }
.gen-tile {
  width: 46px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: center; padding: 7px 0 8px;
  transition: border-color 0.15s, background 0.15s;
}
.gen-tile.used { border-color: rgba(239, 163, 60, 0.55); background: rgba(239, 163, 60, 0.08); }
.gen-tile .t-letter { display: block; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; }
.gen-tile .t-digit { display: block; font-size: 1.05rem; font-weight: 700; color: var(--accent); margin-top: 2px; }
.gen-tile.skip .t-letter { color: var(--ink-3); }
.gen-tile.skip .t-digit { color: var(--ink-3); }
.gen-tile.unused { opacity: 0.45; }

.gen-controls { margin-bottom: 20px; }
.len-row { display: flex; align-items: center; gap: 14px; }
.len-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.len-value { font-weight: 700; font-variant-numeric: tabular-nums; width: 24px; text-align: center; }

.gen-result {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; flex-wrap: wrap;
}
.gen-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.gen-number { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.gen-collision { display: block; font-size: 0.78rem; margin-top: 4px; color: var(--ink-3); }
.gen-collision.warn { color: var(--accent); }
.gen-actions { display: flex; gap: 10px; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key {
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); text-align: center; padding: 12px 6px;
  transition: border-color 0.15s, background 0.15s;
}
.key .k-digit { font-size: 1.15rem; font-weight: 700; }
.key .k-letters { font-size: 0.66rem; letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase; margin-top: 3px; }
.key.lit { border-color: rgba(239, 163, 60, 0.55); background: rgba(239, 163, 60, 0.1); }
.key.lit .k-letters { color: var(--accent); }

/* ---------- Settings ---------- */
.settings-panel { max-width: 720px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.save-note { font-size: 0.82rem; color: var(--good); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 7, 10, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal {
  width: 560px; max-width: 100%; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.modal-head h2 { font-size: 1.1rem; }
.modal-close { background: none; border: none; color: var(--ink-3); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 4px; border-radius: 6px; }
.modal-close:hover { color: var(--ink); background: var(--raised); }
.modal-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 15px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .form-row, .form-row.three { grid-template-columns: 1fr; } }

.computed-preview {
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 0.82rem; color: var(--ink-2); line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.computed-preview b { color: var(--ink); font-weight: 600; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.modal-actions .spacer { flex: 1; }

/* ---------- Dual currency ---------- */
.dual { display: inline-flex; flex-direction: column; line-height: 1.3; }
.dual .d-usd { font-size: 0.74rem; font-weight: 500; color: var(--ink-3); }
.num .dual, .b-var .dual, .coa-total .dual { align-items: flex-end; }
.kpi-value .dual { align-items: flex-start; }
.kpi-value .dual .d-usd { font-size: 0.85rem; }

/* ---------- Cost tracker ---------- */
.costs-tools { margin: 0 0 16px; }
.select-compact { width: auto; min-width: 160px; max-width: 240px; }
.chip-warn.active { background: var(--bad); border-color: var(--bad); color: #fff; }
.chip .count-badge {
  display: inline-block; min-width: 18px; text-align: center;
  background: rgba(229, 106, 86, 0.25); color: var(--bad);
  border-radius: 99px; font-size: 0.7rem; padding: 1px 6px; margin-left: 4px;
}
.chip-warn.active .count-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }

.status-pill {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px;
}
.status-pill.actual { background: rgba(85, 197, 140, 0.14); color: var(--good); }
.status-pill.committed { background: rgba(107, 147, 219, 0.16); color: #8FB0E8; }
.status-pill.etc { background: rgba(239, 163, 60, 0.14); color: var(--accent); }
.acct-tag { white-space: nowrap; }
.acct-tag .acct-code { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.acct-tag.uncat { color: var(--bad); font-weight: 600; }

.month-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; overflow-x: auto; padding-bottom: 4px; }
.mc-col { flex: 1; min-width: 42px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; cursor: pointer; }
.mc-bar-wrap { display: flex; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.mc-bar { width: 70%; max-width: 34px; background: var(--series-funded); border-radius: 4px 4px 0 0; min-height: 2px; transition: filter 0.12s; }
.mc-col:hover .mc-bar { filter: brightness(1.2); }
.mc-label { font-size: 0.66rem; color: var(--ink-3); white-space: nowrap; }
.mc-col.active .mc-label { color: var(--accent); font-weight: 700; }
.mc-col.active .mc-bar { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Cost report ---------- */
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.report-tools { display: flex; gap: 10px; align-items: center; }
.report-table td, .report-table th { white-space: nowrap; }
.report-table tr.cat-head td {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: rgba(239, 163, 60, 0.05);
  border-top: 1px solid var(--border); padding-top: 13px;
}
.report-table tr.cat-sub td { font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.02); }
.report-table tr.grand td { font-weight: 800; color: var(--ink); font-size: 0.92rem; border-top: 2px solid var(--accent); padding: 14px 12px; }
.report-table td.pos { color: var(--good); }
.report-table td.neg { color: var(--bad); }
.report-table tbody tr { cursor: default; }
.report-table tbody tr:hover { background: var(--raised); }

/* ---------- Budget ---------- */
.budget-cat { margin-bottom: 18px; }
.budget-cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.budget-cat-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.budget-cat-total { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.budget-row {
  /* The bar column was a bare 1fr, so once the fixed columns exceeded the row it computed to
     0px and the row overflowed its panel — broken on any ~900-1150px laptop or split screen. */
  display: grid; grid-template-columns: minmax(180px, 1.4fr) 110px 110px minmax(90px, 1fr) 120px;
  gap: 14px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.budget-row:last-child { border-bottom: none; }
.budget-row .b-name { font-size: 0.87rem; }
.budget-row .b-name .acct-code { color: var(--accent); font-weight: 700; margin-right: 8px; font-variant-numeric: tabular-nums; }
.budget-row input.input { padding: 7px 10px; font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.budget-row .b-track { position: relative; height: 10px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.budget-row .b-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--series-funded); min-width: 0; }
.budget-row .b-fill.over { background: var(--bad); }
.budget-row .b-var { font-size: 0.82rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.budget-row .b-var.neg { color: var(--bad); }
.budget-row .b-var.pos { color: var(--good); }
.budget-head-row { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--border); padding-bottom: 7px; }
@media (max-width: 900px) { .budget-row { grid-template-columns: 1fr 100px 100px; } .budget-row .b-track, .budget-row .b-var { display: none; } }

/* ---------- Cashflow ---------- */
.cf-chart { display: flex; align-items: flex-end; gap: 8px; height: 190px; overflow-x: auto; padding-bottom: 4px; }
.cf-col { flex: 1; min-width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.cf-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.cf-bar { width: 16px; border-radius: 4px 4px 0 0; min-height: 2px; transition: filter 0.12s; }
.cf-bar.planned { background: var(--series-invoiced); }
.cf-bar.actual { background: var(--series-funded); }
.cf-col:hover .cf-bar { filter: brightness(1.18); }
.cf-label { font-size: 0.66rem; color: var(--ink-3); white-space: nowrap; }
.cf-table th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 2; }
.cf-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; white-space: nowrap; }
.cf-table tr:hover td:first-child { background: var(--raised); }
.cf-table td.zero { color: var(--ink-3); }
.cf-table tr.cf-total td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--border); }
.cf-table tr.cf-req td { color: #8FB0E8; }
.cf-table tr.cf-var td.neg { color: var(--bad); }
.cf-table tr.cf-var td.pos { color: var(--good); }
.cf-note { font-size: 0.78rem; color: var(--ink-3); margin-top: 10px; }

/* ---------- Approvals ---------- */
.nav-badge {
  display: inline-block; min-width: 20px; text-align: center;
  background: var(--accent); color: #17120A;
  border-radius: 99px; font-size: 0.7rem; font-weight: 700; padding: 1px 6px; margin-left: auto;
}
.appr-group { margin-bottom: 18px; }
.appr-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.appr-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.appr-total { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.appr-head .btn { margin-left: auto; padding: 5px 12px; font-size: 0.8rem; }
.appr-row {
  display: grid; grid-template-columns: 92px minmax(0, 1.5fr) minmax(0, 0.8fr) 210px 130px auto;
  gap: 12px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--border-soft); font-size: 0.85rem;
}
.appr-row:last-child { border-bottom: none; }
.appr-row .a-date { color: var(--ink-2); white-space: nowrap; }
.appr-row .a-desc { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.appr-row .a-desc .a-note { display: block; color: var(--ink-3); font-size: 0.75rem; }
.appr-row select.input { padding: 6px 8px; font-size: 0.8rem; }
.appr-row .a-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.appr-row .a-amt .a-usd { display: block; font-weight: 500; font-size: 0.72rem; color: var(--ink-3); }
.appr-actions { display: flex; gap: 6px; }
.appr-actions .btn { padding: 5px 12px; font-size: 0.8rem; }
.appr-empty { color: var(--ink-2); font-size: 0.9rem; padding: 30px 0; text-align: center; }
.appr-row .a-vendor { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appr-cols { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--border-soft); padding: 4px 0 6px; }
.appr-cols span:nth-child(5) { text-align: right; }
@media (max-width: 900px) { .appr-row { grid-template-columns: 1fr 120px auto; } .appr-row .a-date, .appr-row .a-vendor, .appr-row select, .appr-cols { display: none; } }

/* ---------- Subscriptions ---------- */
.sub-status { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
.sub-status.active { background: rgba(85, 197, 140, 0.14); color: var(--good); }
.sub-status.cancelled { background: rgba(124, 138, 165, 0.18); color: #A9B4C9; }
.sub-status.unknown { background: rgba(239, 163, 60, 0.14); color: var(--accent); }
/* A lost bid is a result, not an absence of one — grey lumped it in with No Decision and
   Withdrawn, which are neither won nor lost. */
.sub-status.lost { background: rgba(229, 106, 86, 0.14); color: var(--bad); }

/* ---------- Chart of accounts ---------- */
.coa-row {
  display: grid; grid-template-columns: 70px 1fr 110px 150px 70px;
  gap: 14px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--border-soft); font-size: 0.88rem;
}
.coa-row:last-child { border-bottom: none; }
.coa-row .acct-code { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.coa-row .coa-count { color: var(--ink-3); font-size: 0.8rem; text-align: right; }
.coa-row .coa-total { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.coa-row .btn { padding: 5px 12px; font-size: 0.8rem; }
.modal-narrow { width: 460px; }
.settings-title-gap { margin-top: 26px; }
.split-grid.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .split-grid.three { grid-template-columns: 1fr; } }

/* ---------- Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .sidebar, .report-tools, .toast { display: none !important; }
  .main { padding: 0; }
  .view.hidden { display: none !important; }
  .panel { border: none; background: #fff; }
  .ledger-table td, .ledger-table th { color: #000 !important; border-color: #ccc; }
  .report-table tr.cat-head td { color: #000; background: #f2f2f2; }
  .report-table td.neg { color: #b00020 !important; }
}

/* ---------- Login ---------- */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-card {
  width: 380px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 36px 32px; text-align: center;
}
.login-mark { width: 74px; height: 66px; color: var(--ink); margin-bottom: 14px; }
.login-title { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.05em; }
.login-sub { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 26px; }
.login-form { text-align: left; display: flex; flex-direction: column; gap: 15px; }
.login-error { color: var(--bad); font-size: 0.84rem; }
.login-hint { font-size: 0.75rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- User chip & team ---------- */
.user-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 4px 0; border-top: 1px solid var(--border-soft); margin-top: 4px;
}
.user-chip-text { display: flex; flex-direction: column; min-width: 0; }
.user-chip-name { font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-role { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.user-chip-out { padding: 5px 10px; font-size: 0.76rem; }

#teamBody select.input { padding: 6px 8px; font-size: 0.82rem; width: auto; }
.team-toggle { cursor: pointer; accent-color: var(--accent); width: 16px; height: 16px; }
.team-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
/* The link is a full-width row of its own beneath the buttons, not a flex sibling squeezed
   into a 33px column and rendered one character per line. */
.team-actions .invite-link { flex: 1 0 100%; }
.team-actions .btn { padding: 5px 10px; font-size: 0.78rem; }
.invite-link {
  font-size: 0.75rem; color: var(--accent); word-break: break-all; cursor: pointer;
  background: rgba(239, 163, 60, 0.08); border-radius: 6px; padding: 4px 8px; display: inline-block; margin-top: 5px;
}
.sec-events { font-size: 0.8rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; }
.sec-events .ev-time { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 10px; }
.sec-events .ev-name { font-weight: 600; color: var(--ink); margin-right: 8px; }

/* ---------- Attachments ---------- */
.file-input { padding: 8px; }
.file-input::file-selector-button {
  font: inherit; font-size: 0.8rem; font-weight: 600;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 12px; margin-right: 10px; cursor: pointer;
}
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: 4px 10px; font-size: 0.76rem; color: var(--ink-2);
  max-width: 240px;
}
.attach-chip a { color: var(--accent); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-chip a:hover { text-decoration: underline; }
.attach-chip .attach-x { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0; }
.attach-chip .attach-x:hover { color: var(--bad); }
.attach-cell { white-space: nowrap; }
.attach-cell a { color: var(--accent); text-decoration: none; font-size: 0.78rem; }
.attach-cell a:hover { text-decoration: underline; }

/* ---------- Alerts, import, misc ---------- */
.alert {
  display: flex; align-items: baseline; gap: 10px;
  background: rgba(229, 106, 86, 0.09); border: 1px solid rgba(229, 106, 86, 0.35);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px;
  font-size: 0.87rem; color: var(--ink);
}
.alert.warn { background: rgba(239, 163, 60, 0.08); border-color: rgba(239, 163, 60, 0.35); }
.alert .alert-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bad); white-space: nowrap; }
.alert.warn .alert-tag { color: var(--accent); }
.import-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.import-row .file-input { max-width: 460px; }
.import-result { margin-top: 12px; font-size: 0.85rem; color: var(--ink-2); line-height: 1.7; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.import-result b { color: var(--ink); }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-2); cursor: pointer; }
.check-row input { accent-color: var(--accent); width: 15px; height: 15px; }
.modal-wide { width: 720px; }
.reimb-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; margin-left: 6px; background: rgba(85, 197, 140, 0.14); color: var(--good); }
.reimb-tag.due { background: rgba(239, 163, 60, 0.14); color: var(--accent); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--raised); border: 1px solid var(--border);
  color: var(--ink); font-size: 0.88rem; font-weight: 600;
  padding: 11px 20px; border-radius: 99px; z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ---------- Invoice line items & bank editor ---------- */
.inv-line { display: grid; grid-template-columns: 1fr 140px 90px 40px; gap: 8px; margin-bottom: 8px; align-items: center; }
.inv-line .il-x { padding: 6px 10px; }
.bank-row { display: grid; grid-template-columns: 46px 1.1fr 1.6fr 1.1fr 0.8fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.bank-row .acct-code { font-weight: 700; }
@media (max-width: 800px) { .bank-row { grid-template-columns: 40px 1fr; } .inv-line { grid-template-columns: 1fr 100px 70px 36px; } }

/* ---------- Mobile shell ---------- */
.topbar { display: none; }
.sidebar-scrim { position: fixed; inset: 0; background: rgba(5, 7, 10, 0.6); z-index: 39; }
@media (max-width: 760px) {
  .topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 38;
    background: var(--surface); border-bottom: 1px solid var(--border-soft);
    padding: 10px 14px; width: 100%;
  }
  .topbar-btn { background: none; border: none; color: var(--ink); cursor: pointer; padding: 4px; }
  .topbar-title { font-weight: 800; letter-spacing: 0.06em; }
  .topbar-add { margin-left: auto; padding: 7px 14px; }
  body { flex-direction: column; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 40;
    transform: translateX(-100%); transition: transform 0.2s ease;
    height: 100vh; height: 100dvh;
  }
  .sidebar.open { transform: translateX(0); }
  .main { padding: 16px 14px 40px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .gen-layout { grid-template-columns: 1fr; }
  .appr-row { grid-template-columns: 1fr auto; }
  .appr-row select { display: none; }
  .modal { max-height: 94vh; }
}

/* ---------- Business module ---------- */
#bdFields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
#bdFields .field { margin: 0; }
@media (max-width: 620px) { #bdFields { grid-template-columns: 1fr; } }

/* ---------- Project P&L, claims, statements ---------- */
.proj-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 99px; background: rgba(107, 147, 219, 0.16); color: #8FB0E8; margin-right: 5px; }
.burn { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.burn-track { width: 70px; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; display: inline-block; }
.burn-fill { display: block; height: 100%; border-radius: 4px; background: var(--good); }
.burn-fill.warn { background: var(--accent); }
.burn-fill.bad { background: var(--bad); }
#pnlBody tr[data-project] { cursor: pointer; }
.ledger-table td.pos { color: var(--good); }
.ledger-table td.neg { color: var(--bad); }
.stmt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.claim-picker { max-height: 260px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 6px; background: var(--bg); }
.claim-line { display: grid; grid-template-columns: 20px 96px 1fr 130px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 0.83rem; cursor: pointer; }
.claim-line:hover { background: var(--raised); }
.claim-line input { accent-color: var(--accent); width: 15px; height: 15px; }
.claim-line .cl-date { color: var(--ink-3); font-size: 0.78rem; white-space: nowrap; }
.claim-line .cl-desc { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claim-line .cl-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .claim-line { grid-template-columns: 20px 1fr 110px; } .claim-line .cl-date { display: none; } }

/* ---------- Forecast & documents ---------- */
.fc-chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; overflow-x: auto; padding-bottom: 4px; }
.fc-col { flex: 1; min-width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.fc-bar-wrap { position: relative; display: flex; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.fc-bar { width: 66%; max-width: 34px; background: var(--good); border-radius: 4px 4px 0 0; min-height: 2px; }
.fc-bar.neg { background: var(--bad); }
.fc-zero { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
.fc-label { font-size: 0.66rem; color: var(--ink-3); white-space: nowrap; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.doc-card { margin-bottom: 0; }
@media (max-width: 1000px) { .doc-grid { grid-template-columns: 1fr; } }

/* ---------- Assign client to project ---------- */
.assign-row { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(150px, 1fr) 140px auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.assign-row:last-child { border-bottom: none; }
.assign-row .a-desc { min-width: 0; }
.assign-row .a-desc b { display: block; margin-bottom: 2px; }
.assign-row .input { padding: 7px 10px; font-size: 0.85rem; }
.assign-row .btn { padding: 7px 14px; font-size: 0.83rem; white-space: nowrap; }
@media (max-width: 1150px) { .assign-row { grid-template-columns: 1fr 1fr; } .assign-row .a-desc { grid-column: 1 / -1; } }
@media (max-width: 700px) { .assign-row { grid-template-columns: 1fr; } }

/* ---------- Document Centre ---------- */
.dc-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.dc-types { padding: 16px; }
.dc-type { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; font: inherit; color: var(--ink-2); transition: background 0.12s, color 0.12s, border-color 0.12s; }
.dc-type:hover { background: var(--raised); color: var(--ink); }
.dc-type.active { background: var(--raised); color: var(--ink); border-color: rgba(239, 163, 60, 0.45); box-shadow: inset 2px 0 0 var(--accent); }
.dc-type-name { font-weight: 600; font-size: 0.92rem; }
.dc-type-tag { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.dc-type.active .dc-type-tag { color: var(--accent); }
.dc-form .stmt-actions { margin-top: 16px; }
@media (max-width: 900px) { .dc-layout { grid-template-columns: 1fr; } }

/* ---------- Clients directory ---------- */
.doc-actions { white-space: nowrap; }
.doc-actions .btn { padding: 5px 10px; font-size: 0.78rem; margin-right: 4px; }
#clientBody .proj-tag { margin-bottom: 3px; display: inline-block; }

/* ---------- Events ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 620px) { .two-col { grid-template-columns: 1fr; } }

.ev-card {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 15px 16px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}
.ev-card:hover { border-color: rgba(239, 163, 60, 0.45); background: var(--raised); }
.ev-card.open { border-color: var(--accent); }
.ev-card-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-card-name { font-weight: 650; font-size: 1rem; }
.ev-card-meta { color: var(--ink-3); font-size: 0.82rem; }
.ev-card-stats { display: flex; gap: 20px; text-align: right; }
.ev-stat { display: flex; flex-direction: column; gap: 2px; }
.ev-stat-v { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.ev-stat-l { font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.ev-kind {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; background: var(--raised);
  color: var(--ink-2); border: 1px solid var(--border); margin-right: 7px;
}
.ev-kind.live { background: rgba(85, 197, 140, 0.14); color: var(--good); border-color: rgba(85, 197, 140, 0.4); }
.ev-kind.soon { background: rgba(239, 163, 60, 0.14); color: var(--accent); border-color: rgba(239, 163, 60, 0.4); }
.ev-roi { font-weight: 650; font-variant-numeric: tabular-nums; }
.ev-roi.pos { color: var(--good); }
.ev-roi.neg { color: var(--bad); }
@media (max-width: 780px) {
  .ev-card { grid-template-columns: 1fr; }
  .ev-card-stats { text-align: left; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
}

/* ---------- Triage ---------- */
.triage-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; margin-bottom: 14px; border-radius: var(--radius);
  border: 1px solid rgba(239, 163, 60, 0.45); background: rgba(239, 163, 60, 0.09);
}
.triage-banner b { color: var(--accent); }
.triage-banner .spacer { flex: 1; }

.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 12px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--raised);
}
.bulk-bar .bulk-count { font-weight: 650; }
.bulk-bar select.input { max-width: 190px; padding: 6px 10px; font-size: 0.85rem; }
.bulk-bar .spacer { flex: 1; }

.rel-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem;
  border: 1px solid var(--border); background: var(--raised); color: var(--ink-2); white-space: nowrap;
}
.rel-tag.Prospect { background: rgba(107, 147, 219, 0.16); color: var(--series-invoiced); border-color: rgba(107, 147, 219, 0.4); }
.rel-tag.Vendor { background: rgba(85, 197, 140, 0.14); color: var(--good); border-color: rgba(85, 197, 140, 0.4); }
.rel-tag.Partner { background: rgba(239, 163, 60, 0.14); color: var(--accent); border-color: rgba(239, 163, 60, 0.4); }
.rel-tag.Commission { background: rgba(208, 126, 31, 0.16); color: var(--series-funded); border-color: rgba(208, 126, 31, 0.4); }
.rel-tag.untriaged { border-style: dashed; color: var(--ink-3); }

.ct-contact { font-size: 0.82rem; color: var(--ink-2); line-height: 1.5; }
.ct-contact a { color: var(--ink-2); text-decoration: none; }
.ct-contact a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Contact import wizard ---------- */
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.imp-map .field { margin: 0; }
.imp-map .field-label { font-size: 0.72rem; color: var(--ink-3); }
.imp-map select.input { padding: 7px 10px; font-size: 0.85rem; }
#impPreview td, #impPreview th { font-size: 0.8rem; }

#ctBody td { vertical-align: top; }
#ctBody .ct-met, #ctBody .ct-loc { white-space: nowrap; font-size: 0.84rem; color: var(--ink-2); }
#ctBody .ct-met span[title] { border-bottom: 1px dotted var(--border); cursor: help; }
#ctTable td:nth-child(3), #ctTable td:nth-child(4) { max-width: 190px; }

/* ---------- Follow-ups: action queue + inline panels ---------- */
.aq-row {
  display: grid; grid-template-columns: 1fr 150px auto; gap: 10px 16px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  margin-bottom: 7px; background: var(--surface);
}
.aq-row:hover { border-color: var(--border); }
.aq-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aq-action { font-weight: 550; }
.aq-meta { font-size: 0.79rem; color: var(--ink-3); }
.aq-link { color: var(--ink-3); }
.aq-link.live { color: var(--ink-2); cursor: pointer; border-bottom: 1px dotted var(--border); }
.aq-link.live:hover { color: var(--accent); border-bottom-color: var(--accent); }
.aq-due { font-size: 0.84rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aq-due.over { color: var(--bad); font-weight: 600; }
.aq-acts { display: flex; gap: 5px; white-space: nowrap; }
.aq-acts .aq-btn { padding: 5px 10px; font-size: 0.78rem; }
.count-badge.warn { background: var(--bad); color: #fff; }
@media (max-width: 720px) {
  .aq-row { grid-template-columns: 1fr; }
  .aq-acts { justify-content: flex-start; }
}

.fu-inline { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.fu-inline .aq-row { background: var(--raised); }
.fu-add { display: grid; grid-template-columns: 1fr 165px auto; gap: 8px; margin-top: 8px; }
.fu-add .input { padding: 8px 10px; font-size: 0.86rem; }
@media (max-width: 620px) { .fu-add { grid-template-columns: 1fr; } }

/* ---------- Display currency toggle ---------- */
.ccy-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 10px;
  padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.ccy-btn {
  padding: 6px 0; border: none; border-radius: 5px; background: none; cursor: pointer;
  font: inherit; font-size: 0.76rem; font-weight: 650; letter-spacing: 0.07em;
  color: var(--ink-3); transition: background 0.12s, color 0.12s;
}
.ccy-btn:hover { background: var(--raised); color: var(--ink); }
.ccy-btn.active { background: var(--raised); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(239,163,60,0.4); }

/* ---- access control ---- */
.restricted-notice {
  margin: 0 0 18px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.5;
}
.restricted-notice b { color: var(--ink); }

.modal-widest { width: 660px; max-width: 94vw; }

/* step 1 — the question and its answers */
.access-q { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.access-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.access-preset {
  padding: 8px 14px;
  font: inherit;
  font-size: 0.83rem;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.access-preset:hover { border-color: var(--accent); color: var(--ink); }
.access-preset.on { background: var(--accent); border-color: var(--accent); color: #17171A; font-weight: 600; }
.access-preset.custom { cursor: default; background: var(--raised); border-style: dashed; color: var(--ink-2); font-weight: 500; }
.access-preset.custom:hover { border-color: var(--border); }
.access-preset-desc { font-size: 0.82rem; color: var(--ink-3); line-height: 1.55; margin-top: -6px; }

/* step 2 — the answer, always on screen */
.access-summary {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--raised);
  font-size: 0.84rem;
  line-height: 1.55;
}
.access-hidden-list { color: var(--ink-3); font-size: 0.78rem; margin-top: 6px; }

/* step 3 — folded away until asked for */
.access-adv { border-top: 1px solid var(--border-soft); padding-top: 14px; }
.access-adv > summary,
.access-sub > summary {
  cursor: pointer;
  font-size: 0.83rem;
  color: var(--ink-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  border-radius: var(--radius-sm);
}
.access-adv > summary::-webkit-details-marker,
.access-sub > summary::-webkit-details-marker { display: none; }
.access-adv > summary::before,
.access-sub > summary::before {
  content: '+';
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex: none;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.8rem; line-height: 1; color: var(--ink-3);
}
.access-adv[open] > summary::before,
.access-sub[open] > summary::before { content: '\2212'; }
.access-adv > summary:hover,
.access-sub > summary:hover { background: var(--surface); color: var(--ink); }
.access-adv-body { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.access-sub { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 2px 10px; }
.access-sub-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; }
.access-sub-state { margin-left: auto; font-size: 0.76rem; color: var(--ink-3); }

/* the area accordion */
.access-grid { display: flex; flex-direction: column; gap: 4px; }
.access-area { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.access-area.open { border-color: var(--border); }
.access-area.off .access-area-name { color: var(--ink-3); }
.access-area-head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
}
.access-area-head:hover:not(:disabled):not(.static) { background: var(--raised); }
.access-area-head:disabled { cursor: default; }
.access-area-head.static { cursor: default; }
.access-area-name { font-size: 0.87rem; font-weight: 600; }
.access-area-state { margin-left: auto; font-size: 0.74rem; color: var(--ink-3); }
.access-chev { font-size: 0.95rem; color: var(--ink-3); width: 12px; text-align: center; }
.access-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.access-dot.on { background: var(--good); }
.access-dot.off { background: var(--ink-3); opacity: 0.5; }

.access-area-body { padding: 2px 13px 14px; display: flex; flex-direction: column; gap: 11px; }
.access-area-desc { font-size: 0.77rem; color: var(--ink-3); line-height: 1.5; }
.access-none {
  font-size: 0.77rem; color: var(--ink-3); line-height: 1.5;
  padding: 9px 11px; background: var(--bg);
  border: 1px dashed var(--border-soft); border-radius: var(--radius-sm);
}

.access-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; align-self: flex-start; }
.access-opt {
  padding: 6px 13px;
  font: inherit; font-size: 0.76rem;
  background: transparent; color: var(--ink-2);
  border: none; border-right: 1px solid var(--border);
  cursor: pointer;
}
.access-opt:last-child { border-right: none; }
.access-opt:hover:not(:disabled) { background: var(--raised); color: var(--ink); }
.access-opt.on { background: var(--accent); color: #17171A; font-weight: 600; }
.access-opt.on[data-val="deny"] { background: var(--bad); color: #1A1113; }

.access-acts { display: flex; flex-direction: column; gap: 2px; }
.access-acts-h {
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.access-act {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: 0.82rem; color: var(--ink-2); cursor: pointer;
}
.access-act:hover { background: var(--raised); color: var(--ink); }
.access-act input { cursor: pointer; accent-color: var(--accent); }

.access-check { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-2); cursor: pointer; }
.access-check input { accent-color: var(--accent); }
.access-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.access-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 0.76rem;
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.access-chip button { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 0.95rem; line-height: 1; }
.access-chip button:hover { color: var(--bad); }
.access-chip-empty { font-size: 0.76rem; color: var(--ink-3); }

@media (max-width: 620px) {
  .access-area-head { flex-wrap: wrap; }
  .access-area-state { margin-left: 17px; width: 100%; }
}

/* user types table header */
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.panel-head .panel-title { margin-bottom: 4px; }
.panel-sub { font-size: 0.78rem; color: var(--ink-3); line-height: 1.5; max-width: 640px; }

/* The mobile header dropped the client name and led with the product, inverting the identity
   rule the rest of the app follows: the client leads, the product rides in the sub-line. */
.topbar-title { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-title b { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; }
.topbar-title small { font-size: 0.6rem; letter-spacing: 0.22em; color: var(--ink-3); }
/* Touch targets below 44px are hard to hit accurately on a phone. */
.topbar-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Bars run full width when the whole deal is invoiced or collected, so the row reads as
   progress against that project rather than as its size relative to other projects. */
.pc-bar.collected { background: var(--series-funded); }
.pc-tobill { color: var(--accent); font-size: 0.72rem; }
.pc-pct { color: var(--ink-3); }
.pc-pct.full { color: var(--good); }
.pc-pct.over { color: var(--bad); }
.legend-note { color: var(--ink-3); font-size: 0.72rem; }

/* Bid register — one row per bid, scanned rather than read */
.bid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.bid-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bid-chips .count-badge { background: var(--raised); color: var(--ink-2); }
.bid-chips .chip.active .count-badge { background: rgba(23, 18, 10, 0.18); color: #17120A; }
/* the table answers to its OWN width, not the window's — the sidebar eats 236px of it */
.bid-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; container-type: inline-size; }
.bid-row {
  display: grid; grid-template-columns: 104px minmax(160px, 1fr) 104px 150px 130px;
  gap: 16px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--border-soft);
}
.bid-row:last-child { border-bottom: none; }
.bid-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.bid-row.bd-bid { cursor: pointer; transition: background 0.12s; }
.bid-row.bd-bid:hover, .bid-row.bd-bid:focus-visible { background: var(--raised); outline: none; }
.bid-head { padding: 11px 22px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.bid-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bid-project { font-weight: 600; color: var(--ink); font-size: 0.93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bid-client { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bid-muted { color: var(--ink-3); font-style: italic; }
.bid-date { font-size: 0.84rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bid-amt { display: block; font-weight: 600; color: var(--ink); font-size: 0.93rem; }
.bid-amt.good { color: var(--good); }
.bid-sub { display: block; font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; }
.bid-tag { margin-left: 8px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--ink-2); vertical-align: 2px; }
.bid-group {
  display: flex; align-items: center; gap: 9px; padding: 18px 22px 9px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--border-soft); background: rgba(12, 15, 20, 0.35);
}
.bid-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 99px; background: var(--raised); border: 1px solid var(--border); font-size: 0.68rem; color: var(--ink-2); letter-spacing: 0; }
.bid-group-total { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kpi-line { display: block; }
/* four tiles sit in one row when there is room, otherwise two by two — never three and one */
#bidKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1180px) { #bidKpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 760px) {
  .bid-head { display: none; }
  .bid-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name quoted" "status date awarded"; gap: 8px 10px; padding: 13px 16px; }
  .bid-row > .bid-status { grid-area: status; }
  .bid-row > .bid-name { grid-area: name; }
  .bid-row > .bid-date { grid-area: date; font-size: 0.76rem; color: var(--ink-3); }
  .bid-row > .num:nth-of-type(4) { grid-area: quoted; }
  .bid-row > .num:nth-of-type(5) { grid-area: awarded; }
  .bid-row .bid-none { display: none; }
}

/* Revenue grid — stages across the top, splits down the side, so the two questions
   ("how far along is the money?" and "who does it belong to?") stop competing in one column. */
.rm-lead { font-size: 0.84rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }
.rm-lead b { color: var(--ink); }
.rm-table { width: 100%; border-collapse: collapse; }
.rm-table thead th { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 0 0 10px 16px; font-weight: 600; }
.rm-table thead th:first-child { text-align: left; }
.rm-table th { text-align: left; font-weight: 500; }
.rm-table td { text-align: right; padding: 9px 0 9px 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-table tbody th { padding: 9px 0; font-size: 0.86rem; color: var(--ink-2); }
.rm-note { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.rm-n { font-size: 0.9rem; }
.rm-group th { padding: 18px 0 6px; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.rm-head th, .rm-head .rm-n { color: var(--ink); font-weight: 700; }
.rm-less th, .rm-less .rm-n { color: var(--bad); }
.rm-less th { padding-left: 14px; font-size: 0.82rem; }
.rm-total th, .rm-total .rm-n { color: var(--ink); font-weight: 700; }
.rm-total th, .rm-total td { border-top: 1px solid var(--border); }
.rm-final th, .rm-final td { border-top: 2px solid var(--border); padding-top: 12px; }
.rm-final .rm-n { color: var(--good); font-size: 1.05rem; }
.rm-foot { font-size: 0.75rem; color: var(--ink-3); line-height: 1.5; margin-top: 14px; }
.rm-foot b { color: var(--ink-2); }
@media (max-width: 620px) { .rm-table thead th, .rm-table td { padding-left: 10px; } .rm-n { font-size: 0.82rem; } }

/* Enrolment at the door, when the deployment requires a second factor */
.enrol-panel { text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; background: var(--raised); }
.enrol-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.enrol-body { font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.enrol-panel a { color: var(--accent); text-decoration: none; }
.enrol-panel a:hover { text-decoration: underline; }
.enrol-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; letter-spacing: 0.08em; color: var(--ink); margin-top: 8px; word-break: break-all; }
.enrol-codes { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.7; color: var(--ink); margin-top: 8px; }

/* ---------- Projects ---------- */
.proj-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(143, 176, 232, 0.45); transition: border-color 0.12s, color 0.12s; }
.proj-link:hover { color: #8FB0E8; border-bottom-color: #8FB0E8; }
.proj-tag .proj-link { border-bottom: none; }
.proj-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; container-type: inline-size; }
.proj-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) 110px repeat(5, minmax(96px, 1fr)); gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--border-soft); }
.proj-row:last-child { border-bottom: none; }
.proj-row .num { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.proj-row .num.neg { color: var(--bad); }
.proj-row.proj-item { cursor: pointer; transition: background 0.12s; }
.proj-row.proj-item:hover, .proj-row.proj-item:focus-visible { background: var(--raised); outline: none; }
.proj-head { padding: 11px 22px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.proj-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.proj-title { font-weight: 600; color: var(--ink); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-client { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-status.done { background: rgba(107, 147, 219, 0.16); color: #8FB0E8; }
@container (max-width: 860px) {
  .proj-head { display: none; }
  .proj-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name status" "inv col out"; gap: 8px 16px; padding: 13px 16px; }
  .proj-row > .proj-name { grid-area: name; }
  .proj-row > :nth-child(2) { grid-area: status; justify-self: end; }
  .proj-row > .num[data-l="Awarded"], .proj-row > .num[data-l="Costs"] { display: none; }
  .proj-row > .num[data-l="Invoiced"] { grid-area: inv; text-align: left; }
  .proj-row > .num[data-l="Collected"] { grid-area: col; }
  .proj-row > .num[data-l="Outstanding"] { grid-area: out; }
  .proj-row .num[data-l]::before { content: attr(data-l); display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
}

.proj-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.proj-back { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.proj-back:hover { color: var(--accent); }
.proj-back::before { content: "\2190\00a0"; }
.proj-h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 6px; }
.proj-hero-sub { font-size: 0.92rem; color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.proj-for { color: var(--ink-3); }
.proj-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.proj-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.proj-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2); font: inherit; font-size: 0.86rem; font-weight: 600; padding: 10px 14px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.proj-tab:hover { color: var(--ink); }
.proj-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.proj-tab .count-badge { margin-left: 6px; background: var(--raised); color: var(--ink-2); border-radius: 99px; font-size: 0.68rem; padding: 1px 6px; }
.proj-kpis { margin-bottom: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1500px) { .proj-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 700px) { .proj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proj-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.proj-grid2-wide { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
@media (max-width: 900px) { .proj-grid2-wide { grid-template-columns: 1fr; } }
.proj-facts { display: grid; grid-template-columns: 120px 1fr; gap: 9px 14px; font-size: 0.88rem; }
.proj-facts dt { color: var(--ink-3); }
.proj-facts dd { color: var(--ink); margin: 0; }
.proj-summary { font-size: 0.92rem; line-height: 1.6; color: var(--ink); white-space: normal; }
.proj-brief { width: 100%; min-height: 220px; resize: vertical; font-family: inherit; line-height: 1.55; }
.proj-files { list-style: none; margin: 0; padding: 0; }
.proj-files li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.9rem; }
.proj-files li:last-child { border-bottom: none; }
.proj-files a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(143, 176, 232, 0.45); }
.proj-files a:hover { color: #8FB0E8; }
.proj-files .bid-sub { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-link-kind { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 4px; }
.proj-link-kind:first-of-type { margin-top: 0; }
.proj-upload { margin-top: 14px; }
.proj-inline-link { color: var(--ink); border-bottom: 1px solid rgba(143, 176, 232, 0.45); text-decoration: none; }
.proj-inline-link:hover { color: #8FB0E8; }
.proj-budget-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.proj-budget-row .input { max-width: 200px; }
.proj-budget-row .field-label { margin: 0; }
.btn-xs { padding: 3px 9px; font-size: 0.72rem; }
.proj-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); }
.proj-timeline li { position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; padding: 8px 0 8px 14px; font-size: 0.86rem; align-items: baseline; }
.proj-timeline li::before { content: ""; position: absolute; left: -7px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); border: 2px solid var(--surface); }
.proj-timeline li.tl-payment::before { background: var(--good); }
.proj-timeline li.tl-invoice::before { background: var(--series-invoiced); }
.proj-timeline li.tl-bid::before { background: var(--accent); }
.proj-timeline li.tl-cost::before, .proj-timeline li.tl-pending::before { background: var(--series-funded); }
.proj-timeline li.tl-note::before { background: #C08BF0; }
.proj-timeline .tl-date { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj-timeline .tl-text { color: var(--ink); }
.proj-timeline .tl-by { color: var(--ink-3); font-size: 0.74rem; white-space: nowrap; }
@media (max-width: 720px) { .proj-timeline li { grid-template-columns: 1fr; gap: 2px; } }
.bid-projlink { margin-left: 10px; font-size: 0.74rem; }
.bid-projlink .proj-link { color: var(--ink-3); }
.fld-ccy { color: var(--ink-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
.conv-line { color: var(--ink-2); margin-bottom: 6px; }
.empty-state { text-align: center; color: var(--ink-3); padding: 26px 12px !important; }
.empty-state .btn { margin-left: 10px; vertical-align: middle; }

/* ---------- Combo (app-owned suggestion menu) ---------- */
.combo { position: relative; }
.combo-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); max-height: 260px; overflow-y: auto; padding: 4px; }
.combo-opt { padding: 8px 10px; border-radius: 6px; font-size: 0.88rem; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt:hover, .combo-opt.active { background: rgba(239, 163, 60, 0.16); color: var(--ink); }
.combo-opt.combo-add { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 10px; white-space: normal; overflow: visible; line-height: 1.35; }
/* a picked suggestion never repaints the field: the browser's autofill white is overridden */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s ease-in-out 0s;
}
.combo .input { width: 100%; }

/* Confirmation / input dialog — the app's own stand-in for confirm() and prompt() */
/* a question raised from inside another modal must sit above it, not behind it */
#askModalBackdrop { z-index: 60; }
.modal-ask { max-width: 440px; }
.ask-message { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); white-space: pre-line; }
.modal-ask .btn-primary.btn-danger { background: var(--bad); color: #fff; border-color: transparent; }
.modal-ask .btn-primary.btn-danger:hover { filter: brightness(1.08); background: var(--bad); }

/* ---- Budget: charts, standing, movements, base, heatmap, revisions ---- */
.bp-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-controls .field-label { margin: 0 4px 0 0; }
.bp-controls .input { width: 150px; padding: 7px 10px; font-size: 0.85rem; }
.bp-to { color: var(--ink-3); font-size: 0.82rem; }
.b-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.b-alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; border: 1px solid var(--border-soft); background: var(--surface); color: var(--ink); }
.b-alert.bad { border-color: rgba(229, 106, 86, 0.45); background: rgba(229, 106, 86, 0.08); }
.b-alert.warn { border-color: rgba(239, 163, 60, 0.45); background: rgba(239, 163, 60, 0.08); }
.b-alert.good { border-color: rgba(85, 197, 140, 0.4); background: rgba(85, 197, 140, 0.07); }
.b-two { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
.b-two > .panel { margin-bottom: 18px; }
@media (max-width: 1000px) { .b-two { grid-template-columns: 1fr; } }
.chart-scroll { overflow-x: auto; }
.bchart { width: 100%; min-width: 520px; height: auto; display: block; font-family: inherit; }
.bchart .bc-grid { stroke: var(--border-soft); stroke-width: 1; }
.bchart .bc-tick, .bchart .bc-x { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.bchart .bc-x.cur { fill: var(--ink); font-weight: 700; }
.bchart .bc-lbl { fill: var(--ink-2); font-size: 11px; }
.bchart .bc-avg { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bchart .bc-allow { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 4; }
.bchart .bc-budget { fill: none; stroke: var(--series-invoiced); stroke-width: 2; }
.bchart .bc-actual { fill: none; stroke: var(--series-funded); stroke-width: 2.5; }
.bchart .bc-proj { fill: none; stroke: var(--series-funded); stroke-width: 2; stroke-dasharray: 6 5; opacity: 0.7; }
.bchart .bc-dot { fill: var(--series-funded); }
.bchart rect:hover { filter: brightness(1.15); }
.bc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 0.78rem; color: var(--ink-2); }
.bc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.bc-legend i.ln { width: 18px; height: 0; border-top: 2px solid var(--series-funded); border-radius: 0; }
.bc-legend i.ln.budget { border-top-color: var(--series-invoiced); }
.bc-legend i.ln.proj { border-top-style: dashed; opacity: 0.7; }
.bs-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(96px, 1fr)) 150px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; min-width: 860px; }
.bs-row:last-child { border-bottom: none; }
.bs-row > span:not(:first-child) { text-align: right; }
.bs-row .b-name { font-size: 0.87rem; }
.bs-row .b-name .acct-code { color: var(--accent); font-weight: 700; margin-right: 8px; }
.bs-head { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.bs-row .b-track { display: block; position: relative; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin-bottom: 3px; }
.bs-row .b-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--series-funded); }
.bs-row .b-fill.over { background: var(--bad); }
.bs-row small { color: var(--ink-3); font-size: 0.72rem; }
.bs-row .neg { color: var(--bad); }
.bs-row .pos { color: var(--good); }
.bm-row, .bm-head { grid-template-columns: minmax(160px, 1.6fr) repeat(4, minmax(90px, 1fr)); min-width: 560px; }
.stand { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; }
.stand.good { color: var(--good); border-color: rgba(85, 197, 140, 0.45); }
.stand.warn { color: var(--accent); border-color: rgba(239, 163, 60, 0.5); }
.stand.bad { color: var(--bad); border-color: rgba(229, 106, 86, 0.5); }
.stand.muted { color: var(--ink-3); }
.base-bar { height: 12px; border-radius: 6px; background: var(--series-invoiced); overflow: hidden; margin-bottom: 14px; }
.base-bar .fixed { display: block; height: 100%; background: var(--series-funded); }
.base-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.heat { display: grid; gap: 4px; min-width: 760px; align-items: stretch; }
.heat-m { font-size: 0.68rem; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 4px; }
.heat-cat { font-size: 0.8rem; color: var(--ink-2); padding-right: 8px; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-cell { height: 30px; border-radius: 4px; background: rgba(208, 126, 31, calc(0.08 + var(--a) * 0.82)); color: var(--ink); font-size: 0.7rem; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.rev-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 4px 0 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 10px; }
.rev-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: 0.66rem; color: var(--ink-3); }
.rev-bar { width: 60%; max-width: 28px; background: var(--good); border-radius: 3px 3px 0 0; }
.rev-bar.down { background: var(--bad); }
.rev-list { display: flex; flex-direction: column; }
.rev-row { display: grid; grid-template-columns: 90px 1.2fr 1.4fr 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rev-row:last-child { border-bottom: none; }
.b-lines-title { margin-top: 10px; }
.b-lines-sub { margin-bottom: 14px; }
.bp-scope { display: inline-flex; gap: 6px; margin-right: 12px; }
.report-head .bp-scope, .report-head .bp-controls { align-self: center; }
/* notices fold behind one button; the rows concerned are marked where they sit */
.b-notices-btn { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.notice-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.notice-dot.bad { background: var(--bad); }
.notice-dot.warn { background: var(--accent); }
.notice-dot.good { background: var(--good); }
.b-alerts { margin-top: 4px; }
.budget-row .b-name .stand { margin-left: 10px; vertical-align: middle; font-size: 0.66rem; padding: 2px 7px; }
.budget-row.is-over { box-shadow: inset 3px 0 0 var(--bad); padding-left: 10px; }
.budget-row.is-unbudgeted { box-shadow: inset 3px 0 0 rgba(239, 163, 60, 0.7); padding-left: 10px; }
/* chart references live in the legend; the plot holds bars and two quiet lines */
.bc-legend .bc-ref { margin-left: auto; color: var(--ink-3); }
.bc-legend .bc-ref + .bc-ref { margin-left: 0; }
.bc-legend i.ln.avg { border-top: 2px dashed var(--ink-3); }
.bc-legend i.ln.allow { border-top: 2px dotted var(--accent); }
.bchart .bc-avg { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 6 5; opacity: 0.8; }
.bchart .bc-allow { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2 5; opacity: 0.75; }
.bchart .bc-grid { stroke: var(--border-soft); stroke-width: 1; opacity: 0.6; }
.bchart .bc-tick { opacity: 0.85; }
.b-basis-note { margin: -6px 0 12px; }
.b-basis-note:empty { display: none; }
#alertBanner { margin-bottom: 16px; }