/* /css/warehouse.css — one design system for the whole Warehouse module.
 *
 * Every warehouse page (directory, facility, operator console, my storage,
 * lot, receipt) loads this instead of carrying its own <style> block, so the
 * cards, badges and status colours stay in step across the module.
 *
 * Palette follows the platform brand tokens; the module accent is the
 * warehouse teal-blue, distinct from Trader blue and Farmer green so a user
 * can tell at a glance which surface they are on.
 */

:root {
  --wh-brand: #0971A8;
  --wh-brand-d: #0a4d73;
  --wh-accent: #F38D16;
  --wh-accent-d: #b45309;
  --wh-green: #16a34a;
  --wh-green-d: #15803d;
  --wh-rose: #e11d48;
  --wh-ink: #0f172a;
  --wh-muted: #64748b;
  --wh-line: #e6edf5;
  --wh-bg: #f0f6fb;
  --wh-card: #fff;
  --wh-radius: 14px;
  --wh-shadow: 0 6px 20px rgba(9, 113, 168, .07);
}

body.wh-body {
  background: var(--wh-bg);
  color: var(--wh-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 16px keeps iOS Safari from zooming the viewport on focus. */
.wh-body input,
.wh-body select,
.wh-body textarea { font-size: 16px; }

/* ── Page head ─────────────────────────────────────────────────────────── */
.wh-head { margin-bottom: 16px; }
.wh-head__t { display: flex; align-items: center; gap: 11px; }
.wh-head__ico {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 12px; background: #e8f2f9; color: var(--wh-brand-d);
  font-size: 1.35rem;
}
.wh-head h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.wh-head p { margin: .2rem 0 0; font-size: .86rem; color: var(--wh-muted); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.wh-card {
  background: var(--wh-card);
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow);
  overflow: hidden;
  margin-bottom: 14px;
}
.wh-card__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 14px 16px 11px; border-bottom: 1px solid var(--wh-line);
}
.wh-card__body { padding: 13px 16px; }
.wh-card__foot {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px 14px; border-top: 1px solid var(--wh-line); background: #fbfdff;
}
.wh-card__title { font-size: 1rem; font-weight: 800; line-height: 1.3; }
.wh-card__title a { color: inherit; text-decoration: none; }
.wh-card__title a:hover { color: var(--wh-brand); }
.wh-card__sub { font-size: .76rem; color: var(--wh-muted); margin-top: 3px; }

.wh-facility-ico {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center; border-radius: 12px;
  background: #eef6fb; font-size: 1.45rem;
}

/* ── Meta rows ─────────────────────────────────────────────────────────── */
.wh-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: .78rem; color: var(--wh-muted); }
.wh-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wh-meta .bi { color: var(--wh-brand); }

