/* ============================================================================
   cda.css — SINGLE CONSOLIDATED STYLESHEET
   Source: lettingreport_colors.css + app.css + lr.css (merged)
   Goal: one file, predictable order, fewer “mystery overrides”.

   RULE OF THUMB:
   - Tokens first (variables, fonts)
   - Base / resets next
   - App shell (header/nav/footer)
   - LR UI kit (sections/kpis/charts)
   - Tables (sticky + overflow model)
   - Utilities
   - Page-specific overrides/hacks (last)
============================================================================ */


/* ============================================================================
   00) BRAND TOKENS + ALIASES (single source of truth)
   - Keep ONE canonical: --lr-brand
   - Aliases so older code keeps working:
     --brand, --lr-maroon
============================================================================ */
:root{
  /* Canonical brand */
  --lr-brand: #8A2003;

  /* Aliases (compat) */
  --brand: var(--lr-brand);
  --lr-maroon: var(--lr-brand);

  /* Neutral palette */
  --lr-black: #111111;
  --lr-white: #ffffff;
  --lr-gray-light: #e0e0e0;

  /* LR UI kit palette/tokens (from lr.css) */
  --lr-charcoal: #222222;
  --lr-fg: #2b2b2b;
  --lr-muted: #6a6a6a;
  --lr-border: #e6e6e6;
  --lr-border-strong: #cfcfcf;
  --lr-bg: #ffffff;
  --lr-tint: #8A200314; /* maroon ~8% tint */
  --lr-kpi: #111111;

  /* App shell tokens (from app.css) */
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --border: #e5e5e5;
  --accent: #000000;

  /* Sticky offsets (page hacks can override these) */
  --appbar-h: 124px;
  --toolbar-h: 43px;
  --th-h: 32px;

  /* Optional: if you ever want table header to sit below sticky header */
  --lr-sticky-offset: 5px;
}


/* ============================================================================
   01) FONTS
============================================================================ */
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/branding/fonts/SourceSans3-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/branding/fonts/SourceSans3-SemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/branding/fonts/SourceSans3-Bold.ttf");
  font-weight: 700;
}


/* ============================================================================
   02) BASE / RESET
   Notes:
   - You had multiple competing html/body/body rules across the merged files.
   - This makes ONE predictable baseline.
============================================================================ */
* { box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--lr-bg);     /* uses LR bg token */
  color: var(--fg);             /* uses app shell fg */
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Keep tables aligned with the same font baseline */
table, th, td{
  font-family: inherit;
  color: inherit;
}


/* ============================================================================
   03) APP SHELL (header / nav / main container / footer)
   These classes are referenced in base.html.
============================================================================ */

/* Header + brand */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--brand);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.brand-title { font-weight: 700; }
.brand-sub { font-size: 12px; color: var(--muted); }

/* Navigation (canonical) */
.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nav-btn {
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--fg);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.nav-btn:hover { border-color: var(--border); }

/* Active state (your “maroon underline” style) */
.nav-btn.active {
  border-radius: 0;
  background: transparent;
  color: var(--lr-brand);
  border-color: transparent;
  border-bottom: 3px solid var(--lr-brand);
}

/* Legacy nav aliases (kept so old templates don’t break) */
.nav { display: flex; flex-wrap: wrap; gap: 8px; }
.nav a { text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 1px solid transparent; }
.nav-link { color: var(--fg); border-color: transparent; transition: border-color 0.2s ease; }
.nav-link:hover { border-color: var(--border); }
.nav-active { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* Main content container (base.html uses <main class="content ...">) */
.content {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 16px;
}

/* Headings (support both <h1> and a legacy ".h1" helper) */
h1,h2,h3{ color: var(--lr-charcoal); line-height: 1.25; margin: 0 0 10px; }
h1{ font-size: 22px; font-weight: 700; }
h2{ font-size: 18px; font-weight: 600; }
h3{ font-size: 16px; font-weight: 600; }

.h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
}

/* Footer */
.footer {
  border-top: 1px solid var(--brand);
  color: var(--muted);
  font-size: 12px;
  padding: 10px 16px;
  margin-top: 24px;
}


/* ============================================================================
   04) LR UI KIT (sections, badges, kpis, charts, basic utilities)
============================================================================ */
.lr-container{ max-width: 1100px; margin: 28px auto; padding: 0 16px; }

.lr-muted{ color: var(--lr-muted); }
.lr-small{ font-size: 12px; color: var(--lr-muted); }

.lr-hr{
  height: 1px;
  background: var(--lr-border);
  border: 0;
  margin: 16px 0;
}

/* Brand pinstripes */
.lr-pinstripe-top{ border-top: 1px solid var(--lr-brand); }
.lr-pinstripe-bottom{ border-bottom: 1px solid var(--lr-brand); }

/* Badges / chips */
.lr-badge{
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--lr-brand);
  border-radius: 999px;
  color: var(--lr-brand);
  font-size: 12px;
  background: var(--lr-bg);
}

/* KPI blocks */
.lr-kpi{ display: flex; flex-direction: column; gap: 4px; }
.lr-kpi .lr-kpi-value{
  font-size: 22px;
  font-weight: 700;
  color: var(--lr-kpi);
  font-variant-numeric: tabular-nums;
}
.lr-kpi .lr-kpi-caption{ font-size: 12px; color: var(--lr-muted); }

