:root {
  /* backgrounds */
  --bg:              #0f1b2d;
  --bg-grad-from:    #1a2c48;
  --bg-grad-to:      #0b1324;
  /* surfaces (dark = lighter than bg) */
  --surface:         #16243a;   /* cards, panels */
  --surface-2:       #0f1726;   /* insets, list rows */
  --surface-3:       #24344f;   /* elevated / raised panels */
  /* borders */
  --border:          #1c2b45;
  --border-strong:   #2e3c54;
  /* text */
  --text:            #f3f5f7;
  --text-muted:      #a9b4c4;
  /* brand accent (theme-invariant) */
  --accent:          #f6b03b;
  --accent-contrast: #1b1402;   /* text on gold */
  /* status */
  --success:         #4caf82;
  --warn:            #f6b03b;
  --error:           #ff6b6b;
  /* effects */
  --overlay:         rgba(8,12,20,.75);              /* modal scrim (matches original) */
  --shadow:          0 18px 40px rgba(0,0,0,.35);    /* card elevation (matches original .panel) */
  --header-bg:       rgba(11,19,36,.95);             /* frosted sticky topbar (matches original) */

  /* legacy aliases — keep existing var() usages working, do NOT remove */
  --panel:  var(--surface);
  --muted:  var(--text-muted);
}

:root[data-theme="light"] {
  --bg:              #f4f6f9;
  --bg-grad-from:    #ffffff;
  --bg-grad-to:      #eef1f6;
  --surface:         #ffffff;
  --surface-2:       #f0f3f7;
  --surface-3:       #e8edf3;
  --border:          #dde3ec;
  --border-strong:   #c3ccd9;
  --text:            #16243a;
  --text-muted:      #5c6b7f;
  /* --accent / --accent-contrast intentionally NOT overridden */
  --success:         #2c8a5f;
  --warn:            #c77d0a;
  --error:           #d64545;
  --overlay:         rgba(15,27,45,.4);
  --shadow:          0 2px 8px rgba(20,30,50,.08);
  --header-bg:       rgba(255,255,255,.85);
  /* aliases inherit automatically via var() */
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, var(--bg-grad-from), var(--bg-grad-to) 60%);
  color: var(--text);
}

body.login-only .header-search,
body.login-only .header-actions,
body.login-only .top-menu,
body.login-only .bottom-nav { display: none; }

body.login-only .shell {
  min-height: calc(100vh - 120px);
  display: flex; align-items: center; justify-content: center;
}
body.login-only .login-panel { width: min(420px, 92vw); }

/* ── Topbar ── */
.topbar {
  position: relative; display: flex; align-items: center;
  justify-content: flex-start; gap: 16px; padding: 16px 24px;
  background: var(--header-bg); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px); z-index: 10;
}
.topbar.sticky { position: sticky; top: 0; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.brand { font-size: 1.4rem; letter-spacing: 0.08em; text-transform: uppercase; }
.brand img { display: block; height: 45px; }

.menu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.menu-link {
  display: inline-flex; align-items: center; color: var(--muted);
  text-decoration: none; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent;
}
.menu-link:hover, .menu-link.active {
  color: var(--text); border-color: var(--border-strong); background: var(--surface-2);
}

.top-menu {
  display: flex; align-items: center; gap: 12px;
  padding: 2px; flex-wrap: wrap;
}

.header-search {
  display: flex; align-items: center; gap: 6px;
  background: #e2e7f0; border-radius: 999px; padding: 2px 6px; margin-left: 16px;
}
.header-search input {
  border: none; background: transparent; color: var(--bg-grad-to);
  font-size: 0.8rem; min-width: 110px; padding: 4px 6px;
}
.header-search button { padding: 4px 8px; font-size: 0.8rem; }

/* ── Shell ── */
.shell { max-width: 960px; margin: 40px auto; padding: 0 20px 120px; }

.panel {
  background: var(--panel); border-radius: 16px; padding: 24px;
  margin-bottom: 20px; box-shadow: var(--shadow);
}

.lead { color: var(--muted); margin-top: 8px; }

hr { border: none; border-top: 1px solid var(--border-strong); margin: 16px 0; }

/* ── Forms ── */
label { display: block; margin-bottom: 12px; color: var(--muted); }

input, select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text);
}
textarea { resize: vertical; font-family: inherit; font-size: inherit; }

button {
  background: var(--accent); border: none; color: var(--accent-contrast);
  padding: 12px 16px; border-radius: 10px; font-weight: 700; cursor: pointer;
}
/* button + button { margin-left: 8px; } */
button.ghost {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text);
}

.button-link {
  display: inline-block; margin-top: 12px; background: transparent;
  border: 1px solid var(--border-strong); color: var(--text); padding: 10px 14px;
  border-radius: 10px; text-decoration: none;
}

/* ── Feedback ── */
.error   { margin-top: 10px; color: var(--error); }
.success { margin-top: 10px; color: var(--success); }
.muted   { color: var(--muted); }
.text-warn { color: var(--warn); }

/* ── Badges ── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; line-height: 1.4;
}
.badge-success { background: rgba(76,175,130,.18); color: var(--success); }
.badge-warn    { background: rgba(246,176,59,.18);  color: var(--warn); }
.badge-error   { background: rgba(255,107,107,.18); color: var(--error); }
.badge-muted   { background: rgba(169,180,196,.12); color: var(--muted); }

/* ── Card ── */
.card {
  margin-top: 16px; background: var(--surface-2); padding: 16px; border-radius: 12px;
}

