/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #f5f4f0;
  --sidebar-bg: #1a1a1a;
  --sidebar-w:  220px;
  --accent:     #c8a96e;
  --accent-dk:  #a8893e;
  --text:       #1a1a1a;
  --muted:      #777;
  --border:     #e2e0da;
  --white:      #ffffff;
  --radius:     8px;
  --tab-hover:  #2a2a2a;
  --tab-active: #2f2f2f;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}

.hidden { display: none !important; }



/* ─── APP LAYOUT ────────────────────────────────────────────── */
#app { display: flex; height: 100vh; }

/* ─── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg);
  display: flex; flex-direction: column; flex-shrink: 0;
  padding: 24px 0; height: 100vh; position: sticky; top: 0;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 24px; border-bottom: 1px solid #2a2a2a; margin-bottom: 16px;
}
.brand-logo {
  width: 34px; height: 34px; background: var(--accent);
  color: var(--white); font-weight: 700; font-size: 13px;
  border-radius: 7px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.brand-name { color: #e0ddd6; font-size: 13px; font-weight: 500; line-height: 1.3; }
.tab-list { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.tab-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: none; background: transparent;
  color: #aaa; font-size: 14px; font-weight: 500;
  border-radius: 6px; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.tab-item:hover { background: var(--tab-hover); color: #e0ddd6; }
.tab-item.active {
  background: var(--tab-active); color: var(--white);
  border-left: 3px solid var(--accent); padding-left: 9px;
}
.tab-item svg { flex-shrink: 0; }

/* ─── MAIN CONTENT ──────────────────────────────────────────── */
.content { flex: 1; overflow-y: auto; padding: 40px 48px; }
.panel { display: none; }
.panel.active { display: block; }

.panel-header {
  margin-bottom: 32px; padding-bottom: 20px;
  border-bottom: 1.5px solid var(--border);
}
.panel-header h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.panel-header p  { color: var(--muted); font-size: 14px; }

/* ─── SEARCH AREA ───────────────────────────────────────────── */
.search-area { display: flex; gap: 12px; max-width: 520px; margin-bottom: 32px; }
.search-area input {
  flex: 1; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 15px; background: var(--white); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.search-area input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.15);
}
.search-area button {
  padding: 12px 24px; background: var(--accent);
  color: var(--white); border: none; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .2s;
}
.search-area button:hover { background: var(--accent-dk); }
.search-area button:disabled { background: #ccc; cursor: not-allowed; }

/* ─── DATE FILTER ROW (SKU Lookup) ──────────────────────────── */
.date-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  margin-top: -8px;
}
.date-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.date-filter-checkbox input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent);
}
.date-filter-row input[type="date"] {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--white);
  outline: none;
  color: var(--text);
}
.date-filter-row input[type="date"].date-filter-inactive {
  background: #f1efe9;
  color: var(--muted);
}
.date-filter-row input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.15);
}

/* ─── RESULT AREA ───────────────────────────────────────────── */
#result-area { max-width: 100%; }

.result-placeholder { color: var(--muted); font-size: 14px; padding: 24px 0; }

.result-meta {
  font-size: 13px; color: var(--muted);
  margin-bottom: 14px;
}
.result-meta strong { color: var(--text); }

/* ─── TABLE ─────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
}
thead tr { background: #f0ede6; }
th {
  padding: 11px 14px; text-align: left;
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); white-space: nowrap;
  border-bottom: 1.5px solid var(--border);
}
td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #faf9f6; }

/* ─── LOADING ───────────────────────────────────────────────── */
.loading {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 14px; padding: 24px 0;
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── SUMMARY CARDS ─────────────────────────────────────────── */
.summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.summary-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  min-width: 160px;
  flex: 1;
}

.summary-card--image {
  flex: 0 0 auto;
  min-width: 120px;
}

.summary-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.summary-value--sm {
  font-size: 16px;
  font-weight: 600;
  padding-top: 2px;
}

.product-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 4px;
  margin-top: 4px;
}

/* ─── SUMMARY GRID OVERRIDE ─────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: 200px 1fr 280px;
  gap: 12px;
  margin-bottom: 28px;
  align-items: stretch;
}

/* Left col — stats stacked, each card keeps its own natural/compact size */
.summary-col-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Middle col — image. Stretches to match the left column's full height
   (however many stat cards it has), so it never looks mismatched —
   the cards themselves are untouched by this, only this box grows/shrinks. */
.summary-col-mid {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100%;
}

.summary-col-mid .summary-label {
  align-self: flex-start;
  margin-bottom: 12px;
}

.product-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

/* Right col — info cards stacked */
.summary-col-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual card stays same */
.summary-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
}

/* ─── SHOPIFY QTY CARD ──────────────────────────────────────── */
.summary-card--shopify {
  border-color: #d4e8d4;
  background: #f6fdf6;
}

