/* ═══════════════════════════════════════════════
   BIDCRAFT — Shared Design System
   Warm Graphite · Steel Blue Accent
   Next313 / Dignetix Ltd
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Barlow+Condensed:wght@600;700;800;900&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

/* ── TOKENS ── */
:root {
  --bg:       #0C0B09;
  --bgw:      #110F0C;
  --sur:      #181512;
  --sur2:     #1F1C18;
  --sur3:     #26221D;
  --bdr:      #2C2822;
  --bdr2:     #342F28;
  --st:       #5A9FD4;
  --std:      #3A7AAE;
  --stb:      #7BBDE8;
  --stg:      rgba(90,159,212,0.10);
  --tx:       #EDE8E0;
  --txd:      #8A8070;
  --txm:      #4A4438;
  --amb:      #D4964A;
  --ambd:     rgba(212,150,74,0.14);
  --grn:      #5AB88A;
  --grnd:     rgba(90,184,138,0.14);
  --red:      #C96B6B;
  --redd:     rgba(201,107,107,0.13);
  --radius:   6px;
  --radius-sm:4px;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── LAYOUT SHELL ── */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.body-row {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Flex children default to flex-shrink:1, which squashes stacked cards
   to fit inside .main-content rather than triggering its overflow:auto.
   Result: the last card on a long page (Reports → Repository overview)
   gets compressed to near-zero height and feels "cut off". Keeping
   children at their natural height makes overflow:auto kick in and
   the page scrolls properly. */
.main-content > * { flex-shrink: 0; }

/* ── TOP NAV ── */
.top-nav {
  height: 52px;
  background: var(--sur);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  gap: 24px;
}

.nav-left  { display: flex; align-items: center; gap: 24px; }
.nav-right { display: flex; align-items: center; gap: 12px; }

/* Wordmark */
.wordmark { display: flex; align-items: baseline; gap: 0; line-height: 1; }
.wordmark-bid {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 900;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--tx);
}
.wordmark-craft {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 900;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--st);
}

/* Nav links */
.nav-links { display: flex; gap: 2px; }
.nav-link {
  padding: 5px 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--txd);
  background: transparent;
  border: none; border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover   { color: var(--tx); background: var(--sur2); }
.nav-link.active  { color: var(--stb); background: rgba(90,159,212,0.12); }

/* Attention indicator on the top-nav Admin link. Shown by
   admin-attention.js when /api/admin/attention reports total > 0. */
.nav-link { position: relative; }
.nav-attention-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amb);
  box-shadow: 0 0 0 2px var(--bgw);
  pointer-events: none;
}

/* Search */
.nav-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--sur2); border: 1px solid var(--bdr);
  border-radius: var(--radius-sm);
  padding: 6px 12px; width: 200px;
  font-size: 11px; color: var(--txm);
  transition: border-color 0.15s;
}
.nav-search:focus-within { border-color: var(--st); }
.nav-search input {
  background: none; border: none; outline: none;
  color: var(--tx); font-size: 11px; font-family: inherit; width: 100%;
}
.nav-search input::placeholder { color: var(--txm); }

/* Notification bell */
.notif-btn {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--bdr);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--txd); font-size: 15px; position: relative;
  transition: border-color 0.15s;
}
.notif-btn:hover { border-color: var(--bdr2); color: var(--tx); }
.notif-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--st); border: 1.5px solid var(--sur);
}

/* Avatar */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--std), var(--st));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  letter-spacing: 0.5px; flex-shrink: 0;
}
.avatar.sm { width: 26px; height: 26px; font-size: 9px; }
.avatar.muted { background: var(--sur3); color: var(--txd); }

/* ── SIDEBAR ── */
.sidebar {
  width: 220px;
  background: var(--sur);
  border-right: 1px solid var(--bdr);
  display: flex; flex-direction: column;
  overflow: hidden; flex-shrink: 0;
}
.sidebar-section { padding: 16px 0 8px; }
.sidebar-section-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--txm); padding: 0 14px; margin-bottom: 4px;
}
.sidebar-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.1s;
}
.sidebar-item:hover { background: var(--sur2); }
.sidebar-item.active {
  background: rgba(90,159,212,0.10);
  border-left-color: var(--st);
}
.sidebar-item-left {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--txd);
}
.sidebar-item.active .sidebar-item-left { color: var(--tx); font-weight: 600; }
.sidebar-count {
  font-size: 10px; font-weight: 700; color: var(--st);
  background: rgba(90,159,212,0.15);
  padding: 1px 7px; border-radius: 10px;
}
.sidebar-divider { height: 1px; background: var(--bdr); margin: 8px 0; }

