/* ============================================================
   USAirdrop DIBBS — Design tokens
   Lifted from BoldTek MHTML: exact navy + pink-red palette,
   Poppins font stack, spacing scale, radii.
   ============================================================ */

:root {
  /* Navy primary (BoldTek brand) */
  --navy-50:  #f5f5f8;
  --navy-100: #ebecf2;
  --navy-200: #c0c5dc;
  --navy-300: #a1a9c3;
  --navy-400: #7682a7;
  --navy-500: #5c6996;
  --navy-600: #33447c;   /* primary */
  --navy-700: #2a3e71;
  --navy-800: #1c2544;
  --navy-900: #151d34;

  /* Accent pink/red (deadline badges, unread indicators, "Add Vendor") */
  --accent-50:  #fcecef;
  --accent-100: #f5c5cc;
  --accent-200: #f0a9b3;
  --accent-300: #e89190;
  --accent-400: #e5697b;
  --accent-500: #de435a;   /* primary accent */
  --accent-600: #ca3d52;
  --accent-700: #b20e3a;

  /* Semantic */
  --success: #0eb263;
  --warning: #f59e0b;
  --danger:  #de435a;
  --info:    #33447c;

  /* Neutrals */
  --white: #ffffff;
  --gray-50:  #f8f9fa;
  --gray-100: #f1f2f5;
  --gray-200: #e2e8f0;
  --gray-300: #d1d5db;
  --gray-400: #a3a3a3;
  --gray-500: #616161;
  --gray-700: #374151;
  --gray-900: #111827;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(28, 37, 68, 0.05);
  --shadow:    0 1px 3px 0 rgba(28, 37, 68, 0.08), 0 1px 2px -1px rgba(28, 37, 68, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(28, 37, 68, 0.08), 0 2px 4px -2px rgba(28, 37, 68, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(28, 37, 68, 0.08), 0 4px 6px -4px rgba(28, 37, 68, 0.05);

  /* Typography */
  --font-sans: 'Poppins', 'General Sans', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --topnav-h: 64px;
  --list-pane-w: 380px;
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy-900);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--navy-600);
  text-decoration: none;
}
a:hover { color: var(--navy-700); }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================================
   Top nav
   ============================================================ */
.topnav {
  display: flex;
  align-items: center;
  height: var(--topnav-h);
  padding: 0 var(--space-6);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topnav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: var(--space-8);
  font-weight: 600;
  color: var(--navy-800);
  font-size: 16px;
}

.topnav__brand-mark {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
}
.topnav__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.topnav__tabs {
  display: flex;
  gap: var(--space-1);
  flex: 1;
}

.topnav__tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  color: var(--gray-500);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.15s;
  position: relative;
}
.topnav__tab:hover { color: var(--navy-700); background: var(--navy-50); }
.topnav__tab--active {
  color: var(--navy-800);
  font-weight: 600;
}
.topnav__tab--active::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: var(--space-4);
  right: var(--space-4);
  height: 3px;
  background: var(--navy-600);
  border-radius: 2px 2px 0 0;
}

.topnav__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topnav__icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--gray-500);
}
.topnav__icon-btn:hover { background: var(--gray-100); color: var(--navy-700); }

/* ============================================================
   Layout shells
   ============================================================ */
.app-shell { min-height: calc(100vh - var(--topnav-h)); }

.split {
  display: grid;
  grid-template-columns: var(--list-pane-w) 1fr;
  min-height: calc(100vh - var(--topnav-h));
}

.list-pane {
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topnav-h));
  overflow: hidden;
}

.detail-pane {
  background: var(--gray-50);
  height: calc(100vh - var(--topnav-h));
  overflow-y: auto;
}

/* ============================================================
   List pane header + search
   ============================================================ */
.list-header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
  position: sticky;
  top: 0;
}

.search-box {
  position: relative;
  display: block;
  width: 100%;
}
.search-box input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) 36px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 13px;
  /* Background colour + inline-SVG magnifying glass, positioned 12px from
     the left edge of the input itself (not the wrapper). This is more
     reliable than a ::before pseudo-element when the wrapper has other
     children that stretch its height. */
  background-color: var(--gray-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px 14px;
  color: var(--navy-900);
  transition: all 0.15s;
}
.search-box input:focus {
  outline: none;
  border-color: var(--navy-400);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(51, 68, 124, 0.1);
}
/* Old ::before pseudo-element approach removed — icon now lives on the
   input as background-image so it's locked to the input's bounding box
   instead of the (sometimes-taller) .search-box wrapper. */

.list-toolbar {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--gray-500);
}

/* ============================================================
   Solicitation list cards
   ============================================================ */
.solicitation-list {
  overflow-y: auto;
  flex: 1;
}

.solicitation-card {
  display: block;
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.solicitation-card:hover { background: var(--gray-50); }
.solicitation-card--active {
  background: var(--accent-50);
  border-left: 3px solid var(--accent-500);
  padding-left: calc(var(--space-4) - 3px);
}
.solicitation-card--active:hover { background: var(--accent-50); }

.solicitation-card__deadline {
  display: inline-block;
  background: var(--accent-500);
  color: var(--white);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.solicitation-card__deadline--soon { background: var(--accent-700); }
.solicitation-card__deadline--later { background: var(--navy-500); }

.solicitation-card__value-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.solicitation-card__value-label {
  font-size: 11px;
  color: var(--gray-500);
}

.solicitation-card__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
}

.solicitation-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-900);
  margin: var(--space-2) 0 var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.solicitation-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray-500);
}

