/* ============================================================
   CRG — Concord-Rovenka Gateway
   Design language: freight manifest / warehouse signage.
   Tracking numbers read like stenciled crate marks; statuses
   read like rubber ink stamps. Amber (#ffb100) is the working
   color of hazard tape and shipping labels — used deliberately,
   not decoratively.
   ============================================================ */

:root {
  --amber: #ffb100;
  --amber-dark: #cc8d00;
  --ink: #1a1d29;
  --ink-soft: #3d4152;
  --paper: #f7f6f2;
  --surface: #ffffff;
  --border: #e2ded4;
  --border-strong: #c9c3b3;
  --green: #2d6a4f;
  --green-bg: #e8f3ee;
  --red: #c1121f;
  --red-bg: #fbe9e9;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(26,29,41,0.06), 0 2px 8px rgba(26,29,41,0.04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

.brand-hero-title {
  text-transform: none;
  letter-spacing: 0;
}

.mono {
  font-family: var(--mono);
}

a { color: inherit; }

/* ---------- Layout shell ---------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--ink);
  color: #fff;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.brand .mark {
  width: 28px;
  height: 28px;
  background: var(--amber);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
}

.brand-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 2px;
}

.brand-module {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand-module-full { display: none; }
.brand-module-short { display: inline; }

@media (min-width: 641px) {
  .brand-module-short { display: none; }
  .brand-module-full { display: inline; }
}

.user-chip {
  min-width: 0;
}
.user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.role-badge {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255,177,0,0.15);
  color: var(--amber);
  border: 1px solid rgba(255,177,0,0.4);
}

.logout-link {
  color: #b8bccb;
  text-decoration: none;
  font-size: 13px;
}
.logout-link:hover { color: #fff; }

.back-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.back-btn:hover {
  background: rgba(255,177,0,0.15);
  border-color: var(--amber);
  color: var(--amber);
}

.main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-head h1 {
  font-size: 30px;
}

.page-head .eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--amber-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--amber);
  color: var(--ink);
}
.btn-primary:hover { background: var(--amber-dark); }

/* Unsaved changes — draws attention to a Save button once a form's fields
   have actually been touched, so changes don't get accidentally lost. */
/* Collapsible variant rows — squeezed to just a summary line by default,
   click to expand and see/edit full details. */
/* Back link, styled as an actual bordered button — the plain text version
   wasn't recognizable as tappable on mobile. */
.back-link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  margin-bottom: 10px;
}
.back-link-button:hover { border-color: var(--amber); color: var(--amber); }
@media (max-width: 640px) {
  .back-link-button { padding: 9px 16px; font-size: 14px; }
}

.collapsible-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.collapsible-row-header .chevron {
  transition: transform 0.15s ease;
  font-size: 11px;
  color: #8a8f9e;
  flex: 0 0 auto;
  margin-left: 8px;
}
.collapsible-row-header.open .chevron { transform: rotate(90deg); }
.collapsible-row-body { display: none; margin-top: 14px; }
.collapsible-row-body.open { display: block; }

.btn-unsaved {
  animation: btn-unsaved-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(232,135,30,0.6);
}
@keyframes btn-unsaved-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232,135,30,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(232,135,30,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,135,30,0); }
}

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); }

.btn-danger {
  background: var(--red);
  color: #fff;
}

.btn-success {
  background: var(--green);
  color: #fff;
}

.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.card-pad { padding: 22px; }

/* ---------- Stamp-style status badges ---------- */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
}

.stamp-processing { color: var(--amber-dark); background: rgba(255,177,0,0.1); }
.stamp-complete { color: var(--green); background: var(--green-bg); }
.stamp-dispatch { color: var(--ink-soft); background: #eceef2; border-color: var(--border-strong); }
.stamp-locked { color: var(--red); background: var(--red-bg); }

/* ---------- Crate-mark labels (waybill / CTN) ---------- */
.crate-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 4px;
  background: #fcfbf8;
  color: var(--ink-soft);
}

/* ---------- Forms ---------- */
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.req::after {
  content: ' *';
  color: var(--red);
}

