/* SRX Floor (demo/nav-remnants) - the top bar's navigation and the stock screens (i/ piece, l/ bin, remnants.html,
   inventory.html, settings.html, 404.html). Tokens only from app.css and restyle.css (light by default with the
   restyle on; navy only on the one main action, which lib/restyle.js marks). Every target 64 px or more, text 18 px
   or more, 12 px between targets; tested at 1280 x 1024 and 1920 x 1080. No remote URL. */

/* ---------------------------------------------------------------- top bar */
.topbar.nav-bar { gap: 12px; flex-wrap: nowrap; }
.topbar.nav-bar .btn { min-height: 64px; min-width: 64px; font-size: 18px; padding: 8px 16px; white-space: nowrap; }
.topbar.nav-bar .nav-back { flex: none; }
.topbar.nav-bar .brand.nav-brand-short { margin-right: 0; flex: none; }
.topbar.nav-bar .nav-title { font-weight: 800; font-size: 1.25rem; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar.nav-bar .nav-tools { display: inline-flex; gap: 12px; flex: none; }
.topbar.nav-bar #who-top, .topbar.nav-bar .badge { flex: none; }
@media (max-width: 700px) {
  .topbar.nav-bar { flex-wrap: wrap; }
  .topbar.nav-bar .brand.nav-brand-short { display: none; }
}

/* ---------------------------------------------------------------- home groups */
.nav-group-title { margin: 24px 0 12px; font-size: 1.25rem; }
.nav-mine { margin-bottom: 16px; }
.nav-mine .tile { border-width: 2px; border-color: var(--text); }
.tile[data-tile] { font-size: 1.15rem; }
.home-version { font-size: 18px; color: var(--muted); }

/* ---------------------------------------------------------------- scan box */
.scanbox { margin-bottom: 16px; }
.scanbox-row { display: flex; gap: 12px; align-items: stretch; }
.scanbox-row input { flex: 1 1 auto; min-height: 64px; font-size: 1.25rem; }
.scanbox-row .btn { flex: none; min-height: 64px; }
@media (max-width: 700px) { .scanbox-row { flex-wrap: wrap; } .scanbox-row .btn { flex: 1 1 40%; } }

/* ---------------------------------------------------------------- stock pages */
.stock-page { max-width: 1240px; }
.stock-mode { font-size: 18px; }
.stock-id { font-family: var(--mono); font-weight: 800; font-size: 2.25rem; letter-spacing: 0.02em; margin: 0; overflow-wrap: anywhere; }
.stock-size { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0 12px; }
.stock-facts { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 8px 20px; margin: 0 0 12px; font-size: 18px; }
.stock-facts dt { color: var(--muted); font-weight: 600; }
.stock-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.stock-pill { display: inline-block; padding: 4px 14px; border-radius: 999px; font-weight: 800; font-size: 18px; border: 2px solid currentColor; white-space: nowrap; }
.stock-pill[data-kind="ok"] { color: var(--done); background: var(--ok-bg); }
.stock-pill[data-kind="warn"] { color: var(--warn); background: var(--warn-bg); }
.stock-pill[data-kind="stop"] { color: var(--hold); background: var(--error-bg); }
.stock-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.stock-actions .btn { min-height: 64px; flex: 1 1 220px; }
.stock-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .stock-two { grid-template-columns: minmax(0, 1fr); } }

