/* ==========================================================================
   PPS THEME — preview design system v1.0 ("calm + trustworthy")
   PREVIEW-FLAG-GATED FILE. Only loaded when ?theme=new or cookie
   pps_theme=new is present (see layout gate). Safe to load last: every rule
   here targets existing Bootstrap 5 / hand-rolled sidebar selectors already
   shipping in both OMS apps (admin + customer) — no markup changes required.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- PPS design tokens ---- */
  --pps-canvas:#F4F6F8;  --pps-surface:#FFFFFF; --pps-border:#DDE3E9;
  --pps-ink-900:#111A24; --pps-ink-700:#3D4C5A; --pps-ink-500:#6B7A88; --pps-ink-300:#9CAAB6;
  --pps-pri-600:#0E5FA4; --pps-pri-700:#0B4A80; --pps-pri-100:#DCEBF7; --pps-rail:#0F1C28;
  --pps-ok:#0F7B4F;   --pps-ok-bg:#E7F5EE;
  --pps-warn:#B26A00; --pps-warn-bg:#FDF3E2;
  --pps-dan:#B3261E;  --pps-dan-bg:#FBEAE9;
  --pps-info:#0E5FA4; --pps-info-bg:#E8F1F9;
  --pps-mut-bg:#EEF1F4;

  /* ---- Bootstrap variable mapping ---- */
  --bs-primary:#0E5FA4; --bs-success:#0F7B4F; --bs-warning:#B26A00; --bs-danger:#B3261E; --bs-info:#0E5FA4;
  --bs-body-bg:#F4F6F8; --bs-body-color:#3D4C5A; --bs-border-color:#DDE3E9; --bs-border-radius:.5rem;
  --bs-primary-rgb:14,95,164; --bs-success-rgb:15,123,79; --bs-warning-rgb:178,106,0; --bs-danger-rgb:179,38,30;
  --bs-font-sans-serif:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ==========================================================================
   BASE / TYPOGRAPHY
   ========================================================================== */
body {
  font-family: var(--bs-font-sans-serif);
  color: var(--pps-ink-700);
  background-color: var(--pps-canvas);
}

td, th, .stat-value, .badge {
  font-variant-numeric: tabular-nums;
}

.mono, code, kbd, pre,
td.mono, th.mono, .table td.mono, .table th.mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   SIDEBAR / RAIL  (div.sidebar#sidebar > nav.nav.flex-column > a.nav-link)
   ========================================================================== */
.sidebar {
  background-color: var(--pps-rail);
}

.sidebar .nav-link {
  color: rgba(255,255,255,.68);
  font-size: 13.5px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.sidebar .nav-link:hover {
  color: #fff;
  background-color: rgba(255,255,255,.08);
}

.sidebar .nav-link.active {
  color: #fff;
  background-color: rgba(14,95,164,.28);
  border-right: none;
  border-left: 3px solid var(--pps-pri-600);
  padding-left: calc(1rem - 3px);
}

.sidebar > nav::-webkit-scrollbar-track { background: var(--pps-rail); }
.sidebar > nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.sidebar > nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

/* ==========================================================================
   TOPBAR  (nav.navbar.navbar-expand-lg.navbar-light.bg-white.border-bottom.top-navbar)
   ========================================================================== */
.top-navbar {
  background-color: var(--pps-surface) !important; /* beats Bootstrap .bg-white !important */
  border-bottom: 1px solid var(--pps-border) !important; /* beats .border-bottom !important */
  box-shadow: none;
}

/* ==========================================================================
   CONTENT / MAIN  (div.content > main.p-4.main-content)
   ========================================================================== */
.content { background-color: var(--pps-canvas); }
.main-content { background: var(--pps-canvas); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background-color: var(--pps-surface);
  border: 1px solid var(--pps-border);
  border-radius: 12px;
  box-shadow: none;
}

.card-header {
  background-color: var(--pps-canvas);
  border-bottom: 1px solid var(--pps-border);
  font-weight: 600;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  height: 40px;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out, color .12s ease-out;
}

.btn-sm { height: 32px; padding: 0 .75rem; }
.btn-lg { height: 48px; padding: 0 1.25rem; }

.btn-primary {
  background-color: var(--pps-pri-600);
  border-color: var(--pps-pri-600);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--pps-pri-700) !important;
  border-color: var(--pps-pri-700) !important;
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger,
.btn-outline-success, .btn-outline-warning, .btn-outline-info {
  background-color: var(--pps-surface);
  border-width: 1px;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pps-pri-100), 0 0 0 4px var(--pps-pri-600);
}

.btn:disabled, .btn.disabled {
  opacity: .42;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-responsive { overflow-x: auto; }

.table thead th,
.table > :not(caption) > * > th {
  position: sticky;
  top: 0;
  background-color: var(--pps-canvas);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pps-ink-500);
  font-weight: 600;
  z-index: 1;
}

.table td, .table th {
  padding: 13px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--pps-border);
  vertical-align: middle;
}