/* ── PWA shell ── */
.pwa-shell { display: flex; flex-direction: column; gap: 12px; }
.pwa-section { display: flex; flex-direction: column; gap: 10px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
.section-header h2 { font-size: 1.05rem; margin: 0; }

/* Admin offer edit modal */
.offer-edit-modal-card { width: min(900px, 95vw); max-height: 92vh; }
.doc-item-pending { opacity: .85; background: rgba(79,195,247,.05); border: 1px dashed var(--border); }

/* ── Offer cards ── */
.offer-slider {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overflow-x: hidden; padding: 2px 2px 4px;
  flex: 1 1 auto; min-height: 0;
}
.offer-card {
  width: 100%; background: var(--surface-2); border-radius: 12px;
  padding: 9px 11px; border: 1px solid var(--border); color: var(--text); text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.offer-card:hover { transform: translateY(-3px); box-shadow: 0 14px 24px rgba(0,0,0,.35); }
/* Offers owned by the current user (created by them, or promoted from their request) */
.offer-card-mine {
  border-color: rgba(246, 176, 59, .55);
  background: linear-gradient(180deg, rgba(246, 176, 59, .12), rgba(246, 176, 59, .03)), var(--surface-2);
}

/* ── Offers landing: viewport-height column with pinned chat dock ── */
.offers-pane {
  /* topbar + shell margins + bottom nav; tune this one value after first deploy */
  --offers-chrome: 184px;
  display: flex; flex-direction: column; min-height: 0;
  height: calc(100dvh - var(--offers-chrome));
  gap: 8px;
}
.offers-pane .section-header,
.offers-pane #offerInsights { flex: 0 0 auto; }

.offers-chat-dock {
  flex: 0 0 auto; display: flex; flex-direction: column;
  height: clamp(150px, 30vh, 230px);
  border-top: 1px solid var(--border); padding-top: 6px;
}
.offers-chat-dock-head {
  flex: 0 0 auto; margin-bottom: 4px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.offers-chat-mount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.offers-chat-mount .chat-messages {
  flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
}
.offers-chat-mount .chat-send-form { flex: 0 0 auto; }

/* ── Offers Today/All filter chips ─────────────────────────────────────────── */
.offer-chips {
  display: flex;
  gap: .5rem;
  margin: 0 0 .6rem;
}
.offer-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.offer-chip:hover { border-color: var(--accent); color: var(--text); }
.offer-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.offer-chip-count {
  font-variant-numeric: tabular-nums;
  opacity: .8;
}
.offer-chip.is-active .offer-chip-count { opacity: 1; }

/* Logo acts as a home link */
.brand-link { display: inline-flex; align-items: center; }

/* The logo artwork is a red hexagon plus a WHITE wordmark, so on the light theme's
   pale header the words vanish and only the hexagon shows. Rather than recolour the
   asset (which would alter brand artwork) or invert it (which would turn the red
   hexagon cyan), the logo sits on its own dark chip in light mode — the artwork is
   reproduced exactly as supplied, on the background it was drawn for.
   Replace this with a dark-wordmark asset if one is provided. */
:root[data-theme="light"] .brand-link {
  background: #17202e;
  padding: 4px 10px;
  border-radius: 8px;
}

/* Small "· N open" count beside a section title */
.title-count { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* Admin Offers nav: Open/Closed/Pending/All status pills */
.nav-counts { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.nav-counts .nc {
  font-size: .6rem; font-weight: 700; line-height: 1.6;
  padding: 0 5px; border-radius: 999px; min-width: 14px; text-align: center;
}
.nav-counts .nc-open    { background: rgba(76,175,130,.20); color: var(--success); }
.nav-counts .nc-closed  { background: rgba(255,107,107,.18); color: #ff8a8a; }
.nav-counts .nc-pending { background: rgba(246,176,59,.18);  color: var(--accent); }
.nav-counts .nc-all     { background: rgba(126,184,255,.18); color: #7eb8ff; }

/* Insight modal (Recent Sales / Procurement / Customers tables) */
.insight-modal-card { width: min(960px, 96vw); }
.insight-modal-body .insight-heading { margin-right: 40px; }

/* Admin offers table pager */
.offers-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.offers-pager button[disabled] { opacity: .45; cursor: default; }

/* Call Card */
.modal-bid-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.call-log-btn {
  background: rgba(126,184,255,.14); color: #7eb8ff; border: 1px solid rgba(126,184,255,.35);
  border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.call-log-btn:hover { background: rgba(126,184,255,.24); }
.call-modal-card { width: min(560px, 96vw); }
.call-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.call-outcomes { display: flex; flex-wrap: wrap; gap: 6px; }
.call-outcome {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; cursor: pointer;
}
.call-outcome:hover { border-color: #3f5680; }
.call-outcome.active { background: rgba(126,184,255,.18); border-color: #7eb8ff; color: var(--text); font-weight: 600; }

.offer-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; flex-wrap: wrap;
  font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em;
}
.offer-meta-pills { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.offer-stock-code { font-weight: 700; flex-shrink: 0; }
.row-id-tag { font-size: .7rem; color: var(--muted); font-weight: 400; opacity: .7; flex-shrink: 0; }
.offer-title { font-size: .9rem; margin: 3px 0 4px; font-weight: 700; line-height: 1.25; }
.offer-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-bottom: 1px; }
.offer-expiry { font-size: .7rem; margin-top: 4px; }

/* tiny meta pills (sales count, kg) */
.offer-pill-tiny {
  display: inline-block; border-radius: 999px; padding: 1px 6px;
  font-size: .65rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.offer-pill-sales {
  background: rgba(59,130,246,.15); color: #7eb8ff;
}
.offer-pill-kg {
  background: rgba(76,175,130,.12); color: var(--success);
}

.offer-actions {
  margin-top: 10px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 5px;
}
.offer-tag {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  background: rgba(246,176,59,.18); color: var(--accent); font-weight: 600; font-size: .72rem;
}
.offer-tag.offer-expired { background: rgba(255,107,107,.18); color: var(--error); }
.offer-pill {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text);
  padding: 5px 8px; border-radius: 8px; font-size: .72rem; cursor: pointer;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; box-sizing: border-box;
}
.offer-pill:disabled { opacity: .35; cursor: not-allowed; }
.offer-stock-code-none { font-weight: 400; font-style: italic; color: var(--muted); }

/* ── Insights ── */
.insight-heading { font-weight: 700; margin-bottom: 6px; font-size: .9rem; }
.insight-card {
  background: var(--surface-2); border-radius: 14px; padding: 12px 14px; border: 1px solid var(--border);
}
.insight-title { font-weight: 700; }
.insight-meta  { color: var(--muted); font-size: .85rem; margin: 6px 0; }

/* ── Insight datatable ── */
.idt-count  { font-weight: 400; font-size: .75rem; color: var(--muted); margin-left: 6px; }
.idt-ctrl   { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
/* Was font-size:11px, padding:2px 7px, min-width:80px — sized for a cramped inline
   data-table toolbar, then reused for every search box in the app, where it read as a
   broken input rather than a small one. Normal control sizing now; the callers that
   genuinely need it compact can say so, rather than everyone inheriting the tightest
   case. */
.idt-search {
  flex: 1 1 220px; min-width: 200px; max-width: 420px; font-size: .875rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 11px; border-radius: 8px; outline: none;
}
.idt-search:focus { border-color: var(--accent); }
.idt-search::placeholder { color: var(--text-muted); }
.idt-pages  { font-size: 10px; color: var(--muted); white-space: nowrap; }
.idt-btn    {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 1px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1.4;
}
.idt-btn:disabled { opacity: .3; cursor: default; }
.idt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
.idt-table  { width: 100%; border-collapse: collapse; font-size: 10px; }
.idt-table thead tr { background: var(--surface-2); }
.idt-table th {
  padding: 4px 6px; text-align: left; color: var(--text-muted); font-weight: 600;
  cursor: pointer; user-select: none; white-space: nowrap;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-2);
  vertical-align: bottom;
}
.idt-table th:hover { color: #a8d4f5; }
.idt-table td { padding: 4px 6px; border-bottom: 1px solid #141e2d; white-space: nowrap; vertical-align: middle; }
.idt-table tbody tr:hover { background: var(--surface-3); }
.idt-r { text-align: left; }

/* Procurement lines already committed to a sales order. Translucent so it tints
   whatever surface the theme puts behind it, and box-shadow (not border-left) for
   the edge marker — border-collapse would swallow a border on the row. */
.idt-table tbody tr.idt-row-sold { background: rgba(76,175,130,.14); }
.idt-table tbody tr.idt-row-sold:hover { background: rgba(76,175,130,.24); }
.idt-table tbody tr.idt-row-sold td:first-child { box-shadow: inset 2px 0 0 var(--success); }
.idt-legend { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .78rem; color: var(--text-muted); }
.idt-legend-swatch {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
  background: rgba(76,175,130,.14); box-shadow: inset 2px 0 0 var(--success);
}

/* ── Customers pane ── */
.customers-list { margin-top: 8px; }
.customers-table td { white-space: normal; vertical-align: middle; }
.customers-table .cust-name { font-weight: 600; color: var(--text); }
.customers-table .cust-code { font-size: .75rem; }
.hold-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}
.hold-badge.hold-no   { background: #14331f; color: #6fd98b; }
.hold-badge.hold-yes  { background: #3a1420; color: #ff7a8f; }
.hold-badge.hold-none { background: #2a2f3a; color: #9aa4b2; }

/* A12: render native date pickers dark-aware so the calendar is legible */
input[type="date"] { color-scheme: dark; }

/* A34: show/hide password toggle */
.pw-field { display: flex; align-items: center; gap: 6px; }
.pw-field input { flex: 1; }
.pw-toggle {
  background: transparent; border: 1px solid var(--border-strong); color: var(--muted);
  border-radius: 8px; padding: 4px 8px; font-size: .75rem; cursor: pointer; white-space: nowrap;
}
.pw-toggle:hover { color: var(--text); border-color: #3a4a66; }

/* A32: highlight the chat bubble button when there are unread messages */
.cw-header-btn.cw-has-unread { box-shadow: 0 0 0 2px #25d366; border-radius: 8px; }
.cust-details-btn { padding: 4px 10px; font-size: .8rem; }

/* Customer details modal */
.customer-modal-card { max-width: 520px; width: calc(100% - 32px); padding: 18px 20px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.modal-header h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
/* 40px was oversized on every modal, and the hardcoded light-on-dark colours
   predate the Phase 18 theme tokens — they left the ✕ nearly invisible in light
   mode. Tokenised, and sized down to 30px. */
.modal-close {
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 50%;
  width: 30px; height: 30px; padding: 0;
  font-size: .95rem; line-height: 1; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.modal-close:hover  { background: #ff5566; border-color: #ff5566; color: #fff; transform: scale(1.08); }
.modal-close:active { transform: scale(.95); }
.customer-modal-body .cust-subtitle { font-size: .8rem; margin-bottom: 12px; }
.cust-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.cust-field { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cust-field-label { color: var(--text-muted); font-size: .78rem; }
/* was #e6eefc — a near-white hardcoded before the theme tokens existed, so customer
   detail values were unreadable on the light background. */
.cust-field-value { color: var(--text); font-size: .85rem; font-weight: 600; text-align: right; }
@media (max-width: 480px) {
  .cust-field-grid { grid-template-columns: 1fr; }
}

/* ── Modal ── */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-backdrop { position: absolute; inset: 0; background: var(--overlay); }
.modal-card {
  position: relative; background: var(--surface); border-radius: 20px; padding: 20px;
  width: min(680px, 95vw); max-height: 92vh; overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.modal-close { position: absolute; top: 12px; right: 12px; }
.modal-close-floating { position: absolute; top: 14px; right: 14px; z-index: 5; }
.modal-close-inline {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255,255,255,.07); border: 1px solid var(--border-strong); color: var(--muted);
  border-radius: 6px; font-size: .8rem; line-height: 1; padding: 2px 7px;
  cursor: pointer; transition: background .15s;
}
.modal-close-inline:hover { background: rgba(255,255,255,.13); color: var(--text); }

/* kept for backwards compat – no longer used in modal */
.offer-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 12px; margin: 16px 0; color: var(--muted);
}

/* ── Compact offer header (modal) ── */
.offer-header-compact {
  padding-bottom: 6px;
}
.offer-title-row {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; margin-bottom: 10px;
  padding-bottom: 8px; padding-right: 56px; border-bottom: 1px solid var(--border);
}
.offer-title-desc {
  font-size: 1rem; font-weight: 700; color: var(--text);
  line-height: 1.3; flex: 1 1 auto;
}
.offer-title-code {
  font-size: .75rem; font-weight: 600; color: var(--accent);
  background: rgba(59,130,246,.12); border-radius: 4px;
  padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
}
.offer-price-row {
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px;
}
.offer-price-row .offer-pill { width: auto; margin-left: auto; }
.offer-price-val {
  font-size: 1.35rem; font-weight: 700; color: var(--accent);
}
.offer-price-sep {
  font-size: .78rem; color: var(--muted); margin-right: 10px;
}
.offer-qty-val {
  font-size: .95rem; font-weight: 600; color: var(--text);
}
.offer-meta-line {
  display: flex; flex-wrap: wrap; gap: 0 14px;
  font-size: .75rem; color: var(--muted); line-height: 1.9;
}
.offer-meta-line abbr { text-decoration: none; cursor: default; }
.offer-notes-line {
  font-size: .75rem; color: var(--muted);
  margin-top: 4px; line-height: 1.5;
}

/* ── Inline doc strip (below header, above tabs) ── */
.offer-docs-inline {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 0 2px;
}
.offer-docs-inline:empty { display: none; }
.doc-inline-thumb {
  display: block; width: 44px; height: 44px; border-radius: 6px;
  overflow: hidden; border: 1px solid var(--border); flex-shrink: 0;
}
.doc-inline-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.doc-inline-thumb:hover { border-color: var(--accent); }
.doc-inline-file {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px;
  border: 1px solid var(--border); font-size: 1.3rem; text-decoration: none;
  color: var(--muted); flex-shrink: 0;
}
.doc-inline-file:hover { border-color: var(--accent); color: var(--text); }

/* ── Bid list ── */
.bid-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.bid-list li {
  display: grid; gap: 3px; padding: 7px 10px; border-radius: 8px;
  background: var(--surface-2); color: var(--muted); font-size: .82rem;
}
.bid-list strong { color: var(--text); }
.bid-list em { font-size: .75rem; color: var(--muted); }

/* ── My Bids cards ── */
.bids-list { display: grid; gap: 10px; }
.bid-card {
  background: var(--panel); border-radius: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  display: grid; gap: 4px; margin-bottom: 6px;
}
.bid-card:last-child { margin-bottom: 0; }
.bid-card-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; font-size: .88rem; }
.bid-card-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }

/* Swipe-to-archive wrapper */
.bid-swipe-wrap {
  position: relative; overflow: hidden; border-radius: 10px;
}
.bid-swipe-card {
  position: relative; z-index: 1;
  touch-action: pan-y; /* allow vertical scroll, capture horizontal */
  cursor: pointer; /* tap opens the offer + reveals the bid */
}
.bid-swipe-action {
  position: absolute; right: 0; top: 0; bottom: 0; width: 90px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; border-radius: 0 10px 10px 0;
  cursor: pointer; user-select: none;
}
.bid-swipe-archive { background: #e53935; color: #fff; }
.bid-swipe-restore { background: var(--success); color: #fff; }

/* Desktop: show archive button inline, hide swipe action */
.bid-archive-btn {
  margin-left: auto; padding: 3px 8px; font-size: .78rem;
  border-radius: 6px; flex-shrink: 0;
}
@media (max-width: 700px) {
  .bid-archive-btn { display: none; }
}
@media (min-width: 701px) {
  .bid-swipe-action { display: none; }
}

/* ── Notifications ── */
.notif-bell { position: relative; font-size: 1rem; padding: 8px 10px; }
.notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--error); color: #fff; font-size: .7rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%; vertical-align: top; margin-left: 2px;
}

.notif-list { display: grid; gap: 10px; }
.notif-item {
  background: var(--surface-2); border-radius: 12px; padding: 14px 16px;
  border-left: 3px solid transparent;
}
.notif-unread { border-left-color: var(--accent); }
.notif-title  { font-weight: 700; margin-bottom: 4px; }
.notif-msg    { color: var(--muted); font-size: .9rem; }
.notif-clickable { cursor: pointer; }
.notif-clickable:hover { background: var(--surface-3); }
.notif-open-hint { font-size: .75rem; color: var(--accent); margin-top: 4px; }
.notif-time   { font-size: .78rem; margin-top: 6px; }

/* ── Bottom nav ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-grad-to); border-top: 1px solid var(--border);
  z-index: 20;
}
.bottom-item {
  background: transparent; border: none; color: var(--muted);
  display: grid; gap: 3px; justify-items: center; font-size: .78rem;
  padding: 2px 1px; min-width: 0;
}
.bottom-item span:not(.icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bottom-item.active { color: var(--accent); }
.bottom-item .icon  { font-size: 1.15rem; }

/* ── Stats grid ── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.stat-card {
  background: var(--panel); border-radius: 16px; padding: 20px 16px;
  text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.stat-card.stat-warn { border: 1px solid rgba(255,107,107,.3); }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat-label { color: var(--muted); font-size: .85rem; margin-top: 6px; }

.quick-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ── Admin shell ── */
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.admin-sidebar { background: var(--surface-2); padding: 24px; border-right: 1px solid var(--border); }
.admin-menu { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.admin-menu a {
  color: var(--muted); text-decoration: none; padding: 10px 12px;
  border-radius: 10px; border: 1px solid transparent;
}
.admin-menu a.active, .admin-menu a:hover {
  color: var(--text); border-color: var(--border-strong); background: var(--surface-2);
}
.admin-main   { padding: 32px; }
.admin-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;
}
.notif-bell-wrap { display: flex; align-items: center; }

/* ── Forms (grid) ── */
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; align-items: end;
}
.form-actions { display: flex; align-items: center; gap: 8px; }
.il-upload-meta { grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0; }
@media (max-width: 700px) { .il-upload-meta { grid-template-columns:1fr; } }

/* ── Table ── */
.table-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.sortable {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-weight: 600; padding: 4px 6px; cursor: pointer;
}
.sortable:hover { color: var(--text); border-color: var(--border-strong); }
.sortable.sort-active { color: var(--text); }
.sortable.sort-active[data-dir="asc"]::after  { content: " \25B2"; font-size: .7em; }
.sortable.sort-active[data-dir="desc"]::after { content: " \25BC"; font-size: .7em; }
#usersSearch { margin-left: 8px; min-width: 240px; }
#usersCount  { margin-left: 8px; font-size: .8rem; }
.pager { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.table-wrap { margin-top: 16px; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--surface-3);
}
.admin-table th { color: var(--muted); font-weight: 600; }

/* ── Offer filter toggle bar ── */
.offer-filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.offer-filter-toggles {
  display: flex; gap: 4px;
}
.offer-filter-btn {
  background: transparent; border: 1px solid var(--border-strong); color: var(--muted);
  padding: 6px 14px; border-radius: 8px; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.offer-filter-btn:hover { color: var(--text); border-color: #4a5d7a; }
.offer-filter-btn.active {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}

/* ── Offer table stacked action buttons ── */
.offer-actions-stack {
  display: flex; flex-direction: column; gap: 3px; min-width: 70px;
}
.offer-action-btn {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text);
  padding: 3px 8px; border-radius: 6px; font-size: .72rem; font-weight: 600;
  cursor: pointer; text-align: center; transition: all .12s; white-space: nowrap;
}
.offer-action-btn:hover { border-color: #4a5d7a; background: rgba(255,255,255,.05); }
.offer-action-open { color: var(--success); border-color: rgba(76,175,130,.4); }
.offer-action-open:hover { background: rgba(76,175,130,.1); }
.offer-action-close { color: var(--error); border-color: rgba(255,107,107,.3); }
.offer-action-close:hover { background: rgba(255,107,107,.1); }
.offer-action-delete { color: var(--muted); border-color: rgba(169,180,196,.2); }
.offer-action-delete:hover { color: var(--error); border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.08); }

/* ── Profile dropdown ── */
.profile-wrap { position: relative; }
.profile-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
  color: var(--accent-contrast); font-weight: 700; font-size: 1rem; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.profile-avatar:hover { filter: brightness(1.1); }
.profile-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 12px; min-width: 200px; z-index: 100;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.profile-info { padding: 4px 8px 8px; }
.profile-name { font-weight: 700; font-size: 1rem; }
.profile-role { font-size: .8rem; margin-top: 2px; }
.profile-dropdown hr { margin: 8px 0; border-color: var(--border-strong); }
.profile-menu-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: none; color: var(--text); padding: 9px 12px; border-radius: 8px;
  font-size: .9rem; cursor: pointer; text-decoration: none;
  font-weight: 400;
}
.profile-menu-item:hover { background: var(--surface-2); }
.profile-menu-item + .profile-menu-item { margin-left: 0; }
.profile-logout { color: var(--error); }

/* ── Search results panel ── */
.search-section-title {
  font-weight: 700; font-size: .85rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 10px;
}
.search-offer-grid { flex-wrap: wrap; }
.search-offer-card { cursor: pointer; }

/* ── Market modal ── */
.market-modal-card { max-width: 560px; }
.market-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 14px 0 10px; flex-wrap: wrap;
}
.market-select-all-wrap {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: .9rem; cursor: pointer;
}
.market-send-btn {
  background: #25d366; color: #fff; border: none;
  padding: 9px 16px; border-radius: 10px; font-weight: 700;
  cursor: pointer; font-size: .9rem;
}
.market-send-btn:disabled { opacity: .45; cursor: not-allowed; }
.market-customer-list {
  display: grid; gap: 8px; max-height: 360px; overflow-y: auto;
  padding-right: 4px;
}
.market-customer-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border-radius: 12px; padding: 12px 14px;
  border: 1px solid var(--border); cursor: pointer;
}
.market-customer-row:has(.market-chk:checked) {
  border-color: #25d366; background: rgba(37,211,102,.07);
}
.market-chk { width: 18px; height: 18px; flex-shrink: 0; accent-color: #25d366; }
.market-customer-info { flex: 1; min-width: 0; }
.market-customer-name { font-weight: 600; }
.market-customer-meta { font-size: .82rem; margin-top: 2px; }
.market-no-phone { margin-left: auto; flex-shrink: 0; }
.market-log {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: rgba(37,211,102,.1); font-size: .88rem; color: var(--text);
}
.offer-pill-market { color: #25d366; border-color: rgba(37,211,102,.4); }
.offer-pill-market:hover { background: rgba(37,211,102,.1); }

/* ── Offer market-history modal ────────────────────────────────────────────── */
.history-modal-card { max-width: 34rem; }
/* Was max-width:32rem, which squeezed the customer list into a column too narrow for a
   company name. Dropped so this dialog uses the standard .modal-card width, matching the
   offers Market modal it is a twin of. */
.il-send-testnote { font-size:.75rem; margin:.2rem 0 .6rem; }

/* ── Send-to-WhatsApp customer picker ──────────────────────────────────────────
   Mirrors .market-customer-row from the offers Market modal. The two dialogs do the same
   job and had drifted apart visually.

   The old rule was `display:flex` and nothing else — no flex sizing on any child. With the
   phone number set to `white-space:nowrap` it could not give up any width, so the company
   name absorbed the entire shortfall and wrapped mid-name, leaving a ragged column that was
   hard to scan and hard to associate a number with the right row. Fixed structurally: the
   name gets its own full-width line, and the number sits under it as metadata. */
.il-send-customers {
  display: grid; gap: 8px;
  max-height: 40vh; overflow-y: auto;
  padding: 6px; margin-bottom: 10px;
}
.il-send-cust {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
  cursor: pointer; text-align: left;
}
.il-send-cust:hover { border-color: var(--border-strong, var(--border)); }
/* Selected rows use WhatsApp green, the same signal the Market modal uses. */
.il-send-cust:has(.il-send-cust-box:checked) {
  border-color: #25d366; background: rgba(37,211,102,.07);
}
.il-send-cust-box { width: 18px; height: 18px; flex-shrink: 0; accent-color: #25d366; }
/* min-width:0 is what actually lets a long name wrap inside the row instead of forcing
   the row wider than the dialog. */
.il-send-cust-info { flex: 1; min-width: 0; display: block; }
.il-send-cust-name { display: block; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.il-send-cust-meta { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
/* A customer with no number cannot be sent to — say so on the row rather than only dimming
   it, so the reason is visible instead of inferred. */
.il-send-cust-none { opacity: .6; cursor: not-allowed; }
.il-send-cust-none .il-send-cust-meta { color: var(--warn, #fbbf24); }
.il-send-msg-label { display:block; font-size:.8rem; color:var(--text-muted); }
.il-send-msg-label textarea { width:100%; margin-top:4px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:6px; font:inherit; }
.il-send-hint { font-size:.72rem; margin:.3rem 0 .8rem; }
.il-send-actions { display:flex; align-items:center; gap:10px; }
.history-basis {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: .2rem 0 .8rem;
}
.history-basis .offer-pill { width: auto; }
.history-list { max-height: 60vh; overflow-y: auto; }
.history-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: .6rem;
  align-items: baseline;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.history-row:last-child { border-bottom: 0; }
.history-date  { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.history-desc  { color: var(--text); overflow-wrap: anywhere; }
.history-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 30rem) {
  .history-row { grid-template-columns: 5.5rem 1fr; }
  .history-price { grid-column: 2; justify-self: end; }
}

/* ── Offer card: In Stock / Ex Stock badge ── */
.offer-tag-sm { font-size: .65rem; padding: 1px 6px; border-radius: 999px; font-weight: 700; }
.offer-tag-stock-in  { background: rgba(76,175,130,.18); color: var(--success); border: 1px solid rgba(76,175,130,.35); }
.offer-tag-stock-ex  { background: rgba(246,176,59,.12); color: var(--accent); border: 1px solid rgba(246,176,59,.3); }

/* ── Offer grade tag ── */
.offer-grade-tag {
  font-size: .65rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: rgba(100,160,255,.14); color: #82b4ff; border: 1px solid rgba(100,160,255,.3);
}

/* ── Offer card chat badge ── */
.offer-chat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #e53935; color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 999px; line-height: 1; vertical-align: middle;
}

/* ── Bid qty warning ── */
.bid-qty-warn {
  background: rgba(246,176,59,.12); border: 1px solid rgba(246,176,59,.4);
  color: var(--accent); border-radius: 8px; padding: 6px 10px;
  font-size: .8rem; margin-bottom: 6px;
}

/* ── Bid over-allocation ── */
.bid-over-alloc-pill {
  display: inline-block; background: rgba(229,57,53,.15); color: #ef5350;
  border: 1px solid rgba(229,57,53,.4); border-radius: 999px;
  font-size: .68rem; font-weight: 700; padding: 1px 8px;
}
.bid-card-over { border-left: 3px solid #ef5350; }

/* ── Admin Requirements page ── */
.req-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
}
.req-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.req-desc   { color: var(--muted); font-size: .9rem; margin-left: 8px; }
.req-grade  {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(100,160,255,.14); color: #82b4ff; border: 1px solid rgba(100,160,255,.3);
  margin-left: 6px; vertical-align: middle;
}
.req-summary { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85rem; }
.req-excess  { color: #ef5350; font-weight: 600; }
.req-table   { width: 100%; border-collapse: collapse; font-size: .82rem; }
.req-table th { padding: 4px 8px; text-align: left; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.req-table td { padding: 4px 8px; border-bottom: 1px solid #141e2d; }
.req-table tr.req-bid-over td { background: rgba(229,57,53,.07); }
.req-over-pill {
  display: inline-block; background: rgba(229,57,53,.15); color: #ef5350;
  border: 1px solid rgba(229,57,53,.4); border-radius: 999px;
  font-size: .68rem; font-weight: 700; padding: 1px 7px; white-space: nowrap;
}
.req-r { text-align: right; }

/* ── Insight: price/kg emphasis ── */
.insight-ppkg { font-weight: 700; color: var(--accent); }

/* ── Bids section heading ── */
.modal-bids-heading {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px;
}

/* ── Modal tabs (unused — kept for safety) ── */
.modal-tabs {
  display: flex; gap: 4px; margin: 16px 0 0;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.modal-tab {
  background: none; border: none; color: var(--muted);
  padding: 8px 16px; cursor: pointer; font-size: .9rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.modal-tab:hover { color: var(--text); }
.modal-tab-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }

/* ── Chat ── */
.chat-messages {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 180px; max-height: 340px; overflow-y: auto;
  padding: 12px 8px; background: var(--bg-grad-to); border-radius: 12px;
  margin-top: 12px;
}
.chat-empty { text-align: center; margin: auto; padding: 24px 0; }
.chat-system {
  text-align: center; font-size: .78rem; color: var(--muted);
  background: rgba(255,255,255,.04); border-radius: 999px;
  padding: 3px 14px; align-self: center; max-width: 90%;
}
.chat-bubble {
  max-width: 75%; padding: 8px 12px; border-radius: 16px;
  font-size: .9rem; line-height: 1.4; word-break: break-word;
}
.chat-theirs {
  align-self: flex-start; background: var(--bg-grad-from); border-bottom-left-radius: 4px;
}
.chat-mine {
  align-self: flex-end; background: #1a5c3a; border-bottom-right-radius: 4px;
}
.chat-sender { font-size: .75rem; color: var(--accent); margin-bottom: 2px; font-weight: 600; }
.chat-time   { font-size: .7rem; color: var(--muted); margin-top: 4px; text-align: right; }
.chat-text   { white-space: pre-wrap; }
.chat-send-form {
  display: flex; gap: 8px; margin-top: 10px;
}
.chat-send-form input {
  flex: 1; background: var(--bg-grad-from); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 8px 14px; color: var(--text); font-size: .9rem;
}
.chat-send-form input:focus { outline: none; border-color: var(--accent); }
.chat-send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background-color: #25D366; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.chat-send-btn:hover  { background-color: #1ebe5d; transform: scale(1.05); }
.chat-send-btn:active { transform: scale(.95); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.chat-send-icon {
  width: 18px; height: 18px; fill: #fff;
  transform: translateX(-1px) rotate(-20deg);
}

/* ── Bid card two-column layout: chat (left) + details (right) ── */
.bid-card-body {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
  margin-top: 6px;
}
.bid-card-chat-col { min-width: 0; }
.bid-card-details-col {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .82rem;
}
.bid-detail-item {
  display: flex; justify-content: space-between; gap: 8px;
}
.bid-detail-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.bid-detail-value { font-weight: 600; text-align: right; }
.bid-chat-panel {
  min-height: 80px;
}

/* Unread bid card indicator */
.bid-card-unread {
  border-left: 3px solid #25d366;
}

/* ── Bid margin badge ── */
.bid-margin { font-size: .78rem;  padding: 2px 8px; font-weight: 600; }
.margin-pos { background: rgba(76,175,130,.15); color: var(--success); }
.margin-neg { background: rgba(255,107,107,.15); color: var(--error); }

/* ── Documents (modal thumbnail grid) ── */
.docs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 12px;
  padding: 4px 0;
}
.il-admin-file { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.il-admin-meta { font-size:.75rem; color:var(--text-muted); }
.il-img-edit-form { display:flex; gap:6px; flex-wrap:wrap; width:100%; margin-top:6px; }
.doc-thumb-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--muted);
  background: var(--surface-2); border-radius: 10px; padding: 8px;
  border: 1px solid var(--border); transition: border-color .15s;
}
.doc-thumb-link:hover { border-color: var(--accent); }
.doc-thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 6px; display: block;
}
.doc-thumb-name {
  font-size: .7rem; text-align: center; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-file-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--muted);
  background: var(--surface-2); border-radius: 10px; padding: 12px 8px;
  border: 1px solid var(--border); font-size: .78rem; text-align: center;
  transition: border-color .15s;
}
.doc-file-link:hover { border-color: var(--accent); color: var(--text); }
.doc-file-icon { font-size: 1.6rem; line-height: 1; }

/* ── Modal top row: offer details (left) + bid form (right) ── */
.modal-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 10px;
}
.modal-bid-col {
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid #2a4670;
  border-left: 4px solid #4fc3f7;
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(79,195,247,.05), 0 4px 14px rgba(0,0,0,.3);
}
.modal-bid-heading {
  font-size: .72rem; font-weight: 700; color: #4fc3f7;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.modal-bid-heading::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: #4fc3f7; box-shadow: 0 0 8px #4fc3f7;
}
.modal-details-col {
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

/* ── Chat: full width below the top row ── */
.modal-chat-full {
  border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 10px;
}
.modal-chat-label {
  font-size: .68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}

/* ── Compact bid form ── */
.bid-form-compact {
  background: var(--surface-2); border-radius: 10px; padding: 10px;
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px;
}
.bid-inputs-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.bid-input-group { display: flex; flex-direction: column; gap: 2px; }
.bid-input-label {
  font-size: .65rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600;
}
.bid-input-group input {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text); font-size: .82rem; padding: 5px 6px; width: 100%;
  box-sizing: border-box;
}
.bid-input-group input:focus { outline: none; border-color: var(--accent); }
.bid-input-readonly input { opacity: .65; cursor: default; pointer-events: none; }
.bid-margin-inline {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 5px 6px; font-size: .75rem; min-height: 28px;
  display: flex; align-items: center; color: var(--muted);
}
.bid-notes-row {
  display: flex; gap: 6px; align-items: center;
}
.bid-notes-row input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text); font-size: .82rem; padding: 5px 8px;
}
.bid-notes-row input:focus { outline: none; border-color: var(--accent); }
.bid-submit-btn {
  background: var(--accent); color: var(--bg-grad-to); border: none;
  border-radius: 6px; padding: 5px 12px; font-weight: 700;
  cursor: pointer; font-size: .82rem; white-space: nowrap; flex-shrink: 0;
}
.bid-submit-btn:hover { opacity: .9; }

/* ── Compact chat (full width under bid form) ── */
.chat-messages-compact {
  min-height: 100px; max-height: 180px; overflow-y: auto;
  background: var(--bg-grad-to); border-radius: 8px;
  padding: 6px; display: flex; flex-direction: column; gap: 3px;
}
.chat-messages-compact .chat-bubble {
  padding: 4px 8px; font-size: .78rem; border-radius: 10px;
}
.chat-messages-compact .chat-sender { font-size: .66rem; margin-bottom: 1px; }
.chat-messages-compact .chat-time   { font-size: .62rem; margin-top: 2px; }
.chat-messages-compact .chat-system {
  font-size: .68rem; padding: 2px 8px;
}
.chat-send-compact {
  display: flex; gap: 4px; margin-top: 4px;
}
.chat-send-compact input {
  flex: 1; background: var(--bg-grad-from); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 5px 8px; color: var(--text); font-size: .8rem;
  min-width: 0;
}
.chat-send-compact input:focus { outline: none; border-color: var(--accent); }
.chat-send-compact .chat-send-btn {
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
}
.chat-send-compact .chat-send-icon { width: 14px; height: 14px; }

/* ── Live notification toast ── */
.notif-toast {
  position: fixed; bottom: 80px; right: 20px; z-index: 9999;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: 14px 18px; max-width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  font-size: .88rem; line-height: 1.4;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.notif-toast-show { opacity: 1; transform: translateY(0); }
.notif-toast strong { display: block; margin-bottom: 4px; color: var(--accent); }
.notif-toast-clickable { cursor: pointer; pointer-events: auto; }
.notif-toast-clickable:hover { background: var(--surface-3); }
.notif-toast-hint { font-size: .72rem; color: var(--accent); margin-top: 6px; }

/* ── Chat header button & dropdown ── */
.chat-wrap {
  position: relative;
}
.chat-bell {
  position: relative;
  font-size: 1.1rem;
  padding: 4px 6px;
}
.chat-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 200;
  overflow: hidden;
}
.chat-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .9rem;
}
.chat-dropdown-list {
  max-height: 340px;
  overflow-y: auto;
}
.chat-drop-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.chat-drop-item:last-child { border-bottom: none; }
.chat-drop-item:hover { background: var(--surface-3); }
.chat-drop-title { font-weight: 700; font-size: .85rem; margin-bottom: 3px; color: var(--accent); }
.chat-drop-msg   { font-size: .82rem; color: var(--muted); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-drop-time  { font-size: .72rem; }

/* ── Site footer ── */
.site-footer {
  padding: 20px 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem;
  margin-top: 8px;
}
.footer-link {
  color: var(--muted); text-decoration: none;
}
.footer-link:hover { color: var(--text); }

pre { white-space: pre-wrap; color: var(--muted); }

/* ── Vtiger CRM admin ── */
.vtiger-meta {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; margin-top: 10px;
  padding: 10px 14px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border);
}
.vtiger-modules-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px; margin-top: 8px;
}
.vtiger-module-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: .82rem;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  /* ── Compact mobile density ── */
  .shell { margin: 12px auto; padding-left: 12px; padding-right: 12px; padding-bottom: 100px; }
  .pwa-shell { gap: 12px; font-size: .94rem; }
  .pwa-section { gap: 8px; }
  .offer-slider { gap: 8px; }
  .offer-card { width: 100%; padding: 9px 10px; }
  /* Mobile chrome: compact single-row topbar + search row + 2-row bottom nav */
  .offers-pane { --offers-chrome: 190px; }

  /* ── Bottom nav: two rows of four ── */
  .bottom-nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px 4px;
    padding: 5px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-item { font-size: .66rem; gap: 2px; }
  .bottom-item .icon { font-size: 1rem; }

  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
  .top-menu { flex-direction: row; align-items: center; flex-wrap: wrap; }
  /* Single compact header row: logo + Admin + all action controls side by side,
     search drops to its own row below. Keeps the header short so the main pane
     gets the space back. */
  .topbar { flex-wrap: wrap; padding: 7px 12px 5px; gap: 8px; align-items: center; }
  .brand img { height: 30px; }
  #topMenu .menu-link { padding: 4px 8px; font-size: .85rem; }
  .header-actions { margin-left: auto; gap: 6px; flex-wrap: nowrap; }
  .header-actions .ghost,
  .header-actions .notif-bell { padding: 4px 7px; }
  .sync-chip { padding: 3px 5px; }
  .sync-chip .sync-label { display: none; }   /* dot-only on mobile to save width */
  .profile-avatar { width: 32px; height: 32px; }
  .header-search {
    order: 10;
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 4px;
  }
  .header-search input { min-width: 0; flex: 1; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-card { padding: 16px 14px; border-radius: 14px; }
  .modal-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 1.05rem; }
  .offer-price-val { font-size: 1.15rem; }
  .modal-top-row { grid-template-columns: 1fr; }
  .bid-inputs-row { grid-template-columns: repeat(2, 1fr); }
  .chat-messages-compact { min-height: 100px; max-height: 160px; }
  .bid-card-body { grid-template-columns: 1fr; }
  .bid-card-details-col { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  /* panels full-width on mobile */
  .notif-drop-panel {
    top: 50px !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 12px 12px !important;
    max-height: 75vh !important;
  }
  .cw-panel {
    top: 50px !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 12px 12px !important;
    max-height: 75vh !important;
  }
}

/* ── Notification dropdown panel ─────────────────────────────────────────── */
.notif-widget { z-index: 199; }
.notif-drop-panel {
  position: fixed; top: 58px; right: 18px;
  width: 340px; max-width: calc(100vw - 36px);
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  border: 1px solid var(--border);
  display: none; flex-direction: column;
  max-height: 70vh; overflow: hidden;
  transform-origin: top right;
  animation: cw-pop-in .18s ease;
  z-index: 200;
}
.notif-widget.is-open .notif-drop-panel { display: flex; }
.notif-widget.is-open .cw-backdrop { display: block; }
.notif-drop-list {
  overflow-y: auto; flex: 1; padding: 6px;
}
.notif-drop-list .notif-item {
  padding: 10px 12px; border-radius: 10px; margin-bottom: 4px;
  border-left-width: 3px; font-size: .85rem;
}
.notif-drop-list .notif-title { font-size: .82rem; margin-bottom: 2px; }
.notif-drop-list .notif-msg { font-size: .78rem; }
.notif-drop-list .notif-time { font-size: .68rem; margin-top: 3px; }
.notif-drop-list .notif-open-hint { font-size: .72rem; }
.notif-mark-read {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: .75rem; font-weight: 600; padding: 2px 6px; margin-left: auto;
}
.notif-mark-read:hover { text-decoration: underline; }

/* ── Chat Widget ─────────────────────────────────────────────────────────── */
/* Chat button in header (matches notif-bell) */
.cw-header-btn { position: relative; }

/* Conversation panel — drops down from header */
.cw-widget { z-index: 200; }
.cw-panel {
  position: fixed; top: 58px; right: 18px;
  width: 320px; max-width: calc(100vw - 36px);
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  border: 1px solid var(--border);
  flex-direction: column;
  max-height: 70vh; overflow: hidden;
  transform-origin: top right;
  animation: cw-pop-in .18s ease;
  z-index: 201;
}
.cw-panel { display: none; }
.cw-widget.is-open .cw-panel { display: flex; }
@keyframes cw-pop-in {
  from { opacity: 0; transform: scale(.95) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.cw-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cw-panel-title { font-weight: 700; font-size: .95rem; }
.cw-panel-close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 6px;
}
.cw-panel-close:hover { color: var(--text); background: var(--border); }

/* Conversation list */
.cw-convo-list { overflow-y: auto; flex: 1; }
.cw-loading { padding: 20px 16px; font-size: .85rem; }
.cw-empty { padding: 24px 16px; text-align: center; font-size: .85rem; color: var(--muted); }

.cw-convo {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--surface-2);
  transition: background .12s;
}
.cw-convo:hover { background: var(--bg-grad-from); }
.cw-convo.cw-unread { background: var(--surface-2); }
.cw-convo.cw-unread:hover { background: var(--surface-3); }

/* Avatar circle */
.cw-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); display: flex; align-items: center;
  justify-content: center; font-size: .85rem; font-weight: 700;
  color: var(--accent); text-transform: uppercase;
}

.cw-convo-body { flex: 1; min-width: 0; }
.cw-convo-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.cw-convo-name {
  font-size: .82rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.cw-convo-time { font-size: .68rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.cw-convo-preview {
  font-size: .76rem; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.cw-unread .cw-convo-preview { color: var(--text); }
.cw-unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25d366; flex-shrink: 0; margin-top: 6px;
}

/* Backdrop (mobile) */
.cw-backdrop {
  position: fixed; inset: 0; background: var(--overlay);
  z-index: 198; display: none;
}
.cw-widget.is-open .cw-backdrop { display: block; }

/* ── Biometric / WebAuthn ──────────────────────────────────────────────────── */
.biometric-login-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--accent);
  border-radius: 8px; color: var(--accent);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.biometric-login-btn:hover { background: var(--surface-3); }
.biometric-icon { font-size: 1.1rem; }

.biometric-section { margin-top: 4px; }
.biometric-section-title {
  font-size: .85rem; font-weight: 700; color: var(--text);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}

.biometric-list { display: flex; flex-direction: column; gap: 6px; }
.biometric-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 12px; gap: 10px;
}
.biometric-device-name {
  font-size: .82rem; color: var(--text); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.biometric-device-date { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.biometric-remove-btn {
  background: none; border: 1px solid #e05252;
  color: #e05252; border-radius: 5px; padding: 3px 8px;
  font-size: .72rem; cursor: pointer; flex-shrink: 0;
  transition: background .12s;
}
.biometric-remove-btn:hover { background: rgba(224,82,82,.15); }

.biometric-add-btn {
  margin-top: 10px; font-size: .82rem; padding: 6px 14px;
}

/* ── Transport rate lookup ───────────────────────────────────────────────── */
.rates-lookup-wrap { max-width: 460px; margin: 0 auto; }
.tr-lookup { display: flex; flex-direction: column; gap: 14px; }
.tr-field { display: flex; flex-direction: column; gap: 6px; }
.tr-label { font-size: .72rem; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.tr-select {
  padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border-strong); color: var(--text); font-size: .95rem;
}
.tr-select:disabled { opacity: .5; cursor: not-allowed; }
.tr-rates { border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.02); }
.tr-rates-title { font-size: .72rem; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.tr-rate-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.tr-rate-row:last-of-type { border-bottom: none; }
/* B2 — suggested transport tier highlight */
.tr-rate-row.tr-rate-suggested {
  background: rgba(34, 197, 94, 0.12);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45);
}
.tr-suggest-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.72em;
  font-weight: 600;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.16);
  border-radius: 999px;
  vertical-align: middle;
}
.tr-rate-tier { font-weight: 600; color: var(--text); }
.tr-rate-right { display: inline-flex; align-items: center; gap: 8px; }
.tr-rate-val { font-weight: 700; color: var(--text); }
.tr-rate-na { font-size: .82rem; color: var(--muted); text-align: right; }
.tr-apply { padding: 3px 10px; font-size: .78rem; }
.tr-foot { font-size: .72rem; color: var(--muted); margin-top: 10px; }
.tr-reset { align-self: center; }

/* Transport sub-modal stacks above the offer modal (z-index 50) */
.modal-transport { z-index: 120; }
.tr-modal-card { width: min(460px, 95vw); }
.bid-transport-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.tr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 3px 10px; font-size: .8rem; color: var(--text);
}
.tr-chip-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; }
.tr-chip-clear:hover { color: #ff5566; }

/* Traffic-light bid status badges (A17) */
/* Canonical bid-status traffic light (CIO-approved, v36 A12/A17/C6):
   Placed=Blue (new/awaiting), Accepted=Amber (in progress), Allocated=Green
   (complete), Rejected=Grey. Single source of truth for trader + admin badges. */
.badge-placed       { background: #1565c0; color: #fff; }
.badge-accepted-tl  { background: #ef6c00; color: #fff; }
.badge-allocated    { background: #2e7d32; color: #fff; }
.badge-rejected-tl  { background: #555;    color: #fff; }

/* Admin offer stock-code typeahead */
.typeahead-wrap { position: relative; display: block; }
.typeahead-dropdown {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px;
  margin-top: 2px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 12px 24px rgba(0,0,0,.4);
}
.typeahead-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.05);
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover { background: rgba(255,255,255,.06); }
.ta-code { font-weight: 700; color: var(--text); font-size: .9rem; }
.ta-desc { color: var(--muted); font-size: .82rem; }

/* Recent Sales — per-month average chips */
.idt-monthly {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  flex-wrap: wrap;
}
.idt-month {
  flex: 1 1 0;
  min-width: 86px;
  padding: 6px 8px;
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.25);
  border-radius: 6px;
  text-align: center;
  font-size: .82rem;
  line-height: 1.25;
}
.idt-month-period { font-weight: 600; color: var(--accent, #4fc3f7); }
.idt-month-avg    { font-weight: 600; font-size: .95rem; margin-top: 2px; }
.idt-month-txns   { font-size: .72rem; margin-top: 1px; }
.idt-month-empty .idt-month-avg { color: var(--muted, #888); font-weight: 400; }

/* ── Sync chip (BACKLOG #15 realtime auto-refresh) ──────────────────────── */
.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.55rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.75rem;
  line-height: 1.2;
  color: #555;
  user-select: none;
  vertical-align: middle;
}
.sync-chip .sync-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #95a5a6;
  flex: 0 0 auto;
}
.sync-chip--ok      .sync-dot { background: #2ecc71; }
.sync-chip--stale   .sync-dot { background: #f39c12; }
.sync-chip--offline .sync-dot { background: #95a5a6; }
.sync-chip--ok      { color: #2c7a4b; }
.sync-chip--stale   { color: #8a5a00; }
.sync-chip--offline { color: #555;    }

@media (max-width: 480px) {
  .sync-chip .sync-label { display: none; }
  .sync-chip { padding: 0.15rem 0.35rem; }
}

/* ── BACKLOG #16: Watermark + deterrents + SOP modal ────────────────────── */

body.app-sensitive {
  -webkit-touch-callout: none;
}

body.app-sensitive::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.11;
  background-image: var(--watermark-svg);
  background-repeat: repeat;
  background-size: 420px 180px;
}

@media print {
  body.app-sensitive * { visibility: hidden !important; }
  body.app-sensitive::before {
    content: 'Printing disabled by Acceptable Use policy.';
    position: fixed;
    inset: 0;
    padding: 2rem;
    color: #000;
    background: #fff;
    visibility: visible !important;
    opacity: 1 !important;
    mix-blend-mode: normal;
    font: 1rem system-ui, sans-serif;
  }
}

/* SOP modal */
.sop-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
.sop-modal[hidden] { display: none; }
.sop-modal__sheet {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.sop-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
}
.sop-modal__body iframe {
  width: 100%;
  height: 60vh;
  border: 0;
  display: block;
}
.sop-modal__ack {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
}
.sop-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #eee;
}
.sop-modal__actions button {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 0;
  background: #2c7a4b;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
}
.sop-modal__actions button:disabled {
  background: #bbb;
  cursor: not-allowed;
}
.sop-modal__actions button.ghost {
  background: transparent;
  color: #444;
  border: 1px solid #ccc;
}

/* Deterrent toast — minimal, self-contained */
.deterrent-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10001;
  pointer-events: none;
  white-space: nowrap;
}
.deterrent-toast--show { opacity: 1; }

/* ── BACKLOG #13: Forward Stock view ────────────────────────────────────── */
.forward-stock-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.forward-stock-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
}
.scenario-toggle label {
  margin-right: 0.75rem;
  font-size: 0.85rem;
  color: var(--text);
}
.forward-stock-controls input[type=search] {
  flex: 1;
  min-width: 200px;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--surface-3);
  border-radius: 6px;
}
.forward-stock-controls .export-group button {
  margin-left: 0.25rem;
}

.forward-stock-grid {
  overflow-x: auto;
  border: 1px solid var(--surface-3);
  border-radius: 6px;
  background: var(--panel);
  margin-top: 0.5rem;
}
.fs-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
  color: var(--text);
}
.fs-table th, .fs-table td {
  border-bottom: 1px solid var(--surface-3);
  padding: 0.5rem 0.7rem;
  text-align: right;
  white-space: nowrap;
}
.fs-table th {
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.fs-th-week  { font-size: 0.78rem; color: var(--accent); }
.fs-th-month { color: var(--muted); }
.fs-stock {
  text-align: left !important;
  font-weight: 600;
  background: var(--panel);
  color: var(--text);
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--surface-3);
}
.fs-cell { cursor: pointer; }
.fs-cell--green   { background: rgba(46, 204, 113, 0.28); color: #b6f5cf; }
.fs-cell--amber   { background: rgba(243, 156, 18, 0.32); color: #ffe0a8; }
.fs-cell--red     { background: rgba(231, 76, 60, 0.36);  color: #ffd0c8; }
.fs-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.forward-stock-drilldown {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--surface-3);
  border-radius: 6px;
}
.fs-dd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.fs-dd-header h3 { margin: 0; color: var(--text); }
.fs-dd-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.fs-dd-close:hover { color: var(--text); }
.fs-dd-actions { color: var(--text); }
.fs-dd-actions ul { margin: 0.25rem 0 0.75rem 1.2rem; padding: 0; }
.fs-dd-chart { margin: 0.75rem 0; color: var(--text); }
.fs-dd-chart svg rect { fill: rgba(255,255,255,0.04); stroke: var(--surface-3); }
.fs-dd-chart svg path { stroke: var(--accent); }
.fs-dd-chart svg text { fill: var(--muted); }
.fs-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.75rem 0;
}
.fs-dd-pane { font-size: 0.85rem; color: var(--text); }
.fs-dd-pane strong { color: var(--accent); }
.fs-dd-pane table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.fs-dd-pane th, .fs-dd-pane td {
  border-bottom: 1px solid var(--surface-3);
  padding: 0.4rem 0.5rem;
  text-align: left;
}
.fs-dd-pane th { color: var(--muted); font-weight: 600; }

.bid-eta-input {
  font-size: 0.85rem;
  padding: 0.2rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--surface-3);
  border-radius: 4px;
}
.bid-eta-input.bid-eta-saved { background: rgba(46, 204, 113, 0.25); transition: background 0.5s; }
.bid-eta-input.bid-eta-error { background: rgba(231, 76, 60, 0.30); transition: background 0.5s; }

@media (max-width: 800px) {
  .fs-dd-grid { grid-template-columns: 1fr; }
}

/* ── Bid Fulfilment ─────────────────────────────────────────────── */
.fulfilment-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fulfilment-controls { display: flex; gap: 8px; }
.fulfilment-flag { color: #e6b800; font-style: normal; font-weight: 600; }
.fulfilment-pager { display: flex; gap: 12px; align-items: center; margin-top: 10px; }

.fulfilment-panel {
  margin-top: 16px; padding: 16px; border: 1px solid var(--surface-3);
  border-radius: 8px; background: var(--panel);
}
.fulfilment-panel-head { display: flex; justify-content: space-between; align-items: center; }
.fulfilment-credit {
  margin: 10px 0; padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--surface-3); font-size: .9rem;
}
.fulfilment-credit--warn { border-color: #c0392b; background: rgba(192,57,43,0.12); }
.fulfilment-field { display: block; margin: 10px 0; }
.fulfilment-field > span { display: block; margin-bottom: 4px; font-size: .85rem; color: var(--muted); }
.fulfilment-field input, .fulfilment-field textarea {
  width: 100%; box-sizing: border-box; background: var(--bg);
  color: var(--text); border: 1px solid var(--surface-3); border-radius: 6px; padding: 8px;
}
.fulfilment-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ── Market per-customer pricing ─────────────────────────────────── */
.market-setall { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.market-setall input { width: 120px; }
.market-customer-row .market-price {
  width: 92px; margin-left: auto; text-align: right;
}
.market-price--below { border-color: #e6b800; background: rgba(230,184,0,0.12); }

/* ── Generic stock codes panel ───────────────────────────────────── */
.generic-codes-panel > summary { cursor: pointer; padding: 6px 0; }
.generic-codes-panel { margin-bottom: 16px; }

/* ── Procurement HM assignment ───────────────────────────────────── */
.procurement-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.proc-hm-input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--surface-3); border-radius: 6px; padding: 6px 8px;
}

/* Collapsible offer-form sections (Unit A) */
.offer-section { border: 1px solid var(--border); border-radius: 10px; margin: 0 0 12px; padding: 0 12px 12px; }
.offer-section > summary { cursor: pointer; font-weight: 700; padding: 12px 0; color: var(--text); list-style: none; }
.offer-section > summary::-webkit-details-marker { display: none; }
.offer-section > summary::before { content: '▸ '; color: #7e93b3; }
.offer-section[open] > summary::before { content: '▾ '; }

/* ── Image Library (public gallery) ──────────────────────────────── */
/* The grid's children are now kind sections, not cards, so the column layout
   moved down to .il-section-cards. The container just stacks the sections. */
.image-library-grid { display:flex; flex-direction:column; gap:18px; padding:12px; }
.il-section { display:flex; flex-direction:column; gap:8px; }
.il-section-title {
  font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--border); padding-bottom:4px;
}
.il-section-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width: 900px) { .il-section-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px) { .il-section-cards { grid-template-columns:1fr; } }
.il-pin { margin-right:4px; }
.il-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; background:var(--surface-2); }
.il-cover { width:100%; height:120px; object-fit:cover; display:block; }
.il-cover-empty { display:flex; align-items:center; justify-content:center; font-size:2rem; color:#3a4a66; }
.il-meta { padding:8px; }
.il-code { font-weight:700; font-size:.85rem; }
.il-desc { font-size:.8rem; color:var(--text); }
.il-types { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
.il-type-chip {
  display:inline-flex; align-items:center; gap:3px;
  font-size:.78rem; font-variant-numeric:tabular-nums;
  padding:1px 6px; border:1px solid var(--border-strong); border-radius:999px;
  color:var(--text-muted); background:var(--surface);
}
.il-no-current { font-size:.78rem; }
.il-note {
  margin-top:6px; font-size:.78rem; color:var(--text-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.il-expanded { display:flex; flex-direction:column; gap:10px; padding:8px; }
.il-group { display:flex; flex-direction:column; gap:4px; }
.il-group-title { font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); }
/* One file per row rather than a wrapping filmstrip: the row has to hold a
   thumbnail, the Send WA tick and a filename long enough to tell two spec
   sheets apart, and none of that survives a 120px tile. */
.il-group-files { display:flex; flex-direction:column; gap:6px; }
.il-pick { display:flex; align-items:center; gap:6px; flex:0 0 auto; cursor:pointer; }
.il-pick-label { font-size:.75rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.il-pick-box { cursor:pointer; }
.il-pick-box:disabled { cursor:not-allowed; }
.il-send-bar { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:6px; border-top:1px solid var(--border); }
.il-send-count { font-size:.75rem; color:var(--text-muted); }
.il-send-btn { font-size:.8rem; padding:4px 10px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-contrast); cursor:pointer; }
/* Filename stacked above the thumb+tick row. min-width:0 on every level so a
   long filename ellipsises instead of pushing the row past the card edge. */
.il-file {
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:6px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
}
.il-file-row { display:flex; align-items:center; gap:10px; min-width:0; }
/* Fixed square so a portrait photo, a landscape photo and a document icon all
   line up down the left edge. object-fit:cover crops rather than letterboxes. */
.il-file-thumb {
  flex:0 0 auto; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid var(--border); border-radius:6px; background:var(--surface);
}
.il-file-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.il-file-doc { font-size:1.6rem; line-height:1; }
.il-file-name { font-size:.8rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.il-file-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.il-file-expired { opacity:.55; }
.il-valid { font-size:.7rem; color:var(--text-muted); white-space:nowrap; }
.il-expired-badge { font-size:.65rem; }
.il-file-note { font-size:.7rem; color:var(--text-muted); overflow-wrap:anywhere; }
/* ── Trader's own procurement requests (N3) ───────────────────────── */
.proc-req-mine { padding:0 12px 16px; }
.proc-req-mine-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:16px 0 8px; }
.proc-req-list { display:flex; flex-direction:column; gap:6px; }
.proc-req-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:var(--surface-2);
}
.proc-req-main { flex:1 1 200px; min-width:0; font-size:.85rem; }
.proc-req-meta { flex:1 1 100%; font-size:.72rem; }
.proc-req-status { flex:0 0 auto; }

/* ── Requirements tabs + procurement status (N3) ──────────────────── */
.req-tabs { display:flex; gap:4px; margin:0 0 14px; border-bottom:1px solid var(--border); }
.req-tab {
  border:0; background:none; cursor:pointer; padding:8px 14px;
  font-size:.85rem; font-weight:600; color:var(--text-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.req-tab:hover { color:var(--text); }
.req-tab.is-active { color:var(--accent); border-bottom-color:var(--accent); }
.req-tab-count { font-variant-numeric:tabular-nums; opacity:.75; }
.proc-status { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.proc-status-select {
  font-size:.78rem; padding:3px 8px; border-radius:6px;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
}
.proc-status-meta { font-size:.7rem; white-space:nowrap; }

/* ── Offers header: search + Closed toggle (M3) ───────────────────── */
.offers-header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.offers-header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; min-width:0; }
.offers-search { max-width:220px; min-width:0; }
.offers-closed-toggle {
  flex:0 0 auto; font-size:.78rem; font-weight:600; padding:5px 12px;
  border-radius:999px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-muted);
}
.offers-closed-toggle:hover { color:var(--text); }
.offers-closed-toggle.is-active {
  border-color:var(--accent); background:var(--accent); color:var(--accent-contrast);
}
@media (max-width: 560px) {
  .offers-header-tools { width:100%; margin-left:0; }
  .offers-search { max-width:none; flex:1 1 auto; }
}

/* ── My Bids: resubmitted section (N2) ────────────────────────────── */
.bids-section-title {
  font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); margin:14px 0 6px; padding-bottom:4px;
  border-bottom:1px solid var(--border);
}
.bids-section-title:first-child { margin-top:0; }
.bids-section-title .muted { text-transform:none; letter-spacing:0; font-weight:600; }
.bid-resubmitted-note { font-size:.75rem; color:var(--accent); margin-top:4px; }

/* ── App Settings (admin) ─────────────────────────────────────────── */
.settings-group { border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:0 0 14px; }
.settings-group legend { font-weight:700; font-size:.85rem; padding:0 6px; color:var(--text); }
.settings-row {
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.settings-row:last-child { border-bottom:0; }
.settings-label { flex:1 1 260px; min-width:0; }
.settings-label label { font-weight:600; font-size:.9rem; }
.settings-help { font-size:.75rem; color:var(--text-muted); margin-top:2px; }
.settings-control { flex:0 1 280px; display:flex; flex-direction:column; gap:4px; }
.settings-control input[type="text"], .settings-control input[type="number"], .settings-control select { width:100%; }
.settings-check { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; }
.settings-provenance { font-size:.7rem; color:var(--text-muted); }

/* ── Trader Offers ────────────────────────────────────────────────── */
.to-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px; flex-wrap:wrap; }
.trader-offers-list { display:flex; flex-direction:column; gap:10px; padding:0 12px 16px; }
.to-card { border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--surface-2); }
.to-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.to-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(147,112,219,.18); color:#c9b6ff; border:1px solid rgba(147,112,219,.45); border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; }
.to-desc { font-weight:600; margin-bottom:6px; }
.to-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:.85rem; color:var(--text); margin-bottom:8px; }
.to-interest { margin-top:10px; border-top:1px solid var(--border); padding-top:10px; }
.to-interest-row { display:flex; justify-content:space-between; gap:8px; font-size:.85rem; padding:4px 0; border-bottom:1px solid #16223a; }

/* ── LOT Report (trader) ──────────────────────────────────────────── */
.lot-trader-table-wrap { overflow-x: auto; }
.lot-trader-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lot-trader-table th, .lot-trader-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.lot-trader-table th { color: #9fb3d1; font-weight: 700; position: sticky; top: 0; background: var(--surface-2); }
/* Leading identifier column — tabular figures so HM codes line up down the page.
   Shared by the trader Stock Reports table and the admin LOT Report table. */
.lot-trader-table td.lot-hm,
.admin-table td.lot-hm { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ── Frozen HM column (LOT + Forward & Unsold) ──────────────────────────────
   Both tables are far wider than any screen, so the row's identifier scrolls out
   of sight exactly when you need it to read the row. Pin it. Opt-in via
   .has-sticky-col so the Geo Pricing tab, which shares this table class but leads
   with Region, is not silently changed too.

   .lot-trader-table-wrap is the scroll container on desktop and mobile alike, so
   one rule covers both — no media query needed.

   The cells need an opaque background: the page behind them is a gradient, so a
   transparent sticky cell would show the other columns sliding underneath. Reusing
   --surface-2 also matches the sticky header, which makes the top-left corner cell
   seamless and reads as "this column is pinned". */
.lot-trader-table.has-sticky-col th:first-child,
.lot-trader-table.has-sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-2);
  /* border-collapse: collapse drops a sticky cell's own right border, so draw the
     column edge with a shadow — it survives the horizontal scroll. */
  box-shadow: 1px 0 0 var(--border);
}
/* Layering, lowest to highest: body cells < frozen column (1) < sticky header row
   (2) < the corner cell that is both (3). Without this the frozen column paints
   over the header it is supposed to sit under. */
.lot-trader-table.has-sticky-col thead th { z-index: 2; }
.lot-trader-table.has-sticky-col thead th:first-child { z-index: 3; }
.lot-trader-foot { margin-top: 8px; font-size: 12px; }

.search-bid-card { cursor: pointer; transition: background .15s ease; }
.search-bid-card:hover { background: rgba(255,255,255,.04); }
.bid-card-flash { animation: bidCardFlash 1.6s ease-out; }
@keyframes bidCardFlash {
  0%, 100% { background: transparent; }
  15% { background: rgba(74,170,150,.28); }
}

/* ── Appearance / theme toggle ────────────────────────────────────── */
.theme-toggle { display: inline-flex; gap: 6px; }
.theme-opt {
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border-strong); padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: .85rem;
}
.theme-opt:hover { color: var(--text); }
.theme-opt.active {
  background: var(--accent); color: var(--accent-contrast);
  border-color: var(--accent); font-weight: 600;
}

/* ── Push opt-in banner ────────────────────────────────────────────────────────
   Shown once per device when notification permission is still unanswered. Tokenised
   throughout so it follows the light/dark theme from Phase 18 — a hardcoded colour here
   was the exact shape of the M4 regressions. */
.push-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; font-size: .9rem; color: var(--text);
}
.push-banner-text { flex: 1 1 240px; }
.push-banner-actions { display: flex; align-items: center; gap: 8px; }
.push-banner-cta {
  background: var(--accent); color: var(--accent-contrast);
  border: 0; border-radius: 8px; padding: 6px 14px;
  font-weight: 600; font-size: .85rem; cursor: pointer;
}
.push-banner-cta:hover:not(:disabled) { filter: brightness(1.08); }
.push-banner-cta:disabled { opacity: .6; cursor: default; }
.push-banner-x {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 1rem; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 6px;
}
.push-banner-x:hover { color: var(--text); background: var(--surface); }

/* ── Stock Reports tabs (LOT / Geo Pricing / Forward & Unsold) ─────────────────
   Three sibling reports under one nav entry. Tokenised so both themes follow — a
   hardcoded colour here is the shape of the M4 light-mode regressions. */
.stock-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: 0 0 14px; padding-bottom: 8px;
}
.stock-tab {
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--text-muted); font-size: .9rem; font-weight: 600;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.stock-tab:hover { color: var(--text); background: var(--surface-2); }
.stock-tab.is-active {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}
.stock-pane-controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
}
.stock-pane-controls select {
  width: auto; min-width: 190px; margin-top: 0; padding: 8px 11px;
  border-radius: 8px; font-size: .875rem;
}
/* Empty state for a report whose data source does not exist yet. Says so plainly, so a
   user does not read a blank table as a loading failure. */
.stock-empty-state {
  text-align: center; padding: 44px 20px;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2);
}
.stock-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.stock-empty-state h3 { margin: 0 0 6px; font-size: 1rem; }
.stock-empty-state p { margin: 0 auto; max-width: 34rem; font-size: .875rem; }
/* Flag chips on a geo row — same review markers the admin import screen uses. */
.geo-flag {
  display: inline-block; font-size: .68rem; padding: 1px 6px; border-radius: 999px;
  background: rgba(245,158,11,.16); color: #fbbf24; white-space: nowrap;
}
.geo-unit-none { color: var(--text-muted); font-style: italic; }

/* Stock-type chip on the Forward & Unsold tab. FORWARD is on order; INTRANSIT is already
   shipping — different enough operationally to be worth telling apart at a glance. */
.fwd-type {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border);
}
.fwd-type--forward   { background: rgba(246,176,59,.16); color: #f6b03b; border-color: rgba(246,176,59,.4); }
.fwd-type--intransit { background: rgba(79,195,247,.16); color: #4fc3f7; border-color: rgba(79,195,247,.4); }

/* ── Market modal: customer filter + grouping ── */
.market-filter { width: 100%; margin: 8px 0 4px; }
.market-group-head {
  margin: 12px 0 4px; padding: 4px 0 3px;
  border-bottom: 1px solid var(--border);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
}
.market-hidden-note {
  margin: 4px 0 0; padding: 5px 8px; border-radius: 6px;
  background: rgba(246,176,59,.14); color: var(--warn);
  font-size: .78rem;
}

/* ── Customer contacts ── */
.cc-count {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
  border-radius: 8px; background: var(--surface-3); color: var(--text-muted);
  font-size: 10px; line-height: 16px; text-align: center;
}
.cc-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cc-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--surface-2);
}
.cc-card-head { display: flex; align-items: center; gap: 8px; }
.cc-card-name { font-weight: 600; }
.cc-primary-chip {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(76,175,130,.18); color: var(--success);
}
.cc-card-chans { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: .82rem; }
.cc-chan { white-space: nowrap; color: var(--text-muted); }
.cc-card-actions { display: flex; gap: 6px; margin-top: 6px; }
.cc-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cc-field { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--text-muted); }
.cc-field input {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 8px; font-size: .95rem;
}
.cc-field input:focus { border-color: var(--accent); outline: none; }
.cc-check { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.cc-form-actions { display: flex; gap: 8px; }
.cc-add { align-self: flex-start; }

/* ── WhatsApp contact picker (Market modal + Image Library send dialog) ── */
.wa-contact { font-size: .8rem; }
.wa-contact-select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 2px 6px; max-width: 100%;
}
.wa-contact-one { color: var(--text-muted); }

/* ── Offline mode ─────────────────────────────────────────────────────────── */
.offline-bar {
  padding: 8px 14px;
  background: var(--warn-bg, #4a3410);
  color: var(--warn-fg, #ffd28a);
  border-bottom: 1px solid var(--warn-border, #7a5410);
  font-size: 0.85rem;
  text-align: center;
}
.offline-nodata {
  margin: 40px auto;
  max-width: 32rem;
  padding: 24px;
  text-align: center;
  line-height: 1.5;
  color: var(--muted, #9aa4b2);
}
.chat-send-error {
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--warn-fg, #ffd28a);
  background: var(--warn-bg, #4a3410);
  border-top: 1px solid var(--warn-border, #7a5410);
}
body.is-offline [disabled][data-requires-online],
body.is-offline .bid-accept-btn[disabled],
body.is-offline .bid-reject-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}