/* Enterprise UI layer on top of the Tabler UI kit (@tabler/core, Bootstrap 5 based; variables use the --tblr- prefix).
   Loaded after Tabler, so it wins on equal specificity. The only stylesheet for the admin app: templates carry no <style> blocks or static inline styles.
   Keeps the WarehouseCare amber accent (fed into Tabler's --tblr-primary) and a neutral slate scale for surfaces. */

/* ---------- App frame and shared components (formerly the <style> block in layout_admin.html) ---------- */
:root {
  --accent: #e67e22;
  --muted: #7a6347;
  --card-bg: #ffffff;
  --surface: #faf6f0;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(16, 24, 40, 0.08);
}

/* ==========================================================================
   WMS EXECUTION COMPACT MODERN DESIGN SYSTEM (Prevents oversized / overlap UI)
   ========================================================================== */
.wms-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
  min-height: 58px;
}

.wms-kpi-card:hover {
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
}

.wms-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.wms-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ui-text-3);
  line-height: 1.2;
  margin-bottom: 2px;
}

.wms-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ui-text);
  line-height: 1.1;
  margin: 0;
}

/* WMS Filter Card */
.wms-filter-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

/* WMS Table Container */
.wms-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

.wms-table-card .card-header {
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  padding: 8px 12px;
}

.wms-table-card .table {
  margin-bottom: 0;
  width: 100%;
}

.wms-table-card .table thead th,
.wms-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  vertical-align: middle;
}

