/* WMS2 dark theme — sidebar tuned to match reference. */
:root {
  --bg: #0b0f1a;
  --bg-2: #111827;
  --bg-3: #1e293b;
  --bg-4: #273449;
  --fg: #e5e7eb;
  --fg-muted: #7b8295;
  --fg-dim: #5b6478;
  --accent: #16baaa;
  --accent-hover: #1fd2c0;
  --danger: #ef4444;
  --warn: #f59e0b;
  --success: #22c55e;
  --border: #1f2433;
  --sidebar-bg: #0d1220;
  --sidebar-fg: #6b7384;
  --sidebar-hover: #161c2e;
  --sidebar-active-bg: #1a2236;
  --sidebar-active-fg: #cfd3de;
  --card-bg: #141a2b;
  --table-stripe: #0f1524;
  --tint-a: #182238;
  --tint-b: #1f2b45;
  --flow-pos: #a7f3d0;
  --flow-neg: #fecaca;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.theme-dark {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

#app {
  display: grid;
  grid-template-columns: max-content 1fr;
  min-height: 100vh;
}

/* --- sidebar --- */
#sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  border-right: 1px solid var(--border);
  padding: 14px 10px 10px 6px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  max-height: 100vh;
  position: sticky; top: 0;
  font-size: 13px;
  min-width: 160px;
  max-width: 340px;
  width: max-content;
  /* hide scrollbar while keeping scrollability */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge legacy / IE */
}
#sidebar::-webkit-scrollbar { display: none; }  /* Chrome, Safari, Edge Chromium */

/* kill the browser's visited-link color change */
#sidebar a,
#sidebar a:visited,
#sidebar a:hover,
#sidebar a:active,
#sidebar a:focus {
  color: inherit;
  text-decoration: none;
}

/* brand */
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.sidebar-logo { width: 24px; height: 24px; border-radius: 4px; }
.sidebar-title { font-weight: 600; font-size: 12px; letter-spacing: .3px; color: #d6d9e2; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0; flex: 1; }

/* every row — one rule so alignment is identical at every depth */
.nav-item,
summary.tree-toggle,
.tree-leaf {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 8px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  color: var(--sidebar-fg) !important;
  background: transparent;
  border: 0;
  border-radius: 3px;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  list-style: none;
}
summary.tree-toggle::-webkit-details-marker { display: none; }
summary.tree-toggle::marker { content: ""; }

.nav-item:hover,
summary.tree-toggle:hover,
.tree-leaf:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-active-fg) !important;
}
.tree-leaf.active,
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: #e5e7eb !important;
  font-weight: 500;
}

/* chevron shows closed > or open ˅ depending on <details> state */
details.nav-group > summary .chev::before { content: "›"; }
details.nav-group[open] > summary .chev::before { content: "˅"; }

/* chevron / dot at the start of the row, fixed width so labels align */
.chev {
  display: inline-block;
  width: 10px;
  min-width: 10px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}
.chev-leaf::before {
  content: "·";
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 0;
}

.nav-label, .tree-label {
  flex: 1;
  white-space: nowrap;
}

.tree-leaf > span:last-child {
  flex: 1;
  white-space: nowrap;
}

/* tight nested indentation */
.tree-children {
  margin-left: 10px;
  padding: 0;
  border-left: 0;
  display: flex;
  flex-direction: column;
}

.nav-group { display: flex; flex-direction: column; }

.sidebar-logout { margin-top: 10px; padding: 0 4px; }
.btn-ghost {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border);
  background: transparent; color: var(--fg-muted); border-radius: 3px;
  cursor: pointer; font-size: 11px;
}
.btn-ghost:hover { color: var(--fg); border-color: var(--accent); }

/* --- main content --- */
#content { padding: 20px 28px 40px 28px; min-width: 0; }
.page-header { margin-bottom: 18px; }
.page-header h1 { margin: 0 0 4px 0; font-size: 22px; font-weight: 600; }
.muted { color: var(--fg-muted); }
.back-link { color: var(--fg-muted); text-decoration: none; font-size: 13px; }
.back-link:hover { color: var(--accent); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
}

/* product block (on group-detail and city-detail pages) */
.product-block .product-title {
  margin: 0 0 12px 0; font-size: 16px; color: var(--accent); font-weight: 600;
}
.product-block .city-sub { margin-bottom: 18px; }
.product-block .city-sub:last-child { margin-bottom: 0; }
.product-block .city-sub-title {
  margin: 0 0 6px 0; font-size: 13px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .5px;
}

/* --- tables --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th, .data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table thead th {
  background: var(--bg-4);
  color: var(--fg);
  font-weight: 600;
  text-align: left;
}
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.data-table tbody tr:nth-child(even) { background: var(--table-stripe); }
.data-table .total-row th { background: #064e3b; color: #a7f3d0; font-weight: 700; }

/* --- dark-theme spreadsheet tables (product blocks) --- */

