/* ============================================================
   styles.css — Take-Off Kit
   Theme + density + layout via CSS custom properties.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

:root {
  --sidebar-w: 300px;
  --rail-w: 268px;
  --table-w: 100%;
  --font-scale: 1;
  --radius: 6px;
  --gap: 16px;
  --row-pad: 9px;
  --ui: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- THEME: Trygve Studio (brand default) ---------- */
body[data-theme="trygve"] {
  --bg: #e7e3da;
  --bg-grid: rgba(60, 50, 40, 0.045);
  --panel: #f2efe8;
  --panel-2: #fbf9f3;
  --panel-3: #eae5da;
  --ink: #211e18;
  --ink-dim: #6b6457;
  --ink-faint: #9b9384;
  --line: #d7d0c2;
  --line-strong: #c1b9a7;
  --accent: #8a5a3c;
  --accent-ink: #fbf7ef;
  --accent-soft: rgba(138, 90, 60, 0.11);
  --good: #5c7a52;
  --warn: #ad7426;
  --num: #6b4a30;
  --shadow: 0 12px 34px -22px rgba(40,30,20,.5);
  --grid-on: 1;
}

/* ---------- THEME: Construction Blueprint ---------- */
body[data-theme="blueprint"] {
  --bg: #0a1626;
  --bg-grid: rgba(86, 184, 224, 0.07);
  --panel: #0e1f33;
  --panel-2: #102740;
  --panel-3: #14304e;
  --ink: #dce9f5;
  --ink-dim: #7d97b3;
  --ink-faint: #51698a;
  --line: #1d3a5c;
  --line-strong: #2b5078;
  --accent: #57c7e8;
  --accent-ink: #04141f;
  --accent-soft: rgba(87, 199, 232, 0.13);
  --good: #57e0a8;
  --warn: #f0b352;
  --num: #7fd9f2;
  --shadow: 0 10px 30px -16px rgba(0,0,0,.7);
  --grid-on: 1;
}

/* ---------- THEME: Architectural White ---------- */
body[data-theme="arch"] {
  --bg: #eceae3;
  --bg-grid: rgba(40, 50, 60, 0.04);
  --panel: #f7f6f1;
  --panel-2: #fdfcf8;
  --panel-3: #f0eee6;
  --ink: #232a30;
  --ink-dim: #6a7178;
  --ink-faint: #9aa0a4;
  --line: #d9d6cc;
  --line-strong: #c2bdaf;
  --accent: #2f6d8c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(47, 109, 140, 0.10);
  --good: #2f8a5b;
  --warn: #b9772a;
  --num: #1f4f66;
  --shadow: 0 8px 26px -18px rgba(0,0,0,.4);
  --grid-on: 1;
}

/* ---------- THEME: Light ---------- */
body[data-theme="light"] {
  --bg: #f1f3f6;
  --bg-grid: rgba(40, 60, 90, 0.035);
  --panel: #ffffff;
  --panel-2: #ffffff;
  --panel-3: #f4f6f9;
  --ink: #1c2733;
  --ink-dim: #647082;
  --ink-faint: #9aa6b5;
  --line: #e1e6ec;
  --line-strong: #cdd5df;
  --accent: #1f6fe0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(31, 111, 224, 0.09);
  --good: #18935f;
  --warn: #c0801f;
  --num: #18508f;
  --shadow: 0 8px 24px -18px rgba(20,40,80,.35);
  --grid-on: 0;
}

/* ---------- THEME: Dark ---------- */
body[data-theme="dark"] {
  --bg: #15171c;
  --bg-grid: rgba(255, 255, 255, 0.025);
  --panel: #1d2027;
  --panel-2: #23272f;
  --panel-3: #2a2f38;
  --ink: #e6e9ee;
  --ink-dim: #9097a3;
  --ink-faint: #636a76;
  --line: #2e333c;
  --line-strong: #3e444f;
  --accent: #d7a04e;
  --accent-ink: #1a1305;
  --accent-soft: rgba(215, 160, 78, 0.13);
  --good: #5cc98c;
  --warn: #e0a94e;
  --num: #e0c187;
  --shadow: 0 12px 30px -16px rgba(0,0,0,.8);
  --grid-on: 0;
}

