/* ==========================================================================
   components.css : cards, tables, forms, buttons, steppers, pills, tabs,
   filters, timelines, empty states, guided help and the pain point overlay.

   Second revision. Cards are white with a generous corner and a soft
   double shadow, no outline. Metric tiles carry a small uppercase label,
   one large figure and the change as a chip in the corner. The navy
   gradient document header is replaced by a light panel. Navy stays on
   the mark and on print; everything interactive uses the blue accent.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-4); border-radius: var(--r-md);
  border: 1px solid transparent; font-size: var(--fs-13); font-weight: var(--fw-med);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ac-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--ac-700); }
.btn-teal { background: var(--ac-600); color: #fff; }
.btn-teal:hover:not(:disabled) { background: var(--ac-700); }
.btn-ghost { background: var(--bg-surface); color: var(--tx-body); border-color: var(--line); box-shadow: var(--sh-1); }
.btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); background: var(--bg-hover); }
.btn-quiet { background: transparent; color: var(--tx-muted); }
.btn-quiet:hover:not(:disabled) { background: var(--bg-hover); color: var(--tx-body); }
.btn-danger { background: var(--crit-500); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--crit-700); }
.btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-12); }
.btn-lg { height: 44px; padding: 0 var(--sp-6); font-size: var(--fs-15); }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }

/* ---- Cards ---------------------------------------------------------------
   White, generously rounded, lifted off the grey ground by a soft double
   shadow rather than an outline. */
.card {
  background: var(--bg-surface); border: 0;
  border-radius: var(--r-lg); box-shadow: var(--sh-card);
}
.card + .card { margin-top: var(--sp-5); }
.card-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.card-head h2, .card-head h3 { font-size: var(--fs-16); flex: 1; min-width: 160px; font-weight: var(--fw-semi); letter-spacing: -.2px; }
.card-head .ch-sub { font-size: var(--fs-12); color: var(--tx-muted); width: 100%; margin: 0; line-height: 1.5; }
.card-body { padding: var(--sp-5); }
.card-body.tight { padding: var(--sp-3); }
.card-body.flush { padding: 0; }
.card-foot {
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-soft);
  background: var(--bg-inset); border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  font-size: var(--fs-12); color: var(--tx-muted);
}
/* A card that is purely a container for a chart or a table needs no chrome. */
.card.bare { border: 0; background: transparent; box-shadow: none; }
.card.bare > .card-head { padding-inline: 0; border-bottom: 0; padding-bottom: var(--sp-2); }
.card.bare > .card-body { padding-inline: 0; }

.grid { display: grid; gap: var(--sp-5); align-items: start; }
.grid.tight { gap: var(--sp-3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.g-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1280px) { .g5, .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .g3, .g4, .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .g2, .g3, .g4, .g5, .g6, .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: 1fr; }
}

/* ---- Metrics -------------------------------------------------------------
   A row of headline figures. Small uppercase label, one large figure, a
   quiet supporting line, and the change as a chip in the corner where the
   eye finds it without it competing with the number itself. */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.metrics.m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics.m5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) { .metrics.m5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .metrics.m4, .metrics.m5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .metrics, .metrics.m4, .metrics.m5 { grid-template-columns: 1fr; } }

.kpi {
  background: var(--bg-surface); border: 0; box-shadow: var(--sh-card);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); position: relative;
  transition: box-shadow var(--dur-fast) var(--ease);
  display: block; text-decoration: none; color: inherit; overflow: hidden;
  min-height: 104px;
}
a.kpi { cursor: pointer; }
a.kpi:hover { box-shadow: var(--sh-2); text-decoration: none; }
/* Label and change chip share one row, so a long label wraps under itself
   rather than around a chip parked on top of it. */
