/* ============================================================
   Raw Material & Production Management System
   Design tokens + component styles
   ============================================================ */

:root {
  --ink: #0d2b2a;
  --ink-soft: #14403e;
  --brand: #0d7b72;
  --brand-dark: #0a615a;
  --brand-tint: #e6f2f0;
  --surface: #f4f6f5;
  --card: #ffffff;
  --line: #e0e6e4;
  --line-soft: #eef2f1;
  --text: #12211f;
  --text-2: #5c6b68;
  --text-3: #8a9a97;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --green: #15803d;
  --green-bg: #dcfce7;
  --red: #b91c1c;
  --red-bg: #fee2e2;
  --blue: #1d4ed8;
  --blue-bg: #dbeafe;
  --violet: #6d28d9;
  --violet-bg: #ede9fe;
  --slate: #475569;
  --slate-bg: #e2e8f0;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(13, 43, 42, .06), 0 1px 3px rgba(13, 43, 42, .04);
  --shadow-lg: 0 10px 30px rgba(13, 43, 42, .12);
  --sidebar-w: 252px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Numeric data uses tabular mono so quantities and money align down a column */
.num, .table td.num, .table th.num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- Layout ---------------- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--ink);
  color: #cfe0de;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  transition: transform .2s ease;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar__mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: 15px;
  flex: 0 0 34px;
}
.sidebar__name { color: #fff; font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.sidebar__sub { font-size: 11px; color: #7fa5a1; letter-spacing: .02em; }

.sidebar__nav { padding: 12px 10px; overflow-y: auto; flex: 1; }
.sidebar__group {
  font-size: 10.5px;
  letter-spacing: .08em;
  color: #6f9490;
  padding: 14px 10px 6px;
  text-transform: uppercase;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #bcd3d0;
  font-size: 13.5px;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-link i { width: 16px; text-align: center; font-size: 13px; color: #7fa5a1; }
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link.is-active { background: var(--brand); color: #fff; font-weight: 500; }
.nav-link.is-active i { color: #fff; }
.nav-link__count {
  margin-left: auto;
  background: rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
}
.nav-link.is-active .nav-link__count { background: rgba(0, 0, 0, .22); }

.sidebar__foot {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  color: #6f9490;
}

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.topbar__crumb { font-size: 12px; color: var(--text-2); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.role-picker {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px 4px 10px;
  background: #fff;
}
.role-picker label { font-size: 11px; color: var(--text-2); }
.role-picker select { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; padding: 2px; }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}
.user-chip__av {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-dark);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.user-chip__name { font-size: 12.5px; font-weight: 500; }

.page { padding: 22px 24px 56px; }
.page__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page__head h1 { margin: 0 0 3px; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.page__head p { margin: 0; color: var(--text-2); font-size: 13px; max-width: 66ch; }
.page__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.hamburger { display: none; }

/* ---------------- Card ---------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.card__head h2 { margin: 0; font-size: 14.5px; font-weight: 600; }
.card__head p { margin: 2px 0 0; font-size: 12px; color: var(--text-2); }
.card__head .spacer { margin-left: auto; }
.card__body { padding: 16px; }
.card__foot { padding: 12px 16px; border-top: 1px solid var(--line-soft); background: #fbfcfc; border-radius: 0 0 var(--radius) var(--radius); }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------- KPI ---------------- */

.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.kpi__icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; font-size: 14px; flex: 0 0 34px;
}
.kpi__label { font-size: 12px; color: var(--text-2); }
.kpi__value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.15; margin-top: 2px;
}
.kpi__unit { font-size: 12px; color: var(--text-2); font-family: 'IBM Plex Sans', sans-serif; margin-left: 3px; }
.kpi__meta { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }

/* ---------------- Badge ---------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--pending    { background: var(--amber-bg);  color: var(--amber);  border-color: #fcd9a0; }
.badge--verified   { background: var(--green-bg);  color: var(--green);  border-color: #b3e6c5; }
.badge--approved   { background: var(--green-bg);  color: var(--green);  border-color: #b3e6c5; }
.badge--completed  { background: var(--green-bg);  color: var(--green);  border-color: #b3e6c5; }
.badge--rejected   { background: var(--red-bg);    color: var(--red);    border-color: #f5b9b9; }
.badge--issued     { background: var(--blue-bg);   color: var(--blue);   border-color: #b6cdf7; }
.badge--production { background: var(--blue-bg);   color: var(--blue);   border-color: #b6cdf7; }
.badge--packing    { background: var(--violet-bg); color: var(--violet); border-color: #d3c8f7; }
.badge--low        { background: var(--amber-bg);  color: var(--amber);  border-color: #fcd9a0; }
.badge--out        { background: var(--red-bg);    color: var(--red);    border-color: #f5b9b9; }
.badge--instock    { background: var(--green-bg);  color: var(--green);  border-color: #b3e6c5; }
.badge--neutral    { background: var(--slate-bg);  color: var(--slate);  border-color: #cbd5e1; }
.badge--purchased  { background: var(--brand-tint); color: var(--brand-dark); border-color: #bcded9; }
.badge--deactivated { background: var(--slate-bg);   color: var(--slate);    border-color: #cbd5e1; }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn i { font-size: 12px; }
.btn:hover { background: #f7f9f8; border-color: #cfd8d6; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--success { background: var(--green); border-color: var(--green); color: #fff; }
.btn--success:hover { background: #126b33; }
.btn--danger { background: #fff; border-color: #f0b6b6; color: var(--red); }
.btn--danger:hover { background: var(--red-bg); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: #eef2f1; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Forms ---------------- */

.field { display: block; margin-bottom: 13px; }
.field > label, .label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 5px;
  font-weight: 500;
}
.input, .select, .textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(13, 123, 114, .12); }
.textarea { min-height: 74px; resize: vertical; }
.hint { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }
.error-text { font-size: 11.5px; color: var(--red); margin-top: 4px; display: none; }
.field.has-error .input, .field.has-error .select { border-color: var(--red); }
.field.has-error .error-text { display: block; }

.toolbar {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.search {
  position: relative; flex: 1 1 240px; max-width: 340px;
}
.search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 12px; }
.search .input { padding-left: 31px; }

/* ---------------- Table ---------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .01em;
  padding: 10px 14px;
  background: #fafbfb;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbfb; }
.table tr.is-clickable { cursor: pointer; }
.table .cell-strong { font-weight: 600; }
.table .cell-sub { font-size: 11.5px; color: var(--text-2); }
.id-cell { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--brand-dark); font-weight: 500; }

.empty {
  padding: 42px 20px;
  text-align: center;
  color: var(--text-2);
}
.empty i { font-size: 24px; color: #c2cfcc; display: block; margin-bottom: 10px; }
.empty strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }

/* ---------------- Tabs ---------------- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 16px; overflow-x: auto; }
.tab {
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font: inherit; font-size: 13.5px;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); font-weight: 600; }
.tab__count {
  margin-left: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  background: var(--line-soft); border-radius: 10px; padding: 1px 6px; color: var(--text-2);
}
.tabpanel[hidden] { display: none; }

/* ---------------- Custody ledger: the accountability record ---------------- */

.custody {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.custody__step { padding: 12px 14px; border-right: 1px solid var(--line-soft); position: relative; }
.custody__step:last-child { border-right: 0; }
.custody__step.is-waiting { background: #fbfcfc; }
.custody__role {
  font-size: 11px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.custody__role i { color: var(--brand); }
.custody__qty { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 600; }
.custody__who { font-size: 12.5px; margin-top: 3px; }
.custody__when { font-size: 11.5px; color: var(--text-2); }
.custody__step.is-waiting .custody__qty { color: #b9c4c2; }

/* ---------------- Stepper ---------------- */

.stepper { position: relative; padding-left: 6px; }
.step { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line);
}
.step:last-child::before { display: none; }
.step.is-done::before { background: var(--brand); }
.step__dot {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  display: grid; place-items: center; font-size: 11px;
  background: #fff; border: 2px solid var(--line); color: var(--text-2);
  z-index: 1;
}
.step.is-done .step__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.is-current .step__dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px rgba(13, 123, 114, .12); }
.step__body { padding-top: 3px; flex: 1; min-width: 0; }
.step__title { font-weight: 600; font-size: 13.5px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.step__meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* Horizontal process rail on the dashboard */
.rail { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.rail__node {
  flex: 1 1 0; min-width: 132px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-right: 0;
  background: #fff;
  position: relative;
}
.rail__node:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.rail__node:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; }
.rail__node::after {
  content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--line); border-right: 1px solid var(--line); z-index: 2;
}
.rail__node:last-child::after { display: none; }
.rail__step { font-size: 11px; color: var(--text-2); font-family: 'IBM Plex Mono', monospace; }
.rail__name { font-weight: 600; font-size: 13.5px; margin: 3px 0 6px; }
.rail__count { font-family: 'IBM Plex Mono', monospace; font-size: 19px; font-weight: 600; }
.rail__label { font-size: 11.5px; color: var(--text-2); }

/* ---------------- Definition list ---------------- */

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; font-size: 13px; }
.dl dt { color: var(--text-2); }
.dl dd { margin: 0; font-weight: 500; }

.kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row span:first-child { color: var(--text-2); }
.kv-row span:last-child { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
.kv-row.is-total { border-top: 2px solid var(--line); border-bottom: 0; margin-top: 5px; padding-top: 10px; font-weight: 600; }
.kv-row.is-total span:last-child { font-size: 16px; color: var(--brand-dark); }

/* ---------------- Drawer + Modal ---------------- */

.overlay {
  position: fixed; inset: 0; background: rgba(13, 43, 42, .38);
  z-index: 80; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: #fff;
  z-index: 90;
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; }
.drawer__head h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.drawer__head p { margin: 2px 0 0; font-size: 12px; color: var(--text-2); }
.drawer__body { padding: 18px; overflow-y: auto; flex: 1; }
.drawer__foot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; background: #fbfcfc; }

.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.98);
  width: min(430px, calc(100% - 32px));
  background: #fff; border-radius: 12px; z-index: 95;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal__body { padding: 20px 20px 6px; }
.modal__body h3 { margin: 0 0 6px; font-size: 15.5px; }
.modal__body p { margin: 0; color: var(--text-2); font-size: 13px; }
.modal__foot { padding: 14px 20px 18px; display: flex; gap: 9px; justify-content: flex-end; }

/* Row editor used for material / ingredient line items */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row-item {
  display: grid;
  grid-template-columns: 1fr 92px 76px 34px;
  gap: 8px;
  align-items: center;
}
.row-item .icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--red); cursor: pointer; display: grid; place-items: center;
}
.row-item .icon-btn:hover { background: var(--red-bg); border-color: #f0b6b6; }
.rows-head {
  display: grid; grid-template-columns: 1fr 92px 76px 34px; gap: 8px;
  font-size: 11px; color: var(--text-2); font-weight: 500; margin-bottom: 2px;
}

/* ---------------- Toast ---------------- */

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ink); color: #eaf2f1;
  padding: 11px 14px; border-radius: 9px;
  box-shadow: var(--shadow-lg);
  font-size: 13px; max-width: 340px;
  animation: toast-in .18s ease;
}
.toast i { margin-top: 2px; }
.toast--success i { color: #6ee7a8; }
.toast--error i { color: #fca5a5; }
.toast--info i { color: #7dd3d0; }
.toast strong { display: block; font-weight: 600; }
.toast span { color: #a9c2bf; font-size: 12px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------- Misc ---------------- */

.note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--brand-tint);
  border: 1px solid #bcded9;
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: #10504b;
}
.note i { margin-top: 2px; }
.note--warn { background: var(--amber-bg); border-color: #fcd9a0; color: #7c3d06; }

.section-title {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  margin: 0 0 9px;
}

.divider { height: 1px; background: var(--line-soft); margin: 16px 0; }

.progress { height: 6px; background: var(--line-soft); border-radius: 20px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--brand); border-radius: 20px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f2f5f4; border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 8px; font-size: 12px;
}

.print-only { display: none; }

/* ---------------- Responsive ---------------- */

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.is-open { transform: translateX(0); }
  .main { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custody { grid-template-columns: 1fr; }
  .custody__step { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 640px) {
  .page { padding: 16px 14px 48px; }
  .topbar { padding: 10px 14px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .role-picker label { display: none; }
  .user-chip__name { display: none; }
  .row-item, .rows-head { grid-template-columns: 1fr 74px 62px 32px; }
  .toasts { left: 14px; right: 14px; align-items: stretch; }
  .toast { max-width: none; }
}

@media print {
  .sidebar, .topbar, .page__actions, .btn { display: none !important; }
  .main { margin-left: 0; }
  body { background: #fff; }
  .print-only { display: block; }
}

/* ============================================================
   Flow-centric layout additions
   ============================================================ */

/* Sub-navigation inside a page: tabs sit directly under the title */
.subnav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
}
.subnav .tab { padding: 9px 14px; }

/* Compact stat row — replaces stacked KPI cards where a strip will do */
.statrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 18px;
}
.stat {
  flex: 1 1 0;
  min-width: 150px;
  padding: 14px 16px;
  border-right: 1px solid var(--line-soft);
  display: block;
}
.stat:last-child { border-right: 0; }
.stat:hover { background: #fafbfb; }
.stat__label { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.stat__label i { font-size: 11px; }
.stat__value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.15; margin-top: 5px;
}
.stat__value.is-zero { color: #b9c4c2; }
.stat__unit { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; color: var(--text-2); margin-left: 3px; }
.stat--alert .stat__value { color: var(--amber); }
.stat--stop .stat__value { color: var(--red); }
.stat--go .stat__value { color: var(--green); }

/* Horizontal batch stepper */
.hstepper {
  display: flex;
  overflow-x: auto;
  padding: 4px 2px 2px;
  gap: 0;
  scrollbar-width: thin;
}
.hstep {
  flex: 1 1 0;
  min-width: 104px;
  background: none;
  border: 0;
  font: inherit;
  padding: 10px 6px 12px;
  cursor: pointer;
  text-align: center;
  position: relative;
  color: var(--text-2);
}
.hstep::before,
.hstep::after {
  content: '';
  position: absolute;
  top: 27px;
  height: 2px;
  background: var(--line);
  width: 50%;
}
.hstep::before { left: 0; }
.hstep::after { right: 0; }
.hstep:first-child::before,
.hstep:last-child::after { display: none; }
.hstep.is-done::before,
.hstep.is-done::after,
.hstep.is-current::before { background: var(--brand); }

.hstep__dot {
  width: 30px; height: 30px; border-radius: 50%;
  margin: 0 auto 8px;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--line);
  font-size: 12px;
  position: relative; z-index: 1;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.hstep.is-done .hstep__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.hstep.is-current .hstep__dot { border-color: var(--brand); color: var(--brand-dark); box-shadow: 0 0 0 4px rgba(13, 123, 114, .13); }
.hstep.is-na .hstep__dot { border-style: dashed; color: #b9c4c2; }
.hstep__label { font-size: 12px; line-height: 1.3; display: block; }
.hstep.is-done .hstep__label,
.hstep.is-current .hstep__label { color: var(--text); font-weight: 600; }
.hstep[aria-selected="true"] .hstep__label { text-decoration: underline; text-underline-offset: 3px; }
.hstep[aria-selected="true"] .hstep__dot { box-shadow: 0 0 0 4px rgba(13, 123, 114, .13); }
.hstep__state { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 2px; }

/* Next-action banner: the one thing to do now */
.nextbar {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  background: var(--ink);
  color: #dbeae8;
  border-radius: var(--radius);
  padding: 13px 16px;
  margin-bottom: 16px;
}
.nextbar__icon {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px;
  background: rgba(255, 255, 255, .1); color: #7dd3d0;
  display: grid; place-items: center;
}
.nextbar__label { font-size: 11px; color: #7fa5a1; }
.nextbar__text { font-size: 13.5px; color: #fff; font-weight: 500; }
.nextbar .btn-row { margin-left: auto; }
.nextbar--done { background: var(--green-bg); color: #14532d; border: 1px solid #b3e6c5; }
.nextbar--done .nextbar__icon { background: #fff; color: var(--green); }
.nextbar--done .nextbar__label { color: #3f7a55; }
.nextbar--done .nextbar__text { color: #14532d; }

/* Batch page: content plus a persistent snapshot rail */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 16px; align-items: start; }

/* Activity feed */
.feed { display: flex; flex-direction: column; }
.feed__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.feed__item:last-child { border-bottom: 0; }
.feed__icon {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display: grid; place-items: center; font-size: 11px;
}
.feed__text { font-size: 13px; }
.feed__text strong { font-weight: 600; }
.feed__when { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }

/* Progress rows: batch name, bar, stage — no table needed */
.prow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.prow:last-child { border-bottom: 0; }
.prow:hover { background: #fafbfb; }
.prow__main { min-width: 0; flex: 1 1 210px; }
.prow__name { font-weight: 600; font-size: 13.5px; }
.prow__meta { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.prow__bar { flex: 1 1 150px; min-width: 110px; }
.prow__pct { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* Progressive disclosure */
details.disclose { border-top: 1px solid var(--line-soft); }
details.disclose > summary {
  cursor: pointer; list-style: none;
  padding: 11px 16px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::before {
  content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  transition: transform .15s;
}
details.disclose[open] > summary::before { transform: rotate(90deg); }
details.disclose > summary:hover { color: var(--text); background: #fafbfb; }
details.disclose > .disclose__body { padding: 0 16px 16px; }

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .hstep { min-width: 96px; }
}
@media (max-width: 640px) {
  .stat { min-width: 50%; border-bottom: 1px solid var(--line-soft); }
  .nextbar .btn-row { margin-left: 0; width: 100%; }
}

/* ============================================================
   Horizontal batch stepper (added in the IA redesign)
   ============================================================ */

.hrail {
  display: flex;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}

.hstep {
  flex: 1 0 auto;
  min-width: 118px;
  padding: 12px 14px 11px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-bottom: 3px solid transparent;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background .15s, color .15s;
}
.hstep:last-child { border-right: 0; }
.hstep:hover { background: #f7f9f8; }
.hstep.is-active { background: var(--brand-tint); border-bottom-color: var(--brand); color: var(--text); }

.hstep__dot {
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  background: #fff;
}
.hstep.is-done .hstep__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.hstep.is-current .hstep__dot { border-color: var(--brand); color: var(--brand-dark); }
.hstep.is-skipped .hstep__dot { border-style: dashed; }

.hstep__label { font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.hstep__state { font-size: 10.5px; color: var(--text-2); }
.hstep.is-done .hstep__label { color: var(--text); }

/* Sticky context bar on the batch page */
.batchbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  box-shadow: var(--shadow);
}
.batchbar__id { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--brand-dark); font-weight: 500; }
.batchbar__title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.batchbar__meta { font-size: 12px; color: var(--text-2); }
.batchbar__stat { text-align: right; }
.batchbar__stat .kpi__value { font-size: 16px; }

/* "Do this next" banner */
.nextup {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--brand);
  background: var(--brand-tint);
  color: #10504b;
  border-radius: var(--radius);
  padding: 12px 15px;
}
.nextup__icon {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px;
}
.nextup__text strong { display: block; font-size: 13.5px; }
.nextup__text span { font-size: 12.5px; }
.nextup .btn { margin-left: auto; }
.nextup--done { border-color: #b3e6c5; background: var(--green-bg); color: #14532d; }
.nextup--done .nextup__icon { background: var(--green); }
.nextup--blocked { border-color: #fcd9a0; background: var(--amber-bg); color: #7c3d06; }
.nextup--blocked .nextup__icon { background: var(--amber); }

/* ============================================================
   Login page
   ============================================================ */

.authpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
          radial-gradient(circle at 15% 10%, rgba(13, 123, 114, .07), transparent 45%),
          var(--surface);
}

.authcard {
  width: 100%;
  max-width: 396px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(13, 43, 42, .10);
  padding: 30px 28px 26px;
}

.authcard__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.authcard__mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  font-size: 17px;
}
.authcard__brandname { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.authcard__brandsub { font-size: 11px; color: var(--text-2); }

.authcard h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.authcard__lead { margin: 0 0 20px; font-size: 12.5px; color: var(--text-2); }

.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 40px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; background: none; cursor: pointer;
  color: var(--text-2); border-radius: 7px;
  display: grid; place-items: center;
}
.pw-toggle:hover { background: #f0f4f3; color: var(--text); }

.auth-error {
  display: none;
  align-items: flex-start; gap: 9px;
  background: var(--red-bg);
  border: 1px solid #f5b9b9;
  color: var(--red);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.auth-error.is-shown { display: flex; }

.auth-success {
  display: none;
  align-items: flex-start; gap: 9px;
  background: var(--green-bg);
  border: 1px solid #b3e6c5;
  color: var(--green);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.auth-success.is-shown { display: flex; }

.authcard__foot {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 11.5px;
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.authcard__foot i { color: var(--brand); }

/* ============================================================
   Dashboard background — scoped to body.dash-bg, which only
   pages/dashboard.html sets. No other page is affected.

   The moving part is a canvas drawn by assets/js/dashboard-bg.js —
   a line-art production line running raw material through a machine
   to packing and finished goods. This block only positions it and
   lays a very faint tint under it, so the page still looks finished
   if the script does not run.
   ============================================================ */

body.dash-bg {
  background-image:
          radial-gradient(ellipse 70% 50% at 78% 4%, rgba(13, 123, 114, .045), transparent 60%),
          radial-gradient(ellipse 60% 45% at 4% 92%, rgba(13, 43, 42, .035), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#dashFactory {
  position: fixed;
  inset: 0;
  z-index: -1;              /* behind every element, above the page colour */
  pointer-events: none;     /* never intercepts a click or a scroll */
  display: block;
}

/* The dashboard's own surfaces let a little of the network through, so
   the field reads as one continuous background instead of stopping at
   each card edge. Kept high enough that text contrast is unaffected,
   and scoped to body.dash-bg so no other page changes.
   Nothing here animates — only the canvas behind them moves. */
body.dash-bg .card,
body.dash-bg .kpi,
body.dash-bg .stat {
  background-color: rgba(255, 255, 255, .88);
}

body.dash-bg .card__foot {
  background-color: rgba(251, 252, 252, .82);
}

/* Narrow screens: lighter still, so text stays crisp on small panels */
@media (max-width: 640px) {
  #dashFactory { opacity: .7; }
  body.dash-bg .card,
  body.dash-bg .kpi,
  body.dash-bg .stat { background-color: rgba(255, 255, 255, .94); }
}

/* Accessibility: the script draws one still frame and starts no loop.
   This is a belt-and-braces softening for that case. */
@media (prefers-reduced-motion: reduce) {
  #dashFactory { opacity: .5; }
}
/* ============================================================
   Invoice sheet (Finished Goods → Open)
   ============================================================ */
.invoice-sheet__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 2px solid var(--ink);
}
.invoice-sheet__brand { font-weight: 600; font-size: 15px; color: var(--ink); }
.invoice-sheet__sub { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-top: 2px; }
.invoice-sheet__meta { display: grid; gap: 8px; text-align: right; }
.invoice-sheet__meta div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.invoice-sheet__meta span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.invoice-sheet__meta .input { width: 160px; }
.invoice-sheet__totals { margin-left: auto; width: 260px; display: grid; gap: 8px; }
.invoice-sheet__totals > div { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.invoice-sheet__totals span { color: var(--text-2); }
.invoice-sheet__grand { border-top: 1px solid var(--line); padding-top: 8px; font-size: 15px; }
.invoice-sheet__grand strong { color: var(--brand-dark); }

/* Printing an invoice: only the invoice sheet itself reaches paper.
   Sidebar, topbar, the Finished Goods table behind the drawer, and
   the drawer's own head/footer/dispatch-picker are all hidden for
   the duration of the print, then restored automatically. */
@media print {
  body.printing-invoice > *:not([data-drawer]) { display: none !important; }
  body.printing-invoice [data-drawer-overlay] { display: none !important; }
  body.printing-invoice [data-drawer] {
    position: static; box-shadow: none; border: 0;
    width: 100%; max-width: none; transform: none; height: auto; inset: auto;
  }
  body.printing-invoice .drawer__head,
  body.printing-invoice .drawer__foot,
  body.printing-invoice .no-print { display: none !important; }
  body.printing-invoice .drawer__body { padding: 0; overflow: visible; }
  body.printing-invoice .invoice-sheet { padding: 12mm; }
  @page { size: A4; margin: 0; }
}

/* ============================================================
   Dispatch History report (Finished Goods → View → Download PDF)
   ============================================================ */
.report-sheet__head {
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 2px solid var(--ink);
}
.report-sheet__brand { font-weight: 600; font-size: 15px; color: var(--ink); }
.report-sheet__sub { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-top: 2px; }
.report-sheet__foot { margin-top: 20px; font-size: 12px; color: var(--text-2); display: grid; gap: 4px; }

/* Finished Goods multi-select: the checkbox column of the ledger table. */
.table .check-col { width: 38px; text-align: center; }
.table .check-col input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand, #0d7b72); cursor: pointer; }
.table .check-col input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .4; }