/* Meridian Interiors & Fit-out — architectural / blueprint console.
   Graphite + off-white + one blueprint-blue accent, muted amber reserved
   for retention/warning states only. Typography-led, hairline dividers,
   no cards-with-shadows. */

:root{
  --ink: #1C1F26;
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --muted: #4B4F58;
  --muted-2: #6B6F78;
  --line: rgba(28,31,38,0.14);
  --line-strong: rgba(28,31,38,0.28);
  --accent: #2D5F8A;
  --accent-ink: #204a6e;
  --accent-tint: #E7EEF3;
  --amber: #8B5E13;
  --amber-tint: #F3E7D2;
  --amber-line: rgba(139,94,19,0.35);
  --good: #2D5F8A;
  --chrome: #1C1F26;
  --chrome-text: #F7F6F3;
  --chrome-muted: #A9ACB4;
  --chrome-line: rgba(247,246,243,0.14);
  --chrome-accent: #6FA8D8;
  --radius: 3px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family: inherit; font-size: inherit; color: inherit; cursor:pointer; }
a{ color: var(--accent); }
.mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------------- Top command bar ---------------- */
.topbar{
  position: sticky; top:0; z-index: 40;
  background: var(--chrome);
  color: var(--chrome-text);
  border-bottom: 1px solid var(--chrome-line);
}
.topbar-row1{
  max-width: var(--maxw);
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap: 28px;
  padding: 0 24px;
  height: 56px;
}
.brand{
  background:none; border:none; padding:0; display:flex; align-items:center; gap:10px;
  flex: 0 0 auto; min-height:44px;
}
.brandmark{ flex:0 0 auto; }
.brand-name{
  font-weight:600; font-size:14.5px; letter-spacing:0.01em; color: var(--chrome-text);
  display:flex; flex-direction:column; align-items:flex-start; line-height:1.25;
}
.brand-sub{ font-weight:400; font-size:10.5px; color: var(--chrome-muted); letter-spacing:0.02em; }

.navtabs{
  display:flex; align-items:center; gap:4px; flex:1 1 auto;
  overflow-x:auto; scrollbar-width:none; min-height:44px;
}
.navtabs::-webkit-scrollbar{ display:none; }
.navtab{
  background:none; border:none; color: var(--chrome-muted);
  padding: 8px 12px; font-size:13.5px; font-weight:500; letter-spacing:0.01em;
  border-bottom: 2px solid transparent; white-space:nowrap; min-height:44px;
  display:flex; align-items:center;
}
.navtab:hover{ color: var(--chrome-text); }
.navtab.active{ color: var(--chrome-text); border-bottom-color: var(--chrome-accent); }
.navtab[disabled]{ opacity:0.35; pointer-events:none; }

.switcher{ position:relative; flex:0 0 auto; }
.switcher-btn{
  background: rgba(247,246,243,0.06); border:1px solid var(--chrome-line);
  color: var(--chrome-text); border-radius: var(--radius);
  padding: 7px 12px; display:flex; align-items:center; gap:9px;
  font-size:13px; min-height:44px; max-width: 260px;
}
.switcher-btn:hover{ background: rgba(247,246,243,0.1); }
.switcher-dot{ width:7px; height:7px; border-radius:50%; background: var(--chrome-accent); flex:0 0 auto; }
.switcher-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; }
.chev{ color: var(--chrome-muted); flex:0 0 auto; }
.switcher-panel{
  position:absolute; top: calc(100% + 8px); right:0; width: 340px; max-width: 88vw;
  background: var(--surface); color: var(--ink); border:1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(15,17,21,0.18);
  display:none; max-height: 70vh; overflow-y:auto; z-index: 60;
}
.switcher-panel.open{ display:block; }
.switcher-item{
  width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line);
  padding: 12px 16px; display:flex; flex-direction:column; gap:4px; min-height:44px;
}
.switcher-item:last-child{ border-bottom:none; }
.switcher-item:hover{ background: var(--accent-tint); }
.switcher-item.current{ background: var(--accent-tint); }
.si-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.si-name{ font-weight:600; font-size:13.5px; }
.si-stage{ font-size:11px; color: var(--muted); }
.si-bar{ height:3px; background: var(--line); border-radius:2px; overflow:hidden; }
.si-bar-fill{ height:100%; background: var(--accent); }
.si-meta{ font-size:11.5px; color: var(--muted); font-family: var(--mono); }