.kpi .k-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.kpi .k-label {
  font-size: var(--fs-11); color: var(--tx-faint); display: block; flex: 1; min-width: 0;
  line-height: 1.4; text-transform: uppercase; letter-spacing: .7px; font-weight: var(--fw-semi);
}
html[lang="ar"] .kpi .k-label { text-transform: none; letter-spacing: 0; }
.kpi .k-value {
  /* Shrinks on a narrow tile so a long figure such as 65.5m LYD stays on
     one line instead of breaking across two. */
  font-size: clamp(22px, 2.1vw, 28px); font-weight: var(--fw-bold); color: var(--tx-strong);
  margin: var(--sp-2) 0 0; letter-spacing: -1px; font-variant-numeric: tabular-nums; display: block;
  line-height: 1.1; white-space: nowrap;
}
.kpi .k-value small { font-size: var(--fs-14); font-weight: var(--fw-med); color: var(--tx-muted); letter-spacing: 0; }
.kpi .k-sub { display: block; font-size: var(--fs-12); color: var(--tx-muted); margin-top: 6px; line-height: 1.45; }
/* Change chip, beside the label, coloured by direction. */
.kpi .k-delta {
  flex: none;
  font-size: var(--fs-11); font-weight: var(--fw-semi);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap;
}
.kpi .k-delta.up { color: var(--ok-700); background: var(--ok-050); }
.kpi .k-delta.down { color: var(--crit-700); background: var(--crit-050); }
.kpi .k-delta.flat { color: var(--tx-muted); background: var(--bg-sunken); }
.kpi .k-spark { position: absolute; bottom: 0; inset-inline-end: 0; width: 108px; opacity: .9; pointer-events: none; }
.kpi .k-open {
  position: absolute; inset-inline-end: var(--sp-4); bottom: var(--sp-4);
  color: var(--ac-600); font-size: var(--fs-12); opacity: 0; transition: opacity var(--dur-fast);
}
a.kpi:hover .k-open { opacity: 1; }
/* Accent tints the figure, not the whole tile. Reserve it for measures that
   genuinely need attention: a stock out count, an overdue payment total.
   A left rule marks the one figure the screen is really about. */
.kpi.accent-ok   .k-value { color: var(--ok-700); }
.kpi.accent-warn .k-value { color: var(--warn-700); }
.kpi.accent-crit .k-value { color: var(--crit-700); }
.kpi.accent-info .k-value { color: var(--info-700); }
.kpi.accent-teal .k-value { color: var(--nsr-teal-700); }
.kpi.accent-navy .k-value { color: var(--tx-strong); }
.kpi.lead::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ac-600);
}
.kpi.lead.accent-crit::before { background: var(--crit-500); }
.kpi.lead.accent-ok::before { background: var(--ok-500); }
.kpi.lead.accent-warn::before { background: var(--warn-500); }

.kpi-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }

/* ---- Status pills -------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-11); font-weight: var(--fw-med); white-space: nowrap;
  border: 1px solid transparent; line-height: 1.5;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill.no-dot::before { display: none; }
.pill-ok    { background: var(--ok-050);   color: var(--ok-700);   border-color: var(--ok-100); }
.pill-warn  { background: var(--warn-050); color: var(--warn-700); border-color: var(--warn-100); }
.pill-risk  { background: var(--risk-050); color: var(--risk-700); border-color: var(--risk-100); }
.pill-crit  { background: var(--crit-050); color: var(--crit-700); border-color: var(--crit-100); }
.pill-info  { background: var(--info-050); color: var(--info-700); border-color: var(--info-100); }
.pill-cold  { background: var(--cold-050); color: var(--cold-700); border-color: var(--cold-100); }
.pill-muted { background: var(--bg-sunken); color: var(--tx-muted); border-color: var(--line-hair); }
.pill-navy  { background: var(--ac-050); color: var(--ac-700); border-color: var(--ac-100); }
.pill-teal  { background: var(--nsr-teal-050); color: var(--nsr-teal-700); border-color: var(--nsr-teal-100); }
.pill-violet{ background: var(--nsr-violet-100); color: var(--nsr-violet-600); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px;
  border-radius: var(--r-xs); font-size: var(--fs-11); background: var(--bg-sunken);
  color: var(--tx-muted); border: 1px solid var(--line-hair);
}

/* ---- Tables --------------------------------------------------------------
   Quieter head, hairline rows, hover only. No zebra, no heavy rules. */