.table tbody tr:hover { background-color: var(--pps-pri-100); }

.table td.text-end, .table th.text-end,
.table .numeric, .table td.numeric, .table th.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ==========================================================================
   BADGES  (bg-* utility classes ship !important — must match)
   ========================================================================== */
.badge {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: .35em .65em;
}
.badge.bg-success { background-color: var(--pps-ok-bg) !important;   color: var(--pps-ok) !important; }
.badge.bg-warning { background-color: var(--pps-warn-bg) !important; color: var(--pps-warn) !important; }
.badge.bg-danger  { background-color: var(--pps-dan-bg) !important;  color: var(--pps-dan) !important; }
.badge.bg-secondary { background-color: var(--pps-mut-bg) !important; color: var(--pps-ink-500) !important; }
.badge.bg-info    { background-color: var(--pps-info-bg) !important; color: var(--pps-info) !important; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-control, .form-select {
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--pps-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--pps-pri-600);
  box-shadow: 0 0 0 3px var(--pps-pri-100);
}
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pps-ink-900);
}
.is-invalid, .form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--pps-dan) !important;
}
.is-invalid:focus, .form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--pps-dan-bg) !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination .page-link {
  border-radius: 8px;
  color: var(--pps-pri-600);
}
.pagination .page-link:hover { background-color: var(--pps-pri-100); }
.pagination .page-item.active .page-link {
  background-color: var(--pps-pri-600);
  border-color: var(--pps-pri-600);
}

/* ==========================================================================
   FOOTER BAR  (injected by pps-theme.js as div.pps-footer-bar, last child of
   div.content — CSS-only visitors with the flag off never see this markup)
   ========================================================================== */
.pps-footer-bar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  font-size: 12px;
  color: var(--pps-ink-500);
  border-top: 1px solid var(--pps-border);
  background-color: var(--pps-surface);
}
.pps-footer-bar .pps-footer-time {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   MOBILE DRAWER — reuses the EXISTING hand-rolled toggle/backdrop that ships
   in both apps (#sidebar.sidebar-open / #sidebarBackdrop.show / .mobile-toggle
   / toggleSidebar() / closeSidebar()). We only retheme + add touch targets;
   we do NOT add a second toggler or rebind the existing handlers.
   ========================================================================== */
.mobile-toggle {
  border-radius: 8px;
  border-color: var(--pps-border);
  color: var(--pps-ink-700);
  min-width: 44px;
  min-height: 44px;
}

.sidebar-backdrop.show {
  background-color: rgba(15,28,40,.55);
}

@media (max-width: 768px) {
  .sidebar { transition: transform .25s ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-backdrop, .btn, .nav-link, .mobile-toggle {
    transition: none !important;
  }
}

/* ==========================================================================
   v1.1 CORRECTIONS (2026-07-24) — from the before/after visual review.
   1. Badge pills were too pale to read as pills at 12px on a white row:
      restore presence with a deeper tint + a 1px edge, text still dark.
   2. Cell padding 13/16 pushed row height up and forced the seller column
      to wrap: return to a denser 10/12 so more rows fit per screen.
   Appended last so these win the cascade. Revert = delete this block.
   ========================================================================== */
.badge { padding:4px 10px; border:1px solid transparent; line-height:1.35; }
.badge.bg-success   { background-color:#D6EFE2 !important; color:#0B5C3B !important; border-color:#A8DCC4 !important; }
.badge.bg-warning   { background-color:#FBE7C2 !important; color:#8A5200 !important; border-color:#F0CE93 !important; }
.badge.bg-danger    { background-color:#F8D9D7 !important; color:#8E1D17 !important; border-color:#EDB4B0 !important; }
.badge.bg-secondary { background-color:#E3E8ED !important; color:#4A5966 !important; border-color:#CBD4DC !important; }
.badge.bg-info      { background-color:#D3E7F6 !important; color:#0B4A80 !important; border-color:#A9CDEA !important; }
.badge.bg-primary   { background-color:#D3E7F6 !important; color:#0B4A80 !important; border-color:#A9CDEA !important; }
.badge.bg-light     { background-color:#EEF1F4 !important; color:#3D4C5A !important; border-color:#DDE3E9 !important; }
.badge.bg-dark      { background-color:#DDE3E9 !important; color:#111A24 !important; border-color:#C6D0D9 !important; }

.table > :not(caption) > * > td { padding:10px 12px !important; }
.table > :not(caption) > * > th, .table thead th { padding:10px 12px !important; }

/* --- v1.2: header widths were stealing space from data columns.
   Uppercase + .04em tracking made "BATCH ID" wrap and squeezed the seller
   column onto two lines. Tighten the header so data columns keep their width. */
.table > :not(caption) > * > th, .table thead th {
  font-size:11px !important; letter-spacing:.02em !important; white-space:nowrap !important;
  padding:9px 10px !important;
}