/* ---------------- View shell ---------------- */
.view{ max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 80px; }
.view-head{ margin-bottom: 24px; }
.view-eyebrow{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--accent); font-weight:600; margin-bottom:6px; }
.view-title{ font-size: 24px; font-weight:700; }
.view-desc{ color: var(--muted); font-size:13.5px; margin-top:6px; max-width:60ch; }

.empty-state{ padding: 60px 0; text-align:center; color: var(--muted); }
.empty-state a, .empty-state button.link{ background:none; border:none; color:var(--accent); text-decoration:underline; padding:0; font-size:inherit; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background: var(--surface); border:1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--radius); padding: 9px 16px; font-size:13.5px; font-weight:500;
  min-height:40px;
}
.btn:hover{ border-color: var(--ink); }
.btn[disabled]{ opacity:0.42; cursor:not-allowed; border-color: var(--line); }
.btn[disabled]:hover{ border-color: var(--line); }
.btn-primary{ background: var(--accent); border-color: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-sm{ padding:6px 12px; font-size:12.5px; min-height:32px; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------- Hairline table / group blocks (used by BOQ) ---------------- */
.hr{ border:none; border-top:1px solid var(--line); margin: 0; }
.hr-strong{ border-top:1px solid var(--line-strong); }

/* ---------------- Portfolio ---------------- */
.portfolio-list{ border-top:1px solid var(--line-strong); }
.pf-row{
  display:grid; grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1fr auto; align-items:center;
  gap:16px; padding: 16px 4px; border-bottom:1px solid var(--line); cursor:pointer; min-height:44px;
  background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
}
.pf-row:hover{ background: rgba(45,95,138,0.045); }
.pf-name{ font-weight:600; font-size:14.5px; }
.pf-sub{ font-size:12px; color: var(--muted); margin-top:2px; }
.pf-col-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted); margin-bottom:3px; }
.pf-value{ font-family: var(--mono); font-size:13.5px; }
.pf-stage{ font-size:12px; }
.pf-bar{ height:5px; background: var(--line); border-radius:3px; overflow:hidden; margin-top:6px; }
.pf-bar-fill{ height:100%; background: var(--accent); }
.pf-arrow{ color: var(--muted); }
.pf-head{
  display:grid; grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1fr auto; gap:16px; padding: 0 4px 10px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted);
}