.table-wrap { overflow-x: auto; }
table.dt { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
table.dt thead th {
  background: var(--bg-surface); color: var(--tx-muted);
  font-size: var(--fs-11); font-weight: var(--fw-semi);
  letter-spacing: .2px; text-align: start; padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.dt thead th.sortable { cursor: pointer; user-select: none; }
table.dt thead th.sortable:hover { color: var(--tx-strong); }
table.dt thead th .sort-ind { opacity: .4; margin-inline-start: 4px; }
table.dt thead th.sorted .sort-ind { opacity: 1; color: var(--ac-600); }
table.dt tbody td {
  padding: var(--cell-py) var(--sp-4); border-bottom: 1px solid var(--line-hair);
  vertical-align: middle; height: var(--row-h);
}
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody tr:hover { background: var(--bg-hover); }
table.dt tbody tr.clickable { cursor: pointer; }
table.dt tbody tr.is-selected { background: var(--ac-050); box-shadow: inset 2px 0 0 var(--ac-600); }
table.dt tbody tr.row-crit td:first-child { box-shadow: inset 3px 0 0 var(--crit-500); }
table.dt tbody tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn-500); }
table.dt tbody tr.row-ok td:first-child { box-shadow: inset 3px 0 0 var(--ok-500); }
[dir="rtl"] table.dt tbody tr.row-crit td:first-child { box-shadow: inset -3px 0 0 var(--crit-500); }
[dir="rtl"] table.dt tbody tr.row-warn td:first-child { box-shadow: inset -3px 0 0 var(--warn-500); }
[dir="rtl"] table.dt tbody tr.row-ok td:first-child { box-shadow: inset -3px 0 0 var(--ok-500); }
table.dt td.num, table.dt th.num { text-align: end; font-variant-numeric: tabular-nums; }
table.dt td.code { font-family: var(--font-num); font-size: var(--fs-12); color: var(--tx-muted); }
table.dt tfoot td {
  padding: 11px var(--sp-4); background: var(--bg-inset); font-weight: var(--fw-semi);
  border-top: 1px solid var(--line); color: var(--tx-strong);
}
table.dt .cell-main { font-weight: var(--fw-med); color: var(--tx-strong); }
table.dt .cell-sub { font-size: var(--fs-11); color: var(--tx-muted); }
.dt-doc { font-family: var(--font-num); font-size: var(--fs-12); color: var(--ac-700); font-weight: var(--fw-med); }

.table-toolbar {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); background: var(--bg-inset);
}
.table-toolbar .grow { flex: 1; }
.table-count { font-size: var(--fs-12); color: var(--tx-muted); }