/* ── RIGHT RAIL ── */
.right-rail {
  width: 230px;
  background: var(--bgw);
  border-left: 1px solid var(--bdr);
  padding: 18px 16px;
  display: flex; flex-direction: column;
  gap: 22px; overflow-y: auto; flex-shrink: 0;
}

/* ── CARDS ── */
.card {
  background: var(--sur);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.card-head-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--txd);
}
.card-body { padding: 16px; }
.card-body-lg { padding: 18px 20px; }

/* ── SECTION LABEL ── */
.sec-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--txm); margin-bottom: 10px;
}

/* ── PILLS / BADGES ── */
.pill {
  display: inline-block;
  padding: 2px 9px; border-radius: 10px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  white-space: nowrap; line-height: 1.6;
}
.pill-steel  { color: var(--stb);  background: rgba(90,159,212,0.16); }
.pill-steelb { color: var(--stb);  background: rgba(122,189,232,0.14); }
.pill-green  { color: var(--grn);  background: var(--grnd); }
.pill-amber  { color: var(--amb);  background: var(--ambd); }
.pill-red    { color: var(--red);  background: var(--redd); }
.pill-muted  { color: var(--txd);  background: rgba(90,80,70,0.18); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s, background 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn-sm { padding: 5px 11px; font-size: 9px; }

.btn-primary { background: var(--st);   color: #fff; }
.btn-ghost   { background: transparent; color: var(--txd); border: 1px solid var(--bdr); }
.btn-success { background: var(--grnd); color: var(--grn); border: 1px solid rgba(90,184,138,0.3); }
.btn-danger  { background: var(--redd); color: var(--red); border: 1px solid rgba(201,107,107,0.3); }

/* ── FORM FIELDS ── */
.field-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--txm); margin-bottom: 5px;
}
.field-value {
  background: var(--sur2); border: 1px solid var(--bdr);
  border-radius: var(--radius-sm); padding: 8px 11px;
  font-size: 12px; color: var(--tx); line-height: 1.45;
}
.field-input {
  background: var(--sur2); border: 1px solid var(--bdr);
  border-radius: var(--radius-sm); padding: 8px 11px;
  font-size: 12px; color: var(--tx); font-family: inherit;
  width: 100%; outline: none;
  transition: border-color 0.15s;
}
.field-input:focus { border-color: var(--st); }
.field-input::placeholder { color: var(--txm); }

