@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500&display=swap');

:root {
  --cream: #F2EFE9;
  --red: #B8272C;
  --red-dark: #9B1F23;
  --dark: #1a1a1a;
  --border: #D8D4CC;
  --grey-text: #888;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--cream); font-family: 'Barlow', sans-serif; color: var(--dark); min-height: 100vh; }

/* ── TOPBAR ── */
.topbar { background: var(--cream); border-bottom: 1px solid var(--border); padding: 0 32px; height: 52px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.menu-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--dark); transition: all 0.2s; }
.menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.wordmark { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; color: var(--dark); text-transform: uppercase; }
.wordmark em { color: var(--red); font-style: normal; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #8B4513; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* ── NAV DRAWER ── */
.nav-overlay { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; z-index: 15; background: rgba(242,239,233,0.5); display: none; }
.nav-overlay.open { display: block; }
.nav-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: 260px; background: var(--dark); transform: translateX(-100%); transition: transform 0.22s ease; display: flex; flex-direction: column; }
.nav-overlay.open .nav-drawer { transform: translateX(0); }
.nav-header { padding: 20px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav-header-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.nav-header-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.nav-header-title em { color: var(--red); font-style: normal; }
.nav-links { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-section-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 12px 20px 6px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 20px; cursor: pointer; border-left: 3px solid transparent; transition: background 0.1s; }
.nav-link:hover { background: rgba(255,255,255,0.06); }
.nav-link.active { background: rgba(184,39,44,0.15); border-left-color: var(--red); }
.nav-link-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.nav-link.active .nav-link-icon { background: rgba(184,39,44,0.3); }
.nav-link-text { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.8); }
.nav-link.active .nav-link-text { color: #fff; }
.nav-link-sub { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.nav-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }
.nav-footer { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 11px; color: rgba(255,255,255,0.3); }

/* ── PIN OVERLAY ── */
.pin-overlay { position: fixed; inset: 0; background: rgba(242,239,233,0.97); display: flex; align-items: center; justify-content: center; z-index: 100; }
.pin-card { background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 28px 24px; width: 260px; text-align: center; }
.pin-card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dark); margin-bottom: 4px; }
.pin-accent { width: 32px; height: 3px; background: var(--red); margin: 0 auto 14px; }
.pin-card-sub { font-size: 12px; color: var(--grey-text); margin-bottom: 20px; }
.pin-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; transition: background 0.12s; }
.pin-dot.filled { background: var(--red); border-color: var(--red); }
.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.pin-btn { background: var(--cream); border: 1px solid var(--border); border-radius: 3px; padding: 11px; font-family: 'Barlow', sans-serif; font-size: 17px; font-weight: 500; color: var(--dark); cursor: pointer; }
.pin-btn:hover { background: #E8E4DC; }
.pin-btn:active { transform: scale(0.95); }
.pin-error { font-size: 12px; color: var(--red); margin-top: 8px; min-height: 16px; }

/* ── PAGE LAYOUT ── */
.back-row { display: flex; align-items: center; gap: 8px; padding: 10px 32px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--cream); }
.back-row:hover { background: #EAE6DF; }
.back-row-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.page-header { padding: 20px 32px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: space-between; }
.page-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.04em; color: var(--dark); text-transform: uppercase; }
.page-subtitle { font-size: 12px; color: #666; margin-top: 2px; }
.content { padding: 24px 32px; }
.section-head { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-text); margin-bottom: 12px; margin-top: 20px; }
.section-head:first-child { margin-top: 0; }
.footer { padding: 12px 32px; border-top: 1px solid var(--border); background: var(--cream); }
.footer-txt { font-size: 12px; color: var(--grey-text); }