/* ---------- THEME: Site Safety Yellow ---------- */
body[data-theme="safety"] {
  --bg: #1a1a17;
  --bg-grid: rgba(245, 200, 20, 0.06);
  --panel: #232218;
  --panel-2: #2b2a1c;
  --panel-3: #34321f;
  --ink: #f6f1d8;
  --ink-dim: #b3ab7e;
  --ink-faint: #837c54;
  --line: #45411f;
  --line-strong: #5f5926;
  --accent: #f5c518;
  --accent-ink: #1a1500;
  --accent-soft: rgba(245, 197, 24, 0.14);
  --good: #b8e04e;
  --warn: #f59b18;
  --num: #f5d863;
  --shadow: 0 12px 30px -16px rgba(0,0,0,.8);
  --grid-on: 1;
}

body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--ink);
  font-size: calc(14px * var(--font-scale));
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* blueprint grid backdrop */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grid-on);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ============================ layout ============================ */
.app { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px; height: 56px; flex: none;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 5px; flex: none;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; font-family: var(--mono); font-size: 15px;
}
.brand .logo-img { height: 30px; width: auto; display: block; }
.brand .wm { font-weight: 600; letter-spacing: 3px; font-size: 15px; text-transform: uppercase; }
.brand .rule { width: 1px; height: 24px; background: var(--line-strong); }
.brand .wm-sub { font-family: var(--mono); color: var(--ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; }
.brand .title { font-weight: 600; letter-spacing: .2px; font-size: 15px; }
.brand .sub { color: var(--ink-faint); font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 1.4px; }

.topbar .spacer { flex: 1; }
.topbar .proj-name { font-family: var(--mono); color: var(--ink-dim); font-size: 12px; }
.topbar .proj-name b { color: var(--ink); font-weight: 600; }

.mode-toggle { display: flex; background: var(--panel-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.mode-toggle button {
  border: 0; background: transparent; color: var(--ink-dim); cursor: pointer;
  font-family: var(--ui); font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
}
.mode-toggle button.on { background: var(--accent); color: var(--accent-ink); }

.btn {
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink);
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }

.acct-chip { display: flex; align-items: center; gap: 8px; padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--line-strong); flex: none; }
.acct-chip .acct-role { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.acct-chip .acct-name { font-size: 12px; color: var(--ink-dim); white-space: nowrap; display: none; }
@media (min-width: 1180px) { .acct-chip .acct-name { display: inline; } }

.topbar .proj-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .mode-toggle, .topbar #genPdf { flex: none; }

.cols { flex: 1; display: flex; min-height: 0; }

/* generic panel scroll */
.sidebar, .rail { flex: none; background: var(--panel); overflow-y: auto; }
.sidebar { width: var(--sidebar-w); border-right: 1px solid var(--line); }
.rail { width: var(--rail-w); border-left: 1px solid var(--line); }
.main { flex: 1; min-width: 0; overflow-y: auto; padding: var(--gap); }
.main-inner { max-width: var(--table-w); margin: 0 auto; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 2px solid var(--panel); }
::-webkit-scrollbar-track { background: transparent; }

/* section headers */
.sec { border-bottom: 1px solid var(--line); }
.sec-h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-faint); padding: 13px 16px 8px; display: flex; align-items: center; gap: 8px;
}
.sec-h .n { color: var(--accent); }
.sec-body { padding: 0 16px 14px; }