.wms-table-card .table tbody td,
.wms-table tbody td {
  padding: 7px 10px !important;
  vertical-align: middle !important;
  line-height: 1.35 !important;
  font-size: 12px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.wms-table tbody tr:hover {
  background-color: #fafaf9;
}

/* WMS High-Contrast Quality Badges */
.wms-badge-passed {
  background-color: var(--ui-success-soft) !important;
  color: var(--ui-success-text) !important;
  border: 1px solid var(--ui-success-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

.wms-badge-pending {
  background-color: var(--ui-warning-soft) !important;
  color: var(--ui-warning-text) !important;
  border: 1px solid var(--ui-warning-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

.wms-badge-failed {
  background-color: var(--ui-danger-soft) !important;
  color: var(--ui-danger-text) !important;
  border: 1px solid var(--ui-danger-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

.wms-badge-hold {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

.wms-bin-badge {
  background-color: #f8fafc;
  color: var(--ui-text-2);
  border: 1px solid #e2e8f0;
  font-family: var(--tblr-font-monospace);
  font-weight: 600;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.wms-lot-code {
  font-family: var(--tblr-font-monospace);
  font-weight: 600;
  font-size: 12px;
  color: var(--ui-link);
  text-decoration: none;
  white-space: nowrap;
}

.wms-lot-code:hover {
  color: var(--ui-link-hover);
  text-decoration: underline;
}

/* ==========================================================================
   MASTER CATALOG ENTERPRISE DESIGN SYSTEM (Crisp alignment, balanced proportions)
   ========================================================================== */
.master-card,
.master-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.master-card-header {
  padding: 12px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* filter forms and button groups in the header wrap on narrow screens instead of spilling out */
.master-card-header > div,
.master-card-header form {
  flex-wrap: wrap;
  min-width: 0;
}

.master-card-footer {
  padding: 9px 18px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  color: var(--ui-text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.master-header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 10px;
}

.master-topology-alert {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 14px;
  margin-bottom: 0.85rem;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #475569;
}

.master-topology-alert > div {
  flex-wrap: wrap;
}

/* Dedicated Enterprise Table */
.master-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.master-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.55px !important;
  padding: 10px 14px !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.master-table tbody td {
  padding: 9px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 13px !important;
  color: var(--ui-text) !important;
  line-height: 1.35 !important;
}

.master-table tbody tr {
  transition: background-color 0.12s ease;
}

.master-table tbody tr:hover {
  background-color: #f8fafc !important;
}

.master-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Primary & Subtitle cell helpers */
.master-cell-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.3;
  display: block;
}

.master-cell-sub {
  font-size: 12px;
  color: var(--ui-text-3);
  line-height: 1.25;
  display: block;
  margin-top: 1px;
}

/* Code Badge */
.master-code-badge,
.wms-bin-badge {
  background-color: #f1f5f9 !important;
  color: var(--ui-text) !important;
  border: 1px solid #cbd5e1 !important;
  font-family: var(--tblr-font-monospace) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2.5px 7px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
}

/* Status Badges */
.master-badge-active {
  background-color: var(--ui-success-soft) !important;
  color: var(--ui-success-text) !important;
  border: 1px solid var(--ui-success-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2.5px 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.master-badge-active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ui-success);
}

.master-badge-inactive {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2.5px 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.master-badge-inactive::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ui-text-3);
}

.master-badge-blocked {
  background-color: var(--ui-danger-soft) !important;
  color: var(--ui-danger-text) !important;
  border: 1px solid var(--ui-danger-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2.5px 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.master-badge-blocked::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ui-danger);
}

/* Purpose & Type Pills */
.master-type-own {
  background-color: var(--ui-success-soft) !important;
  color: var(--ui-success-text) !important;
  border: 1px solid var(--ui-success-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.master-type-cfa,
.master-type-cold {
  background-color: var(--ui-info-soft) !important;
  color: var(--ui-info-text) !important;
  border: 1px solid var(--ui-info-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.master-type-thirdparty,
.master-type-ambient {
  background-color: var(--ui-warning-soft) !important;
  color: #b45309 !important;
  border: 1px solid var(--ui-warning-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.master-type-staging {
  background-color: #f2f4f7 !important;
  color: #4a5468 !important;
  border: 1px solid #cfd4dc !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

/* Action Buttons */
.btn-master-action,
.master-action-btn {
  width: 29px;
  height: 29px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: var(--ui-text-3);
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-master-action:hover,
.master-action-btn:hover {
  background: var(--ui-info-soft);
  color: var(--ui-info-text);
  border-color: var(--ui-info-border);
}

.btn-master-action-danger:hover,
.master-action-btn-danger:hover {
  background: var(--ui-danger-soft);
  color: var(--ui-danger-text);
  border-color: var(--ui-danger-border);
}

.muted {
  color: var(--muted);
  font-size: 12px
}

.card-pro {
  background: var(--card-bg);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}

table.styled {
  width: 100%;
  border-collapse: collapse
}

table.styled thead th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  vertical-align: middle;
}

.table.styled tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: middle;
  line-height: 1.35;
}

/* also apply to standard tables used without 'styled' class - keep single line rows and consistent height */
.table tbody td {
  vertical-align: middle;
  line-height: 18px;
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-status {
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px
}

.badge-planned {
  background: #fff7e6;
  color: var(--ui-warning-text);
  border: 1px solid var(--ui-warning-border)
}

.badge-done {
  background: var(--ui-success-soft);
  color: var(--ui-success-text);
  border: 1px solid var(--ui-success-border)
}

.badge-pending {
  background: var(--ui-info-soft);
  color: var(--ui-info-text);
  border: 1px solid var(--ui-info-border)
}

.badge-skipped {
  background: var(--ui-neutral-soft);
  color: var(--ui-text-3);
  border: 1px solid var(--ui-border);
  text-decoration: line-through
}

.badge-danger {
  background: var(--ui-danger-soft);
  color: var(--ui-danger-text);
  border: 1px solid var(--ui-danger-border)
}

.badge-info {
  background: var(--ui-info-soft);
  color: var(--ui-info-text);
  border: 1px solid var(--ui-info-border)
}

/* Prevent selection text from wrapping and causing dropdown to expand beyond the field */
.form-select {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-select option {
  white-space: nowrap;
}

.btn-ghost {
  background: #fff5eb;
  border: 1px solid var(--ui-accent-border);
  color: var(--accent);
  border-radius: 8px;
  padding: 8px 12px
}

.offcanvas-end {
  width: 600px
}
.btn-group {
  gap: 4px;
  display: flex;
}

.btn-group .btn {
  margin: 0;
}

/* Small square icon buttons used in tables for consistency */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  width: 32px;
  height: 32px;
  min-width: 0 !important;
  border-radius: 8px
}

.btn-icon i {
  font-size: 16px
}

.table.styled th.actions,
.table.styled td.actions,
.table th.actions,
.table td.actions {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle
}

.table th.actions {
  width: 150px
}

/* Center generic table headers, but keep `styled` tables left-aligned for legibility */
.table thead th {
  text-align: center;
}

.table.styled thead th {
  text-align: left;
}

/* Keep body text left aligned for legibility (except actions column) */
.table.styled tbody td:not(.actions) {
  text-align: left;
}

.table tbody td:not(.actions) {
  text-align: left;
}

/* Fixed table layout for controlled column widths and single line rows */
.table.table-fixed {
  table-layout: fixed;
  width: 100%;
}

.table.table-fixed thead th,
.table.table-fixed tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avoid 120px default max width when using table-fixed so columns can retain assigned widths */
.table.table-fixed tbody td {
  max-width: none;
}

/* Compact table variant: small font + tighter padding for single-line dense tables like 'Plans' */
.table-compact thead th,
.table-compact tbody td {
  font-size: 13px;
  padding: 4px 6px;
  line-height: 16px;
}

/* On narrow screens slightly reduce font and restore auto layout */
@media (max-width:1200px) {

  .table-compact thead th,
  .table-compact tbody td {
    font-size: 12px;
  }

  .table.table-fixed.table-compact {
    table-layout: auto;
  }
}

.table-compact .btn-icon {
  width: 30px;
  height: 30px;
}

.table-compact .btn-icon i {
  font-size: 14px;
}

/* allow actions column to be narrow and centered */
.table.table-fixed td.actions {
  white-space: nowrap;
}

/* Center rows for tables which want their data aligned centrally under the header */
.table.centered-rows tbody td {
  text-align: center;
}

.table.centered-rows tbody td.actions {
  text-align: center;
}

/* Provide readable text on light badges and custom small items */
.badge.bg-white,
.badge.bg-light,
.draggable-chemical {
  color: var(--ui-text) !important;
}

.assigned-item {
  color: var(--ui-text) !important;
}

/* Solid status badges (`badge bg-success` ...) read as the status tints: Tabler leaves their text grey, which is
   unreadable on the solid colours. A badge that sets its own text colour (text-white, text-dark ...) keeps it. */
.badge.bg-success { --ui-badge-bg: var(--ui-success-soft); --ui-badge-fg: var(--ui-success-text); --ui-badge-bd: var(--ui-success-border); }
.badge.bg-danger { --ui-badge-bg: var(--ui-danger-soft); --ui-badge-fg: var(--ui-danger-text); --ui-badge-bd: var(--ui-danger-border); }
.badge.bg-warning { --ui-badge-bg: var(--ui-warning-soft); --ui-badge-fg: var(--ui-warning-text); --ui-badge-bd: var(--ui-warning-border); }
.badge.bg-info { --ui-badge-bg: var(--ui-info-soft); --ui-badge-fg: var(--ui-info-text); --ui-badge-bd: var(--ui-info-border); }
.badge.bg-primary { --ui-badge-bg: var(--ui-accent-soft); --ui-badge-fg: var(--ui-link); --ui-badge-bd: var(--ui-accent-border); }
.badge:is(.bg-secondary, .bg-dark) { --ui-badge-bg: var(--ui-neutral-soft); --ui-badge-fg: var(--ui-text-2); --ui-badge-bd: var(--ui-border-strong); }
.badge:is(.bg-success, .bg-danger, .bg-warning, .bg-info, .bg-primary, .bg-secondary, .bg-dark):not(:is(.text-white, .text-dark, .text-black, .text-body, .text-light, [class*="-fg"], [class*="-emphasis"])) {
  background: var(--ui-badge-bg) !important; color: var(--ui-badge-fg); box-shadow: inset 0 0 0 1px var(--ui-badge-bd);
}

/* Accessibility: skip link, visible keyboard focus, AA-contrast text colours */
/* hidden by clipping (not parked off-screen) until focused, so the overflow-hidden shell never clips it */
.skip-link:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2000;
  background: #fff;
  color: var(--ui-text);
  border: 2px solid #b8560b;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #b8560b;
  outline-offset: 2px;
}

.text-primary { color: var(--ui-link) !important; }
.text-success.bg-success-subtle { color: var(--ui-success-text) !important; }
.text-primary.bg-primary-subtle { color: var(--tblr-primary-text-emphasis) !important; }

/* ---------- Enterprise UI layer ---------- */
:root {
  /* #b8560b keeps white button text at WCAG AA contrast (the lighter brand orange does not) */
  --ui-accent: #b8560b;
  --ui-accent-hover: #a04a00;
  --ui-accent-soft: #fdf1e6;
  --ui-ring: 0 0 0 3px rgba(184, 86, 11, 0.2);
  --ui-bg: #f5f6f8;
  --ui-surface: #ffffff;
  --ui-border: #e3e6eb;
  --ui-border-strong: #cfd4dc;
  --ui-text: #1d2433;
  --ui-text-2: #4a5468;
  --ui-text-3: #677083; /* muted text: ≥4.5:1 on white and on the app background (WCAG AA) */
  --ui-success: #16794c;
  --ui-danger: #c0362c;
  --ui-warning: #b25e00;
  --ui-info: #2463b5;
  /* status tints: badge fill, its 1px border and its text (DESIGN.md "Status") */
  --ui-success-soft: #ecfdf5; --ui-success-border: #a7f3d0; --ui-success-text: var(--ui-success);
  --ui-warning-soft: #fffbeb; --ui-warning-border: #fde68a; --ui-warning-text: var(--ui-warning);
  --ui-danger-soft: #fef2f2;  --ui-danger-border: #fecaca;  --ui-danger-text: var(--ui-danger);
  --ui-info-soft: #eff6ff;    --ui-info-border: #bfdbfe;    --ui-info-text: var(--ui-info);
  --ui-neutral-soft: #f7f8fa;
  --ui-border-hover: #b5bcc7;   /* input border on hover */
  --ui-row-divider: #eef0f3;    /* grid row rule */
  --ui-highlight: #ffe2c2;      /* search-match mark */
  --ui-accent-border: #f3d3b4;  /* amber-tinted 1px border */
  --ui-scrim: rgba(16, 24, 40, .45);
  --ui-radius: 8px;
  --ui-radius-sm: 6px;
  --ui-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ui-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
  --ui-shadow-3: 0 16px 40px rgba(16, 24, 40, 0.16);

  /* re-point the layout's tokens so existing rules pick up the new palette */
  --accent: var(--ui-accent);
  --surface: var(--ui-bg);
  --radius: var(--ui-radius);
  --shadow: var(--ui-shadow-1);
  --muted: var(--ui-text-3);

  --tblr-primary: var(--ui-accent);
  --tblr-primary-rgb: 184, 86, 11;
  --tblr-link-color: var(--ui-link);
  --tblr-link-color-rgb: 160, 74, 0;        /* = --ui-link; Tabler colours <a> from the rgb triple */
  --tblr-link-hover-color: var(--ui-link-hover);
  --tblr-link-hover-color-rgb: 127, 59, 0;
  --tblr-body-color: var(--ui-text);
  --tblr-body-color-rgb: 29, 36, 51;        /* = --ui-text; .text-body reads the rgb triple */
  --tblr-body-bg: var(--ui-bg);
  --tblr-body-font-size: 14px;          /* 14px SaaS base; Bootstrap's 16px is too loose for dense grids */
  --tblr-border-color: var(--ui-border);
  --tblr-border-radius: var(--ui-radius-sm);
  --tblr-focus-ring-color: rgba(184, 86, 11, 0.25);
  --tblr-primary-bg-subtle: #fdf1e6;        /* primary-subtle badges/alerts follow the brand, not Bootstrap blue */
  --tblr-primary-border-subtle: #f3d3b4;
  --tblr-primary-text-emphasis: #7a3d08;
  --ui-link: #a04a00;
  --ui-link-hover: #7f3b00;
  --ui-hover: #f7f8fa;      /* row / nav hover */
  --ui-subtle: #fafbfc;     /* footers, toolbars, table heads */

  /* Tabler theme: brand accent, type, surfaces. Dark values follow from the --ui-* tokens below. */
  --tblr-primary-rgb: 184, 86, 11;
  --tblr-primary-fg: #fff;
  --tblr-primary-darken: var(--ui-accent-hover);
  --tblr-primary-lt: var(--ui-accent-soft);
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tblr-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-bg-surface: var(--ui-surface);
  --tblr-bg-surface-secondary: var(--ui-hover);
  --tblr-bg-surface-tertiary: var(--ui-subtle);
  --tblr-bg-forms: var(--ui-surface);
  --tblr-border-color-translucent: var(--ui-border);
  --tblr-active-bg: var(--ui-accent-soft);
  --sidebar-width: 16.5rem;
  /* Bootstrap's heading scale: templates size headings with .h5/.h6 (Tabler's own scale is smaller, .h5 = 12px) */
  --tblr-font-size-h1: 2.5rem;
  --tblr-font-size-h2: 2rem;
  --tblr-font-size-h3: 1.75rem;
  --tblr-font-size-h4: 1.5rem;
  --tblr-font-size-h5: 1.25rem;
  --tblr-font-size-h6: 1rem;
}

body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--tblr-font-sans-serif);
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
/* Buttons sit on the form scale (see "Form scale"): 36px default, 30px -sm, 44px -lg, so a button next to an
   input has the same height. Icon-only squares (.btn-icon) keep their own size. */
.btn { --tblr-btn-font-size: 14px; --tblr-btn-font-weight: 500; --tblr-btn-line-height: 20px;
  --tblr-btn-padding-y: 7px; --tblr-btn-padding-x: 14px; min-height: 36px; }
.btn-sm, .btn-group-sm > .btn, .input-group-sm > .btn { --tblr-btn-padding-y: 4px; --tblr-btn-padding-x: 10px; min-height: 30px; }
.btn-lg, .btn-group-lg > .btn { --tblr-btn-font-size: 16px; --tblr-btn-padding-y: 11px; --tblr-btn-padding-x: 20px; min-height: 44px; }
/* -xs: badge-sized toggle buttons inside grid cells */
.btn-xs { --tblr-btn-font-size: 12px; --tblr-btn-padding-y: 2px; --tblr-btn-padding-x: 8px; --tblr-btn-line-height: 18px; min-height: 24px; }
.btn.btn-icon, .btn.btn-link, .btn-close { min-height: 0; }

/* ---------- Shell: sidebar, header, footer ----------
   Tabler supplies the components (buttons, dropdowns, .input-icon, .avatar); this block lays out the app frame.
   The header button (#sidebarToggle) hides the sidebar on desktop (body.sidebar-hidden, remembered) and slides
   it in as a drawer on phones and portrait tablets (body.nav-open). */
html, body { height: 100%; margin: 0; overflow: hidden; }
.app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 10px 24px;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}
body.sidebar-hidden .sidebar { display: none; }
.sidebar-brand-card { padding: 2px 4px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--ui-border); }
.sidebar-brand { display: flex; align-items: center; justify-content: center; min-height: 40px; color: var(--ui-text); text-decoration: none; }
.sidebar-brand img { display: block; height: 36px; max-width: 100%; object-fit: contain; }
.sidebar-brand-text { display: inline-flex; align-items: center; gap: 8px; }
.sidebar-brand-text strong, .sidebar-brand-text small { display: block; line-height: 1.2; }
.sidebar-brand-text small { font-size: 12px; color: var(--ui-text-3); }
.sidebar-brand-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 6px; background: var(--ui-accent-soft); color: var(--ui-link);
}

/* section headers: plain sentence-case labels, spacing does the grouping */
.sidebar-section-divider { padding: 16px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ui-text-3); }
.sidebar-section-divider:first-of-type { padding-top: 10px; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 6px 10px; margin-bottom: 1px;
  border-radius: 6px;
  color: var(--ui-text-2); font-size: 13px; font-weight: 500; line-height: 1.3;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar .nav-link:hover { background: var(--ui-hover); color: var(--ui-text); }
.sidebar .nav-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.sidebar-nav-icon { flex: 0 0 18px; width: 18px; text-align: center; font-size: 14px; color: var(--ui-text-3); }
.sidebar .nav-text { flex: 1 1 auto; min-width: 0; }
.sidebar .chev { flex: 0 0 auto; font-size: 11px; color: var(--ui-text-3); transition: transform .2s ease; }
.sidebar .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* the module holding the current page: darker label and an accent icon */
.sidebar .nav-link[aria-expanded="true"], .sidebar .nav-link.is-current { color: var(--ui-text); }
.sidebar .nav-link.is-current .sidebar-nav-icon, .sidebar .nav-link.active .sidebar-nav-icon { color: var(--ui-link); }
.sidebar .nav-link.active { background: var(--ui-accent-soft); color: var(--ui-link); font-weight: 600; }
/* groups open instantly: animating height re-lays out the whole page every frame */
.sidebar .collapsing { transition: none; }
.sidebar .submenu-wrapper { margin: 2px 0 8px 18px; padding-left: 8px; border-left: 1px solid var(--ui-border); }
.sidebar .submenu-wrapper .nav-link { min-height: 30px; padding: 5px 10px; font-weight: 400; }
.sidebar .submenu-wrapper .nav-link.active { font-weight: 600; }
.sidebar .nav-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 10px 2px; font-size: 12px; font-weight: 600; color: var(--ui-text-3);
}
.sidebar .nav-group-header.is-toggle { cursor: pointer; user-select: none; border-radius: 4px; padding-bottom: 4px; }
.sidebar .nav-group-header.is-toggle:hover { background: var(--ui-hover); color: var(--ui-text-2); }
.sidebar .nav-group-header .group-chev { margin-left: auto; font-size: 11px; transition: transform .2s ease; }
.sidebar .nav-group-header.is-closed .group-chev { transform: rotate(-90deg); }
.sidebar .nav-group-body.is-closed { display: none !important; }
/* "Go to screen" filter (ui.js) */
.ui-nav-filter { padding: 0 2px 2px; }
.ui-nav-filtering .collapse { display: block !important; height: auto !important; }
.ui-nav-filtering .sidebar-section-divider, .ui-nav-filtering .nav-group-header { display: none !important; }
.sidebar .ui-nav-miss { display: none !important; }
.sidebar-backdrop { display: none; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.main-header {
  position: sticky; top: 0; z-index: 100; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 20px 8px 12px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}
.sidebar-toggle { flex-shrink: 0; color: var(--ui-text-2); }
.header-title { flex: 1 1 auto; min-width: 0; }
.page-title {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--ui-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-subtitle { font-size: 12px; color: var(--ui-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-subtitle:empty { display: none; }
.header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 6px; }
.header-search { width: 18rem; }
.user-menu-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; }
.user-menu .avatar {
  --tblr-avatar-size: 28px;
  margin: 0; font-size: 12px; font-weight: 600;
  background: var(--ui-accent-soft); color: var(--ui-link);
}
.user-menu-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ui-text); }
.user-menu-chev { font-size: 11px; color: var(--ui-text-3); }
.user-menu .dropdown-menu { min-width: 15rem; }
/* header icon buttons: a quiet hover, not Tabler's filled grey */
.main-header .btn-ghost-secondary {
  --tblr-btn-color: var(--ui-text-2);
  --tblr-btn-hover-color: var(--ui-text); --tblr-btn-hover-bg: var(--ui-hover); --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: var(--ui-text); --tblr-btn-active-bg: var(--ui-hover); --tblr-btn-active-border-color: transparent;
}
.dropdown-header { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ui-text-3); }
.main-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.app-footer {
  display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 20px; background: var(--ui-surface); border-top: 1px solid var(--ui-border);
  font-size: 12px; color: var(--ui-text-3);
}
.footer-product { color: var(--ui-text-3); margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--ui-border); }
.footer-links { display: flex; align-items: center; gap: 12px; }
.footer-links a { color: var(--ui-link); font-weight: 500; text-decoration: none; }
.footer-links a:hover { color: var(--ui-link-hover); text-decoration: underline; }

@media (max-width: 991.98px) {
  .sidebar, body.sidebar-hidden .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045;
    display: block; width: min(300px, 85vw);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }
  body.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--ui-shadow-3); }
  body.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1040; background: var(--ui-scrim); }
  .main-header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .page-subtitle, .user-menu-name { display: none; }
  .header-actions { display: contents; }  /* title row: toggle, title, menus; search wraps below */
  .header-search { order: 5; flex: 1 1 100%; width: auto; }
  .main-content { padding: 12px 10px; }
  .offcanvas-end { width: 100%; }
  .table.table-fixed { table-layout: auto; }
  .app-footer { flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
}

/* ---------- Cards ---------- */
.card, .card-pro, .master-table-card, .wms-table-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-1);
  background: var(--ui-surface);
}
.card-header {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  font-weight: 600;
  color: var(--ui-text);
}
.card-footer { background: #fafbfc; border-top: 1px solid var(--ui-border); }

/* ---------- Buttons ---------- */
/* Tabler buttons, tabs and menu items are flex boxes, which drop the space between an icon and its label */
.btn, .nav-tabs .nav-link, .nav-pills .nav-link, .dropdown-item { column-gap: .3rem; }
.btn {
  border-radius: var(--ui-radius-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.btn:focus-visible { box-shadow: var(--ui-ring); }
.btn-primary {
  --tblr-btn-bg: var(--ui-accent);
  --tblr-btn-border-color: var(--ui-accent);
  --tblr-btn-hover-bg: var(--ui-accent-hover);
  --tblr-btn-hover-border-color: var(--ui-accent-hover);
  --tblr-btn-active-bg: #a8530f;
  --tblr-btn-active-border-color: #a8530f;
  --tblr-btn-disabled-bg: var(--ui-accent);
  --tblr-btn-disabled-border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow-1);
}
.btn-outline-primary {
  --tblr-btn-color: var(--ui-accent-hover);
  --tblr-btn-border-color: var(--ui-accent);
  --tblr-btn-hover-bg: var(--ui-accent);
  --tblr-btn-hover-border-color: var(--ui-accent);
  --tblr-btn-active-bg: var(--ui-accent-hover);
}
.btn-outline-secondary, .btn-light {
  --tblr-btn-color: var(--ui-text-2);
  --tblr-btn-bg: var(--ui-surface);
  --tblr-btn-border-color: var(--ui-border-strong);
  --tblr-btn-hover-color: var(--ui-text);
  --tblr-btn-hover-bg: #f2f4f7;
  --tblr-btn-hover-border-color: var(--ui-border-strong);
  --tblr-btn-active-bg: #e9ecf1;
  --tblr-btn-active-color: var(--ui-text);
}
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.btn[aria-busy="true"]::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------- Form controls ---------- */
.form-control, .form-select {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  background-color: var(--ui-surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--ui-border-hover); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-ring);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: #f3f4f6;
  color: var(--ui-text-2);
}
.form-control::placeholder { color: var(--ui-text-3); } /* AA in both themes; scan prompts on handhelds are real instructions */
/* Form scale: every text input, native select, Tom Select and input-group addon shares one height, padding and
   type per size (default 36px, -sm 30px, -lg 44px), so fields line up side by side. Labels have one look. */
.form-control, .form-select, .input-group-text {
  min-height: 36px; padding: 7px 12px; line-height: 20px; font-size: 14px;
}
.form-select { padding-right: 36px; background-position: right 12px center; }
.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text {
  min-height: 30px; padding: 4px 8px; line-height: 20px; font-size: 14px; border-radius: 4px;
}
.form-select-sm, .input-group-sm > .form-select { padding-right: 28px; background-position: right 8px center; }
.form-control-lg, .form-select-lg { min-height: 44px; padding: 11px 14px; line-height: 20px; font-size: 16px; }
.form-select-lg { padding-right: 40px; }
textarea.form-control { min-height: 60px; }
textarea.form-control-sm { min-height: 52px; }
.form-control-color { height: 36px; min-height: 0; width: 48px; padding: 4px; }
.form-control-color.form-control-sm { height: 30px; }
.form-label, .form-label.small, label.small, .form-check-label, .form-check-label.small {
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ui-text-2);
}
.form-label { margin-bottom: 4px; }
.form-check-label { font-weight: 400; color: var(--ui-text); }
.form-text { font-size: 12px; margin-top: 4px; }
/* phones: 16px text in every control so iOS doesn't zoom on focus */
@media (max-width: 767.98px) {
  .form-control, .form-select, .ts-wrapper .ts-control, .ts-wrapper .ts-control input { font-size: 16px !important; }
}
.form-check-input:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.form-text { color: var(--ui-text-3); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--ui-danger); }
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { font-variant-numeric: tabular-nums; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---------- Tom Select (searchable dropdowns) ---------- */
/* Theme model: a .form-select/.form-control wrapper draws the border (its inner .ts-control is
   `border:none!important`), so the wrapper reuses the input look above; bare selects keep it on .ts-control. */
.ts-wrapper.form-select, .ts-wrapper.form-control { border-color: var(--ui-border-strong); background-color: var(--ui-surface); }
.ts-wrapper:not(.form-select):not(.form-control) .ts-control { border-color: var(--ui-border-strong); border-radius: var(--ui-radius-sm); }
.ts-wrapper.form-select.focus, .ts-wrapper.form-control.focus,
.ts-wrapper:not(.form-select):not(.form-control).focus .ts-control { border-color: var(--ui-accent); box-shadow: var(--ui-ring); }
.ts-wrapper.form-select.disabled, .ts-wrapper.form-control.disabled { background-color: #f3f4f6; }
.ts-wrapper.single .ts-control { cursor: pointer; }
/* the arrow is the wrapper's .form-select background, but Tom Select zeroes the wrapper padding: the inner
   control keeps the arrow's space so text and the arrow never overlap (every dropdown, both sizes) */
.ts-wrapper.form-select.single .ts-control { padding-right: 36px !important; }
.ts-wrapper.form-select-sm.single .ts-control { padding-right: 30px !important; }
.form-select-sm { padding-right: 30px; background-position: right 8px center; }
/* long option labels truncate inside the control instead of spilling past it */
.ts-wrapper.single:not(.input-active) .ts-control { flex-wrap: nowrap; overflow: hidden; }
.ts-wrapper.single:not(.input-active) .ts-control > .item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.single.has-items:not(.input-active) .ts-control > input { flex: 0 1 0; min-width: 0; }
.ts-wrapper.multi .ts-control > .item {
  background: var(--ui-accent-soft); color: #7a3d08; border: 1px solid #f3d3b4; border-radius: 4px;
}
.ts-dropdown {
  z-index: 2000;
  background: var(--ui-surface);  /* the bootstrap5 theme leaves it transparent: fields below showed through */
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-3);
  margin-top: 4px;
  overflow: hidden;
  font-size: 14px;
}
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { padding: 7px 12px; }
.ts-dropdown .active { background: var(--ui-accent-soft); color: var(--ui-text); }
.ts-dropdown .selected { font-weight: 600; }
.ts-dropdown .dropdown-input-wrap { padding: 6px; border-bottom: 1px solid var(--ui-border); }
.ts-dropdown .dropdown-input {
  border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); padding: 5px 8px; width: 100%;
}
.ts-dropdown .dropdown-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-ring); }
.ts-dropdown .highlight { background: var(--ui-highlight); border-radius: 3px; }
/* Tom Select follows the form scale above: the wrapper carries the border and height, .ts-control the padding */
.ts-wrapper.form-select, .ts-wrapper.form-control { min-height: 36px; font-size: 14px; }
.ts-wrapper.form-select .ts-control, .ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select.single.input-active .ts-control, .ts-wrapper.form-control.single.input-active .ts-control,
.ts-wrapper.form-select.has-items .ts-control, .ts-wrapper.form-control.has-items .ts-control {
  min-height: 34px; padding-top: 7px; padding-bottom: 7px; padding-left: 12px; line-height: 20px; font-size: 14px;
}
.ts-wrapper.form-select-sm, .ts-wrapper.form-control-sm, .input-group-sm > .ts-wrapper { min-height: 30px; }
.ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control, .input-group-sm > .ts-wrapper .ts-control,
.ts-wrapper.form-select-sm.has-items .ts-control, .ts-wrapper.form-control-sm.has-items .ts-control,
.input-group-sm > .ts-wrapper.has-items .ts-control {
  min-height: 28px; padding-top: 4px; padding-bottom: 4px; padding-left: 8px; font-size: 14px;
}
.ts-wrapper.form-select-lg, .ts-wrapper.form-control-lg { min-height: 44px; }
.ts-wrapper.form-select-lg .ts-control, .ts-wrapper.form-control-lg .ts-control { min-height: 42px; padding-top: 11px; padding-bottom: 11px; font-size: 16px; }
/* An open single select keeps its idle size: the default-size rule above (.single.input-active) would otherwise grow a
   -sm / -lg field, and flex-wrap would drop the search box under the selected text (30px -> 36px / 56px). */