.shopify-loading {
  display: inline-block;
  color: var(--muted);
  font-size: 20px;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ─── SCANNING HISTORY ──────────────────────────────────────── */
.history-cell { white-space: normal; }

.sheet-badge {
  display: inline-block;
  background: #e8f0fe;
  color: #1a56db;
  border: 1px solid #c7d7fc;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin: 2px 2px;
  transition: background .15s;
  white-space: nowrap;
}
.sheet-badge:hover  { background: #d0e2ff; }
.sheet-badge.active { background: #1a56db; color: #fff; }

.not-scanned {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* ─── DROPDOWN ROW ──────────────────────────────────────────── */
.dropdown-row td { padding: 0 !important; border-bottom: 2px solid #c7d7fc !important; }

.dropdown-content {
  background: #f0f5ff;
}

.drop-inner {
  padding: 16px 20px;
}

.drop-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a56db;
  margin-bottom: 10px;
}

.drop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
}
.drop-table th {
  background: #e8f0fe;
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a56db;
  border-bottom: 1px solid #c7d7fc;
}
.drop-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e8f0fe;
  color: var(--text);
}
.drop-table tbody tr:last-child td { border-bottom: none; }
.drop-table tbody tr:hover { background: #f5f8ff; }

/* ─── SKU DATA TAB ──────────────────────────────────────────── */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  background: var(--white);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  max-width: 640px;
  margin-bottom: 24px;
}
.upload-area:hover,
.upload-area.drag-over {
  border-color: var(--accent);
  background: #fdf8f0;
}
.upload-icon { color: var(--muted); margin-bottom: 12px; }
.upload-text { font-size: 15px; color: var(--text); margin-bottom: 6px; }
.upload-link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}
.upload-hint { font-size: 12px; color: var(--muted); }

/* ─── STATS BAR ─────────────────────────────────────────────── */
#sku-data-stats,
#box-data-status {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

/* ─── UPLOAD STATUS ─────────────────────────────────────────── */
.upload-status-msg {
  font-size: 14px;
  padding: 12px 0;
  font-weight: 500;
}

/* ─── PREVIEW ───────────────────────────────────────────────── */
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.preview-info { display: flex; align-items: center; gap: 12px; }
.preview-filename { font-weight: 600; font-size: 14px; }
.preview-count {
  background: #e8f0fe;
  color: #1a56db;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.preview-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

.upload-btn {
  padding: 10px 22px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.upload-btn:hover   { background: var(--accent-dk); }
.upload-btn:disabled { background: #ccc; cursor: not-allowed; }

/* ─── SAMPLE DOWNLOAD LINK ──────────────────────────────────── */
.sample-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}
.sample-download:hover { color: var(--accent-dk); }

/* ─── SIDEBAR FOOTER ────────────────────────────────────────── */
.sidebar-footer {
  flex-shrink: 0;
  padding: 16px 12px;
  border-top: 1px solid #2a2a2a;
}
.admin-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 12px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
  transition: background .15s, color .15s;
}
.admin-link:hover { background: #2a2a2a; color: #e0ddd6; }
.logout-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid #444;
  color: #aaa;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.logout-btn:hover { background: #2a2a2a; color: #fff; }

/* ─── DATA TABLE CONTROLS ───────────────────────────────────── */
#data-table-container { margin-top: 24px; }

.table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.table-search input {
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  width: 280px;
  outline: none;
  transition: border-color .2s;
}
.table-search input:focus { border-color: var(--accent); }

/* Variance Data's "Search by [field]" dropdown + dynamic input area */
#variance-search-field-select {
  padding: 9px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
  background: var(--white);
  flex-shrink: 0;
}
#variance-search-input-area input {
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
#variance-search-input-area input:focus { border-color: var(--accent); }
#variance-search-input-area input[type="number"] { width: 90px; }
#variance-search-input-area input[type="text"] { width: 220px; }

.table-limit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.table-limit select {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
}

/* ─── PAGINATION ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.pagination-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pagination-btns button {
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.pagination-btns button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pagination-btns button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── EDIT BUTTON ────────────────────────────────────────────── */
.btn-edit {
  padding: 4px 12px;
  background: #e8f0fe;
  color: #1a56db;
  border: 1px solid #c7d7fc;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-edit:hover { background: #d0e2ff; }

/* ─── EDIT MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
  padding: 20px;
}
.modal-box {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1.5px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-close {
  background: none; border: none;
  font-size: 18px; cursor: pointer;
  color: var(--muted); padding: 4px 8px;
  border-radius: 4px; transition: background .15s;
}
.modal-close:hover { background: var(--bg); }
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal-footer {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-top: 1.5px solid var(--border);
  gap: 10px;
}
.btn-cancel {
  padding: 9px 18px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
.btn-cancel:hover { border-color: #999; }

/* ─── COLUMN TOGGLE ─────────────────────────────────────────── */
.table-right-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.col-toggle-btn {
  padding: 8px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.col-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

.col-panel {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 8px;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.col-panel.hidden { display: none; }
.col-panel-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 10px;
}
.col-panel-list { display: flex; flex-direction: column; gap: 4px; }
.col-panel-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 5px;
  cursor: grab; transition: background .1s;
  user-select: none;
}
.col-panel-item:hover   { background: var(--bg); }
.col-panel-item.dragging { opacity: 0.4; }
.col-panel-item.drag-over { background: #fdf8f0; border: 1.5px dashed var(--accent); }
.drag-handle { color: #bbb; font-size: 16px; cursor: grab; }
.col-panel-item label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 400;
  color: var(--text); cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.col-panel-item input[type=checkbox] { cursor: pointer; width: 14px; height: 14px; }

/* ─── COL PANEL HEADER + APPLY ──────────────────────────────── */
.col-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.col-apply-btn {
  padding: 5px 14px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.col-apply-btn:hover { background: var(--accent-dk); }

/* ─── EXPORT BUTTON ─────────────────────────────────────────── */
.export-btn {
  padding: 8px 14px;
  background: #2d7a4f;
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.export-btn:hover { background: #1f5c3a; }
.export-btn.hidden { display: none; }

/* ─── ROW CHECKBOX ──────────────────────────────────────────── */
.row-cb, #select-all-cb {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ─── AI QUERY BUTTON ───────────────────────────────────────── */
.ai-query-btn-trigger {
  padding: 8px 14px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.ai-query-btn-trigger:hover { background: #333; }

/* ─── AI RESULT BANNER ──────────────────────────────────────── */
.ai-result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f5ff;
  border: 1.5px solid #c7d7fc;
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 13px;
}
.ai-result-info { color: #1a56db; }
.ai-result-info em { font-style: normal; font-weight: 500; }
.ai-clear-btn {
  padding: 5px 12px;
  background: #fff;
  border: 1.5px solid #c7d7fc;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: #1a56db;
  transition: all .15s;
}
.ai-clear-btn:hover { background: #e8f0fe; }

/* ─── TABLE COLUMN WIDTH FIX ────────────────────────────────── */
#sku-data-table td,
#sku-data-table th {
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sku-data-table td:nth-child(3) { /* Name column */
  max-width: 280px;
  white-space: nowrap;
}

/* ─── COLUMN FILTERS ────────────────────────────────────────── */
.filter-row td {
  padding: 4px 6px !important;
  background: #faf9f6;
  border-bottom: 2px solid var(--border) !important;
}

.col-filter-input {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  outline: none;
  background: var(--white);
  transition: border-color .2s;
  box-sizing: border-box;
}

.col-filter-input:focus { border-color: var(--accent); }
.col-filter-range { width: 52px !important; }

/* ─── SCAN LOG ──────────────────────────────────────────────── */
.scan-log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.scan-log-row.scan-log-duplicate {
  background: #fff8e6;
  border-color: #f0c040;
}
.scan-log-num  { color: #aaa; font-size: 11px; min-width: 20px; }
.scan-log-box  { font-weight: 700; color: var(--text); }
.scan-log-sku  { color: var(--muted); font-size: 12px; }
.scan-log-qty  { color: #1a56db; font-size: 12px; font-weight: 600; }
.scan-log-inv  { color: #2d7a4f; font-size: 12px; }
.scan-log-loc  { color: #777; font-size: 12px; }

/* ===== Put Box Card ===== */

.put-box-card{
    width:100%;
    margin-top:10px;
    padding:12px 16px;
    border:1px solid #f2d28a;
    border-radius:8px;
    background:#fffaf0;
}

.put-box-row{
    display:flex;
    align-items:center;
    gap:8px 14px;
    flex-wrap:wrap;
}

.put-box-title{
    font-size:clamp(16px,1.2vw,20px);
    font-weight:700;
    color:#222;
}

.put-box-label{
    font-size:clamp(14px,1vw,18px);
    font-weight:600;
    color:#555;
}

.put-box-zone{
    font-size:clamp(18px,1.5vw,24px);
    font-weight:800;
    color:#d97706;
}

.put-box-slot{
    font-size:clamp(18px,1.5vw,24px);
    font-weight:800;
    color:#15803d;
}

.put-box-known{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #ead8aa;
    font-size:14px;
    color:#666;
}

/* Tablet */

@media (max-width:991px){

    .put-box-title{
        font-size:18px;
    }

    .put-box-label{
        font-size:16px;
    }

    .put-box-zone,
    .put-box-slot{
        font-size:20px;
    }

}

/* Mobile */

@media (max-width:576px){

    .put-box-card{
        padding:10px 12px;
    }

    .put-box-row{
        display:block;
        line-height:1.5;
    }

    .put-box-title{
        display:block;
        font-size:16px;
        margin-bottom:6px;
    }

    .put-box-label{
        font-size:14px;
    }

    .put-box-zone,
    .put-box-slot{
        font-size:18px;
    }

    .put-box-known{
        font-size:12px;
    }
}
/* ─── DUPLICATE BADGE ───────────────────────────────────────── */
.badge-duplicate {
  background: #fff0cc;
  color: #b45309;
  border: 1px solid #f0c040;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* ─── NEW BOX ADDED BADGE ───────────────────────────────────── */
/* Auditor scan of a box number never seen anywhere in the system before —
   see is_new_box (routes/scan-api.js boxExistsInSystem check). */
.badge-new-box {
  background: #e8f4e8;
  color: #1a7a3f;
  border: 1px solid #7cc499;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}
.scan-log-row.scan-log-new-box {
  background: #f0faf3;
  border-color: #7cc499;
}

/* ─── SCAN TABLE ────────────────────────────────────────────── */
.scan-row-duplicate td { background: #fff8e6; }
.scan-row-new-box td { background: #f0faf3; }
.fetching { color: #aaa; font-style: italic; font-size: 12px; }

/* ─── LIVE INDICATOR (Scan & Add Data auto-refresh) ────────────── */
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2d7a4f;
  display: inline-block;
  animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45,122,79,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(45,122,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,122,79,0); }
}

/* ─── SKU LOOKUP SUB-TABS (Audit / Movement / Shipped-Return) ──── */
.sublookup-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--border);
  margin: 24px 0 0;
}
.sublookup-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1.5px;
}
.sublookup-tab:hover { color: var(--text); }
.sublookup-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sublookup-panel { display: none; padding-top: 18px; }
.sublookup-panel.active { display: block; }
/* ─── SHIPPED / RETURN BADGES ───────────────────────────────── */
.badge-shipped {
  background: #e0f0ff;
  color: #1a56db;
  border: 1px solid #a8d0ff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.badge-return {
  background: #fdeaea;
  color: #c0392b;
  border: 1px solid #f0a8a8;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.badge-putback {
  background: #fef3e2;
  color: #b45309;
  border: 1px solid #f6d08a;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* ─── SORTABLE TABLE HEADERS (Variance Data) ───────────────────── */
.sortable-th:hover { color: var(--accent); background: rgba(200,169,110,0.08); }

/* ─── MULTI-SELECT DROPDOWN (Variance Data Category/Zone filters) ──── */
.multiselect { position: relative; }
.multiselect-btn {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--white);
  cursor: pointer;
  white-space: nowrap;
  min-width: 90px;
  text-align: left;
}
.multiselect-btn:hover { border-color: var(--accent); }

/* ─── Buttons (.btn) ─────────────────────────────────────────────
   Used everywhere for primary actions (Refresh, Export, Resolve, Sync,
   Start, etc.) across every tab — this class was referenced throughout
   scan-ui.js / variance-data-ui.js / audit-variance-ui.js / app.js but
   was never actually defined here, so every one of those buttons was
   silently falling back to the bare browser-default button look
   (inconsistent height/padding/font vs. everything else in the same
   toolbar row — e.g. Category/Zone dropdowns or Search inputs). Sized to
   match .multiselect-btn (7px/12px padding, var(--radius) corners) with
   a transparent 1.5px border so a button's total box height lines up
   exactly with a bordered input/dropdown sitting right next to it,
   despite the button itself having no visible border. */
.btn {
  padding: 7px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: background .15s, opacity .15s;
}
.btn:hover:not(:disabled) { background: var(--accent-dk); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ─── Generic <select> ───────────────────────────────────────────
   Same reasoning as .btn above — "Search by [field]" and "Show N
   records" dropdowns (and any other plain, class-less <select>) had no
   styling of their own, so they rendered at the browser's tiny default
   size next to full-height text inputs and .multiselect-btn dropdowns in
   the same row. Matches the same box model (7px/12px padding, 1.5px
   border, var(--radius) corners) so everything in a toolbar lines up.
   Elements with their own inline style="..." (e.g. the per-row Status
   dropdowns) are unaffected — inline styles always win over this. */
select {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  outline: none;
}
select:focus { border-color: var(--accent); }

.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 8px;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
}
.multiselect-panel.hidden { display: none; }
.multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.multiselect-option:hover { background: var(--bg); }
.multiselect-option input[type="checkbox"] { cursor: pointer; }
.multiselect-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — single breakpoint at 768px covers all mobile/tablet
   Every desktop feature is preserved — nothing is hidden except
   the desktop sidebar (replaced by a top-bar + slide-down nav).
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger — hidden on desktop, shown on mobile via media query */
#mobile-menu-btn { display: none; }
#mobile-back-btn { display: none; }

@media (max-width: 768px) {

  /* ── Body ───────────────────────────────────────────────── */
  body { overflow: hidden; }

  /* ── App shell — stack vertically ──────────────────────── */
  #app { flex-direction: column; height: 100vh; overflow: hidden; }

  /* ── Sidebar → slim top bar ─────────────────────────────── */
  .sidebar {
    width: 100%;
    height: 54px;
    min-height: 54px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #2a2a2a;
    overflow: visible;
  }

  .sidebar-brand {
    padding: 0 14px;
    border-bottom: none;
    margin-bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* Urgent alerts banner (my-tasks-ui.js) is a fixed top:0 overlay — on
     mobile that sits exactly on top of the 54px top bar and hides the
     hamburger menu button underneath it. Push it below the top bar instead
     of covering it. */
  #mt-urgent-banner {
    top: 54px !important;
    z-index: 150 !important;
  }

  /* ── Hamburger button ───────────────────────────────────── */
  #mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 22px;
    width: 54px;
    height: 54px;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── Back → Home button (hidden on Dashboard) ───────────── */
  #mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--white, #fff);
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    margin-bottom: 12px;
    cursor: pointer;
  }
  body:has(.tab-item.active[data-tab="dashboard"]) #mobile-back-btn { display: none; }

  /* ── Slide-down nav menu ────────────────────────────────── */
  .tab-list {
    display: none;
    position: fixed;
    top: 54px; left: 0; right: 0;
    background: var(--sidebar-bg);
    flex-direction: column;
    padding: 8px 10px 16px;
    z-index: 201;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    border-bottom: 1px solid #333;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
  }
  .tab-list.mobile-open { display: flex; }

  /* ── Sidebar footer — move into nav menu ───────────────── */
  .sidebar-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 202;
    background: var(--sidebar-bg);
    border-top: 1px solid #2a2a2a;
    padding: 10px 14px;
    display: none;
  }
  .sidebar-footer.mobile-open { display: block; }

  /* ── Main content area ──────────────────────────────────── */
  .content {
    margin-top: 54px;
    padding: 18px 14px 80px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 54px);
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
  }

  /* ── Panel headers ──────────────────────────────────────── */
  .panel-header { margin-bottom: 20px; padding-bottom: 16px; }
  .panel-header h1 { font-size: 20px; }

  /* ── Search area ────────────────────────────────────────── */
  .search-area { flex-wrap: wrap; max-width: 100%; margin-bottom: 16px; }
  .search-area input { min-width: 0; flex: 1; }

  /* ── Date filter row ────────────────────────────────────── */
  .date-filter-row { flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

  /* ── Summary grid: stack on mobile ─────────────────────── */
  .summary-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .summary-col-left  { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .summary-col-left .summary-card { flex: 1 1 calc(50% - 5px); min-width: 120px; }
  .summary-col-mid   { min-height: 220px; }
  .summary-col-right { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .summary-col-right .summary-card { flex: 1 1 calc(50% - 5px); min-width: 120px; }

  /* ── Sub-tabs ───────────────────────────────────────────── */
  .sublookup-tabs { flex-wrap: wrap; gap: 4px; }
  .sublookup-tab  { font-size: 13px; padding: 7px 12px; }

  /* ── Pack & Ship BETA — Create Package field sections ────
     auto-fit,minmax(240px,1fr) still fits 2 narrow columns on a ~680px+
     mobile viewport, and the right column's values get silently clipped
     by .content's overflow-x:hidden (no scrollbar hint, just cut-off
     text) — force a single column below the standard mobile breakpoint. */
  .psv2-section-grid { grid-template-columns: 1fr !important; }
  #psv2-form-card { padding: 18px 16px !important; }

  /* ── Tables — horizontal scroll ────────────────────────── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Wide tables (many columns) on a narrow phone screen only ever show
       the first 1-2 columns with nothing hinting there's more to the
       right — reported as "table looks bad/broken on mobile". Classic
       no-JS scrolling-shadow trick: a white "cover" anchored to the
       content's right edge (attachment: local, so it scrolls WITH the
       table) sits on top of a dark "shadow" pinned to the viewport's
       right edge (attachment: scroll). Until you've scrolled all the way
       right the cover is off past the visible area, so the shadow shows
       through and hints "swipe left for more" — once fully scrolled the
       cover lines up over it and it disappears. Purely decorative, zero
       effect on the table's actual behavior. */
    background:
      linear-gradient(to left, var(--white) 40%, rgba(255,255,255,0)) 100% 0 / 24px 100% no-repeat local,
      linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0 / 10px 100% no-repeat scroll;
    background-color: var(--white);
  }

  /* ── Table controls ─────────────────────────────────────── */
  .table-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .table-right-controls { flex-wrap: wrap; gap: 8px; }

  /* ── Pagination ─────────────────────────────────────────── */
  .pagination { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ── Multiselect dropdowns — full width ─────────────────── */
  .multiselect-panel { position: fixed; left: 8px; right: 8px; width: auto; }

  /* ── Scan modal — bottom sheet ──────────────────────────── */
  #scan-modal .modal-box,
  #scan-type-modal .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  #scan-modal .modal-box { height: 92vh !important; }

  /* ── Scan fields — stack vertically (default, all scan types) ────── */
  #scan-fields-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #scan-fields-row input,
  #scan-fields-row select { width: 100% !important; box-sizing: border-box; }
  #camera-toggle-btn { width: auto !important; align-self: flex-start; }

  /* ── Gate Out Scan / Confirm for Gate Out ONLY — compact camera-first
       layout. Every other scan type (Return, Movement, Shipped, Audit,
       Wooden Packing, etc.) keeps the default stacked layout above
       untouched. Input + camera button side by side; Add button drops to
       its own line, and hides entirely once the camera is open (camera
       drives the flow there) — freeing vertical space for the scan
       results list (success/error messages). */
  #scan-modal.scan-type-gate_out #scan-fields-row,
  #scan-modal.scan-type-gate_confirm #scan-fields-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  #scan-modal.scan-type-gate_out #scan-fields-row #scan-input,
  #scan-modal.scan-type-gate_confirm #scan-fields-row #scan-input {
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
  }
  #scan-modal.scan-type-gate_out #camera-toggle-btn,
  #scan-modal.scan-type-gate_confirm #camera-toggle-btn {
    width: auto !important; flex: 0 0 auto !important; align-self: center !important; order: 2;
  }
  #scan-modal.scan-type-gate_out #manual-add-btn,
  #scan-modal.scan-type-gate_confirm #manual-add-btn {
    flex: 1 1 100% !important; order: 3; margin-top: 8px;
  }
  #scan-modal.scan-type-gate_out.camera-open #manual-add-btn,
  #scan-modal.scan-type-gate_confirm.camera-open #manual-add-btn { display: none !important; }
  #scan-modal.scan-type-gate_out.camera-open #camera-status-text,
  #scan-modal.scan-type-gate_confirm.camera-open #camera-status-text { margin-top: 2px !important; font-size: 11px !important; }
  #scan-modal.scan-type-gate_out.camera-open #scan-modal-hint-bar,
  #scan-modal.scan-type-gate_confirm.camera-open #scan-modal-hint-bar { display: none !important; }

  /* Camera-fixed-on-top fix — scoped to Gate Out / Confirm for Gate Out
     only. #scan-log is a flex:1 item; by default flex items won't shrink
     below their content size (min-height:auto), so as results stacked up
     the whole modal grew and pushed the camera down. min-height:0 lets it
     properly scroll within its own allocated space instead, and
     overflow:hidden on the modal box is a safety net so nothing can ever
     expand it past its own layout. */
  #scan-modal.scan-type-gate_out #scan-log,
  #scan-modal.scan-type-gate_confirm #scan-log { min-height: 0 !important; }
  #scan-modal.scan-type-gate_out .modal-box,
  #scan-modal.scan-type-gate_confirm .modal-box { overflow: hidden !important; }

  /* ── Zone / Pick Location / Drop Location — kept as a compact
       multi-column row (not stacked) so there's more room left for
       the scan log below. Field sizing itself is handled by the
       .pick-drop-input class (see above). The dropdown is made
       full-width separately (via JS, position:fixed) regardless of
       how narrow its own column is — see field-select.js. ───────── */

  /* ── Searchable dropdown (Zone/Location/Drop Location) — full
       width of the screen, bigger text, dark readable color instead
       of light grey, taller rows for easier tapping. field-select.js
       switches this to position:fixed with a computed `top` on
       mobile, so width here just needs to not fight that. ───────── */
  .field-combo-dropdown {
    max-height: 45vh;
  }
  .field-combo-option {
    font-size: 16px;
    padding: 13px 14px;
    color: #1a1a1a;
    white-space: normal;   /* let long zone names wrap instead of truncating */
  }
  .field-combo-add {
    font-size: 16px;
    padding: 13px 14px;
  }
}
/* ─── Pick/Drop Field Grid (Zone / Location / Drop Location) ──────────── */
/* Used for both #scan-top-fields (2-col: Return's Zone+Location) and the
   dynamically-inserted #movement-pick-drop-container (3-col: Movement's
   Pick Zone + Pick Location + Drop Location). Both live inside the same
   already-padded modal section, so this grid itself carries NO horizontal
   padding of its own — that was the bug causing Movement's fields to be
   narrower than Return's (it had an extra 24px of padding stacked on top
   of the parent's padding). */
.pick-drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.pick-drop-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.pick-drop-grid--movement { padding-top: 12px; margin-bottom: 10px; }

.pick-drop-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.pick-drop-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}

@media (max-width: 768px) {
  /* Three columns on a ~360-400px phone leaves very little room per
     field — shrink gap/padding a bit and rely on short placeholders
     ("Select...") rather than long ones, since the label above each
     field already says what it is. */
  .pick-drop-grid { gap: 8px; }
  .pick-drop-label { font-size: 10px; }
  .pick-drop-input { font-size: 13px; padding: 10px 8px; }
}

/* Any wrapper around a field-select input needs position:relative so the
   dropdown below anchors to that field instead of the page. */
.field-combo-wrap { position: relative; }

.field-combo-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 1001;
}

.field-combo-option {
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field-combo-option:hover { background: #f5f4f0; }

.field-combo-add {
  color: var(--accent);
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.field-combo-add:hover { background: #f9f4e8; }

.field-combo-empty {
  padding: 9px 12px;
  font-size: 13px;
  color: #999;
}
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS — Dashboard cards, filters, modals
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Dashboard stats cards ────────────────────────────────── */
  .dashboard-cards-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .dashboard-card, .stat-card, .summary-card {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 140px !important;
    box-sizing: border-box;
  }

  /* ── Pick list / QC / Orders filter rows ─────────────────── */
  [style*="display:flex"][style*="align-items:center"][style*="flex-wrap:wrap"] {
    flex-wrap: wrap !important;
  }

  /* ── Scan & Add Data filter bar ──────────────────────────── */
  .table-search { flex-wrap: wrap !important; }
  .table-search input[type="text"],
  .table-search select,
  .table-search input[type="date"] {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 8px) !important;
  }
  .table-search input[type="text"][placeholder*="Search"] {
    flex: 1 1 100% !important;
  }

  /* ── Summary cards in My Tasks / Pick List ───────────────── */
  [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Modal — full width on mobile ───────────────────────── */
  .modal-box {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .modal-body { padding: 14px !important; }

  /* ── Pick popup info grid ───────────────────────────────── */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Scan & Add Data table controls top row ─────────────── */
  .table-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .table-right-controls {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Sortable th — hide arrow icon text on very small ────── */
  @media (max-width: 400px) {
    [id^="osor-"], [id^="psor-"], [id^="qsor-"] { display: none; }
  }

  /* ── Sub-tab button groups ───────────────────────────────── */
  [style*="display:flex;gap:0;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden"] {
    flex-wrap: wrap !important;
    border-radius: var(--radius) !important;
  }

  /* ── Panel header with action button ─────────────────────── */
  .panel-header, [style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* ── Dashboard responsive grid ──────────────────────────────────── */
@media (max-width: 768px) {
  .dash-cards-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dash-charts-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dash-bottom-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .summary-card .summary-value { font-size: 24px !important; }
  .summary-card .summary-label { font-size: 10px !important; }
}

@media (max-width: 400px) {
  .dash-cards-row {
    grid-template-columns: 1fr !important;
  }
}
/* ════════════════════════════════════════════════════════════════
   SKU LOOKUP — Duplicate box highlighting + Edit/Delete feature
   ════════════════════════════════════════════════════════════════ */

/* ── Duplicate box badge (×N next to box number) ── */
.badge-dup-box {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: #e67e22;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: default;
}

/* ── "Edited by" badge shown on edited rows ── */
.badge-edited {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 3px;
  cursor: help;
  white-space: nowrap;
}

/* ── Actions column header ── */
.th-actions {
  width: 130px;
  min-width: 100px;
  text-align: center;
}

/* ── Actions cell ── */
.td-actions {
  text-align: center;
  white-space: nowrap;
  padding: 4px 6px !important;
}

/* ── Edit / Delete row buttons ── */
.btn-row-edit,
.btn-row-delete {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  margin: 0 2px;
  transition: background .15s, border-color .15s;
  line-height: 1.4;
}
.btn-row-edit        { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.btn-row-edit:hover  { background: #c7d2fe; }
.btn-row-delete        { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.btn-row-delete:hover  { background: #fca5a5; }

/* ════════════════════════════════════════════════════════════════
   EDIT MODAL
   ════════════════════════════════════════════════════════════════ */
.sku-edit-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
}
.sku-edit-modal-overlay.active {
  display: flex;
}
.sku-edit-modal-box {
  background: var(--white);
  border-radius: 10px;
  width: 500px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.sku-edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.sku-edit-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0;
}
.sku-edit-modal-close:hover { color: var(--text); }
.sku-edit-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.sku-edit-field {
  margin-bottom: 11px;
}
.sku-edit-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.sku-edit-field-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  box-sizing: border-box;
  background: var(--white);
  transition: border-color .2s;
}
.sku-edit-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,86,219,.08);
}
.sku-edit-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sku-edit-note-row {
  margin-bottom: 10px;
}
.sku-edit-note-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  box-sizing: border-box;
  background: var(--white);
}
.sku-edit-note-input:focus {
  outline: none;
  border-color: var(--accent);
}
.sku-edit-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-modal-cancel {
  padding: 7px 16px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  transition: background .15s;
}
.btn-modal-cancel:hover { background: #f5f4f1; }
.btn-modal-save {
  padding: 7px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: background .15s;
}
.btn-modal-save:hover     { background: #1648c8; }
.btn-modal-save:disabled  { opacity: 0.6; cursor: default; }

/* ════════════════════════════════════════════════════════════════
   PICK LIST — Mobile optimisation
   Columns: Sr(1) SKU(2) Product(3) Zone(4) Order#(5) Date(6) Ageing(7)
            QTY(8) Avail QTY(9) Assigned To(10) Box(11) Input(12) Action(last)
   Mobile (≤768px): hide Product, Date, QTY, Avail QTY, Assigned To
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #pick-list-table thead tr th:nth-child(3),
  #pick-list-table tbody tr td:nth-child(3),
  #pick-list-table thead tr th:nth-child(6),
  #pick-list-table tbody tr td:nth-child(6),
  #pick-list-table thead tr th:nth-child(8),
  #pick-list-table tbody tr td:nth-child(8),
  #pick-list-table thead tr th:nth-child(9),
  #pick-list-table tbody tr td:nth-child(9),
  #pick-list-table thead tr th:nth-child(10),
  #pick-list-table tbody tr td:nth-child(10) {
    display: none;
  }

  /* SKU col — tighter */
  #pick-list-table thead tr th:nth-child(2),
  #pick-list-table tbody tr td:nth-child(2) {
    font-size: 12px;
  }

  /* Action col buttons — stack vertically, full width feel */
  #pick-list-table tbody tr td:last-child > div {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  #pick-list-table tbody tr td:last-child button {
    width: 100%;
    padding: 6px 8px;
    font-size: 11px;
  }

  /* Table rows — comfortable tap targets */
  #pick-list-table tbody tr td {
    padding: 10px 8px;
  }
}

/* ════════════════════════════════════════════════════════════════
   QC TABLE — Mobile optimisation (≤768px)
   Show only: Order #(3), Box Number(4), Action(9)
   Hide: SKU(1), Product(2), QTY(5), Picked By(6), Zone(7), Status(8)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #qc-table thead tr th:nth-child(1),
  #qc-table tbody tr td:nth-child(1),
  #qc-table thead tr th:nth-child(2),
  #qc-table tbody tr td:nth-child(2),
  #qc-table thead tr th:nth-child(5),
  #qc-table tbody tr td:nth-child(5),
  #qc-table thead tr th:nth-child(6),
  #qc-table tbody tr td:nth-child(6),
  #qc-table thead tr th:nth-child(8),
  #qc-table tbody tr td:nth-child(8) {
    display: none;
  }

  #qc-table tbody tr td {
    padding: 10px 8px;
    font-size: 12px;
  }

  /* Action col buttons stack vertically */
  #qc-table tbody tr td:nth-child(9) > div,
  #qc-table tbody tr td:nth-child(9) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  #qc-table tbody tr td:nth-child(9) button {
    width: 100%;
    font-size: 11px;
  }
}

/* ════════════════════════════════════════════════════════════════
   NEW BOX ADDED — scan-time toast
   ════════════════════════════════════════════════════════════════ */
#new-box-toast-host {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.new-box-toast {
  background: #1a7a3f;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  animation: newBoxToastIn .25s ease-out;
}
.new-box-toast span {
  font-weight: 600;
}
.new-box-toast-out {
  animation: newBoxToastOut .35s ease-in forwards;
}
@keyframes newBoxToastIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes newBoxToastOut {
  from { transform: translateX(0);   opacity: 1; }
  to   { transform: translateX(40px); opacity: 0; }
}

/* Product Requests sub-tabs (Raise Request / To Pick / In Transit / To Put
   Back) — on mobile these were set to horizontal-scroll with nowrap text,
   which clipped "In Transit" at the screen edge. Switch to a 2x2 wrapping
   grid with tighter padding/font so all four fit on one screen, no scroll. */
@media (max-width: 640px) {
  #pr-subtabs {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4px !important;
    padding: 0 10px !important;
  }
  #pr-subtabs .pr-subtab-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 7px 6px !important;
    font-size: 12px !important;
    text-align: center;
    border-bottom-width: 2px !important;
  }
}
/* ── Stock QC tab (stock-qc-ui.js) ───────────────────────────── */
.sqc-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.sqc-seg { display:flex; border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sqc-seg button { padding:7px 16px; font-size:13px; font-weight:600; border:none; cursor:pointer; background:var(--white); color:var(--text); white-space:nowrap; }
.sqc-seg button + button { border-left:1px solid var(--border); }
.sqc-seg button.active { background:var(--accent); color:#fff; }
.sqc-cnt { font-size:11px; opacity:.75; }
.sqc-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sqc-filters input, .sqc-filters select { padding:6px 10px; border:1.5px solid var(--border); border-radius:6px; font-size:13px; background:var(--white); color:var(--text); }
.sqc-filters input { width:190px; }
.sqc-progress { height:6px; width:110px; background:#eceae4; border-radius:3px; overflow:hidden; margin-top:4px; }
.sqc-progress > div { height:100%; background:#2d7a4f; border-radius:3px; transition:width .3s; }
.sqc-badge { display:inline-block; padding:2px 10px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; }
.sqc-product { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sqc-qc-btn { padding:5px 18px; border:1.5px solid var(--accent); background:transparent; color:var(--accent); border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
.sqc-qc-btn:hover { background:var(--accent); color:#fff; }
.sqc-info { display:flex; gap:12px; background:#f5f3ee; border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.sqc-info img { width:72px; height:72px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.sqc-info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sqc-info-grid label { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.sqc-info-grid div > div { font-size:12px; font-weight:600; word-break:break-word; }
.sqc-scan-card { border:1.5px solid var(--border); border-radius:10px; padding:12px 14px; }
.sqc-alert { border-radius:8px; padding:10px; font-size:13px; }
.sqc-alert--ok  { background:#f0fdf4; border:1.5px solid #b7ddc0; }
.sqc-alert--err { background:#fff1f0; border:1.5px solid #fca5a5; color:#c0392b; }
.sqc-box { border:1.5px solid var(--border); border-left-width:4px; border-radius:8px; padding:9px 12px; margin-bottom:8px; background:var(--white); }
.sqc-box.pending { border-left-color:#f0c040; }
.sqc-box.pass    { border-left-color:#2d7a4f; }
.sqc-box.fail    { border-left-color:#c0392b; }
.sqc-box-main { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.sqc-box-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.sqc-thumbs { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.sqc-thumbs img { width:52px; height:52px; object-fit:cover; border-radius:6px; border:1.5px solid var(--border); cursor:zoom-in; }
.sqc-reason-row { display:flex; gap:8px; margin-bottom:12px; }

@media (max-width: 640px) {
  .sqc-seg { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .sqc-seg button { padding:8px 6px; font-size:12px; }
  .sqc-seg button + button { border-left:none; }
  .sqc-seg button:nth-child(even) { border-left:1px solid var(--border); }
  .sqc-seg button:nth-child(n+3) { border-top:1px solid var(--border); }
  .sqc-filters { width:100%; }
  .sqc-filters input { flex:1; width:auto; min-width:0; }
  .sqc-filters select { flex:1; min-width:0; }
  /* Table → stacked cards */
  #panel-stock-qc .table-wrap { overflow:visible; }
  #sqc-table { min-width:0 !important; width:100%; }
  #sqc-table thead { display:none; }
  #sqc-table, #sqc-table tbody, #sqc-table tr, #sqc-table td { display:block; }
  #sqc-table tr { border:1.5px solid var(--border); border-radius:10px; margin-bottom:10px; padding:8px 12px; background:var(--white); }
  #sqc-table td { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 0; border:none; text-align:right !important; }
  #sqc-table td::before { content:attr(data-label); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; flex-shrink:0; }
  #sqc-table td[data-label="#"] { display:none; }
  #sqc-table td[colspan] { display:block; text-align:center !important; }
  #sqc-table td[colspan]::before { content:none; }
  .sqc-product { max-width:none; white-space:normal; }
  .sqc-qc-btn { padding:7px 28px; font-size:13px; }
  .sqc-info-grid { grid-template-columns:1fr 1fr; }
  .sqc-reason-row { flex-direction:column; }
}
/* Create Package — Ordered/Packed/Remaining table → stacked cards, same
   pattern as #sqc-table above, so the row + "📷 Add Box" button both fit
   on screen without horizontal scroll. */
@media (max-width: 640px) {
  #ps-cp-order-summary-wrap.table-wrap { overflow:visible; }
  #ps-cp-summary-table { min-width:0 !important; width:100%; }
  #ps-cp-summary-table thead { display:none; }
  #ps-cp-summary-table, #ps-cp-summary-table tbody, #ps-cp-summary-table tr, #ps-cp-summary-table td { display:block; }
  #ps-cp-summary-table tr { border:1.5px solid var(--border); border-radius:10px; margin-bottom:10px; padding:8px 12px; background:var(--white); }
  #ps-cp-summary-table td { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 0; border:none; text-align:right !important; }
  #ps-cp-summary-table td::before { content:attr(data-label); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; flex-shrink:0; }
  #ps-cp-summary-table td[data-label=""] { justify-content:center; padding-top:10px; }
  #ps-cp-summary-table td[data-label=""]::before { content:none; }
  #ps-cp-summary-table td[data-label="Item"] { display:block; text-align:left !important; padding-bottom:8px; margin-bottom:5px; border-bottom:1px solid var(--border) !important; }
  #ps-cp-summary-table td[data-label="Item"]::before { content:none; }
}
/* Inventory > Packages list — same table→stacked-cards pattern. */
@media (max-width: 640px) {
  #pkg-list-body .table-wrap { overflow:visible; }
  #pkg-list-table { min-width:0 !important; width:100%; }
  #pkg-list-table thead { display:none; }
  #pkg-list-table, #pkg-list-table tbody, #pkg-list-table tr, #pkg-list-table td { display:block; }
  #pkg-list-table tr { border:1.5px solid var(--border); border-radius:10px; margin-bottom:10px; padding:8px 12px; background:var(--white); }
  #pkg-list-table td { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 0; border:none; text-align:right !important; }
  #pkg-list-table td::before { content:attr(data-label); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; flex-shrink:0; }
}
.sqc-pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:14px; font-size:13px; flex-wrap:wrap; }
.sqc-boxes-cell { cursor:pointer; display:inline-block; }
.sqc-boxes-cell:hover .sqc-boxes-link { text-decoration:underline; }
.sqc-boxes-link { font-size:11px; font-weight:600; color:#1a56db; margin-left:4px; }
.sqc-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.sqc-mini-stats > div { background:#f5f3ee; border-radius:8px; padding:8px; text-align:center; }
.sqc-mini-stats strong { display:block; font-size:18px; }
.sqc-mini-stats span { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.sqc-mini-head { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:10px 0 6px; }
.sqc-mini-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); }
.sqc-mini-row:last-child { border-bottom:none; }
@media (max-width: 640px) {
  .sqc-filters select#sqc-per-page { flex:0 0 auto; }
  .sqc-boxes-cell { text-align:right; }
}
.sqc-updated { font-size:11px; color:var(--muted); text-align:right; margin:-4px 0 8px; }
@media (max-width: 640px) { .sqc-updated { text-align:left; } }

/* ─── ORDER DETAIL — darker table headings + 🧭 Box Journey card ─── */
#od-detail-body th { color: var(--text) !important; font-weight: 700 !important; }
.od-jr-box { border:1.5px solid var(--border); border-radius:10px; margin-bottom:10px; overflow:hidden; background:var(--white); }
.od-jr-box:last-child { margin-bottom:0; }
.od-jr-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; background:#faf8f3; cursor:pointer; user-select:none; }
.od-jr-head:hover { background:#f5f1e8; }
.od-jr-caret { font-size:22px; font-weight:700; line-height:1; color:var(--accent-dk); width:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.od-jr-sku { font-family:monospace; font-weight:700; font-size:13px; color:var(--text); }
.od-jr-boxno { font-family:monospace; font-size:12px; color:var(--muted); }
.od-jr-stage { font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; background:#f3ead6; color:var(--accent-dk); }
.od-jr-progress { margin-left:auto; width:90px; height:6px; border-radius:6px; background:var(--border); overflow:hidden; }
.od-jr-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#2d7a4f); border-radius:6px; }
.od-jr-count { font-size:11px; font-weight:700; color:var(--muted); min-width:30px; text-align:right; }
.od-jr-track { display:flex; overflow-x:auto; padding:16px 10px 14px; border-top:1px solid var(--border); }
.od-jr-step { position:relative; flex:1 0 118px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px; }
.od-jr-step::before { content:''; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--border); z-index:0; }
.od-jr-step:first-child::before { display:none; }
.od-jr-step.done::before, .od-jr-step.fail::before { background:#2d7a4f; }
.od-jr-dot { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--white); border:2px solid var(--border); color:var(--muted); }
.od-jr-step.done .od-jr-dot { background:#2d7a4f; border-color:#2d7a4f; color:#fff; }
.od-jr-step.fail .od-jr-dot { background:#c0392b; border-color:#c0392b; color:#fff; }
.od-jr-step.current .od-jr-dot { box-shadow:0 0 0 4px rgba(200,169,110,.35); }
.od-jr-info { margin-top:8px; }
.od-jr-label { font-size:12px; font-weight:700; color:var(--text); line-height:1.25; }
.od-jr-step.todo .od-jr-label { color:var(--muted); font-weight:600; }
.od-jr-step.fail .od-jr-label { color:#c0392b; }
.od-jr-extra { font-family:monospace; font-size:10.5px; color:#1a56db; margin-top:2px; }
.od-jr-by { font-size:11.5px; font-weight:600; color:var(--accent-dk); margin-top:4px; }
.od-jr-at { font-size:11px; color:var(--muted); margin-top:2px; white-space:nowrap; }
.od-jr-gap { display:inline-block; font-size:10px; font-weight:700; padding:0 5px; border-radius:8px; background:#eef7f1; color:#2d7a4f; }
@media (max-width: 768px) {
  .od-jr-track { flex-direction:column; overflow-x:visible; padding:12px 14px; }
  .od-jr-step { flex:none; flex-direction:row; align-items:flex-start; text-align:left; gap:12px; padding:0 0 14px; }
  .od-jr-step:last-child { padding-bottom:0; }
  .od-jr-step::before { display:none; }
  .od-jr-step:not(:last-child)::after { content:''; position:absolute; top:28px; left:13px; width:2px; height:calc(100% - 28px); background:var(--border); }
  .od-jr-step:has(+ .od-jr-step.done)::after, .od-jr-step:has(+ .od-jr-step.fail)::after { background:#2d7a4f; }
  .od-jr-info { margin-top:4px; }
  .od-jr-progress { width:60px; }
}

/* ─── ORDERS LIST — Overall cell: simple stage label + Stock-QC-style
   progress bar/popup for multi-box orders (.sqc-boxes-cell/.sqc-progress/
   .sqc-boxes-link, reused from the Stock QC tab) ─── */