/* stock-supply-theme.css - ONE look for every Stock & Supply page (5 Oct 2026)
 *
 * Loaded last in <head> (with ss-page.js, which adds html.ss-theme) on:
 *   stock.html, b2b-orders.html, purchase-orders.html, products.html, price-books.html
 * It RESTYLES those pages to match the Stock & Supply home (stock-supply.html):
 * the dark Grid theme, bigger type, pill tabs, cards, one red action button.
 * It changes no page logic. Everything is scoped under html.ss-theme, so
 * removing the two <head> lines puts a page back exactly as it was.
 */
html.ss-theme {
  /* every variable family the five pages use -> the home page palette */
  --bg: #111111; --page: #111111;
  --card: #1a1a1a; --card2: #222222;
  --border: #2a2a2a; --line: #2a2a2a; --line2: #333333;
  --text: #D4D4D4; --body: #D4D4D4; --heading: #F5F5F5; --muted: #A3A3A3;
  --sh: none; --sh-md: 0 8px 30px rgba(0,0,0,.55);
  --r: 10px; --r-lg: 16px;
  --ss-red: #C8102E; --ss-red-hover: #a50d26; --ss-hot: #FF6B7F;
  color-scheme: dark;
}
html.ss-theme body { background: #111111; color: var(--body); font-size: 14.5px; }

/* ---------- header: "<- Stock & Supply" + big title ---------- */
html.ss-theme .crumb { display: none !important; }
html.ss-theme .ss-head { display: flex; flex-direction: column; gap: 2px; }
html.ss-theme .ss-back {
  width: fit-content;
  display: flex; align-items: center; gap: 6px; min-height: 32px;
  font-size: 14px; font-weight: 600; color: var(--heading); text-decoration: none;
}
html.ss-theme .ss-back:hover, html.ss-theme .ss-back:focus-visible { color: var(--ss-hot); }
html.ss-theme .topbar {
  background: transparent !important; border-bottom: none !important; box-shadow: none !important;
  height: auto !important; min-height: 0; padding: 20px 28px 8px; flex-wrap: wrap; position: static;
}
html.ss-theme .tb-title, html.ss-theme .topbar h1, html.ss-theme .bl-title {
  font-size: 28px !important; font-weight: 700; color: var(--heading); letter-spacing: -0.01em;
}
html.ss-theme .topbar .sub { font-size: 14px; color: var(--muted); margin-top: 2px; }

/* ---------- tabs -> big pills ---------- */
html.ss-theme .tabs {
  background: transparent !important; border-bottom: none !important;
  padding: 6px 28px 12px; gap: 8px; flex-wrap: wrap;
}
html.ss-theme .tab {
  border: 1px solid var(--line2) !important; border-radius: 999px !important;
  background: var(--card) !important; color: var(--heading) !important;
  padding: 0 18px !important; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px !important; font-weight: 600 !important; margin: 0 !important;
}
html.ss-theme .tab:hover { background: #262626 !important; }
html.ss-theme .tab.active { background: #F2F2F2 !important; color: #121212 !important; border-color: #F2F2F2 !important; }
html.ss-theme .tab-badge, html.ss-theme .tab .n {
  background: rgba(255,255,255,.08) !important; color: inherit !important; opacity: 1 !important;
  border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700;
}
html.ss-theme .tab.active .tab-badge, html.ss-theme .tab.active .n { background: rgba(0,0,0,.12) !important; }

/* ---------- figures (stat cards / KPI strips) ---------- */
html.ss-theme .stat-card, html.ss-theme .kpi {
  background: var(--card) !important; border: 1px solid var(--line) !important;
  border-radius: 14px !important; padding: 16px 18px !important; box-shadow: none !important;
}
html.ss-theme .kpi::after { display: none; }
html.ss-theme .sc-label, html.ss-theme .kpi-lbl { font-size: 12px !important; color: var(--muted) !important; letter-spacing: .06em; }
html.ss-theme .sc-value, html.ss-theme .kpi-val { font-size: 30px !important; font-weight: 700 !important; color: var(--heading); }
html.ss-theme .sc-sub, html.ss-theme .kpi-sub { font-size: 12.5px !important; color: var(--muted); }
html.ss-theme .stat-grid { gap: 12px !important; }

/* ---------- cards, panels, tables ---------- */
html.ss-theme .card, html.ss-theme .table-wrap {
  background: var(--card) !important; border: 1px solid var(--line) !important;
  border-radius: 16px !important; box-shadow: none !important;
}
html.ss-theme .card-title, html.ss-theme .table-title { font-size: 16px !important; font-weight: 700; color: var(--heading); }
html.ss-theme table { font-size: 14px; }
html.ss-theme th { font-size: 11.5px !important; color: var(--muted) !important; border-bottom: 1px solid var(--line) !important; background: transparent; }
html.ss-theme td { padding: 12px 14px; border-bottom: 1px solid var(--line) !important; color: var(--body); }
html.ss-theme tr:hover td { background: #1f1f1f !important; }
html.ss-theme .content { padding-left: 28px; padding-right: 28px; }

/* ---------- buttons: one red action, everything else quiet ---------- */
html.ss-theme .btn {
  min-height: 40px; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important;
  padding: 8px 16px; background: var(--card2); color: var(--heading); border: 1px solid var(--line2);
}
html.ss-theme .btn:hover { background: #2a2a2a; }
html.ss-theme .btn-primary, html.ss-theme .btn.primary {
  background: var(--ss-red) !important; border-color: var(--ss-red) !important; color: #fff !important;
}
html.ss-theme .btn-primary:hover, html.ss-theme .btn.primary:hover { background: var(--ss-red-hover) !important; }
html.ss-theme .btn-sm { min-height: 34px; font-size: 13px !important; padding: 6px 12px; }
html.ss-theme .btn-outline, html.ss-theme .btn.outline { background: transparent !important; border: 1px solid var(--line2) !important; color: var(--heading) !important; }
html.ss-theme .btn:focus-visible, html.ss-theme .tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- form controls ---------- */
html.ss-theme input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.ss-theme select, html.ss-theme textarea {
  background: var(--card2); color: var(--heading); border: 1px solid var(--line2);
}
html.ss-theme input::placeholder, html.ss-theme textarea::placeholder { color: #8a8a8a; }

/* ---------- light colours written inline by the light pages' scripts ---------- */
html.ss-theme [style*="background:#fff"], html.ss-theme [style*="background: #fff"],
html.ss-theme [style*="background:#FFF"], html.ss-theme [style*="background:white"],
html.ss-theme [style*="background:#fafafa"], html.ss-theme [style*="background:#f9fafb"],
html.ss-theme [style*="background:#f4f4f5"], html.ss-theme [style*="background:#f3f4f6"],
html.ss-theme [style*="background:#f0f0f3"], html.ss-theme [style*="background:#f8fafc"] { background: var(--card2) !important; }
html.ss-theme [style*="color:#111"], html.ss-theme [style*="color:#222"],
html.ss-theme [style*="color:#374151"], html.ss-theme [style*="color:#1f2937"] { color: var(--heading) !important; }

/* ---------- B2B Orders (was the light theme) ---------- */
html.ss-theme body.ss-b2b-orders .main { padding: 20px 28px; }
html.ss-theme body.ss-b2b-orders .topbar, html.ss-theme body.ss-b2b-orders .tabs { padding-left: 0; padding-right: 0; }
html.ss-theme #dash { gap: 12px !important; margin-bottom: 18px !important; }
html.ss-theme #dash .card { padding: 16px 18px !important; }
html.ss-theme #dash .card > div:first-child { font-size: 30px !important; font-weight: 700 !important; }
html.ss-theme #dash .card > div:last-child { font-size: 12px !important; letter-spacing: .06em !important; }
html.ss-theme .olist .row { padding: 14px 16px; font-size: 15px; }
html.ss-theme .olist .row:hover { background: #222222; }
html.ss-theme .olist .row.sel { background: #2a1418; border-left: 3px solid var(--ss-red); }
html.ss-theme .detail h2 { font-size: 22px; }
html.ss-theme .lines th { font-size: 11.5px; }
html.ss-theme .lines td { font-size: 14px; }
html.ss-theme .limg { background: #ffffff; }            /* product photos stay on white */
html.ss-theme .b-requested { background: #3A2A12; color: #F5C27A; }
html.ss-theme .b-confirmed { background: #12263f; color: #8fbff5; }
html.ss-theme .b-picking   { background: #261a3d; color: #c9b2f5; }
html.ss-theme .b-dispatched{ background: #123020; color: #8FDCA8; }
html.ss-theme .b-completed { background: #2a2a2a; color: #cfcfcf; }
html.ss-theme .b-declined  { background: #3f1418; color: #f7a1aa; }
html.ss-theme .b-int       { background: #F2F2F2; color: #121212; }
html.ss-theme .btn.green   { background: #1E6B3A !important; color: #fff !important; border-color: #1E6B3A !important; }
html.ss-theme .field label { font-size: 12px; }
html.ss-theme .field input, html.ss-theme .field select { min-height: 44px; font-size: 14px; }

/* ---------- Purchase Orders (was the light theme) ---------- */
html.ss-theme body.ss-purchase-orders .main { background: #111111; }
html.ss-theme body.ss-purchase-orders .kpi-strip { gap: 12px; }

/* ---------- Price Books (two-pane page, no topbar) ---------- */
html.ss-theme body.ss-price-books .bl-header { padding: 18px 16px 12px; }
html.ss-theme .book-row { padding: 14px 16px; }
html.ss-theme .book-row-name { font-size: 15px; }
html.ss-theme .book-row-cust { font-size: 13px; }

/* ---------- modals / drawers on all five pages ---------- */
html.ss-theme .modal, html.ss-theme .drawer, html.ss-theme .modal-box {
  background: var(--card) !important; color: var(--body); border: 1px solid var(--line2);
}