/* Bid Tracker V2 mockup — shared design tokens
 *
 * Extends the existing CRS mockup palette (Lato + brand navy + tan/HVAC accents
 * matching docs/mocks/projects_landing_v2_mock.html) with V2-specific tokens:
 *   - bumped text scale per spec ("Readability bump baked into V1")
 *   - confidence dot colors (green/yellow/red + PM-edited none)
 *   - bid-due countdown color states (5 levels)
 *   - validation_failure_reason badge palette
 */

:root {
  /* CRS brand palette (same as projects_landing_v2_mock.html) */
  --color-surface:        #FFFFFF;
  --color-surface-raised: #F6F7F9;
  --color-surface-sunken: #EAEEF2;
  --color-border:         #D9DEE4;
  --color-border-strong:  #BCC4CC;
  --color-text-primary:   #11161C;
  --color-text-secondary: #4A5763;
  --color-text-tertiary:  #6B7785;

  --color-brand-700:      #0F2A3F;
  --color-brand-500:      #2E6494;
  --color-brand-100:      #D6E3EE;
  --color-brand-50:       #EEF4F9;

  --color-tan-400:        #C9A878;
  --color-tan-100:        #ECDCC1;

  /* Trade colors (from existing mockups) */
  --color-trade-hvac:     #0EA5E9;
  --color-trade-plumbing: #C9A878;

  /* V2 bumped text scale per spec — every step +1 from current default.
   * Rationale: founder asked for bigger text in last 2-3 UI builds; bid tracker
   * establishes the new baseline. */
  --text-xs:    0.875rem;   /* 14px (was 12px) */
  --text-sm:    1rem;       /* 16px (was 14px) */
  --text-base:  1.0625rem;  /* 17px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */

  /* Confidence dots (per spec: green ≥ 0.85, yellow 0.60–0.85, red < 0.60, none for PM-edited) */
  --dot-green:  #16A34A;
  --dot-yellow: #CA8A04;
  --dot-red:    #DC2626;

  /* Bid-due countdown 5-state palette */
  --due-far:      #6B7280; /* >14d gray */
  --due-mid:      #1F2937; /* 7-14d neutral */
  --due-near:     #D97706; /* 2-7d amber */
  --due-imminent: #DC2626; /* <2d red */
  --due-overdue:  #7F1D1D; /* dark red OVERDUE */

  --due-far-bg:      #F3F4F6;
  --due-mid-bg:      #F3F4F6;
  --due-near-bg:     #FEF3C7;
  --due-imminent-bg: #FEE2E2;
  --due-overdue-bg:  #FEE2E2;

  /* Status chip palette */
  --status-review-bg:    #FEF3C7;
  --status-review-fg:    #92400E;
  --status-opp-bg:       #DBEAFE;
  --status-opp-fg:       #1E3A8A;
  --status-bidding-bg:   #DCFCE7;
  --status-bidding-fg:   #14532D;
  --status-submitted-bg: #E0E7FF;
  --status-submitted-fg: #312E81;
  --status-archived-bg:  #F3F4F6;
  --status-archived-fg:  #374151;
  --status-won-bg:       #D1FAE5;
  --status-won-fg:       #065F46;
  --status-lost-bg:      #FEE2E2;
  --status-lost-fg:      #7F1D1D;
  --status-declined-bg:  #F3F4F6;
  --status-declined-fg:  #4B5563;
  --status-dead-bg:      #F3F4F6;
  --status-dead-fg:      #9CA3AF;

  /* Schedule source / timeline event palette (used by detail panel) */
  --source-ai-milestones-bg:   #DBEAFE;
  --source-ai-milestones-fg:   #1E3A8A;
  --source-ai-duration-bg:     #FEF3C7;
  --source-ai-duration-fg:     #92400E;
  --source-pm-verified-bg:     #D1FAE5;
  --source-pm-verified-fg:     #065F46;

  --event-pm-edit-bg:          #DBEAFE;
  --event-pm-edit-fg:          #1E3A8A;
  --event-doc-uploaded-bg:     #E0E7FF;
  --event-doc-uploaded-fg:     #312E81;
  --event-addendum-added-bg:   #FEF3C7;
  --event-addendum-added-fg:   #92400E;
  --event-invite-received-bg:  #D1FAE5;
  --event-invite-received-fg:  #065F46;

  /* Validation failure reason badges (Review Inbox) */
  --vfr-bg:              #FEF3C7;
  --vfr-fg:              #92400E;
  --vfr-border:          #FBBF24;

  /* Trade pill backgrounds */
  --pill-hvac-bg:     #D9E9F5;
  --pill-hvac-fg:     #1A4B7A;
  --pill-plumb-bg:    #F3E8D3;
  --pill-plumb-fg:    #7A5A36;

  /* Shadows */
  --shadow-card:    0 1px 0 0 rgba(11,30,45,0.08), 0 2px 6px -1px rgba(11,30,45,0.10);
  --shadow-drawer:  -8px 0 24px -4px rgba(11,30,45,0.18);
  --shadow-pop:     0 8px 24px -4px rgba(11,30,45,0.18);
}

* { box-sizing: border-box; }

body {
  font-family: 'Lato', system-ui, sans-serif;
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  font-size: var(--text-sm); /* 16px default — V2 bump */
  line-height: 1.5;
}

/* ------------------------------------------------------------------
 * Reusable component classes (used across multiple mockup files)
 * ------------------------------------------------------------------ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

/* Confidence dot */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}
.dot-green  { background: var(--dot-green); }
.dot-yellow { background: var(--dot-yellow); }
.dot-red    { background: var(--dot-red); }
.dot-none   { width: 8px; height: 8px; display: inline-block; margin-right: 6px; } /* placeholder spacing for PM-edited */