.ts-wrapper.form-select-sm.single.input-active .ts-control, .ts-wrapper.form-control-sm.single.input-active .ts-control,
.input-group-sm > .ts-wrapper.single.input-active .ts-control {
  min-height: 28px; padding-top: 4px; padding-bottom: 4px; padding-left: 8px;
}
.ts-wrapper.form-select-lg.single.input-active .ts-control, .ts-wrapper.form-control-lg.single.input-active .ts-control {
  min-height: 42px; padding-top: 11px; padding-bottom: 11px;
}
.ts-wrapper.single.input-active .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single.input-active .ts-control > .item { min-width: 0; flex: 0 1 auto; }
.ts-wrapper.single.input-active .ts-control > input { flex: 1 1 0; min-width: 0; }
.ts-control > input { font-size: inherit !important; }
.ts-dropdown { font-size: 14px; }
.input-group > .ts-wrapper { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .ts-wrapper:not(:first-child) .ts-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .ts-wrapper:not(:last-child) .ts-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---------- Data grids ---------- */
.table {
  --tblr-table-hover-bg: #f7f8fa;
  --tblr-table-striped-bg: #fafbfc;
  --tblr-table-border-color: var(--ui-border);
  color: var(--ui-text);
  margin-bottom: 0;
}
.table > thead > tr > th, table.styled thead th {
  background: #f7f8fa;
  color: var(--ui-text-2);
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--ui-border);
  white-space: nowrap;
}
.table > tbody > tr > td { border-bottom-color: var(--ui-row-divider); font-size: 13px; }
/* headers line up with their (left-aligned) cells; .centered-rows tables keep their centring */
.table:not(.centered-rows) > thead > tr > th { text-align: left; }
.table > tbody > tr:hover > td { background-color: #f7f8fa; }
.table > tbody > tr > td.num, .table > thead > tr > th.num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-responsive {
  position: relative; /* clip .visually-hidden headers too, or they stretch the page sideways */
  border-radius: var(--ui-radius);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}
/* ---------- Data grids: ui.js turns records tables into AG Grid (theme colours come from the --ui-* tokens) ---------- */
.ui-ag-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; font-size: 12px; color: var(--ui-text-3);
}
.ui-ag-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.ui-ag-toolbar .btn { font-size: 12px; padding: 2px 10px; }
.ui-ag-quick { width: 14rem; max-width: 100%; }
.ui-ag-sfilter { width: 100%; min-width: 0; }  /* server grid header filter (Enter filters every page) */
.ui-page-sizes a { text-decoration: none; }
.ui-ag-view { max-height: 60vh; overflow-y: auto; }
/* active filters: removable chips + "Clear all" (24px+ targets) */
.ui-ag-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 10px 8px; font-size: 12px; }
.ui-ag-chips-label { color: var(--ui-text-3); }
.ui-ag-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; font-size: 12px;
  color: var(--ui-text); background: var(--ui-accent-soft); border: 1px solid var(--ui-accent-border); border-radius: var(--ui-radius-sm);
}
.ui-ag-chip:hover { border-color: var(--ui-accent); }
.ui-ag-chip i { color: var(--ui-text-3); }
.ui-ag-clear { font-size: 12px; padding: 0 4px; min-height: 24px; }
.ui-ag-empty { color: var(--ui-text-3); }
/* AG keeps 150px under short grids for its "no rows" message; one line of message needs 48px */
.ui-ag .ag-layout-auto-height :is(.ag-center-cols-viewport, .ag-center-cols-container, .ag-pinned-left-cols-container, .ag-pinned-right-cols-container) { min-height: 48px; }
/* cells: vertically centred; one line with an ellipsis (tooltip shows the rest), except description columns */
/* AG's container-type and content-visibility make the grid the containing block of fixed-position menus, clipping them */
.ui-ag .ag-root-wrapper { container-type: normal; content-visibility: visible; }
.ui-ag .ag-cell { display: flex; align-items: center; overflow: hidden; }
.ui-ag .ag-cell :is(.ag-cell-wrapper, .ag-cell-value) { flex: 1 1 0%; min-width: 0; max-width: 100%; }  /* auto-height wrappers */
.ui-ag .ag-cell.ag-right-aligned-cell { justify-content: flex-end; }
.ui-ag .ag-right-aligned-cell .ui-ag-cell { text-align: right; }
.ui-ag-cell { flex: 1 1 0%; min-width: 0; max-width: 100%; line-height: 1.4; padding-block: 8px; }
.ui-ag-cell > :last-child { margin-bottom: 0; }
.ui-ag .ag-cell:not(.ui-ag-wrap) .ui-ag-cell,
.ui-ag .ag-cell:not(.ui-ag-wrap) .ui-ag-cell > :is(div, p, small, span) {
  white-space: nowrap; overflow: clip; overflow-clip-margin: 4px; text-overflow: ellipsis;  /* margin keeps focus rings */
}
.ui-ag .ag-cell.ui-ag-wrap .ui-ag-cell { white-space: normal; }
/* an opened <details> edit form in a cell (godown rent leases) takes its own line at the cell width, so its fields are
   not clipped beside the buttons; the row grows with it (autoHeight) */