/* ── TILES ── */
/* max-width + margin:auto keeps tiles a sensible size and centered instead
   of stretching edge-to-edge (and sitting flush left in the leftover
   space) on a widescreen monitor — same width fix already applied to
   .data-table-wrap and .submissions-grid elsewhere in the app. */
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 auto 4px; max-width: 900px; }
.tile-grid-wide { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin: 0 auto 4px; max-width: 1100px; }
.tile { background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 18px 16px; cursor: pointer; position: relative; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; min-height: 100px; display: flex; flex-direction: column; gap: 6px; }
.tile:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(184,39,44,0.1); transform: translateY(-1px); }
.tile:active { transform: scale(0.98); }
.tile.soon { opacity: 0.45; cursor: default; }
.tile.soon:hover { border-color: var(--border); box-shadow: none; transform: none; }
.tile.soon:active { transform: none; }
/* Icon badge — replaces the old plain thin accent bar with something that
   gives each tile a bit of visual identity instead of a flat list of text. */
.tile-icon { width: 34px; height: 34px; border-radius: 8px; background: #FBEAEB; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 4px; line-height: 1; }
.tile-icon.grey { background: #F0F0F0; filter: grayscale(1); opacity: 0.7; }
.tile-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dark); line-height: 1.2; }
.tile-desc { font-size: 11px; color: #777; line-height: 1.4; }
.tile-arrow { position: absolute; bottom: 10px; right: 12px; color: var(--red); font-size: 16px; font-weight: 700; }
.soon-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #aaa; margin-top: auto; }

/* ── PAGES (hide/show) ── */
.page { display: none; }
.page.active { display: block; }

/* ── FORM LAYOUT (sidebar + preview) ── */
.layout { display: flex; min-height: calc(100vh - 120px); }

.sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 18px; background: var(--cream); display: flex; flex-direction: column; gap: 0; }
.field { margin-bottom: 10px; }
.field label { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: #555; margin-bottom: 4px; }
.field select, .field input[type="date"] { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px; background: #fff; font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--dark); height: 32px; }
.field select:focus, .field input:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: var(--red); }

.mode-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mode-btn { background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 9px 10px; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; }
.mode-btn:hover { border-color: var(--red); }
.mode-btn.active { border: 2px solid var(--red); background: #FDF5F5; }
.mode-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #ccc; flex-shrink: 0; background: #fff; }
.mode-btn.active .mode-dot { border-color: var(--red); background: var(--red); }
.mode-btn-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--dark); display: block; }
.mode-btn-desc { font-size: 11px; color: #777; display: block; }

.divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.summary-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.chip { flex: 1; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: 3px; padding: 7px 8px; font-size: 10px; color: #666; display: none; }
.chip.visible { display: block; }
.chip strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 1px; }

.print-btn { width: 100%; background: var(--red); color: #fff; border: none; border-radius: 3px; padding: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.print-btn:hover { background: var(--red-dark); }
.print-btn:disabled { background: #ccc; color: #888; cursor: default; }

.qz-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.qz-btn { flex: 1; background: var(--dark); color: #fff; border: none; border-radius: 3px; padding: 7px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.qz-btn:disabled { background: #ccc; color: #888; cursor: default; }

.status { border-radius: 3px; padding: 7px 10px; font-size: 11px; margin-bottom: 8px; border: 1px solid; display: none; line-height: 1.4; }
.status.visible { display: block; }
.st-info { background: #E3F2FD; border-color: #90CAF9; color: #1565C0; }
.st-ok { background: #E8F5E9; border-color: #A5D6A7; color: #2E7D32; }
.st-err { background: #FFEBEE; border-color: #FFCDD2; color: #B71C1C; }
.st-warn { background: #FFF8E1; border-color: #FFE082; color: #8D6E00; font-weight: 600; }

.main-content { flex: 1; padding: 24px; overflow-y: auto; }
.preview-head { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-text); margin-bottom: 16px; }

.shop-section { margin-bottom: 28px; }
.shop-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dark); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--dark); display: flex; align-items: baseline; gap: 10px; }
.shop-meta { font-size: 12px; color: var(--grey-text); font-weight: 400; font-family: 'Barlow', sans-serif; text-transform: none; letter-spacing: 0; }

.labels-grid { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── THE LABEL CARD (matches EZPL layout 1:1 so preview == print) ── */
.label-card {
  width: 440px; height: 240px;
  background: #fff; border: 1.5px solid var(--dark); border-radius: 2px;
  position: relative; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Plain bold black text on a thin divider, not a solid reversed-out bar —
   a heavy black band doesn't print well on thermal stock, per feedback
   (see also the Ingredients Storage label). */
.lc-header { position: absolute; top: 0; left: 0; right: 0; height: 46px; background: #fff; border-bottom: 2px solid var(--dark); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.lc-shop { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dark); }
.lc-date { font-size: 12px; color: var(--grey-text); }
.lc-body { position: absolute; top: 50px; left: 0; right: 0; bottom: 38px; padding: 6px 14px 0; }
.lc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--cream); }
.lc-row:last-child { border-bottom: none; }
.lc-name { font-size: 13px; color: var(--dark); flex: 1; padding-right: 10px; line-height: 1.2; }
.lc-qty { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; color: var(--red); min-width: 24px; text-align: right; flex-shrink: 0; }
.lc-footer { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.lc-tray { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dark); }
.lc-tray em { color: var(--red); font-style: normal; }
.lc-spaces { font-size: 11px; color: #aaa; }

.empty-state { text-align: center; padding: 60px 24px; color: #aaa; font-size: 13px; }

/* ── INGREDIENT LABEL (reuses .label-card/.lc-header/.lc-shop frame) ── */
.ing-best-before { font-size: 17px; font-weight: 600; color: var(--dark); }
.ing-body { position: absolute; top: 46px; left: 0; right: 0; bottom: 52px; padding: 4px 14px; display: flex; align-items: center; overflow: hidden; }
.ing-content { width: 100%; line-height: 1.28; color: var(--dark); }
.ing-content u { text-decoration: none; font-weight: 700; } /* allergens: bold, not underlined, on screen/print */
.ing-footer { position: absolute; bottom: 0; left: 0; right: 0; height: 52px; border-top: 1px solid var(--border); padding: 4px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; }
.ing-storage { font-size: 10.5px; font-weight: 400; color: var(--dark); }
.ing-instruction { font-size: 9.5px; font-weight: 400; color: #666; line-height: 1.25; }

/* ── BAGUETTES / FOCACCIA — same header frame, but no ingredients-list
   body (not on this label), so the footer expands to fill the rest of
   the card instead of being confined to a 52px strip. ── */
.label-card.no-body .ing-footer { top: 46px; bottom: 0; height: auto; justify-content: flex-start; gap: 8px; padding: 12px 14px; }
.label-card.no-body .ing-storage { font-size: 12px; }
.label-card.no-body .ing-instruction { font-size: 12px; color: var(--dark); }

/* 60mm x 45mm variant (e.g. Ingredients 60x45) — same layout, smaller card.
   Text sizes shrink less than the card itself: legibility has a floor, so a
   smaller label just leaves less breathing room, which fitText() absorbs. */
.label-card.size-60x45 { width: 240px; height: 180px; }
/* Name and best-before stack (one line each) instead of sharing a row —
   side by side they fought for width and wrapped. */
.label-card.size-60x45 .lc-header { height: 46px; padding: 5px 10px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.label-card.size-60x45 .lc-shop { font-size: 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-card.size-60x45 .ing-best-before { font-size: 10px; }
.label-card.size-60x45 .ing-body { top: 46px; bottom: 46px; padding: 3px 10px; }
.label-card.size-60x45 .ing-footer { height: 46px; padding: 3px 10px; gap: 1px; }
.label-card.size-60x45 .ing-storage { font-size: 9px; }
.label-card.size-60x45 .ing-instruction { font-size: 8px; }

/* 49mm round variant — a rectangular header/footer bar would get clipped
   into a lens shape at a circle's edge, so this is a centred, stacked
   layout instead of the absolute-positioned header/body/footer bars used
   by the rectangular sizes, with generous padding to keep text off the curve. */
.round-label {
  width: 196px; height: 196px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--dark); box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 24px; box-sizing: border-box; overflow: hidden; flex-shrink: 0;
}
.rl-top { flex-shrink: 0; }
.rl-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--dark); line-height: 1.15; }
.rl-best-before { font-size: 9px; font-weight: 600; color: var(--red); margin-top: 2px; }
.rl-body { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; overflow: hidden; padding: 3px 0; }
.rl-content { width: 100%; line-height: 1.22; color: var(--dark); }
.rl-content u { text-decoration: none; font-weight: 700; }
.rl-footer { flex-shrink: 0; width: 100%; }
.rl-storage { font-size: 7.5px; font-weight: 400; color: var(--dark); }
.rl-instruction { font-size: 7px; font-weight: 400; color: #666; line-height: 1.15; }

/* 88mm round tub label (Recipe Batch Files — Bakery) — same centred/stacked
   .round-label layout as the 49mm round Ingredients label, just scaled up
   (88/49 ≈ 1.8×) since it's a noticeably bigger physical label. */
.round-label.tub { width: 352px; height: 352px; padding: 46px 42px; }
.round-label.tub .rl-name { font-size: 22px; }
.round-label.tub .rl-best-before { font-size: 15px; margin-top: 4px; }
.round-label.tub .rl-storage { font-size: 13px; }
.round-label.tub .rl-instruction { font-size: 12px; line-height: 1.2; }

/* 52mm x 145mm variant (Flow Wrapping) — narrow and tall. Shown upright at
   its natural dimensions; the 90° clockwise rotation is a print-time-only
   concern (printRotationClockwise in config/index.js), not applied here.
   With this much headroom, the body aligns to the top rather than
   centering, so a short ingredient list doesn't float in empty space. */
.label-card.size-52x145 { width: 208px; height: 580px; }
.label-card.size-52x145 .lc-header { height: 50px; padding: 6px 10px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.label-card.size-52x145 .lc-shop { font-size: 14px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-card.size-52x145 .ing-best-before { font-size: 10px; }
.label-card.size-52x145 .ing-body { top: 50px; bottom: 62px; padding: 8px 10px; align-items: flex-start; }
.label-card.size-52x145 .ing-footer { height: 62px; padding: 6px 10px; gap: 2px; }
.label-card.size-52x145 .ing-storage { font-size: 9.5px; }
.label-card.size-52x145 .ing-instruction { font-size: 8.5px; }

.ing-product-list { max-height: 365px; overflow-y: auto; border: 1px solid var(--border); border-radius: 3px; background: #fff; }
.ing-product-list table { width: 100%; border-collapse: collapse; }
.ing-product-list td { padding: 7px 10px; font-size: 12px; color: var(--dark); cursor: pointer; border-bottom: 1px solid var(--cream); }
.ing-product-list tr:last-child td { border-bottom: none; }
.ing-product-list tr:hover td { background: #FDF5F5; }
.ing-product-list tr.selected td { background: #FDF5F5; color: var(--red); font-weight: 600; }
.ing-product-list td.ing-product-empty { color: #aaa; cursor: default; text-align: center; padding: 16px 10px; }
.ing-product-list td.ing-product-empty:hover { background: none; }

/* ── MULTI-COLUMN DATA TABLE (GRN deliveries / items) ── */
/* max-width stops columns stretching into huge gaps with only 3-7 of them
   to fill a full-width ultrawide-monitor .main-content — table stays a
   sane reading width and left-aligned instead of full-bleed. */
.data-table-wrap { max-width: 900px; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 3px; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { position: sticky; top: 0; background: var(--cream); text-align: left; padding: 7px 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #888; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 8px 10px; color: var(--dark); border-bottom: 1px solid var(--cream); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover td { background: #FDF5F5; }
.data-table tbody tr.selected td { background: #FDF5F5; color: var(--red); font-weight: 600; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--dark); }
.data-table th.sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 3px solid transparent; border-right: 3px solid transparent; }
.data-table th.sortable.sorted-asc::after { border-bottom: 4px solid var(--red); }
.data-table th.sortable.sorted-desc::after { border-top: 4px solid var(--red); }

/* ── SHOP NAMES quantity buttons (1/2/4/6) — 2x2 grid, bigger than the
   normal .print-btn so they're easy to hit for a quick reprint. ── */
.qty-print-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.qty-print-btn { margin-bottom: 0; padding: 20px 0; font-size: 26px; }

/* ── ORDER SUBMISSIONS (pure data view, no printing) ── */
.submissions-controls { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
/* max-width caps each card at a comfortable reading width instead of
   stretching to fill a widescreen monitor — same fix already applied to
   .data-table-wrap elsewhere in the app. */
.submissions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); gap: 20px; max-width: 1080px; }
.submission-card { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 16px 18px; }
.submission-card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dark); margin-bottom: 4px; }
.submission-card-count { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 10px; margin-bottom: 14px; }
.submission-card-count.count-missing { background: #FFEBEE; color: #B71C1C; }
.submission-card-count.count-complete { background: #E8F5E9; color: #2E7D32; }
.submission-section-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #888; margin: 14px 0 6px; }
.submission-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cream); font-size: 13px; color: var(--dark); }
.submission-row:last-child { border-bottom: none; }
.submission-row .badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.badge-missing { background: #FFEBEE; color: #B71C1C; }
.submission-row .submitted-by { font-size: 11.5px; color: #2E7D32; font-weight: 600; flex-shrink: 0; }
.submission-empty { font-size: 12px; color: #aaa; padding: 6px 0; }
.data-table td.data-table-empty { color: #aaa; cursor: default; text-align: center; padding: 16px 10px; }
.data-table td.data-table-empty:hover { background: none; }

/* Secondary action, lighter weight than .print-btn/.qz-btn so it doesn't
   compete with them — sized to its content, not a full-width block. */
.search-btn { display: inline-block; background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 7px 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dark); cursor: pointer; margin-bottom: 8px; }
.search-btn:hover { border-color: var(--red); color: var(--red); }

/* ── GRN LABEL (56mm x 32mm) ── */
.grn-label {
  width: 224px; height: 128px;
  background: #fff; border: 1.5px solid var(--dark); border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); flex-shrink: 0;
  padding: 6px 8px; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column;
}
.grn-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1.1; color: var(--dark); max-height: 26px; overflow: hidden; }
.grn-meta { font-size: 9px; color: var(--dark); margin-top: 2px; line-height: 1.2; }
.grn-barcode { margin-top: auto; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* No fixed width/height here — JsBarcode sizes its own SVG correctly from
   its width/height options; forcing width:100% independently of height
   stretched it out of proportion ("squashed" bars). max-width only stops it
   overflowing the card if a long code renders wider than the label. */
.grn-barcode svg { max-width: 100%; height: auto; }

/* Fillings Room label — same 56x32mm box as .grn-label, no barcode: name
   top, a large use-by date as the focal point in the middle, small batch
   number pinned to the bottom. justify-content:space-between does the
   vertical distribution since there are exactly 3 stacked children. */
/* Extra 3mm (~12px at this card's 4px/mm scale) of top/bottom padding on
   top of .grn-label's base 6px — shifts the name down from the top edge
   and pulls the batch number up from the bottom edge, per feedback that
   both sat too close to the edges. */
.filling-label { justify-content: space-between; align-items: center; text-align: center; padding-top: 18px; padding-bottom: 18px; }
/* Bigger, with a divider underneath to make it stand out (per feedback). */
.filling-name { width: 100%; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.15; color: var(--dark); border-bottom: 2px solid var(--dark); padding-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filling-date-group { display: flex; flex-direction: column; align-items: center; }
.filling-usebylabel { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #888; }
.filling-date { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; color: var(--dark); }
.filling-batch { font-size: 12px; color: #888; letter-spacing: 0.03em; }

/* Coffee Roasters despatch label — same 56x32mm box as .grn-label, but a
   row layout (logo left, two text lines right) instead of the base
   class's column stack. */
.coffee-despatch-label { flex-direction: row; align-items: center; gap: 10px; }
.coffee-logo { width: 40px; height: 40px; flex-shrink: 0; }
.coffee-lines { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.coffee-line { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.15; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── GNR SHOP/BAKERY NAME LABEL (110mm x 60mm, same size as .label-card) ── */
.label-card.gnr { display: flex; flex-direction: column; }
.gnr-shop-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; text-align: center; padding: 14px 16px 8px; font-size: 28px; line-height: 1.15; color: var(--dark); }
.gnr-divider { border-top: 2px solid var(--dark); margin: 0 16px; }
.gnr-columns { display: flex; flex: 1; }
.gnr-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; min-width: 0; }
.gnr-col-divider { width: 2px; background: var(--border); margin: 12px 0; }
.gnr-col-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: #888; text-transform: uppercase; }
.gnr-col-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 88px; line-height: 1; color: var(--red); }

/* Stronger variant of .section-head for a heading directly above print
   buttons — the default muted grey/600-weight label reads too weak sitting
   right above a bold red button. */
.section-head-strong { color: var(--dark); font-weight: 700; font-size: 12px; }

/* 2x2 grid of red print-quantity buttons (e.g. x1/x2/x4/x6) — bigger and
   red like .print-btn, instead of the small dark 4-across .qz-btn row. */
.btn-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.print-btn-sm { background: var(--red); color: #fff; border: none; border-radius: 3px; padding: 16px 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.print-btn-sm:hover { background: var(--red-dark); }
.print-btn-sm:disabled { background: #ccc; color: #888; cursor: default; }

/* ── INGREDIENTS STORAGE LABEL (110mm x 60mm, same size as .label-card) ──
   Mirrors buildStorageLabelZPL: an optional dark header bar (white,
   reversed text, ^FR) showing "{TYPE}: {DATE}", then the free text
   filling/centered in whatever height remains. */
.label-card.storage { display: flex; flex-direction: column; }
/* Plain bold black text, not a reversed-out bar — a solid dark band doesn't
   print well on thermal stock, per feedback. */
.storage-header { color: var(--dark); text-align: center; padding: 12px 16px 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 24px; line-height: 1.2; }
.storage-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 20px; overflow: hidden; }
.storage-text { width: 100%; text-align: center; font-family: 'Barlow', sans-serif; font-weight: 600; color: var(--dark); line-height: 1.25; word-wrap: break-word; font-size: 32px; }

.type-grid .mode-btn-desc { font-size: 10.5px; }

/* ── GNR WEEKEND RUNS (110mm x 60mm) — reuses .label-card/.lc-header ── */
/* Date is important (drivers need to confirm it at a glance) — bold and
   bigger than the plain .lc-date it starts from, not just plain grey text. */
.wr-date { font-weight: 700; color: var(--dark); }
.wr-date-lg { font-size: 17px; }

.wr-summary-body { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; display: flex; }
.wr-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; min-width: 0; }
.wr-col-divider { width: 2px; background: var(--border); margin: 14px 0; }
.wr-col-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; color: #888; text-transform: uppercase; }
.wr-col-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 52px; line-height: 1; color: var(--red); }

.wr-detail-body { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; padding: 4px 12px 6px; display: flex; flex-direction: column; overflow: hidden; }
.wr-detail-headrow, .wr-detail-row { display: flex; align-items: center; gap: 4px; }
.wr-detail-headrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #888; border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 2px; }
.wr-detail-rows { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.wr-detail-row { border-bottom: 1px solid var(--cream); }
/* Width is set inline per round (JS, sized to that round's longest shop
   name) so the table stays compact instead of stretching to the label's
   edge — this is just a sane fallback before that runs. */
.wr-cell-name { flex: 0 0 100px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dark); }
.wr-cell-qty { width: 40px; flex-shrink: 0; text-align: right; color: var(--dark); }
.wr-cell-page { flex: 1; text-align: right; padding-right: 2px; }
/* margin-top:auto pins this to the bottom of the flex column regardless of
   how many actual rows are above it (a short final page still gets its
   total in the same spot as a full one). The border/bold styling lives on
   .wr-total-inner (name+4 qty cells only, width set inline in JS to the
   table width) rather than the row itself, so the divider line doesn't
   stretch into the blank space the PAGE X OF Y marker (.wr-cell-page) sits
   in, matching the ZPL's `^GB${tableW}` divider. On a non-final page the
   name/qty cells are individually visibility:hidden (see
   gnr-weekend-runs.html) so the row's height is still reserved but nothing
   prints except that page marker. */
.wr-detail-total { border-bottom: none; font-weight: 700; margin-top: auto; }
.wr-total-inner { display: flex; align-items: center; gap: 4px; flex-shrink: 0; border-top: 2px solid var(--dark); padding-top: 3px; }

/* ── OFFICE: DESPATCH LABELS (pre-cut A4 sheet labels, 63.5x33.9mm,
   3 across x 8 down — printed through the browser's own print dialog on a
   standard Windows printer, NOT a thermal/QZ label like every other form
   in this app; see despatch-labels.html. Grey header rows in the on-screen
   table preview which rows are per-product summaries vs per-customer. ── */
.data-table tbody tr.despatch-header td { background: var(--border); font-weight: 600; }
.data-table tbody tr.despatch-header:hover td { background: var(--border); }

/* .print-only is hidden on screen and shown only for print — the standard
   "print just this element" technique: everything else goes
   visibility:hidden (keeping layout, so nothing reflows) while this
   container is pulled out to the page's top-left corner. @page margin:0
   is essential — the label positions below already bake in the exact
   margins from the sheet's own Label Properties dialog, so any browser-
   added page margin on top of that would shift every label off its
   pre-cut sticker. */
.print-only { display: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
@media print {
  @page { size: A4; margin: 0; }
  body * { visibility: hidden; }
  .print-only, .print-only * { visibility: visible; }
  .print-only { display: block; position: absolute; top: 0; left: 0; }
}

.despatch-sheet { position: relative; width: 210mm; height: 297mm; page-break-after: always; }
.despatch-sheet:last-child { page-break-after: auto; }
/* print-color-adjust:exact is the fix for "the background colour didn't
   print" — Chrome/Edge/Firefox all default to skipping background-color
   in a print job unless told otherwise (historically behind a "Background
   graphics" checkbox in the print dialog's more-settings panel); this
   property forces it regardless of that setting, so the header/detail
   distinction survives without the user needing to find and tick anything. */
.despatch-label-slot { position: absolute; box-sizing: border-box; overflow: hidden; padding: 2mm 3mm; font-family: 'Barlow', sans-serif; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.despatch-label-slot.header { background: #D8D4CC; }
.dl-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5pt; line-height: 1.15; color: #000; }
.dl-line { font-size: 9pt; color: #000; margin-top: 1.5mm; line-height: 1.3; }

/* ── OFFICE: BUN TICKETS (a different pre-cut sheet from Despatch Labels —
   105x99mm, 2 across x 3 down, zero margins/gaps; see bun-tickets.html).
   Bigger label than Despatch's, so there's room for a proper grey header
   band (shop name, then rule name + date), up to 4 products with
   quantities, and a tray label pinned to the bottom-right corner. ── */
.bunticket-sheet { position: relative; width: 210mm; height: 297mm; page-break-after: always; }
.bunticket-sheet:last-child { page-break-after: auto; }
.bunticket-label-slot { position: absolute; box-sizing: border-box; overflow: hidden; padding: 4mm 5mm; font-family: 'Barlow', sans-serif; print-color-adjust: exact; -webkit-print-color-adjust: exact; display: flex; flex-direction: column; }
/* Negative margin bleeds the grey band out to the slot's own edges (full
   label width) despite the slot's padding, then re-applies its own inset
   padding so the text inside isn't flush against the edge either. */
.bt-header { background: #D8D4CC; margin: -4mm -5mm 3mm; padding: 3mm 5mm 2.5mm; }
.bt-shop { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16pt; line-height: 1.15; color: #000; }
.bt-rule-date { display: flex; justify-content: space-between; gap: 4mm; font-size: 10pt; color: #000; margin-top: 1mm; }
.bt-products { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3mm; }
.bt-product-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; font-size: 13pt; border-bottom: 0.3mm solid #ddd; padding-bottom: 1.5mm; }
.bt-product-row:last-child { border-bottom: none; }
.bt-product-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-product-qty { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15pt; flex-shrink: 0; }
.bt-tray { position: absolute; bottom: 3mm; right: 5mm; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11pt; color: #000; }

/* ── MICRO PACKING ARRAYS (110mm x 60mm, back to a real thermal/QZ label —
   reuses .label-card). Product name + order-type/"Shops" header, a fixed
   11-column grid of shop micro-names over quantities, despatch date +
   shop total footer. ── */
.label-card.micro { display: flex; flex-direction: column; padding: 6px 10px; }
.micro-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; border-bottom: 2px solid var(--dark); padding-bottom: 4px; margin-bottom: 4px; }
.micro-product { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; color: var(--dark); line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.micro-order { text-align: right; font-size: 10px; color: var(--dark); line-height: 1.35; flex-shrink: 0; }
.micro-order .micro-shops-label { font-weight: 700; display: block; }
.micro-grid { flex: 1; display: grid; grid-template-columns: repeat(11, 1fr); gap: 0 1px; align-content: center; overflow: hidden; }
.micro-cell { text-align: center; min-width: 0; }
/* Sized to match buildMicroPackingArrayZPL's new cell font caps (20/36 dots)
   at this card's usual 0.5px/dot scale — was much smaller and read as
   cramped compared to the NiceLabel form this replaces. */
.micro-cell-name { font-size: 10px; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.micro-cell-qty { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--dark); }
.micro-footer { text-align: center; font-size: 11px; font-weight: 600; color: var(--dark); border-top: 1px solid var(--border); padding-top: 3px; margin-top: 2px; }
.micro-totals { display: flex; gap: 10px; margin-bottom: 16px; }
.micro-total-chip { background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 8px 14px; }
.micro-total-chip strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; color: var(--dark); }
.micro-total-chip span { font-size: 10.5px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── CREAM ROOM WEEKLY DESPATCH LABEL (reuses .label-card frame) ──
   Sized to match buildCreamRoomLabelZPL's dot font sizes at this card's
   usual 0.5px/dot scale (customer 56→28px, product 44→22px, qty 64→32px,
   footer 30→15px). Product and footer bumped up, and the card's own gap
   widened, per feedback that the label read cramped. */
.label-card.cream { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 14px; text-align: center; gap: 8px; }
.cream-customer { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; color: var(--dark); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cream-divider { width: 100%; border-top: 2px solid var(--dark); }
.cream-product { font-size: 20px; font-weight: 600; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cream-qty { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; color: var(--dark); line-height: 1.1; }
.cream-footer { font-size: 15px; font-weight: 600; color: var(--dark); }