/* ── TABLES ── */
.table-head {
  display: grid; padding: 8px 16px;
  background: var(--sur2); border-bottom: 1px solid var(--bdr);
}
.th {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--txm);
  overflow: hidden;
}
.table-row {
  display: grid; padding: 11px 16px;
  align-items: center;
  border-bottom: 1px solid var(--bdr);
  transition: background 0.1s;
}
.table-row:last-child { border-bottom: none; }
.table-row:hover { background: var(--sur2); }
.td { font-size: 11px; color: var(--txd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-name { font-size: 12px; font-weight: 600; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-sub  { font-size: 10px; color: var(--txm); margin-top: 1px; }

/* ── TOGGLE ── */
.toggle {
  width: 32px; height: 17px; border-radius: 9px;
  position: relative; cursor: pointer;
  transition: background 0.2s; flex-shrink: 0;
}
.toggle.on  { background: var(--st); }
.toggle.off { background: var(--sur3); border: 1px solid var(--bdr); }
.toggle-knob {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; position: absolute; top: 2px;
  transition: left 0.2s;
}
.toggle.on  .toggle-knob { left: 17px; }
.toggle.off .toggle-knob { left: 2px; }

/* ── SCORE BAR ── */
.score-bar { display: flex; align-items: center; gap: 8px; }
.score-track {
  height: 4px; border-radius: 2px;
  background: var(--sur3); overflow: hidden; flex: 1; max-width: 60px;
}
.score-fill { height: 100%; border-radius: 2px; }
.score-fill.high   { background: var(--grn); }
.score-fill.mid    { background: var(--st); }
.score-fill.low    { background: var(--amb); }
.score-val { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-val.high { color: var(--grn); }
.score-val.mid  { color: var(--stb); }
.score-val.low  { color: var(--amb); }

/* ── PHASE TRACKER ── */
.phase-track { display: flex; align-items: flex-start; }
.phase-step  { flex: 1; display: flex; flex-direction: column; align-items: center; }
.phase-connectors { display: flex; align-items: center; width: 100%; }
.phase-line  { flex: 1; height: 2px; }
.phase-line.done   { background: var(--grn); }
.phase-line.future { background: var(--bdr); }
.phase-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800;
}
.phase-dot.done   { background: var(--grn); color: #fff; }
.phase-dot.active { background: var(--st);  color: #fff; border: 2px solid var(--stb); }
.phase-dot.future { background: var(--sur3); color: var(--txm); border: 1px solid var(--bdr); }
.phase-label {
  font-size: 7px; font-weight: 600; text-transform: uppercase;
  text-align: center; margin-top: 5px; line-height: 1.25; letter-spacing: 0.3px;
}
.phase-label.done   { color: var(--grn); }
.phase-label.active { color: var(--stb); }
.phase-label.future { color: var(--txm); }

/* Clickable tracker step. The base .phase-step is a plain div; the
   `.clickable` class is added per-step by phase-tracker.js for steps
   the user is allowed to navigate to (past phases for everyone,
   future phases for admin/RL on active RFPs). */
.phase-step.clickable { cursor: pointer; user-select: none; }
.phase-step.clickable:hover .phase-label { color: var(--stb); }
.phase-step.clickable:hover .phase-dot.done   { box-shadow: 0 0 0 3px var(--grnd); }
.phase-step.clickable:hover .phase-dot.future { background: var(--sur3); border-color: var(--stb); color: var(--stb); }

/* Phase groups (v0.25.0): consecutive phases that share a category
   label render inside a group wrapper. The group label sits above
   the bubbles; the bubbles inside continue to render as normal
   .phase-step elements so the connector lines remain continuous. */
.phase-group { display: flex; flex-direction: column; }
.phase-group-label {
  font-size: 8px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--stb);
  text-align: center; margin-bottom: 4px;
  padding-bottom: 3px; border-bottom: 1px dashed var(--bdr);
}
.phase-group-label.phase-group-label-spacer {
  visibility: hidden; border-bottom-color: transparent;
}
.phase-group-bubbles { display: flex; align-items: flex-start; }
.phase-group-bubbles .phase-step { flex: 1; }

/* Archive (phase 8) reads as a destination, not a working step.
   Muted background + dashed border separator + reduced opacity. */
.phase-step.archive .phase-dot {
  background: var(--sur3); color: var(--txm);
  border: 1px dashed var(--bdr2);
}
.phase-step.archive .phase-dot.done {
  background: var(--sur3); color: var(--grn);
  border: 1.5px solid var(--grn);
}
.phase-step.archive .phase-dot.active {
  background: var(--sur2); color: var(--txd);
  border: 2px dashed var(--bdr2);
}
.phase-step.archive .phase-label { color: var(--txm); font-style: italic; }

/* Intake (phase 1) reads as a passive origin step — recorded
   automatically at RFP creation, so it's always complete and never
   clickable. Muted dot (no green "done" fill) + italic muted label. */
.phase-step.intake .phase-dot,
.phase-step.intake .phase-dot.done,
.phase-step.intake .phase-dot.active {
  background: var(--sur3); color: var(--txm);
  border: 1px dashed var(--bdr2);
}
.phase-step.intake .phase-label { color: var(--txm); font-style: italic; }

/* ── ACTIVITY FEED ── */
.activity-item {
  display: flex; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--bdr);
}
.activity-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.activity-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sur3); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--stb); flex-shrink: 0; margin-top: 1px;
}
.activity-who   { font-size: 11px; font-weight: 700; color: var(--tx); }
.activity-what  { font-size: 10px; color: var(--txm); margin-top: 1px; line-height: 1.4; }
.activity-when  { font-size: 9px; color: var(--txm); margin-top: 2px; }

