/* ============================================================
   Packbench styles — aligned to tracker_3/modules/pp.
   Naming: .button (with semantic suffix), like trackerpos and pp.
   Brand red (#a21f37) is the only CSS custom property — every
   other colour uses raw values / CSS named colours so packbench
   reads the same as its tracker_3 siblings.
   ============================================================ */
:root {
  --brand-red: #a21f37;
  --brand-red-d: #7d1527;
}

*           { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body  { height: 100%; margin: 0; padding: 0; }
body        { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; background: #fff; color: #1f2329; overflow: hidden; }
input, select, button { font-family: inherit; font-size: inherit; }

.app    { height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ============================================================
   Top bar — 80px tall, brand red, matches pp's header height.
   Logo / brand left, station centre, user controls right.
   ============================================================ */
header.topbar {
  height: 80px; background: var(--brand-red); color: #fff;
  display: flex; align-items: stretch; flex: 0 0 auto;
  border-bottom: 1px solid #000;
  user-select: none;
}
.topbar .brand    { display: flex; align-items: center; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.3); }
.topbar .brand-text { font-size: 22px; font-weight: bold; letter-spacing: 2px; }
.topbar .station  { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.topbar .topright { display: flex; align-items: center; gap: 14px; padding: 0 20px; border-left: 1px solid rgba(255,255,255,.3); }
.topbar .uname    { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .5px; }
.topbar .idle     { font-size: 12px; opacity: .85; }

/* ============================================================
   Buttons — single .button class with semantic colour suffix.
   Mirrors pp's vocabulary (.go = lime, .neutral = silver,
   .alt = fuchsia). Press shadow + active state borrowed from
   pp + POS respectively so the press affordance is real.
   ============================================================ */
.button {
  display: inline-block;
  background: var(--brand-red); color: #fff;
  font-size: 18px; font-weight: bold;
  line-height: 24px;
  padding: 8px 18px;
  border: none; border-radius: 5px;
  text-transform: uppercase;
  cursor: pointer; user-select: none;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 -1px rgba(200,200,200,.7), 0 1px 0 1px rgba(55,55,55,.5);
  transition: filter .1s ease;
}
.button:hover    { background: var(--brand-red-d); }
.button:active   { filter: brightness(66%); transform: translateY(2px); }
.button:disabled { background: #999; color: #666; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

.button.go        { background: lime;    color: #000; }
.button.go:hover  { background: #6AA84F; color: #fff; }
.button.cancel    { background: #FF0000; color: #fff; }  /* destructive / leave-without-completing — matches POS .button.cancel */
.button.cancel:hover { background: #c2151f; }
.button.neutral   { background: silver;  color: #000; }
.button.neutral:hover { background: #b0b0b0; }
.button.alt       { background: fuchsia; color: #fff; }
.button.alt:hover { background: #c012c0; }
.button.logout    { background: #FF0000; padding: 8px 20px; font-size: 16px; } /* matches POS .button.log_out */
.button.logout:hover { background: #c2151f; }

/* Small in-table utility button — Remove / Pre-Price Sticker etc. */
.lbtn {
  background: none; border: 1px solid #666; color: #333;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; cursor: pointer;
  font-family: inherit;
}
.lbtn:hover { background: #eee; }

/* Settings gear in topbar */
.gear {
  background: rgba(255,255,255,.15); color: #fff; border: none;
  font-size: 20px; width: 40px; height: 40px; border-radius: 5px;
  cursor: pointer; line-height: 1;
}
.gear:hover { background: rgba(255,255,255,.28); }

/* ============================================================
   Login + LPN scan — centred, big touch targets, pp-feel.
   ============================================================ */
.center-screen { flex: 1; display: flex; align-items: center; justify-content: center; }
.keypad-wrap   { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.pin-row     { display: flex; gap: 14px; }
.pin-display {
  width: 220px; height: 60px;
  border: 1px solid #000; background: #fff; color: #000;
  border-radius: 5px;
  font-size: 30px; font-weight: bold;
  letter-spacing: 10px; text-align: center;
}
.pin-display::placeholder { color: #999; letter-spacing: 2px; font-weight: normal; }
.btn-login {
  width: 140px;
  background: silver; color: #000;
  border: 1px solid #000; border-radius: 5px;
  font-size: 24px; font-weight: bold;
  cursor: pointer; text-transform: uppercase;
}
.btn-login:hover  { background: #b0b0b0; }
.btn-login:active { filter: brightness(66%); transform: translateY(2px); }

.keypad { display: grid; grid-template-columns: repeat(4, 90px); grid-template-rows: repeat(4, 84px); gap: 10px; }
.key {
  background: silver; color: #000;
  border: 1px solid #000; border-radius: 5px;
  font-size: 28px; font-weight: bold;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.key:active { filter: brightness(66%); transform: translateY(2px); }
.key.zero  { grid-column: 1 / span 3; }
.key.enter { grid-row: 2 / span 3; grid-column: 4; font-size: 36px; }
.key.back  { grid-column: 4; grid-row: 1; }
.hint      { color: #666; font-size: 13px; text-align: center; }

/* LPN scan */
.scan-card  { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.scan-title { font-size: 26px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.scan-row   { display: flex; gap: 10px; }
.scan-input {
  width: 360px; height: 58px;
  border: 1px solid #000; background: #fff;
  font-size: 22px; padding: 0 14px; border-radius: 5px;
}
.scan-go {
  width: 110px;
  background: silver; color: #000;
  border: 1px solid #000; border-radius: 5px;
  font-size: 22px; font-weight: bold; text-transform: uppercase;
  cursor: pointer;
}
.scan-go:hover  { background: #b0b0b0; }
.scan-go:active { filter: brightness(66%); transform: translateY(2px); }
.scan-error     { color: #cc3333; font-weight: bold; font-size: 16px; }

/* ============================================================
   Bench layout — banner, tab body, action bar, recon row.
   ============================================================ */
.bench      { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bench-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.order-banner {
  flex: 0 0 auto; background: #fafbfc; border-bottom: 1px solid #333;
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.order-banner .so          { font-size: 22px; font-weight: bold; }
.order-banner .ob-cust     { font-size: 13px; color: #666; margin-top: 3px; }
.order-banner .ob-fields   { display: flex; gap: 28px; flex-wrap: wrap; }
.order-banner .ob-fields > div { display: flex; flex-direction: column; }
.order-banner .ob-fields span  { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #666; font-weight: bold; }
.order-banner .ob-fields b     { font-size: 14px; }

/* tabs */
.tabbar { display: flex; gap: 2px; background: #ccc; padding: 8px 18px 0; flex: 0 0 auto; border-bottom: 1px solid #333; }
.tab    { background: #bbb; border: 1px solid #333; border-bottom: none; border-radius: 6px 6px 0 0; padding: 12px 22px; font-size: 15px; font-weight: bold; text-transform: uppercase; cursor: pointer; color: #333; }
.tab.active { background: #fff; color: var(--brand-red); }
.tab .badge { display: inline-block; background: var(--brand-red); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 8px; margin-left: 8px; vertical-align: middle; }
.tabbody    { flex: 1; overflow: auto; padding: 22px 24px; background: #fff; }
.panel-title{ font-size: 18px; font-weight: bold; text-transform: uppercase; margin: 0 0 14px; }

.phase1-note, .phase2-note { background: #FAE69C; border: 1px solid #c79900; color: #5a4400; padding: 12px 14px; border-radius: 5px; font-size: 13px; }

/* fields / routing / options */
.field          { margin-bottom: 14px; }
.field label    { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #666; font-weight: bold; margin-bottom: 4px; }
.field .val     { font-size: 15px; }
.routing-box    { background: #FAE69C; border: 1px solid #c79900; border-radius: 5px; padding: 12px 14px; font-size: 14px; color: #5a4400; line-height: 1.6; }
.grid3          { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; margin-bottom: 18px; }
.opt-card       { border: 1px solid #333; border-radius: 5px; padding: 14px; }
.opt-card h4    { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; }
.opt-card .desc { font-size: 13px; color: #666; }
.section-divider{ font-size: 15px; font-weight: bold; text-transform: uppercase; color: #333; margin: 22px 0 6px; padding-top: 16px; border-top: 2px solid #333; }

/* garment cards */
.gd-card      { display: flex; gap: 22px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #ccc; }
.gd-card:last-child { border-bottom: none; }
.gd-info      { flex: 1; }
.gd-name      { font-size: 18px; font-weight: bold; }
.gd-sub       { font-size: 12px; color: #666; font-family: monospace; margin-top: 2px; }
.gd-tags      { margin-top: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.gd-full      { color: #1f8a4c; font-weight: bold; }
.pill         { display: inline-block; background: #eef3f7; color: #33617e; border: 1px solid #cfe0eb; border-radius: 12px; font-size: 11px; padding: 2px 9px; font-weight: 600; }

/* LPN list */
.lpn-card        { border: 1px solid #333; border-radius: 5px; margin-bottom: 12px; }
.lpn-card h4     { margin: 0; padding: 10px 14px; background: #eee; border-bottom: 1px solid #333; font-family: monospace; font-size: 15px; font-weight: bold; display: flex; justify-content: space-between; }
.lpn-card .body  { padding: 10px 14px; font-size: 14px; }
.lpn-card.current h4   { background: #FAE69C; color: var(--brand-red); }
.lpn-card .lpn-loc     { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; color: #666; }
.lpn-card.current .lpn-loc { color: var(--brand-red); }
.lpn-table       { width: 100%; border-collapse: collapse; font-size: 14px; }
.lpn-table th    { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #666; border-bottom: 1px solid #333; padding: 6px 8px; }
.lpn-table td    { text-align: center; padding: 6px 8px; border-bottom: 1px solid #ddd; }

/* ============================================================
   Packing tab
   ============================================================ */
.pack-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.fl           { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #666; font-weight: bold; margin-bottom: 4px; }
select,input[type=text],input[type=number],input[type=password] {
  font-family: inherit; font-size: 15px;
  padding: 9px 10px;
  border: 1px solid #000; border-radius: 5px;
  background: #fff;
}

.boxes        { display: flex; flex-direction: column; gap: 14px; }
.box-card     { border: 1px solid #333; border-radius: 5px; overflow: hidden; }
.box-head     { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #eee; border-bottom: 1px solid #333; }
.box-head .bid   { font-family: monospace; font-size: 12px; color: #666; }
.box-head .bname { font-weight: bold; font-size: 16px; }
.box-head .btype { font-size: 13px; color: #666; }
.box-head .spacer { flex: 1; }

.status-tag        { font-size: 11px; font-weight: bold; text-transform: uppercase; padding: 4px 10px; border-radius: 12px; }
.status-tag.progress { background: orange; color: #000; }
.status-tag.done     { background: lime;   color: #000; }
.status-tag.void     { background: #999;   color: #fff; text-decoration: line-through; }

.box-body     { padding: 12px 14px; }
.box-items    { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
.box-items th { text-align: left; font-size: 11px; text-transform: uppercase; color: #666; border-bottom: 1px solid #333; padding: 5px 6px; }
.box-items td { padding: 6px; border-bottom: 1px solid #ddd; }
.add-line     { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.dims         { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: #666; flex-wrap: wrap; }
.box-actions  { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ============================================================
   Action bar + recon row
   ============================================================ */
.actionbar { flex: 0 0 auto; background: #fff; border-top: 1px solid #333; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
.actionbar .status-msg { flex: 1; font-size: 14px; color: #666; }
.actionbar .status-msg b { color: #1f2329; }

.recon-row { flex: 0 0 auto; background: #eee; border-top: 1px solid #333; padding: 12px 24px; display: flex; align-items: center; gap: 18px; }
.recon-row .recon-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666; font-weight: bold; white-space: nowrap; }
.recon-row .bar         { flex: 1; height: 14px; border-radius: 7px; background: #ccc; overflow: hidden; border: 1px solid #999; }
.recon-row .bar > i     { display: block; height: 100%; background: lime; width: 0; transition: width .3s; }
.recon-row .nums        { font-size: 14px; color: #666; white-space: nowrap; }
.recon-row .nums b      { color: #000; }
.recon-row .warn        { font-size: 13px; color: #c77700; font-weight: bold; white-space: nowrap; }

/* ============================================================
   Modal + toast + label paper
   ============================================================ */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal   { background: #fff; border: 1px solid #333; border-radius: 5px; max-width: 600px; width: 92%; max-height: 90vh; overflow: auto; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.modal h3 { margin: 0; padding: 16px 20px; border-bottom: 1px solid #333; font-size: 16px; text-transform: uppercase; }
.modal .mbody { padding: 20px; }
.modal .mfoot { padding: 14px 20px; border-top: 1px solid #333; display: flex; justify-content: flex-end; gap: 10px; }

.label-paper          { border: 1px dashed #666; border-radius: 5px; padding: 16px; background: #fff; font-family: "Consolas", monospace; }
.label-paper.carton   { width: 380px; margin: 0 auto; }
.label-paper .lp-h    { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
.label-paper .lp-h .co{ font-weight: bold; font-family: "Open Sans", sans-serif; }
.label-paper table    { width: 100%; font-size: 12px; border-collapse: collapse; }
.label-paper table td { padding: 2px 0; }
.label-paper .bc      { text-align: center; margin-top: 10px; }
.label-paper .bc svg  { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.label-paper .big     { font-size: 22px; font-weight: bold; letter-spacing: 1px; text-align: center; }
.label-itemcode       { width: 300px; margin: 0 auto; text-align: center; }
.label-itemcode .nm   { font-family: "Open Sans", sans-serif; font-weight: bold; font-size: 16px; }
.label-itemcode .pr   { font-size: 24px; font-weight: bold; margin-top: 4px; }

.qty-pick       { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; }
.qty-pick label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #666; font-weight: bold; }
.qty-pick input { width: 90px; }

/* audit trail */
.audit-log         { max-height: 380px; overflow: auto; font-size: 12px; font-family: monospace; }
.audit-log .ln     { padding: 6px 8px; border-bottom: 1px solid #eee; display: flex; gap: 10px; }
.audit-log .ln .t  { color: #666; flex: 0 0 160px; }
.audit-log .ln .u  { flex: 0 0 110px; color: #666; }
.audit-log .ln .e  { flex: 1; }
.audit-log .ln .pl { color: #999; font-size: 11px; }

/* printer picker */
.picker-block          { margin-bottom: 18px; padding: 14px; border: 1px solid #333; border-radius: 5px; }
.picker-block h4       { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: #666; }
.picker-block select   { width: 100%; }
.picker-current        { font-size: 12px; color: #666; margin-top: 6px; }
.picker-current b      { color: #000; }
.picker-key-state      { font-size: 13px; color: #666; margin-bottom: 14px; font-weight: bold; }
.picker-key-state.ok   { color: #1f8a4c; }
.picker-key-state.bad  { color: #cc3333; }

/* toast */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #1f2329; color: #fff; padding: 12px 22px; border-radius: 5px; font-size: 14px; font-weight: bold; z-index: 80; box-shadow: 0 6px 20px rgba(0,0,0,.4); }

small.note { color: #666; font-size: 12px; }