.ui-ag .ui-ag-cell details[open] { display: block !important; white-space: normal; margin-top: .25rem; }
/* an inline form in a cell (qty + bin + button) keeps its natural width; its column is sized to it (ui.js formCol) */
.ui-ag .ui-ag-cell form:is(.d-flex, .d-inline-flex) > * { flex-shrink: 0; }
.ui-ag .ui-ag-cell form:is(.d-flex, .d-inline-flex) > :is(.form-control, .form-select):not([class*="w-"]) { width: 8rem; }
.ui-ag .ui-ag-center .ui-ag-cell { text-align: center; }
.ui-ag .ag-header-cell.ui-ag-center .ag-header-cell-label { justify-content: center; }
/* density: compact for people who live in the grid, spacious for occasional/touch use */
.ui-ag[data-density="compact"] .ui-ag-cell { padding-block: 3px; }
.ui-ag[data-density="spacious"] .ui-ag-cell { padding-block: 14px; }
.ui-ag .ui-ag-total { font-weight: 600; }
/* row tints the templates put on <tr> */
.ui-ag .ag-row.table-success { background: var(--ui-success-soft); }
.ui-ag .ag-row.table-warning { background: var(--ui-warning-soft); }
.ui-ag .ag-row.table-danger { background: var(--ui-danger-soft); }
.ui-ag .ag-row.table-info { background: var(--ui-info-soft); }
.ui-ag .ag-row:is(.table-secondary, .table-active, .table-light) { background: var(--ui-neutral-soft); }

/* ---------- KPI stat cards: .card.ui-stat.ui-stat-{info|success|warning|danger|neutral} ---------- */
/* status is a small dot before the label plus the tinted icon, not a coloured stripe on the card edge */
.ui-stat :is(h6, .h6)::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: var(--ui-stat, var(--ui-border-strong));
}
.ui-stat :is(h6, .h6) { color: var(--ui-text-3); font-size: 12.5px; font-weight: 500; opacity: 1 !important; }
.ui-stat :is(h3, .h3) { color: var(--ui-text); font-weight: 700; font-variant-numeric: tabular-nums; }
/* tint only the card's own marker icon (header / KPI icon), not icons inside its table or empty state */
.ui-stat > .card-header .fas, .ui-stat > .card-body > .d-flex > div > .fas,
.ui-stat > .card-body > .d-flex > div > .far { color: var(--ui-stat, var(--ui-text-3)); }
.ui-stat-info { --ui-stat: var(--ui-info); }
.ui-stat-success { --ui-stat: var(--ui-success); }
.ui-stat-warning { --ui-stat: var(--ui-warning); }
.ui-stat-danger { --ui-stat: var(--ui-danger); }
.ui-stat-neutral { --ui-stat: var(--ui-text-3); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .35em .65em; }

/* ---------- Semantic text: Bootstrap's yellow/cyan are fills, not text colours (1.6–1.9:1 on white) ---------- */
.text-warning { color: var(--ui-warning) !important; }
.text-info { color: var(--ui-info) !important; }
.btn-outline-warning {
  --tblr-btn-color: var(--ui-warning); --tblr-btn-border-color: var(--ui-warning);
  --tblr-btn-hover-bg: var(--ui-warning); --tblr-btn-hover-border-color: var(--ui-warning); --tblr-btn-hover-color: #fff;
  --tblr-btn-active-bg: var(--ui-warning); --tblr-btn-active-color: #fff;
}

/* ---------- Bootstrap components that hard-code #0d6efd blue instead of reading --tblr-primary ---------- */
.nav-pills { --tblr-nav-pills-link-active-bg: var(--ui-accent); --tblr-nav-pills-link-active-color: #fff; --tblr-nav-link-color: var(--ui-link); --tblr-nav-link-hover-color: var(--ui-link-hover); }
.progress { --tblr-progress-bar-bg: var(--ui-accent); }
.list-group { --tblr-list-group-active-bg: var(--ui-accent); --tblr-list-group-active-border-color: var(--ui-accent); }
.dropdown-menu { --tblr-dropdown-link-active-bg: var(--ui-accent-soft); --tblr-dropdown-link-active-color: var(--ui-text); }
.btn-link { --tblr-btn-color: var(--ui-link); --tblr-btn-hover-color: var(--ui-link-hover); }

/* WMS KPI icon tiles: one quiet treatment instead of a different pastel per card */
.wms-kpi-icon { background: var(--ui-subtle) !important; color: var(--ui-text-3) !important; border: 1px solid var(--ui-border); }

/* ---------- Pagination ---------- */
.pagination {
  --tblr-pagination-color: var(--ui-text-2);
  --tblr-pagination-border-color: var(--ui-border);
  --tblr-pagination-hover-bg: #f2f4f7;
  --tblr-pagination-hover-color: var(--ui-text);
  --tblr-pagination-active-bg: var(--ui-accent);
  --tblr-pagination-active-border-color: var(--ui-accent);
  --tblr-pagination-focus-box-shadow: var(--ui-ring);
}

/* ---------- Tabs / nav ---------- */
.nav-tabs { border-bottom-color: var(--ui-border); }
.nav-tabs .nav-link { color: var(--ui-text-2); border: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--ui-text); border-bottom-color: var(--ui-border-strong); }
.nav-tabs .nav-link.active { color: var(--ui-link); background: transparent; border-bottom-color: var(--ui-accent); }