/* ---- Forms --------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.field > label, .field-label {
  display: block; font-size: var(--fs-12); font-weight: var(--fw-semi);
  color: var(--tx-strong); margin-bottom: 5px;
}
.field .req { color: var(--crit-500); }
.field .hint { font-size: var(--fs-11); color: var(--tx-muted); margin-top: 5px; line-height: 1.45; }
.field .err { font-size: var(--fs-11); color: var(--crit-700); margin-top: 5px; }
.input, .select, .textarea {
  width: 100%; height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-surface); font-size: var(--fs-13); color: var(--tx-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.textarea { height: auto; padding: var(--sp-3); min-height: 84px; resize: vertical; line-height: 1.55; }
.select { appearance: none; padding-inline-end: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2363748C' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
[dir="rtl"] .select { background-position: left 10px center; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ac-500); outline: none; box-shadow: var(--sh-focus); }
.input:disabled, .select:disabled { background: var(--bg-sunken); color: var(--tx-muted); }
.input.is-error, .select.is-error { border-color: var(--crit-500); }
.input-group { display: flex; }
.input-group .input { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group .addon {
  display: grid; place-items: center; padding: 0 var(--sp-3); background: var(--bg-sunken);
  border: 1px solid var(--line); border-inline-start: 0; border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-12); color: var(--tx-muted); white-space: nowrap;
}
[dir="rtl"] .input-group .input { border-radius: 0 var(--r-md) var(--r-md) 0; }
[dir="rtl"] .input-group .addon { border-radius: var(--r-md) 0 0 var(--r-md); border-inline-start: 1px solid var(--line); border-inline-end: 0; }

.check { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-13); cursor: pointer; margin-bottom: var(--sp-2); }
.check input { margin-top: 3px; accent-color: var(--ac-600); width: 15px; height: 15px; flex: none; }
.check .c-sub { display: block; font-size: var(--fs-11); color: var(--tx-muted); }

.radio-cards { display: grid; gap: var(--sp-2); }
.radio-card {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  background: var(--bg-surface); transition: border-color var(--dur-fast) var(--ease);
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card.selected { border-color: var(--ac-500); background: var(--ac-050); box-shadow: inset 0 0 0 1px var(--ac-500); }
.radio-card input { accent-color: var(--ac-600); margin-top: 3px; }
.radio-card b { display: block; font-size: var(--fs-13); color: var(--tx-strong); }
.radio-card span { font-size: var(--fs-12); color: var(--tx-muted); }

.switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-13); }
.switch input { display: none; }
.switch .track {
  width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--line-strong);
  position: relative; transition: background var(--dur-fast) var(--ease); flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform var(--dur-fast) var(--ease); box-shadow: var(--sh-1);
}
.switch input:checked + .track { background: var(--ac-600); }
.switch input:checked + .track::after { transform: translateX(16px); }
[dir="rtl"] .switch input:checked + .track::after { transform: translateX(-16px); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.form-section-title {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .8px;
  color: var(--tx-faint); font-weight: var(--fw-semi);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line-soft);
  margin: var(--sp-6) 0 var(--sp-4); grid-column: 1 / -1;
}
.form-section-title:first-child { margin-top: 0; }

/* ---- Stepper ------------------------------------------------------------- */
.stepper {
  display: flex; gap: 0; margin-bottom: var(--sp-6); overflow-x: auto;
  background: var(--bg-surface); border: 0; box-shadow: var(--sh-card); border-radius: var(--r-lg);
}
.step {
  flex: 1; min-width: 138px; padding: var(--sp-3) var(--sp-4);
  background: transparent; text-align: start;
  cursor: pointer; border: 0; border-inline-end: 1px solid var(--line-soft); position: relative;
}
.step::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: transparent;
}
.step:last-child { border-inline-end: 0; }
.step .s-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: var(--fs-12);
  font-weight: var(--fw-semi); background: var(--bg-sunken); color: var(--tx-muted);
  margin-bottom: 6px; border: 1px solid var(--line-hair);
}
.step .s-title { display: block; font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--tx-muted); }
.step .s-note { display: block; font-size: var(--fs-11); color: var(--tx-faint); margin-top: 2px; line-height: 1.4; }
.step.done .s-no { background: var(--ok-500); color: #fff; border-color: var(--ok-500); }
.step.done .s-title { color: var(--tx-body); }
.step.current { background: var(--ac-050); }
.step.current::after { background: var(--ac-600); }
.step.current .s-no { background: var(--ac-600); color: #fff; border-color: var(--ac-600); }
.step.current .s-title { color: var(--tx-strong); font-weight: var(--fw-semi); }
.step:disabled { cursor: not-allowed; }

.step-panel { display: none; }
.step-panel.active { display: block; }

.wizard-foot {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line-soft); background: var(--bg-inset);
  border-radius: 0 0 var(--r-lg) var(--r-lg); flex-wrap: wrap;
}
.wizard-foot .grow { flex: 1; }
.wizard-foot .save-note { font-size: var(--fs-12); color: var(--tx-muted); }

/* ---- Tabs ---------------------------------------------------------------- */
.tabs { display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-5); overflow-x: auto; }
.tab {
  padding: 9px 0; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--tx-muted); font-size: var(--fs-13); cursor: pointer; white-space: nowrap;
  font-weight: var(--fw-med);
}
.tab:hover { color: var(--tx-strong); }
.tab.active { color: var(--ac-700); border-bottom-color: var(--ac-600); font-weight: var(--fw-semi); }
.tab .t-count {
  font-size: var(--fs-11); background: var(--bg-sunken); color: var(--tx-muted);
  padding: 0 6px; border-radius: var(--r-pill); margin-inline-start: 6px; line-height: 17px;
  display: inline-block;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Filter bar ---------------------------------------------------------- */
.filterbar {
  display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-surface); border: 0; box-shadow: var(--sh-card);
  border-radius: var(--r-lg); margin-bottom: var(--sp-5);
}
.filterbar .f { min-width: 150px; }
.filterbar .f label { display: block; font-size: var(--fs-11); color: var(--tx-muted); margin-bottom: 4px; font-weight: var(--fw-med); }
.filterbar .f .select, .filterbar .f .input { height: 34px; font-size: var(--fs-12); }
.filterbar .grow { flex: 1; }