/* ---------------- Overview / milestone centerpiece ---------------- */
.proj-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.proj-title{ font-size:24px; font-weight:700; }
.proj-type{ display:inline-block; font-size:11px; color: var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.proj-meta{ margin-top:8px; display:flex; flex-direction:column; gap:3px; font-size:13px; color: var(--muted); }
.proj-stage-badge{
  font-family: var(--mono); font-size:12px; padding:6px 12px; border:1px solid var(--line-strong);
  border-radius: var(--radius); white-space:nowrap;
}
.proj-stage-badge.is-complete{ border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.proj-stage-badge.is-waiting{ border-color: var(--amber-line); color: var(--amber); background: var(--amber-tint); }

.centerpiece{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding: 28px 0; margin-bottom: 32px; }
.cp-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color: var(--muted); margin-bottom:14px; }
.cp-figures{ display:flex; align-items:baseline; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.cp-pct{ font-family: var(--mono); font-size:40px; font-weight:600; color: var(--ink); }
.cp-amounts{ font-family: var(--mono); font-size:14px; color: var(--muted); }
.cp-amounts strong{ color: var(--ink); font-weight:600; }

.mstages{ position:relative; }
.mstages-track{ display:flex; width:100%; height:14px; border-radius:3px; overflow:hidden; background: var(--line); }
.mstage-seg{ height:100%; position:relative; border-right: 2px solid var(--bg); }
.mstage-seg:last-child{ border-right:none; }
.mstage-fill{ position:absolute; inset:0; background: var(--accent); transform-origin:left; }
.mstage-fill.partial{ background: repeating-linear-gradient(135deg, var(--accent) 0 6px, var(--accent-ink) 6px 12px); }
.mstages-labels{ display:flex; width:100%; margin-top:10px; }
.mstage-label{ font-size:11.5px; padding-right:14px; }
.mstage-label-name{ font-weight:600; color: var(--ink); }
.mstage-label-pct{ font-family: var(--mono); color: var(--muted); margin-top:2px; }
.mstage-label-status{ font-size:10.5px; margin-top:4px; display:inline-flex; align-items:center; gap:5px; }
.dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.dot-paid{ background: var(--accent); }
.dot-invoiced{ background: var(--amber); }
.dot-pending{ background: var(--line-strong); }
.status-text-paid{ color: var(--accent-ink); }
.status-text-invoiced{ color: var(--amber); }
.status-text-pending{ color: var(--muted); }

.stat-strip{ display:grid; grid-template-columns: repeat(5,1fr); gap:0; border-top:1px solid var(--line-strong); }
.stat{ padding: 16px 18px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted); margin-bottom:8px; }
.stat-value{ font-family: var(--mono); font-size:19px; font-weight:600; }
.stat-value.amber{ color: var(--amber); }
.stat-value.accent{ color: var(--accent-ink); }

.section{ margin-top: 36px; }
.section-title{ font-size:15px; font-weight:600; margin-bottom:14px; }

.mile-list{ border-top:1px solid var(--line-strong); }
.mile-row{ display:grid; grid-template-columns: 26px 1.4fr 0.9fr 0.9fr 0.9fr 1fr auto; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line); }
.mile-idx{ font-family: var(--mono); color: var(--muted); font-size:12px; }
.mile-name{ font-weight:600; font-size:13.5px; }
.mile-pct{ font-family: var(--mono); font-size:13px; color: var(--muted); }
.mile-amt{ font-family: var(--mono); font-size:13px; }
.mile-status{ font-size:11.5px; display:flex; align-items:center; gap:6px; }
.mile-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* ---------------- BOQ ---------------- */
.boq-group{ margin-bottom: 30px; }
.boq-group-head{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px; border-bottom:1px solid var(--line-strong); margin-bottom:2px; }
.boq-zone{ font-size:14.5px; font-weight:600; }
.boq-zone-sub{ font-size:11.5px; color: var(--muted); font-family: var(--mono); }
.boq-table{ width:100%; border-collapse:collapse; }
.boq-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--muted); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--line); }
.boq-table td{ padding:9px 6px; border-bottom:1px solid var(--line); font-size:13px; }
.boq-table th.num, .boq-table td.num{ text-align:right; font-family: var(--mono); }
.boq-table td.desc{ max-width: 420px; }
.boq-subtotal-row td{ border-bottom:none; padding-top:10px; font-weight:600; }
.boq-totals{ margin-top: 18px; margin-left:auto; width: 320px; }
.boq-totals-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.boq-totals-row.grand{ border-bottom:none; border-top:1px solid var(--line-strong); font-weight:700; font-size:15px; padding-top:12px; }
.boq-totals-val{ font-family: var(--mono); }

/* ---------------- Documents list ---------------- */
.doc-groups{ display:flex; flex-direction:column; gap:32px; }
.doc-group-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted); margin-bottom:10px; border-bottom:1px solid var(--line-strong); padding-bottom:8px; }
.doc-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 4px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.doc-row-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.doc-icon{ flex:0 0 auto; color: var(--accent); }
.doc-name{ font-weight:600; font-size:13.5px; }
.doc-sub{ font-size:12px; color: var(--muted); font-family: var(--mono); margin-top:2px; }
.doc-row-actions{ display:flex; gap:8px; }
.doc-locked{ opacity:0.55; }
.doc-locked-note{ font-size:11.5px; color: var(--muted); font-style:italic; }