/* Bid-due countdown chip */
.due-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.due-far      { background: var(--due-far-bg);      color: var(--due-far); }
.due-mid      { background: var(--due-mid-bg);      color: var(--due-mid); }
.due-near     { background: var(--due-near-bg);     color: var(--due-near); }
.due-imminent { background: var(--due-imminent-bg); color: var(--due-imminent); font-weight: 700; }
.due-overdue  { background: var(--due-overdue-bg);  color: var(--due-overdue); font-weight: 700; text-transform: uppercase; }

/* Status chip */
.status-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-review    { background: var(--status-review-bg);    color: var(--status-review-fg); }
.status-opp       { background: var(--status-opp-bg);       color: var(--status-opp-fg); }
.status-bidding   { background: var(--status-bidding-bg);   color: var(--status-bidding-fg); }
.status-submitted { background: var(--status-submitted-bg); color: var(--status-submitted-fg); }
.status-archived  { background: var(--status-archived-bg);  color: var(--status-archived-fg); }
.status-won       { background: var(--status-won-bg);       color: var(--status-won-fg); }
.status-lost      { background: var(--status-lost-bg);      color: var(--status-lost-fg); }
.status-declined  { background: var(--status-declined-bg);  color: var(--status-declined-fg); }
.status-dead      { background: var(--status-dead-bg);      color: var(--status-dead-fg); }

/* Trade pills */
.pill-hvac  { background: var(--pill-hvac-bg);  color: var(--pill-hvac-fg); }
.pill-plumb { background: var(--pill-plumb-bg); color: var(--pill-plumb-fg); }
.trade-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Multi-GC count badge */
.gc-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-brand-100);
  color: var(--color-brand-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Validation failure reason badge */
.vfr-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--vfr-bg);
  color: var(--vfr-fg);
  border: 1px solid var(--vfr-border);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Sidebar nav (used across desktop boards) */
.sidebar {
  width: 240px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  min-height: 100vh;
}
.sidebar-section {
  padding: 16px 16px 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}
.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-left: 3px solid transparent;
  cursor: pointer;
}
.sidebar-link:hover {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}
.sidebar-link.active {
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  border-left-color: var(--color-brand-500);
  font-weight: 600;
}
.sidebar-badge {
  background: var(--color-brand-500);
  color: #fff;
  font-size: var(--text-xs);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sidebar-link.active .sidebar-badge { background: var(--color-brand-700); }

/* Document checklist (Bidding Board) */
.doc-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.doc-check.present {
  background: #DCFCE7;
  color: #166534;
}
.doc-check.missing {
  background: #FEE2E2;
  color: #991B1B;
}
.doc-check.optional {
  background: var(--color-surface-raised);
  color: var(--color-text-tertiary);
}

/* Mobile bottom nav (used on every mobile mockup) */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px);
  z-index: 100;
}
.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  padding: 4px 12px;
}
.mobile-bottom-nav-item.active {
  color: var(--color-brand-500);
  font-weight: 700;
}
.mobile-bottom-nav-item .nav-badge {
  position: absolute;
  margin-left: 18px;
  margin-top: -4px;
  background: var(--color-brand-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Forced compact tabular for value columns */
.tabular { font-variant-numeric: tabular-nums; }

/* Eyebrow text */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-tertiary);
}

/* Top-level page header */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-meta {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Filter chip */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.filter-chip.active {
  background: var(--color-brand-500);
  color: #fff;
  border-color: var(--color-brand-500);
  font-weight: 600;
}
.filter-chip:hover:not(.active) {
  background: var(--color-surface-raised);
}

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--color-brand-500);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-brand-700); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  cursor: pointer;
}
.btn-secondary:hover { background: var(--color-surface-raised); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  border: none;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }

/* Chevron rotation for expand/collapse rows */
.chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--color-text-tertiary);
}
.chevron.expanded { transform: rotate(90deg); }

/* Table-like row container */
.row {
  display: grid;
  grid-template-columns: 24px 2.4fr 1.4fr 1.6fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.row:hover { background: var(--color-brand-50); }
.row.sub {
  background: var(--color-surface-raised);
  grid-template-columns: 48px 2.4fr 1.4fr 1.6fr 1fr;
  padding: 10px 20px;
  font-size: var(--text-sm);
}

/* Drawer (Detail Panel) */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,30,45,0.30);
  z-index: 50;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 45%;
  min-width: 540px;
  background: var(--color-surface);
  box-shadow: var(--shadow-drawer);
  z-index: 51;
  display: flex;
  flex-direction: column;
}

/* Tabs (used in detail panel) */
.tab-strip {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.tab {
  padding: 12px 16px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 500;
}
.tab:hover { color: var(--color-text-primary); }
.tab.active {
  color: var(--color-brand-500);
  border-bottom-color: var(--color-brand-500);
  font-weight: 700;
}
.tab .lock-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* Mobile-first viewport helper for mobile mockups */
.mobile-viewport {
  max-width: 375px;
  min-height: 812px;
  margin: 0 auto;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding-bottom: 80px; /* room for bottom nav */
  position: relative;
}

/* Mobile sticky top bar */
.mobile-topbar {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.mobile-topbar-title {
  font-size: var(--text-lg);
  font-weight: 700;
}

/* Bottom-sheet drawer (mobile review-inbox quick-resolve, manual upload) */
.bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--color-surface);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 24px -4px rgba(11,30,45,0.18);
  padding: 20px 16px calc(env(safe-area-inset-bottom) + 20px);
  max-height: 85vh;
  overflow-y: auto;
  z-index: 100;
}
.bottom-sheet-grip {
  width: 40px; height: 4px;
  background: var(--color-border-strong);
  border-radius: 2px;
  margin: 0 auto 16px;
}