/* ---- Object header -------------------------------------------------------
   The identity of the record being looked at, in the smallest space that
   still reads. The first version stacked each fact as a label over a value
   in a six column grid, which pushed short facts onto two lines each and
   took a quarter of the screen to say very little. Facts now run inline,
   label then value, and wrap as a sentence would. Roughly half the height
   for the same information, following the SAP Fiori object header. */
.ident-strip {
  background: var(--bg-surface); border: 0;
  border-inline-start: 4px solid var(--ac-600); box-shadow: var(--sh-card);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
}
.ident-strip .is-top {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.ident-strip .is-doc {
  font-family: var(--font-num); font-size: var(--fs-15); font-weight: var(--fw-semi);
  letter-spacing: .2px; color: var(--tx-strong);
}
/* Facts flow inline and wrap, divided by a hairline rather than by whitespace. */
.ident-strip .is-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2) 0; }
.ident-strip .is-cell {
  display: flex; align-items: baseline; gap: 6px;
  padding-inline: var(--sp-4); border-inline-end: 1px solid var(--line-hair);
  line-height: 1.5;
}
.ident-strip .is-cell:first-child { padding-inline-start: 0; }
.ident-strip .is-cell:last-child { border-inline-end: 0; padding-inline-end: 0; }
.ident-strip .is-cell .l { font-size: var(--fs-11); color: var(--tx-faint); white-space: nowrap; }
.ident-strip .is-cell .v { font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--tx-strong); }
@media (max-width: 760px) {
  .ident-strip .is-cell { padding-inline: 0; border-inline-end: 0; flex: 0 0 100%; }
}

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4) var(--sp-5); }
.dl .dt { font-size: var(--fs-11); color: var(--tx-muted); margin-bottom: 3px; }
.dl .dd { font-size: var(--fs-13); color: var(--tx-strong); font-weight: var(--fw-med); }

/* ---- Timeline ------------------------------------------------------------ */
.timeline { position: relative; padding-inline-start: var(--sp-6); }
.timeline::before {
  content: ""; position: absolute; inset-inline-start: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line-soft);
}
.tl-item { position: relative; padding-bottom: var(--sp-5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--sp-6) + 2px); top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--bg-surface);
  border: 2px solid var(--line-strong);
}
.tl-item.done::before { background: var(--ok-500); border-color: var(--ok-500); }
.tl-item.current::before { background: var(--ac-600); border-color: var(--ac-600); box-shadow: 0 0 0 4px var(--ac-100); }
.tl-item.alert::before { background: var(--crit-500); border-color: var(--crit-500); }
.tl-item .tl-when { font-size: var(--fs-11); color: var(--tx-faint); }
.tl-item .tl-what { font-size: var(--fs-13); color: var(--tx-strong); font-weight: var(--fw-med); margin: 2px 0; }
.tl-item .tl-who { font-size: var(--fs-12); color: var(--tx-muted); }

/* ---- Process chain -------------------------------------------------------
   A horizontal run of stages, used for the end to end flows. */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: var(--sp-2); }