/* ---------- Modals / offcanvas / dropdowns ---------- */
.modal-content { border: 0; box-shadow: var(--ui-shadow-3); }
.modal-header { border-bottom: 1px solid var(--ui-border); padding: 14px 20px; }
.modal-title { font-size: 16px; font-weight: 650; }
.modal-body { padding: 18px 20px; }
.modal-footer { border-top: 1px solid var(--ui-border); background: var(--ui-subtle); border-radius: 0 0 8px 8px; padding: 10px 20px; }
.modal-backdrop.show { opacity: .45; }
.offcanvas { box-shadow: var(--ui-shadow-3); border-left: 1px solid var(--ui-border) !important; }
.offcanvas-header { border-bottom: 1px solid var(--ui-border); padding: 14px 20px; }
.offcanvas-title { font-weight: 650; font-size: 16px; }
.dropdown-menu { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-2); padding: 4px; }
.dropdown-item { border-radius: 4px; padding: 6px 10px; }
.dropdown-item:active, .dropdown-item.active { background: var(--ui-accent-soft); color: var(--ui-text); }

/* ---------- Alerts (inline flash) ---------- */
/* Bootstrap's tinted fill + matching 1px border carry the status; no side stripe */
.alert { border-radius: var(--ui-radius); border-width: 1px; box-shadow: var(--ui-shadow-1); }

/* ---------- Toasts ---------- */
#globalToastContainer { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ui-toast {
  display: flex; align-items: flex-start; gap: 10px;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--ui-surface); color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-3);
  padding: 12px 12px 12px 14px; font-size: 13px; line-height: 1.4;
  animation: ui-toast-in .18s ease-out;
}
.ui-toast.hiding { animation: ui-toast-out .16s ease-in forwards; }
.ui-toast .ui-toast-icon { flex: 0 0 auto; width: 18px; text-align: center; margin-top: 1px; color: var(--ui-info); }
.ui-toast .ui-toast-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ui-toast .ui-toast-title { font-weight: 650; margin-bottom: 1px; }
.ui-toast .btn-close { flex: 0 0 auto; font-size: 11px; margin-top: 3px; }
/* status = coloured icon + a status-tinted 1px border */
.ui-toast-info { border-color: color-mix(in srgb, var(--ui-info) 45%, var(--ui-border)); }
.ui-toast-success { border-color: color-mix(in srgb, var(--ui-success) 45%, var(--ui-border)); } .ui-toast-success .ui-toast-icon { color: var(--ui-success); }
.ui-toast-danger { border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border)); } .ui-toast-danger .ui-toast-icon { color: var(--ui-danger); }
.ui-toast-warning { border-color: color-mix(in srgb, var(--ui-warning) 45%, var(--ui-border)); } .ui-toast-warning .ui-toast-icon { color: var(--ui-warning); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ---------- SweetAlert2 (confirm / prompt dialogs) ---------- */
.swal2-popup { font-family: inherit !important; }
.swal2-title { font-size: 18px !important; font-weight: 650 !important; color: var(--ui-text) !important; }
.swal2-html-container { font-size: 14px !important; color: var(--ui-text-2) !important; }
.swal2-actions { gap: 8px; }
.swal2-actions .btn { min-width: 96px; }

/* ---------- Type scale: the only font sizes templates should use (no inline px sizes, nothing under 11px) ---------- */
.ui-fs-xs { font-size: 11px !important; }
.ui-fs-sm { font-size: 12px !important; }
.ui-fs-base { font-size: 13px !important; }
.ui-fs-md { font-size: 14px !important; }
.ui-fs-lg { font-size: 16px !important; }
.ui-fs-xl { font-size: 18px !important; }
.ui-fs-2xl { font-size: 20px !important; }
.ui-fs-3xl { font-size: 28px !important; line-height: 1.2; }

/* ---------- Sizing utilities: templates use these instead of inline style="width: ...".
   Column widths snap to one scale so grids line up from page to page. ---------- */
.w-px-40 { width: 40px; } .w-px-60 { width: 60px; } .w-px-80 { width: 80px; } .w-px-100 { width: 100px; }
.w-px-120 { width: 120px; } .w-px-140 { width: 140px; } .w-px-160 { width: 160px; } .w-px-180 { width: 180px; }
.w-px-200 { width: 200px; } .w-px-240 { width: 240px; } .w-px-280 { width: 280px; }
.w-pct-10 { width: 10%; } .w-pct-15 { width: 15%; } .w-pct-20 { width: 20%; } .w-pct-25 { width: 25%; }
.w-pct-30 { width: 30%; } .w-pct-35 { width: 35%; } .w-pct-40 { width: 40%; } .w-pct-50 { width: 50%; }
.min-w-px-120 { min-width: 120px; } .min-w-px-160 { min-width: 160px; } .min-w-px-200 { min-width: 200px; }
.min-w-px-240 { min-width: 240px; }
.max-w-px-80 { max-width: 80px; } .max-w-px-120 { max-width: 120px; } .max-w-px-160 { max-width: 160px; }
.max-w-px-200 { max-width: 200px; } .max-w-px-240 { max-width: 240px; } .max-w-px-280 { max-width: 280px; }
.max-w-px-320 { max-width: 320px; } .max-w-px-480 { max-width: 480px; } .max-w-px-720 { max-width: 720px; }
.max-w-px-900 { max-width: 900px; }
.max-h-px-200 { max-height: 200px; } .max-h-px-280 { max-height: 280px; } .max-h-px-320 { max-height: 320px; }
.max-h-px-600 { max-height: 600px; }
.min-h-px-20 { min-height: 20px; } .min-h-px-120 { min-height: 120px; } .min-h-px-240 { min-height: 240px; }
.ws-pre-line { white-space: pre-line; } .ws-pre-wrap { white-space: pre-wrap; }
/* side panels: one narrow and one wide width (layout default is 600px) */
.offcanvas.offcanvas-narrow { width: 460px; max-width: 100vw; }
.offcanvas.offcanvas-wide { width: 600px; max-width: 100vw; }
/* decorative icons: big faded icon on stat cards, empty-state icon, square icon tile */
.ui-icon-watermark { font-size: 40px; opacity: .3; line-height: 1; }
.ui-icon-empty { font-size: 48px; color: var(--ui-text-3); opacity: .5; }
.ui-icon-box, .ui-icon-box-sm { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: var(--ui-radius-sm); }
.ui-icon-box-sm { width: 32px; height: 32px; }
/* lot genealogy: event marker on the timeline rail; destination bin of a move */
.ui-timeline-dot { width: 12px; height: 12px; left: -21px; top: 4px; }
.wms-bin-badge.wms-bin-badge-target { border-color: var(--ui-success-border); color: var(--ui-success-text); background-color: var(--ui-success-soft); }
.draggable-chemical { cursor: grab; }

/* ---------- Product voice: typography and shape ----------
   Deliberately not the generic template look: no shouted letter-spaced micro-labels, no pill tags,
   no floating soft-shadow cards. Sentence case, squared tags, hairline borders, tight corners. */
code, kbd, samp, .font-monospace, .wms-lot-code {
  font-family: var(--tblr-font-monospace);
}
.text-uppercase, .table > thead > tr > th, table.styled thead th, .master-table thead th, .wms-table thead th,
.wms-kpi-label, .ui-stat :is(h6, .h6), .sidebar-section-divider, .sidebar .nav-group-header {
  text-transform: none !important; letter-spacing: 0 !important;
}
.table > thead > tr > th, table.styled thead th, .master-table thead th, .wms-table thead th { font-size: 12.5px; font-weight: 600; }
.ui-stat :is(h6, .h6), .wms-kpi-label { font-size: 12.5px; font-weight: 500; }
.sidebar-section-divider, .sidebar .nav-group-header { font-size: 12px; font-weight: 600; }
.page-title { font-weight: 600; letter-spacing: 0; }
.badge, .badge-status, [class*="master-badge-"], [class*="master-type-"] { border-radius: 3px !important; }
.card, .card-pro, .master-card, .master-table-card, .wms-table-card, .wms-kpi-card, .wms-filter-card {
  border-radius: 6px !important; box-shadow: none !important;
}
/* cards that relied on a shadow instead of a border still need an edge */
.card.border-0 { border: 1px solid var(--ui-border) !important; }
.shadow-sm, .shadow { box-shadow: none !important; }
.rounded-3, .rounded-4 { border-radius: 6px !important; }
.btn, .form-control, .form-select, .input-group-text, .ts-wrapper.form-select, .ts-wrapper.form-control { border-radius: 4px; }
.modal-content { border-radius: 8px; }
.ui-toast { border-radius: 6px; }

/* dialogs: plain, left-aligned, no animated icon */
.swal2-popup { text-align: left !important; border-radius: 8px !important; width: 30em !important; padding: 20px 22px 16px !important; }
.swal2-title { text-align: left !important; padding: 0 !important; font-size: 18px !important; font-weight: 600 !important; }
.swal2-html-container { text-align: left !important; margin: 8px 0 0 !important; padding: 0 !important; }
.swal2-textarea { margin: 12px 0 0 !important; width: 100% !important; font-size: 14px !important; }
.swal2-validation-message { margin: 8px 0 0 !important; justify-content: flex-start !important; }
.swal2-actions { justify-content: flex-end !important; width: 100% !important; margin: 18px 0 0 !important; }

/* ---------- Page components (moved out of the templates' own <style> blocks) ---------- */
/* COR wizard step tabs (cor_page.html) */
.step-indicator-container { border-bottom: 2px solid var(--ui-border); }
.step-tab-btn { background: transparent; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  transition: all .2s ease-in-out; cursor: pointer; }
.step-tab-btn.active { border-bottom-color: var(--ui-accent); background: var(--tblr-body-bg); }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--ui-border); color: var(--ui-text-2); font-weight: 600; font-size: 12px; transition: all .2s ease; }
.step-tab-btn.active .step-badge { background: var(--ui-accent); color: #fff; }
.step-tab-btn.completed .step-badge { background: var(--ui-success); color: #fff; }
.step-title { color: var(--ui-text-2); font-size: 14px; }
.step-tab-btn.active .step-title { color: var(--ui-link); }
.step-panel { animation: ui-fade-in .25s ease-in-out; }
@keyframes ui-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Lot genealogy tabs (wms/lot_genealogy.html) */
#genealogyTabs { border-bottom: 1px solid var(--ui-border); gap: 2px; }
#genealogyTabs .nav-link { color: var(--ui-text-3); border: none; border-bottom: 3px solid transparent; background: transparent;
  border-radius: 0; transition: color .15s ease, border-color .15s ease; }
#genealogyTabs .nav-link:hover { color: var(--ui-link); border-bottom-color: var(--ui-border-strong); background: var(--ui-hover); }
#genealogyTabs .nav-link.active { color: var(--ui-link) !important; background-color: transparent !important; border: none !important;
  border-bottom: 3px solid var(--ui-accent) !important; font-weight: 600 !important; }

