:root {
  --bg: #0f172a;
  --bg-alt: #172554;
  --panel: #ffffff;
  --muted: #64748b;
  --text: #0f172a;
  --border: #e2e8f0;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #7c3aed;
  --page-bg: #f8fafc;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --success: #059669;
  --success-bg: #d1fae5;
  --warn: #d97706;
  --warn-bg: #fef3c7;
  --row-hover: #f1f5f9;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; overflow:hidden; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:var(--page-bg); }
a { color: var(--primary); text-decoration:none; }
a:hover { text-decoration: underline; }
.hidden { display:none !important; }

/* ===== Mobile supplier PO issuing flow ===== */
.mobile-po-page {
  padding:0;
  background:#eef2f7;
}

/* Vehicle loading scanner: make accepted and foreign-PO scans visible at a distance. */
.loading-scan-screen-success,
.loading-scan-screen-error {
  margin:-12px;
  padding:12px;
  border-radius:16px;
  transition:background-color .12s ease, box-shadow .12s ease;
}
.loading-scan-screen-success {
  background:#dcfce7;
  box-shadow:inset 0 0 0 4px #16a34a;
}
.loading-scan-screen-error {
  background:#fee2e2;
  box-shadow:inset 0 0 0 6px #dc2626;
}
.loading-scan-feedback-success {
  border:3px solid #16a34a !important;
  background:#f0fdf4 !important;
}
.loading-scan-feedback-error {
  border:5px solid #dc2626 !important;
  background:#fff1f2 !important;
  animation:loading-scan-error-flash .22s ease-in-out 3 alternate;
}
.loading-scan-feedback-success input {
  border-color:#16a34a;
  background:#f0fdf4;
}
.loading-scan-feedback-error input {
  border-color:#dc2626;
  background:#fff;
}
@keyframes loading-scan-error-flash {
  from { background:#fff1f2; }
  to { background:#ef4444; }
}
.mobile-po-shell .topbar {
  display:none;
}
.mobile-po-shell .container {
  padding:0;
}
.mobile-po {
  min-height:100%;
  max-width:620px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background:#f8fafc;
  position:relative;
}
.mobile-po-header {
  padding:18px 18px 12px;
  background:#ffffff;
  border-bottom:1px solid #e2e8f0;
  position:sticky;
  top:0;
  z-index:3;
}
.mobile-po-kicker {
  font-size:12px;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mobile-po-title-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:5px;
}
.mobile-po-title-row h1 {
  margin:0;
  font-size:26px;
  line-height:1.08;
  letter-spacing:0;
}
.mobile-po-step-pill {
  flex-shrink:0;
  padding:6px 9px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-size:12px;
  font-weight:800;
}
.mobile-po-progress {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin-top:16px;
}
.mobile-po-progress span {
  height:4px;
  border-radius:99px;
  background:#dbe3ef;
}
.mobile-po-progress span.active {
  background:#2563eb;
}
.mobile-po-step {
  flex:1;
  padding:14px;
  padding-bottom:108px;
}
.mobile-po-search {
  position:sticky;
  top:94px;
  z-index:2;
  background:#f8fafc;
  padding-bottom:10px;
}
.mobile-po-search-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}
.mobile-po-search-row button {
  min-height:46px;
  padding:10px 12px;
}
.mobile-po-search input,
.mobile-po input,
.mobile-po textarea {
  width:100%;
  min-height:46px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:10px 12px;
  font-size:16px;
  background:#ffffff;
  color:#0f172a;
}
.mobile-po textarea {
  min-height:86px;
  resize:vertical;
}
.mobile-po-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobile-po-supplier-card,
.mobile-po-context,
.mobile-po-article-main {
  width:100%;
  text-align:left;
  border:1px solid #dbe3ef;
  background:#ffffff;
  color:#0f172a;
  border-radius:8px;
  padding:14px;
  box-shadow:0 1px 2px rgba(15, 23, 42, .05);
}
.mobile-po-supplier-card.selected,
.mobile-po-article-card.selected {
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37, 99, 235, .14);
}
.mobile-po-card-title,
.mobile-po-card-subtitle,
.mobile-po-card-action {
  display:block;
}
.mobile-po-card-title {
  font-size:16px;
  font-weight:800;
}
.mobile-po-card-subtitle {
  margin-top:4px;
  color:#64748b;
  font-size:13px;
}
.mobile-po-card-action {
  margin-top:12px;
  color:#2563eb;
  font-weight:800;
  font-size:13px;
}
.mobile-po-context {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.mobile-po-context span,
.mobile-po-label {
  color:#64748b;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.mobile-po-context strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-po-article-card {
  border:1px solid #dbe3ef;
  border-radius:8px;
  background:#ffffff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15, 23, 42, .05);
}
.mobile-po-article-main {
  border:0;
  border-radius:0;
  display:grid;
  grid-template-columns:58px minmax(0, 1fr) 34px;
  align-items:center;
  gap:12px;
  box-shadow:none;
}
.mobile-po-article-main img,
.mobile-po-review-line img,
.mobile-po-image-empty {
  width:58px;
  height:58px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  object-fit:contain;
}
.mobile-po-image-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:11px;
  font-weight:800;
}
.mobile-po-article-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mobile-po-article-copy strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
}
.mobile-po-article-copy small,
.mobile-po-review-line small,
.mobile-po-review-card small {
  color:#64748b;
  font-size:12px;
}
.mobile-po-select-dot {
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eff6ff;
  color:#2563eb;
  font-size:18px;
  font-weight:900;
}
.mobile-po-line-edit {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 14px 14px;
  border-top:1px solid #e2e8f0;
}
.mobile-po-line-edit label,
.mobile-po-form-grid label,
.mobile-po-notes {
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#475569;
  font-size:12px;
  font-weight:800;
}
.mobile-po-inline-fields,
.mobile-po-form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.mobile-po-review-card,
.mobile-po-review-line {
  background:#ffffff;
  border:1px solid #dbe3ef;
  border-radius:8px;
  padding:14px;
  box-shadow:0 1px 2px rgba(15, 23, 42, .05);
}
.mobile-po-review-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:10px;
}
.mobile-po-form-grid,
.mobile-po-notes {
  margin-bottom:10px;
}
.mobile-po-review-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobile-po-review-line {
  display:grid;
  grid-template-columns:58px minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
}
.mobile-po-review-line div {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mobile-po-review-line strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-po-icon-btn {
  min-height:36px;
  padding:8px 10px;
}
.mobile-po-empty {
  padding:22px 14px;
  text-align:center;
  color:#64748b;
  background:#ffffff;
  border:1px dashed #cbd5e1;
  border-radius:8px;
}
.mobile-po-footer {
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(620px, 100vw);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  gap:8px;
  align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  border-top:1px solid #dbe3ef;
  box-shadow:0 -10px 30px rgba(15, 23, 42, .12);
  z-index:5;
}
.mobile-po-summary {
  min-width:0;
  display:flex;
  flex-direction:column;
}
.mobile-po-summary strong {
  font-size:14px;
}
.mobile-po-summary span {
  color:#64748b;
  font-size:12px;
}
.mobile-po-footer button {
  min-height:44px;
  white-space:nowrap;
}

@media (max-width: 760px) {
  .mobile-po-shell .sidebar {
    display:none;
  }
  .mobile-po-shell {
    height:100vh;
    overflow:hidden;
  }
  .mobile-po-shell .main-area {
    height:100vh;
    overflow:hidden;
  }
  .mobile-po-shell .container.mobile-po-page {
    height:100vh;
    min-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-po-shell .mobile-po {
    min-height:100vh;
  }
}

/* ===== LAYOUT: sidebar shell ===== */
.shell { display:flex; flex-direction:row; height:100vh; }

/* sidebar */
.sidebar {
  width:224px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition:width .2s ease;
  overflow:hidden;
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:4px 0 20px rgba(0,0,0,.18);
  z-index:10;
}
.sidebar.collapsed { width:52px; }
.sidebar-top {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  min-height:57px;
  flex-shrink:0;
}
.sidebar.collapsed .sidebar-top { padding:14px; justify-content:center; }
.sidebar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.sidebar-brand:hover { text-decoration:none; }
.brand-mark {
  width:28px; height:28px; border-radius:8px;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:12px; font-weight:700; color:#fff;
}
.brand-logo { width:28px; height:28px; border-radius:8px; flex-shrink:0; }
.brand-logo-cover { object-fit:cover; }
.brand-logo-contain { object-fit:contain; }
.brand-title {
  font-size:13px; font-weight:700; color:#f8fafc;
  white-space:nowrap; overflow:hidden; line-height:1.2;
  transition:opacity .15s, width .15s;
}
.sidebar.collapsed .brand-title { opacity:0; width:0; pointer-events:none; }
.sidebar-nav { flex:1; overflow-y:auto; padding:8px 0; scrollbar-width:none; }
.sidebar-nav::-webkit-scrollbar { display:none; }
.sidebar-group { display:flex; flex-direction:column; }
.sidebar-section-label {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:10px; font-weight:700;
  color:rgba(148,163,184,.5);
  text-transform:uppercase; letter-spacing:.08em;
  padding:12px 16px 7px;
  white-space:nowrap; overflow:hidden;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  transition:opacity .15s, color .15s, background .15s;
}
.sidebar-section-label:hover { color:rgba(226,232,240,.82); background:rgba(255,255,255,.035); }
.sidebar-section-title { overflow:hidden; text-overflow:ellipsis; }
.sidebar-section-chevron {
  font-size:14px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .16s ease;
}
.sidebar-group.closed .sidebar-section-chevron { transform:rotate(0deg); }
.sidebar-group-items {
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sidebar-group.closed .sidebar-group-items { display:none; }
.sidebar.collapsed .sidebar-section-label { opacity:0; pointer-events:none; }
.sidebar-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px;
  cursor:pointer; color:#94a3b8;
  font-size:13px; font-weight:500;
  white-space:nowrap; text-decoration:none;
  border-left:2px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.sidebar.collapsed .sidebar-item { padding:10px 0; justify-content:center; }
.sidebar-item:hover { background:rgba(255,255,255,.07); color:#f8fafc; text-decoration:none; }
.sidebar-item.active { background:rgba(59,130,246,.15); color:#f8fafc; border-left-color:var(--primary); }
.si-icon { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.si-logo-tile {
  width:20px;
  height:20px;
  border-radius:5px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.si-logo-tile img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.sidebar-item-label { transition:opacity .15s; }
.sidebar.collapsed .sidebar-item-label { display:none; }
.sidebar-badge { margin-left:auto; background:rgba(239,68,68,.22); color:#fca5a5; font-size:10px; font-weight:600; padding:2px 6px; border-radius:99px; line-height:1.4; }
.sidebar.collapsed .sidebar-badge { display:none; }
.sidebar-footer { padding:10px 12px; border-top:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.sidebar-collapse-btn {
  width:100%; display:flex; align-items:center; gap:8px;
  padding:7px 6px; cursor:pointer; color:#94a3b8;
  font-size:12px; background:none; border:none; border-radius:8px;
  transition:color .15s;
}
.sidebar-collapse-btn:hover { color:#f8fafc; }
.sidebar-collapse-icon { font-size:18px; line-height:1; transition:transform .2s ease; flex-shrink:0; font-style:normal; }
.sidebar.collapsed .sidebar-collapse-icon { transform:rotate(180deg); }
.sidebar.collapsed .sidebar-collapse-label { display:none; }

/* main area */
.main-area { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* topbar — light page-level header */
.topbar {
  display:flex; align-items:center;
  padding:0 24px; height:57px;
  background:var(--panel); color:var(--text);
  gap:16px; flex-shrink:0;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.topbar-page-title { font-size:15px; font-weight:700; color:var(--text); flex-shrink:0; }
.topbar-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.topbar-user { display:flex; align-items:center; gap:10px; }
.topbar-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
}
.topbar-username { font-size:13px; color:var(--muted); }
.topbar-signout {
  background:none; border:1px solid var(--border);
  color:var(--muted); font-size:12px;
  padding:5px 10px; border-radius:6px; cursor:pointer;
}
.topbar-signout:hover { background:var(--page-bg); color:var(--text); }

/* page content area */
.container { padding:24px; max-width:1400px; width:100%; margin:0 auto; overflow-y:auto; flex:1; }

/* urgent alert banner */
.urgent-banner {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px;
  background:#fef3c7; border:1px solid #fde68a; border-radius:12px;
  font-size:13px; color:#92400e; margin-bottom:16px;
}
.urgent-banner-icon { font-style:normal; font-size:15px; flex-shrink:0; }
.urgent-banner-link { color:#b45309; font-weight:600; text-decoration:underline; cursor:pointer; }

/* quick action buttons */
.qa-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.qa-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border:1px solid var(--border);
  border-radius:8px; background:#fff; color:var(--text);
  font-size:13px; cursor:pointer; transition:all .15s;
}
.qa-btn:hover { background:var(--page-bg); border-color:var(--muted); }
.qa-btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.qa-btn.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }

/* dashboard redesign */
.dashboard-page {
  max-width:1560px;
  background:
    linear-gradient(180deg, rgba(239,246,255,.75), rgba(248,250,252,0) 360px),
    var(--page-bg);
}
.dash-hero {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 420px);
  gap:18px;
  margin-bottom:18px;
}
.dash-hero-main,
.dash-hero-panel,
.dash-card,
.dash-kpi {
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 20px 48px rgba(15, 23, 42, .08);
}
.dash-hero-main {
  min-height:220px;
  padding:28px;
  border-radius:8px;
  color:#fff;
  background:
    linear-gradient(135deg, #111827 0%, #1e3a8a 52%, #0f766e 100%);
  overflow:hidden;
  position:relative;
}
.dash-hero-main > * { position:relative; z-index:1; }
.dash-eyebrow {
  display:inline-flex;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#bfdbfe;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.dash-hero h1 {
  margin:16px 0 8px;
  font-size:34px;
  line-height:1.1;
}
.dash-hero p {
  max-width:640px;
  margin:0;
  color:#dbeafe;
  font-size:15px;
  line-height:1.55;
}
.dash-hero-actions,
.dash-quick-grid {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.dash-action {
  min-height:38px;
  padding:9px 14px;
  border-radius:8px;
  border-color:rgba(148,163,184,.32);
  background:#fff;
  color:#172033;
  font-weight:700;
}
.dash-action:hover { border-color:#94a3b8; background:#f8fafc; }
.dash-action.primary {
  color:#fff;
  background:#2563eb;
  border-color:#2563eb;
  box-shadow:0 12px 24px rgba(37,99,235,.24);
}
.dash-hero-panel {
  padding:24px;
  border-radius:8px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.dash-panel-label,
.dash-kpi-label {
  color:#64748b;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.dash-panel-value {
  margin-top:8px;
  color:#0f172a;
  font-size:34px;
  font-weight:900;
}
.dash-panel-meta {
  margin-top:4px;
  color:#64748b;
  font-size:13px;
}
.dash-progress {
  height:10px;
  margin-top:22px;
  border-radius:999px;
  overflow:hidden;
  background:#e2e8f0;
}
.dash-progress span {
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #14b8a6, #2563eb);
}
.dash-panel-foot {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}
.dash-kpi-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:14px;
  margin-bottom:18px;
}
.dash-kpi {
  min-height:132px;
  padding:16px;
  border-radius:8px;
  background:#fff;
}
.dash-kpi-top {
  display:flex;
  align-items:center;
  gap:8px;
}
.dash-kpi-dot {
  width:9px;
  height:9px;
  border-radius:999px;
  background:#64748b;
}
.dash-kpi-value {
  margin-top:16px;
  font-size:29px;
  line-height:1;
  font-weight:900;
  color:#0f172a;
}
.dash-kpi-meta {
  margin-top:8px;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}
.dash-kpi-indigo .dash-kpi-dot { background:#4f46e5; }
.dash-kpi-teal .dash-kpi-dot { background:#0d9488; }
.dash-kpi-amber .dash-kpi-dot { background:#d97706; }
.dash-kpi-rose .dash-kpi-dot { background:#e11d48; }
.dash-kpi-green .dash-kpi-dot { background:#16a34a; }
.dash-kpi-sky .dash-kpi-dot { background:#0284c7; }
.dash-main-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.dash-card {
  background:rgba(255,255,255,.94);
  border-radius:8px;
  padding:18px;
  min-height:240px;
  overflow:hidden;
}
.dash-work-card { grid-row:span 2; }
.dash-table-card .scroll-x {
  max-height:260px;
  overflow:auto;
  border-radius:8px;
  border:1px solid #eef2f7;
}
.dash-card table {
  font-size:12px;
}
.dash-card th {
  background:#f8fafc;
}
.dash-section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}
.dash-section-head h2 {
  margin:0;
  color:#0f172a;
  font-size:16px;
}
.dash-section-head p {
  margin:4px 0 0;
  color:#64748b;
  font-size:12px;
}
.dash-section-link {
  flex-shrink:0;
  padding:6px 10px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  font-size:12px;
  font-weight:800;
}
.dash-work-list,
.dash-alert-list,
.dash-bar-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dash-work-item {
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  gap:12px;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
}
.dash-work-item:hover {
  text-decoration:none;
  border-color:#bfdbfe;
  background:#f8fbff;
}
.dash-work-badge {
  align-self:start;
  padding:5px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:11px;
  font-weight:800;
  text-align:center;
}
.dash-work-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.dash-work-copy strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.dash-work-copy small {
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}
.dash-work-rose .dash-work-badge { background:#fff1f2; color:#be123c; }
.dash-work-amber .dash-work-badge { background:#fffbeb; color:#b45309; }
.dash-work-indigo .dash-work-badge { background:#eef2ff; color:#4338ca; }
.dash-work-teal .dash-work-badge { background:#ccfbf1; color:#0f766e; }
.dash-bar-row {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.dash-bar-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#334155;
  font-size:12px;
}
.dash-bar-label span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-bar-label strong {
  color:#0f172a;
  font-variant-numeric:tabular-nums;
}
.dash-bar-track {
  height:9px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.dash-bar-track span {
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #0d9488, #2563eb);
}
.dash-alert-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  color:#0f172a;
  background:#fff;
}
.dash-alert-item:hover { text-decoration:none; background:#f8fafc; }
.dash-alert-item span { color:#475569; font-size:13px; }
.dash-alert-item strong { font-size:22px; }
.dash-alert-rose strong { color:#e11d48; }
.dash-alert-amber strong { color:#d97706; }
.dash-alert-teal strong { color:#0d9488; }
.dash-alert-indigo strong { color:#4f46e5; }
.dash-quick-card {
  margin-top:16px;
  min-height:auto;
}
.dash-quick-card .dash-quick-grid {
  margin-top:0;
}
.dash-empty {
  padding:22px;
  border:1px dashed #cbd5e1;
  border-radius:8px;
  color:#64748b;
  background:#f8fafc;
  font-size:13px;
}

/* premium operational pages */
.ops-page {
  max-width:1560px;
  background:
    linear-gradient(180deg, rgba(239,246,255,.7), rgba(248,250,252,0) 340px),
    var(--page-bg);
}
.ops-page-hero {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  padding:24px 28px;
  margin-bottom:18px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg, #111827 0%, #1e3a8a 55%, #0f766e 100%);
  box-shadow:0 20px 48px rgba(15,23,42,.08);
}
.ops-page-hero h1 {
  margin:14px 0 8px;
  font-size:30px;
  line-height:1.12;
}
.ops-page-hero p {
  margin:0;
  max-width:780px;
  color:#dbeafe;
  font-size:14px;
  line-height:1.55;
}
.ops-page-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  min-width:260px;
}
.ops-page .ops-card {
  border-radius:8px;
  border-color:rgba(148,163,184,.28);
  box-shadow:0 16px 36px rgba(15,23,42,.06);
}
.ops-page .card h2 {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-size:17px;
}
.ops-page .card h2::before {
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:#2563eb;
  flex:0 0 auto;
}
.ops-card-import h2::before,
.ops-card-form h2::before { background:#0d9488 !important; }
.ops-card-danger h2::before { background:#e11d48 !important; }
.ops-card-admin h2::before { background:#d97706 !important; }
.ops-card-filters h2::before { background:#4f46e5 !important; }
.ops-card-table h2::before { background:#0284c7 !important; }
.ops-page .row {
  gap:14px;
}
.ops-page label {
  font-weight:700;
  color:#475569;
}
.ops-page input[type=text],
.ops-page input[type=password],
.ops-page input[type=number],
.ops-page input[type=date],
.ops-page select,
.ops-page textarea {
  min-height:38px;
  border-radius:8px;
  border-color:#dbe3f0;
  background:#fbfdff;
}
.ops-page input:focus,
.ops-page select:focus,
.ops-page textarea:focus {
  outline:2px solid rgba(37,99,235,.22);
  border-color:#2563eb;
}
.ops-page button {
  border-radius:8px;
  font-weight:700;
}
.ops-page .primary,
.ops-page button.primary {
  background:#2563eb;
  border-color:#2563eb;
  box-shadow:0 10px 20px rgba(37,99,235,.14);
}
.ops-page .inline-form {
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
}
.ops-page .po-tool-selector {
  margin-bottom:14px;
}
.ops-page .po-tool-selector select {
  max-width:520px;
}
.ops-page .scroll-x {
  border:1px solid #e5edf7;
  border-radius:8px;
  background:#fff;
}
.ops-page table {
  font-size:12px;
}
.ops-page th {
  background:#f8fafc;
  color:#64748b;
  font-size:10px;
  letter-spacing:.06em;
}
.ops-page td {
  vertical-align:middle;
}
.ops-page tbody tr:hover {
  background:#f8fbff;
}
.ops-page .table-action-row {
  gap:7px;
  justify-content:flex-end;
}
.ops-page .pill {
  font-weight:800;
}

/* login page */
.login-wrap { display:flex; align-items:center; justify-content:center; height:100vh; background:linear-gradient(135deg, var(--bg), var(--bg-alt)); }
.login-box { background:var(--panel); padding:32px; border-radius:18px; width:360px; box-shadow: 0 20px 40px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); }
.login-box h1 { margin:0 0 4px; font-size:20px; }
.login-box p.subtitle { margin:0 0 20px; color:var(--muted); font-size:13px; }
.login-logo { display:block; width:72px; height:72px; object-fit:contain; margin:0 0 18px; border-radius:16px; background:rgba(255,255,255,.92); border:1px solid var(--border); padding:8px; }

/* cards */
.card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 18px;
  margin-bottom:16px;
  box-shadow:0 14px 30px rgba(15, 23, 42, .05);
}
.card h2 { margin:0 0 12px; font-size:16px; }
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.stat {
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.stat .label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.stat .value { font-size:24px; font-weight:800; margin-top:8px; }
.stat-sky { background:linear-gradient(135deg, #eff6ff, #dbeafe); border-color:#bfdbfe; }
.stat-sky .value { color:#1d4ed8; }
.stat-rose { background:linear-gradient(135deg, #fff1f2, #ffe4e6); border-color:#fecdd3; }
.stat-rose .value { color:#e11d48; }
.stat-violet { background:linear-gradient(135deg, #f5f3ff, #ede9fe); border-color:#ddd6fe; }
.stat-violet .value { color:#7c3aed; }
.stat-amber { background:linear-gradient(135deg, #fffbeb, #fef3c7); border-color:#fde68a; }
.stat-amber .value { color:#b45309; }
.stat-emerald { background:linear-gradient(135deg, #ecfdf5, #d1fae5); border-color:#a7f3d0; }
.stat-emerald .value { color:#059669; }
.stat-indigo { background:linear-gradient(135deg, #eef2ff, #e0e7ff); border-color:#c7d2fe; }
.stat-indigo .value { color:#4338ca; }
.booking-progress-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:16px; }
.dashboard-widget-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:16px; align-items:stretch; }
.dashboard-widget {
  min-height:220px;
  position:relative;
  overflow:hidden;
  grid-column: span 1;
  height:100%;
}
.dashboard-widget.widget-compact { grid-column: span 1; min-height:220px; }
.dashboard-widget.widget-wide { grid-column: span 1; min-height:220px; }
.dashboard-widget.widget-full { grid-column: span 1; min-height:220px; }
.dashboard-widget::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.9;
  pointer-events:none;
}
.dashboard-widget > * { position:relative; z-index:1; }
.dashboard-widget h2 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:15px;
}
.dashboard-widget-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.dashboard-widget-header h2 { margin:0; }
.widget-vendor::before { background:linear-gradient(180deg, rgba(14, 165, 233, .10), rgba(255,255,255,0) 36%); }
.widget-asin::before { background:linear-gradient(180deg, rgba(168, 85, 247, .10), rgba(255,255,255,0) 36%); }
.widget-deadline::before { background:linear-gradient(180deg, rgba(249, 115, 22, .10), rgba(255,255,255,0) 36%); }
.widget-flow::before { background:linear-gradient(180deg, rgba(16, 185, 129, .10), rgba(255,255,255,0) 36%); }
.widget-fc::before { background:linear-gradient(180deg, rgba(59, 130, 246, .10), rgba(255,255,255,0) 36%); }
.dashboard-widget table { background:rgba(255,255,255,.88); border-radius:12px; overflow:hidden; }
.dashboard-widget th { background:rgba(248, 250, 252, .94); }
.toggle-group { display:flex; gap:6px; flex-wrap:wrap; }
.toggle-group button {
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--border);
  font-size:12px;
}
.toggle-group button.active {
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
.appointment-visibility-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.appointment-visibility-toggle input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.appointment-visibility-track {
  position:relative;
  width:34px;
  height:18px;
  border-radius:999px;
  background:#fecdd3;
  border:1px solid #fda4af;
  transition:background .16s ease, border-color .16s ease, opacity .16s ease;
}
.appointment-visibility-thumb {
  position:absolute;
  top:2px;
  left:2px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(15, 23, 42, .22);
  transition:transform .16s ease;
}
.appointment-visibility-toggle.is-visible .appointment-visibility-track {
  background:#bbf7d0;
  border-color:#86efac;
}
.appointment-visibility-toggle.is-visible .appointment-visibility-thumb {
  transform:translateX(16px);
}
.appointment-visibility-toggle.is-saving {
  opacity:.62;
  cursor:wait;
}
.appointment-visibility-text {
  min-width:42px;
  font-size:11px;
  font-weight:800;
  color:#047857;
  text-transform:lowercase;
}
.appointment-visibility-toggle:not(.is-visible) .appointment-visibility-text {
  color:#be123c;
}
.table-action-row {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pie-widget { display:flex; align-items:center; gap:18px; flex-wrap:wrap; min-height: 200px; }
.pie-chart {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.pie-hole {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: var(--text);
}
.pie-legend { display:flex; flex-direction:column; gap:8px; min-width: 180px; }
.pie-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; }
.pie-dot { width:12px; height:12px; border-radius:999px; display:inline-block; }
.booking-progress-card { border-width:2px; }
.booking-progress-card .stat { margin-bottom:0; }
.booking-progress-card.carton-progress { border-color:#22c55e; }
.booking-progress-card.qty-progress { border-color:#a855f7; }
.booking-progress-metrics { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
.booking-progress-row { display:flex; justify-content:space-between; align-items:center; margin:12px 0 8px; gap:12px; }
.booking-progress-bar { height:10px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.booking-progress-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--primary-hover)); }
.carton-progress .booking-progress-fill { background:linear-gradient(90deg, #16a34a, #22c55e); }
.qty-progress .booking-progress-fill { background:linear-gradient(90deg, #7c3aed, #a855f7); }

/* forms and buttons */
label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.inline-check { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:var(--text); }
.inline-check input[type=checkbox] { width:auto; margin:0; }
.ops-fc-dropdown { position:relative; width:100%; min-width:0; }
.ops-fc-dropdown > summary {
  box-sizing:border-box; width:100%; list-style:none; cursor:pointer; min-height:38px; padding:8px 32px 8px 10px;
  border:1px solid #dbe3f0; border-radius:8px; background:#fbfdff; color:var(--text);
  font-size:14px; line-height:20px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ops-fc-dropdown > summary::-webkit-details-marker { display:none; }
.ops-fc-dropdown > summary::after {
  content:'▾'; position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--muted);
}
.ops-fc-dropdown[open] > summary { outline:2px solid var(--primary); outline-offset:-2px; }
.ops-fc-dropdown.is-disabled > summary { cursor:not-allowed; background:#f8fafc; color:#64748b; }
.ops-fc-dropdown-menu {
  box-sizing:border-box; position:absolute; z-index:1000; top:calc(100% + 5px); left:0; width:100%;
  max-height:280px; overflow:auto; padding:9px 12px 12px; border:1px solid #cbd5e1;
  border-radius:9px; background:#fff; color:#0f172a; box-shadow:0 12px 30px rgba(15,23,42,.22);
}
.ops-fc-dropdown-menu .inline-check { align-items:flex-start; margin-top:6px; color:#0f172a; line-height:1.3; white-space:normal !important; }
.ops-fc-dropdown-menu .inline-check span { min-width:0; overflow-wrap:anywhere; }
.role-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:6px 12px; }
.access-editor-block { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.permission-tree { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-top:8px; }
.permission-group { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:#fff; }
.permission-group-label { margin-top:0; }
.permission-children { margin-top:8px; display:grid; gap:4px; }
.permission-item { margin-top:0; color:var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:14px; background:#fff; color:var(--text);
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--primary); outline-offset:-2px; }
button {
  padding:8px 14px; border-radius:6px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:13px;
}
a.button {
  display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:6px;
  border:1px solid var(--border); background:#fff; color:var(--text); font-size:13px; text-decoration:none;
}
button.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
a.button.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
button.primary:hover { background:var(--primary-hover); }
a.button.primary:hover { background:var(--primary-hover); }
button.danger { color:var(--danger); border-color:var(--danger); background:#fff; }
button.danger:hover { background:var(--danger-bg); }
button.ghost { background:transparent; }
a.button.ghost { background:transparent; }
button:disabled { opacity:0.5; cursor:not-allowed; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.row > div { flex:1; min-width:180px; }
.inline-form { display:flex; gap:8px; align-items:end; }
.marketplace-labels-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.marketplace-labels-intro-copy {
  min-width:0;
}
.marketplace-labels-logo {
  width:136px;
  height:82px;
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-sizing:border-box;
  object-fit:contain;
  object-position:center;
  padding:10px;
}
@media (max-width: 720px) {
  .marketplace-labels-intro {
    align-items:flex-start;
  }
  .marketplace-labels-logo {
    width:92px;
    height:66px;
    border-radius:10px;
    padding:8px;
  }
}

/* tables */
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); }
th { background:#f8fafc; font-weight:600; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.03em; cursor:pointer; user-select:none; position:sticky; top:0; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.po-urgent-row { background:#fff7ed; }
tbody tr.po-overdue-row { background:#fef2f2; }
tbody tr.po-cancelled-row { background:#f8fafc; }
tbody tr.stock-critical-row { background:#fff1f2; }
tbody tr.stock-priority-row { background:#ecfeff; }
tbody tr.stock-drr-row { background:#eff6ff; }
tbody tr.stock-medium-row { background:#fffbeb; }
td.num, th.num { text-align:right; font-variant-numeric: tabular-nums; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:500; }
.pill.active { background:var(--success-bg); color:var(--success); }
.pill.cancelled { background:var(--danger-bg); color:var(--danger); }
.pill.partial { background:var(--warn-bg); color:var(--warn); }
.pill.match { background:var(--success-bg); color:var(--success); }
.pill.mismatch { background:var(--danger-bg); color:var(--danger); }
.pill.ok { background:var(--success-bg); color:var(--success); }
.pill.warn { background:var(--warn-bg); color:var(--warn); }
.pill.danger { background:var(--danger-bg); color:var(--danger); }
tbody tr.row-out-of-po { background:#fffbeb; }
tbody tr.row-out-of-po:hover { background:#fef3c7; }
tbody tr.row-cancelled { background:#fef2f2; color:#7f1d1d; }
tbody tr.row-cancelled:hover { background:#fee2e2; }
tbody tr.row-cancelled input { opacity:.65; }

/* toasts */
#toasts { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
.toast { background:#0f172a; color:#fff; padding:10px 14px; border-radius:8px; font-size:13px; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.toast.error { background:var(--danger); }
.toast.success { background:var(--success); }

/* modals */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal { background:#fff; border-radius:10px; padding:20px 24px; width:500px; max-width:95vw; max-height:90vh; overflow:auto; }
.modal.supplier-po-edit-modal { width:min(1280px, 96vw); max-height:92vh; }
.modal.supplier-po-edit-modal table input { min-width:110px; }
.modal.supplier-po-edit-modal .row > div { min-width:180px; }
.modal h3 { margin:0 0 12px; }
.modal .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* utility */
.spacer { flex:1; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.po-focus-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.muted { color: var(--muted); font-size:12px; }
.scroll-x { overflow-x:auto; }
.qty-input { width: 80px; }
.small { font-size:11px; color:var(--muted); }
.warn-text { color:var(--warn); font-weight:600; }
.danger-text { color:var(--danger); font-weight:600; }
.stock-critical-text { color:#be123c; font-weight:700; }
.stock-priority-text { color:#0f766e; font-weight:700; }
.stock-drr-text { color:#1d4ed8; font-weight:700; }
.branding-intro { max-width:780px; line-height:1.5; }
.branding-editor-card { overflow:hidden; }
.branding-grid { display:grid; grid-template-columns: minmax(320px, 420px) minmax(320px, 1fr); gap:20px; align-items:start; }
.branding-form { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
.branding-preview-shell {
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:var(--page-bg);
  box-shadow:0 18px 36px rgba(15, 23, 42, .08);
}
.branding-preview-topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  color:#f8fafc;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, .18), transparent 28%),
    radial-gradient(circle at left center, color-mix(in srgb, var(--accent) 24%, transparent), transparent 24%),
    linear-gradient(135deg, var(--bg), var(--bg-alt));
}
.branding-preview-body { padding:20px; }
.branding-preview-card { margin-top:16px; }
.branding-preview-user { font-size:13px; color:#cbd5e1; }
.branding-color-row { display:flex; gap:8px; align-items:center; }
.branding-color-input { width:52px !important; min-width:52px; height:40px; padding:2px; border-radius:10px; }
.branding-hex-input { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform:uppercase; }
.branding-upload-actions { display:flex; gap:8px; margin:10px 0 6px; flex-wrap:wrap; }
.branding-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }

/* attendance */
.attendance-page {
  max-width:1680px;
  padding:12px 16px;
}
.attendance-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:8px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 18px rgba(15, 23, 42, .05);
}
.attendance-header h1 { margin:0 0 2px; font-size:22px; line-height:1.05; }
.attendance-header p { max-width:620px; margin:0; color:var(--muted); font-size:12px; line-height:1.3; }
.attendance-toolbar { display:flex; align-items:flex-end; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.attendance-toolbar label { min-width:142px; font-size:11px; }
.attendance-toolbar input,
.attendance-toolbar button { min-height:32px; padding-top:6px; padding-bottom:6px; }
.attendance-check { min-width:auto !important; padding-bottom:7px; }
.attendance-rules,
.attendance-summary {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin-bottom:8px;
}
.attendance-rules { display:none; }
.attendance-summary { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.attendance-summary .dash-kpi {
  min-height:48px;
  padding:8px 10px;
  box-shadow:none;
}
.attendance-summary .dash-kpi-top { margin-bottom:2px; }
.attendance-summary .dash-kpi-value { font-size:20px; margin-top:2px; }
.attendance-summary .dash-kpi-meta { font-size:10px; margin-top:2px; }
.attendance-rule {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:82px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
}
.attendance-rule strong { font-size:12px; text-transform:uppercase; color:#334155; }
.attendance-rule span { color:var(--muted); font-size:13px; line-height:1.4; }
.attendance-card { padding:0; overflow:hidden; }
.attendance-card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
}
.attendance-card-head h2 { margin:0 0 2px; font-size:16px; }
.attendance-card-head p { font-size:11px; line-height:1.2; }
.attendance-legend { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.attendance-legend span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  min-height:20px;
  padding:2px 6px;
  border-radius:6px;
  font-size:10px;
  font-weight:800;
}
.attendance-scroll {
  max-height:none;
  overflow-x:auto;
  overflow-y:hidden;
}
.attendance-table { min-width:1500px; width:100%; border-collapse:separate; border-spacing:0; }
.attendance-table th,
.attendance-table td {
  border-right:1px solid #dbe3ef;
  border-bottom:1px solid #dbe3ef;
  padding:0;
  vertical-align:middle;
}
.attendance-table thead th {
  position:sticky;
  top:0;
  z-index:3;
  background:#477eb9;
  color:#fff;
  min-width:44px;
  height:34px;
  text-align:center;
  font-size:12px;
}
.attendance-table thead th small { display:block; margin-top:2px; font-size:9px; opacity:.86; }
.attendance-table thead th.sunday { background:#305f91; }
.attendance-name-col,
.attendance-employee-cell {
  position:sticky;
  left:0;
  z-index:4;
  min-width:185px;
  max-width:185px;
}
.attendance-employee-cell {
  padding:4px 8px !important;
  background:#fff;
}
.attendance-table tbody tr.salary-paid-row .attendance-employee-cell,
.attendance-table tbody tr.salary-paid-row .attendance-total-cell {
  background:#dcfce7;
}
.attendance-table tbody tr.salary-paid-row .attendance-day-cell {
  opacity:.78;
}
.attendance-employee-cell .linklike {
  display:block;
  max-width:165px;
  padding:0;
  border:0;
  background:none;
  color:#0f172a;
  font-weight:800;
  font-size:12px;
  line-height:1.15;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.attendance-employee-cell .muted { display:block; margin-top:1px; font-size:9px; line-height:1.1; }
.salary-paid-badge {
  display:inline-flex;
  align-items:center;
  min-height:15px;
  margin:2px 4px 1px 0;
  padding:1px 5px;
  border-radius:5px;
  background:#16a34a;
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}
.attendance-day-cell {
  min-width:44px;
  height:26px;
  text-align:center;
  cursor:pointer;
  transition:filter .12s, transform .12s;
}
.attendance-day-cell:hover { filter:brightness(.96); transform:translateY(-1px); }
.attendance-day-cell strong { display:block; font-size:11px; line-height:1.05; }
.attendance-day-cell small { display:block; margin-top:1px; font-size:8px; color:rgba(15,23,42,.72); line-height:1; }
.attendance-day-cell.present,
.attendance-legend .present { background:#91d050; color:#0f172a; }
.attendance-day-cell.late,
.attendance-legend .late { background:#facc15; color:#713f12; }
.attendance-day-cell.absent,
.attendance-legend .absent { background:#ff1414; color:#fff; }
.attendance-day-cell.off,
.attendance-legend .off { background:#f8fafc; color:#0f172a; }
.attendance-day-cell.half,
.attendance-legend .half { background:#fed7aa; color:#7c2d12; }
.attendance-day-cell.empty { background:#f8fafc; color:#94a3b8; }
.attendance-day-cell.locked {
  cursor:not-allowed;
  background-image:repeating-linear-gradient(135deg, rgba(15,23,42,.06) 0, rgba(15,23,42,.06) 4px, transparent 4px, transparent 8px);
}
.attendance-day-cell.locked:hover { filter:none; transform:none; }
.attendance-total-cell {
  min-width:128px;
  padding:4px 8px !important;
  background:#e8f1fb;
}
.attendance-total-cell strong,
.attendance-total-cell span { display:block; }
.attendance-total-cell strong { font-size:12px; line-height:1.1; }
.attendance-total-cell span { margin:1px 0 2px; color:#475569; font-size:9px; line-height:1.1; }
.attendance-total-cell button { min-height:22px; padding:2px 7px; font-size:10px; }
.attendance-total-cell .salary-paid-toggle {
  border-color:#16a34a;
  color:#15803d;
}
.attendance-total-cell .salary-paid-toggle.active {
  background:#16a34a;
  color:#fff;
}
.attendance-total-actions {
  display:flex;
  gap:4px;
  justify-content:center;
  flex-wrap:wrap;
}
.attendance-employee-form,
.attendance-mark-form,
.attendance-advance-form {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.attendance-notes-field { grid-column:1 / -1; }
.attendance-active-check { align-self:end; padding:9px 0; }
.attendance-static-field {
  min-height:38px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#f8fafc;
}
.attendance-marked-at { grid-column:1 / -1; margin:0; }
.attendance-advance-actions {
  grid-column:1 / -1;
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.advance-total { font-weight:700; }
.advance-list {
  max-height:220px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:6px;
}
.advance-list > p { margin:10px; }
.advance-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.advance-table th,
.advance-table td {
  border-bottom:1px solid var(--border);
  padding:7px;
  text-align:left;
  vertical-align:top;
}
.advance-table th { background:#f8fafc; font-size:11px; color:#475569; }
.advance-table td:last-child {
  display:flex;
  gap:4px;
  justify-content:flex-end;
}
.salary-slip-row { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--border); }
.salary-slip-row span { color:var(--muted); }

/* tabs */
.tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.tabs button { background:none; border:none; padding:10px 14px; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; }
.tabs button.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

@media (max-width: 720px) {
  .ops-page-hero { flex-direction:column; align-items:flex-start; padding:20px; }
  .ops-page-hero h1 { font-size:26px; }
  .ops-page-actions { justify-content:flex-start; min-width:0; width:100%; }
  .ops-page-actions .dash-action { flex:1 1 140px; }
  .ops-page .inline-form { flex-direction:column; align-items:stretch; }
  .ops-page .inline-form > * { max-width:100%; }
  .ops-page input[type=file] { width:100%; }
  .dash-hero,
  .dash-main-grid { grid-template-columns: 1fr; }
  .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-hero-main { min-height:auto; padding:22px; }
  .dash-hero h1 { font-size:28px; }
  .dash-work-card { grid-row:auto; }
  .dash-work-item { grid-template-columns: 1fr; }
  .booking-progress-metrics { grid-template-columns: 1fr; }
  .booking-progress-row { flex-direction:column; align-items:flex-start; }
  .sidebar { width:52px; }
  .sidebar .brand-title,
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-item-label,
  .sidebar .sidebar-badge,
  .sidebar .sidebar-collapse-label { display:none !important; }
  .sidebar-item { padding:10px 0; justify-content:center; }
  .sidebar-top { padding:14px; justify-content:center; }
  .dashboard-widget-grid { grid-template-columns: 1fr; }
  .dashboard-widget, .dashboard-widget.widget-compact, .dashboard-widget.widget-wide, .dashboard-widget.widget-full { grid-column: auto; }
  .branding-grid { grid-template-columns: 1fr; }
  .branding-form { grid-template-columns: 1fr; }
  .attendance-header { flex-direction:column; padding:18px; }
  .attendance-toolbar { width:100%; justify-content:flex-start; align-items:stretch; }
  .attendance-toolbar label { min-width:0; flex:1 1 150px; }
  .attendance-rules,
  .attendance-summary { grid-template-columns:1fr; }
  .attendance-card-head { flex-direction:column; }
  .attendance-employee-form,
  .attendance-mark-form,
  .attendance-advance-form { grid-template-columns:1fr; }
  .attendance-scroll { max-height:none; }
  .topbar-username { display:none; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .ops-page-hero { align-items:flex-start; flex-direction:column; }
  .ops-page-actions { justify-content:flex-start; }
  .dash-hero { grid-template-columns: 1fr; }
  .dash-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-work-card { grid-row:auto; }
  .dashboard-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-rules { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .attendance-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1101px) and (max-width: 1320px) {
  .dash-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dispatch-upload-grid,
.dispatch-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.dispatch-filter-row { grid-template-columns: repeat(3, minmax(160px, 1fr)); margin-bottom: 16px; }
.dispatch-search-field { min-width: 260px; }
.dispatch-total-stats { margin: 16px 0; }
.dispatch-list-head,
.dispatch-result-head,
.dispatch-scan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dispatch-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.dispatch-status.pending { color: #92400e; background: #fef3c7; }
.dispatch-status.ready { color: #166534; background: #dcfce7; }
.dispatch-status.shipped { color:#075985; background:#e0f2fe; }
.dispatch-mobile-page { max-width: 920px; margin: 0 auto; }
.dispatch-scan-card { position: sticky; top: 12px; z-index: 5; }
.dispatch-scan-row input.dispatch-scan-input { flex: 1; font-size: 22px; min-height: 52px; }
.dispatch-scan-button { min-height: 52px; padding-inline: 22px; }
.dispatch-camera-actions { margin-top: 10px; }
.dispatch-camera-status { min-height: 20px; margin-top: 8px; }
.dispatch-camera-wrap { margin-top: 12px; }
.dispatch-camera-host {
  width: 100%;
  max-width: 520px;
  min-height: 220px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
}
.dispatch-camera-host video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.dispatch-scan-result { margin-top: 16px; }
.dispatch-empty-state {
  padding: 36px 18px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.dispatch-order-result {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.dispatch-site-code { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: .04em; color: var(--primary); }
.dispatch-order-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.dispatch-order-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border-radius: 10px;
  background: var(--page-bg);
}
.dispatch-ready-note { margin-bottom: 14px; color: #166534; font-weight: 600; }
.dispatch-ready-note.shipped { color:#075985; }
.dispatch-gap-note {
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid #fecaca;
  border-radius:8px;
  background:#fef2f2;
  color:#b91c1c;
  font-weight:800;
}
.dispatch-products { display: grid; gap: 12px; }
.dispatch-product-card {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.dispatch-product-card img,
.dispatch-product-placeholder {
  width: 104px;
  height: 104px;
  object-fit: contain;
  border-radius: 9px;
  background: #f8fafc;
}
.dispatch-product-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.dispatch-product-copy { display: grid; gap: 7px; }
.dispatch-product-qty { font-size: 18px; font-weight: 800; }
.dispatch-result-message {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.dispatch-result-message.success { color: #166534; background: #dcfce7; }
.dispatch-result-message.warning { color: #92400e; background: #fef3c7; }
.dispatch-result-message.error { color: #991b1b; background: #fee2e2; }
@media (max-width: 760px) {
  .dispatch-upload-grid,
  .dispatch-filter-row,
  .dispatch-order-meta { grid-template-columns: 1fr 1fr; }
  .dispatch-scan-row { align-items: stretch; }
  .dispatch-scan-button { padding-inline: 14px; }
  .dispatch-product-card { grid-template-columns: 88px 1fr; }
  .dispatch-product-card img,
  .dispatch-product-placeholder { width: 88px; height: 88px; }
}
@media (max-width: 480px) {
  .dispatch-upload-grid,
  .dispatch-filter-row,
  .dispatch-order-meta { grid-template-columns: 1fr; }
  .dispatch-scan-row { flex-direction: column; }
  .dispatch-scan-row input.dispatch-scan-input { width: 100%; font-size: 18px; }
  .dispatch-scan-button { width: 100%; }
  .dispatch-result-head { align-items: flex-start; }
  .dispatch-site-code { font-size: 30px; }
}

/* Dispatch readiness workspace */
.dispatch-readiness-page {
  --dispatch-blue:#1457d9;
  --dispatch-navy:#0b1f45;
  --dispatch-green:#168a45;
  --dispatch-amber:#d97706;
  --dispatch-cyan:#0f8b8d;
  padding-top:22px;
  padding-bottom:36px;
}
.dispatch-readiness-page h1,
.dispatch-readiness-page h2,
.dispatch-scan-page h1 { color:var(--dispatch-navy); letter-spacing:-.02em; }
.dispatch-page-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}
.dispatch-page-head h1 { margin:0 0 5px; font-size:27px; line-height:1.1; }
.dispatch-page-head p { margin:0; font-size:14px; }
.dispatch-page-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dispatch-picklist-button {
  min-height:40px;
  border-color:#93c5fd;
  color:#1d4ed8;
  background:#eff6ff;
  font-weight:800;
}
.dispatch-picklist-button:hover { border-color:#60a5fa; background:#dbeafe; }
.modal.dispatch-picklist-modal { width:min(620px, 95vw); }
.dispatch-picklist-form {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.dispatch-picklist-form > p { grid-column:1 / -1; margin:0; }
.dispatch-picklist-form label {
  display:block;
  margin-bottom:5px;
  color:#475569;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dispatch-picklist-form input,
.dispatch-picklist-form select { width:100%; min-height:40px; }
.dispatch-action-link { min-height:40px; padding:9px 18px; font-weight:700; border-radius:8px; }
.dispatch-control-bar {
  display:grid;
  grid-template-columns:minmax(190px, 230px) minmax(220px, 280px) auto;
  gap:16px;
  align-items:end;
  margin-bottom:18px;
}
.dispatch-control-bar label,
.dispatch-order-filters label,
.dispatch-upload-grid label { color:#475569; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.dispatch-control-bar input,
.dispatch-control-bar select,
.dispatch-order-filters input,
.dispatch-order-filters input[type=search],
.dispatch-order-filters select,
.dispatch-upload-grid input,
.dispatch-upload-grid select {
  min-height:40px;
  border-radius:8px;
  border-color:#cfd8e6;
  font-size:13px;
}
.dispatch-order-filters input[type=search] { width:100%; }
.dispatch-refresh-button {
  min-height:40px;
  min-width:100px;
  border-color:#cbd5e1;
  font-weight:700;
}
.dispatch-control-actions { display:flex; align-items:center; gap:8px; }
.dispatch-clean-date-button {
  min-height:40px;
  padding:7px 11px;
  border-color:#fecaca;
  color:#b91c1c;
  background:#fff;
  font-size:11px;
  font-weight:800;
}
.dispatch-clean-date-button:hover { background:#fef2f2; }
.dispatch-summary-layout {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(160px, 180px);
  gap:10px;
  margin-bottom:18px;
}
.dispatch-site-grid {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
}
.dispatch-site-card {
  --site-color:var(--dispatch-blue);
  appearance:none;
  display:block;
  width:100%;
  padding:14px;
  border:1px solid #d6deea;
  border-radius:10px;
  background:#fff;
  text-align:left;
  color:#172033;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dispatch-site-card:hover {
  border-color:var(--site-color);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(15,23,42,.07);
}
.dispatch-site-card.site-qnhs { --site-color:#1457d9; }
.dispatch-site-card.site-tsrv { --site-color:#6d28d9; }
.dispatch-site-card.site-gzbg { --site-color:#0f8b8d; }
.dispatch-site-card.site-elfv { --site-color:#ea6a00; }
.dispatch-site-card.site-myntra { --site-color:#d81b60; }
.dispatch-site-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.dispatch-site-card-head strong { color:var(--site-color); font-size:18px; letter-spacing:.02em; }
.dispatch-site-card-head span { color:#64748b; font-size:11px; font-weight:700; }
.dispatch-site-card dl,
.dispatch-overall-card dl { display:grid; gap:9px; margin:0; }
.dispatch-site-card dl div,
.dispatch-overall-card dl div { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.dispatch-site-card dt,
.dispatch-overall-card dt { color:#475569; font-size:13px; }
.dispatch-site-card dd,
.dispatch-overall-card dd { margin:0; color:var(--dispatch-blue); font-size:18px; font-weight:800; }
.dispatch-site-card dd.ready-value,
.dispatch-overall-card dd.ready-value { color:var(--dispatch-green); }
.dispatch-site-card dd.shipped-value,
.dispatch-overall-card dd.shipped-value { color:#075985; }
.dispatch-site-card dd.gap-value,
.dispatch-overall-card dd.gap-value { color:#b91c1c; }
.dispatch-site-card dd.pending-value,
.dispatch-overall-card dd.pending-value { color:var(--dispatch-amber); }
.dispatch-progress-track { height:8px; margin:16px 0 8px; border-radius:999px; overflow:hidden; background:#e2e8f0; }
.dispatch-progress-track span { display:block; height:100%; border-radius:999px; background:var(--dispatch-green); }
.dispatch-site-card small { color:#64748b; font-size:11px; }
.dispatch-overall-card {
  padding:14px;
  border:1px solid #d6deea;
  border-radius:10px;
  background:#fff;
}
.dispatch-overall-card > strong { display:block; margin-bottom:16px; color:var(--dispatch-navy); font-size:14px; }
.dispatch-overall-rate {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid #e2e8f0;
  color:#475569;
  font-size:12px;
}
.dispatch-overall-rate b { color:var(--dispatch-blue); font-size:20px; }
.dispatch-upload-panel,
.dispatch-orders-panel {
  margin-bottom:18px;
  border:1px solid #d6deea;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.dispatch-upload-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:14px 16px;
  border:0;
  border-radius:0;
  background:#fbfdff;
  text-align:left;
}
.dispatch-upload-title { display:grid; gap:2px; }
.dispatch-upload-title strong { color:var(--dispatch-navy); font-size:14px; }
.dispatch-upload-title small { color:#64748b; font-size:11px; }
.dispatch-upload-chevron { color:var(--dispatch-blue); font-size:20px; font-weight:500; }
.dispatch-upload-body { padding:16px; border-top:1px solid #e2e8f0; }
.dispatch-upload-panel.collapsed .dispatch-upload-body { display:none; }
.dispatch-upload-help { margin:0 0 14px; }
.dispatch-upload-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
}
.dispatch-upload-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dispatch-override-button {
  color:#9a3412;
  background:#fff7ed;
  border-color:#fdba74;
  font-weight:700;
}
.dispatch-import-result.warning { color:#9a3412; background:#fff7ed; border-color:#fed7aa; }
.dispatch-date-correction-panel {
  margin-top:16px;
  border:1px solid #d8e1ee;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 8px rgba(15, 23, 42, .04);
  overflow:hidden;
}
.dispatch-date-correction-body { padding:16px; border-top:1px solid #e2e8f0; }
.dispatch-date-correction-panel.collapsed .dispatch-date-correction-body { display:none; }
.dispatch-date-correction-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:14px;
}
.dispatch-import-button { min-height:40px; flex:0 0 auto; padding-inline:22px; font-weight:700; }
.dispatch-import-result {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  flex:1;
  padding:9px 12px;
  border:1px solid #dbe3ee;
  border-radius:8px;
  background:#f8fafc;
  font-size:12px;
}
.dispatch-import-result.success { color:#166534; border-color:#b7dfc4; background:#f0fdf4; }
.dispatch-import-result.error { color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.dispatch-batch-filter-field {
  min-width:280px;
}
.dispatch-batch-checkbox-list {
  display:grid;
  gap:8px;
  min-height:118px;
  max-height:174px;
  overflow:auto;
  padding:10px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.dispatch-batch-checkbox {
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  gap:10px;
  align-items:center;
  margin:0;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:#334155;
  cursor:pointer;
  font-size:12px;
  line-height:1.35;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  overflow-anchor:none;
}
.dispatch-batch-checkbox:hover {
  border-color:#9fb2cc;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}
.dispatch-batch-checkbox:has(input:checked) {
  border-color:#2563eb;
  background:#eff6ff;
  box-shadow:0 0 0 1px rgba(37,99,235,.12), 0 8px 18px rgba(37,99,235,.08);
}
.dispatch-batch-checkbox input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.dispatch-batch-checkmark {
  width:18px;
  height:18px;
  border:1px solid #94a3b8;
  border-radius:5px;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;
}
.dispatch-batch-checkbox input:checked + .dispatch-batch-checkmark {
  border-color:#2563eb;
  background:#2563eb;
}
.dispatch-batch-checkbox input:checked + .dispatch-batch-checkmark::after {
  content:'';
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.dispatch-batch-content {
  display:grid;
  gap:4px;
  min-width:0;
}
.dispatch-batch-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.dispatch-batch-main strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0f172a;
  font-size:13px;
}
.dispatch-batch-count {
  flex:0 0 auto;
  padding:2px 7px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.dispatch-batch-meta {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:#64748b;
  font-size:11px;
  overflow:hidden;
}
.dispatch-batch-meta span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dispatch-batch-meta span + span::before {
  content:'';
  display:inline-block;
  width:4px;
  height:4px;
  margin:0 6px 2px 0;
  border-radius:999px;
  background:#cbd5e1;
}
.dispatch-batch-empty {
  color:#64748b;
  font-size:12px;
  padding:14px 12px;
  border:1px dashed #cbd5e1;
  border-radius:8px;
  background:#fff;
  text-align:center;
}
.dispatch-batch-actions {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.dispatch-select-batches-button {
  min-height:32px;
  padding:7px 12px;
  font-size:12px;
  font-weight:800;
}
.dispatch-batch-help {
  font-size:11px;
}
.dispatch-batch-pill {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid #c7d2fe;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.mrp-generator-page .page-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}
.mrp-generator-layout {
  display:grid;
  grid-template-columns:minmax(320px, 1.1fr) minmax(300px, .9fr);
  gap:16px;
  align-items:start;
}
.mrp-generator-card h2 { margin-top:0; }
.mrp-generator-search {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:end;
}
.mrp-generator-results {
  display:grid;
  gap:8px;
  margin-top:14px;
}
.mrp-generator-result {
  display:grid;
  gap:4px;
  width:100%;
  padding:10px 12px;
  border:1px solid #d8e1ee;
  border-radius:8px;
  background:#fff;
  text-align:left;
}
.mrp-generator-result:hover,
.mrp-generator-result.selected {
  border-color:#2563eb;
  background:#eff6ff;
}
.mrp-generator-result strong,
.mrp-generator-selected-product strong {
  color:#0f172a;
  font-size:14px;
}
.mrp-generator-result span,
.mrp-generator-product-meta {
  color:#64748b;
  font-size:12px;
}
.mrp-generator-selection {
  margin-bottom:14px;
}
.mrp-generator-empty {
  padding:12px;
  border:1px dashed #cbd5e1;
  border-radius:8px;
  color:#64748b;
  background:#f8fafc;
}
.mrp-generator-empty.error { color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.mrp-generator-selected-product {
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid #d8e1ee;
  border-radius:8px;
  background:#fff;
}
.mrp-generator-selected-product p {
  margin:0;
}
.mrp-generator-product-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
}
.mrp-generator-print-controls {
  display:grid;
  grid-template-columns:160px auto;
  gap:12px;
  align-items:end;
}
.mrp-generator-preview {
  display:grid;
  gap:4px;
  margin-top:14px;
  padding:10px 12px;
  border:1px solid #dbe3ee;
  border-radius:8px;
  background:#f8fafc;
  font-size:12px;
}
.mrp-generator-preview.success { color:#166534; border-color:#b7dfc4; background:#f0fdf4; }
.mrp-generator-preview.error { color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.dispatch-list-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-bottom:1px solid #e2e8f0;
}
.dispatch-list-title { display:flex; align-items:baseline; gap:10px; }
.dispatch-list-head h2 { margin:0; font-size:17px; }
.dispatch-order-count { color:#64748b; font-size:12px; }
.dispatch-export-button { min-height:36px; font-weight:700; color:#166534; }
.dispatch-order-filters {
  display:grid;
  grid-template-columns:minmax(260px, 1fr) 170px 190px;
  gap:12px;
  align-items:end;
  padding:13px 16px;
  border-bottom:1px solid #e2e8f0;
  background:#fbfdff;
}
.dispatch-bulk-delete-bar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:9px 16px;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}
.dispatch-selected-count { margin-right:auto; color:#64748b; font-size:12px; font-weight:700; }
.dispatch-select-all-button,
.dispatch-push-awbs-button,
.dispatch-delete-selected-button { min-height:32px; padding:5px 10px; font-size:11px; font-weight:800; }
.dispatch-push-awbs-button { border-color:#bfdbfe; color:#1d4ed8; background:#eff6ff; }
.dispatch-push-awbs-button:hover:not(:disabled) { border-color:#93c5fd; background:#dbeafe; }
.dispatch-delete-selected-button { border-color:#fecaca; color:#b91c1c; background:#fff; }
.dispatch-delete-selected-button:hover:not(:disabled) { border-color:#fca5a5; background:#fef2f2; }
.dispatch-table-mount .scroll-x { border:0; border-radius:0; }
.dispatch-table-mount { overflow-anchor:none; }
.dispatch-table-mount table { font-size:12px; }
.dispatch-table-mount th {
  padding:10px 12px;
  color:#334155;
  background:#f8fafc;
  border-bottom:1px solid #dbe3ee;
  font-size:11px;
  text-transform:none;
}
.dispatch-table-mount td { padding:11px 12px; vertical-align:middle; border-bottom:1px solid #e8edf4; }
.dispatch-table-mount tbody tr:hover { background:#f8fbff; }
.dispatch-table-mount tbody tr.dispatch-gap-row {
  background:#fff7ed;
  box-shadow:inset 4px 0 0 #dc2626;
}
.dispatch-table-mount tbody tr.dispatch-gap-row:hover { background:#ffedd5; }
.dispatch-gap-pill {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border:1px solid #fecaca;
  border-radius:999px;
  background:#fef2f2;
  color:#b91c1c;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.dispatch-awb { color:var(--dispatch-blue); font-weight:700; }
.dispatch-awb-link {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--dispatch-blue);
  cursor:pointer;
  font-weight:700;
  padding:0;
  text-decoration:underline;
  text-underline-offset:2px;
}
.dispatch-awb-link:hover { color:#0f5ea8; }
.dispatch-order-detail-modal .modal { max-width:920px; width:min(920px, calc(100vw - 32px)); }
.dispatch-order-detail-modal-body { max-height:72vh; overflow:auto; }
.dispatch-order-row-actions { display:flex; align-items:center; gap:6px; }
.dispatch-edit-order-button {
  min-height:30px;
  padding:5px 10px;
  border-color:#cbd5e1;
  color:#1d4ed8;
  background:#fff;
  font-size:11px;
  font-weight:800;
}
.dispatch-edit-order-button:hover { border-color:#93c5fd; background:#eff6ff; }
.dispatch-delete-order-button {
  min-height:30px;
  padding:5px 10px;
  border-color:#fecaca;
  color:#b91c1c;
  background:#fff;
  font-size:11px;
  font-weight:800;
}
.dispatch-delete-order-button:hover { border-color:#fca5a5; background:#fef2f2; }
.modal.dispatch-edit-order-modal { width:min(620px, 95vw); }
.dispatch-edit-order-form {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.dispatch-edit-order-form > p { grid-column:1 / -1; margin:0; }
.dispatch-edit-order-form label {
  display:block;
  margin-bottom:5px;
  color:#475569;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dispatch-edit-order-form input,
.dispatch-edit-order-form select { width:100%; min-height:40px; }
.dispatch-site-label { font-size:12px; letter-spacing:.03em; }
.dispatch-site-label.site-qnhs { color:#1457d9; }
.dispatch-site-label.site-tsrv { color:#6d28d9; }
.dispatch-site-label.site-gzbg { color:#0f8b8d; }
.dispatch-site-label.site-elfv { color:#ea6a00; }
.dispatch-table-empty { padding:42px 20px; text-align:center; color:#64748b; }

/* Focused scanner and lookup surfaces */
.dispatch-scan-page { padding-top:22px; padding-bottom:40px; background:#f7f9fc; }
.dispatch-mobile-page { max-width:820px; margin:0 auto; }
.dispatch-mobile-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.dispatch-mobile-heading h1 { margin:0 0 5px; font-size:25px; }
.dispatch-mobile-heading p { margin:0; font-size:13px; }
.dispatch-mobile-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.dispatch-mobile-nav .button {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:0;
  text-align:center;
}
.dispatch-lookup-notice {
  margin-bottom:12px;
  padding:10px 13px;
  border:1px solid #bfdbfe;
  border-radius:8px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:13px;
  font-weight:700;
}
.dispatch-scan-page .dispatch-scan-card {
  position:static;
  padding:16px;
  border:1px solid #d6deea;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}
.dispatch-scan-date-row {
  display:grid;
  grid-template-columns:minmax(180px, 240px) 1fr;
  align-items:end;
  gap:14px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid #e2e8f0;
}
.dispatch-scan-date-row > div { display:grid; gap:6px; }
.dispatch-scan-date-row label {
  color:var(--dispatch-navy);
  font-size:12px;
  font-weight:800;
}
.dispatch-scan-date-row input { min-height:44px; }
.dispatch-scan-date-row p { margin:0 0 4px; line-height:1.45; }
.dispatch-scan-prompt {
  display:grid;
  justify-items:center;
  gap:3px;
  margin-bottom:14px;
  padding:18px;
  border:2px dashed #8fb2ff;
  border-radius:10px;
  color:var(--dispatch-navy);
  text-align:center;
}
.dispatch-scan-prompt strong { font-size:18px; }
.dispatch-scan-prompt span { color:#64748b; font-size:12px; }
.dispatch-scan-page .dispatch-scan-row input.dispatch-scan-input {
  min-height:50px;
  border-radius:8px;
  border-color:#b9c7da;
  font-size:18px;
}
.dispatch-scan-page .dispatch-scan-button,
.dispatch-camera-button,
.dispatch-next-button { min-height:50px; font-size:14px; font-weight:800; border-radius:8px; }
.dispatch-camera-actions { display:flex; gap:8px; margin-top:0; }
.dispatch-camera-actions button { flex:1; }
.dispatch-camera-button { min-height:56px; font-size:16px; }
.dispatch-manual-divider {
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 10px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.dispatch-manual-divider::before,
.dispatch-manual-divider::after {
  content:'';
  height:1px;
  flex:1;
  background:#dbe3ee;
}
.dispatch-manual-divider span { white-space:nowrap; }
.dispatch-scan-page .dispatch-scan-result { margin-top:14px; }
.dispatch-scan-page .dispatch-order-result { border-color:#cbd7e7; border-radius:10px; box-shadow:none; }
.dispatch-scan-page .dispatch-result-message.success {
  color:#08752f;
  border:1px solid #86d49d;
  background:#ecfdf3;
  font-size:18px;
}
.dispatch-scan-page .dispatch-result-message.warning { border:1px solid #f5c76c; }
.dispatch-site-code.site-qnhs { color:#1457d9; }
.dispatch-site-code.site-tsrv { color:#6d28d9; }
.dispatch-site-code.site-gzbg { color:#0f8b8d; }
.dispatch-site-code.site-elfv { color:#ea6a00; }
.dispatch-scan-page .dispatch-order-meta { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.dispatch-scan-page .dispatch-product-card { background:#fff; }
.dispatch-products-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:16px 0 8px;
  color:var(--dispatch-navy);
  font-size:13px;
}
.dispatch-products-head span { color:#64748b; font-size:12px; }
.dispatch-scan-page .dispatch-product-card { grid-template-columns:88px 1fr auto; }
.dispatch-scan-page .dispatch-product-card img,
.dispatch-scan-page .dispatch-product-placeholder { width:88px; height:88px; }
.dispatch-scan-page .dispatch-product-qty {
  display:grid;
  justify-items:center;
  gap:2px;
  min-width:46px;
  font-size:12px;
}
.dispatch-scan-page .dispatch-product-qty span { color:#64748b; font-size:11px; font-weight:600; }
.dispatch-scan-page .dispatch-product-qty strong { color:var(--dispatch-navy); font-size:20px; }
.dispatch-scan-page .dispatch-product-copy > strong {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:13px;
  line-height:1.3;
}
.dispatch-next-button { width:100%; margin-top:12px; }
.dispatch-scan-popup {
  position:fixed;
  inset:0;
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(5, 15, 35, .78);
  backdrop-filter:blur(5px);
}
.dispatch-scan-popup-panel {
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  width:min(760px, 100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:16px;
  border-radius:16px;
  background:#f7f9fc;
  box-shadow:0 24px 80px rgba(0, 0, 0, .35);
}
.dispatch-scan-popup-result {
  min-height:0;
  overflow:auto;
}
.dispatch-destination-banner {
  --destination-color:#1457d9;
  display:grid;
  place-items:center;
  gap:4px;
  margin-bottom:12px;
  padding:18px;
  border:3px solid var(--destination-color);
  border-radius:12px;
  color:var(--destination-color);
  background:#fff;
  text-align:center;
}
.dispatch-destination-banner.site-qnhs { --destination-color:#1457d9; }
.dispatch-destination-banner.site-tsrv { --destination-color:#6d28d9; }
.dispatch-destination-banner.site-gzbg { --destination-color:#0f8b8d; }
.dispatch-destination-banner.site-elfv { --destination-color:#ea6a00; }
.dispatch-destination-banner span {
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dispatch-destination-banner strong {
  font-size:clamp(48px, 12vw, 84px);
  line-height:1;
  letter-spacing:.04em;
}
.dispatch-popup-next {
  position:sticky;
  bottom:env(safe-area-inset-bottom, 0);
  width:100%;
  min-height:58px;
  margin-top:12px;
  font-size:17px;
  font-weight:800;
  box-shadow:0 -8px 20px rgba(247, 249, 252, .95);
}
.dispatch-scan-popup-error {
  display:grid;
  gap:8px;
  padding:28px 20px;
  border:2px solid #ef4444;
  border-radius:12px;
  color:#991b1b;
  background:#fef2f2;
  text-align:center;
}
.dispatch-scan-popup-error strong { font-size:28px; }
.dispatch-scan-popup-error span { font-size:16px; }
.packing-lookup-result { display:grid; gap:14px; }
.packing-lookup-order-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px;
  border:1px solid #cbd7e7;
  border-radius:12px;
  background:#fff;
}
.packing-lookup-order-head > div { display:grid; gap:3px; }
.packing-lookup-order-head > div > span {
  color:#64748b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.packing-lookup-order-head > div > strong {
  color:var(--dispatch-blue);
  font-size:34px;
  line-height:1;
}
.packing-lookup-meta {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}
.packing-lookup-meta > div {
  display:grid;
  gap:4px;
  min-width:0;
  padding:11px;
  border-radius:10px;
  background:#eef3f9;
}
.packing-lookup-meta span,
.packing-lookup-identifiers span {
  color:#64748b;
  font-size:11px;
}
.packing-lookup-meta strong { overflow-wrap:anywhere; color:var(--dispatch-navy); font-size:14px; }
.packing-lookup-products { display:grid; gap:18px; }
.packing-lookup-product {
  padding:14px;
  border:1px solid #cbd7e7;
  border-radius:14px;
  background:#fff;
}
.packing-lookup-product-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}
.packing-lookup-product-head strong {
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
  background:var(--dispatch-blue);
  font-size:15px;
}
.packing-lookup-product h2 {
  margin:12px 0;
  color:var(--dispatch-navy);
  font-size:20px;
  line-height:1.25;
}
.packing-lookup-identifiers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.packing-lookup-identifiers > div {
  display:grid;
  gap:3px;
  min-width:0;
  padding:9px 10px;
  border-radius:8px;
  background:#f3f6fa;
}
.packing-lookup-identifiers strong { overflow-wrap:anywhere; color:var(--dispatch-navy); font-size:13px; }
.packing-lookup-image {
  display:grid;
  place-items:center;
  width:100%;
  min-height:420px;
  overflow:hidden;
  border:1px solid #dbe3ee;
  border-radius:12px;
  background:#fff;
}
.packing-lookup-image img {
  display:block;
  width:100%;
  height:min(68vh, 720px);
  object-fit:contain;
  background:#fff;
}
.packing-lookup-image-missing {
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  width:100%;
  min-height:420px;
  padding:24px;
  color:#64748b;
  background:#f1f5f9;
  text-align:center;
}
.packing-lookup-image-missing strong { color:#334155; font-size:20px; }
.packing-lookup-page .dispatch-scan-popup-panel { width:min(920px, 100%); }

@media (max-width:1100px) {
  .dispatch-summary-layout { grid-template-columns:1fr; }
  .dispatch-overall-card { display:grid; grid-template-columns:140px 1fr 160px; align-items:center; gap:20px; }
  .dispatch-overall-card > strong { margin:0; }
  .dispatch-overall-card dl { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .dispatch-overall-rate { margin:0; padding:0 0 0 18px; border-top:0; border-left:1px solid #e2e8f0; }
}
@media (max-width:900px) {
  .dispatch-site-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dispatch-order-filters { grid-template-columns:1fr 1fr; }
  .dispatch-search-field { grid-column:1 / -1; min-width:0; }
  .mrp-generator-layout { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .dispatch-picklist-form { grid-template-columns:1fr; }
  .dispatch-picklist-form > p { grid-column:auto; }
  .dispatch-edit-order-form { grid-template-columns:1fr; }
  .dispatch-edit-order-form > p { grid-column:auto; }
  .dispatch-bulk-delete-bar { flex-wrap:wrap; justify-content:flex-start; }
  .dispatch-selected-count { width:100%; margin-right:0; }
  html:has(.dispatch-scan-page),
  body:has(.dispatch-scan-page) { height:auto; min-height:100%; overflow:auto; }
  .shell:has(.dispatch-scan-page) { height:auto; min-height:100vh; }
  .shell:has(.dispatch-scan-page) .sidebar,
  .shell:has(.dispatch-scan-page) .topbar { display:none; }
  .shell:has(.dispatch-scan-page) .main-area { width:100%; min-height:100vh; overflow:visible; }
  .shell:has(.dispatch-scan-page) .container {
    max-width:none;
    width:100%;
    margin:0;
    overflow:visible;
    flex:none;
  }
  .dispatch-readiness-page,
  .dispatch-scan-page { padding:14px 12px 28px; }
  .dispatch-page-head { flex-direction:column; }
  .dispatch-page-actions { width:100%; }
  .dispatch-page-actions .button { flex:1; }
  .dispatch-control-bar { grid-template-columns:1fr 1fr; }
  .dispatch-refresh-field { grid-column:1 / -1; }
  .dispatch-control-actions { width:100%; }
  .dispatch-control-actions button { flex:1; }
  .dispatch-overall-card { display:block; }
  .dispatch-overall-card > strong { margin-bottom:14px; }
  .dispatch-overall-card dl { display:grid; }
  .dispatch-overall-rate { margin-top:16px; padding:14px 0 0; border-left:0; border-top:1px solid #e2e8f0; }
  .dispatch-upload-grid { grid-template-columns:1fr 1fr; }
  .dispatch-upload-footer { flex-direction:column; align-items:stretch; }
  .dispatch-upload-actions { width:100%; }
  .dispatch-upload-actions button { flex:1; }
  .dispatch-date-correction-grid { grid-template-columns:1fr 1fr; }
  .dispatch-import-button { width:100%; }
  .dispatch-order-filters { grid-template-columns:1fr; }
  .dispatch-search-field { grid-column:auto; }
  .dispatch-list-head { align-items:flex-start; }
  .dispatch-scan-page .dispatch-order-meta { grid-template-columns:1fr 1fr; }
  .mrp-generator-page .page-head { display:grid; }
  .mrp-generator-search,
  .mrp-generator-print-controls { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .dispatch-site-grid { grid-template-columns:1fr; }
  .dispatch-control-bar,
  .dispatch-upload-grid { grid-template-columns:1fr; }
  .dispatch-date-correction-grid { grid-template-columns:1fr; }
  .dispatch-refresh-field { grid-column:auto; }
  .dispatch-control-actions { flex-direction:column; }
  .dispatch-control-actions button { width:100%; }
  .dispatch-list-head { flex-direction:column; }
  .dispatch-export-button { width:100%; }
  .dispatch-scan-date-row { grid-template-columns:1fr; align-items:stretch; }
  .dispatch-mobile-nav { position:sticky; top:0; z-index:8; padding:4px 0; background:#f7f9fc; }
  .dispatch-mobile-nav .button { min-width:0; padding-inline:8px; font-size:13px; }
  .dispatch-scan-page .dispatch-scan-card { padding:12px; }
  .dispatch-scan-date-row { gap:8px; margin-bottom:12px; padding-bottom:12px; }
  .dispatch-scan-date-row p { font-size:11px; }
  .dispatch-scan-prompt { padding:12px; margin-bottom:10px; }
  .dispatch-camera-host { min-height:190px; border-radius:10px; }
  .dispatch-camera-button { width:100%; min-height:60px; font-size:17px; }
  .dispatch-scan-page .dispatch-scan-row { flex-direction:column; }
  .dispatch-scan-page .dispatch-scan-row input.dispatch-scan-input,
  .dispatch-scan-page .dispatch-scan-button { width:100%; }
  .dispatch-scan-page .dispatch-order-meta { grid-template-columns:1fr; }
  .dispatch-scan-page .dispatch-product-card { grid-template-columns:74px 1fr auto; gap:10px; }
  .dispatch-scan-page .dispatch-product-card img,
  .dispatch-scan-page .dispatch-product-placeholder { width:74px; height:74px; }
  .dispatch-scan-popup { height:100dvh; padding:0; align-items:stretch; }
  .dispatch-scan-popup-panel {
    width:100%;
    max-height:none;
    height:100dvh;
    min-height:100dvh;
    border-radius:0;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0));
    overflow:hidden;
  }
  .dispatch-popup-next { min-height:62px; margin-top:10px; }
  .packing-lookup-meta { grid-template-columns:1fr 1fr; }
  .packing-lookup-product { padding:10px; }
  .packing-lookup-product h2 { font-size:18px; }
  .packing-lookup-identifiers { grid-template-columns:1fr; }
  .packing-lookup-image,
  .packing-lookup-image-missing { min-height:70vh; }
  .packing-lookup-image img { height:70vh; }
}