.flow-step {
  flex: 1; min-width: 128px; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--line-soft);
  border-inline-end: 0; position: relative;
}
.flow-step:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.flow-step:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-inline-end: 1px solid var(--line-soft); }
[dir="rtl"] .flow-step:first-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
[dir="rtl"] .flow-step:last-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.flow-step .f-owner { font-size: var(--fs-11); color: var(--tx-faint); display: block; margin-bottom: 3px; }
.flow-step .f-name { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--tx-strong); display: block; line-height: 1.35; }
.flow-step .f-note { font-size: var(--fs-11); color: var(--tx-muted); display: block; margin-top: 4px; line-height: 1.4; }
.flow-step.outside { background: var(--bg-sunken); }
.flow-step.outside .f-name { color: var(--tx-body); font-weight: var(--fw-med); }
.flow-step.here { background: var(--ac-050); border-color: var(--ac-300); }
.flow-step.here::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--ac-600);
}

/* ---- Swimlane ------------------------------------------------------------ */
.lane { display: grid; grid-template-columns: 168px 1fr; border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.lane-name {
  padding: var(--sp-3) var(--sp-4); background: var(--bg-inset); font-size: var(--fs-12);
  font-weight: var(--fw-semi); color: var(--tx-strong); border-bottom: 1px solid var(--line-soft);
  border-inline-end: 1px solid var(--line-soft); display: flex; align-items: center;
}
.lane-name span { display: block; font-size: var(--fs-11); font-weight: var(--fw-reg); color: var(--tx-muted); }
.lane-body {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft);
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
}
.lane > :nth-last-child(-n+2) { border-bottom: 0; }
.lane-act {
  padding: 5px var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-12);
  background: var(--bg-sunken); border: 1px solid var(--line-hair); color: var(--tx-body);
  white-space: nowrap;
}
.lane-act.key { background: var(--ac-050); border-color: var(--ac-300); color: var(--ac-700); font-weight: var(--fw-med); }
.lane-act.wait { background: var(--warn-050); border-color: var(--warn-100); color: var(--warn-700); }

/* ---- Compliance checklist ------------------------------------------------ */
.checklist { display: flex; flex-direction: column; }
.ck-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-hair);
}
.ck-row:last-child { border-bottom: 0; }
.ck-mark {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold);
}
.ck-mark.ok { background: var(--ok-100); color: var(--ok-700); }
.ck-mark.warn { background: var(--warn-100); color: var(--warn-700); }
.ck-mark.crit { background: var(--crit-100); color: var(--crit-700); }
.ck-mark.wait { background: var(--bg-sunken); color: var(--tx-faint); }
.ck-body { flex: 1; min-width: 0; }
.ck-body b { display: block; font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--tx-strong); }
.ck-body > span { display: block; font-size: var(--fs-11); color: var(--tx-muted); margin-top: 1px; }
.ck-body b .tag { display: inline-flex; font-size: var(--fs-11); vertical-align: middle; margin-inline-start: 4px; }
.ck-side { font-size: var(--fs-12); color: var(--tx-muted); white-space: nowrap; text-align: end; }

/* ---- Alerts and notes ---------------------------------------------------- */
.note {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-size: var(--fs-13); margin-bottom: var(--sp-4);
  border: 1px solid transparent; line-height: 1.55;
}
.note .n-ic { flex: none; font-size: 18px; line-height: 1.35; }
.note b:first-child { display: block; margin-bottom: 2px; }
.note b { font-weight: var(--fw-semi); }
.note-info { background: var(--info-050); color: var(--info-700); border-color: var(--info-100); }
.note-ok   { background: var(--ok-050);   color: var(--ok-700);   border-color: var(--ok-100); }
.note-warn { background: var(--warn-050); color: var(--warn-700); border-color: var(--warn-100); }
.note-crit { background: var(--crit-050); color: var(--crit-700); border-color: var(--crit-100); }
.note-teal { background: var(--nsr-teal-050); color: var(--nsr-teal-700); border-color: var(--nsr-teal-100); }