/* Every text-like input type is listed, including the date and time family.
   An input whose type is missing from this list doesn't fall back to
   something close — it falls back to raw browser chrome, which is grey,
   boxy and nothing like the rest of a form. That is what happened to
   <input type="date"> on every filter bar in the system. */
input[type=text], input[type=number], input[type=password], input[type=email],
input[type=tel], input[type=url], input[type=search],
input[type=date], input[type=datetime-local], input[type=month],
input[type=time], input[type=week],
textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: var(--body);
  background: var(--surface);
  color: var(--ink);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}

/* ---------- Date and time inputs ----------
   appearance:none removes the platform's own frame (an inset bevel on
   Windows, a rounded pill on iOS) so the border above is the only one drawn.
   The digits are set in the mono face for the same reason every other figure
   in the system is: 08/13/2026 should line up with the dates in the table
   underneath it. min-height keeps the control the same height as a text
   input once the native frame is gone. */
input[type=date], input[type=datetime-local], input[type=month],
input[type=time], input[type=week] {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  min-height: 44px;
  cursor: text;
}

/* The calendar button. Kept quiet until pointed at, so a row of filters
   doesn't read as a row of icons. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.45;
  padding: 3px;
  margin-left: 4px;
  border-radius: 4px;
  transition: opacity 0.15s, background 0.15s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=week]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(255,177,0,0.22);
}

/* Chrome pads its internal date fields and draws spinners that no other
   input in the system has. */
input[type=date]::-webkit-datetime-edit,
input[type=datetime-local]::-webkit-datetime-edit,
input[type=month]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit { padding: 0; }
input[type=date]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=date]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-inner-spin-button,
input[type=month]::-webkit-inner-spin-button,
input[type=time]::-webkit-inner-spin-button,
input[type=week]::-webkit-inner-spin-button { display: none; }

/* The segment being edited, so tabbing through day/month/year is visible. */
input[type=date]::-webkit-datetime-edit-day-field:focus,
input[type=date]::-webkit-datetime-edit-month-field:focus,
input[type=date]::-webkit-datetime-edit-year-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-day-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-month-field:focus,
input[type=datetime-local]::-webkit-datetime-edit-year-field:focus,
input[type=time]::-webkit-datetime-edit-hour-field:focus,
input[type=time]::-webkit-datetime-edit-minute-field:focus {
  background: rgba(255,177,0,0.25);
  color: var(--ink);
  border-radius: 3px;
  outline: none;
}

.field { margin-bottom: 18px; }

.scan-row {
  display: flex;
  gap: 8px;
}
.scan-row input { flex: 1; }

.scan-btn {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--amber);
  border: none;
  border-radius: var(--radius);
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

/* ---------- Lists / rows ---------- */
.row-list { display: flex; flex-direction: column; gap: 10px; }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.list-row:hover { border-color: var(--amber); }

.list-row .meta { display: flex; flex-direction: column; gap: 4px; }
.list-row .title { font-weight: 600; font-size: 15px; }
.list-row .sub { font-size: 12.5px; color: black; font-weight: 600px; font-family: var(--mono); }
.list-row .right { display: flex; align-items: center; gap: 12px; }

/* ---------- Dashboard stat tiles ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stat-tile:hover {
  box-shadow: 0 4px 14px rgba(26,29,41,0.12);
  transform: translateY(-1px);
}
.stat-tile .num {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.stat-tile .lbl {
  font-size: 12px;
  color: #8a8f9e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
  text-decoration: none;
}

.dispute-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #c1121f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------- Sign-in ------------------------------------------------------
   CRV OmniLink's sign-in, in nerp's colours. Wide screens: the slate brand
   panel (includes/signin_hero.php) on the left, the form in a card on a light
   page on the right. Phones: the card alone on slate, the NIRASU IT credit
   under it. The red is the logo's.
   ------------------------------------------------------------------------ */