/* ---- project setup form ---- */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field label { font-size: 11px; color: var(--ink-dim); font-weight: 500; display: flex; justify-content: space-between; gap: 6px; }
.field label .u { font-family: var(--mono); color: var(--ink-faint); font-size: 10px; }
.field input, .field select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); padding: var(--row-pad) 10px; font-family: var(--ui); font-size: 13px; width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.num input { font-family: var(--mono); }
.field .hint { font-size: 10.5px; color: var(--ink-faint); }
.field.assume input { border-color: var(--warn); background: color-mix(in oklab, var(--warn) 8%, var(--panel-2)); }
.flag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--warn); border: 1px solid var(--warn); border-radius: 3px; padding: 0 4px; font-weight: 600;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- stage nav ---- */
.nav-group-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); padding: 12px 16px 5px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer;
  border-left: 2px solid transparent; color: var(--ink-dim); font-size: 12.5px;
}
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.on { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.nav-item .num { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); width: 20px; flex: none; }
.nav-item.on .num { color: var(--accent); }
.nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); margin-left: auto; flex: none; }
.nav-item .dot.done { background: var(--good); box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 25%, transparent); }
.nav-item .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- summary mini (sidebar dashboard) ---- */
.mini { display: flex; flex-direction: column; gap: 1px; }
.mini-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--line); gap: 8px; }
.mini-row .k { font-size: 11px; color: var(--ink-dim); }
.mini-row .v { font-family: var(--mono); font-size: 12.5px; color: var(--num); font-weight: 500; white-space: nowrap; }
.mini-row .v small { color: var(--ink-faint); font-size: 9.5px; margin-left: 3px; }

/* ============================ main / stage ============================ */
.stage-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: var(--gap); }
.stage-head .big-num {
  font-family: var(--mono); font-size: 13px; color: var(--accent-ink); background: var(--accent);
  width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; font-weight: 600; flex: none;
}
.stage-head h1 { margin: 0; font-size: calc(20px * var(--font-scale)); font-weight: 700; letter-spacing: -.2px; }
.stage-head p { margin: 3px 0 0; color: var(--ink-dim); font-size: 12.5px; max-width: 62ch; }
.stage-head .grp { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: var(--gap); box-shadow: var(--shadow);
}
.card > .card-h {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-dim);
}
.card > .card-h .ic { color: var(--accent); }
.card > .card-b { padding: 16px; }

.input-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.input-grid .field { margin: 0; }
.field.col-2 { grid-column: span 3; }
.field.col-3 { grid-column: span 2; }
.field.col-full { grid-column: 1 / -1; }
.subhead { grid-column: 1/-1; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px; display:flex; gap:8px; align-items:center; }
.subhead:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* outputs */
.out-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 11px; }
.out {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.out.sub { background: transparent; border-style: dashed; }
.out .o-label { font-size: 11px; color: var(--ink-dim); }
.out .o-val { font-family: var(--mono); font-size: calc(20px * var(--font-scale)); font-weight: 600; color: var(--num); line-height: 1.1; }
.out .o-val .u { font-size: 11px; color: var(--ink-faint); font-weight: 400; margin-left: 3px; }
.out .o-val .o-bars { display: block; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--accent); letter-spacing: .3px; margin-top: 2px; }
.out.cost .o-val { color: var(--good); }
.out .o-await { font-family: var(--mono); font-size: 12px; color: var(--warn); font-weight: 500; letter-spacing: .3px; }
.out .o-f { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); border-top: 1px dotted var(--line); padding-top: 5px; margin-top: 2px; word-break: break-word; }

/* dashboard rail */
.dash-card { padding: 12px 14px; }
.dash-title { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.dash-metric { padding: 9px 0; border-bottom: 1px solid var(--line); }
.dash-metric .k { font-size: 11px; color: var(--ink-dim); display: flex; justify-content: space-between; }
.dash-metric .v { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--num); margin-top: 2px; }
.dash-metric .v.zero { color: var(--ink-faint); }
.dash-metric .v .u { font-size: 10px; color: var(--ink-faint); font-weight: 400; margin-left: 4px; }
.cost-total { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 11px 13px; margin: 12px 14px; }
.cost-total .k { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-family: var(--mono); color: var(--ink-dim); }
.cost-total .v { font-family: var(--mono); font-size: 21px; font-weight: 600; color: var(--good); }

/* builder controls */
.builder .ctrl { margin-bottom: 13px; }
.builder .ctrl > .lbl { font-size: 11px; color: var(--ink-dim); font-weight: 500; margin-bottom: 6px; display: flex; justify-content: space-between; }
.builder .ctrl > .lbl .val { font-family: var(--mono); color: var(--accent); font-size: 11px; }
.seg { display: flex; flex-wrap: wrap; gap: 5px; }
.seg button {
  flex: 1 1 auto; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-dim);
  font-family: var(--ui); font-size: 11px; font-weight: 600; padding: 6px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.seg button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.sw { width: 30px; height: 30px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; position: relative; }
.sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.builder input[type="range"] { width: 100%; accent-color: var(--accent); }
.builder .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* notes / report */
textarea.notes {
  width: 100%; min-height: 90px; resize: vertical; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--radius); padding: 11px; font-family: var(--ui); font-size: 13px; line-height: 1.5;
}

/* BOQ table */
table.boq { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.boq th, table.boq td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
table.boq th { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
table.boq td.num, table.boq th.num { text-align: right; font-family: var(--mono); color: var(--num); }
table.boq tr:hover td { background: var(--panel-2); }
table.boq .grp-row td { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); background: var(--panel-3); }
table.boq tfoot .boq-total td { border-top: 2px solid var(--ink-faint); border-bottom: none; font-weight: 700; background: var(--panel-2); }
table.boq tfoot .boq-total td:first-child { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
table.boq tfoot .boq-total td.num { color: var(--good); font-size: 14px; }
table.boq tfoot .boq-total:hover td { background: var(--panel-2); }
/* table style variants */
.main[data-table="minimal"] table.boq th, .main[data-table="minimal"] table.boq td { border-bottom: 1px solid transparent; padding: 6px 12px; }
.main[data-table="minimal"] table.boq tr + tr td { border-top: 1px solid var(--line); }
.main[data-table="engineering"] table.boq { font-family: var(--mono); font-size: 11.5px; }
.main[data-table="engineering"] table.boq th, .main[data-table="engineering"] table.boq td { border: 1px solid var(--line); }
.main[data-table="engineering"] { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); }

.client-hidden { display: none !important; }

/* schedule table (footings & other multi-row stages) */
.sched-note { font-size: 11.5px; color: var(--ink-dim); margin: 0 0 13px; line-height: 1.55; max-width: 80ch; }
.sched-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
table.sched { border-collapse: collapse; width: 100%; }
table.sched th { font-family: var(--mono); font-size: 9px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel-3); position: sticky; top: 0; }
table.sched th .su { color: var(--ink-faint); font-size: 8.5px; }
table.sched td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
table.sched td.del { width: 30px; text-align: center; }
table.sched tr:last-child td { border-bottom: 0; }
table.sched input { width: 100%; min-width: 46px; background: transparent; border: 1px solid transparent; color: var(--num); font-family: var(--mono); font-size: 12.5px; padding: 6px; border-radius: 4px; }
table.sched td:first-child input { font-family: var(--ui); color: var(--ink); }
table.sched input:hover { border-color: var(--line-strong); }
table.sched input:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 2px var(--accent-soft); color: var(--ink); }
table.sched select.cell-sel { width: 100%; min-width: 56px; background: transparent; border: 1px solid transparent; color: var(--ink); font-family: var(--ui); font-size: 12.5px; padding: 5px 4px; border-radius: 4px; cursor: pointer; }
table.sched select.cell-sel:hover { border-color: var(--line-strong); }
table.sched select.cell-sel:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 2px var(--accent-soft); }
table.sched select.cell-sel.empty { color: var(--ink-faint); }
table.sched input:disabled { opacity: .35; cursor: not-allowed; background: var(--accent-soft); }
.diagram-wrap { overflow-x: auto; }
.diagram-wrap svg { width: 100%; min-width: 640px; max-width: 940px; height: auto; display: block; margin: 0 auto; }
.diagram-wrap text { font-family: var(--ui); fill: var(--ink-dim); }
.diagram-wrap .dg-t { font-family: var(--mono); font-size: 12.5px; letter-spacing: .3px; text-transform: uppercase; fill: var(--ink); font-weight: 600; }
.diagram-wrap .dg-l { font-size: 12.5px; fill: var(--ink-dim); }
.diagram-wrap .dg-d { font-family: var(--mono); font-size: 11px; fill: var(--num); }
.diagram-wrap .dg-key { font-size: 12px; fill: var(--ink-dim); }
table.bbs td .bbs-shape { width: 44px; height: 30px; display: block; }
table.bbs td.bbs-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
table.bbs td { vertical-align: middle; }
table.sched td.del button { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 12px; padding: 5px 7px; border-radius: 4px; line-height: 1; }
table.sched td.del button:hover { color: var(--warn); background: var(--accent-soft); }