.alert-row {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-hair);
  cursor: pointer; text-decoration: none; color: inherit;
}
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover { background: var(--bg-hover); text-decoration: none; }
.alert-row .a-ic { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; font-size: 16px; }
.alert-row .a-body { flex: 1; min-width: 0; }
.alert-row .a-title { display: block; font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--tx-strong); }
.alert-row .a-meta { display: block; font-size: var(--fs-11); color: var(--tx-muted); margin-top: 2px; }
.alert-row .a-when { font-size: var(--fs-11); color: var(--tx-faint); white-space: nowrap; }

/* ---- Progress ------------------------------------------------------------ */
.bar { height: 6px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ac-500); }
.bar > i.warn { background: var(--warn-500); }
.bar > i.crit { background: var(--crit-500); }
.bar > i.ok { background: var(--ok-500); }
.bar > i.navy { background: var(--ac-500); }
.bar-label { display: flex; justify-content: space-between; font-size: var(--fs-11); color: var(--tx-muted); margin-bottom: 4px; }

/* ---- Empty state --------------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--tx-muted); }
.empty .e-ic { font-size: 38px; opacity: .35; margin-bottom: var(--sp-3); }
.empty h3 { font-size: var(--fs-15); margin-bottom: 6px; }
.empty p { font-size: var(--fs-13); max-width: 44ch; margin-inline: auto; }

/* ---- Guided help, aimed at first time users ------------------------------ */
.helper {
  background: var(--ac-050); border: 1px solid var(--ac-100);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  display: flex; gap: var(--sp-4);
}
.helper .h-ic { font-size: 20px; flex: none; line-height: 1.3; }
.helper h4 { font-size: var(--fs-13); color: var(--ac-800); margin-bottom: 4px; }
.helper p { font-size: var(--fs-13); color: var(--tx-body); margin: 0; line-height: 1.6; }
.helper ol { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-5); font-size: var(--fs-13); color: var(--tx-body); }
.helper ol li { margin-bottom: 4px; }
.helper .h-close { background: none; border: 0; color: var(--tx-faint); cursor: pointer; align-self: flex-start; font-size: var(--fs-14); }
.helper .h-close:hover { color: var(--tx-body); }

.whatis {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg-sunken); color: var(--tx-muted);
  font-size: 10px; font-weight: var(--fw-bold); cursor: help; vertical-align: middle;
  border: 1px solid var(--line-hair);
}

/* ---- Pain point overlay --------------------------------------------------
   Off by default. The top bar toggle turns it on for the walk through. */
.pp { display: none; }
body.show-pain .pp { display: block; }
.pp-chip {
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  border: 1px solid var(--line-soft); border-inline-start: 3px solid var(--crit-500);
  background: var(--bg-surface);
  font-size: var(--fs-12); line-height: 1.6;
}
.pp-chip .pp-then { display: block; color: var(--crit-700); }
.pp-chip .pp-now {
  display: block; margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--line-hair); color: var(--ok-700);
}
.pp-chip b { font-weight: var(--fw-semi); }

/* ---- Section heading between blocks on a long page ----------------------- */
.sec {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-8) 0 var(--sp-4); flex-wrap: wrap;
}
.sec:first-child { margin-top: 0; }
.sec h2 { font-size: var(--fs-18); font-weight: var(--fw-semi); letter-spacing: -.2px; }
.sec p { font-size: var(--fs-13); color: var(--tx-muted); margin: 0; }
.sec .sec-act { margin-inline-start: auto; }

/* ---- Utilities ----------------------------------------------------------- */
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row.tight { gap: var(--sp-2); }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack.tight { gap: var(--sp-2); }
.muted { color: var(--tx-muted); }
.faint { color: var(--tx-faint); }
.strong { color: var(--tx-strong); font-weight: var(--fw-semi); }
.small { font-size: var(--fs-12); }
.tiny { font-size: var(--fs-11); }
.mono { font-family: var(--font-num); }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt3 { margin-top: var(--sp-3); } .mb3 { margin-bottom: var(--sp-3); }
.mt4 { margin-top: var(--sp-4); } .mb4 { margin-bottom: var(--sp-4); }
.mt5 { margin-top: var(--sp-5); } .mb5 { margin-bottom: var(--sp-5); }
.mt6 { margin-top: var(--sp-6); } .mb6 { margin-bottom: var(--sp-6); }
.txt-ok { color: var(--ok-700); } .txt-warn { color: var(--warn-700); }
.txt-crit { color: var(--crit-700); } .txt-info { color: var(--info-700); }
.hide { display: none !important; }