/* tables: big rows; every row is a link of 64 px */
.stock-table { width: 100%; border-collapse: collapse; font-size: 18px; font-variant-numeric: tabular-nums; }
.stock-table th { text-align: left; font-size: 18px; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line); }
.stock-table td { padding: 0 10px; height: 64px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.stock-table td.num, .stock-table th.num { text-align: right; white-space: nowrap; }
.stock-table tr[data-best="true"] td { background: var(--ok-bg); }
.stock-table a.row-link { display: flex; align-items: center; min-height: 64px; font-family: var(--mono); font-weight: 800; text-decoration: none; color: var(--text); }
.stock-table a.row-link:hover, .stock-table a.row-link:focus-visible { text-decoration: underline; }
.stock-scroll { overflow-x: auto; }

/* filters */
.stock-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; margin-bottom: 12px; }
.stock-seg { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.stock-seg .btn { min-height: 64px; flex: 0 1 auto; }
.stock-best { border: 2px solid var(--done); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; background: var(--ok-bg); }
.stock-best .stock-id { font-size: 2rem; }
.stock-counts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.stock-count { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; min-width: 150px; background: var(--bg); }
.stock-count b { display: block; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.stock-count span { color: var(--muted); font-size: 18px; }

/* the bin page's put-away panel */
.putaway { border: 2px solid var(--text); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; background: var(--bg); }
.putaway-picked { font-size: 1.5rem; font-weight: 800; font-family: var(--mono); }

/* history */
.stock-history { list-style: none; padding: 0; margin: 0; font-size: 18px; }
.stock-history li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.stock-history time { color: var(--muted); margin-right: 12px; font-variant-numeric: tabular-nums; }

/* the sheet's form rows */
.sheet .stock-form > * + * { margin-top: 12px; }
.sheet .stock-form .stock-seg .btn { flex: 1 1 160px; }

/* settings */
.set-list { list-style: none; padding: 0; margin: 0; }
.set-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.set-list .set-name { font-family: var(--mono); font-weight: 800; }
.set-list .set-value { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Code 128 (lib/code128.js): drawn as SVG bars; the quiet zones are part of the drawing */
.c128 { display: block; height: auto; max-width: 100%; background: #FFFFFF; }

@media print { .nav-tools, .nav-back, .scanbox { display: none !important; } }

/* home: wider on a kiosk so the groups sit two (or three) to a row; every tile stays 64 to 88 px with its words on one line */
@media screen and (min-width: 1100px) {
  body:has(#nav-groups) .page { max-width: 1240px; }
  html[data-restyle="on"] #tiles, html[data-restyle="on"] #nav-groups .tiles, html[data-restyle="on"] #nav-mine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 1700px) {
  body:has(#nav-groups) .page { max-width: 1680px; }
  html[data-restyle="on"] #tiles, html[data-restyle="on"] #nav-groups .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* hidden means hidden (handoff item 4: app.css .badge display:inline-block beat [hidden], so X-TEST DATA showed on a
   real backend) */
[hidden] { display: none !important; }

/* design review of the demo screens, item 4 (Nov 2): literal sentence-case titles on screen, never forced capitals.
   Print (travelers, labels) keeps its own rules. */
@media screen {
  html[data-restyle="on"] .page-banner h1, html[data-restyle="on"] .trv-title, html[data-restyle="on"] th,
  html[data-restyle="on"] .office-banner-title, html[data-restyle="on"] .st-station { text-transform: none; letter-spacing: normal; }
}

/* the 4x2 label preview (screen only): 2:1, white, black, the QR at left, the ID large, the Code 128 under it */
.label-4x2 { display: grid; grid-template-columns: 38% 1fr; gap: 12px; aspect-ratio: 2 / 1; max-width: 560px; padding: 12px; background: #FFFFFF; color: #000000; border: 2px solid #000000; border-radius: 8px; overflow: hidden; }
.label-4x2 .label-qr { width: 100%; height: auto; display: block; }
.label-4x2 .label-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.label-4x2 .label-id { font-family: var(--mono); font-weight: 800; font-size: 1.6rem; overflow-wrap: anywhere; }
.label-4x2 .label-line { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.label-4x2 .label-demo { display: inline-block; margin-left: 8px; padding: 0 6px; border: 3px solid #000000; font-family: var(--font); }
.label-4x2 .c128 { margin-top: auto; width: 100%; height: 44px; }

/* home on a kiosk or a TV: who is signed in and this device's station side by side, so every group is closer to the top */
@media screen and (min-width: 1100px) {
  body:has(#nav-groups) #app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  body:has(#nav-groups) #app > * { grid-column: 1 / -1; }
  body:has(#nav-groups) #app > #who { grid-column: 1; }
  body:has(#nav-groups) #app > #device { grid-column: 2; }
}