.solicitation-card__badge-unread {
  display: inline-block;
  background: var(--accent-500);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   Detail pane content
   ============================================================ */
.detail-content { padding: var(--space-6); }

.detail-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.tab-group {
  display: flex;
  gap: var(--space-1);
  background: var(--white);
  padding: var(--space-1);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

.tab-group__tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: all 0.15s;
}
.tab-group__tab:hover { color: var(--navy-700); }
.tab-group__tab--active {
  background: var(--navy-600);
  color: var(--white);
}
.tab-group__tab--active:hover { color: var(--white); }
.tab-group__tab { cursor: pointer; }

/* Tab content panes (toggled by inline tab-switching JS in base.html) */
.tab-content { display: none; }
.tab-content--active { display: block; }

/* Dashboard / KPI tiles (reused on Financials etc.) */
.dash-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.dash-tile {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.dash-tile--link:hover {
  border-color: var(--navy-600);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dash-tile--accent { border-left: 4px solid var(--navy-600); }
.dash-tile__label {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.dash-tile__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.1;
}
.dash-tile__hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* Rejected supplier quotes — compact one-row entries inside a collapsible
   <details> below the active vendor stack. */
.rejected-quote-list {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--gray-50, #f7f7f8);
  margin-top: 8px;
  overflow: hidden;
}
.rejected-quote-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) 140px 60px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--gray-200);
  font-size: 13px;
}
.rejected-quote-row:first-child { border-top: 0; }
.rejected-quote-row__supplier { font-weight: 500; color: var(--gray-700, #4a4a4a); }
.rejected-quote-row__price    { color: var(--gray-700, #4a4a4a); }
.rejected-quote-row__meta     { text-align: right; }

/* Per-quote Approve form sits inline in the vendor-card actions row. */
.vendor-card__bid-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bid-input--inline {
  display: inline-flex;
  align-items: center;
  height: 32px;
}
.bid-input--inline input {
  width: 88px;
}

.spacer { flex: 1; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--navy-600);
  color: var(--white);
}
.btn--primary:hover { background: var(--navy-700); }

.btn--secondary {
  background: var(--white);
  color: var(--navy-700);
  border-color: var(--gray-200);
}
.btn--secondary:hover { background: var(--gray-50); border-color: var(--navy-300); }

.btn--accent {
  background: var(--accent-500);
  color: var(--white);
}
.btn--accent:hover { background: var(--accent-600); }

.btn--accent-outline {
  background: var(--white);
  color: var(--accent-700);
  border-color: var(--accent-200);
}
.btn--accent-outline:hover { background: var(--accent-50); }

.btn--ghost {
  background: transparent;
  color: var(--gray-500);
}
.btn--ghost:hover { background: var(--gray-100); color: var(--navy-700); }

.btn--sm { padding: var(--space-1) var(--space-3); font-size: 12px; }

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
}
.icon-btn:hover { background: var(--gray-50); color: var(--navy-700); }

.icon-btn--bookmark { color: var(--accent-500); border-color: var(--accent-100); }
.icon-btn--bookmark:hover { background: var(--accent-50); }

/* "Bidding Price" pill input (matches BoldTek) */
.bid-input {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius);
  padding: 0 var(--space-3);
  height: 36px;
}
.bid-input__icon {
  width: 24px;
  height: 24px;
  background: var(--accent-50);
  color: var(--accent-700);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-right: var(--space-2);
  font-weight: 600;
}
.bid-input input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  width: 100px;
  color: var(--navy-800);
}
.bid-input input::placeholder { color: var(--accent-400); }

/* ============================================================
   Solicitation header card (top of detail pane)
   ============================================================ */
.sol-header {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

/* Round 12.x — FREEZE the tab bar + solicitation header together so they stay
   on-screen while scrolling the supplier quotes. Sticks to the top of the
   scrolling .detail-pane; opaque bg + a soft bottom shadow so quotes don't
   show through. TO REVERT THE FREEZE: delete this .detail-frozen rule. */
.detail-frozen {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--gray-50);
  box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.3);
}

/* Round 12.x — COMPACT the frozen header so it doesn't eat the screen (tighter
   padding, gaps, dividers, and smaller field values). TO REVERT TO THE
   FULL-SIZE HEADER: delete this whole block (the freeze above stays). */
.detail-frozen .sol-header     { padding: var(--space-4); margin-bottom: var(--space-3); }
.detail-frozen .sol-meta-grid  { gap: var(--space-3); }
.detail-frozen .sol-meta-divider { margin: var(--space-2) 0; }
.detail-frozen .sol-meta__label  { font-size: 10px; margin-bottom: 0; }
.detail-frozen .sol-meta__value  { font-size: 13px; }
.detail-frozen .sol-meta__value--large     { font-size: 15px; }
.detail-frozen .sol-meta__value--big-money { font-size: 16px; }
.detail-frozen .sol-meta__value--mono      { font-size: 12px; }
.detail-frozen .fat-banner--slim,
.detail-frozen .aidc-banner { padding-top: 6px; padding-bottom: 6px; margin-bottom: 8px; }
.detail-frozen .detail-toolbar { margin-bottom: var(--space-3); }

