/* Manifest visual finish. Geometry, column preferences, semantic status/profit
   colors and behavior stay with their existing renderers. List and detail share
   #manifest-page-body, so the list palette applies only while its toolbar exists. */
/* Light-mode palette only — in dark mode the APP tokens apply (operator 2026-09-05). */
html:not(:is([data-theme="dark"],[data-theme="dim"])) #manifest-page-body:has(.emr-mfl-toolbar),
html:not(:is([data-theme="dark"],[data-theme="dim"])) #manifest-drawer.manifest-drawer {
  --bg: #f3f5f8;
  --bg2: #ffffff;
  --bg3: #edf1f6;
  --bg4: #e5ebf3;
  --border: #d9e0e9;
  --border2: #c6d0de;
  --text: #152033;
  --text2: #42516a;
  --text3: #52627a;
  --text4: #62728a;
  --mfl-link: var(--text);
  --mfl-link: color-mix(in srgb, var(--accent, #f5a623) 30%, var(--text));
  --mfl-row-hover: rgba(21, 32, 51, .035);
  --mfl-edge-light: rgba(255, 255, 255, .8);
  --mfl-surface-shadow: 0 1px 2px rgba(21, 32, 51, .05);
}

/* Dark mode keeps the APP tokens (operator 2026-09-05) — polish-specific variables only. */
html:is([data-theme="dark"],[data-theme="dim"]) #manifest-page-body:has(.emr-mfl-toolbar),
html:is([data-theme="dark"],[data-theme="dim"]) #manifest-drawer.manifest-drawer {
  --mfl-link: var(--text);
  --mfl-link: color-mix(in srgb, var(--accent, #f5a623) 65%, var(--text));
  --mfl-row-hover: rgba(238, 243, 250, .045);
  --mfl-edge-light: rgba(255, 255, 255, .045);
  --mfl-surface-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* A restrained accent identifies the workspace; controls retain their footprints. */
#manifest-page-body .emr-mfl-toolbar {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  box-shadow: inset 0 2px 0 var(--accent, #f5a623);
}
#manifest-page-body .emr-mfl-search,
#manifest-page-body .emr-mfl-select,
#manifest-page-body .emr-mfl-pager-sel {
  background: var(--bg2);
  box-shadow: inset 0 1px 2px rgba(21, 32, 51, .035);
}
#manifest-page-body .emr-mfl-search::placeholder { color: var(--text4); opacity: 1; }
#manifest-page-body .emr-mfl-tabs { background: var(--bg3); }
#manifest-page-body .emr-mfl-tab.is-active {
  background: var(--bg2);
  border-color: var(--border2);
  box-shadow: var(--mfl-surface-shadow), inset 0 -2px 0 var(--accent, #f5a623);
}
#manifest-page-body .emr-mfl-tab.is-active .emr-mfl-tab-count {
  background: var(--gold-dim);
  color: var(--mfl-link);
}
#manifest-page-body .emr-mfl-kpis { background: var(--bg); }
#manifest-page-body .emr-mfl-kpi {
  background: var(--bg2);
  box-shadow: var(--mfl-surface-shadow);
}
#manifest-page-body .emr-mfl-primary-btn {
  color: var(--accent-fg, #1a1a1a);
  box-shadow: inset 0 1px 0 var(--mfl-edge-light), 0 1px 2px rgba(21, 32, 51, .12);
}
#manifest-page-body .emr-mfl-ghost-btn,
#manifest-page-body .emr-mfl-pager-btn,
#manifest-page-body .emr-mfl-open-btn {
  background: var(--bg2);
  color: var(--text2);
  box-shadow: var(--mfl-surface-shadow);
}
#manifest-page-body .emr-mfl-open-btn:hover,
#manifest-page-body .emr-mfl-ghost-btn:hover,
#manifest-page-body .emr-mfl-pager-btn:hover:not(:disabled) {
  background: var(--bg3);
  border-color: var(--mfl-link);
  color: var(--text);
}

/* Cell shading is translucent so profit tints remain readable on hover/focus.
   Do not override row background or status/signal badge foregrounds. */
#manifest-page-body .emr-mfl-table {
  background: var(--bg2);
  font-variant-numeric: tabular-nums;
}
#manifest-page-body .emr-mfl-table thead {
  box-shadow: 0 1px 0 var(--border2), 0 3px 6px rgba(21, 32, 51, .045);
}
#manifest-page-body .emr-mfl-th:not(.is-sorted) { background: var(--bg3); }
#manifest-page-body .emr-mfl-th.is-sorted {
  color: var(--mfl-link) !important; /* Overrides renderer's inline accent. */
  box-shadow: inset 0 -2px 0 var(--accent, #f5a623);
}
#manifest-page-body .emr-mfl-row:hover > td,
#manifest-page-body .emr-mfl-row:focus-visible > td { background: var(--mfl-row-hover); }
#manifest-page-body .emr-mfl-row:hover > td:first-child {
  box-shadow: inset 2px 0 0 var(--accent, #f5a623);
}
#manifest-page-body .emr-mfl-badge {
  box-shadow: inset 0 1px 0 var(--mfl-edge-light);
}
#manifest-page-body .emr-mfl-table [data-mf-open-order],
#manifest-page-body .emr-mfl-table [data-mf-open-driver] {
  color: var(--mfl-link) !important; /* Small amber links need light-theme contrast. */
  text-decoration-color: currentColor !important;
}
#manifest-page-body .emr-mfl-pager {
  background: var(--bg2);
  font-variant-numeric: tabular-nums;
}