.empty-await { color: var(--warn); font-family: var(--mono); font-size: 12px; }

/* sheet (per-floor) grouped schedule */
.sheet { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px; margin-bottom: 14px; background: var(--panel); }
.sheet + .sheet { margin-top: 0; }
.sheet-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sheet-ic { color: var(--accent); font-size: 14px; }
.sheet-name { flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); font-family: var(--ui); font-weight: 600; font-size: 14px; padding: 7px 10px; border-radius: 5px; }
.sheet-name:hover { border-color: var(--line-strong); }
.sheet-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sheet-del { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px; padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
.sheet-del:hover { color: var(--warn); background: var(--accent-soft); }
.muted { color: var(--ink-faint); }

/* webhook (n8n) config row inside the Purchase Request card */
.webhook-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.webhook-actions { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
.webhook-hint { flex-basis: 100%; font-size: 10.5px; }
.webhook-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; }
.webhook-status .wh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.webhook-status .wh-dot.ok { background: var(--good); box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 25%, transparent); }
.webhook-status .wh-dot.warn { background: var(--warn); }
.webhook-status .wh-dot.err { background: #d0574e; }

/* electrical tree: room -> modular box -> free-form wire/point tag rows */
.btn.xs { padding: 4px 8px; font-size: 10.5px; }
.room-db-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.room-db-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.room-db-in { width: 100px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--ui); font-size: 13px; padding: 6px 8px; border-radius: 5px; }
.mod-box { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 11px; margin: 10px 0; background: var(--panel-2); }
.mod-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mod-ic { color: var(--accent); font-size: 13px; }
.mod-name { flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--ui); font-weight: 600; font-size: 13px; padding: 6px 9px; border-radius: 5px; }
.mod-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.mod-name-static { flex: 1; font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--ink); }
.mod-box-points { border-style: solid; background: var(--panel); }
.mod-size-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.mod-size { width: 68px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--ui); font-size: 13px; padding: 6px 8px; border-radius: 5px; }
.mod-sub-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 7px; }
.tag-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tag-row { display: flex; align-items: center; gap: 7px; }
.tag-row input.tag-label { flex: 1.6; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--ui); font-size: 12.5px; padding: 6px 8px; border-radius: 5px; }
.tag-row input.tag-val { flex: 0.8; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--ui); font-size: 12.5px; padding: 6px 8px; border-radius: 5px; }
.tag-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tag-row .su { font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.tag-row .tag-del { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 4px; }
.tag-row .tag-del:hover { color: var(--warn); background: var(--accent-soft); }

/* ---- Purchase Request ---- */
.pr-add {
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-dim);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.pr-add:hover { border-color: var(--accent); color: var(--ink); }
.pr-add.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pr-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; margin-bottom: 16px; }
.pr-meta .field { margin-bottom: 4px; }
.pr-table .pr-in {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); padding: 4px 7px; font-family: var(--mono); font-size: 12.5px; text-align: right;
}
.pr-table .pr-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pr-table .pr-item, .pr-table .pr-unit { text-align: left; font-family: var(--ui); }
.pr-rate-cell { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.pr-basis { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius); font-family: var(--mono); font-size: 11px; padding: 3px 2px; cursor: pointer; }
.pr-basis:focus { outline: none; border-color: var(--accent); }
.pr-disc { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 600; }
.pr-disc-in { max-width: 90px; }
.pr-disc-row td { padding-top: 9px; padding-bottom: 9px; }
.pr-disc-amt { color: var(--accent); font-family: var(--mono); }
.pr-final-row td { font-size: 1.05em; }
.pr-gst-in { max-width: 46px; }
.pr-gst-amt { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.pr-sub-row td, .pr-gsttot-row td { font-weight: 600; color: var(--ink-dim); }
.pr-gsttot-row .pr-gsttot-amt { color: var(--accent); font-family: var(--mono); }
.pr-src { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); margin-top: 2px; }
.pr-x { border: 0; background: transparent; color: var(--ink-faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pr-x:hover { color: var(--warn); }
.pr-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
@media (max-width: 760px) { .pr-meta { grid-template-columns: repeat(2, 1fr); } }

.pr-supplier-row { display: flex; gap: 6px; align-items: stretch; }
.pr-supplier-row input { flex: 1; min-width: 0; }
.pr-supplier-add { flex: none; width: 34px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-dim); border-radius: var(--radius); font-size: 18px; line-height: 1; cursor: pointer; }
.pr-supplier-add:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- Vendors ---- */
.vend-table .pr-in, .vend-in { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius); font-size: 12px; padding: 4px 6px; }
.vend-in:focus { outline: none; border-color: var(--accent); }
.vend-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.vend-check { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; cursor: pointer; color: var(--ink-dim); background: var(--panel-2); user-select: none; }
.vend-check:hover { border-color: var(--accent); color: var(--ink); }
.vend-check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vend-check.on input { accent-color: var(--accent-ink); }
.vend-check input { margin: 0; }
.vq-compare th, .vq-compare td { white-space: nowrap; }
.vq-sub { font-size: 10px; color: var(--ink-faint); font-family: var(--mono); margin-top: 2px; }
.vq-win { background: color-mix(in oklab, var(--ok, #1F8A5B) 14%, transparent); color: var(--ink); font-weight: 600; }
.vq-win .vq-sub { color: var(--ink-dim); }
.vq-amt, .vq-total { font-family: var(--mono); }
.vq-gst-amt { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.vq-pcs { font-family: var(--mono); }
.vq-award-col { }
.vq-cell { cursor: pointer; transition: background .1s ease; }
.vq-cell:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.vq-used { box-shadow: inset 0 0 0 2px var(--accent); }

.vend-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 12px; border-radius: var(--radius); margin-bottom: 14px; font-size: 12.5px; }
.vend-status.draft { background: var(--panel-2); border: 1px dashed var(--line-strong); color: var(--ink-dim); }
.vend-status.locked { background: color-mix(in oklab, var(--ok, #1F8A5B) 12%, transparent); border: 1px solid var(--ok, #1F8A5B); color: var(--ink); }
.vend-status button { margin-left: auto; }
.vend-rating { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.stars { color: var(--accent); letter-spacing: 1px; }
.track-status { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; }
.track-status.ok { background: color-mix(in oklab, var(--ok, #1F8A5B) 16%, transparent); color: var(--ok, #1F8A5B); }
.track-status.warn { background: color-mix(in oklab, var(--warn, #b5842a) 16%, transparent); color: var(--warn, #b5842a); }
.track-status.muted { background: var(--panel-2); color: var(--ink-faint); }

/* report preview */
.report-preview { background: #fff; color: #15202b; border-radius: var(--radius); padding: 26px; font-size: 12px; box-shadow: var(--shadow); }
.report-preview * { color: inherit; }
.report-preview .rp-head { display: flex; justify-content: space-between; border-bottom: 2px solid #15202b; padding-bottom: 12px; margin-bottom: 14px; }
.report-preview .rp-logo { width: 46px; height: 46px; background: #15202b; color: #fff; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; border-radius: 5px; }
.report-preview h2 { margin: 0; font-size: 17px; }
.report-preview .rp-meta { font-family: var(--mono); font-size: 10.5px; color: #5a6675; }
.report-preview table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 8px 0 16px; }
.report-preview th, .report-preview td { border: 1px solid #c9d2dc; padding: 5px 8px; text-align: left; }
.report-preview th { background: #eef2f6; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.report-preview td.num { text-align: right; font-family: var(--mono); }
.report-preview .rp-sec { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #2f6d8c; margin: 16px 0 4px; border-bottom: 1px solid #c9d2dc; padding-bottom: 3px; }

@media (max-width: 1180px) {
  .rail { display: none; }
}
@media (max-width: 900px) {
  .sidebar { position: absolute; z-index: 20; height: calc(100vh - 56px); box-shadow: var(--shadow); }
}