.sol-meta-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1280px) {
  .sol-meta-grid { grid-template-columns: repeat(3, 1fr); }
}

.sol-meta__label {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.sol-meta__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-900);
}

.sol-meta__value--large {
  font-size: 18px;
  color: var(--navy-700);
}

.sol-meta__value--mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

.sol-meta__value--big-money {
  font-size: 20px;
  color: var(--navy-700);
  font-weight: 700;
}

.sol-meta-row {
  display: flex;
  flex-direction: column;
}

.sol-meta-row + .sol-meta-row { margin-top: 0; }

.sol-meta-divider {
  border: none;
  border-top: 1px solid var(--gray-100);
  margin: var(--space-5) 0;
}

/* Latest contract sub-card */
.latest-contract {
  background: var(--navy-50);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  position: relative;
}

.latest-contract__label {
  display: inline-block;
  background: var(--navy-600);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.latest-contract__total {
  color: var(--navy-700);
  font-weight: 700;
}

/* ============================================================
   Vendor cards (each supplier quote)
   ============================================================ */
.vendor-stack { display: flex; flex-direction: column; gap: var(--space-4); }

.vendor-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vendor-card:hover {
  border-color: var(--navy-300);
  box-shadow: var(--shadow-md);
}

.vendor-card--needs-followup {
  border-left: 4px solid var(--warning);
}
.vendor-card--bid {
  border-left: 4px solid var(--success);
}

.vendor-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
}

.vendor-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-900);
  margin: 0 0 var(--space-1);
}

.vendor-card__contact {
  font-size: 12px;
  color: var(--gray-500);
}

.vendor-card__contact a { color: var(--navy-600); }

.vendor-card__price {
  text-align: right;
}

.vendor-card__price-unit {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-800);
  font-family: var(--font-mono);
}

.vendor-card__price-ext {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.vendor-card__body {
  padding: 0 var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--gray-100);
  padding-top: var(--space-4);
}

.vendor-field__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 500;
  margin-bottom: 2px;
}

.vendor-field__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-800);
}

.vendor-field__value--mono { font-family: var(--font-mono); font-size: 12px; }