.product-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.product-block .product-title {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  padding: 10px 14px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.triplet-table {
  width: auto;              /* fit columns to content */
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.3;
  color: var(--fg);
  background: var(--card-bg);
}
.triplet-table th,
.triplet-table td {
  border: 1px solid var(--border);
  padding: 4px 12px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.3;
  height: auto;
}

/* header row — dim dark bar */
.triplet-table thead th {
  background: #1f2a44;
  color: #cbd5e1;
  font-weight: 600;
  border: 1px solid #2a3654;
  padding: 6px 12px;
  letter-spacing: .2px;
  font-size: 11px;
  text-transform: uppercase;
}
/* SKU column header styling is defined below, grouped with the SKU cells */

/* alternating row stripes (dark) */
.triplet-table tbody tr:nth-child(odd)  td { background: #141a2b; }
.triplet-table tbody tr:nth-child(even) td { background: #182036; }

/* flavor column on the left */
.triplet-table th.col-flavor,
.triplet-table td.col-flavor {
  text-align: left;
  font-weight: 500;
  padding-left: 14px;
  padding-right: 18px;
  color: #e5e7eb;
}

/* SKU cells — horizontal edges tinted via actual borders (they collapse with
   adjacent SKU cells' tinted edges into single 1px tinted lines); left/right
   edges drawn as pseudo-element stripes to avoid the collapse tie-breaker
   losing to the neighboring non-SKU cell. */
.triplet-table td.cell-sku,
.triplet-table th.hdr-sku {
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  text-align: center;
  position: relative;
  border-top:    1px solid var(--c-tint, #93c5fd) !important;
  border-bottom: 1px solid var(--c-tint, #93c5fd) !important;
}
.triplet-table td.cell-sku::before,
.triplet-table td.cell-sku::after,
.triplet-table th.hdr-sku::before,
.triplet-table th.hdr-sku::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--c-tint, #93c5fd);
  pointer-events: none;
}
.triplet-table td.cell-sku::before,
.triplet-table th.hdr-sku::before { left: 0; }
.triplet-table td.cell-sku::after,
.triplet-table th.hdr-sku::after  { right: 0; }
.triplet-table th.hdr-sku {
  color: #0b1120;
  background: var(--c-tint, #93c5fd) !important;
  font-weight: 700;
  font-family: inherit;
  font-size: 11px;
}

.triplet-table .pos { color: #a7f3d0; }
.triplet-table .neg { color: #fecaca; }

/* spanned no-flavor cells vertically centered */
.triplet-table td.cell-span { vertical-align: middle; text-align: center; }
.triplet-table td.cell-span .cell-span-line { display: block; padding: 2px 0; }
.triplet-table td.cell-span .cell-span-line + .cell-span-line { border-top: 1px dashed rgba(255,255,255,0.08); }

/* TOTAL row — solid green, same row height as body rows */
.triplet-table tfoot .total-row th,
.triplet-table tfoot .total-row td {
  background: #064e3b !important;
  color: #a7f3d0;
  font-weight: 700;
  border: 1px solid #065f46;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.3;
  height: auto;
}
.triplet-table tfoot .total-row { line-height: 1.3; }

.table-scroll { overflow-x: auto; background: var(--card-bg); }

/* product tint colors — used for SKU header + SKU cell background.
   hemp=pink, CA=cornflower blue, MI=orange, NM=blue, OH=purple, NY=yellow. */
.product-block.c-hemp { --c-tint: #f472b6; }  /* pink */
.product-block.c-ca   { --c-tint: #93c5fd; }  /* cornflower blue */
.product-block.c-mi   { --c-tint: #fb923c; }  /* orange */
.product-block.c-nm   { --c-tint: #3b82f6; }  /* blue */
.product-block.c-oh   { --c-tint: #a78bfa; }  /* purple */
.product-block.c-ny   { --c-tint: #facc15; }  /* yellow */
.product-block.c-def  { --c-tint: #64748b; }  /* neutral */

/* --- reports tabs --- */
.report-tabs { display: flex; gap: 8px; margin-top: 10px; }
.report-tab {
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 20px; color: var(--fg-muted);
  text-decoration: none; font-size: 13px;
}
.report-tab:hover { color: var(--fg); border-color: var(--accent); }
.report-tab.active { background: var(--accent); color: #0b1727; font-weight: 600; border-color: var(--accent); }

/* --- login --- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-wrap  { width: 100%; display: flex; justify-content: center; padding: 24px; }
.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 28px 22px 28px;
  width: 340px;
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.login-brand img { width: 32px; height: 32px; }
.login-brand h1 { margin: 0; font-size: 20px; }
.login-card label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--fg-muted); }
.login-card input {
  display: block; width: 100%; margin-top: 4px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-size: 14px;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.btn { border: 0; border-radius: 6px; padding: 9px 14px; cursor: pointer; font-size: 14px; font-family: inherit; }
.btn-primary { background: var(--accent); color: #0b1727; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-block { width: 100%; margin-top: 6px; }
.alert {
  padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px;
}
.alert-error { background: rgba(239,68,68,0.15); color: #fecaca; border: 1px solid #7f1d1d; }

/* ================== DASHBOARD ================== */

.dash-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(auto, 540px);
  gap: 18px;
  align-items: start;
  min-width: 0;
}
.dash-leftcol    { min-width: 0; }
.dash-pane-left  { min-width: 0; overflow: hidden; }
.dash-pane-today { min-width: 0; overflow: hidden; margin-bottom: 18px; }
/* Right column is a single wrapper; Variance + Notes flow as block siblings
   so the Notes sit immediately under Variance with no big grid-row gap. */
.dash-pane-right  { min-width: 0; }
.dash-notes-stack { margin-top: 18px; }
.dash-notes-stack .dash-note-card:first-child { margin-top: 0; }

.dash-pane {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 18px;
  min-width: 0;        /* allow inner flex shrink */
}
.dash-pane-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.dash-pane-title {
  margin: 0;
  font-size: 13px; font-weight: 700;
  color: var(--accent);
  letter-spacing: .8px; text-transform: uppercase;
}
.dash-pane-meta { font-size: 11px; color: var(--fg-muted); }
.dash-pane-sub  { margin: -4px 0 12px 0; font-size: 11px; color: var(--fg-muted); }

/* brand / category / group headers */
.dash-brand {
  margin: 20px 0 6px; font-size: 13px; font-weight: 700;
  color: #f1f5f9; letter-spacing: .3px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.dash-brand:first-of-type { margin-top: 0; }
.dash-cat {
  margin: 0 0 6px 2px;
  font-size: 11px; font-weight: 600; color: #94a3b8;
  letter-spacing: 1px; text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.dash-group {
  margin: 0 0 4px 0;
  font-size: 10px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500;
}

/* Brand: a flex row of category blocks, wrapping when out of room. */
.dash-brand-row {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-start;
  margin: 0 0 16px 0;
  min-width: 0;
  max-width: 100%;
}
/* Category block: header above, then a horizontal row of group columns. */
.dash-cat-block {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.dash-cat-groups {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}
/* Group column: header above a horizontal row of product cards, wrapped in
   a bordered card so each product_group is visually enclosed. */
.dash-group-col {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  background: rgba(255, 255, 255, 0.015);
}
.dash-group-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 2px 0 0 0;
  min-width: 0;
  max-width: 100%;
}

/* product card wrapper — reuses .triplet-table spreadsheet styling inside */
.dash-product-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color .12s, box-shadow .12s;
  overflow: hidden;
  flex: 0 0 auto;      /* card sized by content */
}
.dash-variance-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c-tint, #64748b);
  border-radius: 6px;
  margin: 6px 0 12px 0;
  padding: 10px 12px;
  overflow: hidden;
}
.dash-product-link:hover {
  border-color: var(--c-tint, var(--accent));
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.dash-product-link .dash-product-title,
.dash-variance-card .dash-product-title {
  color: var(--accent);
  font-size: 13px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
  margin: 0 0 8px 0;
}
/* Product abbr / name that opens the product-block popup. */
.dash-product-pop { cursor: pointer; }
.dash-product-pop:hover { text-decoration: underline; }
/* Group heading link (Inventory by Product) → group detail page. */
.dash-group-link {
  color: inherit; text-decoration: none;
}
.dash-group-link:hover { color: var(--accent); text-decoration: underline; }
/* Net value link (Flow Sum cards) → Date Sum. Inherit the cell's pos/neg
   colour so the number keeps its sign styling. */
.dash-net-link { color: inherit; text-decoration: none; }
.dash-net-link:hover { text-decoration: underline; }
/* Group-name link inside a modal title (product-block popup header). */
.modal-title-link { color: var(--accent); text-decoration: none; }
.modal-title-link:hover { text-decoration: underline; }

/* inventory table — fit content, spreadsheet look */
.dash-inv-table { width: auto; min-width: 180px; }
.dash-inv-table th.col-flavor, .dash-inv-table td.col-flavor { min-width: 70px; }
.dash-zero { color: var(--fg-dim); font-weight: 400; }

/* UAP equation row (right below product abbr) */
.dash-uap-line {
  font-size: 11px;
  color: var(--fg-muted);
  margin: 0 0 8px 0;
  line-height: 1.5;
}
.dash-uap-label { color: var(--fg-muted); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; font-size: 10px; }
.dash-uap-value { color: var(--accent); font-weight: 700; font-size: 13px; margin-left: 4px; }
.dash-uap-value.dash-uap-zero { color: #fca5a5; }
.dash-uap-sep { color: var(--fg-dim); margin: 0 6px; }
.dash-uap-dot { color: var(--fg-dim); margin: 0 4px; }
.dash-uap-term { white-space: nowrap; color: #e5e7eb; font-variant-numeric: tabular-nums; }
.dash-uap-type { color: var(--fg-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; margin-left: 2px; }
.dash-uap-missing,
.dash-uap-missing .dash-uap-type {
  color: #fca5a5 !important;
  font-weight: 600;
}

/* UAP line inline with product name on the product-block header */
.product-block .product-head {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.product-block .product-head .product-title {
  background: transparent;
  border-bottom: 0;
  padding: 0;
  margin: 0;
}
.product-uap-inline {
  font-size: 12px;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
.product-uap-inline .dash-uap-value { font-size: 14px; }

/* info icon next to UAP labels + in table headers */
.uap-info {
  display: inline-block;
  margin-left: 4px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  vertical-align: baseline;
}
.uap-info:hover { color: var(--accent); }

/* shared / L SKU badges */
.sku-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 14px;
  vertical-align: baseline;
  position: relative;
  top: -1px;
}
.sku-badge-s {
  background: rgba(147, 197, 253, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(147, 197, 253, 0.35);
}
.sku-badge-l {
  background: rgba(252, 165, 165, 0.20);
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, 0.40);
}
/* Badge + info icon docked at the top-right corner of a table cell. */
.dash-type-cell, .dash-uap-cell { position: relative; }
.sku-badge-corner {
  position: absolute;
  top: 0;
  right: 2px;
  margin-left: 0;
  padding: 0 3px;
  font-size: 8px;
  line-height: 12px;
}
.uap-info-corner {
  position: absolute;
  top: 1px;
  right: 2px;
  margin-left: 0;
  font-size: 11px;
  padding: 0;
}
/* ⓘ rendered as a superscript at the top-right of the "UAP" text. */
.dash-uap-label-wrap { position: relative; display: inline-block; }
.uap-info-super {
  position: absolute;
  top: -6px;
  right: -10px;
  margin-left: 0;
  font-size: 9px;
  line-height: 1;
  padding: 0;
}
/* S / L rendered as a superscript at the top-right of the qty text. */
.dash-uap-qty-wrap { position: relative; display: inline-block; }
.sku-badge-super {
  position: absolute;
  top: -7px;
  right: -11px;
  margin-left: 0;
  padding: 0 3px;
  font-size: 8px;
  line-height: 12px;
}

/* UAP info popup */
.uap-info-popup {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.uap-info-popup[hidden] { display: none; }
.uap-info-panel {
  max-width: 480px; width: min(480px, 92vw);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.uap-info-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.uap-info-head strong { color: var(--accent); font-size: 13px; letter-spacing: .3px; }
.uap-info-body { padding: 14px 18px 16px; font-size: 13px; line-height: 1.55; }
.uap-info-body p { margin: 0 0 8px; }
.uap-info-body ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.uap-info-body li { margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; }
.uap-info-body strong { color: #e5e7eb; }

/* variance table — fit content width; columns only as wide as they need */
.dash-diff-table { width: auto; font-variant-numeric: tabular-nums; }
.dash-diff-table th, .dash-diff-table td { padding: 4px 12px; white-space: nowrap; }
.dash-diff-row { cursor: pointer; }
.dash-diff-row:hover td { background: rgba(124, 107, 255, 0.10) !important; }
.dash-diff-table .dash-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e5e7eb; text-align: left;
}
.dash-diff-row:hover .dash-sku { color: var(--accent); }
.dash-diff-table .dash-diff.pos { color: #86efac; font-weight: 600; }
.dash-diff-table .dash-diff.neg { color: #fca5a5; font-weight: 600; }

/* empty state */
.dash-pane-empty {
  display: flex; align-items: center; gap: 14px;
  padding: 20px; background: #111827; border-radius: 6px;
}
.dash-pane-empty-mark { font-size: 28px; color: #86efac; font-weight: 700; }
.dash-pane-empty strong { color: #f1f5f9; display: block; font-size: 14px; }
.dash-pane-empty p { margin: 2px 0 0 0; font-size: 12px; }

/* --- sku detail modal (dark) --- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 1000;
  /* Anchor dialog near the top of the viewport, not centered vertically,
     so it doesn't shift when the body resizes during loading. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 24px 24px; /* ~3 lines of top breathing room */
  pointer-events: none;    /* let only .modal-backdrop + .modal-dialog catch clicks */
}
.modal > * { pointer-events: auto; }
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
}
.modal-dialog {
  position: relative;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: min(1040px, 96vw);
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
/* Product popup: shrink-wrap to its content (just wider than the table)
   instead of a fixed width, capped at 95% of the viewport. */
.modal-fit .modal-dialog {
  width: auto;
  max-width: 95vw;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--accent);
  letter-spacing: .3px;
}
.modal-close {
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
  padding: 0 6px;
}
.modal-close:hover { color: var(--fg); }
.modal-body {
  padding: 14px 18px;
  overflow-y: auto;
}
body.modal-open { overflow: hidden; position: fixed; width: 100%; }

/* popup sections */
.sku-section { margin-bottom: 18px; }
.sku-section:last-child { margin-bottom: 0; }
.sku-section-title {
  margin: 0 0 10px 0; font-size: 13px; font-weight: 700;
  color: #cbd5e1; text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.sku-section-title .sku-section-total {
  color: var(--accent); font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.sku-section-title .flow-eq {
  font-weight: 400; font-size: 12px;
  color: var(--fg-muted);
  text-transform: none; letter-spacing: 0;
  margin-left: 4px;
  white-space: normal;
}
.flow-eq .eq-eq { color: var(--accent); font-weight: 700; margin-right: 4px; }
.flow-eq .eq-term { display: inline-block; margin-right: 2px; }
.flow-eq .eq-sign { color: var(--fg); font-weight: 600; margin-right: 2px; }
.flow-eq .eq-num  { color: var(--fg); font-weight: 600; }
.flow-eq .eq-label { color: var(--fg-muted); font-size: 11px; }
.sku-section-empty { font-size: 12px; margin: 0 0 4px 0; }

.sku-table, .sku-box-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  color: var(--fg);
}
.sku-table th, .sku-table td,
.sku-box-table th, .sku-box-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
  vertical-align: middle;
}
.sku-table thead th,
.sku-box-table thead th {
  background: #1f2a44; color: #cbd5e1; font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
}
.sku-table .sku-row-head td { background: #182036; font-weight: 600; }
.sku-table .sku-pallet td { background: #141a2b; padding: 4px 8px; }
.sku-table .sku-pallet-boxes td { background: #0f1524; padding: 8px 14px; }
.sku-table .sku-loose-box td { background: #141a2b; }
.sku-table td.indent { padding-left: 26px; }

.pallet-toggle {
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 12px; cursor: pointer; padding: 0 4px 0 0;
}
.pallet-toggle:hover { color: var(--fg); }
.pallet-label { font-weight: 600; color: #cbd5e1; }
.barcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e5e7eb;
}
/* Every barcode opens the QR history popup */
.barcode, .qr-link { cursor: pointer; }
.barcode:hover, .qr-link:hover {
  color: var(--accent);
  text-decoration: underline dotted;
}

/* Cells with a sku id are clickable (open the SKU modal) */
.triplet-table td[data-sku-id] { cursor: pointer; }
.triplet-table td[data-sku-id]:hover {
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

/* inventory TOTAL row — clickable, expands pallet/box detail */
.sku-table .sku-total-row td {
  background: #064e3b !important;
  color: #a7f3d0;
  font-weight: 700;
  border-color: #065f46;
  cursor: pointer;
  user-select: none;
}
.sku-table .sku-total-row:hover td { background: #0a5f45 !important; }
.sku-table .sku-details td { background: #0f1524 !important; padding: 10px 14px; }

.pallet-line {
  padding: 4px 6px; font-size: 12px; color: #cbd5e1;
  display: flex; align-items: center; gap: 4px;
}
.pallet-line .pallet-toggle { flex-shrink: 0; }
.pallet-boxes { padding: 4px 22px 10px 22px; }
.loose-box-line { padding: 3px 28px; font-size: 12px; color: #cbd5e1; }

/* Master-carton folders inside an expanded pallet flow row (Pallet → MC → IB).
   Indented one level under the pallet; MC label tinted to read as a sub-folder. */
.mc-folders { padding-left: 12px; border-left: 2px solid #1e293b; margin: 2px 0 2px 4px; }
.mc-folders .pallet-label { color: #93c5fd; }

/* MC folders inside the /flow pallet expander (Pallet → MC → IB). */
.pallet-detail-table .mc-header-row td { background: #131c2e; padding: 5px 8px; }
.pallet-detail-table .mc-header-row .pallet-label { color: #93c5fd; font-weight: 600; }
.pallet-detail-table .mc-boxes-cell { padding: 0 0 0 22px; background: #0f1524; }
.pallet-detail-table .mc-boxes-cell .pallet-detail-table { margin: 0; }
.flow-qrtype { color: #cbd5e1; }

/* flow toolbar — Chrome-style tabs along the bottom edge, filter group
   spaced out to the right. */
.flow-toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 0; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.flow-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin-bottom: -1px; /* sit the tabs on the bottom border */
}
.flow-tab {
  background: #111827;
  border: 1px solid var(--border);
  border-bottom-color: var(--border);
  color: var(--fg-muted);
  padding: 6px 14px 7px;
  margin-right: -1px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  top: 0;
  transition: background .12s, color .12s;
}
.flow-tab:hover {
  color: var(--fg);
  background: #182036;
}
.flow-tab.active {
  background: var(--card-bg);
  color: var(--accent);
  border-color: var(--border);
  border-bottom-color: var(--card-bg);
  font-weight: 600;
  z-index: 1;
}

.flow-filters {
  display: flex; gap: 24px; align-items: center;
  font-size: 12px; color: var(--fg-muted);
  padding-bottom: 8px;
}
.flow-filters label {
  display: inline-flex; align-items: center; gap: 6px;
}
.flow-filters input[type=date],
.flow-filters select {
  background: #141a2b; color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 6px; font-size: 12px; font-family: inherit;
}
.flow-filters input[type=date]:focus,
.flow-filters select:focus { outline: none; border-color: var(--accent); }

.flow-pager {
  display: flex; justify-content: flex-end; gap: 6px;
  padding: 8px 0 2px; font-size: 11px; color: var(--fg-muted);
  align-items: center;
}
.flow-page-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg); padding: 3px 10px; border-radius: 3px;
  font-size: 11px; cursor: pointer; font-family: inherit;
}
.flow-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.flow-page-btn:disabled { opacity: .4; cursor: not-allowed; }

.sku-table .flow-boxes td { background: #0f1524 !important; padding: 10px 14px; }

/* flow table loading state — preserves scroll position */
.flow-table-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }

/* ================== ORDERS IMPORTER ================== */
.order-card { margin: 14px 0; padding: 12px 14px; }
.order-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.order-card-head code { font-family: monospace; color: var(--accent); }

.state-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: rgba(124, 107, 255, 0.14); color: var(--accent);
  border: 1px solid rgba(124, 107, 255, 0.28);
}

.status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.status-green, .status-pill.status-green { color: #86efac; background: rgba(134, 239, 172, 0.12); border: 1px solid rgba(134, 239, 172, 0.30); }
.status-yellow, .status-pill.status-yellow { color: #fde68a; background: rgba(253, 230, 138, 0.10); border: 1px solid rgba(253, 230, 138, 0.28); }
.status-red, .status-pill.status-red { color: #fca5a5; background: rgba(252, 165, 165, 0.12); border: 1px solid rgba(252, 165, 165, 0.32); }
.status-pill.status-dup { color: #cbd5e1; background: rgba(255,255,255,0.06); border: 1px solid var(--border); }
.order-ignore { font-size: 11px; color: var(--fg-muted); margin-left: 4px; }
.order-ignore input { vertical-align: middle; margin-right: 2px; }

.order-card.order-red { border-left: 3px solid #fca5a5; }
.order-card.order-yellow { border-left: 3px solid #fde68a; }
.order-card.order-green { border-left: 3px solid #86efac; }

.order-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.order-sheet-side h4, .order-form-side h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fg-muted); }

.sheet-raw {
  width: 100%; border-collapse: collapse;
  font-size: 11px; color: #cbd5e1;
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border);
}
.sheet-raw th, .sheet-raw td { padding: 3px 6px; border: 1px solid var(--border); vertical-align: top; text-align: left; }
.sheet-raw th { font-weight: 600; color: var(--fg-muted); background: rgba(124, 107, 255, 0.06); white-space: nowrap; }
.sheet-raw td { word-break: break-word; }

.order-items { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.order-items th { color: var(--fg-muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.order-items td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.order-items select, .order-items input { font-size: 12px; padding: 2px 4px; }

.order-meta label { display: inline-block; font-size: 11px; color: var(--fg-muted); margin-bottom: 6px; }
.order-meta select { display: block; margin-top: 2px; min-width: 420px; font-size: 12px; padding: 3px 6px; }

.order-footer { margin: 20px 0 40px; padding: 14px; background: rgba(255,255,255,0.02); border-left: 3px solid var(--accent); }
.order-footer ul { list-style: none; padding: 0; margin: 8px 0 12px; display: flex; flex-wrap: wrap; gap: 16px; }

.flag { display: inline-block; padding: 1px 5px; margin-right: 3px; background: rgba(253, 230, 138, 0.14); color: #fde68a; border-radius: 2px; font-size: 10px; }

/* ================== FLOW PAGE ================== */
.flow-filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end;
  padding: 10px 12px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 12px;
}
.flow-filter-bar label { display: flex; flex-direction: column; font-size: 11px; color: var(--fg-muted); gap: 3px; }
.flow-filter-bar input, .flow-filter-bar select { font-size: 12px; padding: 3px 6px; min-width: 90px; }
.flow-pager { display: flex; align-items: center; gap: 10px; padding: 6px 2px; margin: 8px 0; font-size: 12px; }
.flow-pager .btn-sm {
  padding: 3px 12px; font-size: 11px;
  background: var(--accent); color: #0b1727; font-weight: 600;
  border-radius: 4px; text-decoration: none;
}
.flow-pager .btn-sm:hover { filter: brightness(1.10); }
.flow-pager .btn-sm.disabled { opacity: 0.35; pointer-events: none; background: var(--bg-3); color: var(--fg-muted); }
.flow-filter-bar .btn {
  background: var(--accent); color: #0b1727; font-weight: 600;
  font-size: 12px; padding: 6px 14px; border-radius: 4px; text-decoration: none;
}
.flow-filter-bar .btn:hover { filter: brightness(1.10); }
/* same-line page header */
.flow-header h1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.flow-subtitle { font-size: 13px; font-weight: 400; }
.flow-table { width: 100%; font-size: 12px; }
.flow-table th { font-weight: 600; text-align: left; color: var(--fg-muted); padding: 6px; border-bottom: 1px solid var(--border); }
.flow-table td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.flow-table tr:hover td { background: rgba(124,107,255,0.06); }
.flow-table .flow-sku[data-sku-id] { cursor: pointer; color: var(--accent); }
/* Same link affordance anywhere a leaf table carries a sku id (Flow Report
   fold tree, SKU-popup box tables). */
.flow-sku[data-sku-id] { cursor: pointer; color: var(--accent); }
.flow-sku[data-sku-id]:hover { text-decoration: underline; }
.pallet-detail td { background: rgba(255,255,255,0.015); padding: 8px 12px; }
.pallet-detail-table { font-size: 11px; width: 100%; }
.pallet-detail-table th, .pallet-detail-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.btn.btn-sm { font-size: 11px; padding: 3px 8px; }

/* flow page extras */
.flow-daterange-inputs { display: inline-flex; align-items: center; gap: 4px; }
.flow-daterange-inputs input[type=date] { width: 130px; }
.shared-sku-toggle {
  display: inline-block; margin-left: 4px;
  width: 16px; height: 16px; line-height: 14px;
  font-size: 12px; font-weight: 700; text-align: center;
  border: 1px solid var(--accent); border-radius: 50%;
  background: transparent; color: var(--accent);
  cursor: pointer; padding: 0;
}
.shared-sku-toggle:hover { background: var(--accent); color: #0b1727; }
.shared-sku-popup {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.shared-sku-popup[hidden] { display: none; }
.shared-sku-panel {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px 16px; max-width: 460px; width: min(460px, 92vw);
  color: var(--fg);
}
.shared-sku-panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.shared-sku-panel header strong { color: var(--accent); font-size: 13px; }
.shared-sku-panel header button { background: transparent; border: 0; color: var(--fg-muted); cursor: pointer; font-size: 18px; }
.shared-sku-list { list-style: none; padding: 0; margin: 0; }
.shared-sku-list li { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.shared-sku-list li:last-child { border-bottom: 0; }

/* flow type pills */
.flow-type-pill {
  display: inline-block; padding: 1px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  border-radius: 3px; border: 1px solid transparent;
  text-transform: uppercase;
}
.flow-type-incoming    { color: #86efac; background: rgba(134,239,172,0.10); border-color: rgba(134,239,172,0.30); }
.flow-type-outgoing    { color: #fca5a5; background: rgba(252,165,165,0.10); border-color: rgba(252,165,165,0.32); }
.flow-type-transfer    { color: #93c5fd; background: rgba(147,197,253,0.10); border-color: rgba(147,197,253,0.30); }
.flow-type-inv_adj     { color: #fde68a; background: rgba(253,230,138,0.10); border-color: rgba(253,230,138,0.30); }
.flow-type-start_count { color: #cbd5e1; background: rgba(203,213,225,0.08); border-color: rgba(203,213,225,0.25); }
.flow-type-production  { color: #c4b5fd; background: rgba(196,181,253,0.10); border-color: rgba(196,181,253,0.30); }
.flow-type-unpack_box  { color: #fdba74; background: rgba(253,186,116,0.10); border-color: rgba(253,186,116,0.30); }

.flow-cell-link {
  cursor: pointer; color: var(--fg);
  border-bottom: 1px dotted rgba(255,255,255,0.18);
}
.flow-cell-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* admin users */
.admin-create { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-create input { padding: 4px 8px; font-size: 12px; }
.admin-users-table tr.admin-user-row { cursor: pointer; }
.admin-users-table tr.admin-user-row:hover td { background: rgba(124,107,255,0.06); }
.admin-users-table tr.row-inactive td { opacity: 0.55; }
.admin-user-form .form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 18px; margin-bottom: 16px;
}
.admin-user-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--fg-muted); gap: 4px; }
.admin-user-form input, .admin-user-form select { font-size: 13px; padding: 4px 6px; }
.admin-cities, .admin-privs { border: 1px solid var(--border); padding: 10px 14px; margin: 12px 0; border-radius: 6px; }
.admin-cities legend, .admin-privs legend { padding: 0 6px; font-size: 12px; color: var(--accent); font-weight: 600; }
.city-checkboxes { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.city-checkboxes label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg); }
.admin-priv-grid { font-size: 12px; width: auto; }
.admin-priv-grid th, .admin-priv-grid td { white-space: nowrap; }
.admin-priv-grid select { font-size: 11px; padding: 2px 6px; }
.admin-pw-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.admin-pw-form input { padding: 4px 8px; font-size: 13px; }
.form-actions { margin-top: 12px; display: flex; gap: 10px; }

/* Admin activity log */
.admin-filter-bar {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
  margin: 12px 0 16px;
}
.admin-filter-bar label { display: flex; flex-direction: column; font-size: 11px; gap: 3px; }
.admin-filter-bar input, .admin-filter-bar select { padding: 4px 8px; font-size: 13px; }
.admin-activity-table { font-size: 12px; }
.admin-activity-table td.activity-detail {
  max-width: 420px; word-break: break-word; font-family: monospace; font-size: 11px; color: var(--muted);
}
.kind-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; background: rgba(124,107,255,0.15); color: var(--accent);
}
.kind-pill.kind-login        { background: rgba(34,197,94,0.18); color: #4ade80; }
.kind-pill.kind-logout       { background: rgba(148,163,184,0.18); color: #94a3b8; }
.kind-pill.kind-login_fail   { background: rgba(248,113,113,0.18); color: #f87171; }
.kind-pill.kind-user_create,
.kind-pill.kind-user_update,
.kind-pill.kind-user_password_set { background: rgba(56,189,248,0.18); color: #38bdf8; }
.kind-pill.kind-role_create,
.kind-pill.kind-role_save,
.kind-pill.kind-priv_create,
.kind-pill.kind-priv_save    { background: rgba(251,191,36,0.18); color: #fbbf24; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link.sort-active { color: var(--accent); }
.admin-activity-table a,
.admin-activity-table a:visited {
  color: inherit;
  text-decoration: none;
}
.admin-activity-table a:hover { color: var(--accent); }

/* Dashboard notes (Version History + To Be Developing) */
.dash-notes-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.dash-note-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  display: flex; flex-direction: column;
}
.dash-note-card .dash-pane-head { margin-bottom: 8px; }
.dash-note-body {
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 12px;
  color: var(--fg);
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
}
.dash-note-form { display: flex; flex-direction: column; gap: 8px; }
.dash-note-form textarea {
  width: 100%;
  font-family: monospace;
  font-size: 12px;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  resize: vertical;
  min-height: 180px;
}
.dash-note-form button { align-self: flex-end; }
@media (max-width: 1100px) {
  .dash-notes-row { grid-template-columns: 1fr; }
}

/* Version History — structured list. Stacked under variance now, so let
   the list expand naturally; cap removed to avoid an inner scrollbar. */
.dash-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-version-entry {
  padding: 6px 0 8px 0;
  border-bottom: 1px dashed var(--border);
}
.dash-version-entry:last-child { border-bottom: 0; }
.dash-version-head {
  display: flex; gap: 10px; align-items: baseline;
  margin-bottom: 2px;
}
.dash-version-date {
  font-family: monospace;
  font-size: 11px;
  color: var(--fg-muted);
  min-width: 78px;
}
.dash-version-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.dash-version-notes {
  list-style: disc;
  margin: 2px 0 0 92px;
  padding: 0;
  font-size: 11px;
  color: var(--fg);
  line-height: 1.45;
}
.dash-version-notes li { margin-bottom: 1px; }

/* Flow popup: orphan-unpack badge next to total (and Unpacked tab) */
.flow-unpack-pill {
  font-size: 11px;
  color: var(--fg-muted);
  margin-left: 8px;
  font-weight: normal;
}

/* Per-city subsection in popup (Current Inventory + Flow split per city) */
.sku-subsection-title {
  margin: 14px 0 6px 0;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.sku-city-section { margin-bottom: 14px; }

/* Tiny city tag above each per-city flow table (just an anchor label,
   the totals/equation already appear in the section title above). */
.flow-city-label {
  margin: 10px 0 4px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Top-right "Hello, <realname>" block — sits at the same vertical position
   as the page title (.page-header h1 has 22px font-size + 4px gap, so the
   pill's top:22px lines up with the baseline). left:auto neutralises any
   inherited left positioning. */
.user-greeting {
  position: fixed;
  top: 22px;
  right: 28px;
  left: auto;
  z-index: 60;
  background: var(--bg-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  line-height: 1.4;
}

/* Activity log: parsed user-agent column */
.activity-ua { font-size: 11px; white-space: nowrap; }

/* Flow Editor (admin/flow) */
.admin-flow-table { font-size: 12px; }
.admin-flow-table td .btn-sm { padding: 2px 8px; font-size: 11px; }
.admin-flow-table td.flow-row-actions { white-space: nowrap; }
.btn-danger { background: #7f1d1d; color: #fecaca; border-color: #991b1b; }
.btn-danger:hover { background: #991b1b; color: #fff; }
.flow-edit-also { display: block; margin-top: 12px; font-size: 12px; color: var(--fg-muted); }
.flow-edit-also input { margin-right: 6px; vertical-align: middle; }
.flow-row-actions { white-space: nowrap; font-size: 11px; }
.flow-row-actions .btn { padding: 1px 8px; font-size: 11px; }

/* Flow Date Sum page + dashboard Today's Date Sum block */
.flow-datesum-table { font-size: 12px; }
.flow-datesum-table th, .flow-datesum-table td { padding: 4px 8px; }
.flow-datesum-table td.muted { opacity: 0.4; }
.flow-datesum-pager { display: flex; align-items: center; gap: 12px; margin: 12px 0; }

/* Flow Report page — date sections → product tables → expandable type rows */
.report-date {
  margin: 18px 0 10px;
  font-size: 16px;
  color: #93c5fd;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.report-product { margin-bottom: 14px; padding: 10px 14px; }
.report-product-title {
  margin: 0 0 8px;
  font-size: 14px;
  display: flex; align-items: baseline; gap: 10px;
}
.report-product-link { cursor: pointer; color: inherit; }
.report-product-link:hover { color: var(--accent); text-decoration: underline; }
.report-shared-toggle:hover { text-decoration: none; }
.report-shared-list {
  margin: -2px 0 10px 18px;
  font-size: 13px;
}
.report-shared-list .report-product-link {
  display: block;
  padding: 2px 0;
  width: fit-content;
}
.flow-report-table { font-size: 12px; }
.flow-report-table th, .flow-report-table td { padding: 4px 8px; }
.flow-report-table .report-row { cursor: pointer; }
.flow-report-table .report-row:hover td { background: rgba(255,255,255,0.03); }
.flow-report-table .report-detail td {
  background: rgba(255,255,255,0.015);
  padding: 8px 12px;
}
.report-items td .barcode { font-size: 11px; }
.report-truncated { margin: 0 0 6px 0; font-size: 11px; }
/* Pallet → MC → IB fold tree inside an expanded type row */
.report-fold-line {
  cursor: pointer;
  padding: 3px 0;
  font-size: 12px;
}
.report-fold-line:hover { background: rgba(255,255,255,0.03); }
.report-fold-mc { margin-left: 20px; }
.report-fold-body { margin: 2px 0 6px 20px; }
.report-loose-head { cursor: default; margin-top: 6px; }
.report-loose-head:hover { background: transparent; }
.report-fold-total {
  margin-top: 8px; padding: 4px 8px;
  background: #064e3b; color: #a7f3d0;
  font-weight: 700; font-size: 12px;
  border: 1px solid #065f46;
  display: flex; justify-content: space-between;
}
.flow-datesum-pager .btn-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.flow-datesum-pageinfo { font-size: 12px; }
.dash-today-sum { margin-bottom: 16px; padding: 12px 14px; }
.dash-today-sum .dash-pane-head { margin-bottom: 8px; }
.dash-today-date { font-weight: normal; font-size: 13px; }
.dash-today-sum-table { font-size: 12px; }
.dash-today-sum-table th, .dash-today-sum-table td { padding: 3px 8px; }

/* Disabled sidebar leaf (e.g. Add Flow placeholder) */
.tree-leaf.disabled { opacity: 0.45; pointer-events: none; cursor: default; }

/* Flow Sum by Date dashboard pane: flat product card grid */
.dash-flatcard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.dash-flatcard-grid .dash-product-link { width: auto; }

/* Date range form */
.dash-today-date-form { display: flex; gap: 6px; align-items: center; }
.dash-today-date-form .muted { font-size: 12px; }
.dash-today-date-form input[type=date] {
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}
.dash-inv-table .pos { color: #4ade80; }
.dash-inv-table .neg { color: #f87171; }

/* Flow operator column (derived from flow_operation_log) */
.flow-operator { font-size: 11px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ===== Racks section (List / Layout / Code MNT) ===== */

.racks-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 14px;
}
.racks-show, .racks-isles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 12px; text-decoration: none;
  background: var(--bg-3); color: var(--fg-muted); border: 1px solid var(--border);
}
.chip:hover { color: var(--fg); border-color: var(--accent); }
.chip.active { background: var(--accent); color: #04221f; border-color: var(--accent); }

.rack-isle { margin-bottom: 18px; }
.rack-shelf-card { margin-bottom: 12px; }
.rack-shelf-head { margin: 0 0 8px; font-size: 14px; color: var(--fg); }
.rack-table { width: 100%; }

.loc-cell {
  cursor: pointer; color: var(--accent); border-bottom: 1px dotted var(--accent);
}
.loc-cell:hover { color: var(--accent-hover); }
.sku-link { cursor: pointer; color: var(--accent); }
.sku-link:hover { color: var(--accent-hover); text-decoration: underline; }

.loc-qr-inline { background: #fff; border-radius: 3px; padding: 2px; vertical-align: middle; }

/* Floating QR preview on LOC hover */
.loc-qr-pop {
  position: fixed; z-index: 2000; background: #fff; color: #111;
  border: 1px solid var(--border); border-radius: 6px; padding: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4); text-align: center; pointer-events: none;
}
.loc-qr-pop img { display: block; image-rendering: pixelated; }
.loc-qr-cap { margin-top: 4px; font-size: 12px; font-weight: 600; color: #111; }

/* Pager */
.pager { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.pager .disabled { opacity: .4; pointer-events: none; }

/* ===== Layout (warehouse map) ===== */
.racks-layout { display: flex; gap: 16px; align-items: stretch; min-height: 75vh; }
.racks-layout-search { width: 320px; flex: 0 0 320px; overflow-y: auto; }
.racks-layout-map { flex: 1 1 auto; min-width: 0; background: #fff; border-radius: 6px; overflow: hidden; }
.racks-map-empty { background: var(--card-bg); }
#rk-zoom { transform-origin: top left; width: 100%; height: 100%; transition: transform .1s ease; }
.racks-search-form { display: flex; flex-direction: column; gap: 8px; }
.racks-search-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--fg-muted); gap: 3px; }
.racks-search-form select { background: var(--bg-2); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; padding: 4px; }
.racks-total { margin: 10px 0; font-weight: 600; }
.racks-results { font-size: 12px; }
.racks-results tr[data-class] { cursor: pointer; }
.loc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* SVG cells (white map on dark theme) */
#warehouse-svg .cell-rect { fill: none; stroke: #000; stroke-width: 0.5; cursor: pointer; }
#warehouse-svg .cell-rect:hover { fill: #e3f2fd; }
#warehouse-svg .cell-text { font-size: 7px; text-anchor: middle; pointer-events: none; fill: #000; }
#warehouse-svg .cell-text-vertical { writing-mode: tb; }
#warehouse-svg .cell-text-rotated { dominant-baseline: middle; }
#warehouse-svg .grid-line { stroke: #ddd; stroke-width: 0.5; }
#warehouse-svg .divider-line { stroke: #000; stroke-width: 1.5; }
#warehouse-svg .outer-rect { fill: #fff; stroke: #000; stroke-width: 2; }
#warehouse-svg .rectangle-label { font-size: 12px; text-anchor: middle; font-weight: bold; fill: #000; }

/* ===== Compare → SKU ===== */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.compare-col { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 14px; }
.compare-col-title { margin: 0 0 10px; font-size: 15px; }
.compare-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.compare-filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--fg-muted); gap: 3px; }
.compare-filters select { background: var(--bg-2); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; padding: 4px; min-width: 0; }
.compare-filters select:disabled { opacity: .45; }
.compare-sku-pick { grid-column: 1 / -1; }
.compare-result h3 { margin: 14px 0 6px; font-size: 13px; color: var(--fg-muted); }
.compare-sku-head { font-size: 15px; }
.compare-sku-code { font-weight: 700; cursor: pointer; text-decoration: underline dotted; }
.compare-desc { margin: 4px 0 0; font-size: 12px; }
.compare-table td.num, .compare-table th.num { text-align: right; }
.compare-table .compare-total td { font-weight: 700; border-top: 1px solid var(--border); }
.compare-table .compare-other td { color: var(--fg-muted); font-style: italic; }
.compare-sku-sub { margin: 14px 0 4px; font-weight: 600; font-size: 13px; color: #93c5fd; }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }

/* Compare: Save button + name popup */
.compare-save-btn { margin-left: 12px; padding: 4px 12px; font-size: 13px; vertical-align: middle; }
.compare-save-pop[hidden] { display: none; }
.compare-save-pop {
  position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh;
}
.compare-save-box {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 18px 20px; width: 340px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.compare-save-box h3 { margin: 0 0 12px; font-size: 15px; }
.compare-save-box label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-muted); }
.compare-save-box input { background: var(--bg-2); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 14px; }
.compare-save-actions { display: flex; gap: 8px; margin-top: 14px; }

/* header links to source Google Sheets (orders import) */
.sheet-link { color: var(--accent); text-decoration: underline; }
.sheet-link:hover { color: var(--accent-hover); }

/* SKU# column switch — pill fixed under the top-right greeting. Clicking it
   flips body.sku-cols-off; every SKU# cell is tagged (.sku-col here, plus
   the product-block .cell-sku/.hdr-sku pair) so the rule also covers table
   fragments injected after load (product popup, pallet/report expanders). */
.sku-col-toggle {
  position: fixed;
  top: 58px;
  right: 28px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.sku-col-toggle .tgl-track {
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: #334155;
  position: relative;
  transition: background .15s;
}
.sku-col-toggle .tgl-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  transition: left .15s, background .15s;
}
.sku-col-toggle.on .tgl-track { background: #2563eb; }
.sku-col-toggle.on .tgl-knob  { left: 14px; background: #fff; }

body.sku-cols-off .sku-col,
body.sku-cols-off .cell-sku,
body.sku-cols-off .hdr-sku { display: none !important; }

/* Inline variant of the switch for the product popup header. */
.sku-col-toggle-inline {
  position: static;
  margin-left: auto;
  margin-right: 12px;
}

/* ================== MOBILE — phones (auto-fit small screens) ==================
   Below 820px the two-column app grid collapses: the sidebar becomes an
   off-canvas drawer driven by the #mobile-topbar hamburger (body.nav-open),
   cards/panes scroll wide tables sideways instead of stretching the page,
   and modals fill the viewport. Desktop is untouched. */
#mobile-topbar { display: none; }
#nav-backdrop { display: none; }

@media (max-width: 820px), (max-height: 500px) {
  /* (max-height: 500px) catches phones held sideways — landscape widths
     exceed the 820px breakpoint but the viewport is too short for the
     static sidebar, so they get the drawer + top bar too. */
  /* --- top bar with hamburger --- */
  #mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 150;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
  }
  #nav-burger {
    background: transparent; border: 1px solid var(--border); border-radius: 6px;
    color: var(--fg); font-size: 17px; line-height: 1;
    padding: 7px 11px; cursor: pointer;
  }
  #mobile-topbar .mtb-title { flex: 1; font-weight: 600; font-size: 14px; color: #d6d9e2; }
  #mobile-topbar .mtb-user  { font-size: 12px; color: var(--fg-muted); }

  /* --- single column; sidebar slides in from the left --- */
  #app { display: block; }
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
    width: 272px; max-width: 85vw; min-width: 0;
    max-height: none;
    border-right: 1px solid var(--border);
    transform: translateX(-105%);
    transition: transform .18s ease;
  }
  body.nav-open #sidebar {
    transform: none;
    box-shadow: 6px 0 30px rgba(0,0,0,.5);
  }
  body.nav-open { overflow: hidden; }
  #nav-backdrop:not([hidden]) {
    display: block;
    position: fixed; inset: 0; z-index: 250;
    background: rgba(0,0,0,.55);
  }
  /* drawer rows: bigger touch targets */
  #sidebar .nav-item, #sidebar summary.tree-toggle, #sidebar .tree-leaf {
    padding-top: 7px; padding-bottom: 7px; font-size: 14px;
  }

  /* --- fixed pills: greeting lives in the top bar; SKU# switch floats
         bottom-right (the popup's inline variant keeps its static spot) --- */
  .user-greeting { display: none; }
  .sku-col-toggle:not(.sku-col-toggle-inline) {
    top: auto; bottom: 14px; right: 12px; z-index: 140;
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
  }

  /* --- content fits the phone width --- */
  #content { padding: 12px 10px 70px; overflow-x: auto; }
  .page-header h1 { font-size: 18px; }
  .card, .dash-pane { padding: 12px 10px; }

  /* wide tables scroll inside their container, not the whole page */
  .card, .dash-pane, .dash-pane-left, .dash-pane-today, .product-block,
  .table-scroll, .modal-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- modals fill the screen --- */
  .modal { padding: 10px 6px; }
  .modal-dialog {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .modal-fit .modal-dialog { max-width: 100%; }
  .modal-header { padding: 10px 12px; }
  .modal-body { padding: 10px 12px; }

  /* --- dashboard: one column --- */
  .dash-split { grid-template-columns: 1fr; }
  /* pane titles keep the full row; date pickers wrap below instead of
     squeezing the title into a sliver */
  .dash-pane-head { flex-wrap: wrap; gap: 6px 10px; }
  .dash-version-notes { margin-left: 14px; }

  /* --- racks warehouse map stacks vertically --- */
  .racks-layout { flex-direction: column; min-height: 0; }
  .racks-layout-search { width: auto; flex: 0 0 auto; max-height: 45vh; }
  .racks-layout-map { min-height: 60vh; }

  /* --- forms / filters shrink to the viewport --- */
  .order-meta select { min-width: 0; width: 100%; max-width: 100%; }
  .flow-filter-bar input, .flow-filter-bar select { min-width: 0; max-width: 100%; }
  .compare-save-box { width: min(340px, 92vw); }
}