/* QC test-parameter chips (qc_sample_create.html) */
.parameter-tag { display: inline-flex; align-items: center; background: var(--ui-accent-soft); border: 1px solid #f3d3b4;
  border-radius: 3px; padding: 4px 10px; margin: 3px; font-size: 14px; color: #7a3d08; }
.parameter-tag .remove-btn { background: none; border: none; color: var(--ui-danger); font-size: 16px; margin-left: 8px;
  cursor: pointer; padding: 0; line-height: 1; }

/* User management summary and table (user_management.html) */
.user-summary-card { min-height: 92px; }
.user-summary-icon { width: 42px; height: 42px; border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-accent);
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
.user-actions .dropdown-menu { min-width: 190px; }
.user-actions form .dropdown-item { width: 100%; text-align: left; }
.user-table th, .user-table td { vertical-align: middle; }
@media (max-width: 900px) {
  .user-table-wrap { overflow-x: auto; }
  .user-toolbar { align-items: flex-start !important; gap: 10px; flex-direction: column; }
}

/* ---------- Sign-in page (login.html). The brand panel carries data-bs-theme="dark", so it reads the dark tokens. ---------- */
/* the app frame locks html/body scrolling (panes scroll instead); the sign-in page scrolls as a whole on short screens */
html:has(.login-shell), body:has(.login-shell) { height: auto; overflow: auto; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 5fr) 7fr; }
.login-brand { position: relative; background: var(--ui-surface); color: var(--ui-text); padding: 40px 56px 32px;
  display: flex; flex-direction: column; gap: 40px; justify-content: space-between; }
.login-brand .logo-chip { align-self: flex-start; background: #fff; border-radius: 6px; padding: 8px 12px; line-height: 0; }
.login-brand .logo-chip img { height: 36px; width: auto; }
.login-brand .product { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.login-brand .product-mark { width: 44px; height: 44px; border-radius: 8px; background: var(--ui-accent); color: #fff;
  display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.login-brand h1 { font-size: 28px; font-weight: 700; line-height: 1.15; margin: 0; color: var(--ui-text); }
.login-brand .tagline { color: var(--ui-text-2); font-size: 16px; line-height: 1.5; max-width: 44ch; margin: 0; }
.login-brand ul { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; max-width: 46ch; }
.login-brand li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: baseline; }
.login-brand li > i { color: var(--ui-link); font-size: 16px; text-align: center; }
.login-brand li strong { display: block; color: var(--ui-text); font-size: 14px; font-weight: 600; }
.login-brand li span { color: var(--ui-text-2); font-size: 13px; }
.login-brand .vendor { border-top: 1px solid var(--ui-border); padding-top: 16px; font-size: 13px; color: var(--ui-text-3);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.vendor-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.login-brand .vendor a { color: var(--ui-link); text-decoration: none; font-weight: 500; }
.login-brand .vendor a:hover, .login-brand .vendor a:focus-visible { color: var(--ui-link-hover); text-decoration: underline; }
.login-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 24px 24px; }
.login-card { width: 100%; max-width: 400px; background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: 8px; padding: 32px; box-shadow: var(--ui-shadow-2); }
.login-card h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.login-card .lead-text { color: var(--ui-text-3); margin: 0 0 24px; font-size: 14px; }
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 44px; }
.pw-toggle { position: absolute; top: 0; right: 0; height: 44px; width: 44px; border: 0; background: none;
  color: var(--ui-text-3); border-radius: 0 4px 4px 0; }
.pw-toggle:hover { color: var(--ui-text); }
.caps-hint { color: var(--ui-warning); font-size: 12px; margin-top: 4px; }
.remember-hint { display: block; color: var(--ui-text-3); font-size: 12px; margin-top: 4px; }
.demo-access { margin: 0 0 20px; padding: 12px 14px; border: 1px dashed var(--ui-warning); border-radius: 8px; font-size: 13px; }
.demo-title { color: var(--ui-warning); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.demo-row + .demo-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ui-border); }
.demo-row code { display: block; color: var(--ui-text-2, var(--ui-text)); font-size: 12px; word-break: break-all; }
.demo-fill { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--ui-link); text-decoration: none; cursor: pointer; }
.demo-fill:hover, .demo-fill:focus-visible { color: var(--ui-link-hover); text-decoration: underline; }
.login-card .help { color: var(--ui-text-3); font-size: 13px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ui-border); }
.login-card .help a, .login-foot a { color: var(--ui-link); text-decoration: none; }
.login-foot { display: none; margin-top: 24px; font-size: 12px; color: var(--ui-text-3); text-align: center; }
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { padding: 24px 24px 20px; gap: 0; }
  .login-brand ul, .login-brand .tagline, .login-brand .vendor { display: none; }
  .login-brand .product { margin: 16px 0 0; }
  .login-brand h1 { font-size: 18px; }
  .login-main { justify-content: flex-start; padding-top: 28px; }
  .login-card { padding: 24px 20px; box-shadow: none; }
  .login-foot { display: block; }
  .login-foot .vendor-links { justify-content: center; margin-top: 8px; }
}

/* Print rules live in print.css (linked with media="print" from layout_admin.html). */

@media (prefers-reduced-motion: reduce) {
  .ui-toast, .ui-toast.hiding { animation: none; }
  .btn[aria-busy="true"]::before { animation: none; }
}

/* =====================================================================================================
   Dark theme. Applied when theme.js sets <html data-bs-theme="dark"> (user choice or OS preference), and always on
   the handheld WMS pages, which hard-code data-bs-theme="dark" because they draw a dark ground.
   Pages without either (login, print) keep their own look.
   Bootstrap 5.3 handles its components; below: our tokens + the layout chrome that hard-codes light colours.
   ===================================================================================================== */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --ui-accent-soft: rgba(240, 160, 80, 0.14);
  --ui-ring: 0 0 0 3px rgba(240, 160, 80, 0.35);
  --ui-bg: #0f141b;
  --ui-surface: #171d26;
  --ui-border: #2a313d;
  --ui-border-strong: #3b4452;
  --ui-text: #e7eaf0;
  --ui-text-2: #b9c1ce;
  --ui-text-3: #939cab;       /* 6.0:1 on surface */
  --ui-success: #3fb27f;
  --ui-danger: #f0736a;
  --ui-warning: #e9a23b;
  --ui-info: #6aa5f0;
  --ui-success-soft: rgba(63, 178, 127, 0.16); --ui-success-border: rgba(63, 178, 127, 0.35); --ui-success-text: #7fd4ab;
  --ui-warning-soft: rgba(233, 162, 59, 0.16); --ui-warning-border: rgba(233, 162, 59, 0.35); --ui-warning-text: #f0c27a;
  --ui-danger-soft: rgba(240, 115, 106, 0.16); --ui-danger-border: rgba(240, 115, 106, 0.35); --ui-danger-text: #f6a39d;
  --ui-info-soft: rgba(106, 165, 240, 0.16);   --ui-info-border: rgba(106, 165, 240, 0.35);   --ui-info-text: #a3c8f6;
  --ui-neutral-soft: rgba(147, 156, 171, 0.14);
  --ui-border-hover: #4b5563;
  --ui-row-divider: var(--ui-border);
  --ui-highlight: rgba(240, 160, 80, 0.3);
  --ui-accent-border: rgba(240, 160, 80, 0.4);
  --ui-scrim: rgba(0, 0, 0, .55);
  --ui-link: #f0a050;
  --ui-link-hover: #f6bd84;
  --ui-hover: #1e2530;
  --ui-subtle: #131922;
  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ui-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --ui-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55);
  --tblr-body-bg: var(--ui-bg);
  --tblr-body-color: var(--ui-text);
  --tblr-body-color-rgb: 231, 234, 240;     /* = dark --ui-text */
  --tblr-secondary-color: var(--ui-text-2);
  --tblr-tertiary-bg: var(--ui-subtle);
  --tblr-secondary-bg: var(--ui-hover);
  --tblr-border-color: var(--ui-border);
  --tblr-link-color-rgb: 240, 160, 80;
  --tblr-link-hover-color-rgb: 246, 189, 132;
  --tblr-emphasis-color: #fff;
}
[data-bs-theme="dark"] body { background: var(--ui-bg); color: var(--ui-text); }

