/**
 * Logic TMS component styles.
 *
 * Token-first: every colour comes from the shared --erpal-* custom properties
 * with a raw hex only as the var() fallback, so Night mode inherits without a
 * second block. Nothing here sets a width or a min-width — the cockpit's
 * horizontal-overflow lesson (erpal_crm_ui 1.1.3) is that a min-content floor
 * is what widens a document, and a table is the easiest place to plant one.
 */

/* ---------------------- Bid comparison on the load --------------------- */

.tms-bids {
  margin-top: 1.5rem;
}
.tms-bids__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--erpal-ink, #1f2733);
}
/* Wide content scrolls inside its own box, never the page. */
.tms-bids__table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.tms-bids__table th,
.tms-bids__table td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--erpal-line, #e6e9ee);
  text-align: left;
  font-size: .9rem;
}
.tms-bids__table th {
  font-weight: 700;
  color: var(--erpal-ink-soft, #5f6b7a);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: .72rem;
}
/* The number is the whole point of the screen: line the digits up. */
.tms-bids__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.tms-bids__row--won td {
  background: var(--erpal-brand-soft, #e8f0fe);
}
.tms-bids__hint,
.tms-bids__generated {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--erpal-ink-soft, #5f6b7a);
}
.tms-bids__generated h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 0 0 .25rem;
}
.tms-bids__generated ul {
  margin: 0;
  padding-left: 1.1rem;
}

.tms-bid-status {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid var(--erpal-line, #e6e9ee);
  color: var(--erpal-ink-soft, #5f6b7a);
}
.tms-bid-status--awarded {
  background: var(--erpal-brand-soft, #e8f0fe);
  color: var(--erpal-brand, #1a73e8);
  border-color: var(--erpal-brand, #1a73e8);
}
.tms-bid-status--declined {
  opacity: .7;
  text-decoration: line-through;
}
.tms-award-btn {
  white-space: nowrap;
}

/* ------------------- Exposed Status filter on the boards --------------- */
/*
 * The load board's Status filter is a multi-select and must STAY one — losing
 * multi-select would be a functional regression on the flagship screen. What
 * was wrong was its size: `size=8` gave a 260px unstyled column of options at
 * the top of the first screen a prospect sees. Capping the height keeps every
 * option reachable by scrolling inside the control.
 */
.views-exposed-form select[multiple] {
  max-height: 7.5rem;
  min-height: 2.4rem;
  padding: .3rem;
  border: 1px solid var(--erpal-line, #e6e9ee);
  border-radius: var(--erpal-radius, 8px);
  background: var(--erpal-surface, #ffffff);
  color: var(--erpal-ink, #1f2733);
}

/* ------------- Boards scroll INSIDE themselves, never the page ---------- */
/*
 * 🔴 MEASURED, NOT ASSUMED (2026-09-01, clone browser cert at 390 px). The four
 * freight boards render as plain Views tables and the page BODY scrolled
 * sideways on a phone: /loads overflowed the viewport by 131 px and /bids by
 * 104 px on an untouched tenant, before this release added a column to either.
 * `erpal-resptable` — the theme's table-to-cards layer — is not applied to these
 * Views tables at all (zero `data-label` cells in the rendered markup), so there
 * was nothing catching them.
 *
 * A sideways-scrolling BODY is the one layout failure that makes a board feel
 * broken rather than dense: the header, the nav and the filters all slide away
 * with the table. Wide content scrolls inside its own container instead. This
 * fixes the pre-existing defect on all four boards as well as the fifth
 * (Trucks) and the two columns item 1.1 adds to the Load Board.
 *
 * Converging these onto erpal-resptable's labelled-card layout under 768 px is
 * the better answer and it belongs with the responsive board work in slice 3.9;
 * this is the floor, not the ceiling.
 */
.view-id-tms_load_board,
.view-id-tms_bid_board,
.view-id-tms_order_board,
.view-id-tms_confirmation_board,
.view-id-tms_equipment_board,
.view-id-tms_load_board .view-content,
.view-id-tms_bid_board .view-content,
.view-id-tms_order_board .view-content,
.view-id-tms_confirmation_board .view-content,
.view-id-tms_equipment_board .view-content,
.view-id-tms_load_board .views-element-container,
.view-id-tms_bid_board .views-element-container,
.view-id-tms_order_board .views-element-container,
.view-id-tms_confirmation_board .views-element-container,
.view-id-tms_equipment_board .views-element-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Money columns stay tabular so a rate column reads as a column of numbers. */
.view-id-tms_load_board td.views-field-field-target-rate,
.view-id-tms_load_board td.views-field-field-board-rate,
.view-id-tms_equipment_board td.views-field-field-asking-rate {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------- "Call for pricing" ----------------------------- */
/*
 * A posting STATE, not a missing number: 37% of the 371 real ETS production
 * loads carried no rate at all. The words are the value, and the branch phone
 * beside them is what makes it an action rather than a dead end.
 */
.tms-callforprice {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin: .25rem 0 .75rem;
}
.tms-callforprice__label {
  font-weight: 600;
  color: var(--erpal-ink, #1f2733);
  background: var(--erpal-tag-amber-bg, #fdf3d7);
  border-radius: var(--erpal-radius, 8px);
  padding: .15rem .5rem;
}
.tms-callforprice__tel {
  font-variant-numeric: tabular-nums;
  color: var(--erpal-brand, #1a6ae0);
  text-decoration: none;
  font-weight: 600;
}
.tms-callforprice__tel:hover { text-decoration: underline; }
.tms-callforprice__missing { color: var(--erpal-danger, #c0392b); }

/*
 * And the EXPOSED FILTERS, for the same reason one layer up. A multi-select's
 * intrinsic content width becomes a min-content floor on a flex/grid ancestor,
 * so the row refuses to shrink below its widest option and the page scrolls
 * sideways even though no element's box visibly exceeds the viewport. `min-width:0`
 * is the rule that lets a flex item actually shrink; without it `min-width:auto`
 * silently wins. Measured on the Trucks board at 390 px (two exposed filters).
 */
.views-exposed-form,
.views-exposed-form > *,
.views-exposed-form .form--inline,
.views-exposed-form .form-item,
.views-exposed-form select {
  min-width: 0;
  max-width: 100%;
}

/* ==========================================================================
 * WAVE 2 · SLICE 1 · RELEASE 2 — the fence lane.
 *
 * Every colour below is a THEME TOKEN with a literal fallback, which is what
 * keeps these surfaces correct in all three theme states — data-theme="light",
 * data-theme="dark", and the no-attribute Auto state that follows
 * prefers-color-scheme. A hard-coded hex here is a contrast failure in one of
 * the three, and it is always the one nobody screenshotted.
 * ====================================================================== */

/* ITEM 1.15 — THE BANNER. Unmissable is the requirement, not a preference:
 * an operator that forgets it is masquerading writes in somebody else's name.
 * Sticky, full width, high contrast, and it carries the way out. */
.tms-masquerade-banner {
  position: sticky;
  top: 0;
  z-index: 900;
  display: block;
  padding: .6rem 1rem;
  background: var(--erpal-danger, #c0392b);
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}
.tms-masquerade-banner a {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
}
.tms-masquerade-banner a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* A masqueraded page gets a permanent border as well as the bar, so a
 * screenshot taken below the fold still says what it is. */
html.tms-masquerading body {
  box-shadow: inset 0 0 0 3px var(--erpal-danger, #c0392b);
}

/* ITEM 1.15 point 6 — the perspective launcher. */
.tms-perspective-launcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border: 1px dashed var(--erpal-border, #d5dbe3);
  border-radius: var(--erpal-radius, 8px);
  background: var(--erpal-surface-2, #f6f8fa);
}
.tms-perspective-label {
  font-weight: 600;
  color: var(--erpal-ink-muted, #5b6675);
}
.tms-perspective-link {
  padding: .2rem .6rem;
  border: 1px solid var(--erpal-border, #d5dbe3);
  border-radius: 999px;
  background: var(--erpal-surface, #fff);
  color: var(--erpal-brand, #1a6ae0);
  text-decoration: none;
  font-size: .9em;
}
.tms-perspective-link:hover,
.tms-perspective-link:focus-visible { text-decoration: underline; }

/* ITEM 1.8 — the Share action and the help link sit together above the record. */
.tms-share-button { margin-right: .5rem; }
.tms-help-link {
  color: var(--erpal-ink-muted, #5b6675);
  font-size: .9em;
  text-decoration: underline;
}

/* Both surfaces have to survive 390 px without pushing the page sideways —
 * the same min-width:0 rule the exposed filters needed one layer up. */
@media (max-width: 480px) {
  .tms-perspective-launcher { gap: .3rem; padding: .4rem .5rem; }
  .tms-perspective-launcher > * { min-width: 0; }
  .tms-masquerade-banner { font-size: .9em; padding: .5rem .6rem; }
}

/* ITEM 1.10 — the in-product visibility help page.
 *
 * 🪤 Its headings are authored as raw #markup, so they inherit whatever colour
 * the surrounding region sets rather than the theme's heading colour. In Night
 * that came out near-invisible against the dark ground — caught by LOOKING at
 * the browser-cert screenshot, which is the only way that class of defect is
 * ever caught. Pin them to the ink token so all three theme states are legible.
 */
.tms-help h2,
.tms-help h3 {
  color: var(--erpal-ink, #1f2733);
  margin-top: 1.6rem;
  margin-bottom: .5rem;
}
.tms-help p,
.tms-help li { color: var(--erpal-ink, #1f2733); }
.tms-help table { margin: 1rem 0; }
.tms-help caption { color: var(--erpal-ink-muted, #5b6675); text-align: left; }

/* ==========================================================================
 * WAVE 2 · SLICE 2 — THE OPERATING BOARD.
 *
 * Same rule as the block above and it is not negotiable here either: every
 * colour is a THEME TOKEN with a literal fallback, so these surfaces are
 * correct in all three theme states (data-theme="light", data-theme="dark",
 * and the no-attribute Auto state that follows prefers-color-scheme). R3's
 * two screenshot-only defects were both a hard-coded colour and a 390px
 * overflow, so both are designed against here rather than discovered again.
 * ====================================================================== */

/* ---- ITEMS 2.3/2.4/2.9 — the offer card. The load, as an OFFER. ---- */
.tms-offer {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--erpal-border, #d5dbe3);
  border-left: 4px solid var(--erpal-brand, #1a6ae0);
  border-radius: var(--erpal-radius, 8px);
  background: var(--erpal-surface-2, #f6f8fa);
}
.tms-offer--auction { border-left-color: var(--erpal-warn, #b8860b); }
.tms-offer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
  min-width: 0;
}
.tms-offer__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: .72rem;
  color: var(--erpal-ink-muted, #5b6675);
}
.tms-offer__rate {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--erpal-ink, #1f2733);
}
.tms-offer__note,
.tms-offer__clock {
  font-size: .85rem;
  color: var(--erpal-ink-muted, #5b6675);
}
.tms-offer__clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.tms-offer .button { margin-top: .5rem; }

/* ---- ITEM 2.1 — the negotiation chain, under its tail. ---- */
.tms-bids__row--history td {
  background: var(--erpal-surface-2, #f6f8fa);
  font-size: .82rem;
  color: var(--erpal-ink-muted, #5b6675);
  white-space: normal;
}
.tms-bids__history-label { font-weight: 600; }
.tms-bids__arrow { opacity: .6; }
.tms-chain__table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.tms-chain__table th,
.tms-chain__table td {
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--erpal-line, #e6e9ee);
  text-align: left;
  font-size: .85rem;
  color: var(--erpal-ink, #1f2733);
}
.tms-chain h3 { color: var(--erpal-ink, #1f2733); font-size: .95rem; }

/* ---- ITEMS 2.6/2.7/2.8 — the cockpit. ---- */
.tms-cockpit { min-width: 0; }
.tms-cockpit__tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.tms-cockpit__tab {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--erpal-border, #d5dbe3);
  border-radius: 999px;
  background: var(--erpal-surface, #fff);
  color: var(--erpal-ink, #1f2733);
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
}
.tms-cockpit__tab.is-active {
  background: var(--erpal-brand, #1a6ae0);
  border-color: var(--erpal-brand, #1a6ae0);
  /* On the brand fill, white is the contrast-safe ink in every theme state —
   * a token here would follow the theme and vanish against its own button. */
  color: #fff;
  font-weight: 600;
}
/* Wide content scrolls inside its own box, never the page (R3's 41px
 * body-overflow defect, designed against rather than rediscovered). */
.tms-cockpit__table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.tms-cockpit__table th,
.tms-cockpit__table td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--erpal-line, #e6e9ee);
  text-align: left;
  font-size: .9rem;
  color: var(--erpal-ink, #1f2733);
}
.tms-cockpit__table th {
  font-weight: 700;
  color: var(--erpal-ink-soft, #5f6b7a);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: .72rem;
}
.tms-cockpit__num { font-variant-numeric: tabular-nums; text-align: right; }
.tms-cockpit__row--hot td { background: var(--erpal-danger-soft, #fdeceb); }
.tms-cockpit__row--won td { background: var(--erpal-brand-soft, #e8f0fe); }
.tms-cockpit__empty {
  padding: 1rem;
  border: 1px dashed var(--erpal-border, #d5dbe3);
  border-radius: var(--erpal-radius, 8px);
  color: var(--erpal-ink-muted, #5b6675);
}
.tms-cockpit__empty p { margin: 0; color: inherit; }
.tms-cockpit__notices {
  margin: 0 0 1.2rem;
  padding: .7rem .9rem;
  border: 1px solid var(--erpal-brand, #1a6ae0);
  border-radius: var(--erpal-radius, 8px);
  background: var(--erpal-brand-soft, #e8f0fe);
}
.tms-cockpit__notices h2 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  color: var(--erpal-ink, #1f2733);
}

@media (max-width: 480px) {
  .tms-offer__row { gap: .25rem .6rem; }
  .tms-offer__rate { font-size: 1.1rem; }
  .tms-cockpit__tab { padding: .3rem .6rem; font-size: .85rem; }
  .tms-cockpit__table th,
  .tms-cockpit__table td { padding: .4rem .5rem; font-size: .85rem; }
  .tms-cockpit > *,
  .tms-offer > * { min-width: 0; }
}

/* ==========================================================================
 * 🔴 THE FOUR TOKENS THE TENANT THEME DOES NOT DEFINE — DEFINED HERE, IN ALL
 * THREE STATES. This block is the fix for a whole CLASS of dark-mode defect,
 * not for one screen.
 *
 * MEASURED on the slice-2 clone 2026-09-02, by enumerating what the theme
 * actually publishes at :root in each state:
 *
 *   DEFINED    --erpal-ink · --erpal-ink-soft · --erpal-line · --erpal-border
 *              --erpal-surface · --erpal-brand · --erpal-brand-soft
 *              --erpal-danger · --erpal-radius · --erpal-bg
 *   UNDEFINED  --erpal-surface-2 · --erpal-ink-muted · --erpal-danger-soft
 *              --erpal-warn
 *
 * The four undefined ones were being used all over this stylesheet — by R3 as
 * well as by slice 2 — in the form `var(--erpal-surface-2, #f6f8fa)`. In LIGHT
 * that fallback is right and nobody notices. In DARK the token is still
 * undefined, so the LIGHT LITERAL is used for the background while
 * `--erpal-ink` correctly flips to near-white — a near-white number on a
 * near-white panel. Caught by LOOKING at the offer card in Night: the Book Now
 * RATE, the single most important thing on the card, was invisible.
 *
 * The lesson is the one the top of this file already states, sharpened: a
 * `var()` FALLBACK is a hard-coded hex with extra steps, and it is only safe
 * when the token is actually defined somewhere. Define it, in all three
 * states, or do not use it.
 * ====================================================================== */
:root {
  --erpal-surface-2: #f6f8fa;
  --erpal-ink-muted: #5b6675;
  --erpal-danger-soft: #fdeceb;
  --erpal-warn: #b8860b;
}
/* The default (no data-theme attribute) follows the OS, and must not override
 * an explicit light choice — hence the :not() guard. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --erpal-surface-2: #1b2233;
    --erpal-ink-muted: #9aa5b8;
    --erpal-danger-soft: #3a1f24;
    --erpal-warn: #e0b341;
  }
}
/* An explicit dark choice wins in both directions. */
:root[data-theme="dark"] {
  --erpal-surface-2: #1b2233;
  --erpal-ink-muted: #9aa5b8;
  --erpal-danger-soft: #3a1f24;
  --erpal-warn: #e0b341;
}

/* ---- The primary action buttons are LINKS, and that is the whole bug. ----
 * MEASURED in every theme state: `Award` rendered as brand-blue underlined
 * link text on a brand-blue fill — contrast ratio ~1.05, effectively
 * invisible. The theme sets `a { color: var(--erpal-brand) }` and its
 * `.button--primary { color: #fff }` loses on specificity to an anchor rule.
 * R3 shipped the Award control this way; slice 2's Counter / Book it / Fell
 * off controls inherit the same classes, so this is fixed once for all four
 * rather than four times. */
/* 🔬 THE WINNING RULE, MEASURED IN THE BROWSER RATHER THAN GUESSED AT:
 *
 *   .ld-hub-page--generic main a { color: var(--erpal-accent-dark) }
 *
 * from erpal-hubshell.css — specificity (0,1,2) — beats core's
 * `.button--primary { color: var(--color--white) }` at (0,1,0). So inside this
 * shell EVERY primary button that is an <a> loses its white ink and paints its
 * label in link-blue on the brand fill. Award measured at rgb(21,89,184) on
 * rgb(20,117,173): a contrast ratio of about 1.05, which is text you cannot
 * read. It has been that way since R3 shipped the Award control, and slice 2's
 * Counter / Book it / Fell off controls inherit the same classes — so this is
 * fixed once, here, rather than four times.
 *
 * The fix is SPECIFICITY, not `!important`: `a.button.tms-award-btn` is
 * (0,2,1) — two classes beats the shell's one — so these rules win wherever
 * they are aggregated, without a priority flag that the next person has to
 * fight. It also does NOT name the shell's class: coupling this stylesheet to
 * a page wrapper would just move the breakage. */
a.button.tms-award-btn,
a.button.tms-book-btn,
a.button.tms-counter-btn,
a.button.tms-falloff-btn,
.tms-offer a.button.button--primary {
  text-decoration: none;
}
a.button.tms-award-btn,
a.button.tms-book-btn,
.tms-offer a.button.button--primary {
  /* On a brand FILL, white is the contrast-safe ink in every theme state — a
   * token here would follow the theme and vanish against its own button. */
  color: #fff;
}
a.button.tms-counter-btn,
a.button.tms-falloff-btn {
  /* Secondary actions: brand ink on the surface, not on the brand fill. */
  color: var(--erpal-brand, #1a73e8);
  background: var(--erpal-surface, #fff);
  border: 1px solid var(--erpal-border, #d5dbe3);
}

/* ---- Headings authored as raw markup inherit the REGION's colour, not the
 * theme's heading colour — R3's own finding on the help page, which reached
 * only `.tms-help`. The load page's `Stops (N)` and `Generated by the award`
 * headings have the same shape and came out near-black on the dark ground. */
.tms-stops h2,
.tms-bids__title,
.tms-bids__generated h3,
.tms-cockpit h2,
.tms-chain h3 {
  color: var(--erpal-ink, #1f2733);
}
.tms-stops__table th,
.tms-stops__table td {
  color: var(--erpal-ink, #1f2733);
}