/* Drawer chrome remains the same map/detail split, at the same widths. */
#manifest-drawer.manifest-drawer {
  background: var(--bg);
  border-left-color: var(--border2);
}
#manifest-drawer.manifest-drawer.mfd-open {
  box-shadow: -16px 0 48px rgba(9, 17, 29, .2), -1px 0 0 var(--mfl-edge-light);
}
#manifest-drawer.manifest-drawer .mfd-head {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  box-shadow: inset 0 2px 0 var(--accent, #f5a623);
}
#manifest-drawer.manifest-drawer .mfd-stop-badge {
  background: var(--bg2);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--mfl-surface-shadow);
}
#manifest-drawer.manifest-drawer .mfd-toggle { color: var(--text2); }
#manifest-drawer.manifest-drawer .mfd-toggle input { accent-color: var(--accent, #f5a623); }
#manifest-drawer.manifest-drawer .mfd-btn,
#manifest-drawer.manifest-drawer .mfd-expand {
  background: var(--bg2);
  border-radius: 6px;
  box-shadow: var(--mfl-surface-shadow);
}
#manifest-drawer.manifest-drawer [data-mfd-fullpage] {
  background: var(--accent, #f5a623);
  color: var(--accent-fg, #1a1a1a);
  border-color: var(--accent, #f5a623);
}
#manifest-drawer.manifest-drawer .mfd-btn:hover:not([data-mfd-fullpage]),
#manifest-drawer.manifest-drawer .mfd-expand:hover {
  background: var(--bg3);
  border-color: var(--mfl-link);
}
#manifest-drawer.manifest-drawer [data-mfd-fullpage]:hover { filter: brightness(.96); }
#manifest-drawer.manifest-drawer .mfd-detail-col { background: var(--bg2); }
#manifest-drawer.manifest-drawer .mfd-section-equipment { background: var(--bg); }
#manifest-drawer.manifest-drawer .mfd-section-equipment > div {
  border-radius: 8px !important; /* Shared renderer supplies an inline radius. */
  box-shadow: var(--mfl-surface-shadow);
}
#manifest-drawer.manifest-drawer .mfd-map-expand {
  background: var(--bg2);
  color: var(--text);
  border-color: var(--border2);
  box-shadow: 0 2px 8px rgba(9, 17, 29, .16);
}
#manifest-drawer.manifest-drawer .mfd-collapsed-chip {
  border-radius: 5px;
  box-shadow: var(--mfl-surface-shadow);
}

/* Focus adds no dimensions and does not depend on a low-contrast gold outline. */
#manifest-page-body :is(.emr-mfl-toolbar, .emr-mfl-kpis, .emr-mfl-table, .emr-mfl-pager)
  :is(button, a, input, select, [tabindex]):focus-visible,
#manifest-page-body .emr-mfl-row:focus-visible,
#manifest-drawer.manifest-drawer :is(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--mfl-link);
  outline-offset: 2px;
}
#manifest-page-body .emr-mfl-row:focus-visible { outline-offset: -2px; }

/* ── UI polish P7 (Ed 2026-09-26: compact one-line rows, sideways scroll accepted) ──
 * Rows were ~71px: the IDs broke at their hyphens (EMR-005520-1 on 3 lines), OPEN › wrapped
 * its chevron, the truck cell stacked unit / HOS / fuel chips, driver names broke per word and
 * the lane wrapped to 3-4 lines. Short cells stay on one line, a driver's name stays whole and
 * the lane gets room for two lines: ~49px rows (12 visible instead of 8). Nothing is hidden;
 * .emr-mfl-scroll already scrolls sideways (~370px further). Keyed on data-col, never
 * nth-child: the column order is user-configurable. */
#mf-table tr.emr-mfl-row > td:is([data-col="manifestId"], [data-col="orderId"], [data-col="actions"], [data-col="truck"], [data-col="miles"], [data-col="dispatcher"]),
#mf-table thead th:is([data-col="manifestId"], [data-col="orderId"]) { white-space: nowrap; }
#mf-table tr.emr-mfl-row > td[data-col="manifestId"] { min-width: 7.2em; }  /* = 12ch of the old mono face; em does not change with the typeface */
#mf-table tr.emr-mfl-row .emr-mfl-open-btn { white-space: nowrap; }
#mf-table tr.emr-mfl-row > td[data-col="driver"] > [data-mf-open-driver] { white-space: nowrap; }
#mf-table tr.emr-mfl-row > td[data-col="lane"] { min-width: 16.4em; }  /* = 26ch of Inter at 11px; em keeps the width under skin B's narrower Archivo */

/* Filter bar: at 1440px the row squeezed every input to its min-width (placeholders cut to
 * "Order / l", "All tru…") and the status tabs strip showed 426 of its 987px, so Completed,
 * Cancelled and TONU could not be seen. The bar wraps to a second row instead. */
#manifest-page-body .emr-mfl-toolbar { flex-wrap: wrap; row-gap: var(--space-2, 8px); }
#manifest-page-body .emr-mfl-toolbar > #mf-tabs { flex: 0 0 auto; }
#manifest-page-body .emr-mfl-toolbar > #mf-search { flex: 0 0 230px; min-width: 230px; }
#manifest-page-body .emr-mfl-toolbar > input.emr-mfl-select[id$="-ta"] { flex: 0 0 auto; min-width: 118px; }