.signin {
  --si-red: #da1c23;
  --si-red-dk: #b9151c;
  --si-ink: #0f172a;
  --si-muted: #64748b;
  --si-line: #e2e8f0;

  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(min(440px, 100%), 1fr);
  background: #f8fafc;
  color: var(--si-ink);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---- Left: the brand ---- */
.signin-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px clamp(36px, 7vw, 104px);
  background: #0f172a;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(218,28,35,0.30) 0, transparent 46%),
    radial-gradient(circle at 88% 88%, rgba(59,130,246,0.18) 0, transparent 44%);
  color: #fff;
}
/* Two soft shapes from the logo mark: its circle and a rounded square. */
.signin-brand::before, .signin-brand::after { content: ''; position: absolute; pointer-events: none; }
.signin-brand::before { width: 480px; height: 480px; right: -160px; top: -150px; border-radius: 50%; background: rgba(218,28,35,0.12); }
.signin-brand::after  { width: 340px; height: 340px; left: -120px; bottom: -130px; border-radius: 72px; background: rgba(148,163,184,0.08); }
.signin-logo { position: relative; z-index: 1; display: block; width: min(437px, 100%); height: auto; }
.signin-line { position: relative; z-index: 1; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
               max-width: 460px; color: #a9b4c6; font-size: 15px; line-height: 1.7; letter-spacing: 0.02em; }
/* The NIRASU IT credit at the foot of the panel: the logo alone. */
.signin-credit { position: absolute; z-index: 1; left: clamp(36px, 7vw, 104px); bottom: 36px; display: flex; align-items: baseline; gap: 10px;
                 color: #8f9bb0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.signin-credit img { display: block; height: 18px; width: auto; }

/* ---- Right: the form, in a card ---- */
.signin-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.signin-inner {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--si-line);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: 0 18px 48px rgba(15,23,42,0.10);
}
.signin-cardlogo { display: none; height: 50px; width: auto; margin: 0 0 10px; }
.signin-inner h2 {
  font: 800 24px/1.2 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -0.02em; text-transform: none; color: var(--si-ink); margin: 0;
}
.signin-inner .hint { font-size: 13px; color: var(--si-muted); margin: 6px 0 26px; }
.signin-inner .field { margin-bottom: 16px; }
.signin-inner label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.signin-inner input {
  width: 100%; height: 46px; box-sizing: border-box;
  font: inherit; font-size: 15px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: var(--si-ink);
  transition: border-color .14s, box-shadow .14s;
}
.signin-inner input:focus { outline: 0; border-color: var(--si-red); box-shadow: 0 0 0 3px rgba(218,28,35,0.15); }

.signin-go {
  width: 100%; height: 46px; margin-top: 8px;
  font: inherit; font-size: 14px; font-weight: 700;
  border: 0; border-radius: 10px;
  background: var(--si-red); color: #fff;
  cursor: pointer;
  transition: background .14s, box-shadow .14s;
}
.signin-go:hover { background: var(--si-red-dk); box-shadow: 0 8px 18px rgba(218,28,35,0.28); }
.signin-go:focus-visible { outline: 3px solid rgba(218,28,35,0.35); outline-offset: 2px; }

.signin-note { font-size: 12.5px; line-height: 1.6; color: var(--si-muted); margin: 18px 0 0; }
.signin-inner a { color: var(--si-red); text-decoration: none; font-weight: 600; }
.signin-inner a:hover { text-decoration: underline; }

/* ---- Phones: the card alone on slate, the credit under it ---- */
@media (max-width: 900px) {
  .signin {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    min-height: 100dvh;
    background: #0f172a;
    background-image:
      radial-gradient(circle at 15% 15%, rgba(218,28,35,0.32) 0, transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(59,130,246,0.20) 0, transparent 45%);
  }
  .signin-brand { order: 2; padding: 0 24px 28px; background: none; align-items: center; }
  .signin-brand::before, .signin-brand::after, .signin-logo, .signin-line { display: none; }
  .signin-credit { position: static; }
  .signin-cardlogo { display: block; }
  .signin-inner { border: 0; box-shadow: 0 24px 60px rgba(0,0,0,0.35); padding: 32px 26px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .signin-go, .signin-inner input { transition: none; }
}

.error-box {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(193,18,31,0.3);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.info-box {
  background: rgba(255,177,0,0.1);
  border: 1px solid rgba(255,177,0,0.35);
  color: var(--amber-dark);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,29,41,0.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px;
}
.modal h3 { font-size: 20px; margin-bottom: 18px; }
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: #8a8f9e;
}
.empty-state .icon { font-size: 36px; margin-bottom: 10px; }

/* ---------- Search / filter bar ---------- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.filter-bar input, .filter-bar select { width: auto; min-width: 180px; }
.filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  font-size: 13px;
}
.filter-checkbox input[type="checkbox"] { width: auto; flex: 0 0 auto; }
@media (max-width: 640px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select { min-width: 0; width: 100%; }
  .filter-checkbox { width: auto; }
}

/* ---------- Photo thumbnails ---------- */
.thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #eee;
}

.product-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
}
.product-card .pname { font-weight: 600; font-size: 14.5px; }
.product-card .pdetail { font-size: 12.5px; color: #8a8f9e; margin-top: 3px; }

/* ---------- Weight banner (Ready for Dispatch calc) ---------- */
.calc-banner {
  background: var(--paper);
  border: 1.5px dashed var(--border-strong);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
  text-align: center;
}
.calc-banner .val {
  font-family: var(--display);
  font-size: 30px;
  color: var(--amber-dark);
}
.calc-banner .lbl {
  font-size: 12px;
  color: #8a8f9e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .main { padding: 20px 14px 50px; }
  .page-head h1 { font-size: 24px; }
  .list-row { flex-direction: column; align-items: flex-start; }
  .list-row .right { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .back-btn { display: none; }

  .topbar { padding: 0 12px; }
  .role-badge { display: none; }
  .user-name { max-width: 90px; }
  .user-chip { gap: 8px; }

  .row-actions { flex-wrap: wrap; width: 100%; }
  .row-actions .btn { flex: 1 1 auto; }
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ---------- Module tiles (Hub, and any module's own sub-navigation) ---------- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.module-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.module-tile:hover {
  border-color: var(--amber);
  box-shadow: 0 4px 14px rgba(26,29,41,0.12);
  transform: translateY(-2px);
}
.module-tile-disabled {
  opacity: 0.55;
  cursor: default;
}
.module-tile-disabled:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}
.module-icon { font-size: 34px; margin-bottom: 10px; }
.module-label { font-family: var(--display); font-size: 22px; font-weight: 700; }
.module-sub { font-size: 12.5px; color: #8a8f9e; margin-top: 4px; }

/* ---------- Kanban board (used by SRS dashboard and CRG's SRS Tracker) ---------- */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}
.kanban-column {
  flex: 0 0 280px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 200px;
}
.kanban-column-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
}
.kanban-column-title { font-family: var(--display); font-size: 14px; font-weight: 700; }
.kanban-column-count {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
}
.kanban-column-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.kanban-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease;
}
.kanban-card:hover { border-color: var(--amber); }
.kanban-card-title { font-weight: 700; font-size: 13.5px; font-family: var(--display); }
.kanban-card-sub { font-size: 11.5px; color: #8a8f9e; margin-top: 3px; }
.kanban-card-dispute { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: #c1121f; }
.kanban-column-empty { padding: 20px 14px; text-align: center; font-size: 12.5px; color: #8a8f9e; }

.kanban-column[data-status="in_transit"] .kanban-column-head { background: #f3e9d8; }
.kanban-column[data-status="open_to_review"] .kanban-column-head,
.kanban-column[data-status="reviewing"] .kanban-column-head { background: #e4f0f9; }
.kanban-column[data-status="fully_received"] .kanban-column-head,
.kanban-column[data-status="verified"] .kanban-column-head { background: #e2f0e8; }
.kanban-column[data-status="partially_received"] .kanban-column-head { background: #fbe9e9; }
.kanban-column[data-status="disputed"] .kanban-column-head { background: #f8d7da; }

@media (max-width: 640px) {
  .kanban-column { flex: 0 0 240px; }
}

/* ---------- Live pill (a page that refreshes itself; assets/js/live.js) ---------- */
/* The pill is what says "you do not need to reload"; the row flash is what
   says which line is the new one. */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #8a8f9e;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--surface);
  user-select: none;
  white-space: nowrap;
}
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8f9e; }
.live-pill.is-on .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(45,106,79,0.18); }
.live-pill.is-off .dot { background: var(--amber-dark); }
.live-pill.is-stopped { cursor: pointer; color: var(--red); border-color: rgba(193,18,31,0.35); }
.live-pill.is-stopped .dot { background: var(--red); }

tr.is-new > td { animation: live-new 2.5s ease-out; }
@keyframes live-new {
  from { background: rgba(78,168,222,0.28); }
  to   { background: transparent; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- WMS Dark Theme — scoped to .wms-dark, doesn't touch shared vars ---------- */
.wms-dark { background: #0f1115; min-height: 100vh; }
.wms-dark .page-head h1, .wms-dark h1, .wms-dark h2 { color: #f0f0f0; }
.wms-dark .eyebrow { color: #e8871e; }
.wms-dark .card, .wms-dark .list-row, .wms-dark .product-card, .wms-dark .stat-tile {
  background: #1a1d24;
  border-color: #2a2e38;
  color: #d0d3da;
}
.wms-dark .list-row:hover, .wms-dark .product-card:hover { border-color: #e8871e; }
.wms-dark .list-row .title, .wms-dark .product-card .pname, .wms-dark .meta .title { color: #f0f0f0; }
.wms-dark .list-row .sub, .wms-dark .product-card .pdetail, .wms-dark .meta .sub { color: #8a8f9e; }
.wms-dark input, .wms-dark select, .wms-dark textarea {
  background: #22262f;
  border-color: #3a3f4a;
  color: #f0f0f0;
}
.wms-dark input:focus, .wms-dark select:focus, .wms-dark textarea:focus {
  border-color: #e8871e;
  box-shadow: 0 0 0 1px #e8871e;
}
/* Chrome draws the calendar glyph as dark ink, which disappears entirely on
   a dark field. Inverting it is the only way to recolour it. */
.wms-dark input[type=date]::-webkit-calendar-picker-indicator,
.wms-dark input[type=datetime-local]::-webkit-calendar-picker-indicator,
.wms-dark input[type=month]::-webkit-calendar-picker-indicator,
.wms-dark input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
}
.wms-dark input[type=date]::-webkit-calendar-picker-indicator:hover,
.wms-dark input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
.wms-dark input[type=month]::-webkit-calendar-picker-indicator:hover,
.wms-dark input[type=time]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(232,135,30,0.3);
}
.wms-dark label { color: #b8bccb; }
.wms-dark .btn-outline { border-color: #3a3f4a; color: #d0d3da; background: transparent; }
.wms-dark .btn-outline:hover { border-color: #e8871e; color: #e8871e; }
.wms-dark .btn-primary { background: #e8871e; color: #14171f; }
.wms-dark .btn-primary:hover { background: #cf7615; }
.wms-dark .empty-state { color: #8a8f9e; }
.wms-dark .crate-label { background: #22262f; border-color: #3a3f4a; color: #b8bccb; }
.wms-dark .stamp-complete { background: rgba(45,106,79,0.25); }
.wms-dark .stamp-processing { background: rgba(232,135,30,0.15); color: #e8871e; }
.wms-dark .module-tile { background: #1a1d24; border-color: #2a2e38; color: #d0d3da; }
.wms-dark .module-tile:hover { border-color: #e8871e; }
.wms-dark .module-label { color: #f0f0f0; }
.wms-dark .module-sub { color: #8a8f9e; }

/* ---------- Rose bloom (box-added success) ---------- */
.rose-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 6px;
}

.rose-petal {
  transform-origin: 0px 2px;
  animation: petal-bloom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.rose-petal-1 { animation-delay: 0.05s; }
.rose-petal-2 { animation-delay: 0.12s; }
.rose-petal-3 { animation-delay: 0.19s; }
.rose-petal-4 { animation-delay: 0.26s; }

.rose-leaf {
  transform-origin: 0px 0px;
  animation: leaf-sway 0.5s ease-out both;
}
.rose-leaf-2 { animation-delay: 0.08s; }

@keyframes petal-bloom {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes leaf-sway {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}