/* 84-overlays.css — Focused room overlays, scroll rail, clone slot dots
   Part of the ordered set linked from index.html. The parts concatenate to the
   original stylesheet byte for byte; link order IS the cascade order, so never
   reorder the <link> tags and never move a rule between files. */

#bohSection { display:block; }
.boh-wrap { max-width:920px; margin:0 auto; padding:16px 12px 96px; }
.boh-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.boh-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.boh-head h1 { margin:2px 0; font-size:1.7rem; color:#fff; }
.boh-head-sub, .boh-body { color:#9aa39a; font-size:.875rem; margin:2px 0; }
.boh-empty { color:#8b948b; padding:22px; text-align:center; background:#141814; border:1px solid #232b23; border-radius:12px; }

.boh-totals { background:#12160f; border:1px solid #232b23; border-radius:12px; padding:10px 14px; margin:10px 0 16px; }
.boh-tot-head { font-size:.875rem; text-transform:uppercase; letter-spacing:.07em; color:#7fae5f; margin:0 0 8px; }
.boh-tot-toggle { display:none; }
.boh-tot-chips { display:flex; flex-wrap:wrap; gap:8px; }
.boh-total { font-size:.875rem; background:#1a221a; border:1px solid #283028; border-radius:20px; padding:4px 11px; color:#b9c4b3; }
.boh-total strong { color:#bfe6a2; }

.boh-bins { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.boh-bin { background:#141814; border:1px solid #232b23; border-radius:14px; padding:14px 15px; }
.boh-bin-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.boh-bin-name { margin:0; font-size:1.08rem; color:#fff; }
.boh-bin-loc { margin:2px 0 0; font-size:.74rem; color:#8b948b; }
.boh-bin-head-acts { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
.boh-bin-sub { font-size:.72rem; color:#7f8a7f; margin:6px 0 8px; }

.boh-lines { display:flex; flex-direction:column; gap:5px; }
.boh-empty-line { font-size:.875rem; color:#6f786f; margin:2px 0; }
/* Wrap, do not overflow. The action row used to push the line wider than the
   panel and the whole overlay scrolled sideways; on a phone the buttons ran off
   the edge entirely. */
.boh-line { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px; padding:10px 12px; background:#11150f; border:1px solid #1e261e; border-radius:9px; }
.boh-line-qty { font-weight:700; color:#fff; font-size:.9rem; min-width:64px; }
.boh-line-item { min-width:0; overflow-wrap:break-word; color:#cfe0c2; font-size:.875rem; display:flex; flex-direction:column; gap:4px; line-height:1.4; }
.boh-line-strain { color:#8b948b; font-size:.875rem; }
.boh-line-acts { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-start; min-width:0; }
.boh-line-item > .boh-trim-chip, .boh-line-item > .boh-sec-chip, .boh-line-item > .boh-grow-chip { align-self:flex-start; max-width:100%; box-sizing:border-box; white-space:nowrap; }

.boh-mini { font-size:.875rem; padding:4px 9px; border-radius:7px; border:1px solid #2c3a2c; background:#1a221a; color:#cfe0c2; cursor:pointer; }
.boh-mini:hover { background:#20340f; border-color:#3a5a1f; }
.boh-mini.accent { background:#2e7d32; border-color:#357a37; color:#fff; }
.boh-mini.bad { color:#e68a8a; border-color:#4a2020; }
.boh-mini.bad:hover { background:#341414; }
.boh-mini:disabled { opacity:.45; cursor:not-allowed; }

.boh-addform { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding:10px; background:#11150f; border:1px dashed #2c3a2c; border-radius:10px; }
.boh-addform select, .boh-addform input, .boh-addform textarea { background:#0f130d; border:1px solid #2a332a; border-radius:8px; padding:7px 8px; color:#fff; font-size:.875rem; }
.boh-addform input[data-f="qty"] { width:80px; }
.boh-addform select { max-width:100%; }
.boh-addform [hidden] { display:none; }
.boh-addform[data-form="stock"] > label { display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; color:#9ca896; font-size:.875rem; }
.boh-addform[data-form="stock"] > label[hidden] { display:none; }
.boh-addform[data-form="stock"] select, .boh-addform[data-form="stock"] input { box-sizing:border-box; width:100%; min-width:0; }
.boh-pr-mode { display:flex; gap:12px; width:100%; padding:2px 2px 4px; color:#b9c4b3; font-size:.875rem; }
.boh-pr-mode label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.boh-strain-fields, .boh-blend-fields { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.boh-blend-fields[hidden] { display:none; }
.boh-blend-fields input[data-f="blend-name"] { flex:1 1 160px; min-width:140px; }
.boh-blend-fields input[data-f="blend-qty"] { width:80px; }
.boh-ready-bulk { display:block; width:100%; }
.boh-ready-bulk-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; color:#fff; }
.boh-ready-bulk-head span { color:#e6c069; font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.boh-ready-bulk-field { display:block; color:#b9c4b3; font-size:.875rem; font-weight:700; }
.boh-ready-bulk-field textarea { display:block; width:100%; min-height:142px; margin-top:6px; resize:vertical; line-height:1.45; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }
.boh-ready-help { margin:8px 0; color:#8b948b; font-size:.875rem; line-height:1.45; }
.boh-ready-help strong { color:#b9c4b3; }
.boh-ready-feedback { display:flex; flex-direction:column; gap:2px; min-height:42px; padding:8px 9px; border:1px solid #2a332a; border-radius:8px; color:#8b948b; font-size:.875rem; }
.boh-ready-feedback.ok { border-color:#31562c; background:#142011; color:#9bcf8c; }
.boh-ready-feedback.bad { border-color:#5a2b2b; background:#211111; color:#e6a1a1; }
.boh-ready-feedback strong { color:inherit; }
.boh-ready-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
/* gf:eof boh styles */

/* ── BOH room map (boh.js U-layout) ──────────────────────────────────────── */
.boh-room {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "back back back" "left center right";
  gap: 14px; margin: 16px 0;
}
.boh-arm.left { grid-area: left; display: flex; flex-direction: column; gap: 12px; }
.boh-arm.right { grid-area: right; display: flex; flex-direction: column; gap: 12px; }
.boh-back { grid-area: back; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.boh-center {
  grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed #2a332a; border-radius: 14px; min-height: 140px; text-align: center; padding: 12px;
  min-width: 160px;
}
.boh-center-label { font-size: 1rem; font-weight: 800; color: #6f786f; letter-spacing: .04em; }
.boh-center-sub { font-size: .875rem; color: #59614f; margin: 4px 0 0; }
.boh-side-label { margin:0 0 -4px; color:#7fae5f; font-size:.875rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.boh-arm.right .boh-side-label { color:#9ac6e6; }
.boh-side-empty { margin:0; padding:10px; border:1px dashed #232b23; border-radius:10px; color:#6f786f; font-size:.875rem; text-align:center; }

.boh-rack { background: #12160f; border: 1px solid #232b23; border-radius: 12px; padding: 8px; width: 134px; position: relative; margin-top: 18px; overflow: visible; }
.boh-rack.bulk { border-left: 3px solid #4c9a52; }
.boh-rack.packaged { border-left: 3px solid #5b8fc4; }
.boh-rack-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.boh-rack-toggle { flex:1; min-width:0; display:flex; align-items:center; gap:6px; border:0; background:transparent; color:#cfe0c2; padding:0; cursor:pointer; text-align:left; }
.boh-rack-toggle:hover { background:transparent; color:#fff; }
.boh-rack-caret { width:16px; height:16px; display:grid; place-items:center; border:1px solid #283028; border-radius:5px; color:#9aa39a; font-size:.78rem; line-height:1; flex-shrink:0; }
.boh-rack-name { font-size: .78rem; font-weight: 700; color: currentColor; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boh-rack-slots { display: flex; flex-direction: column; gap: 4px; }
.boh-rack-summary {
  width: 100%; min-height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border: 1px solid #283028; border-radius: 8px; background: #0f130d; color: #b9c4b3; padding: 7px 8px;
  text-align: left; cursor: pointer;
}
.boh-rack-summary:hover { background:#14200f; border-color:#3a5a1f; }
.boh-rack-summary strong { color:#fff; font-size:.8rem; }
.boh-rack-summary span { color:#9aa39a; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.boh-rack-summary em { color:#6f786f; font-size:.62rem; font-style:normal; }

.boh-sec-chip { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 10px; }
.boh-trim-chip { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 10px; margin-left: 6px; align-self: flex-start; }
.boh-trim-chip.untrimmed { background: #332a12; color: #e6c069; }
.boh-trim-chip.trimmed { background: #1c2a18; color: #a7e07a; }
.boh-total.untrimmed { border-color: #4a3d1c; }
.boh-total.untrimmed strong { color: #e6c069; }
.boh-sec-chip.bulk { background: #1c2a18; color: #a7e07a; }
.boh-sec-chip.packaged { background: #182530; color: #9ac6e6; }
.boh-sec-chip.preroll { background: #2c2410; color: #e6c069; }
.boh-rack.preroll { border-left: 3px solid #c49a3f; }
.boh-rack.unnumbered { border-left: 3px solid #7a4a2a; margin-top: 0; }
.boh-rack-tag { position: absolute; top: -18px; left: 10px; padding: 2px 10px 4px; border-radius: 6px 6px 0 0; font-size: 1.9rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; z-index: 2; pointer-events: none; box-shadow: 0 -2px 6px rgba(0,0,0,.4); }
.boh-rack.bulk .boh-rack-tag { background: #4c9a52; color: #061208; }
.boh-rack.packaged .boh-rack-tag { background: #5b8fc4; color: #04111e; }
.boh-rack.preroll .boh-rack-tag { background: #c49a3f; color: #110900; }
[data-act="toggle-section"] { cursor: pointer; }

/* BOH sub-tabs: Room | Pre-roll station */
/* The Retail tab bar (2026-10-06): one panel, big tabs that wrap to a second
   row on a phone instead of running off the side, the open one tinted green. */
.boh-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 8px; padding:6px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.boh-tab { display:inline-flex; flex:1 1 auto; align-items:center; justify-content:center; gap:7px; min-height:52px; padding:8px 14px; border:0; border-radius:12px; background:transparent; color:var(--muted); cursor:pointer; font-size:1.02rem; font-weight:800; white-space:nowrap; }
.boh-tab:hover { color: var(--text); }
.boh-tab.active { background:rgba(52,212,106,.16); color:var(--text); }
.boh-tab-count { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #2c2410; color: #e6c069; font-size: .875rem; font-weight: 800; }
.boh-panel { animation: boh-slide-in .22s ease; }
/* Seven tabs on a phone: one row that scrolls sideways, not four rows that
   push the room 170px down (tester, 2026-10-06). */
@media (max-width: 760px) {
  #bohSection .boh-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #bohSection .boh-tabs .boh-tab { flex: 0 0 auto; min-height: 48px; }
}
@keyframes boh-slide-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .boh-panel { animation: none; } }

/* Stashboard pre-roll shortcut button */
.preroll-summary { margin-bottom: 18px; }
.preroll-shortcut {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #17140c; border: 1px solid #2c2712; border-left: 3px solid #c49a3f; border-radius: 14px;
  padding: 14px 18px; cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease;
}
.preroll-shortcut:hover { background: #201a0e; border-color: #4a3d1c; }
.preroll-shortcut-copy { display: flex; flex-direction: column; gap: 3px; }
.preroll-shortcut-copy strong { font-size: 1.05rem; color: #fff; font-weight: 700; }
.preroll-shortcut-more { color: #e6c069; font-weight: 600; }
.preroll-shortcut-go { color: #e6c069; font-weight: 800; font-size: .9rem; white-space: nowrap; }

/* Pre-roll material band + batch board */
.boh-preroll-band { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #2b3324; }
.boh-band-label { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: #c49a3f; margin-bottom: 8px; }
.boh-band-racks { display: flex; flex-wrap: wrap; gap: 10px; }
.boh-station .boh-band-label { text-align: center; }
.boh-station .boh-band-racks {
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}
.boh-station .boh-rack.preroll {
  width: 180px;
  max-width: 100%;
  padding: 12px;
}
.boh-station .boh-rack.preroll .boh-rack-name { font-size: .78rem; }
.boh-station .boh-rack.preroll .boh-slot { min-height: 56px; }
.boh-preroll { background: #17140c; border: 1px solid #2c2712; border-radius: 12px; padding: 10px 14px; margin: 10px 0 16px; }
.boh-pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }
.boh-pr-card { background: #12160f; border: 1px solid #2c2712; border-left: 3px solid #c49a3f; border-radius: 10px; padding: 8px 10px; }
.boh-pr-head { display: flex; align-items: baseline; gap: 6px; }
.boh-pr-price { font-weight: 800; color: #e6c069; font-size: .95rem; }
.boh-pr-label { font-size: .875rem; color: #cfe0c2; }
.boh-pr-batches { margin: 4px 0; color: #eef; }
.boh-pr-batches strong { font-size: 1.35rem; color: #fff; }
.boh-pr-sub { font-size: .875rem; color: #9aa694; margin-left: 6px; }
.boh-pr-mat { font-size: .875rem; color: #a7b79a; }
.boh-pr-formula { font-size: .875rem; color: #7f8a76; margin-top: 2px; }
.boh-pr-card .boh-mini { margin-top: 6px; }
.boh-pr-note { font-size: .875rem; color: #7f8a76; margin-top: 8px; }

/* Ready-by-type (Indica / Sativa / Hybrid) breakdown */
.boh-pr-types { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.boh-pr-t { font-size: .875rem; color: #cfe0c2; background: #1a2016; border: 1px solid #2c3a2c; border-radius: 8px; padding: 1px 6px; }
.boh-pr-t strong { color: #fff; }
.boh-pr-t.indica { border-color: #5a3f7a; background: #211a2c; color: #c9b3e6; }
.boh-pr-t.sativa { border-color: #7a5a2a; background: #2a2113; color: #e6c98a; }
.boh-pr-t.hybrid { border-color: #2f6a37; background: #16240f; color: #a7e07a; }
.boh-pr-t.untyped { border-color: #4a3d1c; color: #9aa694; }
.boh-pr-typesum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px 10px; background: #12160f; border: 1px solid #2c2712; border-radius: 10px; }
.boh-pr-typesum-label { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: #c49a3f; font-weight: 700; }
.boh-pr-typesum .boh-pr-t { font-size: .875rem; padding: 2px 8px; }
.boh-pr-make { font-size: .875rem; font-weight: 700; color: #e6c069; margin-left: auto; }

.boh-slot {
  min-height: 48px; border-radius: 8px; border: 1px solid #283028; background: #0f130d; color: #8b948b;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px;
}
.boh-slot.empty { border-style: dashed; color: #5f6a5f; }
.boh-slot.filled { color: #fff; }
.boh-slot.sel { outline: 2px solid var(--accent, #4CAF50); outline-offset: 1px; }
.boh-slot.filled { cursor: grab; touch-action: none; }
.boh-slot.boh-dragging { opacity: .4; }
.boh-slot.empty.drag-over { border-style: solid; border-color: var(--accent, #4CAF50); background: rgba(76,175,80,0.14); color: var(--accent, #4CAF50); }
.boh-slot.rb { box-shadow: inset 0 0 0 1px #c49a3f; }
.boh-slot-rb { position: absolute; top: 3px; right: 4px; font-size: .5rem; font-weight: 800; letter-spacing: .04em; color: #0d0d0d; background: #e6c069; border-radius: 6px; padding: 1px 4px; }
.boh-slot { position: relative; }
.boh-slot-level { position: absolute; top: 3px; left: 5px; font-size: .5rem; font-weight: 800; letter-spacing: .035em; opacity: .72; text-transform: uppercase; }
.boh-slot-empty-mark { font-size: 1.1rem; line-height: 1; }
.boh-slot-strain { font-weight: 700; font-size: .68rem; line-height: 1.05; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.boh-slot-amt { font-size: .66rem; opacity: .95; }
.boh-slot-lines { font-size: .58rem; opacity: .78; }

.boh-detail { margin-top: 18px; background: #12160f; border: 1px solid #232b23; border-radius: 12px; padding: 14px; }
.boh-detail-hint { color: #7f8a7f; font-size: .875rem; margin: 0; }
.boh-detail-inner h3 { margin: 2px 0 10px; color: #fff; font-size: 1.02rem; font-weight: 600; }
.boh-detail-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.boh-detail-add { margin-top: 8px; }
.boh-lock { font-size: .875rem; color: #7f8a7f; }

@media (max-width: 640px) {
  .boh-head { flex-direction:column; align-items:stretch; }
  .boh-head-actions { justify-content:flex-start; }
  .boh-totals .boh-tot-head { display:none; }
  #bohSection .boh-totals button.boh-tot-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; border:0; border-radius:0; background:transparent; padding:0; color:#7fae5f; font-size:.875rem; font-weight:750; letter-spacing:.07em; text-align:left; text-transform:uppercase; }
  #bohSection .boh-totals button.boh-tot-toggle:hover { background:transparent; }
  .boh-totals .boh-tot-chips { display:none; padding-top:8px; }
  .boh-totals.is-open .boh-tot-chips { display:flex; }
  .boh-tot-caret { font-size:1rem; line-height:1; }
  .boh-room { grid-template-columns: 1fr; grid-template-areas: "left" "back" "right" "center"; }
  .boh-arm.left, .boh-arm.right { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .boh-side-label { flex-basis:100%; text-align:center; margin-bottom:-2px; }
  .boh-rack { width: 132px; }
}
/* gf:eof boh room styles */

/* ── Tier + pricing toggle (production / productmix) ─────────────────────── */
.prod-tier-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.875rem; color:#cfe0c2; margin:4px 0 2px; }
/* Sort weighs the flower, it does not re-grade it, so this reads back rather
   than asking. It names where the tier came from -- this harvest's own call, or
   what the strain normally is -- because the dropdown that used to sit here
   silently overwrote both. */
.prod-tier-read { display:inline-flex; flex-direction:column; align-items:flex-end; font-size:.875rem; font-weight:700; }
.prod-tier-read.top { color:#8fd96a; }
.prod-tier-read.low { color:#d9c26a; }
.prod-tier-read em { font-style:normal; font-weight:400; font-size:.875rem; color:#607a58; letter-spacing:.02em; }
.prod-tier-chip { font-size:.875rem; padding:3px 10px; border-radius:20px; border:1px solid #3a5a1f; background:#17240f; color:#a7e07a; cursor:pointer; font-weight:600; }
.prod-tier-chip.low { border-color:#4a411b; background:#241f10; color:#e6c86a; }
.prod-tier-chip:disabled { opacity:.6; cursor:not-allowed; }
.mix-tier { font-size:.875rem; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:12px; }
.mix-tier.top { background:#17240f; color:#a7e07a; }
.mix-tier.low { background:#241f10; color:#e6c86a; }
.mix-toggle { display:flex; align-items:center; gap:8px; font-size:.875rem; color:#cfe0c2; padding:6px 0 10px; cursor:pointer; }
.mix-toggle input { width:16px; height:16px; accent-color:#4CAF50; }
/* gf:eof tier styles */

/* ── Pricing/demand subsection header (productmix) ───────────────────────── */
.mix-sub { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: #7fae5f; margin: 12px 0 6px; }
/* gf:eof mix-sub */

/* ── Tablet scroll rail (scroll-rail.js) ──────────────────────────────────
   Room grids are wall-to-wall drag targets, so a finger swipe inside one
   moves a plant instead of the page. The rail is a dedicated, oversized
   scroll handle on the right edge, plus a gutter so nothing sits under it. */
:root { --gf-rail-w: 0px; }

/* Touch devices and anything tablet-width get the rail + its gutter. A phone
   is too narrow to give 34px to it, so the gutter scales down to 22px there
   and the rail with it: still a thumb's width of safe scroll (2026-10-06). */
@media (pointer: coarse), (max-width: 1180px) {
  :root { --gf-rail-w: clamp(22px, 6vw, 34px); }
}

body { padding-right: var(--gf-rail-w); }

.gf-scroll-rail {
  position: fixed;
  top: 84px;
  bottom: 96px;
  right: 3px;
  z-index: 1000;
  width: calc(var(--gf-rail-w) - 6px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* .on = the page actually overflows. Kept in layout either way so the rail's
   track height stays measurable (see sync() in scroll-rail.js). */
.gf-scroll-rail.on {
  opacity: 1;
  pointer-events: auto;
}

/* Without the rail (desktop pointer) there is no gutter, so hide it too. */
@media (pointer: fine) and (min-width: 1181px) {
  .gf-scroll-rail { display: none; }
}

.gf-scroll-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(143, 195, 106, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  cursor: grab;
  touch-action: none;
}

.gf-scroll-thumb span {
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
}

.gf-scroll-rail.dragging .gf-scroll-thumb {
  background: var(--accent, #8fc36a);
  cursor: grabbing;
}

/* Fatten the native scrollbars too, as a fallback on the tablet. */
@media (pointer: coarse) {
  * { scrollbar-width: auto; }
  ::-webkit-scrollbar { width: 14px; height: 14px; }
  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(143, 195, 106, 0.5);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-track { background: transparent; }
}
/* gf:eof scroll rail */

/* ── Clone slot dots ──────────────────────────────────────────────────────
   These are buttons, so the global button reset (transparent background,
   outlined) used to win on specificity and every slot rendered as an empty
   dark box — filled ones looked identical to open ones. Filled slots now
   carry the dome's strain color inline (--slot-color) and read as dots. */
.cr-slot,
.cr-focus-panel .cr-slot {
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--slot-color, rgba(143, 195, 106, 0.85));
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 0.08s;
}

.cr-slot.open,
.cr-focus-panel .cr-slot.open {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.cr-slot.dead,
.cr-focus-panel .cr-slot.dead {
  background: rgba(232, 111, 95, 0.32);
  border: 1px solid rgba(232, 111, 95, 0.7);
  box-shadow: none;
}

.cr-slot.rooted,
.cr-focus-panel .cr-slot.rooted {
  background: #34d46a;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(52, 212, 106, 0.14);
}

.cr-slot.selected,
.cr-focus-panel .cr-slot.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
  transform: scale(1.12);
}

.cr-slot:hover:not(:disabled) { transform: scale(1.12); }
.cr-slot:disabled { cursor: default; opacity: 0.7; }

.cr-slot-grid,
.cr-focus-panel .cr-slot-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  max-width: 400px;
}

/* Legend under the slot grid */
.cr-slot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 12px;
}
.cr-slot-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cr-slot-legend i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid transparent;
}
.cr-slot-legend i.open { border: 1px dashed rgba(255,255,255,0.32); }
.cr-slot-legend i.dead { background: rgba(232,111,95,0.32); border-color: rgba(232,111,95,0.7); }
.cr-slot-legend i.rooted { background: #34d46a; border-color: rgba(255,255,255,0.42); }

.cr-slot-selection {
  margin: 14px 0 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.cr-slot-pickers,
.cr-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cr-select-btn {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
}

.cr-selection-count {
  margin: 10px 0;
  color: var(--muted);
  font-size: 14px;
}

.cr-bulk-actions .mr-action-btn {
  flex: 1 1 120px;
}

@media (pointer: coarse) {
  .cr-slot-grid,
  .cr-focus-panel .cr-slot-grid { gap: 8px; }
}
/* gf:eof clone slot dots */

/* ── User administration and daily accountability ───────────────────────── */

/* Pre-roll machine run: batches drawn per line, then what came off. */
.boh-machine { display: block; width: 100%; }
.boh-machine-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.boh-machine-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; background: #11150f; border: 1px solid #1e261e; border-radius: 9px; }
.boh-machine-row span { display: flex; flex-direction: column; line-height: 1.25; color: #cfe0c2; font-size: .875rem; }
.boh-machine-row small { color: #8b948b; font-size: .875rem; }
.boh-machine-row input { width: 72px; flex-shrink: 0; }
.boh-machine-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.boh-machine-out label { display: flex; flex-direction: column; gap: 4px; color: #b9c4b3; font-size: .875rem; font-weight: 700; }
.boh-machine-out select, .boh-machine-out input { width: 100%; }
/* The label is display:flex, which beats the UA [hidden] rule, so the blend
   name field needs its own hide. It only applies to a blend pre-roll. */
.boh-machine-blend[hidden] { display: none; }

/* Drop a bin onto another bin to combine: amber, distinct from a move. */
.boh-slot.drag-combine { outline: 2px dashed #e6c069; outline-offset: -2px; filter: brightness(1.25); }

/* Sublot: name the products hiding inside one packaged line. */
.boh-sublot { display: block; width: 100%; }
.boh-sublot-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.boh-sublot-row { display: flex; gap: 6px; align-items: center; }
.boh-sublot-name-control { display:flex; flex:1; flex-direction:column; gap:6px; min-width:0; }
.boh-sublot-name-control > select, .boh-sublot-name-control > input { box-sizing:border-box; width:100%; min-width:0; }
.boh-sublot-name-control > input[hidden] { display:none; }
.boh-sublot-row input[type="number"] { width: 84px; flex-shrink: 0; }

/* Move product: how much of each line leaves, and where it lands. */
.boh-transfer { display: block; width: 100%; }
.boh-transfer-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.boh-transfer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; background: #11150f; border: 1px solid #1e261e; border-radius: 9px; }
.boh-transfer-row span { display: flex; flex-direction: column; line-height: 1.25; color: #cfe0c2; font-size: .875rem; min-width: 0; }
.boh-transfer-row small { color: #8b948b; font-size: .875rem; }
.boh-transfer-row input { width: 90px; flex-shrink: 0; }
.boh-transfer-dest { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; color: #b9c4b3; font-size: .875rem; font-weight: 700; }
.boh-transfer-dest select { width: 100%; }

/* Manual stock entry: an edge-case tool, deliberately quiet. */
.boh-manual-add { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 0; }
.boh-manual-add small { color: #6f786f; font-size: .875rem; }
.boh-linkish { align-self: flex-start; padding: 0; border: 0; background: none; color: #8b948b; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.boh-linkish:hover { color: #cfe0c2; background: none; }
.boh-manual-field { display: flex; align-items: center; gap: 6px; color: #8b948b; font-size: .875rem; }
.boh-manual-field input { font-size: .875rem; }