/* Condition chip — color-coded */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chip--fn { background: #dbeafe; color: #1e40af; }
.chip--ne { background: #dcfce7; color: #166534; }
.chip--ns { background: #fef3c7; color: #92400e; }
.chip--oh { background: #ede9fe; color: #6b21a8; }
.chip--sv { background: #cffafe; color: #155e75; }
.chip--ar { background: #fee2e2; color: #991b1b; }
.chip--unknown { background: var(--gray-100); color: var(--gray-500); }

/* Paperwork status row */
.vendor-card__paperwork {
  background: var(--gray-50);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--gray-100);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.paperwork-req {
  font-size: 12px;
  color: var(--gray-500);
}
.paperwork-req strong { color: var(--navy-800); }

.paperwork-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.paperwork-flag--ok { background: #dcfce7; color: #166534; }
.paperwork-flag--missing { background: #fee2e2; color: #991b1b; }
.paperwork-flag--unknown { background: var(--gray-100); color: var(--gray-500); }
/* Round 10: EASA Form 1 chip — blue, distinct from the green FAA-8130
   paperwork-ok so the operator can tell the two airworthiness standards
   apart at a glance. */
.paperwork-flag--easa { background: #dbeafe; color: #1e40af; }

/* Vendor card actions */
.vendor-card__actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--gray-100);
  background: var(--white);
  align-items: center;
}

.match-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.match-indicator--exact { background: #dcfce7; color: #166534; }
.match-indicator--partial { background: #fef3c7; color: #92400e; }
.match-indicator--mismatch { background: #fee2e2; color: #991b1b; }

/* ============================================================
   Empty states
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  color: var(--gray-500);
  text-align: center;
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  background: var(--accent-50);
  color: var(--accent-500);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  font-size: 24px;
}
.empty-state__title {
  font-weight: 600;
  color: var(--navy-700);
  font-size: 16px;
  margin-bottom: var(--space-2);
}
.empty-state__hint { font-size: 13px; color: var(--gray-500); max-width: 360px; }

/* ============================================================
   Mock data callout
   ============================================================ */
.mock-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--warning);
  color: white;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Tables (for Historical / Bid tracking)
   ============================================================ */
.data-table {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--navy-800);
  border-bottom: 1px solid var(--gray-100);
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--gray-50); }

.data-table__amount {
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
}

/* Outcome chips for bid tracking */
.outcome-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.outcome-chip--won { background: #dcfce7; color: #166534; }
.outcome-chip--won_cancelled { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
.outcome-chip--lost { background: #fee2e2; color: #991b1b; }
.outcome-chip--pending { background: #fef3c7; color: #92400e; }
.outcome-chip--cancelled { background: #e5e7eb; color: #4b5563; }
.outcome-chip--removed { background: #e5e7eb; color: #4b5563; text-decoration: line-through; }
.outcome-chip--unknown { background: #ede9fe; color: #5b21b6; }

/* Business-type chips (SDVOSB, WOSB, 8(a), HUBZone, etc.) — shown on
   company cards in the Contacts screen, pulled from SAM.gov */
.biz-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
/* Small business — bright signal, set-aside eligible */
.biz-chip--sb {
  background: #1e40af;
  color: white;
  border-color: #1e3a8a;
}
/* Large business — neutral indicator */
.biz-chip--lb {
  background: #e5e7eb;
  color: #4b5563;
  border-color: #d1d5db;
}

/* Filter chip row above the bids table */
.filter-chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  align-items: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy-700);
  background: var(--gray-100);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.1s ease, border 0.1s ease;
}
.filter-chip:hover { background: var(--gray-200); }
.filter-chip--active {
  background: var(--navy-700);
  color: white;
  border-color: var(--navy-700);
}
.filter-chip--active:hover { background: var(--navy-700); }
.filter-chip__count {
  font-weight: 600;
  margin-left: 4px;
  opacity: 0.85;
}

/* Delta cell: dual-line $ + % */
.delta-cell {
  font-family: var(--font-mono);
  text-align: right;
  line-height: 1.25;
  font-size: 12px;
}
.delta-cell__dollars { font-weight: 600; }
.delta-cell__pct { font-size: 11px; opacity: 0.85; }
.delta-cell--over { color: #991b1b; }   /* we bid higher than the winner */
.delta-cell--under { color: #166534; }  /* we bid lower than the winner */
.delta-cell--neutral { color: var(--gray-500); }

/* Round 8: Gross profit cell on My Bids — our quote − supplier total.
   Positive = green (made money); negative = red (under water). */
.gross-profit-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gross-profit-cell__dollars { font-weight: 600; }
.gross-profit-cell__pct { font-size: 11px; opacity: 0.85; }
.gross-profit-cell--positive { color: #166534; }
.gross-profit-cell--negative { color: #991b1b; }
.gross-profit-cell--neutral  { color: var(--gray-500); }

/* ============================================================
   Utilities
   ============================================================ */
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--gray-500); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.flex { display: flex; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.scroll-y { overflow-y: auto; }

/* HTMX loading indicator */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* ============================================================
   Vendor card attachments section (Round 4 Session 7)
   ============================================================ */
.vendor-card__attachments {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  padding: var(--space-4) var(--space-5);
}

.vendor-card__attachments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.vendor-card__attachments-header strong {
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.vendor-card__upload-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.vendor-card__upload-type {
  height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 12px;
  color: var(--navy-800);
  font-family: var(--font-sans);
}

.vendor-card__upload-btn {
  cursor: pointer;
  margin-bottom: 0;
}

[class^="vendor-card__upload-spinner-"] {
  font-size: 11px;
  color: var(--accent-600);
  font-weight: 500;
}

.vendor-card__attachments-empty {
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
  padding: var(--space-3);
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-200);
}

.vendor-card__attachments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.attachment-flash-error {
  font-size: 12px;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

/* ============================================================
   Attachment card
   ============================================================ */
.attachment-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  padding: var(--space-3);
  font-size: 12px;
}

.attachment-card--form_8130 { border-left: 3px solid var(--info); }
.attachment-card--surplus_label { border-left: 3px solid var(--accent-500); }
.attachment-card--part_photo { border-left: 3px solid var(--success); }
.attachment-card--trace_other { border-left: 3px solid var(--gray-400); }

.attachment-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.attachment-card__type {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--navy-800);
}

.attachment-type-icon {
  font-size: 14px;
}

/* Round 8: reclassification dropdown in attachment card header.
   Small, inline, looks like a clickable label until you hover. */
.attachment-card__type-select {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 22px 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%234a4a4a' d='M1 3l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.attachment-card__type-select:hover {
  border-color: var(--gray-300);
  background-color: var(--gray-50);
}
.attachment-card__type-select:focus {
  outline: 2px solid var(--navy-500, #3a6ea5);
  outline-offset: 1px;
}

.attachment-card__filename {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--navy-600);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px dashed var(--gray-300);
}
.attachment-card__filename:hover {
  color: var(--navy-700);
  border-bottom-color: var(--navy-500);
}

.attachment-card__delete {
  background: transparent;
  border: none;
  color: var(--gray-400);
  font-size: 14px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.attachment-card__delete:hover {
  background: #fee2e2;
  color: #991b1b;
}

.attachment-card__status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 11px;
  margin: var(--space-2) 0;
}
.attachment-card__status--pending {
  background: #fef3c7;
  color: #92400e;
}
.attachment-card__status--error {
  background: #fee2e2;
  color: #991b1b;
}
.attachment-card__status--warn {
  background: #fef3c7;
  color: #92400e;
}
/* Round 10: neutral "attached, no extraction" badge for trace_other and
   other non-extractable types — visually quiet so it doesn't read like a
   pending/working state. */
.attachment-card__status--attached {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* Verification chips */
.attachment-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

.vchip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: help;
}
.vchip--ok      { background: #dcfce7; color: #166534; }
.vchip--warn    { background: #fef3c7; color: #92400e; }
.vchip--err     { background: #fee2e2; color: #991b1b; }
.vchip--neutral { background: var(--gray-100); color: var(--gray-500); }

/* Extracted field grid */
.attachment-card__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.attachment-field {
  display: flex;
  flex-direction: column;
}

.attachment-field__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 2px;
}

.attachment-field__input {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-800);
  width: 100%;
  resize: vertical;
}
.attachment-field__input:focus {
  outline: none;
  border-color: var(--navy-400);
  box-shadow: 0 0 0 2px rgba(51, 68, 124, 0.1);
}
.attachment-field__input--edited {
  border-color: var(--accent-300);
  background: var(--accent-50);
}

/* ============================================================
   Attachment body: flex layout with thumbnail on right
   ============================================================ */
.attachment-card__body {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-2);
}

.attachment-card__fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: 0;     /* override the earlier margin-top */
  min-width: 0;      /* allows the form to shrink below grid intrinsic size */
}

.attachment-card__thumb {
  flex: 0 0 140px;
  display: flex;
  align-items: stretch;
}

.attachment-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
}
.attachment-thumb-btn:hover {
  border-color: var(--navy-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.attachment-thumb-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  background: var(--gray-50);
}

.attachment-thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  min-height: 120px;
  background: var(--gray-50);
}

.attachment-thumb-placeholder__icon {
  font-size: 32px;
  margin-bottom: var(--space-1);
}

.attachment-thumb-placeholder__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.attachment-thumb-placeholder__hint {
  font-size: 10px;
  color: var(--gray-500);
  margin-top: 2px;
}

.attachment-thumb-btn--pdf .attachment-thumb-placeholder {
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
}
.attachment-thumb-btn--pdf .attachment-thumb-placeholder__icon {
  color: #d97706;
}

/* ============================================================
   Lightbox (uses native <dialog>)
   ============================================================ */
.attachment-lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
}

.attachment-lightbox::backdrop {
  background: rgba(21, 29, 52, 0.85);
  backdrop-filter: blur(4px);
}

.attachment-lightbox__inner {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 95vw;
  max-height: 95vh;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.attachment-lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy-800);
  font-size: 16px;
  font-weight: 600;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  border: 1px solid var(--gray-200);
}
.attachment-lightbox__close:hover {
  background: var(--white);
  color: var(--accent-700);
  border-color: var(--accent-200);
}

.attachment-lightbox__img {
  display: block;
  max-width: 95vw;
  max-height: calc(95vh - 50px);
  object-fit: contain;
  background: var(--gray-50);
}

.attachment-lightbox__caption {
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  color: var(--navy-700);
  font-family: var(--font-mono);
  border-top: 1px solid var(--gray-100);
  background: var(--white);
}

/* On narrow screens, stack fields above thumbnail */
@media (max-width: 900px) {
  .attachment-card__body {
    flex-direction: column;
  }
  .attachment-card__thumb {
    flex: 0 0 auto;
    width: 100%;
  }
  .attachment-thumb-img {
    max-height: 240px;
    object-fit: contain;
  }
}

/* Auto-attach source badge (Round 4 Session 7b) */
.attachment-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--space-2);
  background: var(--accent-50);
  color: var(--accent-700);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-100);
}

/* Round 7: DLA-preferred-supplier highlight on Approved Manufacturers tab.
   Row matched against the daily as*.txt preferred-supplier file. */
tr.preferred-supplier-row {
  background: #e6f5e7;
}
tr.preferred-supplier-row td {
  border-top: 1px solid #b8dfbb;
  border-bottom: 1px solid #b8dfbb;
}
tr.preferred-supplier-row:hover {
  background: #d3edd6;
}
.preferred-supplier-badge {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  background: #2e8540;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.preferred-supplier-chip {
  display: inline-block;
  padding: 1px 6px;
  background: #e6f5e7;
  color: #1f5e2a;
  border: 1px solid #b8dfbb;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Round 7: editable supplier-quote price field. Uses a <details> element
   so we get native open/close without any JS, then strips the default
   triangle marker for a clean look. */
.vendor-card__price-edit {
  display: inline-block;
}
.vendor-card__price-edit-summary {
  list-style: none;          /* hide default ▶ marker (Firefox + Webkit) */
  cursor: pointer;
}
.vendor-card__price-edit-summary::-webkit-details-marker {
  display: none;             /* hide default ▶ marker (Safari/older Chrome) */
}
.vendor-card__price-edit-pencil {
  display: inline-block;
  font-size: 11px;
  color: var(--gray-500, #6a6a6a);
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.1s;
}
.vendor-card__price-edit-summary:hover .vendor-card__price-edit-pencil,
.vendor-card__price-edit[open] .vendor-card__price-edit-pencil {
  opacity: 0.7;
}
.vendor-card__price-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: var(--gray-50, #f7f7f8);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
}
.vendor-card__price-edit-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-700, #4a4a4a);
}
.vendor-card__price-edit-currency {
  color: var(--gray-500);
  font-weight: 600;
}
.vendor-card__price-edit-form input[type="number"] {
  width: 90px;
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 3px;
}

/* Editable Quoted Qty cell — same details/summary pattern as price. */
.vendor-card__qty-edit {
  display: inline-block;
}
.vendor-card__qty-edit-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vendor-card__qty-edit-summary::-webkit-details-marker {
  display: none;
}
.vendor-card__qty-edit-pencil {
  font-size: 11px;
  color: var(--gray-500, #6a6a6a);
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.1s;
}
.vendor-card__qty-edit-summary:hover .vendor-card__qty-edit-pencil,
.vendor-card__qty-edit[open] .vendor-card__qty-edit-pencil {
  opacity: 0.7;
}
.vendor-card__qty-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: var(--gray-50, #f7f7f8);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
}
.vendor-card__qty-edit-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-700, #4a4a4a);
}
.vendor-card__qty-edit-form input[type="number"] {
  width: 70px;
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 3px;
}

/* Editable Est UPS Shipping cell — same details/summary pattern. */
.vendor-card__ship-edit {
  display: inline-block;
}
.vendor-card__ship-edit-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vendor-card__ship-edit-summary::-webkit-details-marker {
  display: none;
}
.vendor-card__ship-edit-pencil {
  font-size: 11px;
  color: var(--gray-500, #6a6a6a);
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.1s;
}
.vendor-card__ship-edit-summary:hover .vendor-card__ship-edit-pencil,
.vendor-card__ship-edit[open] .vendor-card__ship-edit-pencil {
  opacity: 0.7;
}
.vendor-card__ship-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: var(--gray-50, #f7f7f8);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
}
.vendor-card__ship-edit-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-700, #4a4a4a);
}
.vendor-card__ship-edit-form input[type="number"] {
  width: 90px;
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 3px;
}

/* Round 8: inline-editable Manufacturer + Condition on the vendor card.
   Same details/summary pattern as Qty / Shipping / Price. */
.vendor-card__mfg-edit,
.vendor-card__cond-edit {
  display: inline-block;
}
.vendor-card__mfg-edit-summary,
.vendor-card__cond-edit-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vendor-card__mfg-edit-summary::-webkit-details-marker,
.vendor-card__cond-edit-summary::-webkit-details-marker {
  display: none;
}
.vendor-card__mfg-edit-pencil,
.vendor-card__cond-edit-pencil {
  font-size: 11px;
  color: var(--gray-500, #6a6a6a);
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.1s;
}
.vendor-card__mfg-edit-summary:hover .vendor-card__mfg-edit-pencil,
.vendor-card__mfg-edit[open] .vendor-card__mfg-edit-pencil,
.vendor-card__cond-edit-summary:hover .vendor-card__cond-edit-pencil,
.vendor-card__cond-edit[open] .vendor-card__cond-edit-pencil {
  opacity: 0.7;
}
.vendor-card__mfg-edit-form,
.vendor-card__cond-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: var(--gray-50, #f7f7f8);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
}
.vendor-card__mfg-edit-label,
.vendor-card__cond-edit-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-700, #4a4a4a);
}
.vendor-card__mfg-edit-form input[type="text"] {
  width: 220px;
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 3px;
}
.vendor-card__cond-edit-form select {
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 3px;
  background: white;
}

/* Round 8: sortable column headers on the My Bids table. Click toggles
   asc/desc; active column shows a small triangle. */
.sortable-th {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sortable-th:hover {
  text-decoration: underline;
}
.sortable-th--active {
  font-weight: 700;
  color: var(--navy-800, #1a3553);
}
.sortable-th__arrow {
  font-size: 9px;
  color: var(--navy-600, #2d5588);
}

/* Round 8: inline delivery-date editor on My Bids rows. Same details/
   summary pattern as the vendor-card edits. */
.bids-delivery-edit {
  display: inline-block;
}
.bids-delivery-edit__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bids-delivery-edit__summary::-webkit-details-marker { display: none; }
.bids-delivery-edit__pencil {
  font-size: 10px;
  color: var(--gray-500, #6a6a6a);
  opacity: 0;
  transition: opacity 0.1s;
}
.bids-delivery-edit__summary:hover .bids-delivery-edit__pencil,
.bids-delivery-edit[open] .bids-delivery-edit__pencil {
  opacity: 0.7;
}
.bids-delivery-edit__form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: var(--gray-50, #f7f7f8);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
}
.bids-delivery-edit__form input[type="date"] {
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 3px;
}

/* Round 8: clickable rows + edit modal on My Bids. */
.bid-row { cursor: pointer; }
.bid-row:hover { background: var(--gray-50, #f7f7f8); }

/* Stop dates, money, and award/sol identifiers from line-wrapping on
   the My Bids table now that there are 12 columns. Item column keeps
   wrapping so long nomenclatures don't blow out the layout. */
.data-table th,
.data-table td.text-xs,
.data-table td.text-mono,
.data-table td.data-table__amount {
  white-space: nowrap;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding-top: 50px;
  overflow-y: auto;
}
.modal-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  max-width: 720px;
  width: 92%;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}
.modal-content--wide { max-width: 880px; }
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--gray-500);
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--gray-100); color: var(--gray-700); }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-50);
  border-radius: 0 0 8px 8px;
  flex-shrink: 0;
}
.spacer-left { margin-left: auto; }

.bid-edit-modal__form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bid-edit-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
}
.bid-edit-modal__fieldset {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
  background: white;
}
.bid-edit-modal__fieldset--full {
  grid-column: 1 / -1;
}
.bid-edit-modal__fieldset legend {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--navy-700, #2a3f5a);
  padding: 0 6px;
}
.bid-edit-modal__field-label {
  display: block;
  font-size: 11px;
  color: var(--gray-600, #5a5a5a);
  margin: 10px 0 2px;
}
.bid-edit-modal__fieldset input[type="text"],
.bid-edit-modal__fieldset input[type="number"],
.bid-edit-modal__fieldset input[type="date"],
.bid-edit-modal__fieldset select {
  width: 100%;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--gray-300, #ccc);
  border-radius: 4px;
  box-sizing: border-box;
}

/* "View source email" link in vendor card header. */
.vendor-card__view-email {
  margin-left: 8px;
  font-size: 12px;
  color: var(--navy-600, #2d5588);
  text-decoration: none;
  white-space: nowrap;
}
.vendor-card__view-email:hover { text-decoration: underline; }

/* Email-view modal — shows the source email a quote was ingested from. */
.email-view__headers {
  padding: 12px 20px;
  background: var(--gray-50, #f7f7f8);
  border-bottom: 1px solid var(--gray-200);
  font-size: 12px;
  line-height: 1.7;
  flex-shrink: 0;
}
.email-view__body {
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
}
.email-view__pre {
  margin: 0;
  padding: 16px 20px;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--navy-900, #1a2a3a);
  background: white;
}

/* Read-only summary block at the top of the modal */
.bid-edit-modal__readonly {
  background: var(--gray-50, #f7f7f8);
  border-style: dashed;
}
.bid-edit-modal__readonly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
.bid-edit-modal__ro-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray-500, #6a6a6a);
  letter-spacing: 0.3px;
}
.bid-edit-modal__ro-value {
  font-size: 13px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Round 7: UPS tracking-status chips on the Financials screen.
   Coloured by the UPS canonical status code (D / I / O / X). */
.tracking-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--gray-100, #ebecf2);
  color: var(--gray-700, #4a4a4a);
  border: 1px solid var(--gray-200);
}
.tracking-chip--delivered {
  background: #e6f5e7;
  color: #1f5e2a;
  border-color: #b8dfbb;
}
.tracking-chip--in-transit {
  background: #fff8e1;
  color: #5b3a00;
  border-color: #f2dba0;
}
.tracking-chip--out {
  background: #e3f2fd;
  color: #0d3a73;
  border-color: #aacceb;
}
.tracking-chip--exception {
  background: #fef2f2;
  color: #7a1a17;
  border-color: #f5c5cc;
}

/* Round 7: DIBBS RFQ status chip on solicitation list cards. */
.dibbs-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--gray-100, #ebecf2);
  color: var(--gray-700, #4a4a4a);
  border: 1px solid var(--gray-200);
}
.dibbs-chip--open       { background: #e6f5e7; color: #1f5e2a; border-color: #b8dfbb; }
.dibbs-chip--awarded    { background: #e3f2fd; color: #0d3a73; border-color: #aacceb; }
.dibbs-chip--closed     { background: #fff8e1; color: #5b3a00; border-color: #f2dba0; }
.dibbs-chip--cancelled  { background: #fef2f2; color: #7a1a17; border-color: #f5c5cc; }
.dibbs-chip--removed    { background: #f3e5f5; color: #4a148c; border-color: #ce93d8; }
.dibbs-chip--not_found  { background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); }
.dibbs-chip--unknown    { background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); }

/* AIDC — DLA Automated Delivery Contract indicator. Hard-to-win flag.
   Card chip (top right, next to deadline pill) + bigger banner inside
   the sol detail header card. */
.aidc-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  vertical-align: middle;
}
.aidc-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid #ea580c;
  border-radius: 6px;
  font-size: 13px;
  color: #7c2d12;
}
.aidc-banner__icon {
  font-size: 18px;
  color: #ea580c;
  line-height: 1;
}

/* FAT — First Article Test required. Lab-blue palette to distinguish
   from AIDC's amber. Same structural rules as the AIDC chip/banner. */
.fat-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  vertical-align: middle;
}
.fat-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-left: 4px solid #4f46e5;
  border-radius: 6px;
  font-size: 13px;
  color: #312e81;
}
.fat-banner__icon {
  font-size: 18px;
  line-height: 1;
}
/* Slim variant — single line, no icon, no description. Used on the
   sol detail header where the verbose explainer is overkill. */
.fat-banner--slim {
  padding: 6px 12px;
  font-size: 13px;
  display: block;
}

/* ── DIBBS refresh progress panel ─────────────────────────────────
   Shown above the sol list during a Refresh DIBBS Status run.
   Self-polls every 2s via HTMX. Triggers page reload when done. */
.dibbs-refresh-panel {
  margin: 8px 12px;
  padding: 10px 12px;
  border: 1px solid #aacceb;
  border-radius: 6px;
  background: #f0f7ff;
  font-size: 12px;
}
.dibbs-refresh-panel--idle {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-500);
}
.dibbs-refresh-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dibbs-refresh-panel__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.dibbs-refresh-panel__bar {
  height: 8px;
  background: #d6e6f7;
  border-radius: 4px;
  overflow: hidden;
}
.dibbs-refresh-panel__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1f5e9c 0%, #2d7dc4 100%);
  transition: width 0.4s ease;
}
.dibbs-refresh-panel__hint {
  margin-top: 6px;
  font-size: 11px;
}

/* ── DLA Solicitation Requirement panel (Round 11) ───────────────── */
.dla-req-panel {
  margin: 16px 0 8px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-left: 4px solid var(--navy-800, #1e3a5f);
  border-radius: 6px;
  background: var(--gray-50, #f8fafc);
}
.dla-req-panel__summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-800, #1e3a5f);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dla-req-panel__badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: var(--gray-200, #e2e8f0);
  border-radius: 10px;
  padding: 2px 8px;
}
.dla-req-panel__flag {
  font-size: 10px;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  border-radius: 4px;
  padding: 2px 6px;
}
.dla-req-panel__flag--warn { color: #92400e; background: #fef3c7; }
.dla-req-panel__body { padding: 4px 14px 14px; }
.dla-req-section { margin: 12px 0; }
.dla-req-section__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  margin-bottom: 6px;
}
.dla-req-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dla-req-table th,
.dla-req-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
}
.dla-req-table th {
  font-size: 11px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
}
.dla-req-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dla-req-table .mono,
.dla-req-panel .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.dla-req-codes { list-style: none; margin: 0; padding: 0; }
.dla-req-codes li { padding: 2px 0; }
.dla-req-code {
  display: inline-block;
  background: var(--gray-200, #e2e8f0);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 12px;
  font-weight: 600;
}
.dla-req-panel__foot {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--gray-200, #e2e8f0);
}
.dla-req-panel__warn { color: #92400e; margin-top: 4px; }

/* Per-vendor DLA advisory flags on the vendor card (Round 11) */
.vendor-card__dla-advisory {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #d97706;
  border-radius: 4px;
}
.vendor-card__dla-advisory-line {
  font-size: 12px;
  color: #92400e;
  line-height: 1.4;
}
.vendor-card__dla-advisory-line + .vendor-card__dla-advisory-line { margin-top: 4px; }

.dla-req-pdf-link {
  margin: 0 0 12px;
  padding: 8px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
}
.dla-req-pdf-link a {
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
}
.dla-req-pdf-link a:hover { text-decoration: underline; }

/* Manual follow-up composer modal */
.followup__form { padding: 8px 16px 4px; }
.followup__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 10px;
}
.followup__input,
.followup__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 400;
  color: var(--navy-800, #1e3a5f);
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 4px;
}
.followup__textarea {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  line-height: 1.5;
  resize: vertical;
}
.followup__warn {
  margin-bottom: 10px;
  padding: 6px 9px;
  font-size: 12px;
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
}
.followup-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 2px 8px;
  margin-right: 6px;
}

/* Supplier NO BID (declined to quote) */
.solicitation-card__margin {
  font-size: 14px;
  font-weight: 800;
  color: #15803d;
}
.solicitation-card__margin--neg { color: #b91c1c; }
.solicitation-card__margin-pct { font-size: 12px; font-weight: 600; opacity: 0.8; }
.margin-verify {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}

.nobid-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 4px 12px;
}
.vendor-card--nobid { opacity: 0.85; }
.vendor-card--nobid .vendor-card__name { color: #7f1d1d; }
.followup__status:not(:empty) { padding: 0 16px; }
.followup__sent {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 4px;
}

/* Correspondence dropdown on the vendor card */
.vendor-card__corr { margin: 8px 0 2px; }
.vendor-card__corr-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-800, #1e3a5f);
  padding: 4px 0;
  list-style: none;
}
.vendor-card__corr-summary::-webkit-details-marker { display: none; }
.vendor-card__corr-summary::before { content: "▸ "; }
.vendor-card__corr[open] .vendor-card__corr-summary::before { content: "▾ "; }
.vendor-card__corr-body { padding: 4px 0 2px; }
.corr-list { display: flex; flex-direction: column; gap: 2px; }
.corr-item { border-left: 2px solid var(--gray-200, #e2e8f0); }
.corr-item--out { border-left-color: #93c5fd; }
.corr-item--in { border-left-color: #cbd5e1; }
.corr-item__summary {
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 8px;
  font-size: 12px;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
}
.corr-item__summary::-webkit-details-marker { display: none; }
.corr-item__date { color: #64748b; font-size: 11px; flex: 0 0 auto; }
.corr-item__party { flex: 0 0 auto; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.corr-item__snippet { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.corr-item__body {
  margin: 2px 8px 8px;
  padding: 8px 10px;
  background: var(--gray-50, #f8fafc);
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

/* Round 12.x — Sonnet quote-verify badges on the vendor card */
.vendor-card__verify-flag {
  margin-top: 6px; padding: 5px 9px; border-radius: 4px;
  background: #fff3cd; border-left: 3px solid #b26a00; color: #5b3a00;
  font-size: 12px; font-weight: 600;
}
.vendor-card__verify-applied {
  margin-top: 6px; font-size: 11px; color: #1f6f43; font-weight: 600;
}
.vendor-card__verify-ok {
  margin-top: 6px; font-size: 11px; color: #6b7280;
}

/* Round 12.x — Make Offer badge (supplier invites a counter-offer, no price) */
.makeoffer-badge {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  background: #e7f0fb; color: #1f4e8c; font-weight: 700; font-size: 13px;
  border: 1px solid #b9d4f2;
}
.vendor-card--makeoffer { border-left: 3px solid #1f4e8c; }