/* ==========================================================================
   warehouse-detail.css — page styles for warehouse-detail.html.
   So far only the QR Labels tab lives here; the rest of the page's rules are
   still in its inline <style> block and move when they are next restyled.

   Tokens only; radius never passes 7px; nothing under 10px.
   ========================================================================== */

/* ---------- QR Labels: Settings / Printing ------------------------------------ */
.qrl-sections { margin: 0 0 16px; }
.qrl-sections .subtab svg { width: 16px; height: 16px; }
.qrl-h { margin: 0 0 4px; font-size: 14px; }
.qrl-note { margin: 0 0 12px; font-size: 12px; color: var(--color-text-muted); }
.qrl-reading { font-size: 12px; color: var(--color-text-muted); }
.qrl-reading strong { color: var(--color-text); font-weight: 500; }
.qrl-reading__warn { color: var(--color-warn-ink); font-weight: 600; }

/* A two-sided choice — "Units: Inches [switch] Millimetres". Shape copied from
   orders.css `.ord-sides`: both answers labelled, the one in force told by
   colour and weight, nothing boxed behind the switch. */
.qrl-sides { display: inline-flex; align-items: center; gap: 10px; }
.qrl-sides__lead { font-size: 12px; color: var(--color-text-muted); margin-right: 2px; }
.qrl-sides__opt { font-size: 12px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; cursor: pointer; }
.qrl-sides__opt.is-active { color: var(--color-text); font-weight: 600; }
.qrl-sides.is-off { opacity: .45; pointer-events: none; }

.qrl-units { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 18px; }
.qrl-units .qrl-note { margin: 0; }

/* ---------- Label Designs gallery ---------- */
.qrl-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 4px; }
.qrl-design {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 7px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.qrl-design:hover { border-color: var(--color-border-strong); }
.qrl-design.active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.qrl-design__art { height: 108px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qrl-design__art .qlb:not(.qlb--edge) .qlb-head { -webkit-line-clamp: 1; }
.qrl-design__name { font-size: 13px; font-weight: 600; }
.qrl-design__meta { font-size: 11px; color: var(--color-text-muted); }
.qrl-design__def { font-size: 11px; font-weight: 600; color: var(--color-primary-700); }
/* The add tile is warehouses.html's .wh-add-tile, unchanged — only placed in this grid. */
.qrl-h--group { margin-top: 24px; }
.qrl-designs .wh-add-tile { justify-self: start; align-self: stretch; margin: 0; }
/* Each tile carries its own delete in the corner (the default has none). */
.qrl-design-wrap { position: relative; display: flex; }
.qrl-design-wrap > .qrl-design { flex: 1; }
.qrl-design__del {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--color-control-border); border-radius: 5px; color: var(--color-text-muted); cursor: pointer;
}
.qrl-design__del svg { width: 14px; height: 14px; }
.qrl-design__del:hover { color: var(--color-danger); border-color: var(--color-danger); }
/* The default wears a green check where the others have their delete. */
.qrl-design__mark {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-success-50); border: 1px solid var(--color-success); border-radius: 5px; color: var(--color-success-ink);
}
.qrl-design__mark svg { width: 15px; height: 15px; stroke-width: 3; }

/* ---------- Docked designer: galleries left, designer right ---------- */
.qrl-settings { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 0 24px; align-items: start; }
/* Its own light ground, so it reads as a separate panel beside the galleries, and pinned
   under the top bar so it stays in view while they scroll. Controls inside keep the
   control ground, which still differs from this one (memory 13). */