/* ── BANNER / ALERT ── */
.banner {
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  display: flex; gap: 10px; align-items: flex-start;
}
.banner-icon  { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.banner-title { font-size: 10px; font-weight: 700; margin-bottom: 2px; }
.banner-body  { font-size: 10px; line-height: 1.5; }
.banner-info   { background: rgba(90,159,212,0.08); border: 1px solid rgba(90,159,212,0.22); }
.banner-info   .banner-title { color: var(--stb); }
.banner-info   .banner-body  { color: var(--txd); }
.banner-warn   { background: var(--ambd); border: 1px solid rgba(212,150,74,0.3); }
.banner-warn   .banner-title { color: var(--amb); }
.banner-warn   .banner-body  { color: var(--txd); }
.banner-success{ background: var(--grnd); border: 1px solid rgba(90,184,138,0.3); }
.banner-success .banner-title { color: var(--grn); }
.banner-success .banner-body  { color: var(--txd); }

/* ── PAGE HEADER ── */
.page-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 16px;
}
.page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--tx); line-height: 1; margin-bottom: 4px;
}
.page-subtitle { font-size: 11px; color: var(--txm); }

/* ── STAT CARDS ── */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-card {
  padding: 14px 20px;
  border-right: 1px solid var(--bdr);
  background: var(--bgw);
}
.stat-card:last-child { border-right: none; }
.stat-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--txm); margin-bottom: 7px; }
.stat-value { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 900; color: var(--tx); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.stat-delta { font-size: 10px; font-weight: 600; }
.stat-delta.up   { color: var(--grn); }
.stat-delta.down { color: var(--red); }
.stat-delta.warn { color: var(--amb); }

/* ── PIPELINE BAR ── */
.pipeline-bar { display: flex; border-bottom: 1px solid var(--bdr); }
.pipeline-phase {
  flex: 1; padding: 10px 0 10px 16px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s, background 0.12s;
  cursor: pointer;
  user-select: none;
  /* Column flex so the count pins to the bottom regardless of how
     many lines the label wraps to. Without this, narrow cells with
     long labels ("COVER SHEET") push their count below the line of
     shorter labels ("REVIEW"), breaking the row alignment on
     mobile. v0.27.1 fix. */
  display: flex; flex-direction: column;
}
.pipeline-phase-count { margin-top: auto; }
@media (hover: hover) {
  .pipeline-phase:hover { background: var(--sur2); }
}
.pipeline-phase.has-items { border-bottom-color: var(--st); }
.pipeline-phase.selected { background: var(--sur2); border-bottom-color: var(--stb); border-bottom-width: 3px; }
.pipeline-phase-label { font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txm); margin-bottom: 3px; }
.pipeline-phase.has-items .pipeline-phase-label { color: var(--stb); }
.pipeline-phase.selected .pipeline-phase-label { color: var(--stb); }
.pipeline-phase-count { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 900; color: var(--txm); line-height: 1; }
.pipeline-phase.has-items .pipeline-phase-count { color: var(--tx); }
.pipeline-phase.selected .pipeline-phase-count { color: var(--tx); }

/* Pipeline groups (v0.25.0). Decision (2-3) and Prepare (4-5) get a
   small banner label above their cells. Standalones (Review, Submit,
   Archive) sit in matching wrappers with an invisible spacer so the
   count rows stay vertically aligned. */
.pipeline-group { flex: 1; display: flex; flex-direction: column; }
.pipeline-group-label {
  font-size: 8px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--stb);
  padding: 4px 0 3px 16px;
  border-bottom: 1px dashed var(--bdr);
  background: var(--sur2);
}
.pipeline-group-label.pipeline-group-label-spacer {
  visibility: hidden; background: transparent; border-bottom-color: transparent;
}
.pipeline-group-cells { display: flex; flex: 1; }
.pipeline-group-cells .pipeline-phase { flex: 1; }

/* Archive cell — visual destination, muted compared to working
   phases. Reads as "where finished RFPs live" rather than another
   working step in the pipeline. */