/* shell: the frame reads the --ui-* tokens, so only these need a dark rule */
[data-bs-theme="dark"] .sidebar-brand img { background: #fff; border-radius: 6px; padding: 2px 6px; } /* logo artwork is for light grounds */
[data-bs-theme="dark"] .sidebar-backdrop { background: var(--ui-scrim); }
[data-bs-theme="dark"] .skip-link { background: var(--ui-surface); color: var(--ui-text); }

/* cards, tables and helpers from the layout that hard-code white / slate */
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-pro, [data-bs-theme="dark"] .wms-kpi-card, [data-bs-theme="dark"] .wms-filter-card,
[data-bs-theme="dark"] .wms-table-card, [data-bs-theme="dark"] .wms-table-card .card-header, [data-bs-theme="dark"] .master-table-card,
[data-bs-theme="dark"] .master-card,
[data-bs-theme="dark"] .master-card-header, [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .ui-toast {
  background-color: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text);
}
[data-bs-theme="dark"] .card-footer, [data-bs-theme="dark"] .modal-footer, [data-bs-theme="dark"] .master-card-footer,
[data-bs-theme="dark"] .master-topology-alert { background: var(--ui-subtle); border-color: var(--ui-border); color: var(--ui-text-2); }
[data-bs-theme="dark"] .wms-kpi-label, [data-bs-theme="dark"] .master-cell-sub { color: var(--ui-text-3); }
[data-bs-theme="dark"] .wms-kpi-value, [data-bs-theme="dark"] .master-cell-title { color: var(--ui-text); }
[data-bs-theme="dark"] .wms-lot-code { color: var(--ui-info); }
[data-bs-theme="dark"] .table { --tblr-table-bg: transparent; --tblr-table-color: var(--ui-text); --tblr-table-hover-bg: var(--ui-hover); --tblr-table-striped-bg: var(--ui-subtle); --tblr-table-border-color: var(--ui-border); color: var(--ui-text); }
[data-bs-theme="dark"] .table > thead > tr > th, [data-bs-theme="dark"] table.styled thead th,
[data-bs-theme="dark"] .wms-table-card .table thead th, [data-bs-theme="dark"] .wms-table thead th,
[data-bs-theme="dark"] .master-table thead th { background: var(--ui-subtle) !important; color: var(--ui-text-2) !important; border-bottom-color: var(--ui-border) !important; }
[data-bs-theme="dark"] .table > tbody > tr > td, [data-bs-theme="dark"] .master-table tbody td,
[data-bs-theme="dark"] .wms-table tbody td, [data-bs-theme="dark"] .table.styled tbody td { border-bottom-color: var(--ui-border) !important; color: var(--ui-text) !important; }
[data-bs-theme="dark"] .table > tbody > tr:hover > td, [data-bs-theme="dark"] .wms-table tbody tr:hover,
[data-bs-theme="dark"] .master-table tbody tr:hover { background-color: var(--ui-hover) !important; }
[data-bs-theme="dark"] .offcanvas .form-select, [data-bs-theme="dark"] .offcanvas .form-select option { color: var(--ui-text) !important; background-color: var(--ui-surface) !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.active) { color: var(--ui-text-2); }

/* form controls (ui.css light rules set explicit greys) */
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .ts-wrapper.form-select,
[data-bs-theme="dark"] .ts-wrapper.form-control, [data-bs-theme="dark"] .ts-control, [data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-dropdown .dropdown-input { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-strong); }
[data-bs-theme="dark"] .ts-control input { color: var(--ui-text); }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly], [data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .ts-wrapper.form-select.disabled { background-color: var(--ui-subtle); color: var(--ui-text-2); }
[data-bs-theme="dark"] .ts-dropdown .highlight { background: var(--ui-highlight); }
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > .item { color: var(--ui-link); border-color: var(--ui-accent-border); }
[data-bs-theme="dark"] .btn-outline-secondary, [data-bs-theme="dark"] .btn-light {
  --tblr-btn-color: var(--ui-text-2); --tblr-btn-bg: transparent; --tblr-btn-border-color: var(--ui-border-strong);
  --tblr-btn-hover-color: var(--ui-text); --tblr-btn-hover-bg: var(--ui-hover); --tblr-btn-hover-border-color: var(--ui-border-strong);
  --tblr-btn-active-bg: var(--ui-hover); --tblr-btn-active-color: var(--ui-text);
}
[data-bs-theme="dark"] .btn-outline-primary { --tblr-btn-color: var(--ui-link); }

/* layout status pills (.badge-status + tone) */
[data-bs-theme="dark"] .badge-planned { background: var(--ui-warning-soft); color: var(--ui-warning-text); border-color: var(--ui-warning-border); }
[data-bs-theme="dark"] .badge-done { background: var(--ui-success-soft); color: var(--ui-success-text); border-color: var(--ui-success-border); }
[data-bs-theme="dark"] .badge-pending { background: var(--ui-info-soft); color: var(--ui-info-text); border-color: var(--ui-info-border); }
[data-bs-theme="dark"] .badge-skipped { background: var(--ui-neutral-soft); color: var(--ui-text-3); border-color: var(--ui-border-strong); }
[data-bs-theme="dark"] .badge-danger { background: var(--ui-danger-soft); color: var(--ui-danger-text); border-color: var(--ui-danger-border); }
[data-bs-theme="dark"] .badge-info { background: var(--ui-info-soft); color: var(--ui-info-text); border-color: var(--ui-info-border); }

[data-bs-theme="dark"] .master-code-badge, [data-bs-theme="dark"] .wms-bin-badge {
  background-color: var(--ui-subtle) !important; color: var(--ui-text) !important; border-color: var(--ui-border-strong) !important; }
/* masters status / type pills (layout declares these with !important) */
[data-bs-theme="dark"] .master-badge-active, [data-bs-theme="dark"] .master-type-own {
  background-color: var(--ui-success-soft) !important; color: var(--ui-success-text) !important; border-color: var(--ui-success-border) !important; }
[data-bs-theme="dark"] .master-badge-inactive {
  background-color: var(--ui-neutral-soft) !important; color: var(--ui-text-2) !important; border-color: var(--ui-border-strong) !important; }
[data-bs-theme="dark"] .master-badge-blocked {
  background-color: var(--ui-danger-soft) !important; color: var(--ui-danger-text) !important; border-color: var(--ui-danger-border) !important; }
[data-bs-theme="dark"] .master-type-cfa, [data-bs-theme="dark"] .master-type-cold {
  background-color: var(--ui-info-soft) !important; color: var(--ui-info-text) !important; border-color: var(--ui-info-border) !important; }
[data-bs-theme="dark"] .master-type-thirdparty, [data-bs-theme="dark"] .master-type-ambient {
  background-color: var(--ui-warning-soft) !important; color: var(--ui-warning-text) !important; border-color: var(--ui-warning-border) !important; }
[data-bs-theme="dark"] .master-type-staging {
  background-color: var(--ui-neutral-soft) !important; color: var(--ui-text-2) !important; border-color: var(--ui-border-strong) !important; }

/* light-only Bootstrap utilities used across page templates */
[data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light { background-color: var(--ui-surface) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--ui-text) !important; }
[data-bs-theme="dark"] .table-light { --tblr-table-bg: var(--ui-subtle); --tblr-table-color: var(--ui-text); }
[data-bs-theme="dark"] .text-muted { color: var(--ui-text-3) !important; }
/* Bootstrap keeps .text-secondary at #6c757d in dark mode (≈3:1 on our surface) */
[data-bs-theme="dark"] .text-secondary { color: var(--ui-text-2) !important; }
/* brand accent #b8560b is a light-mode text colour; on dark surfaces use the light link tone */
[data-bs-theme="dark"] {
  --tblr-primary-text-emphasis: var(--ui-link);
  --tblr-primary-bg-subtle: rgba(240, 160, 80, 0.14);
  --tblr-primary-border-subtle: rgba(240, 160, 80, 0.35);
}
[data-bs-theme="dark"] .text-primary { color: var(--ui-link) !important; }
/* semantic text colours: Bootstrap's light-mode shades fall under 3:1 on dark surfaces */
[data-bs-theme="dark"] .text-success { color: var(--ui-success) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--ui-danger) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--ui-warning) !important; }
[data-bs-theme="dark"] .text-info { color: var(--ui-info) !important; }
[data-bs-theme="dark"] .btn-outline-dark {
  --tblr-btn-color: var(--ui-text-2); --tblr-btn-border-color: var(--ui-border-strong);
  --tblr-btn-hover-bg: var(--ui-hover); --tblr-btn-hover-color: var(--ui-text); --tblr-btn-hover-border-color: var(--ui-border-strong);
}
/* yellow / cyan fills stay light in both themes, so their text must stay dark */
[data-bs-theme="dark"] .btn-warning, [data-bs-theme="dark"] .btn-info,
[data-bs-theme="dark"] .text-dark.bg-warning, [data-bs-theme="dark"] .text-dark.bg-info,
[data-bs-theme="dark"] .bg-warning .text-dark, [data-bs-theme="dark"] .bg-info .text-dark,
[data-bs-theme="dark"] .text-bg-warning, [data-bs-theme="dark"] .text-bg-info { color: #1d2433 !important; }

/* SweetAlert2 dialogs */
[data-bs-theme="dark"] .swal2-popup { background: var(--ui-surface) !important; color: var(--ui-text) !important; }
[data-bs-theme="dark"] .swal2-title { color: var(--ui-text) !important; }
[data-bs-theme="dark"] .swal2-html-container { color: var(--ui-text-2) !important; }
[data-bs-theme="dark"] .swal2-textarea, [data-bs-theme="dark"] .swal2-input { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-border-strong) !important; }
[data-bs-theme="dark"] .swal2-validation-message { background: var(--ui-subtle) !important; color: var(--ui-text-2) !important; }

/* A4 documents (receipts, challans) keep paper width on phones and scroll inside their own frame,
   instead of reflowing into a column that splits words mid-letter. */
.paper-scroll { overflow-x: auto; }
@media screen and (max-width: 767.98px) {
  .paper-scroll > * { min-width: 720px; }
}

/* lifecycle steppers: four steps per row on phones, one row from tablets up */
.ui-steps { flex-wrap: wrap; row-gap: .5rem; }
.ui-steps > * { flex: 1 0 25%; }
@media (min-width: 768px) {
  .ui-steps > * { flex: 1 1 0; }
}

/* title rows with status badges wrap instead of pushing badges off-screen */
.d-flex:has(> .badge) { flex-wrap: wrap; }

/* ---------- Date pickers (datepicker.js, daterangepicker). daterangepicker.css loads after this file, so the
   selectors start with `body` to win. Colours come from the theme tokens, so dark mode follows. ---------- */