.wh-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 11px 14px; }
.wh-kv__k { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wh-muted); }
.wh-kv__v { font-size: .9rem; font-weight: 700; margin-top: 1px; word-break: break-word; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.wh-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; white-space: nowrap;
}
.wh-badge--ok    { background: #dcfce7; color: var(--wh-green-d); }
.wh-badge--warn  { background: #fff2e2; color: var(--wh-accent-d); }
.wh-badge--info  { background: #e8f2f9; color: var(--wh-brand-d); }
.wh-badge--bad   { background: #ffe4e6; color: var(--wh-rose); }
.wh-badge--muted { background: #eef2f6; color: #475569; }

/* The marketplace trust mark for stock sitting in a verified facility. */
.wh-verified {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: #e8f7ef; color: var(--wh-green-d);
  font-size: .7rem; font-weight: 800; border: 1px solid #bbe7cd;
}

/* ── Capacity meter ────────────────────────────────────────────────────── */
.wh-cap { margin-top: 10px; }
.wh-cap__bar { height: 8px; border-radius: 999px; background: #e8eef4; overflow: hidden; }
.wh-cap__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wh-green), #4ade80); }
.wh-cap__fill.is-tight { background: linear-gradient(90deg, var(--wh-accent-d), var(--wh-accent)); }
.wh-cap__fill.is-full  { background: linear-gradient(90deg, #9f1239, var(--wh-rose)); }
.wh-cap__txt { display: flex; justify-content: space-between; font-size: .72rem; color: var(--wh-muted); margin-top: 5px; font-weight: 700; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.wh-btn {
  padding: 7px 14px; border-radius: 10px; font-size: .81rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.4;
}
.wh-btn--primary { background: var(--wh-brand); color: #fff; }
.wh-btn--primary:hover { background: var(--wh-brand-d); color: #fff; }
.wh-btn--green { background: var(--wh-green); color: #fff; }
.wh-btn--green:hover { background: var(--wh-green-d); color: #fff; }
.wh-btn--ghost { background: #fff; color: var(--wh-brand); border-color: #cfe4f0; }
.wh-btn--ghost:hover { background: #f2f8fc; color: var(--wh-brand-d); }
.wh-btn--soft { background: #eef2f6; color: #475569; }
.wh-btn--warn { background: #fff2e2; color: var(--wh-accent-d); }
.wh-btn--danger { background: #ffe4e6; color: var(--wh-rose); }
.wh-btn[disabled] { opacity: .55; pointer-events: none; }

/* ── Filter / tab bars ─────────────────────────────────────────────────── */
.wh-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
.wh-tab {
  flex-shrink: 0; padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--wh-line); background: #fff;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  color: var(--wh-muted); text-decoration: none;
}
.wh-tab.is-active { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }
.wh-tab .wh-tab__n { background: rgba(0, 0, 0, .08); border-radius: 10px; padding: 1px 7px; margin-left: 5px; font-size: .72rem; }
.wh-tab.is-active .wh-tab__n { background: rgba(255, 255, 255, .25); }

.wh-filters {
  background: #fff; border: 1px solid var(--wh-line); border-radius: 16px;
  padding: 13px 15px; margin-bottom: 16px; box-shadow: var(--wh-shadow);
}
.wh-filters .form-control,
.wh-filters .form-select { border-radius: 10px; font-size: .9rem; }
.wh-filters label { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wh-muted); margin-bottom: 3px; }

/* ── Map split pane (mirrors display.php?view=map) ─────────────────────── */
.wh-split { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 14px; }
.wh-split__list { max-height: 74vh; overflow-y: auto; padding-right: 4px; }
.wh-map { height: 74vh; min-height: 380px; border-radius: var(--wh-radius); border: 1px solid var(--wh-line); box-shadow: var(--wh-shadow); }
@media (max-width: 900px) {
  .wh-split { grid-template-columns: 1fr; }
  .wh-split__list { max-height: none; overflow: visible; }
  .wh-map { height: 58vh; }
}
.wh-map .leaflet-popup-content { margin: 11px 13px; font-size: .82rem; }
.wh-map .leaflet-popup-content b { display: block; font-size: .88rem; margin-bottom: 3px; }

/* ── Tables (ledger, charges) ──────────────────────────────────────────── */
.wh-table-wrap { overflow-x: auto; }
.wh-table { width: 100%; border-collapse: collapse; font-size: .81rem; min-width: 560px; }
.wh-table th {
  text-align: left; font-size: .67rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wh-muted);
  padding: 8px 10px; border-bottom: 1px solid var(--wh-line); white-space: nowrap;
}
.wh-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.wh-table tbody tr:last-child td { border-bottom: none; }
.wh-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.wh-empty { text-align: center; padding: 46px 22px; color: var(--wh-muted); }
.wh-empty i { font-size: 2.6rem; color: #cbd5e1; display: block; margin-bottom: 12px; }
.wh-empty h3 { font-size: 1rem; font-weight: 800; color: var(--wh-ink); margin-bottom: 5px; }
.wh-empty p { font-size: .85rem; margin-bottom: 14px; }

/* ── Stat strip ────────────────────────────────────────────────────────── */
.wh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; margin-bottom: 16px; }
.wh-stat { background: #fff; border: 1px solid var(--wh-line); border-radius: 13px; padding: 12px 14px; box-shadow: var(--wh-shadow); }
.wh-stat__k { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wh-muted); }
.wh-stat__v { font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; margin-top: 2px; }
.wh-stat__v small { font-size: .72rem; font-weight: 700; color: var(--wh-muted); margin-left: 3px; }

/* ── Receipt ───────────────────────────────────────────────────────────── */
.wh-receipt {
  background: #fff; border: 1px solid var(--wh-line); border-radius: 16px;
  box-shadow: var(--wh-shadow); overflow: hidden; max-width: 620px; margin: 0 auto;
}
.wh-receipt__head { background: var(--wh-brand); color: #fff; padding: 18px 20px; }
.wh-receipt__head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.wh-receipt__no { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .06em; margin-top: 4px; opacity: .92; }
.wh-receipt__body { padding: 18px 20px; }
.wh-receipt__note { font-size: .72rem; color: var(--wh-muted); border-top: 1px dashed var(--wh-line); padding: 12px 20px 16px; line-height: 1.6; }
.wh-qr { display: grid; place-items: center; padding: 8px 0 14px; }
.wh-qr canvas, .wh-qr img { border-radius: 8px; }

@media print {
  .wh-noprint, .ma-header, .price-ticker, footer { display: none !important; }
  body.wh-body { background: #fff; }
  .wh-receipt { box-shadow: none; border-color: #ccc; max-width: none; }
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.wh-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 20px; border-radius: 12px;
  font-size: .85rem; font-weight: 700; z-index: 9999; display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: 90vw; text-align: center;
}
.wh-toast.is-bad { background: #9f1239; }

/* ── Lot picker (used on the marketplace forms) ────────────────────────── */
.wh-lotpick { border: 1px solid #cfe4f0; background: #f4fafd; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.wh-lotpick__h { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 800; color: var(--wh-brand-d); margin-bottom: 8px; }
.wh-lotpick select { border-radius: 10px; }
.wh-lotpick__hint { font-size: .74rem; color: var(--wh-muted); margin-top: 6px; }

/* ── Leaflet pin + popup skin ──────────────────────────────────────────────
 * js/search_map.js renders these class names; display.php carries its own copy
 * inline. Duplicated here (rather than extracted) so the warehouse pages do not
 * depend on the search page's style block being loaded.
 */
.sm-pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
  display: grid; place-items: center; border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(15, 35, 47, .3);
}
.sm-pin span { transform: rotate(45deg); font-size: 10px; color: #fff; font-weight: 900; }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.sm-popup { min-width: 180px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.sm-popup strong { display: block; font-size: .83rem; color: var(--wh-ink); margin-bottom: 3px; }
.sm-popup small { color: var(--wh-muted); font-size: .71rem; }
.sm-popup-meta { font-size: .75rem; font-weight: 800; color: var(--wh-accent); margin-top: 5px; }
.sm-popup-dist {
  display: inline-block; margin-top: 6px; background: #edf7fb; color: var(--wh-brand-d);
  border-radius: 999px; padding: 2px 8px; font-size: .68rem; font-weight: 800;
}
.sm-popup-precision { display: block; margin-top: 5px; font-size: .66rem; color: var(--wh-muted); font-style: normal; }
.sm-popup-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--wh-line);
}
.sm-popup a { display: inline-block; color: var(--wh-brand); font-weight: 800; text-decoration: none; font-size: .71rem; }
.sm-popup-nav {
  color: #fff !important; background: var(--wh-accent); border-radius: 999px;
  padding: 4px 10px; box-shadow: 0 3px 9px rgba(243, 141, 22, .3);
}
.sm-popup-nav:hover { background: var(--wh-accent-d); }
.sm-popup-nonav { font-size: .66rem; color: var(--wh-muted); line-height: 1.3; }

/* A result card highlighted by its map marker. */
.wh-card.is-active { border-color: var(--wh-brand); box-shadow: 0 0 0 3px rgba(9, 113, 168, .13); }