.pipeline-phase.archive {
  background: var(--sur2);
  border-left: 1px dashed var(--bdr2);
}
.pipeline-phase.archive .pipeline-phase-label { color: var(--txm); font-style: italic; }
.pipeline-phase.archive .pipeline-phase-count { color: var(--txm); }
.pipeline-phase.archive.has-items { border-bottom-color: var(--bdr2); }
.pipeline-phase.archive.has-items .pipeline-phase-label,
.pipeline-phase.archive.has-items .pipeline-phase-count { color: var(--txd); }

/* Intake cell — passive origin step, recorded at RFP creation. Muted
   and non-clickable (not a filterable working phase). Separator on its
   right edge mirrors Archive's left-edge divider. */
.pipeline-phase.intake {
  background: var(--sur2);
  border-right: 1px dashed var(--bdr2);
  cursor: default;
}
.pipeline-phase.intake .pipeline-phase-label { color: var(--txm); font-style: italic; }
.pipeline-phase.intake .pipeline-phase-count { color: var(--txm); }
.pipeline-phase.intake.has-items { border-bottom-color: var(--bdr2); }
.pipeline-phase.intake.has-items .pipeline-phase-label,
.pipeline-phase.intake.has-items .pipeline-phase-count { color: var(--txd); }

/* On phones the cells get narrow enough that the 16px left padding
   eats most of the content width. Tighten the inner padding (cell
   + group label) so labels have room to render without wrapping. */
@media (max-width: 720px) {
  .pipeline-phase { padding: 8px 4px 8px 8px; }
  .pipeline-phase-label { font-size: 8px; letter-spacing: 0.5px; }
  .pipeline-phase-count { font-size: 17px; }
  .pipeline-group-label { padding: 3px 0 2px 8px; letter-spacing: 0.5px; }
}

/* ── SECTION TABS (Admin) ── */
.sub-tabs { display: flex; background: var(--bgw); border-bottom: 1px solid var(--bdr); flex-shrink: 0; }
.sub-tab {
  padding: 11px 18px; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--txd); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sub-tab:hover { color: var(--tx); }
.sub-tab.active { color: var(--stb); border-bottom-color: var(--st); }

/* Numeric attention pill on a sub-tab. Painted by admin-attention.js
   when /api/admin/attention reports a non-zero count for that area. */
.sub-tab-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  min-width: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  background: var(--amb);
  border-radius: 8px;
  vertical-align: 1px;
}

/* ── DOCUMENT ITEM ── */
.doc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  background: var(--sur2); border: 1px solid var(--bdr);
  margin-bottom: 6px; cursor: pointer;
  transition: border-color 0.15s;
}
.doc-item:hover { border-color: var(--bdr2); }
.doc-icon { font-size: 13px; flex-shrink: 0; }
.doc-name { font-size: 10px; color: var(--txd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── REVISION TAG ── */
.rev-tag {
  font-size: 9px; font-weight: 700; color: var(--st);
  background: var(--sur3); padding: 2px 7px;
  border-radius: 3px; font-variant-numeric: tabular-nums; flex-shrink: 0;
}

/* ── COMMENT CARD ── */
.comment-card {
  background: var(--sur2); border-radius: var(--radius-sm);
  padding: 8px 10px; border: 1px solid var(--bdr); margin-bottom: 7px;
}
.comment-who  { font-size: 9px; font-weight: 700; color: var(--stb); }
.comment-when { font-size: 9px; color: var(--txm); font-weight: 400; }
.comment-text { font-size: 10px; color: var(--txd); margin-top: 3px; line-height: 1.5; }

/* ── HERO BAND ── */
.hero-band {
  background: var(--bgw); border-bottom: 1px solid var(--bdr);
  padding: 20px 28px 16px;
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-shrink: 0;
}
.hero-date  { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--txm); margin-bottom: 5px; }
.hero-title { font-family: 'Barlow', sans-serif; font-size: 22px; font-weight: 900; color: var(--tx); line-height: 1.1; margin-bottom: 5px; }
.hero-sub   { font-size: 12px; color: var(--txd); }

/* ── BREADCRUMB ── */
.breadcrumb { font-size: 10px; color: var(--txm); letter-spacing: 0.8px; }
.breadcrumb a { color: var(--txm); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--txd); }

/* Page-level breadcrumb row — sits below the global top-nav on RFP
   sub-pages (cover-sheet, rfp-detail, team-setup, review, etc.) so the
   global nav stays persistent while the user is "inside" an RFP. */