body .daterangepicker {
  background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text);
  font-family: var(--tblr-font-sans-serif); box-shadow: var(--shadow); z-index: 1060;
}
body .daterangepicker::before { border-bottom-color: var(--ui-border); }
body .daterangepicker::after { border-bottom-color: var(--ui-surface); }
body .daterangepicker.drop-up::before { border-top-color: var(--ui-border); }
body .daterangepicker.drop-up::after { border-top-color: var(--ui-surface); }
body .daterangepicker .calendar-table { background: var(--ui-surface); border-color: var(--ui-surface); }
body .daterangepicker .calendar-table .next span,
body .daterangepicker .calendar-table .prev span { border-color: var(--ui-text-2); }
body .daterangepicker td.off, body .daterangepicker td.off.in-range,
body .daterangepicker td.off.start-date, body .daterangepicker td.off.end-date { background: var(--ui-surface); color: var(--ui-text-3); }
body .daterangepicker td.available:hover, body .daterangepicker th.available:hover { background: var(--ui-neutral-soft); color: var(--ui-text); }
body .daterangepicker td.in-range { background: var(--ui-accent-soft); color: var(--ui-text); }
body .daterangepicker td.active, body .daterangepicker td.active:hover { background: var(--ui-accent); color: #fff; }
body .daterangepicker td.disabled, body .daterangepicker option.disabled { color: var(--ui-text-3); }
body .daterangepicker select.monthselect, body .daterangepicker select.yearselect {
  background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 4px;
}
body .daterangepicker .drp-buttons { border-top-color: var(--ui-border); }
body .daterangepicker .drp-selected { color: var(--ui-text-2); }
body .daterangepicker .ranges li:hover { background: var(--ui-neutral-soft); }
body .daterangepicker .ranges li.active { background: var(--ui-accent); color: #fff; }
body .daterangepicker.show-ranges.ltr .drp-calendar.left { border-left-color: var(--ui-border); }
body .daterangepicker .drp-buttons .btn { padding: 4px 10px; }

/* ---------- Camera scanning (scan.js, html5-qrcode): the camera button beside <input data-scan> and its modal. ---------- */
.ui-scan-btn { min-width: 2.25rem; }
.ui-scan-reader { width: 100%; min-height: 12rem; background: var(--ui-neutral-soft); border-radius: 6px; overflow: hidden; }
.ui-scan-reader video { width: 100% !important; display: block; }

/* ---------- File uploads (uploads.js): the real <input type="file"> lies transparent over a drop zone, so clicks
   and the keyboard reach it natively. Colours come from the theme tokens, so dark mode follows. ---------- */
.ui-upload-zone {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 72px;
  padding: 12px 16px; border: 1.5px dashed var(--ui-border-strong); border-radius: var(--ui-radius);
  background: var(--ui-subtle); color: var(--ui-text-2); text-align: center;
  transition: border-color .15s, background-color .15s;
}
.ui-upload-zone:hover { border-color: var(--ui-border-hover); }
.ui-upload-zone.is-over { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-upload-zone:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-ring); }
.ui-upload-zone .ui-upload-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  padding: 0; border: 0; box-shadow: none;
}
.ui-upload-zone .ui-upload-input:disabled { cursor: not-allowed; }
.ui-upload-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; pointer-events: none; }
.ui-upload-prompt > i { font-size: 1.25rem; color: var(--ui-text-3); }
.ui-upload-prompt strong { color: var(--ui-link); font-weight: 600; }
.ui-upload-prompt small { flex-basis: 100%; color: var(--ui-text-3); }
.ui-upload-list { list-style: none; margin: 0; padding: 0; }
.ui-upload-list:not(:empty) { margin-top: 6px; }
.ui-upload-file {
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-text);
}
.ui-upload-file + .ui-upload-file { margin-top: 4px; }
.ui-upload-thumb {
  flex: none; width: 32px; height: 32px; border-radius: 4px; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; background: var(--ui-neutral-soft); color: var(--ui-text-3);
}
.ui-upload-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-upload-size { flex: none; color: var(--ui-text-3); font-variant-numeric: tabular-nums; }
.ui-upload-remove { flex: none; min-width: 28px; min-height: 28px; }
.ui-upload-msg { margin-top: 4px; color: var(--ui-danger-text); font-size: .8125rem; }

/* ---------- Form helpers (forms.js): amount/quantity readouts, auto-growing textareas with a character counter,
   the keyboard shortcuts dialog. ---------- */
.ui-readout { color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
textarea.form-control:not([data-no-autogrow]) { field-sizing: content; min-height: 4.5rem; max-height: 60vh; }
.ui-counter { text-align: right; color: var(--ui-text-3); font-variant-numeric: tabular-nums; }
.ui-counter.ui-counter-near { color: var(--ui-warning-text); }
.ui-shortcuts { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center; }
.ui-shortcuts dd { margin: 0; color: var(--ui-text-2); }
.ui-shortcuts kbd { background: var(--ui-neutral-soft); color: var(--ui-text); border: 1px solid var(--ui-border); }

/* =====================================================================================================
   Charts (static/js/charts.js): series colours beyond the status tokens. charts.js reads --ui-<name>
   for its palette (accent, info, success, chart-6, danger, chart-7, warning, chart-8, text-3).
   ===================================================================================================== */
:root { --ui-chart-6: #7048e8; --ui-chart-7: #0c8599; --ui-chart-8: #e8590c; }
[data-bs-theme="dark"] { --ui-chart-6: #9775fa; --ui-chart-7: #3bc9db; --ui-chart-8: #ff922b; }

/* =====================================================================================================
   Type-ahead (static/js/suggest.js): the list of earlier values under an <input data-suggest>.
   ===================================================================================================== */
.suggest-list { position: absolute; z-index: 1060; top: 100%; left: 0; right: 0; max-height: 16rem; overflow-y: auto; background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: 6px; }
.suggest-list .list-group-item { cursor: pointer; overflow-wrap: anywhere; background: var(--ui-surface); }
.suggest-list .list-group-item.active { background: var(--ui-accent-soft); color: inherit; border-color: var(--ui-accent-border); }

/* Error page (error.html): a refused, missing or failed page opened in the browser */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--ui-bg); color: var(--ui-text); }
.error-card { width: 100%; max-width: 32rem; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-2); padding: 28px 24px; }
.error-code { font-size: 13px; font-weight: 600; color: var(--ui-text-3); font-variant-numeric: tabular-nums; margin: 0 0 4px; }
.error-message { color: var(--ui-text-2); overflow-wrap: anywhere; }

/* Working plant chip in the top bar (layout_admin.html, plant_switch.py) */
.plant-chip { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; font-size: 13px; }
span.plant-chip { padding: 6px 10px; background: var(--ui-accent-soft); color: var(--ui-text); border: 1px solid var(--ui-accent-border); border-radius: 6px; }
.plant-switch .dropdown-item.active { background: var(--ui-accent-soft); color: var(--ui-text); font-weight: 600; }
.plant-switch-menu { min-width: 280px; }
.plant-switch-list { max-height: 60vh; overflow-y: auto; }
.plant-switch .dropdown-item:disabled { opacity: 1; }
select[data-plant-locked], .ts-wrapper.locked .ts-control { background-color: var(--ui-subtle); cursor: not-allowed; }
.plant-pick { position: fixed; inset: 0; z-index: 1060; overflow-y: auto; }
.plant-pick + .modal-backdrop { z-index: 1055; }
@media (max-width: 767.98px) { .plant-chip-name { display: none; } }

/* Rice mill purchase slip (ricemill/procurement_print.html): the mill's paper slip, a ruled table with the
   particulars column wide and every figure column right-aligned; the charges sit under the amount. */
.rm-slip { max-width: 900px; margin: 0 auto; font-size: 14px; color: var(--ui-text); }
.rm-slip-plant { text-align: center; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--ui-text); }
.rm-slip-plant-name { font-size: 28px; font-weight: 800; letter-spacing: .06em; line-height: 1.2; }
.rm-slip-plant-line { font-size: 13px; font-weight: 500; }
.rm-slip-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; font-weight: 600; }
.rm-slip-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.rm-slip-table th, .rm-slip-table td { border-left: 1px solid var(--ui-text); border-right: 1px solid var(--ui-text); padding: 2px 8px; vertical-align: top; }
.rm-slip-table thead th { border: 1px solid var(--ui-text); text-align: center; font-weight: 500; }
.rm-slip-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rm-slip-table .charge { text-align: right; font-style: italic; text-transform: uppercase; }
.rm-slip-table .charge-plain { text-align: right; font-style: italic; }
.rm-slip-table .spacer td { height: 12rem; }
.rm-slip-table .total-row td { border-top: 1px solid var(--ui-text); border-bottom: 1px solid var(--ui-text); font-weight: 600; }
.rm-slip-table .words td { border: 1px solid var(--ui-text); }

/* Rice mill screens: labels, headings, column titles and buttons in Title Case ("Vehicle Type"); layout_admin.html
   marks the body of every /ricemill page and the rice mill dashboard, and the rice mill menu groups. */
.rm-titlecase .main-content :is(label, th, dt, h1, h2, h3, .h5, .h6, legend, .btn, .nav-tabs .nav-link, .ag-header-cell-text),
.rm-nav .nav-text { text-transform: capitalize; }

/* Rice mill new gate entry (ricemill/inbound_gate_form.html): label beside its field, the two halves split by a
   line, and the "from last entry" tag on the field's top right corner. */
.rm-gate-grid > [class*="col-"] { padding-top: 6px; padding-bottom: 6px; }
/* the label lines up with its field's box, not with the box plus the readout under it (₹ / kg) */
.rm-gate-field { display: flex; align-items: flex-start; gap: 12px; }
.rm-gate-field > .form-label { flex: 0 0 11.5rem; margin-bottom: 0; font-weight: 600; display: flex; align-items: center; min-height: 30px; }
.rm-gate-input { position: relative; flex: 1 1 auto; min-width: 0; }
.rm-slip-grid .rm-gate-field > .form-label { flex-basis: 9.5rem; }  /* the purchase slip's three columns */
.rm-gate-pick { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.rm-gate-bags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 4px 10px; border: 1px solid var(--ui-border); border-radius: 6px; }
.rm-gate-input > .last-badge { position: absolute; top: -8px; right: 8px; z-index: 3; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; pointer-events: none; }
@media (min-width: 768px) {
  .rm-gate-grid > .rm-gate-right { border-left: 1px solid var(--ui-border); padding-left: 1.5rem; }
}
@media (max-width: 575.98px) {
  .rm-gate-field { flex-direction: column; align-items: stretch; gap: 4px; }
  .rm-gate-field > .form-label { flex-basis: auto; }
}

/* Rice mill gate slip (ricemill/inbound_receipt.html) and weighbridge ticket (ricemill/weighbridge_print.html): the
   mill's own paper slips, label and value per line with a dotted line under the value. */
.rm-gate-slip, .rm-wb-slip { max-width: 760px; margin: 0 auto; font-size: 15px; color: var(--ui-text); }
.rm-gate-slip-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-bottom: 8px; }
.rm-gate-slip-lines { margin: 12px 0 0; }
.rm-gate-slip-lines > div { display: flex; gap: 12px; padding: 6px 0; }
.rm-gate-slip-lines dt { flex: 0 0 11rem; font-weight: 600; }
.rm-gate-slip-lines dt::after { content: " :"; }
.rm-gate-slip-lines dd { flex: 1; margin: 0; border-bottom: 1px dotted var(--ui-text-3); min-height: 1.4em; }
.rm-wb-slip-head { text-align: center; padding-bottom: 6px; border-bottom: 2px solid var(--ui-text); margin-bottom: 12px; }
.rm-wb-slip-name { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.rm-wb-slip-table { width: 100%; border-collapse: collapse; }
.rm-wb-slip-table th, .rm-wb-slip-table td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; }
.rm-wb-slip-table th { width: 30%; font-weight: 600; }
.rm-wb-slip-table td.num { font-weight: 700; font-variant-numeric: tabular-nums; }
.rm-wb-slip-net th, .rm-wb-slip-net td { font-size: 17px; }
.rm-wb-slip-sign { display: flex; flex-direction: column; align-items: flex-end; margin-top: 2.5rem; padding-top: 6px; border-top: 1px solid var(--ui-text); }

/* Plant operations: the thin capacity bar of a silo tile (overview) */
.po-fill { height: 6px; }