/* ---------------- Document viewer overlay ---------------- */
.docoverlay{ position:fixed; inset:0; background: rgba(20,22,27,0.55); z-index:100; display:none; }
.docoverlay.open{ display:block; }
.docoverlay-bar{ display:flex; align-items:center; gap:10px; padding:12px 20px; background: var(--chrome); color:var(--chrome-text); }
.docoverlay-spacer{ flex:1; }
.docbtn{ background: rgba(247,246,243,0.08); border:1px solid var(--chrome-line); color: var(--chrome-text); border-radius:var(--radius); padding:8px 16px; font-size:13px; font-weight:500; min-height:40px; display:inline-flex; align-items:center; gap:8px; }
.docbtn:hover{ background: rgba(247,246,243,0.16); }
.docbtn-primary{ background: var(--accent); border-color: var(--accent); }
.docbtn-primary:hover{ background: var(--accent-ink); }
.docbtn-ghost{ background:none; }
.docoverlay-scroll{ height: calc(100% - 56px); overflow-y:auto; padding: 28px 16px 60px; }
.docpaper{ max-width: 800px; margin:0 auto; background:#fff; color:#1C1F26; box-shadow: 0 18px 50px rgba(0,0,0,0.28); min-height: 400px; }

/* ---------------- Toast ---------------- */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background: var(--chrome); color: var(--chrome-text); padding:12px 20px; border-radius:var(--radius); font-size:13.5px; opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease; z-index:200; box-shadow: 0 10px 28px rgba(0,0,0,0.3); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==================== Document paper (shared by all 5 doc types) ==================== */
.doc{ font-family: var(--sans); color:#1C1F26; padding: 42px 44px 50px; font-size:12.8px; line-height:1.55; }
.doc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; border-bottom:2px solid #1C1F26; padding-bottom:18px; margin-bottom:22px; }
.doc-brand{ display:flex; gap:10px; align-items:flex-start; }
.doc-brand-name{ font-weight:700; font-size:16px; }
.doc-brand-tag{ font-size:11px; color:#4B4F58; margin-top:1px; }
.doc-brand-addr{ font-size:10.5px; color:#4B4F58; margin-top:8px; line-height:1.5; max-width:230px; }
.doc-title-block{ text-align:right; }
.doc-title{ font-size:19px; font-weight:700; letter-spacing:0.01em; }
.doc-title-sub{ font-size:10.5px; color:#4B4F58; text-transform:uppercase; letter-spacing:0.06em; margin-top:3px; }
.doc-refbox{ margin-top:10px; font-family: var(--mono); font-size:11px; }
.doc-refbox div{ display:flex; justify-content:flex-end; gap:8px; }
.doc-refbox span:first-child{ color:#4B4F58; }
.doc-parties{ display:flex; justify-content:space-between; gap:24px; margin-bottom:22px; }
.doc-party{ flex:1; }
.doc-party-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#4B4F58; margin-bottom:5px; }
.doc-party-name{ font-weight:600; font-size:13px; }
.doc-party-line{ font-size:11.5px; color:#333; margin-top:2px; }
.doc-project-strip{ background:#F7F6F3; border:1px solid #E4E2DC; border-radius:3px; padding:10px 14px; margin-bottom:22px; font-size:11.5px; display:flex; flex-wrap:wrap; gap:6px 22px; }
.doc-project-strip b{ font-weight:600; }
.doc h3.doc-section-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; margin: 20px 0 8px; color:#1C1F26; border-bottom:1px solid #1C1F26; padding-bottom:5px; }
.doc table.dtab{ width:100%; border-collapse:collapse; margin-bottom:6px; }
.doc table.dtab th{ text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; color:#4B4F58; font-weight:600; padding:6px 5px; border-bottom:1px solid #1C1F26; }
.doc table.dtab td{ padding:7px 5px; border-bottom:1px solid #E4E2DC; font-size:11.5px; }
.doc table.dtab th.num, .doc table.dtab td.num{ text-align:right; font-family: var(--mono); }
.doc .group-subtotal td{ border-bottom:2px solid #1C1F26; font-weight:600; padding-top:8px; padding-bottom:8px; }
.doc .zone-caption{ font-weight:600; font-size:11.5px; margin:14px 0 4px; }
.doc .totals{ margin-left:auto; width:280px; margin-top:14px; }
.doc .totals-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:11.5px; border-bottom:1px solid #E4E2DC; }
.doc .totals-row.grand{ border-bottom:none; border-top:1.5px solid #1C1F26; font-weight:700; font-size:13.5px; padding-top:9px; margin-top:3px; }
.doc .totals-row .num{ font-family: var(--mono); }
.doc .retention-row .num{ color:#8B5E13; }
.doc .callout{ background:#F3E7D2; border:1px solid rgba(139,94,19,0.35); border-radius:3px; padding:12px 14px; font-size:11.5px; margin:16px 0; }
.doc .callout.blue{ background:#E7EEF3; border-color: rgba(45,95,138,0.3); }
.doc .callout-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; margin-bottom:4px; }
.doc .progress-mini{ height:8px; background:#E4E2DC; border-radius:2px; overflow:hidden; margin:8px 0; }
.doc .progress-mini-fill{ height:100%; background:#2D5F8A; }
.doc .signrow{ display:flex; justify-content:space-between; gap:30px; margin-top:44px; }
.doc .signbox{ flex:1; }
.doc .signline{ border-top:1px solid #1C1F26; margin-top:36px; padding-top:6px; font-size:10.5px; color:#4B4F58; }
.doc .signname{ font-size:11.5px; font-weight:600; }
.doc-footer{ margin-top:34px; padding-top:14px; border-top:1px solid #E4E2DC; font-size:9.5px; color:#4B4F58; display:flex; justify-content:space-between; gap:20px; }
.doc .notebox{ font-size:11px; color:#333; background:#F7F6F3; border:1px solid #E4E2DC; border-radius:3px; padding:12px 14px; margin-top:16px; }
.doc .stampline{ font-family: var(--mono); font-size:10.5px; margin-top:4px; }
.doc .amt-words{ font-size:11px; font-style:italic; color:#4B4F58; margin-top:4px; }

/* ==================== Responsive / mobile (down to ~360px) ==================== */
@media (max-width: 860px){
  .topbar-row1{ flex-wrap:wrap; height:auto; padding:10px 16px; gap:10px 16px; row-gap:8px; }
  .brand{ order:1; }
  .switcher{ order:2; margin-left:auto; }
  .navtabs{ order:3; flex-basis:100%; justify-content:flex-start; border-top:1px solid var(--chrome-line); padding-top:4px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%); }
  .view{ padding:22px 16px 70px; }
  .stat-strip{ grid-template-columns: repeat(2,1fr); }
  .stat{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .pf-head{ display:none; }
  .pf-row{ grid-template-columns: 1fr auto; grid-template-areas: "name arrow" "stage stage" "bar bar"; row-gap:6px; }
  .pf-row > div:nth-child(1){ grid-area:name; }
  .pf-row .pf-arrow{ grid-area:arrow; }
  .pf-col.stage{ grid-area:stage; }
  .pf-col.value, .pf-col.hide-mobile{ display:none; }
  .mile-row{ grid-template-columns: 1fr; row-gap:6px; padding:16px 4px; }
  .mile-actions{ justify-content:flex-start; }
  .btn-sm{ min-height:44px; padding:10px 14px; }
  .docbtn{ min-height:44px; }
  .doc-row-actions .btn-sm{ min-height:44px; }
  .boq-table{ font-size:12px; }
  .doc-parties{ flex-direction:column; }
  .docpaper{ max-width:100%; }
  .doc{ padding: 26px 18px 34px; }
  .doc-head{ flex-direction:column; gap:14px; }
  .doc-title-block{ text-align:left; }
  .doc-refbox div{ justify-content:flex-start; }
  .signrow{ flex-direction:column; gap:24px; }
}

/* ==================== Print ==================== */
@media print{
  body *{ visibility:hidden; }
  .docoverlay, .docoverlay *{ visibility:visible; }
  .docoverlay{ position:static; background:none; display:block !important; }
  .docoverlay-bar, .noprint{ display:none !important; }
  .docoverlay-scroll{ height:auto; overflow:visible; padding:0; }
  .docpaper{ box-shadow:none; max-width:100%; margin:0; }
  .toast, .topbar{ display:none !important; }
  @page{ margin: 12mm; }
}