/* ---- Labels and codes ----------------------------------------------------
   A label on screen is drawn the way it prints: a bordered card, the symbol
   beside the human readable text, and the full element string underneath.
   The last line is what the GS1 standard calls human readable interpretation
   and it exists so a person can key the data in if a scanner fails. */
.label-row { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.label-card {
  background: #fff; border: 1px solid var(--tx-strong); border-radius: 4px;
  padding: var(--sp-3); flex: 0 0 340px; color: #111;
}
.label-card.wide { flex-basis: 400px; }
.label-card.small { flex: 1 1 auto; max-width: 340px; }
.label-card .lb-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2);
  border-bottom: 1px solid var(--tx-strong); padding-bottom: 5px; margin-bottom: var(--sp-3);
  font-size: var(--fs-11);
}
.label-card .lb-head b { font-size: var(--fs-12); }
.label-card .lb-head span { color: #555; white-space: nowrap; }
.label-card .lb-body { display: flex; gap: var(--sp-3); align-items: flex-start; }
.label-card .lb-code { flex: none; line-height: 0; }
.label-card .lb-text { min-width: 0; font-size: var(--fs-11); line-height: 1.55; }
.label-card .lb-text b { display: block; font-size: var(--fs-13); margin-bottom: 3px; color: #000; }
.label-card .lb-text span { display: block; color: #333; }
.label-card .lb-text .mono { font-family: var(--font-num); }
.label-card .lb-linear { margin-top: var(--sp-3); }
.label-card .lb-hri {
  margin-top: var(--sp-2); padding-top: 5px; border-top: 1px dashed #999;
  font-family: var(--font-num); font-size: var(--fs-11); color: #000;
  word-break: break-all; line-height: 1.5;
}
.label-note { flex: 1 1 280px; min-width: 260px; }
.label-note h4 { font-size: var(--fs-13); margin-bottom: var(--sp-2); }
.label-note p { font-size: var(--fs-13); color: var(--tx-muted); line-height: 1.6; }
.label-note .lb-list { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-5); font-size: var(--fs-13); color: var(--tx-body); }
.label-note .lb-list li { margin-bottom: 4px; }
.label-note .lb-list b { font-family: var(--font-num); color: var(--tx-strong); }
.code-err { font-size: var(--fs-12); color: var(--crit-700); }

/* A sheet of labels laid out as it comes off the printer. */
.label-sheet {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-3); background: var(--bg-sunken); padding: var(--sp-4); border-radius: var(--r-md);
}
.label-sheet .mini {
  background: #fff; border: 1px solid #333; border-radius: 3px; padding: 8px;
  display: flex; gap: 8px; align-items: center; color: #111;
}
.label-sheet .mini .mn-t { min-width: 0; font-size: 10px; line-height: 1.4; }
.label-sheet .mini .mn-t b { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-sheet .mini .mn-t span { display: block; color: #444; font-family: var(--font-num); }

/* The scanning station mock, so a warehouse keeper recognises their screen. */
.scan-window {
  background: var(--nsr-navy-900); border-radius: var(--r-lg); padding: var(--sp-5);
  color: #fff; text-align: center;
}
.scan-window .sw-frame {
  border: 2px dashed rgba(255,255,255,.35); border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-4); margin-bottom: var(--sp-4);
}
.scan-window .sw-frame .sw-ic { font-size: 40px; display: block; margin-bottom: var(--sp-2); }
.scan-window .sw-frame b { display: block; font-size: var(--fs-15); }
.scan-window .sw-frame span { font-size: var(--fs-12); color: rgba(255,255,255,.65); }
.scan-window .sw-read {
  background: rgba(255,255,255,.08); border-radius: var(--r-md); padding: var(--sp-3);
  font-family: var(--font-num); font-size: var(--fs-12); word-break: break-all; text-align: start;
}