/* Cards/sections */
.lr-section{
  border: 1px solid var(--lr-border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  background: var(--lr-bg);
}
.lr-section--accent{
  border-color: var(--lr-brand);
  background: var(--lr-tint);
}

/* Chart containers */
.lr-chart{
  border: 1px solid var(--lr-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--lr-bg);
}
.lr-chart .lr-chart-title{
  font-size: 12px;
  color: var(--lr-muted);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--lr-border-strong);
  padding-bottom: 6px;
}
.chart-container { height: 360px; min-height: 280px; }

/* Utility spacing (LR kit) */
.lr-grid{ display: grid; gap: 14px; }
.lr-grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lr-grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lr-mt-0{ margin-top: 0; }
.lr-mt-8{ margin-top: 8px; }
.lr-mt-16{ margin-top: 16px; }
.lr-mb-0{ margin-bottom: 0; }
.lr-mb-8{ margin-bottom: 8px; }
.lr-mb-16{ margin-bottom: 16px; }

/* “Branding tokens” table helpers (kept as-is; only used if templates reference them) */
.lr-table-header {
  background-color: var(--lr-gray-light);
  font-weight: 600;
}
.lr-total-row {
  background-color: var(--lr-maroon);
  color: var(--lr-white);
  font-weight: 600;
}


/* ============================================================================
   05) TABLE SYSTEM (sticky header + sticky first column)
   This is the big one. Most of your “scroll & behave” efforts live here.
============================================================================ */
.table{
  border-collapse: separate;     /* sticky-friendly */
  border-spacing: 0;
  width: max-content;            /* allow horizontal overflow */
  min-width: 100%;
  table-layout: auto;
}

.table thead th{
  position: sticky;
  top: 0;
  background: var(--lr-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--lr-brand);
  vertical-align: bottom;
  z-index: 5;
}

.table tbody td{
  padding: 8px 10px;
  border-bottom: 1px solid var(--lr-border);
  vertical-align: top;
}

.table tbody tr:last-child td{ border-bottom: 0; }

/* Hover tint */
.table tbody tr:hover { background: #fce9e6; }

/* Numeric & brand cells */
.table .num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table .brand{ color: var(--lr-brand); font-weight: 700; }

/* Sticky first column */
.table th:first-child,
.table td:first-child{
  position: sticky;
  left: 0;
  background: var(--lr-bg);
  z-index: 6;
  box-shadow: 1px 0 0 var(--lr-border);
}

/* Keep first header cell branded above others */
.table thead th:first-child{
  background: var(--lr-brand);
  color: #fff;
  z-index: 7;
}

/* Paint cleanly under sticky */
.table th, .table td{ background-clip: padding-box; }

/* Density toggle */
.table--compact th, .table--compact td{ padding: 6px 8px; }

/* Column sizing helpers */
.col-bid-date   { min-width: 120px; white-space: nowrap; }
.col-project-no { min-width: 120px; white-space: nowrap; }
.col-project-id { min-width: 130px; white-space: nowrap; }
.col-county     { min-width: 120px; white-space: normal; word-break: break-word; }
.col-low-bidder { min-width: 220px; white-space: normal; word-break: break-word; }
.col-low-bid    { min-width: 120px; }
.col-percent    { min-width: 110px; }

/* Totals row */
.table tr.is-total td{
  border-top: 2px solid var(--lr-border-strong);
  font-weight: 600;
  background: #fffdfb;
}
.table tr.is-total td:first-child{ background: #fffdfb; }

/* Sortable headers (if you use them) */
.table th.sortable{ cursor: pointer; user-select: none; }
.table th .sort-indicator{ opacity: .5; margin-left: 6px; font-size: 10px; }
.table th.is-sorted .sort-indicator{ opacity: 1; }


/* ============================================================================
   06) SCROLL/OVERFLOW UTILITIES (non-Tailwind, kept)
============================================================================ */
.overflow-x-auto{ overflow-x: auto; }
.overflow-y-auto{ overflow-y: auto; }


/* ============================================================================
   07) CONTENT WIDTH MODES (used by base.html: content--wide/standard/narrow)
   IMPORTANT: these were broken before due to accidental nesting.
============================================================================ */
.content--standard {
  max-width: 80rem;          /* ~1280px */
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem;
}

.content--wide {
  max-width: none;           /* full-bleed */
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.25rem;     /* breathing room */
}

.content--narrow {
  max-width: 52rem;          /* ~832px */
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem;
}

/* Higher specificity overrides (kept from your original intent) */
main.content.content--standard {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem;
}
main.content.content--wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.25rem;
}
main.content.content--narrow {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem;
}


/* ============================================================================
   08) PRINT (kept minimal since you’re not relying on it)
============================================================================ */
@media print{
  .nav{ display: none; }
  a{ text-decoration: none; color: inherit; }
  .lr-section{ page-break-inside: avoid; }
}


/* ============================================================================
   09) PAGE-SPECIFIC OVERRIDES / HACKS
   - Keep these at the bottom so they don’t surprise you.
============================================================================ */

/* deleted, nothing follows */