/* Rollo Factory Shipment Tracker — one hand-written stylesheet.
   Warehouse-first: large type, high contrast, big tap targets, no hover-only
   affordances, no external assets. Base 18px. */

:root {
  --bg: #f1f5f9;
  --card: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --accent: #0f172a;
  --focus: #2563eb;

  /* Status colours */
  --c-slate:  #475569;
  --c-amber:  #d97706;
  --c-cyan:   #0891b2;
  --c-blue:   #2563eb;
  --c-teal:   #0d9488;
  --c-indigo: #4f46e5;
  --c-green:  #16a34a;
  --c-orange: #ea580c;
  --c-red:    #dc2626;
  --c-grey:   #6b7280;
  --c-darkred:#991b1b;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--focus); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 28px; margin: 0 0 16px; }
h2 { font-size: 23px; margin: 28px 0 12px; }
h3 { font-size: 20px; margin: 0 0 10px; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  background: #0f172a; color: #fff;
  padding: 12px 20px;
  flex-wrap: wrap;
}
.brand { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: 1px; }
.brand span { font-weight: 400; color: #94a3b8; font-size: 14px; margin-left: 8px; letter-spacing: .5px; }
.brand:hover { text-decoration: none; }
.topnav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.topnav a { color: #cbd5e1; padding: 8px 14px; border-radius: 8px; font-size: 16px; }
.topnav a:hover { background: #1e293b; color: #fff; text-decoration: none; }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.who { font-size: 15px; color: #e2e8f0; }
.role-tag { text-transform: uppercase; font-size: 11px; letter-spacing: 1px; background: #334155; padding: 2px 7px; border-radius: 5px; margin-left: 4px; }

/* Phones / small tablets: stack the header so nothing wraps into a ragged
   staircase. Brand on top, then the account row (who / switch user / sign out),
   then the nav as a tidy 2-column grid of clearly tappable buttons — no
   hamburger, everything stays visible. Order is set with flex `order` so the
   HTML is unchanged. */
@media (max-width: 800px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px; }
  .brand { order: 0; font-size: 22px; }
  .topbar-user {
    order: 1; flex-wrap: wrap; gap: 10px;
    padding-bottom: 14px; border-bottom: 1px solid #1e293b;
  }
  .who { flex-basis: 100%; font-size: 16px; }
  .topbar-user .btn { flex: 1 1 0; min-height: 46px; }
  .topnav {
    order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none;
  }
  .topnav a {
    text-align: center; background: #1e293b; border: 1px solid #334155;
    color: #e2e8f0; padding: 0 10px; min-height: 46px;
    display: flex; align-items: center; justify-content: center;
  }
  .topnav a:hover, .topnav a:active { background: #334155; color: #fff; }
}
.role-admin { background: #7c3aed; }
.role-logistics { background: #2563eb; }
.role-factory { background: #0d9488; }
.role-viewer { background: #475569; }

/* ---------- Layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 22px 18px 80px; }
.wrap-auth { max-width: 440px; margin-top: 8vh; }

/* ---------- Flash ---------- */
.flash { padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; font-size: 16px; font-weight: 600; }
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
.flash-warn    { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; margin-bottom: 18px;
}
.card-tight { padding: 16px 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 22px;
  font-size: 18px; font-weight: 700;
  background: #0f172a; color: #fff; border: 2px solid #0f172a;
  border-radius: 10px; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; opacity: .93; }
.btn-sm { min-height: 40px; font-size: 15px; padding: 0 14px; }
.btn-lg { min-height: 64px; font-size: 20px; }
.btn-block { display: flex; width: 100%; }
.btn-ghost { background: transparent; color: #0f172a; border-color: var(--line-2); }
.topbar .btn-ghost { color: #e2e8f0; border-color: #475569; }
.btn-secondary { background: #fff; color: #0f172a; border-color: var(--line-2); }
.btn-danger { background: var(--c-red); border-color: var(--c-red); }
.btn-green  { background: var(--c-green); border-color: var(--c-green); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.pill-lg { font-size: 20px; padding: 9px 20px; }
.pill--slate  { background: var(--c-slate); }
.pill--amber  { background: var(--c-amber); }
.pill--cyan   { background: var(--c-cyan); }
.pill--blue   { background: var(--c-blue); }
.pill--teal   { background: var(--c-teal); }
.pill--indigo { background: var(--c-indigo); }
.pill--green  { background: var(--c-green); }
.pill--orange { background: var(--c-orange); }
.pill--red    { background: var(--c-red); }
.pill--grey   { background: var(--c-grey); }
.pill--darkred{ background: #fff; color: var(--c-darkred); border: 2px solid var(--c-darkred); }

.pill-amber-soft { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ---------- Banners ---------- */
.banner {
  padding: 12px 16px; border-radius: 10px; font-weight: 800;
  font-size: 16px; margin: 10px 0; letter-spacing: .3px;
}
.banner-oos    { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.banner-hold   { background: #fef3c7; color: #92400e; border: 2px solid #f59e0b; font-size: 18px; }
.banner-passed { background: #fee2e2; color: #991b1b; border: 2px solid #f87171; }
.banner-missing{ background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.banner-red    { background: #fee2e2; color: #991b1b; border: 2px solid #f87171; }

/* ---------- Unassigned placeholder ---------- */
.unassigned { color: #94a3b8; font-style: italic; font-weight: 400; }

/* ---------- WORK NEXT panel ---------- */
.worknext {
  background: #0f172a; color: #fff; border-radius: 16px;
  padding: 24px 26px; margin-bottom: 26px;
  border-left: 10px solid var(--c-green);
}
.worknext .wn-label { font-size: 15px; letter-spacing: 3px; color: #94a3b8; text-transform: uppercase; font-weight: 700; }
.worknext .wn-ref { font-size: 40px; font-weight: 900; line-height: 1.05; margin: 6px 0 2px; }
.worknext .wn-sub { font-size: 17px; color: #cbd5e1; }
.worknext .wn-grid { display: flex; flex-wrap: wrap; gap: 28px; margin: 16px 0 14px; }
.worknext .wn-fact .k { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #94a3b8; }
.worknext .wn-fact .v { font-size: 24px; font-weight: 800; }
.worknext a.btn { border-color: #fff; }
.worknext .btn-ghost { color: #fff; border-color: #475569; }

/* ---------- Filters / chips ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px;
  border-radius: 999px; border: 2px solid var(--line-2); background: #fff;
  font-size: 16px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.chip:hover { text-decoration: none; border-color: #94a3b8; }
.chip.is-active { background: #0f172a; color: #fff; border-color: #0f172a; }
.search { flex: 1; min-width: 200px; }
.search input { width: 100%; }

/* ---------- Section headers ---------- */
.section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
}
.section-head h2 { margin: 0; }
.section-head .count { color: var(--muted); font-size: 16px; font-weight: 700; }
.section-overdue h2 { color: var(--c-red); }

/* ---------- Shipment card ---------- */
.ship-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .ship-grid { grid-template-columns: 1fr 1fr; } }

.ship-card {
  background: var(--card); border: 1px solid var(--line);
  border-left: 8px solid var(--c-slate); border-radius: 14px;
  padding: 18px 18px 16px; display: flex; gap: 16px;
}
.ship-card.brd--slate  { border-left-color: var(--c-slate); }
.ship-card.brd--amber  { border-left-color: var(--c-amber); }
.ship-card.brd--cyan   { border-left-color: var(--c-cyan); }
.ship-card.brd--blue   { border-left-color: var(--c-blue); }
.ship-card.brd--teal   { border-left-color: var(--c-teal); }
.ship-card.brd--indigo { border-left-color: var(--c-indigo); }
.ship-card.brd--green  { border-left-color: var(--c-green); }
.ship-card.brd--orange { border-left-color: var(--c-orange); }
.ship-card.brd--red    { border-left-color: var(--c-red); }
.ship-card.brd--grey   { border-left-color: var(--c-grey); }
.ship-card.brd--darkred{ border-left-color: var(--c-darkred); }

.runno {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: #0f172a; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900;
}
.ship-body { flex: 1; min-width: 0; }
.ship-ref { font-size: 26px; font-weight: 900; line-height: 1.1; }
.ship-code { font-size: 15px; color: var(--muted); margin-top: 1px; }
.ship-meta { margin: 8px 0; font-size: 16px; color: var(--ink-2); }
.ship-meta .dest { font-weight: 700; color: var(--ink); }
.ship-counts { font-size: 16px; color: var(--ink-2); margin: 2px 0 6px; }
.ship-counts b { font-size: 19px; }
.pin { display:inline-block; font-size: 12px; font-weight: 800; color: #7c3aed; border:1px solid #c4b5fd; background:#f5f3ff; border-radius:6px; padding:1px 6px; letter-spacing:.5px; vertical-align:middle; }
.ftag { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.5px; border-radius:6px; padding:2px 8px; margin-top:4px; text-transform:uppercase; }
.ftag--produce { background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; }
.ftag--surplus { background:#ecfeff; color:#155e63; border:1px solid #a5f3fc; }
.ftag--mixed   { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* Physical-sequence checklist (shipment detail) */
.checklist { list-style:none; margin:0; padding:0; counter-reset:step; }
.checklist li { position:relative; padding:12px 0 12px 46px; border-bottom:1px solid var(--line); }
.checklist li:last-child { border-bottom:none; }
.checklist li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:12px; width:30px; height:30px; border-radius:50%; background:#0f172a; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; }
.checklist .cl-title { font-weight:700; }
.checklist .cl-qty { font-size:15px; color:var(--ink-2); margin-top:2px; }
.checklist .cl-actions { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.checklist li.cl-muted::before { background:#94a3b8; }

.pickup-line { margin: 8px 0 4px; }
.pickup-primary { font-size: 21px; font-weight: 800; color: var(--ink); }
.pickup-sub { font-size: 14px; color: var(--muted); margin-top: 1px; }
.pickup-sub.urgent { color: var(--c-red); font-weight: 700; }
.pickup-none { }

.ship-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ship-actions .btn { min-height: 50px; flex: 1; min-width: 120px; }

/* ---------- Forms ---------- */
label.field { display: block; margin-bottom: 16px; }
label.field > span { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], select, textarea {
  width: 100%; font-size: 18px; padding: 13px 14px;
  border: 2px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 3px solid #bfdbfe; border-color: var(--focus); }
textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 700px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.hint { font-size: 14px; color: var(--muted); margin-top: 4px; }
.inline-warn { background:#fffbeb; border:1px solid #fcd34d; color:#92400e; padding:10px 14px; border-radius:8px; font-size:15px; margin-top:6px; }

/* "Log production" form: fields flow in a responsive grid (1 col on phones,
   2 on tablets, 4 on desktop), inputs bottom-aligned so a wrapping label never
   knocks its input out of line. Comments + photos + submit span the full width. */
.prod-form { display: grid; grid-template-columns: 1fr; gap: 10px 16px; align-items: end; }
.prod-form .field { margin-bottom: 0; }
.prod-form .pf-hint { margin-top: 2px; grid-column: 1 / -1; }
.prod-form .pf-row2 { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px 16px; }
.prod-form .pf-actions { display: flex; }
.prod-form .pf-actions .btn { width: 100%; }
.prod-form input[type=file] { width: 100%; font-size: 15px; padding: 10px 12px;
  border: 2px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink-2); }
@media (min-width: 560px) {
  .prod-form { grid-template-columns: 1fr 1fr; }
  .prod-form .pf-ship { grid-column: span 2; }
}
@media (min-width: 900px) {
  .prod-form { grid-template-columns: repeat(4, 1fr); }
  .prod-form .pf-row2 { flex-direction: row; align-items: flex-end; }
  .prod-form .pf-row2 .pf-comments { flex: 1 1 auto; }
  .prod-form .pf-row2 .pf-photos   { flex: 0 0 280px; }
  .prod-form .pf-row2 .pf-actions  { flex: 0 0 auto; }
  .prod-form .pf-row2 .pf-actions .btn { min-width: 140px; }
}

/* Production date-range presets + range roll-up. */
.prod-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: 14px; }
.range-summary { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 14px 16px; margin-bottom: 16px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; }
.range-summary .rs { display: flex; flex-direction: column; gap: 2px; }
.range-summary .rs span { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.range-summary .rs b { font-size: 20px; }

/* Upload review: one card per file so the type/shipment selects get full width
   and never clip. Filename on its own line, detected info, then the two menus. */
/* Drag-and-drop upload zone */
.dropzone { display: block; position: relative; border: 2px dashed var(--line-2); border-radius: 14px;
  background: #f8fafc; padding: 30px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; }
.dropzone:hover { border-color: var(--focus); background: #f1f5f9; }
.dropzone.is-drag { border-color: var(--focus); background: #eff6ff; }
/* Keep the real input functional but out of the way (not display:none, so it
   stays focusable for the browser's "required" validation). */
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; overflow: hidden; }
.dz-icon { font-size: 30px; color: var(--muted); line-height: 1; }
.dz-title { font-size: 18px; color: var(--ink); margin-top: 8px; }
.dz-link { color: var(--focus); text-decoration: underline; }
.dz-hint { font-size: 14px; color: var(--muted); margin-top: 6px; }
.dz-list { list-style: none; padding: 0; margin: 12px 0 0; }
.dz-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  font-size: 15px; color: var(--ink-2); padding: 8px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; text-align: left; }
.dz-list li .sz { color: var(--muted); white-space: nowrap; }

/* Production progress bar */
.prog { margin-top: 8px; }
.prog-track { height: 12px; background: #e2e8f0; border-radius: 7px; overflow: hidden; }
.prog-track > span { display: block; height: 100%; background: var(--c-blue); border-radius: 7px; transition: width .3s; }
.prog--done .prog-track > span { background: var(--c-green); }
.prog-label { font-size: 13px; color: var(--muted); margin-top: 5px; font-weight: 600; }

.upload-review { display: flex; flex-direction: column; gap: 14px; }
.ur-item { border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 18px; background: #fff; }
.ur-item--error { border-color: var(--c-red); background: #fef2f2; }
.ur-name b { font-size: 17px; word-break: break-word; }
.ur-name .doc-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ur-detected { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0; font-size: 14px; color: var(--muted); }
.ur-fields { display: grid; grid-template-columns: 1fr; gap: 6px 18px; margin-top: 12px; }
@media (min-width: 620px) { .ur-fields { grid-template-columns: 1fr 1fr; } }
.ur-fields .field { margin-bottom: 0; }
.ur-fields select { width: 100%; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 16px; }
table.data th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
table.data th.right { text-align: right; }  /* beat the `th { text-align:left }` default so numeric headers line up with their cells */
table.data td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:hover td { background: #f8fafc; }

/* Full-width comment row that hangs below its entry instead of a cramped column */
table.data tr.has-comment > td { border-bottom: none; padding-bottom: 4px; }
table.data tr.prod-comment > td { padding-top: 0; padding-bottom: 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
table.data tr.prod-comment .pc-text::before { content: "\201C"; color: var(--line); font-weight: 700; margin-right: 3px; }
table.data tr.prod-comment:hover td { background: transparent; }

/* Little "📷 2 photos" chip on the comment row — opens the lightbox, no clutter. */
.photo-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; vertical-align: baseline; }
.photo-chip:hover { border-color: var(--focus); color: var(--ink); }

/* Boxes-per-hour total row at the foot of the entries table. */
table.data tfoot .prod-total > td { border-top: 2px solid var(--line); border-bottom: none; background: #f8fafc; }
table.data tfoot tr:hover td { background: #f8fafc; }
.bph { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.bph-k { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.bph-v { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.bph-v::after { content: " /hr"; font-size: 13px; font-weight: 600; color: var(--muted); }
.bph-note { font-size: 13px; color: var(--muted); }

/* Material-issue filter bar (date range + material) with the PDF export button. */
.mreport-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mfilter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mfilter .mf { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.mfilter .mf > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.mfilter select, .mfilter input { font-size: 15px; padding: 8px 10px; }
.mfilter select { min-width: 150px; }

/* Thumbnail grid on the edit page: view (opens original) + remove per photo. */
.edit-photos { display: flex; flex-wrap: wrap; gap: 14px; }
.edit-photo { margin: 0; width: 150px; }
.edit-photo img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #f8fafc; display: block; }
.edit-photo form { margin-top: 6px; text-align: center; }

/* ---------- Login ---------- */
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px; }
.auth-card h1 { text-align: center; }
.auth-logo { text-align: center; font-weight: 900; font-size: 24px; letter-spacing: 1px; margin-bottom: 4px; }
.auth-logo span { color: var(--muted); font-weight: 400; font-size: 15px; display:block; letter-spacing: .5px; }

/* ---------- Detail page ---------- */
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 2px 16px; font-size: 17px; }
.kv dt { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .5px; padding: 9px 0; }
.kv dd { margin: 0; padding: 9px 0; font-weight: 600; }
@media (max-width: 560px){ .kv { grid-template-columns: 1fr; gap:0; } .kv dt { padding-bottom:0; } .kv dd { padding-top:2px; border-bottom:1px solid var(--line); padding-bottom:10px; } }

.two-col { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1.3fr 1fr; } }

.seqrun { display:flex; gap: 26px; flex-wrap: wrap; margin: 4px 0 8px; }
.seqrun .box { background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:10px 16px; }
.seqrun .box .k { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.seqrun .box .v { font-size:22px; font-weight:800; }

/* Document list */
.doc-group { margin-bottom: 14px; }
.doc-group h4 { margin: 0 0 6px; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.doc-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:#fff; }
.doc-row.is-void { background:#fff5f5; border-color:#fca5a5; }
.doc-row .doc-info { flex:1; min-width:0; }
.doc-row .doc-name { font-weight:700; }
.doc-row .doc-sub { font-size:14px; color:var(--muted); }
.void-badge { background: var(--c-red); color:#fff; font-size:12px; font-weight:800; padding:3px 8px; border-radius:6px; letter-spacing:.5px; }

/* Timeline */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 16px 22px; border-left:2px solid var(--line); margin-left:6px; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:#0f172a; }
.timeline .tl-main { font-weight:700; }
.timeline .tl-sub { font-size:14px; color:var(--muted); }
.timeline .tl-note { font-size:15px; color:var(--ink-2); margin-top:2px; }

/* Notes thread */
.note { background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.note .note-head { font-size:14px; color:var(--muted); margin-bottom:4px; }
.note .note-body { font-size:16px; white-space:pre-wrap; }

/* Status update stack */
.status-stack { display:flex; flex-direction:column; gap:10px; }
.status-btn {
  min-height: 60px; border-radius: 10px; border: 2px solid; background:#fff;
  font-size: 19px; font-weight: 800; letter-spacing:.5px; cursor:pointer;
  display:flex; align-items:center; padding: 0 20px; color:#fff; width:100%;
}
.sb--slate{background:var(--c-slate);border-color:var(--c-slate)} .sb--amber{background:var(--c-amber);border-color:var(--c-amber)}
.sb--cyan{background:var(--c-cyan);border-color:var(--c-cyan)}
.sb--blue{background:var(--c-blue);border-color:var(--c-blue)} .sb--teal{background:var(--c-teal);border-color:var(--c-teal)}
.sb--indigo{background:var(--c-indigo);border-color:var(--c-indigo)} .sb--green{background:var(--c-green);border-color:var(--c-green)}
.sb--orange{background:var(--c-orange);border-color:var(--c-orange)} .sb--red{background:var(--c-red);border-color:var(--c-red)}
.sb--grey{background:var(--c-grey);border-color:var(--c-grey)} .sb--darkred{background:#fff;color:var(--c-darkred);border-color:var(--c-darkred)}
.status-btn.is-current { outline: 4px solid #bfdbfe; }

/* Progress bar for order rollup */
.progress { display:flex; height:26px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.progress span { display:block; height:100%; }
.legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:10px; font-size:14px; }
.legend .dot { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; }

.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top:0 } .mb0 { margin-bottom:0 }
.stack-gap > * + * { margin-top: 14px; }

.badge-count { background:#0f172a; color:#fff; border-radius:999px; padding:2px 10px; font-size:14px; font-weight:800; }

/* ---------- PIN pad & operator picker ---------- */
.pin-dots { display:flex; justify-content:center; gap:12px; min-height:22px; margin:10px 0 18px; }
.pin-dot { width:16px; height:16px; border-radius:50%; background:#0f172a; display:inline-block; }
.pinpad { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.pinkey {
  min-height:74px; font-size:28px; font-weight:800; border-radius:12px;
  border:2px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer;
}
.pinkey:active { background:#f1f5f9; }
.pinkey-alt { background:#f8fafc; }
.pinkey-go { background:var(--c-green); border-color:var(--c-green); color:#fff; }
.op-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
@media (min-width:520px){ .op-grid { grid-template-columns:1fr 1fr; } }
.op-tile {
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  min-height:88px; padding:18px; border-radius:14px; border:2px solid var(--line-2);
  background:#fff; color:var(--ink);
}
.op-tile:hover { border-color:#94a3b8; text-decoration:none; }
.op-name { font-size:22px; font-weight:800; }
.switch-user { background:#1e293b !important; border-color:#334155 !important; color:#fff !important; }

/* ---------- Calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-h { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 4px 0; }
.cal-cell { min-height: 78px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }
.cal-empty { background: transparent; border: none; }
.cal-day { font-weight: 800; font-size: 16px; }
.cal-tag { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cal-label { font-size: 11px; color: var(--ink-2); margin-top: 3px; line-height: 1.2; }
.cal-cell.is-working { background: #f0fdf4; border-color: #86efac; }
.cal-cell.is-off { background: #f8fafc; border-color: #e2e8f0; }
.cal-cell.is-holiday, .cal-cell.is-shutdown { background: #fef2f2; border-color: #fca5a5; }
.cal-cell.is-extra { background: #eff6ff; border-color: #93c5fd; }
.cal-cell.is-today { outline: 3px solid #2563eb; }
.cal-today-dot { font-size: 10px; background: #2563eb; color: #fff; padding: 1px 5px; border-radius: 5px; vertical-align: middle; text-transform: uppercase; letter-spacing: .5px; }
.cal-pickups { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
.cal-pickup { display: block; text-decoration: none; background: #fff7ed; border: 1px solid #fdba74;
  border-radius: 6px; padding: 2px 6px; line-height: 1.25; }
.cal-pickup:hover { background: #ffedd5; }
.cal-pk-ref { display: block; font-size: 12px; font-weight: 700; color: #9a3412; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pk-win { display: block; font-size: 10.5px; color: #b45309; }
@media (max-width: 620px) {
  .cal-cell { min-height: 58px; padding: 4px; }
  .cal-tag, .cal-label { display: none; }
  .cal-pk-win { display: none; }
  .cal-pk-ref { font-size: 11px; }
}

/* ---------- Print (pick sheet) ---------- */
/* ---------- Quantity override (shipment form) ---------- */
.qty-override { border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; background: #f8fafc; }
.qty-override > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: 6px 0; list-style: revert; }
.qty-override[open] > summary { margin-bottom: 4px; }

/* ---------- Document lightbox ---------- */
.doclb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.doclb[hidden] { display: none; }
.doclb-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.doclb-panel { position: relative; z-index: 1; width: min(1000px, 94vw); height: min(92vh, 1100px);
  background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.doclb-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #0f172a; color: #fff; }
.doclb-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.doclb-tools { display: flex; gap: 8px; flex-shrink: 0; }
.doclb-tools .btn { font-size: 15px; }
.doclb-print { font-size: 16px !important; font-weight: 800; }
.doclb-frame { flex: 1; width: 100%; border: 0; background: #525659; }
@media (max-width: 560px) {
  .doclb-panel { width: 100vw; height: 100vh; border-radius: 0; }
  .doclb-head { flex-wrap: wrap; }
  .doclb-title { flex-basis: 100%; }
}

/* ---------- Photo lightbox (production issue pictures) ---------- */
.imglb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.imglb[hidden] { display: none; }
.imglb-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.85); }
.imglb-img { position: relative; z-index: 1; max-width: 92vw; max-height: 82vh;
  border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.5); background: #0f172a; object-fit: contain; }
.imglb-x { position: absolute; top: 14px; right: 16px; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 1; }
.imglb-x:hover { background: rgba(255,255,255,.24); }
.imglb-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1; }
.imglb-nav:hover { background: rgba(255,255,255,.24); }
.imglb-prev { left: 16px; }
.imglb-next { right: 16px; }
.imglb-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: linear-gradient(to top, rgba(15,23,42,.8), transparent); color: #fff; }
.imglb-title { font-weight: 700; font-size: 15px; }
.imglb-counter { font-size: 14px; color: #cbd5e1; }
.imglb-bar .imglb-open { margin-left: auto; }
.imglb-del { display: none; }
@media (max-width: 560px) {
  .imglb-img { max-width: 100vw; max-height: 78vh; border-radius: 0; }
  .imglb-nav { width: 44px; height: 44px; font-size: 26px; }
}

@media print {
  .topbar, .ship-actions, .btn, .toolbar, .no-print, .doclb { display: none !important; }
  body { background: #fff; font-size: 13px; }
  .wrap { max-width: none; padding: 0; }
  .card { border: none; padding: 0; }
  a { color: #000; }
}