/* ============================================================================
   ILS availability panel — shared styles for js/ils-client.js (ILS-1b.2).
   Uses theme.css tokens (--surface/--border/--text/--muted) with fallbacks
   so the same panel reads correctly on Home, Auto-Bid and Suppliers.
   Prefixed `ilsav-` to stay clear of index.html's legacy `.ils-tab*`
   sourcing-panel classes, which predate this feature.
   ============================================================================ */
.ilsav-panel {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px; padding: 18px 20px; margin: 10px 0;
  color: var(--text, #0f172a); font-size: 12px;
  box-shadow: var(--ddhd-shadow-sm, 0 4px 20px rgba(0,0,0,.04));
}
.ilsav-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px;
}
.ilsav-mono { font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 700; }
.ilsav-label {
  font-size: 11px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 6px; padding: 4px 8px; margin-bottom: 12px; display: inline-block;
}
.ilsav-src { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
             padding: 2px 6px; border-radius: 9999px; background: #f1f5f9; color: #475569; }
.ilsav-src.live { background: #dcfce7; color: #15803d; }
.ilsav-quota { font-size: 10px; font-weight: 500; color: var(--muted, #64748b); margin-left: auto; }
.ilsav-list { display: flex; flex-direction: column; }
.ilsav-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
              border-bottom: 1px solid var(--border, #e2e8f0); }
.ilsav-item:last-child { border-bottom: none; }
.ilsav-main { flex: 1; min-width: 0; }
.ilsav-name { font-size: 12px; font-weight: 700; }
.ilsav-sub { font-size: 10px; font-family: 'SFMono-Regular', Consolas, monospace; color: var(--muted, #64748b); margin-top: 1px; }
.ilsav-avp { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 9999px;
             background: #fef3c7; color: #92400e; margin-left: 6px; vertical-align: middle; }
.ilsav-contact { font-size: 11px; color: var(--muted, #64748b); margin-top: 2px; }
/* ILS-E: a supplier can list more than one contact. Indent the second and
   later rows so they read as the same company, not as another listing. */
.ilsav-contact + .ilsav-contact { margin-top: 1px; padding-left: 9px; border-left: 2px solid var(--ddhd-border, #e2e8f0); }
.ilsav-parts { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ilsav-part { font-size: 11px; font-family: 'SFMono-Regular', Consolas, monospace; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ilsav-cond { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 4px;
              background: #e0e7ff; color: #3730a3; min-width: 22px; text-align: center; }
.ilsav-cond.NE { background: #dcfce7; color: #15803d; }
.ilsav-cond.AR { background: #fee2e2; color: #b91c1c; }
.ilsav-qty { font-weight: 700; }
.ilsav-dim { color: var(--muted, #64748b); }
.ilsav-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; white-space: nowrap; }
.ilsav-copy {
  cursor: pointer; background: none; border: 1px solid var(--ddhd-accent, #c9a84c);
  color: var(--ddhd-accent-strong, #b89636); border-radius: 6px; padding: 4px 10px;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
}
.ilsav-copy:hover { background: var(--ddhd-accent-soft, rgba(201,168,76,.18)); }
.ilsav-copy.copied { border-color: #15803d; color: #15803d; }
.ilsav-noemail { font-size: 11px; font-style: italic; color: var(--muted, #64748b); }
/* ILS-E.2: the RFQ is the primary action on a listing — the copy button is
   the fallback for when you want to write it yourself. */
.ilsav-rfq {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  background: var(--ddhd-accent, #c9a84c); color: var(--ddhd-accent-contrast, #0f2744);
  border: 1px solid var(--ddhd-accent, #c9a84c); white-space: nowrap;
}
.ilsav-rfq:hover { filter: brightness(1.08); }
.ilsav-rfq.copied { background: #15803d; border-color: #15803d; color: #fff; }
.ilsav-err { font-size: 12px; color: #b91c1c; }
.ilsav-miss { font-size: 12px; color: var(--muted, #64748b); }
.ilsav-alt { margin-left: 8px; background: none; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 6px;
             padding: 3px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.ilsav-alt:hover { background: #eef2ff; }
.ilsav-altrow { margin-top: 10px; }

/* Generic "metered action" button used by the Marketplace availability
   section on Home and the manual/row buttons elsewhere. */
.ilsav-btn {
  padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .3px; cursor: pointer;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}
.ilsav-btn:hover { background: #ffedd5; }
.ilsav-btn:disabled { opacity: .45; cursor: not-allowed; }
.ilsav-btn.octo { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.ilsav-btn.octo:hover { background: #cffafe; }

/* ── RFQ-2: Send RFQ preview modal ──────────────────────────────────────────
   Appended to <body>, so it must carry its own stacking context and not rely
   on any host page's layout. z-index sits above the dashboard's own overlays
   (auto-bidding's companion panel tops out in the 1000s). */
.ilsav-modal-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15, 39, 68, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.ilsav-modal {
  background: #fff; color: #1f2937; border-radius: 10px; width: 100%; max-width: 680px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3); overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.ilsav-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: var(--ddhd-panel, #0f2744); color: #fff; font-size: 14px;
}
.ilsav-modal-x {
  background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .75;
}
.ilsav-modal-x:hover { opacity: 1; }
/* The mode banner is load-bearing: it tells the operator whether this click
   reaches a real supplier. Never tone these down. */
.ilsav-modal-dry  { background: #fef3c7; border-bottom: 1px solid #fde68a; color: #92400e; padding: 10px 18px; font-size: 12px; }
.ilsav-modal-live { background: #dcfce7; border-bottom: 1px solid #bbf7d0; color: #14532d; padding: 10px 18px; font-size: 12px; font-weight: 700; }
.ilsav-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ilsav-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #374151; }
.ilsav-f em { font-weight: 400; font-style: normal; color: var(--muted, #64748b); }
.ilsav-in, .ilsav-ta {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px;
  border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; color: #1f2937; background: #fff;
}
.ilsav-ta { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; }
.ilsav-in:focus, .ilsav-ta:focus { outline: 2px solid var(--ddhd-accent, #c9a84c); outline-offset: -1px; }
.ilsav-modal-meta { font-size: 11px; color: var(--muted, #64748b); }
.ilsav-modal-status { font-size: 12px; min-height: 16px; }
.ilsav-modal-status.ok  { color: #15803d; font-weight: 600; }
.ilsav-modal-status.bad { color: #b91c1c; font-weight: 600; }
.ilsav-modal-foot {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  border-top: 1px solid #e5e7eb; background: #f9fafb;
}
.ilsav-modal-spacer { flex: 1; }
.ilsav-rfq:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) {
  .ilsav-modal-backdrop { padding: 12px 8px; }
  .ilsav-modal-foot { flex-wrap: wrap; }
}

/* RFQ-2.1: quantity + government-mention controls in the send modal. */
.ilsav-frow { display: flex; gap: 12px; }
.ilsav-f-qty { flex: 0 0 150px; }
.ilsav-f-uoi { flex: 0 0 90px; }
.ilsav-check span { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ilsav-check input[type="checkbox"] { width: 14px; height: 14px; }
.ilsav-check em { font-weight: 400; font-style: normal; font-size: 11px; color: var(--muted, #64748b); line-height: 1.45; }
.ilsav-edited {
  font-size: 11px; color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
  border-radius: 6px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}