.page-breadcrumb {
  background: var(--bgw);
  border-bottom: 1px solid var(--bdr);
  padding: 8px 24px;
  flex-shrink: 0;
}
.page-breadcrumb .breadcrumb { font-size: 11px; }

/* ── ADMIN GROUPS (top-level) ──
   Two-tier admin nav: groups on top, sub-tabs below. Same look-and-
   feel as .sub-tabs but slightly bolder and with a stronger active
   underline so the hierarchy reads correctly. */
.admin-groups {
  display: flex;
  background: var(--sur);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.admin-group {
  padding: 12px 22px; font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--txd); background: transparent; border: none;
  border-bottom: 3px solid transparent; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-group:hover { color: var(--tx); }
.admin-group.active { color: var(--stb); border-bottom-color: var(--stb); }

/* ── GRID UTILITIES ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.col-span-2 { grid-column: 1 / -1; }

/* ── SCROLLBAR STYLING ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--sur3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bdr2); }

/* ── UTILS ── */
.flex-row   { display: flex; align-items: center; }
.gap-4      { gap: 4px; }
.gap-6      { gap: 6px; }
.gap-8      { gap: 8px; }
.gap-12     { gap: 12px; }
.gap-16     { gap: 16px; }
.flex-1     { flex: 1; }
.min-w-0    { min-width: 0; }
.trunc      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-4       { margin-top: 4px; }
.mt-8       { margin-top: 8px; }
.mt-12      { margin-top: 12px; }
.mb-6       { margin-bottom: 6px; }
.mb-10      { margin-bottom: 10px; }
.mb-16      { margin-bottom: 16px; }
.text-muted { color: var(--txm); }
.text-dim   { color: var(--txd); }
.text-steel { color: var(--stb); }
.text-green { color: var(--grn); }
.text-amber { color: var(--amb); }
.text-red   { color: var(--red); }
.fw-600     { font-weight: 600; }
.fw-700     { font-weight: 700; }
.fs-10      { font-size: 10px; }
.fs-11      { font-size: 11px; }
.fs-12      { font-size: 12px; }

/* ── DESKTOP-ONLY MARKER ──────────────────────────────────────────
   Pages that aren't fully usable on phones (intricate response editor,
   the autofill review modal, etc.) can add `data-desktop-only` to a
   container; we'll show a soft banner on mobile rather than a broken
   layout. Add the attribute on the page; the banner shows itself. */
.mobile-only-banner { display: none; }
@media (max-width: 720px) {
  [data-desktop-only] .mobile-only-banner {
    display: block;
    background: rgba(212, 159, 90, 0.16);
    border: 1px solid var(--amb);
    color: var(--amb);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
}

/* ── RESPONSIVE: tablet ───────────────────────────────────────────
   Below 1024px, the right rail (small KPIs, news, etc.) is the
   first thing to drop — it's never load-bearing for any task. */
@media (max-width: 1024px) {
  .right-rail { display: none; }
  .sidebar { width: 180px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── RESPONSIVE: phone ────────────────────────────────────────────
   Below 720px, stack body-row vertically. Sidebar becomes a
   horizontal-scrollable strip at the top of the content area. */
@media (max-width: 720px) {
  /* Tighten the chrome so content gets the screen */
  .top-nav { padding: 0 8px; gap: 6px; height: 48px; }
  .nav-left { gap: 6px; min-width: 0; flex: 1; }
  .nav-right { gap: 6px; flex-shrink: 0; }
  /* Version stays visible on mobile — admins need a quick way to
     confirm what build they're looking at. Just shrunk. */
  .nav-version { font-size: 9px; padding: 2px 6px; opacity: 0.7; }
  .notif-btn { display: none; }
  /* Global search drops on phone — too wide to coexist with brand +
     four nav-links + avatar in a 360px viewport. The search box on the
     dashboard (a separate inline filter) keeps working since it lives
     in the page body, not the nav. */
  .nav-search { display: none; }

  /* Brand: keep the icon, drop the wordmark text below 720px so the
     four nav-links don't push past the right edge. */
  .brand-name { display: none; }

  /* Nav links shrink so the four-link row fits */
  .nav-link { padding: 4px 6px; font-size: 10px; letter-spacing: 0.3px; }
  .nav-links { gap: 0; flex-shrink: 1; min-width: 0; overflow-x: auto; }

  /* Breadcrumb truncation — applies inside .page-breadcrumb (its
     own row) and any inline breadcrumbs left in the page body. */
  .breadcrumb {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10px;
  }
  .page-breadcrumb { padding: 6px 14px; }

  /* Admin groups shrink on phone the same way sub-tabs do. */
  .admin-groups { overflow-x: auto; flex-wrap: nowrap; }
  .admin-group { padding: 9px 14px; flex-shrink: 0; font-size: 10px; letter-spacing: 0.8px; }

  /* Stack sidebar above main content */
  .body-row { flex-direction: column; overflow-y: auto; }
  /* Bottom padding so an inline-expanded edit row at the bottom of a
     list isn't clipped against the viewport edge — Save / Cancel
     buttons stay reachable on phone. */
  .main-content { padding: 14px 14px 96px; gap: 12px; }
  .hero-band { padding: 14px 14px 12px; flex-wrap: wrap; gap: 8px; }

  /* Select inputs — native iOS / Android renders them as rounded
     pills which looked oversized against the rest of the chrome.
     Square them up to match the flat input style and supply our
     own caret. */
  select, select.form-input, select.search-bar {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 4px;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%237f8a99' d='M5 6 0 0h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 6px;
  }

  /* Sidebar → horizontal pill strip. Each .sidebar-item becomes a
     pill that scrolls left/right. Header + footer rows still stack. */
  .sidebar {
    width: auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--bdr);
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
  }
  .sidebar > div:first-child,
  .sidebar > div:last-child,
  .sidebar #review-queue-wrap {
    display: none;
  }
  .sidebar > div[id$="-list"],
  .sidebar #dept-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    flex: 1;
  }
  .sidebar-item {
    flex-shrink: 0;
    padding: 6px 12px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--sur2);
    white-space: nowrap;
  }
  .sidebar-item.active {
    background: rgba(90,159,212,0.18);
    border-bottom-color: var(--st);
    border-left: none;
  }
  .sidebar-item-left { font-size: 11px; }

  /* Sub-tabs — let them scroll horizontally rather than wrap */
  .sub-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .sub-tab { padding: 9px 12px; flex-shrink: 0; font-size: 9px; letter-spacing: 0.6px; }

  /* Forms in 2-column → 1-column. row-gap stays generous so labels
     visibly attach to their own input below; otherwise (with the 5px
     field-label margin-bottom) labels read as belonging to the input
     above them. */
  .field-grid,
  .grid-2 { grid-template-columns: 1fr; row-gap: 16px; column-gap: 8px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Tables built with grid-template-columns blowing out the layout —
     allow the row to wrap and the cells to shrink. Page-specific
     column rules (.users-cols, .notif-cols, etc.) still apply but
     the row itself wraps to multiple lines now. */
  .table-row,
  .table-head {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }
  .table-head { display: none; }

  /* Modals: full-bleed on phones */
  .modal-dialog {
    max-width: 100% !important;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  /* Page header (title + buttons) wraps */
  .page-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-title { font-size: 16px; }
  .page-subtitle { font-size: 11px; }

  /* Brand wordmark a touch smaller */
  .wordmark-bid, .wordmark-craft { font-size: 15px; letter-spacing: 2.5px; }

  /* Long button labels (e.g. "✓ Complete & continue to Auto-Fill")
     overflow the page header at narrow widths because .btn has
     white-space:nowrap globally. Let them wrap inside the button
     rather than blowing past the viewport edge. */
  .btn { white-space: normal; max-width: 100%; line-height: 1.25; text-align: center; }

  /* Utility: hide content on phones. Used for long button-label
     suffixes (Complete-button "& continue to Auto-Fill", etc.). */
  .hide-on-mobile { display: none; }
}

/* ── PRINT (cheap win for the Reports tab later) ────────────────── */
@media print {
  .top-nav, .sidebar, .right-rail, .sub-tabs, .admin-groups, .page-breadcrumb, .notif-btn { display: none !important; }
  .main-content { padding: 0; }
  .card { border: 1px solid #999; break-inside: avoid; }
}