.qrl-designer {
  position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px);
  display: flex; flex-direction: column; min-width: 0;
  --qrl-designer-bg: #FFF8E1;   /* light yellow, the designer's own ground */
  padding: 16px; background: var(--qrl-designer-bg);
  border: 1px solid var(--color-border); border-radius: 7px;
}
.qrl-designer__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.qrl-designer__head .btn { flex: none; }
.qrl-del-desc { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
.qrl-designer__head .qrl-note { margin: 0; }
.qrl-designer__body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
/* The preview stays at the top of the designer while its form scrolls under it. */
.qrl-designer .qrl-preview { position: sticky; top: 0; z-index: 2; margin-bottom: 18px; box-shadow: 0 18px 0 var(--qrl-designer-bg); }
/* The dark themes get a deep warm ground instead, so the panel does not blaze. */
[data-theme="evening"] .qrl-designer, [data-theme="elegant"] .qrl-designer { --qrl-designer-bg: #2A2618; }
/* Drag handles over the preview: invisible until hovered, then a dashed outline with a corner grip. */
.qrl-pv { position: relative; }
.qrl-pv-handles { position: absolute; inset: 0; pointer-events: none; }
.qrl-hit { position: absolute; pointer-events: auto; touch-action: none; border: 1px dashed transparent; border-radius: 2px; }
.qrl-hit--move { cursor: move; }
.qrl-pv:hover .qrl-hit { border-color: var(--color-primary); }
.qrl-hit__corner {
  position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; cursor: nwse-resize;
  background: #fff; border: 1.5px solid var(--color-primary); border-radius: 2px; opacity: 0;
}
.qrl-pv-handles.is-flip [data-qrl-hit="qr"] .qrl-hit__corner { right: auto; left: -5px; cursor: nesw-resize; }
.qrl-pv:hover .qrl-hit__corner { opacity: 1; }
.qrl-pv-hint { font-size: 11px; color: var(--color-text-muted); text-align: center; }
.qrl-pv-reset { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--color-primary-700); cursor: pointer; }
.qrl-row { margin-top: 16px; }
.qrl-row:first-child { margin-top: 0; }
.qrl-row > label:not(.switch-field), .qrl-row__label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.qrl-name { width: 260px; max-width: 100%; }
.qrl-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.qrl-logo-thumb { height: 28px; padding: 3px 6px; background: #fff; border: 1px solid var(--color-control-border); border-radius: 4px; }
.qrl-logo-file { display: none; }

.qrl-sizes { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.qrl-size {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; min-width: 84px;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 7px;
  font: inherit; color: inherit; cursor: pointer;
}
.qrl-size:hover { border-color: var(--color-border-strong); }
.qrl-size.active { border-color: var(--color-primary); background: var(--color-primary-50); }
.qrl-size .shape-box { height: 22px; display: flex; align-items: center; }
.qrl-size .shape { display: inline-block; background: #fff; border: 1.5px solid var(--color-border-strong); border-radius: 2px; }
.qrl-size.active .shape { border-color: var(--color-primary); }
.qrl-size .dim { font-size: 13px; font-weight: 600; }
.qrl-size .kind { font-size: 11px; color: var(--color-text-muted); }
.qrl-size--custom .input { width: 54px; padding: 3px 5px; background: #fff; }

/* Line builder: one row per printed line, a dashed New Line drop row, then the spare fields. */
.qrl-lines { display: flex; flex-direction: column; gap: 6px; }
.qrl-line {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 8px;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 7px;
}
.qrl-line.is-over { border-color: var(--color-primary); background: var(--color-primary-50); }
.qrl-line--new { border-style: dashed; border-color: var(--color-border-strong); background: transparent; }
.qrl-line--off { background: transparent; border-color: transparent; }
.qrl-line__n { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.qrl-line__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qrl-line__hint { font-size: 12px; color: var(--color-text-subtle); }
.qrl-fld { display: inline-flex; cursor: grab; }
.qrl-fld.is-dragging { opacity: .4; }
.qrl-fld .fchip { padding: 5px 10px; cursor: grab; }
.qrl-fld:has(.qrl-bold) .fchip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.qrl-fld .qrl-bold:not(:last-child) { border-radius: 0; }
/* Point-size stepper: the last piece of a placed field's chip. */
.qrl-pt {
  display: inline-flex; align-items: center;
  background: var(--color-control); border: 1px solid var(--color-border-strong); border-left: 0; border-radius: 0 5px 5px 0;
}
.qrl-pt button { width: 22px; align-self: stretch; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--color-text-muted); cursor: pointer; }
.qrl-pt button:hover { color: var(--color-primary-700); }
.qrl-pt__v { min-width: 30px; text-align: center; font-size: 12px; color: var(--color-text); }
/* Bold toggle: rides the chip's right edge as one piece with it. */
.qrl-bold {
  padding: 0 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--color-text-muted); background: var(--color-control);
  border: 1px solid var(--color-border-strong); border-left: 0; border-radius: 0 5px 5px 0;
}
.qrl-bold:hover { color: var(--color-primary-700); }
.qrl-bold[aria-pressed="true"] { color: var(--color-primary-700); background: var(--color-primary-50); }

.qrl-preview {
  border: 1px dashed var(--color-border-strong); border-radius: 7px; padding: 16px; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
  background: var(--color-control);
}
.qrl-preview .qrl-note { margin: 0; }

/* ---------- One printed label ----------------------------------------------------
   Geometry comes from JS as custom properties (--w/--h label size, --pad side and --padv
   top/bottom padding, --gap after the QR,
   --fs2 header-band text, --lh logo height) — the label is drawn to scale. Field text sizes
   are inline, per field, in points converted to the drawing scale. */
.qlb {
  box-sizing: border-box; width: var(--w); height: var(--h); padding: var(--padv) var(--pad); flex: none;
  display: flex; align-items: center; gap: var(--gap); overflow: hidden;
  background: #fff; color: #111; border: 1px solid var(--color-border-strong); border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10); line-height: 1.15;
}
.qlb .qrl-qr { flex: none; }
.qlb-logo { height: var(--lh); width: auto; flex: none; }
.qlb-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
/* Weight is per field (`.qlb-b`), not per line. */
.qlb-head { font-weight: 400; }
.qlb-b { font-weight: 700; }
/* Under the headline: lighter and smaller — a label has one thing you find it
   by, and the rest is what you check once you are there. */
.qlb-sub { font-weight: 400; color: #444; }
.qlb-head, .qlb-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Off the edge strip the headline may take two lines before it gives up — a
   material name is what the label is read for. */
.qlb:not(.qlb--edge) .qlb-head { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qlb--qr-right, .qlb--qr-right .qlb-body { flex-direction: row-reverse; }

/* Edge strip: QR, one or two lines, logo at the far end. */
.qlb--edge .qlb-text { gap: 0; }

/* Side-by-side / Rack: the logo rides the text column, top or bottom. */
.qlb--side .qlb-text { align-self: stretch; justify-content: center; }
.qlb--logo-top .qlb-text > .qlb-logo { order: -1; margin-bottom: 4px; }
.qlb--logo-bottom .qlb-text > .qlb-logo { order: 9; margin-top: auto; }
.qlb-text > .qlb-logo { align-self: flex-start; }

/* Stacked (square or portrait label, and Big QR): QR on top, the lines under it. */
.qlb--stack { flex-direction: column; justify-content: center; }
.qlb--stack .qlb-text { flex: none; width: 100%; }
.qlb--stack.qlb--logo-top > .qlb-logo { order: -1; }
.qlb--stack.qlb--logo-bottom > .qlb-logo { order: 9; }
.qlb--stack .qlb-sub { white-space: normal; }

/* Header band: logo (or company name) over a rule, then QR + text. */
.qlb--band { flex-direction: column; align-items: stretch; gap: var(--padv); }
.qlb-band { flex: none; display: flex; align-items: center; gap: 6px; padding-bottom: calc(var(--padv) * .6); border-bottom: 1.5px solid #111; font-size: var(--fs2); font-weight: 700; }
.qlb-body { flex: 1; min-height: 0; display: flex; align-items: center; gap: var(--gap); }

/* Text Align, chosen per design. */
.qlb--align-left .qlb-text { align-items: flex-start; text-align: left; }
.qlb--align-center .qlb-text { align-items: center; text-align: center; }
.qlb--align-center .qlb-text > .qlb-logo { align-self: center; }
.qlb--align-right .qlb-text { align-items: flex-end; text-align: right; }
.qlb--align-right .qlb-text > .qlb-logo { align-self: flex-end; }

/* ---------- Printing ---------- */
.qrl-print-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 16px; }
.qrl-print-bar .qrl-sides { height: 34px; }
.qrl-print-bar .field { margin: 0; }
#qrl-design-sel { width: 240px; }
#qrl-printer { width: 250px; }
#qrl-copies { width: 70px; }
.qrl-print-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.qrl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.qrl-filter .subtabs { margin: 0; }
.qrl-filter .switch-field { margin-left: auto; }
.qrl-strip {
  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 12px;
  max-height: 600px; overflow: auto; padding: 14px; min-height: 96px;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: 7px;
}
.qrl-strip-empty { font-size: 13px; color: var(--color-text-muted); }
.qrl-print-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.qrl-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-muted); }

/* Compact one-line rows. (.main must fight app.css's global
   `.main { display:flex; flex-direction:column }`, which is meant for the layout <main>.) */
#qrl-table { table-layout: fixed; min-width: 560px; }
#qrl-table .qrl-c-pick { width: 6%; }
#qrl-table .qrl-c-loc { width: 32%; }
#qrl-table .qrl-c-a { width: 22%; }
#qrl-table .qrl-c-b { width: 22%; }
#qrl-table .qrl-c-status { width: 18%; }
#qrl-table tbody td { padding-top: 6px; padding-bottom: 6px; }
#qrl-table tbody td .main { display: inline; font-weight: 500; }
#qrl-table .qrl-mat { margin-left: 8px; font-size: 11px; color: var(--color-text-muted); }
#qrl-table .qrl-caret { display: inline-flex; vertical-align: middle; margin-right: 4px; padding: 0; border: 0; background: none; color: var(--color-text-muted); cursor: pointer; }
#qrl-table .qrl-caret svg { width: 15px; height: 15px; transition: transform 120ms; }
#qrl-table tr.is-open .qrl-caret svg { transform: rotate(90deg); }
#qrl-table tr.qrl-slab td.col-loc { padding-left: 34px; }
#qrl-table .qrl-count { font-size: 12px; color: var(--color-text-muted); }

@media (max-width: 1100px) {
  .qrl-print-grid, .qrl-settings { grid-template-columns: 1fr; }
  .qrl-designer { position: static; max-height: none; margin-top: 20px; }
  .qrl-designer__body { overflow: visible; padding-right: 0; }
}
@media (max-width: 768px) {
  .qrl-filter .switch-field { margin-left: 0; }
  #qrl-design-sel, #qrl-printer { width: 100%; }
  .qrl-print-bar .field { flex: 1 1 100%; }
}

/* An empty warehouse (?wh=WH-DAL-03, the demo's Overflow Yard, opened to be
   archived): there is no yard to draw, so one card says so in place of the tabs,
   which hold Main Slab Yard's racks and slabs. */
body[data-wh-empty] [data-tabs],
body[data-wh-empty] [data-tab-panel] { display: none; }
.wh-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: var(--color-text-subtle); text-align: center; }
.wh-empty svg { width: 32px; height: 32px; }
.wh-empty h3 { margin: 0; color: var(--color-text); }
.wh-empty p { margin: 0; }