/* FORGE - Styles
   Theme: ARL Network Brand (arl-theme.json v1.0.0)
   Fonts: Oswald (headings), Source Sans Pro (body), Montserrat (buttons/accents) */

/* ─── ARL Brand Variables ─────────────────────────────────── */

:root {
  --arl-primary: #0060AF;
  --arl-primary-dark: #00437A;
  --arl-primary-light: #3388C7;
  --arl-accent: #E11A22;
  --arl-accent-dark: #BD0E0E;
  --arl-dark: #010A19;
  --arl-dark-alt: #02182B;
  --arl-dark-muted: #0F151D;
  --arl-surface: #EEEEEE;
  --arl-surface-light: #F5F5F5;
  --arl-surface-alt: #FAF9F9;
  --arl-white: #FFFFFF;
  --arl-text: #333333;
  --arl-text-secondary: #666666;
  --arl-text-muted: #999999;
  --arl-text-on-dark: #FFFFFF;
  --arl-border: #E0E0E0;
  --arl-success: #16A34A;
  --arl-success-light: #DCFCE7;
  --arl-warning: #D97706;
  --arl-warning-light: #FEF3C7;
  --arl-error: #E11A22;
  --arl-error-light: #FEE2E2;
  --arl-font-heading: 'Oswald', sans-serif;
  --arl-font-body: 'Source Sans Pro', sans-serif;
  --arl-font-accent: 'Montserrat', sans-serif;
  --arl-radius: 6px;
  --arl-radius-lg: 8px;
  --arl-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --arl-shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
  --arl-container: 1400px;
}

/* ─── The FORGE kit: palette, meanings, type sizes, shapes ─────
   What every page is built from (the "One FORGE look" plan, Keith 2026-10-23). The
   parts made from these (buttons, status chips, tabs, tables, fields, cards…) are in
   forge-kit.css.

   - The brand shades READ the ARL brand variables above (arl-theme.json), so the brand
     stays the one source. The kit adds the tints, the meanings and the size list.
   - Kept after the brand block on purpose: tests across the repo read the FIRST :root
     block here for the --arl-* values.
   - A raw hex colour or text size added anywhere outside a --fk-* definition fails
     design-kit-guard.test.js. Add it here once, as a token, instead.
   - No var() fallbacks on these: a missing token should look broken, not be papered
     over with a guess.
   - These resolve once, at :root. A dark scope that re-declares --arl-* (the dashboards
     board) does not change them; such a scope re-declares the --fk-* ones it needs. */

:root {
  /* Navy: the frame (header, sidebar, header bands) */
  --fk-navy-950: var(--arl-dark);
  --fk-navy-900: var(--arl-dark-alt);
  --fk-navy-850: var(--arl-dark-muted);

  /* ARL blue: anything you can click */
  --fk-blue-700: var(--arl-primary-dark);
  --fk-blue-600: var(--arl-primary);
  --fk-blue-500: #1F78C4;
  --fk-blue-400: var(--arl-primary-light);
  --fk-blue-100: #DCEAF7;
  --fk-blue-50: #F0F6FC;

  /* ARL red: danger, errors and the brand mark, nothing else */
  --fk-red-700: var(--arl-accent-dark);
  --fk-red-600: var(--arl-accent);
  --fk-red-100: #FBD5D6;
  --fk-red-50: var(--arl-error-light);

  /* Amber: waiting on a person */
  --fk-amber-800: #92400E;
  --fk-amber-600: var(--arl-warning);
  --fk-amber-100: #FCE7C3;
  --fk-amber-50: var(--arl-warning-light);

  /* Green: done and good */
  --fk-green-800: #166534;
  --fk-green-600: var(--arl-success);
  --fk-green-100: #CDEFD9;
  --fk-green-50: var(--arl-success-light);

  /* Greys: text, lines and surfaces */
  --fk-gray-800: var(--arl-text);
  --fk-gray-600: var(--arl-text-secondary);
  --fk-gray-400: var(--arl-text-muted);
  --fk-gray-200: var(--arl-border);
  --fk-gray-150: var(--arl-surface);
  --fk-gray-100: var(--arl-surface-light);
  --fk-gray-50: var(--arl-surface-alt);
  --fk-white: var(--arl-white);

  /* What a colour means. A status chip or row picks its MEANING, never a hue, so
     "needs a person" is the same amber in every module. */
  --fk-ink: var(--fk-gray-800);
  --fk-ink-2: var(--fk-gray-600);
  --fk-ink-3: var(--fk-gray-400);
  --fk-line: var(--fk-gray-200);
  --fk-canvas: var(--fk-gray-100);
  --fk-surface: var(--fk-white);
  --fk-link: var(--fk-blue-600);
  --fk-attention: var(--fk-amber-800);
  --fk-attention-bg: var(--fk-amber-50);
  --fk-attention-line: var(--fk-amber-100);
  --fk-broken: var(--fk-red-700);
  --fk-broken-bg: var(--fk-red-50);
  --fk-broken-line: var(--fk-red-100);
  --fk-done: var(--fk-green-800);
  --fk-done-bg: var(--fk-green-50);
  --fk-done-line: var(--fk-green-100);
  --fk-moving: var(--fk-blue-700);
  --fk-moving-bg: var(--fk-blue-50);
  --fk-moving-line: var(--fk-blue-100);
  --fk-parked: var(--fk-gray-600);
  --fk-parked-bg: var(--fk-gray-100);
  --fk-parked-line: var(--fk-gray-200);

  /* Type: two fonts and seven sizes. Oswald for page titles and big numbers only;
     uppercase only for the page title and its small module label. */
  --fk-font-display: var(--arl-font-heading);
  --fk-font-ui: var(--arl-font-body);
  --fk-type-xs: 12px;
  --fk-type-sm: 13px;
  --fk-type-md: 14px;
  --fk-type-lg: 16px;
  --fk-type-xl: 20px;
  --fk-type-2xl: 24px;
  --fk-type-3xl: 28px;

  /* Shapes */
  --fk-radius-sm: var(--arl-radius);
  --fk-radius-md: var(--arl-radius-lg);
  --fk-radius-lg: 12px;
  --fk-radius-pill: 999px;
  --fk-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --fk-shadow-sm: var(--arl-shadow);
  --fk-shadow-lg: var(--arl-shadow-lg);
  --fk-focus-ring: 0 0 0 3px rgba(31, 120, 196, 0.28);
}

/* ─── Base Styles ─────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--arl-font-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--arl-surface-light);
  color: var(--arl-text);
}

h1, h2 {
  font-family: var(--arl-font-heading);
  color: var(--arl-primary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

h3, h4, h5, h6 {
  font-family: var(--arl-font-accent);
  color: var(--arl-primary);
  font-weight: 600;
}

a { color: var(--arl-primary); }

/* ─── Header ──────────────────────────────────────────────── */

header {
  background: var(--arl-dark);
  color: var(--arl-text-on-dark);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  box-shadow: var(--arl-shadow-lg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  width: 100%;
  max-width: var(--arl-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo {
  height: 40px;
  width: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge {
  font-family: var(--arl-font-accent);
  background: rgba(255,255,255,0.12);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

/* Header search button (only remaining .nav-btn). Kept as a named style —
   the old header nav buttons have moved into #app-sidebar. */
.nav-btn {
  font-family: var(--arl-font-accent);
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s;
}
.nav-btn:hover { color: rgba(255,255,255,0.95); }

/* ─── Buttons ─────────────────────────────────────────────── */
/* The kit's buttons ("One FORGE look" step 3, 2026-10-27; .fk-btn in forge-kit.css):
   - normal case in the UI font;
   - one blue main button; secondary and outline ones white with a grey edge;
   - danger outlined in red; success filled green.
   Heights come from padding and line-height (36px, 30px for .btn-sm), never a min-height,
   so the dozen places that shrink a button by its padding still can. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--fk-radius-md);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--fk-blue-600); color: var(--fk-white); }
.btn-primary:hover:not(:disabled) { background: var(--fk-blue-700); }
.btn-secondary { background: var(--fk-surface); color: var(--fk-ink); border-color: var(--fk-line); box-shadow: var(--fk-shadow-xs); }
.btn-secondary:hover:not(:disabled) { background: var(--fk-canvas); }
.btn-success { background: var(--fk-green-600); color: var(--fk-white); }
.btn-success:hover:not(:disabled) { background: var(--fk-green-800); }
.btn-danger { background: var(--fk-surface); color: var(--fk-broken); border-color: var(--fk-broken-line); }
.btn-danger:hover:not(:disabled) { background: var(--fk-broken-bg); }

/* ─── Main ────────────────────────────────────────────────── */

main {
  max-width: var(--arl-container);
  margin: 0 auto;
  padding: 16px 24px;
  /* A .module-band header bleeds to main's edges by these: keep them equal to the padding. */
  --band-pull-top: 16px;
  --band-pull-x: 24px;
}

/* ─── Modal ───────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 10, 25, 0.6);
}

.modal-content {
  position: relative;
  background: var(--arl-white);
  border-radius: var(--arl-radius-lg);
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(1, 10, 25, 0.25);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--arl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 { font-size: 18px; }

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--arl-text-muted);
  padding: 4px;
}

.modal-body { padding: 20px; }

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--arl-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ─── Form ────────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-family: var(--arl-font-accent);
  font-size: 13px;
  font-weight: 600;
  color: var(--arl-text-secondary);
  margin-bottom: 4px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 14px;
  font-family: var(--arl-font-body);
  color: var(--arl-text);
}

.form-group textarea {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

/* ─── Queue ───────────────────────────────────────────────── */

.queue-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.queue-header h2 { font-size: 24px; }

/* The status filters are the kit's tabs (.fk-tab in forge-kit.css): normal case, with an
   underline on the one that is on, and the kit's count beside each pile that holds work. */
.queue-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 10px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  color: var(--fk-ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.filter-btn:hover { color: var(--fk-ink); }
.filter-btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }

.filter-btn.active {
  color: var(--fk-ink);
  border-bottom-color: var(--fk-blue-600);
}

/* "Mine": every load assigned to me, in any state. A view of its own rather than a
   status, so it sits at the row's right end; otherwise a tab like the others. */
.filter-btn.filter-mine { margin-left: auto; }

/* ─── Queue list: one card, the filter bar on top, then the rows ─── */

/* The card is the list's container (container queries below): its rows line up as columns
   when it is wide enough, and stack into two lines when it is not. */
.queue-list-card { container: queue-list / inline-size; }
/* The rows' tints stop at the card's rounded corners. The list clips them, not the card,
   so the "More filters" menu can hang below the bar. */
#queue-list { overflow: hidden; border-radius: 0 0 calc(var(--fk-radius-lg) - 1px) calc(var(--fk-radius-lg) - 1px); }

.queue-filterbar .fk-search { width: 220px; }
.queue-filterbar .fk-filter input { width: 6ch; }

/* Each row is a grid. Stacked (the narrow card): the name and its lane beside the status,
   the details on a line of their own under them. Wide: one line, every column under its
   heading. The header row (.queue-list-head) is the same grid, so each heading sits over
   its column. */
.queue-card,
.queue-list-head {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
}

.queue-list-head {
  padding: 8px 14px;
  background: var(--fk-gray-50);
  border-bottom: 1px solid var(--fk-line);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  color: var(--fk-ink-2);
}
.queue-list-head input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--arl-primary);
}
.queue-head-selectall { cursor: pointer; }
.queue-head-col { display: none; }

/* Each row carries its state as a stripe down the left edge (data-status, set by
   renderQueueCard), so the pile can be read from across the room. The rows that need
   someone now (couldn't be read, refused by TAI) are also tinted, so a long list of
   reviews cannot hide them. */
.queue-card {
  row-gap: 6px;
  padding: 10px 14px 10px 11px;
  background: var(--arl-white);
  border-bottom: 1px solid var(--fk-gray-150);
  border-left: 3px solid var(--queue-row-accent, var(--arl-border));
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.queue-card:last-child { border-bottom: 0; }

.queue-card[data-status="parsing"] { --queue-row-accent: var(--arl-primary-light); }
.queue-card[data-status="pending_customer"] { --queue-row-accent: #E65100; }
.queue-card[data-status="parsed"] { --queue-row-accent: #F59E0B; }
.queue-card[data-status="approved"] { --queue-row-accent: var(--arl-primary); }
.queue-card[data-status="submitted"] { --queue-row-accent: var(--arl-success); }
.queue-card[data-status="rejected"],
.queue-card[data-status="split"] { --queue-row-accent: var(--arl-text-muted); }
.queue-card[data-status="parse_failed"],
.queue-card[data-status="failed"] {
  --queue-row-accent: var(--arl-error);
  background: #FFF7F7;
}

.queue-card:hover {
  background: var(--fk-blue-50);
  border-left-color: var(--queue-row-accent, var(--arl-primary-light));
}

.queue-card-checkbox {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: var(--arl-primary);
}

/* The body's parts are the row's own grid items. */
.queue-card-body { display: contents; }

/* The customer in bold, the lane under it, and any warning under that. */
.queue-card-header {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* The name, then the chips that identify the load (Suggested, Load 1 of 2, TAI#). The name
   clips with an ellipsis; a chip with no room beside it wraps under it rather than being
   cut off. The line still clips, so nothing that WARNS goes in it (.queue-card-flags). */
.queue-card-customer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  max-width: 100%;
  font-family: var(--fk-font-ui);
  font-weight: 600;
  font-size: var(--fk-type-md);
  color: var(--fk-ink);
  overflow: hidden;
}
.queue-card-customer > :not(.queue-card-name) { margin-left: 0; }
.queue-card-name {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-card-lane {
  max-width: 100%;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  color: var(--fk-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The kit's chip (.fk-chip in forge-kit.css), with a dot because each one is a state. */
.queue-card-status {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.queue-card-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* One meaning per state. Every state in renderQueueCard's STATUS_LABELS needs a chip: "AI
   Parse Failed" once had none and printed as plain text. Rejected is a reviewer's choice,
   not a failure, so it is parked like Split: what its grey stripe already said. */
.status-pending_customer,
.status-parsed { color: var(--fk-attention); background: var(--fk-attention-bg); box-shadow: inset 0 0 0 1px var(--fk-attention-line); }
.status-parsing,
.status-approved { color: var(--fk-moving); background: var(--fk-moving-bg); box-shadow: inset 0 0 0 1px var(--fk-moving-line); }
.status-submitted { color: var(--fk-done); background: var(--fk-done-bg); box-shadow: inset 0 0 0 1px var(--fk-done-line); }
.status-failed,
.status-parse_failed { color: var(--fk-broken); background: var(--fk-broken-bg); box-shadow: inset 0 0 0 1px var(--fk-broken-line); }
.status-rejected,
.status-split { color: var(--fk-parked); background: var(--fk-parked-bg); box-shadow: inset 0 0 0 1px var(--fk-parked-line); }

/* Pickup, equipment, rate, OC and received. Stacked, they share a line under the name and
   each says what it is ("Pickup Oct 27"), and an empty one is left out. Wide, each is a
   column (display: contents, below) and an empty one reads "—". */
.queue-card-details {
  grid-column: 2 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 16px;
  min-width: 0;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
  color: var(--fk-ink);
}

.queue-card-details > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.queue-card-details > .is-empty { color: var(--fk-ink-3); }
.queue-card-details > :is(.queue-cell-equipment, .queue-cell-rate, .queue-card-oc).is-empty { display: none; }
.queue-card:is([data-status="parsing"], [data-status="pending_customer"], [data-status="parse_failed"]) .queue-cell-pickup { display: none; }
.queue-cell-label { margin-right: 4px; color: var(--fk-ink-3); }

@container queue-list (min-width: 950px) {
  .queue-card,
  .queue-list-head {
    grid-template-columns: 18px minmax(200px, 1fr) 72px 96px 84px 136px 120px 108px;
    column-gap: 12px;
  }
  .queue-head-selectall { display: none; }
  .queue-head-col { display: block; white-space: nowrap; }
  .queue-col-num { text-align: right; }

  .queue-card-checkbox { align-self: center; margin: 0; }
  .queue-card-details { display: contents; }
  .queue-card-details > span { grid-row: 1; }
  .queue-card-details > .is-empty,
  .queue-card-details > :is(.queue-cell-equipment, .queue-cell-rate, .queue-card-oc).is-empty { display: inline-flex; }
  .queue-cell-label { display: none; }
  .queue-cell-pickup { grid-column: 3; }
  .queue-cell-equipment { grid-column: 4; overflow: hidden; text-overflow: ellipsis; }
  .queue-card-details > .queue-cell-rate { grid-column: 5; justify-self: end; flex-direction: column; align-items: flex-end; }
  .queue-card-oc { grid-column: 6; min-width: 0; }
  .queue-oc-name { overflow: hidden; text-overflow: ellipsis; }
  .queue-card-status { grid-column: 7; align-self: center; justify-self: start; }
  .queue-card-received { grid-column: 8; justify-self: end; }
  /* Before a parse a row has no pickup, equipment, rate or OC yet, so the line saying who
     sent it and what it waits for runs across those columns instead of being cut off. */
  .queue-card:is([data-status="parsing"], [data-status="pending_customer"], [data-status="parse_failed"]) .queue-card-header { grid-column: 2 / 7; }
  .queue-card:is([data-status="parsing"], [data-status="pending_customer"], [data-status="parse_failed"]) :is(.queue-cell-pickup, .queue-cell-equipment, .queue-cell-rate, .queue-card-oc) { display: none; }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--arl-text-muted);
}

.empty-state .subtle { font-size: 14px; margin-top: 4px; }

/* ─── Queue Pager ──────────────────────────────────────────── */
.lb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  font-size: 13px;
  color: var(--arl-text-secondary);
  font-family: var(--arl-font-accent);
}
.lb-pager.hidden { display: none; }
/* The kit's small secondary button ("One FORGE look" step 3). */
.lb-pager-btn {
  padding: 6px 11px;
  border: 1px solid var(--fk-line);
  background: var(--fk-surface);
  border-radius: var(--fk-radius-md);
  box-shadow: var(--fk-shadow-xs);
  cursor: pointer;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fk-ink);
}
.lb-pager-btn:hover:not([disabled]) { background: var(--fk-canvas); }
.lb-pager-btn[disabled] { opacity: 0.45; cursor: default; }
.lb-pager-info { white-space: nowrap; }
.lb-pager-sep { opacity: 0.5; }
.lb-pager-size { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lb-pager-size select {
  padding: 4px 6px;
  border: 1px solid var(--arl-border);
  border-radius: 5px;
  background: var(--arl-surface, #fff);
  color: var(--arl-text);
  cursor: pointer;
}

/* ─── Bulk Action Bar ──────────────────────────────────────── */

.bulk-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--arl-text);
  color: var(--arl-white);
  border-radius: var(--arl-radius-lg);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  z-index: 1000;
  font-family: var(--arl-font-accent);
  font-size: 13px;
  transition: opacity 0.2s, transform 0.2s;
}

.bulk-action-bar.hidden {
  display: none;
}

.bulk-action-bar .bulk-count {
  font-weight: 600;
  margin-right: 4px;
  white-space: nowrap;
}

.bulk-action-bar .bulk-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.25);
}

.bulk-action-bar button {
  padding: 6px 14px;
  border-radius: var(--arl-radius);
  border: none;
  cursor: pointer;
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  transition: opacity 0.15s;
}

.bulk-action-bar button:hover { opacity: 0.85; }

.bulk-action-bar .bulk-approve-btn {
  background: var(--arl-success);
  color: var(--arl-white);
}

.bulk-action-bar .bulk-reject-btn {
  background: var(--arl-error);
  color: var(--arl-white);
}

.bulk-action-bar .bulk-edit-btn {
  background: var(--arl-primary);
  color: var(--arl-white);
}

.bulk-action-bar .bulk-deselect-btn {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.25);
}

/* ─── Bulk Edit Modal ──────────────────────────────────────── */

.bulk-edit-modal .modal-content {
  max-width: 460px;
}

.bulk-edit-field {
  margin-bottom: 16px;
}

.bulk-edit-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.bulk-edit-field input,
.bulk-edit-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 14px;
  font-family: var(--arl-font-body);
}

.bulk-edit-search-results {
  position: absolute;
  z-index: 10;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  box-shadow: var(--arl-shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  display: none;
}

.bulk-edit-search-results.open { display: block; }

.bulk-edit-search-result {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

.bulk-edit-search-result:hover { background: var(--arl-bg); }

.bulk-edit-hint {
  font-size: 11px;
  color: var(--arl-text-muted);
  margin-top: 4px;
}

/* ─── Detail View ─────────────────────────────────────────── */

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.detail-actions { display: flex; gap: 8px; }

.oc-badge {
  background: var(--arl-primary-light);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-accent);
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

/* The OC by name, after their initials (.fk-avatar). Plain ink: blue is for what you can
   click, and the row is the click. */
.queue-card-oc {
  min-width: 0;
  color: var(--fk-ink);
}

.queue-card-oc.queue-card-oc-unassigned {
  color: var(--fk-ink-3);
}

/* ─── User Picker (shared component) ──────────────────────── */
.up-picker {
  position: relative;
  width: 100%;
}
.up-control {
  position: relative;
  display: flex;
  align-items: center;
}
.up-search {
  width: 100%;
  padding-right: 26px;
}
.up-search.up-inactive {
  color: var(--arl-text-muted);
  font-style: italic;
}
.up-search.up-unknown {
  color: var(--arl-danger, #b00020);
}
.up-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--arl-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.up-clear:hover { color: var(--arl-primary); }
/* Read-only mode (e.g. OC picker for non-supervisors): show the value, no edit. */
.up-picker.up-disabled .up-search {
  background: var(--arl-surface, #f3f3f3);
  color: var(--arl-text-secondary, #666);
  cursor: not-allowed;
}
.up-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--arl-border, #d0d4db);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}
.up-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.up-result-row:hover, .up-result-row.up-highlight {
  background: var(--arl-bg-hover, #eef3fb);
}
.up-result-inactive .up-result-name {
  color: var(--arl-text-muted);
  font-style: italic;
}
.up-result-name {
  font-weight: 500;
}
.up-result-email {
  color: var(--arl-text-muted);
  font-size: 12px;
}
.up-result-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--arl-border, #d0d4db);
  font-size: 12px;
  color: var(--arl-text-muted);
}
.up-result-footer label { cursor: pointer; }
.up-result-footer input { margin-right: 6px; }
/* #273 — the group headings in a picker that prefers a position ("OC", then "Other
 * users"). Not a row: keyboard navigation walks .up-result-row only. */
.up-result-group {
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--arl-text-muted);
}
.up-result-group + .up-result-row { border-top: none; }

/* ─── Duplicate Customer Check ────────────────────────────── */
.dc-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--arl-border, #d0d4db);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  max-height: 360px;
  overflow-y: auto;
  font-size: 13px;
}
.dc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--arl-border, #d0d4db);
  font-weight: 500;
}
.dc-header-exact { background: #ffebee; color: #b00020; }
.dc-header-strong { background: #fff8e1; color: #8a6d00; }
.dc-header-weak { background: #eaf3fb; color: #345874; }
.dc-header-text { flex: 1; }
.dc-dismiss {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.dc-row {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f3f5;
}
.dc-row:last-child { border-bottom: none; }
.dc-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.dc-row-name { font-weight: 500; }
.dc-row-reason {
  color: var(--arl-text-muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.dc-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
}
.dc-exact { background: #ffcdd2; color: #b00020; }
.dc-strong { background: #ffe082; color: #8a6d00; }
.dc-weak { background: #cfd8dc; color: #345874; }
.dc-row-actions { display: flex; gap: 6px; }

/* ─── Merge Customer Profiles Modal ───────────────────────── */
.mrg-intro {
  color: var(--arl-text-muted);
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.4;
}
.mrg-picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.mrg-picker-col label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--arl-text-muted);
}
.mrg-picker-col select {
  width: 100%;
}
.mrg-req { color: #b00020; }
.mrg-preview {
  background: #f7f9fb;
  border: 1px solid var(--arl-border, #d0d4db);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
  font-size: 13px;
}
.mrg-loading, .mrg-error {
  color: var(--arl-text-muted);
  font-style: italic;
}
.mrg-error { color: #b00020; font-style: normal; }
.mrg-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mrg-arrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.mrg-arrow-icon {
  color: var(--arl-primary);
  font-weight: bold;
}
.mrg-name { font-weight: 500; }
.mrg-target-name { color: var(--arl-primary); }
.mrg-counts {
  color: var(--arl-text-muted);
  font-size: 12px;
}
.mrg-counts strong {
  color: var(--arl-text, #1a1a1a);
}
.mrg-unions { font-style: italic; }
.mrg-conflicts summary {
  cursor: pointer;
  font-size: 12px;
  color: #8a6d00;
  margin-top: 6px;
}
.mrg-conflict-table {
  width: 100%;
  font-size: 12px;
  margin-top: 6px;
  border-collapse: collapse;
}
.mrg-conflict-table th, .mrg-conflict-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #e8eaed;
  text-align: left;
  vertical-align: top;
}
.mrg-conflict-field { font-weight: 500; }
.mrg-conflict-target { color: var(--arl-primary); }
.mrg-conflict-source { color: var(--arl-text-muted); text-decoration: line-through; }
.mrg-confirm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0;
}
.mrg-confirm label {
  font-size: 12px;
  color: var(--arl-text-muted);
}
.mrg-confirm code {
  background: #ffe082;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
}
.mrg-confirm input {
  font-family: monospace;
  font-size: 14px;
  padding: 6px 10px;
}
.mrg-result { margin-top: 10px; }
.mrg-success {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #2e7d32;
  padding: 10px;
  border-radius: 6px;
  font-size: 13px;
}

/* ─── Commitment status ───────────────────────────────────── */
/* Under the rate: a quote, or a load the customer committed to (done green). */
.queue-card-commit {
  margin-left: 6px;
  font-size: var(--fk-type-xs);
  font-weight: 600;
  white-space: nowrap;
}
.queue-card-commit.commit-quoted { color: var(--fk-ink-3); }
.queue-card-commit.commit-committed { color: var(--fk-done); }
@container queue-list (min-width: 950px) {
  .queue-card-commit { margin-left: 0; }
}

/* ─── Universal Search (Cmd+K) ────────────────────────────── */
.nav-btn-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.nav-search-icon { font-size: 13px; }
.nav-search-kbd {
  font-family: monospace;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
}
.sch-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.sch-overlay.hidden { display: none; }
.sch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 26, 0.55);
  backdrop-filter: blur(2px);
}
.sch-panel {
  position: relative;
  width: min(720px, 90vw);
  max-height: 70vh;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sch-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--arl-border, #d0d4db);
}
.sch-icon {
  font-size: 18px;
  color: var(--arl-text-muted);
}
.sch-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 4px 0;
  background: transparent;
}
.sch-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--arl-text-muted);
  padding: 0 4px;
}
.sch-close:hover { color: var(--arl-primary); }
.sch-hint {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--arl-text-muted);
  border-bottom: 1px solid var(--arl-border, #d0d4db);
  background: #f7f9fb;
}
.sch-results {
  overflow-y: auto;
  padding: 4px 0;
  max-height: calc(70vh - 94px);
}
.sch-empty {
  padding: 24px;
  text-align: center;
  color: var(--arl-text-muted);
  font-size: 13px;
}
.sch-group {
  padding: 4px 0 6px;
  border-bottom: 1px solid #f1f3f5;
}
.sch-group:last-child { border-bottom: none; }
.sch-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--arl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sch-group-count {
  margin-left: auto;
  font-weight: 500;
}
.sch-row {
  padding: 6px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.sch-row-active {
  background: #eef3fb;
  border-left-color: var(--arl-primary);
}
.sch-row-title {
  font-size: 14px;
  color: var(--arl-text, #1a1a1a);
}
.sch-row-subtitle {
  font-size: 12px;
  color: var(--arl-text-muted);
  margin-top: 1px;
}
.sch-row mark {
  background: #ffe082;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.queue-card-received {
  color: var(--fk-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ─── Detail View: Full-Width Zone Layout ───────────────── */

main.main-wide {
  max-width: 100%;
  padding: 12px clamp(12px, 1.2vw, 24px);
  --band-pull-top: 12px;
  --band-pull-x: clamp(12px, 1.2vw, 24px);
}

.detail-body {
  display: grid;
  grid-template-columns: 15% 1fr 18%;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 10px 12px;
  box-shadow: var(--arl-shadow);
}

.zone-customer { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; }
.zone-stops    { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; }
.zone-refs     { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; }
.zone-bottom   { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--arl-border); padding-top: 8px; }

.bottom-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 0.7fr 1.2fr;
  gap: clamp(8px, 0.8vw, 14px);
  align-items: start;
}

.bottom-strip > * { min-width: 0; }

/* Laptop screens: tighten spacing only (sizing handled by clamp) */
@media (max-width: 1500px) {
  .detail-body { gap: 6px 8px; padding: 8px 10px; }
  .detail-body .stop-card { padding: 4px 6px; }
}

@media (max-width: 1200px) {
  .detail-body { grid-template-columns: 1fr; }
  .zone-customer, .zone-stops, .zone-refs, .zone-bottom { grid-column: 1; grid-row: auto; }
  .bottom-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .bottom-strip { grid-template-columns: 1fr; }
}

/* ─── Email Slide-Out Drawer ────────────────────────────── */

.email-drawer {
  position: fixed;
  top: 56px;
  right: 0;
  width: 440px;
  height: calc(100vh - 56px);
  background: var(--arl-white);
  border-left: 2px solid var(--arl-border);
  box-shadow: -4px 0 20px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 50;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}

.email-drawer.open {
  transform: translateX(0);
}

.email-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--arl-border);
}

.email-drawer-header h3 {
  font-size: 13px;
  margin: 0;
}

.email-drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--arl-text-muted);
  padding: 0 4px;
}

.email-drawer-close:hover { color: var(--arl-error); }


/* History drawer reuses .email-drawer's slide-from-right behavior;
 * .history-drawer is just a positional offset so opening both at once
 * doesn't slam them on top of each other. */
.history-drawer {
  /* Sits 24px to the left of the email drawer when both are open. */
  right: 0;
}

.history-drawer.open ~ .email-drawer.open {
  /* When both are open, push email behind history. Rare but harmless. */
  transform: translateX(0);
}

/* Timeline entries */
.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--arl-font-body);
  font-size: 12px;
  color: var(--arl-text);
}
.history-loading,
.history-empty-state,
.history-error {
  padding: 20px;
  text-align: center;
  color: var(--arl-text-muted);
}
.history-error {
  color: var(--arl-error);
}

.history-entry {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  align-items: start;
}
.history-entry-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--arl-text-muted);
  margin-top: 5px;
  border: 2px solid var(--arl-white);
  box-shadow: 0 0 0 1px var(--arl-border);
}
.history-entry-parse        .history-entry-marker { background: var(--arl-text-muted); }
.history-entry-edit         .history-entry-marker { background: var(--arl-primary); }
.history-entry-approve      .history-entry-marker { background: #2e7d32; }
.history-entry-submit_to_tai .history-entry-marker,
.history-entry-submit       .history-entry-marker { background: #2e7d32; }
.history-entry-reject       .history-entry-marker { background: var(--arl-error); }
.history-entry-corrections  .history-entry-marker { background: #f57c00; }
.history-entry-split        .history-entry-marker { background: #6a1b9a; }

.history-entry-content {
  min-width: 0;
}
.history-entry-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 2px;
}
/* Plain words, already in sentence case ("Sent a load to TAI"), so no text-transform. */
.history-entry-action {
  font-weight: 600;
}
.history-entry-when {
  color: var(--arl-text-muted);
  font-size: 11px;
}
.history-entry-who {
  color: var(--arl-text-muted);
  font-size: 11px;
  margin-left: auto;
}
.history-detail {
  color: var(--arl-text-muted);
  font-size: 11px;
}

.history-edit-details {
  margin-top: 2px;
}
.history-edit-details > summary {
  cursor: pointer;
  color: var(--arl-text-muted);
  font-size: 11px;
  list-style: revert;
}
.history-edit-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  font-size: 11px;
  align-items: baseline;
  margin-top: 4px;
  padding-left: 4px;
}
.history-edit-field {
  font-family: var(--arl-font-mono, monospace);
  color: var(--arl-text);
  word-break: break-all;
}
.history-edit-old {
  color: var(--arl-text-muted);
  text-decoration: line-through;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-edit-arrow {
  color: var(--arl-text-muted);
}
.history-edit-new {
  color: var(--arl-primary);
  font-weight: 500;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-empty {
  font-style: italic;
  color: var(--arl-text-muted);
}

/* Dim background when drawer is open */
.email-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 49;
  display: none;
}

.email-drawer-backdrop.open { display: block; }

.field-section {
  margin-bottom: 6px;
}

.field-section h4 {
  font-size: clamp(9px, 0.55vw + 2px, 11px);
  color: var(--arl-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}

.field-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  gap: 4px;
  /* min-width: 0 lets a field-row shrink below its content size when it's a
   * flex item inside .field-row-group (a flex container). Without this, the
   * row defaults to min-width: auto and refuses to shrink, causing the
   * row-group to overflow horizontally into the adjacent .field-section in
   * the bottom-strip grid — visible as freight cells spilling into the
   * Equipment column at narrow desktop widths (feedback #4, shipment 124,
   * Dan Raupp 2026-04-24, viewport 1528x698). */
  min-width: 0;
}

.field-row label {
  width: clamp(52px, 5vw, 75px);
  flex-shrink: 0;
  font-family: var(--arl-font-accent);
  font-size: clamp(10px, 0.6vw + 2px, 12px);
  font-weight: 500;
  color: var(--arl-text-muted);
}

.field-row input,
.field-row select,
.field-row textarea {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: clamp(11px, 0.65vw + 3px, 13px);
  font-family: var(--arl-font-body);
  color: var(--arl-text);
  height: clamp(22px, 1.3vw + 4px, 26px);
  transition: all 0.15s ease;
}

.field-row input:focus,
.field-row select:focus,
.field-row textarea:focus {
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
  height: auto;
  padding: 4px 8px;
  font-size: 14px;
}

.field-row input:focus,
.field-row select:focus {
  height: 30px;
}

/* Stop-instructions field treatment.
 * Different from a normal field-row in three ways:
 *   1. Stacks vertically (label above textarea, caption below) so the
 *      external-visibility warning is ambient — operators see it without
 *      needing to hover the info bubble.
 *   2. Uses <textarea> instead of <input> so all entered text is visible
 *      at a glance — important because this field is shown externally on
 *      load postings and rate confirmations and dropped detail = lost rev.
 *   3. Auto-grows to fit content via field-sizing: content (Chromium 123+,
 *      Safari 17+); JS fallback in lbAutoGrowStopInstructions handles the
 *      rest. */
.field-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.field-row-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-row-header label {
  width: auto;
}

.field-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 1;
  color: var(--arl-warning, #b54708);
  cursor: help;
  user-select: none;
}

.field-info:focus {
  outline: 2px solid var(--arl-primary);
  outline-offset: 1px;
  border-radius: 50%;
}

.stop-instructions {
  height: auto !important;
  min-height: clamp(38px, 3vw + 18px, 48px);
  max-height: 240px;
  resize: vertical;
  line-height: 1.35;
  padding: 4px 6px !important;
  /* field-sizing: content makes the textarea grow to fit text; ignored by
   * older browsers, JS fallback covers them. */
  field-sizing: content;
}

.stop-instructions:focus {
  height: auto !important;
  padding: 6px 8px !important;
}

.field-row-caption {
  font-size: clamp(9px, 0.45vw + 2px, 11px);
  color: var(--arl-text-muted);
  font-style: italic;
  line-height: 1.3;
}

/* AI-vs-operator field-origin outlines.
 * Set by lbApplyOriginsToForm in app.js after every populateDetailView and
 * after every input/change event. data-origin="edited" = AI had a value,
 * operator changed it. data-origin="added" = AI returned empty, operator
 * typed a value. AI-matching values carry no attribute and render normally.
 *
 * Box-shadow rather than outline so it composes with the focus ring without
 * either one canceling the other, and doesn't bump layout height like a
 * thicker border would. */
#detail-view [data-origin="edited"] {
  box-shadow: 0 0 0 2px var(--arl-primary);
  border-color: var(--arl-primary);
}
#detail-view [data-origin="added"] {
  box-shadow: 0 0 0 2px #2e7d32; /* green — distinct from focus blue */
  border-color: #2e7d32;
}
/* On focus, drop the origin shadow in favor of the focus ring so the field
 * shows the same focus affordance as untouched fields. */
#detail-view [data-origin]:focus {
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

.field-row-group {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}

.field-row-group .field-row { flex: 1; margin-bottom: 0; }

.field-section > textarea {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 12px;
  font-family: var(--arl-font-body);
  color: var(--arl-text);
  resize: vertical;
  transition: all 0.15s ease;
}

.field-section > textarea:focus {
  padding: 6px 8px;
  font-size: 14px;
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

/* ─── Stop Cards ──────────────────────────────────────────── */

.stops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 0;
}

.stops-grid > * { min-width: 0; overflow: hidden; }

/* City/ST/ZIP: City takes remaining space, ST and ZIP get compact widths with short labels */
.stop-card .field-row-group:has(.field-row:nth-child(3)) .field-row:nth-child(1) { flex: 1 1 0; min-width: 0; }
.stop-card .field-row-group:has(.field-row:nth-child(3)) .field-row:nth-child(2) { flex: 0 0 auto; }
.stop-card .field-row-group:has(.field-row:nth-child(3)) .field-row:nth-child(2) label { width: 20px; min-width: 20px; }
.stop-card .field-row-group:has(.field-row:nth-child(3)) .field-row:nth-child(2) input { width: clamp(28px, 3vw, 50px); }
.stop-card .field-row-group:has(.field-row:nth-child(3)) .field-row:nth-child(3) { flex: 0 0 auto; }
.stop-card .field-row-group:has(.field-row:nth-child(3)) .field-row:nth-child(3) label { width: 24px; min-width: 24px; }
.stop-card .field-row-group:has(.field-row:nth-child(3)) .field-row:nth-child(3) input { width: clamp(48px, 4vw, 80px); }

/* Date inputs shrink gracefully in flex containers */
.stop-card input[type="date"] { min-width: 0; max-width: 100%; }

/* Date From/To row: shorter labels so two dates fit side by side */
.stop-card .field-row-group:has(input[type="date"]) .field-row label { width: clamp(32px, 3vw, 55px); font-size: clamp(9px, 0.5vw + 2px, 11px); }

@media (max-width: 800px) {
  .stops-grid { grid-template-columns: 1fr; }
}

.stop-card {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  padding: 6px 8px;
  background: var(--arl-surface-light);
}

.stop-card h5 {
  font-family: var(--arl-font-accent);
  font-size: clamp(9px, 0.55vw + 2px, 10px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  color: var(--arl-success);
}

.stop-card h5.delivery { color: var(--arl-accent); }

/* Stop card header with type selector and controls */
.stop-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--arl-border);
}

.stop-type-select {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--arl-success);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--arl-radius);
  padding: 1px 4px;
  cursor: pointer;
  appearance: auto;
}

.stop-type-select:hover { border-color: var(--arl-border); }
.stop-type-select.delivery { color: var(--arl-accent); }

.stop-seq {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  color: var(--arl-text-muted);
  font-weight: 500;
}

.stop-controls {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.stop-move-btn,
.stop-delete-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--arl-radius);
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--arl-text-muted);
}

.stop-move-btn:hover { background: var(--arl-surface); border-color: var(--arl-border); color: var(--arl-text); }
.stop-move-btn:disabled { opacity: 0.3; cursor: default; }
.stop-move-btn:disabled:hover { background: none; border-color: transparent; }
.stop-delete-btn:hover { background: #FEE2E2; border-color: #FECACA; color: var(--arl-error); }

/* Required field indicator (red asterisk after label) */
.field-required label::after {
  content: ' *';
  color: var(--arl-error);
  font-weight: 700;
}

/* Native tooltip on the label comes from the title attribute set by
   applyProfileFieldConfig (e.g. "Required by: TAI, ARL Network"). Add a
   subtle hover cursor so users know the asterisk is informative. */
.field-required label {
  cursor: help;
}

/* TAI-required fields are the hard floor — render their asterisk slightly
   stronger so users can distinguish "block submit" from "ops prefers". */
.field-tai-required label::after {
  content: ' *';
  color: var(--arl-error);
  text-shadow: 0 0 0 var(--arl-error);
  font-weight: 900;
}

/* Error highlight on approve validation failure */
.field-error input,
.field-error select,
.field-error textarea {
  border-color: var(--arl-error) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

/* ─── Missing-required banner ───────────────────────────────
   Sits above the detail body, lists missing required fields with
   inline provenance badges and click-to-focus links. */
.missing-required-banner {
  margin: 12px 0;
  padding: 10px 16px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-left: 4px solid var(--arl-error);
  border-radius: var(--arl-radius);
  color: #78350F;
  font-size: 13px;
  line-height: 1.7;
}
.missing-required-banner strong { color: #7F1D1D; }
.missing-required-banner .banner-field-link {
  color: #7F1D1D;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}
.missing-required-banner .banner-field-link:hover { text-decoration-style: solid; }
.missing-required-banner .banner-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-family: var(--arl-font-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 8px;
  vertical-align: 1px;
}
.missing-required-banner .banner-badge-tai {
  background: #1e40af;
  color: #fff;
}
.missing-required-banner .banner-badge-org {
  background: #78350F;
  color: #FEF3C7;
}
.missing-required-banner .banner-group {
  margin-top: 4px;
}
.missing-required-banner .banner-group .banner-badge {
  margin-left: 0;
  margin-right: 6px;
}

/* Disabled state for approve/retry when TAI-required fields missing */
button#btn-approve:disabled,
button#btn-retry-tai:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Email Preview ───────────────────────────────────────── */

.email-preview {
  background: var(--arl-surface-light);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  padding: 10px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  flex: 1;
  overflow-y: auto;
  line-height: 1.5;
  color: var(--arl-text);
}

/* ─── Attachments Panel ───────────────────────────────────── */

.attachments-panel {
  margin-top: 10px;
}

.attachments-panel h3 {
  font-family: var(--arl-font-heading);
  font-size: 14px;
  color: var(--arl-primary);
  margin-bottom: 6px;
}

.attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

a.attachment-chip,
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--arl-primary-light, #e8f0fe);
  border: 1px solid var(--arl-primary);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

a.attachment-chip:hover {
  background: var(--arl-primary);
  color: white;
}

.attachment-chip .att-icon {
  font-size: 14px;
}

/* .detail-email moved to .email-drawer */

.email-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.front-link {
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  color: var(--arl-primary);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--arl-primary);
  border-radius: var(--arl-radius);
  transition: all 0.15s;
}

.front-link:hover {
  background: var(--arl-primary);
  color: var(--arl-white);
}

.pdf-preview {
  max-height: 300px;
  background: #fef9f0;
  border-color: #e8dcc8;
}

.btn-add-stop {
  margin-bottom: 4px;
  margin-top: 2px;
  font-size: 11px;
  padding: 2px 10px;
}

.confidence-info { margin-top: 10px; }

.confidence-info h4 {
  font-size: 12px;
  color: var(--arl-text-secondary);
  margin-bottom: 4px;
}

#confidence-display { font-size: 14px; }

.confidence-high { color: var(--arl-success); }
.confidence-medium { color: var(--arl-warning); }
.confidence-low { color: var(--arl-error); }

/* ─── Parse Status ────────────────────────────────────────── */

/* ─── File Upload ────────────────────────────────────────── */

.file-drop-zone {
  border: 2px dashed var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--arl-surface-light);
}

.file-drop-zone.dragover {
  border-color: var(--arl-primary);
  background: rgba(0, 96, 175, 0.05);
}

.file-drop-zone p {
  margin: 0;
  font-size: 14px;
  color: var(--arl-text-secondary);
}

.file-drop-zone p.subtle {
  font-size: 12px;
  color: var(--arl-text-muted);
  margin-top: 4px;
}

.file-drop-zone a {
  color: var(--arl-primary);
  font-weight: 600;
  text-decoration: none;
}

.file-drop-zone a:hover { text-decoration: underline; }

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--arl-surface);
  border: 1px solid var(--arl-border);
  border-radius: 16px;
  font-size: 12px;
  font-family: var(--arl-font-accent);
  font-weight: 500;
  color: var(--arl-text);
}

.file-chip .file-remove {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--arl-text-muted);
  padding: 0 2px;
  line-height: 1;
}

.file-chip .file-remove:hover { color: var(--arl-error); }

.file-chip-icon {
  font-size: 14px;
}

#parse-status {
  padding: 12px;
  border-radius: var(--arl-radius);
  margin-top: 12px;
  font-size: 14px;
  font-family: var(--arl-font-accent);
}

#parse-status.loading {
  background: var(--arl-primary);
  color: var(--arl-white);
}

#parse-status.success {
  background: var(--arl-success-light);
  color: var(--arl-success);
}

#parse-status.error {
  background: var(--arl-error-light);
  color: var(--arl-error);
}

/*
 * #233 — the parse succeeded but a file was not read.
 *
 * Amber rather than green, because "Parsed 3 shipments successfully" over a silently
 * dropped tender is the exact failure this ticket is about. Both tokens are defined at
 * :root (lines 27-28), so no var() fallback is doing hidden work here.
 *
 * line-height is set because this is the one status variant that renders a <br> list;
 * the others are a single line and inherit fine.
 */
#parse-status.warning {
  background: var(--arl-warning-light);
  color: var(--arl-warning);
  line-height: 1.5;
}

/* ─── User Info / Auth ────────────────────────────────────── */

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--arl-font-accent);
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}

.user-info #user-name {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-logout {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--arl-radius);
  transition: all 0.15s;
}

.btn-logout:hover {
  color: white;
  border-color: rgba(255,255,255,0.5);
}

/* Login page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 56px);
}

.login-card {
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 40px;
  text-align: center;
  box-shadow: var(--arl-shadow-lg);
  max-width: 400px;
  width: 100%;
}

.login-card h2 { margin-bottom: 8px; font-size: 24px; }

.login-card p {
  font-size: 14px;
  color: var(--arl-text-muted);
  margin-bottom: 24px;
}

.btn-microsoft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--arl-dark);
  color: var(--arl-white);
  border: none;
  border-radius: var(--arl-radius);
  font-family: var(--arl-font-accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-microsoft:hover { background: var(--arl-dark-alt); }
.btn-microsoft svg { flex-shrink: 0; }

/* ─── Split Modal ─────────────────────────────────────────── */

.modal-wide { max-width: 800px; }

.split-config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--arl-border);
}

.split-count-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.split-count-control input {
  width: 60px;
  text-align: center;
  padding: 6px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-family: var(--arl-font-accent);
  font-size: 16px;
  font-weight: 600;
  color: var(--arl-text);
}

.split-count-control .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.split-origin-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--arl-font-accent);
  font-size: 14px;
  color: var(--arl-text-secondary);
  font-weight: 600;
}

.split-date-grid { margin-bottom: 16px; }

.split-grid-header {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 2px solid var(--arl-border);
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  color: var(--arl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-items: center;
}

.split-label-select {
  width: 100%;
  padding: 4px 8px;
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arl-text-muted);
  background: var(--arl-white, #fff);
  border: 1px solid var(--arl-border);
  border-radius: 4px;
  cursor: pointer;
}

.split-label-select:focus {
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

.split-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--arl-surface);
  align-items: center;
}

.split-row:hover { background: var(--arl-surface-light); }

.split-row-num {
  font-family: var(--arl-font-accent);
  font-weight: 700;
  font-size: 14px;
  color: var(--arl-text-secondary);
  text-align: center;
}

.split-row input[type="date"],
.split-row input[type="text"] {
  padding: 6px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 14px;
  font-family: var(--arl-font-body);
  color: var(--arl-text);
  width: 100%;
}

.split-row input:focus {
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

.split-helpers {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.split-helpers .btn {
  font-size: 11px;
  padding: 6px 12px;
}

.split-pattern-caret {
  font-size: 10px;
  margin-left: 2px;
}

.split-skip-holidays {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--arl-text-secondary);
  margin-left: auto;
  cursor: pointer;
  user-select: none;
}

.split-skip-holidays input {
  margin: 0;
  cursor: pointer;
}

.split-pattern-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--arl-surface, #f7f8fa);
  border: 1px solid var(--arl-border);
  border-radius: 6px;
}

.split-pattern-panel.hidden {
  display: none;
}

.split-pattern-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.split-pattern-group + .split-pattern-group {
  padding-top: 10px;
  border-top: 1px solid var(--arl-border);
}

.split-pattern-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-text-secondary);
}

.split-pattern-group select {
  font-size: 12px;
  padding: 5px 8px;
}

.split-pattern-chips {
  display: flex;
  gap: 4px;
}

.day-chip {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--arl-border);
  background: var(--arl-white, #fff);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-text-secondary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.day-chip:hover {
  border-color: var(--arl-primary);
}

.day-chip.active {
  background: var(--arl-primary);
  color: var(--arl-white, #fff);
  border-color: var(--arl-primary);
}

.split-pattern-panel #split-apply-pattern,
.split-pattern-panel #split-apply-monthly {
  font-size: 11px;
  padding: 6px 12px;
  margin-left: auto;
}

/* An unconfirmed customer SUGGESTED from the subject line (#179).
 *
 * Deliberately outlined and amber rather than the solid brand chip .split-badge
 * wears: this marker exists to say "nobody has confirmed this", so it must not
 * read as authoritative as the customer name it sits beside. Uses --arl-warning,
 * which is declared at :root — NOT the --arl-yellow the multi-load banner reaches
 * for, which is defined nowhere and silently voids its own declarations. */
.suggested-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin-left: 6px;
  vertical-align: 1px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  line-height: 1;
  background: var(--arl-warning-light);
  color: var(--fk-attention);
  box-shadow: inset 0 0 0 1px var(--arl-warning);
}

/* "Load 1 of 2", "Split into 3 loads": a label, so the kit's plain chip (no dot). */
.split-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin-left: 6px;
  vertical-align: 1px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  line-height: 1;
  background: var(--fk-moving-bg);
  color: var(--fk-moving);
  box-shadow: inset 0 0 0 1px var(--fk-moving-line);
}

/* ─── Customer Profiles ───────────────────────────────────── */

/* Profile Edit Page */
.profile-edit-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

#profiles-list {
  width: 100%;
}

.profile-card {
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 20px;
  box-shadow: var(--arl-shadow);
  cursor: pointer;
  transition: all 0.15s;
}

.profile-card:hover {
  border-color: var(--arl-primary-light);
  box-shadow: var(--arl-shadow-lg);
}

.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.profile-card-name {
  font-family: var(--arl-font-accent);
  font-size: 16px;
  font-weight: 600;
  color: var(--arl-text);
}

.profile-card-status {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

.profile-active { background: var(--arl-success-light); color: var(--arl-success); }
.profile-inactive { background: var(--arl-surface); color: var(--arl-text-muted); }

.profile-card-details {
  font-size: 13px;
  color: var(--arl-text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-card-details span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-card-detail-label {
  color: var(--arl-text-secondary);
  font-weight: 500;
  min-width: 80px;
}

/* Locations list in profile */
.location-card {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--arl-surface-light);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: start;
  font-size: 13px;
}

.location-card-name {
  font-family: var(--arl-font-accent);
  font-weight: 600;
  font-size: 14px;
  color: var(--arl-text);
}

.location-card-address {
  color: var(--arl-text-secondary);
}

.location-card-contact {
  color: var(--arl-text-muted);
  font-size: 12px;
}

.location-card-meta {
  font-size: 11px;
  color: var(--arl-text-muted);
}

.location-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-card-actions .btn {
  font-size: 11px;
  padding: 3px 8px;
}

.location-badge {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 6px;
}

.location-badge-pickup { background: var(--arl-success-light); color: var(--arl-success); }
.location-badge-delivery { background: #EFF6FF; color: var(--arl-primary); }
.location-badge-both { background: var(--arl-surface); color: var(--arl-text-secondary); }

#pf-locations-list:empty::after {
  content: 'No saved locations yet. Locations will auto-save as shipments are approved.';
  color: var(--arl-text-muted);
  font-size: 13px;
  font-style: italic;
}

/* #309: the Add / Edit location pop-up, the kit's .fk-modal. Six columns, so City, State
   and ZIP share a row; one field to a row once the pop-up is phone-narrow. */
.pf-loc-body { container: pf-loc / inline-size; }
.pf-loc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pf-loc-grid > .pf-span-1 { grid-column: span 1; }
.pf-loc-grid > .pf-span-2 { grid-column: span 2; }
.pf-loc-grid > .pf-span-3 { grid-column: span 3; }
.pf-loc-grid > .pf-span-4 { grid-column: span 4; }
.pf-loc-grid > .pf-span-6 { grid-column: 1 / -1; }
.pf-loc-grid .fk-help:empty { display: none; }
.pf-loc-note { margin: 14px 0 0; }
@container pf-loc (max-width: 419px) {
  .pf-loc-grid > .fk-field { grid-column: 1 / -1; }
}

/* Profile Form */
.profile-form-card {
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  box-shadow: var(--arl-shadow-lg);
  margin-top: 20px;
  overflow: hidden;
}

.profile-form-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--arl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-form-header h3 { font-size: 18px; }

/* Profile form zone-based grid (mirrors detail view pattern) */
.profile-form-grid {
  display: grid;
  grid-template-columns: 20% 1fr 20%;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  padding: 10px 14px;
}

/* Zone placement */
.pf-zone-identity   { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; align-self: start; }
.pf-zone-config     { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; }
.pf-zone-operations { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; align-self: start; }
.pf-zone-locations  { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--arl-border); padding-top: 8px; }

/* ── Bordered panels for all zones ── */
.pf-zone-identity,
.pf-zone-config,
.pf-zone-operations {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  overflow: hidden;
}

/* ── Profile form section headers: dark navy bar (matches field-config-section-header) ── */
.profile-form-grid .field-section h4 {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arl-text-on-dark);
  background: var(--arl-dark-alt);
  padding: 6px 12px;
  margin: 0 -1px;
  margin-bottom: 0;
}

/* ── Side column field sizing: larger than detail view compact ── */
.pf-zone-identity .field-section,
.pf-zone-operations .field-section {
  margin-bottom: 0;
}

.pf-zone-identity .field-section > *:not(h4),
.pf-zone-operations .field-section > *:not(h4) {
  padding-left: 12px;
  padding-right: 12px;
}

.pf-zone-identity .field-row,
.pf-zone-operations .field-row {
  margin-bottom: 6px;
  margin-top: 6px;
  gap: 8px;
}

.pf-zone-identity .field-row label,
.pf-zone-operations .field-row label {
  width: 80px;
  font-size: 13px;
  color: var(--arl-text-secondary);
  white-space: nowrap;
}

.pf-zone-identity .field-row input,
.pf-zone-identity .field-row select,
.pf-zone-operations .field-row input,
.pf-zone-operations .field-row select {
  font-size: 14px;
  height: 30px;
  padding: 4px 8px;
}

/* ── Center column: pad content below header ── */
.pf-zone-config .field-section .field-config-desc {
  padding: 8px 12px 0;
  margin-bottom: 8px;
}

/* ── Section dividers in side columns ── */
.pf-zone-identity .field-section + .field-section,
.pf-zone-operations .field-section + .field-section {
  border-top: 1px solid var(--arl-border);
}

/* Bottom padding inside side zones */
.pf-zone-identity .field-section:last-child,
.pf-zone-operations .field-section:last-child {
  padding-bottom: 8px;
}

/* ── Customer Specific Build Instructions textarea ── */
.pf-zone-operations textarea {
  min-height: 80px;
  max-height: 150px;
  font-size: 13px;
  padding: 8px;
  margin-bottom: 4px;
}

/* ── Locations zone: bordered panel + horizontal card grid ── */
.pf-zone-locations {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  overflow: hidden;
  border-top: 1px solid var(--arl-border);
  padding-top: 0;
}

.pf-zone-locations .field-section {
  margin-bottom: 0;
}

.pf-zone-locations .field-config-desc {
  padding: 8px 12px 0;
  margin-bottom: 8px;
}

.pf-zone-locations #pf-locations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  padding: 0 12px;
}

.pf-zone-locations #btn-add-location {
  margin: 8px 12px 12px;
}

/* Responsive: tighten at 1500px */
@media (max-width: 1500px) {
  .profile-form-grid { gap: 6px 8px; padding: 8px 10px; }
}

/* Responsive: 2-column at 1200px */
@media (max-width: 1200px) {
  .profile-form-grid { grid-template-columns: 1fr 1fr; }
  .pf-zone-identity   { grid-column: 1; grid-row: 1; }
  .pf-zone-operations  { grid-column: 2; grid-row: 1; }
  .pf-zone-config     { grid-column: 1 / -1; grid-row: 2; }
  .pf-zone-locations  { grid-column: 1 / -1; grid-row: 3; }
}

/* Responsive: single column at 800px */
@media (max-width: 800px) {
  .profile-form-grid { grid-template-columns: 1fr; }
  .pf-zone-identity, .pf-zone-config, .pf-zone-operations, .pf-zone-locations {
    grid-column: 1; grid-row: auto;
  }
}

.profile-form-grid .field-section > textarea {
  width: calc(100% - 24px);
  margin-left: 12px;
  padding: 6px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 13px;
  font-family: var(--arl-font-body);
  color: var(--arl-text);
  resize: vertical;
  transition: all 0.15s ease;
}

.field-section > textarea:focus {
  padding: 6px 8px;
  font-size: 14px;
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

.profile-form-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--arl-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.field-config-desc {
  font-size: 13px;
  color: var(--arl-text-muted);
  margin-bottom: 12px;
}

.field-config-grid {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  overflow: hidden;
}

.field-config-section-header {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arl-text-on-dark);
  background: var(--arl-dark-alt);
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.field-config-section-header:hover {
  background: var(--arl-dark-muted);
}

.fc-chevron {
  display: inline-block;
  font-size: 10px;
  margin-right: 4px;
  transition: transform 0.15s;
}

.field-config-rows-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.field-config-rows-wrap.collapsed {
  display: none;
}

@media (max-width: 800px) {
  .field-config-rows-wrap {
    grid-template-columns: 1fr;
  }
}

/* The heading halves (.fc-head-half) share this template, so every heading sits over its
   column. 72px is wide enough for "REQUIRED" in the heading's 10px capitals; at 50px it ran
   into "INHERITED FROM". */
.field-config-row {
  display: grid;
  grid-template-columns: 1fr 72px 120px;
  align-items: center;
  padding: 4px 12px;
  border-bottom: 1px solid var(--arl-surface);
  border-right: 1px solid var(--arl-surface);
  font-size: 13px;
}

.field-config-row:hover {
  background: var(--arl-surface-light);
}

.field-config-row.fc-locked input[type="checkbox"] {
  cursor: not-allowed;
  opacity: 0.4;
}

/* #349: a field the load form has no box for, so its ticks did nothing. */
.field-config-row.fc-nobox label {
  color: var(--fk-ink-3);
}

.field-config-row.fc-nobox input[type="checkbox"] {
  cursor: not-allowed;
  opacity: 0.4;
}

.fc-nobox-note {
  margin: 0 0 8px;
  color: var(--fk-ink-3);
  font-size: var(--fk-type-xs);
}

.field-config-row label {
  color: var(--arl-text);
}

.field-config-row .fc-checkbox {
  text-align: center;
}

.field-config-row .fc-checkbox input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--arl-primary);
}

.field-config-col-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arl-text-muted);
  background: var(--arl-surface-light);
  border-bottom: 1px solid var(--arl-border);
}

.fc-head-half {
  display: grid;
  grid-template-columns: 1fr 72px 120px;
  align-items: end;
  padding: 6px 12px;
  line-height: 1.25;
}

.fc-head-req { text-align: center; }

/* One column of rows on a narrow screen, so one heading. */
@media (max-width: 800px) {
  .field-config-col-headers { grid-template-columns: 1fr; }
  .fc-head-half + .fc-head-half { display: none; }
}

/* Inheritance badges for per-org required fields. */
.fc-badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 10px;
  white-space: nowrap;
}
.fc-badge-tai {
  background: #1e40af;  /* TAI = navy — matches app's "authoritative" color */
  color: #fff;
}
.fc-badge-inherited {
  background: var(--arl-surface-light);
  color: var(--arl-text-muted);
  border: 1px solid var(--arl-border);
}
.field-config-inherited-badge {
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--arl-text-muted);
}
.fc-inherit-col {
  display: flex;
  align-items: center;
}

/* ─── Admin Settings ──────────────────────────────────────── */

.admin-header {
  margin-bottom: 16px;
}

.admin-header h2 { font-size: 24px; }

.admin-card {
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 24px;
  box-shadow: var(--arl-shadow);
}

.admin-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.admin-add-user {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-add-user input,
.admin-add-user select {
  font-family: var(--arl-font-body);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  color: var(--arl-text);
}

.admin-add-user input[type="email"] { width: 250px; }
.admin-add-user input[type="text"] { width: 180px; }

.role-badge {
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

.role-admin { background: #FEF3C7; color: #92400E; }
.role-user { background: #EFF6FF; color: var(--arl-primary); }

.status-active-badge { color: var(--arl-success); }
.status-inactive-badge { color: var(--arl-text-muted); }

/* ─── Activity Log ────────────────────────────────────────── */

/* In plain words ("One FORGE look" step 6): the kit's band, a row of number tiles across the
   page, then the list in one card: the filter bar, and a table of when, who, what happened
   (icon, words, and the details under them) and the load. */
.activity-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.activity-stats:empty { display: none; }

.activity-table { table-layout: fixed; }
.activity-table col.activity-c-when { width: 150px; }
.activity-table col.activity-c-who { width: 180px; }
.activity-table col.activity-c-load { width: 84px; }
.activity-table td { padding-top: 8px; padding-bottom: 8px; }
.activity-when { white-space: nowrap; color: var(--fk-ink-2); font-variant-numeric: tabular-nums; }
.activity-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-who.is-forge { color: var(--fk-ink-2); }
.activity-what-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.activity-what-text { display: flex; flex-direction: column; min-width: 0; }
.activity-what-words { font-weight: 600; color: var(--fk-ink); }
/* The details run to two lines at most; the whole of them is in the hover. */
.activity-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  margin-top: 1px;
  font-size: var(--fk-type-sm);
  color: var(--fk-ink-2);
}
.activity-load-link { color: var(--fk-link); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.activity-load-link:hover { text-decoration: underline; }
.activity-none { color: var(--fk-ink-3); }

@media (max-width: 1100px) {
  .activity-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Customer Search Dropdown ────────────────────────────── */

.customer-search {
  position: relative;
  width: 100%;
}

#customer-search-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 13px;
  font-family: var(--arl-font-body);
  color: var(--arl-text);
}

#customer-search-input:focus {
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

#customer-search-input.has-selection {
  font-weight: 600;
  color: var(--arl-primary);
  padding-right: 28px;
}

/* Indeterminate progress bar shown while a re-parse is in flight after
   the user selects a different customer. Sits flush below the input,
   matching its width. */
.reparse-progress {
  position: relative;
  height: 3px;
  margin-top: 4px;
  background: rgba(0, 96, 175, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.reparse-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: var(--arl-primary);
  border-radius: 2px;
  animation: reparse-progress-slide 1.1s ease-in-out infinite;
}
@keyframes reparse-progress-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

.customer-profile-link {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: var(--arl-primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
  line-height: 1;
}

.customer-profile-link:hover {
  opacity: 1;
}

.customer-profile-link.hidden {
  display: none;
}

.customer-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-top: none;
  border-radius: 0 0 var(--arl-radius) var(--arl-radius);
  box-shadow: var(--arl-shadow-lg);
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
}

.customer-search-results.open {
  display: block;
}

.customer-search-result {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--arl-surface);
}

.customer-search-result:hover {
  background: var(--arl-surface-light);
}

.customer-search-result-name {
  font-weight: 500;
  color: var(--arl-text);
}

.customer-search-result-acct {
  font-size: 11px;
  color: var(--arl-text-muted);
  font-family: var(--arl-font-accent);
}

.customer-search-add {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--arl-primary);
  font-weight: 600;
  border-top: 1px solid var(--arl-border);
  background: var(--arl-surface-light);
}

.customer-search-add:hover {
  background: #EFF6FF;
}

.customer-add-form {
  border: 1px solid var(--arl-primary);
  border-radius: var(--arl-radius);
  padding: 12px;
  margin-top: 6px;
  background: var(--arl-surface-light);
}

.customer-add-header {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arl-primary);
  margin-bottom: 8px;
}

.customer-add-form input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 13px;
  font-family: var(--arl-font-body);
  margin-bottom: 6px;
}

.customer-add-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* The small button, the kit's .fk-btn-sm (30px). Still !important: places such as
   .cp-pm-carriercard rely on this owning a small button's size. */
.btn-sm {
  font-size: var(--fk-type-sm) !important;
  padding: 6px 11px !important;
}

/* TAI badges in detail view */
.tai-badge {
  background: var(--arl-success-light);
  color: var(--arl-success);
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}

/* ⚠ THIS BADGE USED TO CLIP, AND THAT WAS FEEDBACK #271. It was
 * `white-space: nowrap` in a `max-width: 400px` with `overflow: hidden` and no
 * title attribute, so a rep saw exactly:
 *
 *     TAI Error: ...Shipments failed (500): {"message":"A
 *
 * — cut mid-JSON, with no way to see the rest. It was filed as "Weird error",
 * which is a fair name for it. An error message that cannot be read is not an
 * error message. It wraps now, and it is allowed to be as tall as it needs. */
.tai-error-badge {
  background: var(--arl-error-light);
  color: var(--arl-error);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 4px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tai-error-label { font-weight: 600; }
/* What to actually do about it. Quieter than the label, because the label is
 * the thing being scanned for. */
.tai-error-fix { color: var(--arl-text-secondary, #666666); font-weight: 400; }
/* ⚠ The raw TAI string, always kept. The label above is a READING of it, and
 * for a failure mode the taxonomy has never seen, the reading is a guess — the
 * raw text is the only thing worth pasting to TAI support. Small and dim, but
 * present. */
.tai-error-raw {
  color: var(--arl-text-muted, #999999);
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

/* TAI customer-routing mismatch — fires when the post-submit verifier finds
 * the booking landed on a different customer record than CustomersByReference
 * resolves the same ref code to. Yellow-warning rather than red-error because
 * the load IS booked (just on the wrong record); needs ops attention but not
 * blocking. Hover tooltip on the badge carries the full diff. */
.tai-mismatch-badge {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: help;
}

/* Carrier Buy (Linehaul Buy) outcome — green when the post-submit write landed
 * in TAI, red when it failed and the operator must set Linehaul Buy manually.
 * Hover tooltip carries the detail (source field / error). */
.tai-buy-badge {
  background: var(--arl-success-light, #d4edda);
  color: var(--arl-success, #155724);
  border: 1px solid rgba(21, 87, 36, 0.25);
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: help;
}

.tai-buy-badge.tai-buy-failed {
  background: var(--arl-error-light);
  color: var(--arl-error);
  border-color: var(--arl-error);
}

/*
 * "Sent but not confirmed" (#150/#154) — deliberately NEUTRAL, not a warning. The
 * write went through; only the read-back is missing, either because it failed or
 * because the load predates it. Colouring this like a failure would tell an operator
 * a load is broken when nothing about it changed, which is the mirror image of the
 * unconditional green tick this replaced.
 */
.tai-buy-badge.tai-buy-unconfirmed {
  background: var(--arl-surface-light, #f4f6f8);
  color: var(--arl-text-secondary, #5a6672);
  border-color: var(--arl-border, #d6dce2);
}

.queue-card-tai {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin-left: 6px;
  vertical-align: 1px;
  border-radius: var(--fk-radius-pill);
  background: var(--fk-done-bg);
  color: var(--fk-done);
  box-shadow: inset 0 0 0 1px var(--fk-done-line);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.queue-card-tai:hover {
  text-decoration: underline;
}

/* Carrier-buy warning on a queue card. Sits beside the TAI number because that is
   where the operator's eye already goes to check the load reached TAI. Amber for
   "not sent, nothing lost" (a placeholder we withheld), red for "TAI does not have
   this money and somebody must type it in". */
.queue-card-buywarn {
  background: var(--arl-warning-light, #FFF4E5);
  color: var(--arl-warning, #B25E00);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  white-space: nowrap;
  cursor: help;
}

.queue-card-buywarn-failed {
  background: var(--arl-danger-light, #FDECEA);
  color: var(--arl-danger, #C62828);
}

.tai-badge a {
  color: var(--arl-success);
  text-decoration: none;
  font-weight: 600;
}

.tai-badge a:hover {
  text-decoration: underline;
}

/* Alerts Picker */
.alerts-picker { margin-bottom: 4px; }
.alerts-selected { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.alert-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px;
  font-size: 12px; font-weight: 500;
  background: var(--arl-primary-light, #EFF6FF); color: var(--arl-primary);
  border: 1px solid var(--arl-primary-border, #BFDBFE);
  cursor: default;
}
.alert-chip .alert-remove {
  cursor: pointer; font-size: 14px; line-height: 1;
  opacity: 0.6; margin-left: 2px;
}
.alert-chip .alert-remove:hover { opacity: 1; color: var(--arl-error); }
.alerts-dropdown-wrap { position: relative; }
.alerts-search {
  width: 100%; padding: 4px 8px;
  border: 1px solid var(--arl-border); border-radius: var(--arl-radius);
  font-size: 13px; font-family: var(--arl-font-body);
}
.alerts-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  max-height: 200px; overflow-y: auto;
  background: white; border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius); box-shadow: var(--arl-shadow);
  margin-top: 2px;
}
.alerts-dropdown.hidden { display: none; }
.alert-option {
  padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.alert-option:hover { background: var(--arl-surface); }
.alert-option.selected { background: var(--arl-primary-light, #EFF6FF); }

.btn-warning {
  background: var(--arl-warning) !important;
  color: white !important;
  border: none !important;
}

.btn-warning:hover {
  opacity: 0.9;
}

/* The Customers list ("One FORGE look" step 4): a kit table that is read, not edited.
   A row opens the customer's own page, where every change is made. */
.profiles-table .profile-row { cursor: pointer; }
.profiles-table .profile-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fk-blue-500); }
.profile-name { font-weight: 600; color: var(--fk-ink); }
.profile-none { color: var(--fk-ink-3); }
.lb-person { display: inline-flex; align-items: center; white-space: nowrap; }

/* ── TAI code health (nightly sweep) ─────────────────────────────────────────
   The code, then the sweep's word on it as a kit chip (normal case): red when TAI will not
   book with it, amber for an untested fix, a quiet grey for what is only reported. On the
   customer's page the chip sits under the TAI Code box, with "Use <code>" when TAI
   suggests one. */
.lb-taicode { margin-right: 6px; font-variant-numeric: tabular-nums; }

.lb-code-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
  color: var(--fk-parked);
  background: var(--fk-parked-bg);
  box-shadow: inset 0 0 0 1px var(--fk-parked-line);
}

.lb-code-badge.is-bad { color: var(--fk-broken); background: var(--fk-broken-bg); box-shadow: inset 0 0 0 1px var(--fk-broken-line); }

.lb-code-badge.is-warn { color: var(--fk-attention); background: var(--fk-attention-bg); box-shadow: inset 0 0 0 1px var(--fk-attention-line); }

/* Reported, never counted — a lookup throw or TAI's disabled flag, neither of which has
   been shown to stop a load. The quietest chip there is: it must not read as an
   accusation against a customer that ships daily. */
.lb-code-badge.is-info { font-weight: 500; }

/* The operator has taken the suggestion, so the badge no longer describes what is in the
   box. Dimmed rather than removed, because a badge that silently vanishes mid-edit reads
   as "it fixed itself". */
.lb-code-badge.is-stale {
  opacity: 0.4;
  text-decoration: line-through;
}

/* Has to READ as a button: a tinted fill and an edge in ARL blue, the kit's small quiet
   action, so it is not mistaken for more text about the problem. */
.lb-code-fix {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--fk-blue-100);
  border-radius: var(--fk-radius-md);
  background: var(--fk-blue-50);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  color: var(--fk-link);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.lb-code-fix:hover { border-color: var(--fk-blue-500); background: var(--fk-blue-100); }
.lb-code-fix:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }

/* Under the TAI Code box on the customer's page: the box and its chips share the box's place
   in the row, so the chips never squeeze it. */
.pf-tai-code-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-tai-code-field > input { width: 100%; }
.pf-tai-code-health { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* The page's columns are narrow (step 5 widens them): the chip and "Use <code>" wrap onto a
   second line rather than clip, so the suggested code can be read before it is used. */
.pf-tai-code-health :is(.lb-code-badge, .lb-code-fix) {
  height: auto;
  min-height: 22px;
  padding: 3px 9px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  text-overflow: clip;
}
.pf-tai-code-health:empty { display: none; }

/* Re-parse modal */
.modal-sm .modal-content {
  max-width: 440px;
}

.reparse-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--arl-text-secondary);
  cursor: pointer;
}

.reparse-checkbox-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--arl-primary);
}

/* ─── Utilities ───────────────────────────────────────────── */

.hidden { display: none !important; }

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Small spinner for light backgrounds (parsing status — bug #76). The base
   .spinner is white-on-transparent for dark buttons; this one is tinted for
   queue cards and banners. Reuses the @keyframes spin above. */
.spinner-inline {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(13, 71, 161, 0.25);
  border-top-color: #0D47A1;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: -1px;
  margin-right: 4px;
}

/* ─── Landing Page ─────────────────────────────────────────── */

/* When landing page is visible, main must go full-bleed (no max-width/padding) */
main.landing-active {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The whole landing page sits on .landing-backdrop, the moving freight-network map,
   pinned to the viewport. The header floats over it (below), so the view starts at
   the very top and pads down past the header itself. */
#landing-view {
  position: relative;
  isolation: isolate; /* .landing-backdrop's z-index:-1 stays above this background */
  background: var(--arl-dark);
  min-height: 100vh;
  padding-top: 56px;
  display: flex;
  flex-direction: column;
}

body.impersonating #landing-view {
  padding-top: 88px; /* + the 32px banner; main's own offset is zeroed on landing */
}

/* Transparent over the band and scrolls away with the page. Left sticky, it would sit
   transparent over the white cards once you scroll and its white text would vanish. */
#landing-header {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  box-shadow: none;
}

/* Fixed, so the map fills the window and stays put while the cards scroll over it. */
.landing-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
}

/* A soft vignette keeps the welcome text and the cards readable over the lanes. */
.landing-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 55%, rgba(1, 10, 25, 0) 0%, rgba(1, 10, 25, 0.5) 100%);
  pointer-events: none;
}

.landing-hero {
  text-align: center;
  padding: 48px 20px 36px;
}

.landing-welcome {
  font-family: var(--arl-font-heading);
  font-size: 38px;
  font-weight: 600;
  color: var(--arl-white);
  text-transform: none;
  letter-spacing: 0.5px;
  margin: 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.landing-tagline {
  font-family: var(--arl-font-accent);
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  letter-spacing: 3px;
  margin-top: 8px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Card grid. The cards keep one width and the rows are centred, so the page uses the
   window's width before it needs another row (#310: ten cards fit a 1080p window without a
   scroll). A wide window holds six to a row, a laptop's five, a smaller one four; each
   --landing-cols-N is how many a row holds where N fit, which app.js's evenLandingRows
   lowers so the rows come out even. */
.landing-grid {
  --landing-cols-6: 6;
  --landing-cols-5: 5;
  --landing-cols-4: 4;
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  justify-content: center;
  gap: 14px;
  max-width: calc(var(--landing-cols-6) * (220px + 14px) + 48px); /* the cards and gaps, plus the side padding */
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 32px;
  align-content: start;
  flex: 1;
}

/* Stagger-fade entrance animation */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Frosted dark glass over the map: the lanes stay visible, blurred, behind each card. */
.landing-card {
  background: rgba(6, 22, 44, 0.42);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 20px 16px 18px;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  min-height: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: cardFadeUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.landing-card h3 {
  font-family: var(--arl-font-heading);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--arl-white);
  margin: 0;
}

.landing-card p {
  font-family: var(--arl-font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
  margin: 0 0 6px;
}

/* Icon circle containers */
.landing-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 168, 224, 0.12);
  border: 1px solid rgba(79, 168, 224, 0.22);
  color: #6FBBEA;
  margin-bottom: 4px;
}

.landing-card-icon-wrap svg {
  width: 22px;
  height: 22px;
}

/* The icons are drawn in ARL blue, which disappears on the dark glass; lift them. */
.landing-card-icon-wrap [stroke="var(--arl-primary)"] {
  stroke: #6FBBEA;
}

.landing-card-icon-wrap-active {
  background: rgba(79, 168, 224, 0.12);
  color: #6FBBEA;
}

/* Active card */
.landing-card-active {
  cursor: pointer;
}

.landing-card-active:hover {
  background: rgba(10, 34, 66, 0.7);
  border-color: rgba(79, 168, 224, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(79, 168, 224, 0.25);
  transform: translateY(-3px);
}

.landing-card-active:hover .landing-card-icon-wrap {
  background: rgba(79, 168, 224, 0.2);
}

.landing-card-active:hover .landing-badge-active {
  background: var(--arl-primary-dark);
  box-shadow: 0 2px 8px rgba(0, 96, 175, 0.3);
}

.landing-card-active:active {
  transform: translateY(-1px);
}

/* Live stat on active card */
.landing-stat {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-success);
  min-height: 18px;
}

.landing-stat-warn {
  color: var(--arl-warning);
}

/* Disabled cards (Coming Soon) */
.landing-card-disabled {
  cursor: default;
  background: rgba(6, 22, 44, 0.35);
  border-style: dashed;
  box-shadow: none;
}

.landing-card-disabled .landing-card-icon-wrap {
  filter: grayscale(1);
  opacity: 0.45;
}

.landing-card-disabled h3 {
  color: rgba(255, 255, 255, 0.5);
}

.landing-card-disabled p {
  color: rgba(255, 255, 255, 0.38);
}

/* Phase tooltip on hover */
.landing-card-disabled::after {
  content: attr(data-phase);
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.landing-card-disabled:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Badges */
.landing-badge {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  padding: 6px 16px;
  border-radius: 20px;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
}

.landing-badge-active {
  color: var(--arl-white);
  background: var(--arl-primary);
  transition: all 0.25s;
}

.landing-badge-soon {
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 5px 14px;
}

/* Landing footer */
.landing-footer {
  text-align: center;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.landing-footer-brand {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.landing-env-switch-wrap {
  position: relative;
  display: inline-flex;
}
.landing-env-popover {
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
}
.landing-env-caret { font-size: 7px; opacity: 0.7; margin-left: 4px; }
.landing-env-badge {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
}

.landing-env-dev {
  color: var(--arl-primary);
  background: rgba(0, 96, 175, 0.1);
}

.landing-env-beta {
  color: var(--arl-warning);
  background: var(--arl-warning-light);
}

.landing-env-prod {
  color: var(--arl-success);
  background: var(--arl-success-light);
}

.header-logo-link {
  cursor: pointer;
}

/* ─── Notification Bell + Panel ───────────────────────────── */

.nb-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  min-width: 34px;
}
.nb-bell-icon { font-size: 15px; line-height: 1; }
.nb-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--arl-accent, #e11a22);
  color: #fff;
  border-radius: 9px;
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--arl-dark);
}
.nb-badge.hidden { display: none; }

.nb-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  box-shadow: 0 12px 36px rgba(1, 10, 25, 0.22);
  z-index: 500;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nb-panel.hidden { display: none; }

.nb-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--arl-border);
  background: var(--arl-surface-light);
}
.nb-panel-title {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--arl-text);
}
.nb-link-btn {
  background: none;
  border: none;
  color: var(--arl-primary);
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  padding: 2px 4px;
}
.nb-link-btn:hover { color: var(--arl-primary-dark); }

.nb-panel-list {
  flex: 1 1 auto;
  overflow-y: auto;
}
.nb-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--arl-border);
  cursor: pointer;
  transition: background 0.1s ease;
}
.nb-item:hover { background: var(--arl-surface-light); }
.nb-item:last-child { border-bottom: none; }
.nb-item.unread { background: rgba(0, 96, 175, 0.06); }
.nb-item.unread .nb-item-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--arl-primary);
  margin-right: 8px;
  vertical-align: middle;
}
.nb-item-title {
  font-weight: 600;
  color: var(--arl-text);
  font-size: 13px;
  margin-bottom: 2px;
}
.nb-item-body {
  font-size: 12px;
  color: var(--arl-text-secondary);
  margin-bottom: 4px;
}
.nb-item-time {
  font-size: 11px;
  color: var(--arl-text-muted);
  font-family: var(--arl-font-mono, monospace);
}
.nb-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--arl-text-muted);
  font-size: 13px;
}

/* ─── Header banner stats (hk*, header-kpis.js) ───────────────
 * Up to three of the person's own numbers, left of the bell. Literal rgba colours, not
 * tokens: the header is always dark, and the dark-board token overrides (dashboards.css)
 * never reach it. Width budget at 1280px: the brand ~333px and the existing actions
 * ~490-575px leave ~330-410px, so each stat is capped at 132px. */

.hk-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* A grid so the role chip (when there is one) sits beside the value, and the label
 * runs under both: "[BDR] $42.1K" / "MARGIN PU · MO". The chip's column may shrink to
 * nothing (minmax(0, …)) and the value's may not: squeezed, the chip is cut short inside
 * the stat rather than spilling out past its border (justify-content: end pushed the
 * overflow out on the LEFT, over the stat before it). */
.hk-stat {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  grid-template-areas: "role value" "label label";
  justify-content: end;
  align-content: center;
  column-gap: 5px;
  height: 40px;
  max-width: 132px;
  min-width: 0;
  padding: 2px 10px;
  line-height: 1.15;
  text-align: right;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--arl-radius);
  color: #fff;
  font-family: var(--arl-font-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.hk-stat:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.hk-stat:focus-visible {
  outline: 2px solid var(--arl-primary-light);
  outline-offset: 1px;
}
.hk-stat-value {
  grid-area: value;
  justify-self: end;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hk-stat-role {
  grid-area: role;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  /* Clipped at the chip's own edge, never past the stat's. No ellipsis: "COMPANY" beside
   * "15.3%" is a pixel short of the 132px cap, which the chip's right padding absorbs
   * unseen; an ellipsis would turn that pixel into "COMPAN…". */
  overflow: hidden;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.hk-stat-label {
  grid-area: label;
  justify-self: end;
  min-width: 0; /* a grid item would otherwise refuse to shrink, and push past the 132px cap */
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hk-stat.is-loading .hk-stat-value,
.hk-stat.is-error .hk-stat-value {
  opacity: 0.45;
}
/* % to plan, by the boards' rule against pace. Lighter shades than the boards' chips so
 * they read on the dark header: red, the lowest, is about 6.4:1 on a stat's background. */
.hk-stat.hk-rag-green .hk-stat-value { color: #4ade80; }
.hk-stat.hk-rag-amber .hk-stat-value { color: #fbbf24; }
.hk-stat.hk-rag-red .hk-stat-value { color: #f87171; }
.hk-stat.hk-rag-green { border-color: rgba(74, 222, 128, 0.45); }
.hk-stat.hk-rag-amber { border-color: rgba(251, 191, 36, 0.45); }
.hk-stat.hk-rag-red { border-color: rgba(248, 113, 113, 0.45); }

/* Three stats from 1280px up; only the first between 801 and 1279px; none at the repo's
 * mobile breakpoint (max-width: 800px — sidebar.js MQ_OVERLAY, where the hamburger shows). */
@media (max-width: 1279px) {
  .hk-stat:not(:first-child) { display: none; }
}
/* Below 1440px a long name (the 280px cap) would leave three stats flush against the logo;
 * give the name 200px while the bar is showing, and leave it alone when there is no bar. */
@media (min-width: 801px) and (max-width: 1439px) {
  .header-actions:has(> #hk-bar:not(.hidden)) #user-name { max-width: 200px; }
}
/* From 801px to about 1080px even ONE stat has no room beside the bell, the search button
 * and the name ("Keith Reeher | ARL Network"): the stat was squeezed to ~60px, its value
 * spilling over its border and its label cut to "MARGI…". While the bar shows, the search
 * button goes icon-only (Ctrl K still opens it) and the name is capped — tighter still
 * below 880px, where a Company chip needs another ~20px. The harness draws 801, 850 and
 * 1000px with a long name (tools/harness/header-kpis.html). */
@media (min-width: 801px) and (max-width: 1079px) {
  .header-actions:has(> #hk-bar:not(.hidden)) .nav-search-label,
  .header-actions:has(> #hk-bar:not(.hidden)) .nav-search-kbd { display: none; }
  .header-actions:has(> #hk-bar:not(.hidden)) #user-name { max-width: 90px; }
}
@media (min-width: 801px) and (max-width: 879px) {
  .header-actions:has(> #hk-bar:not(.hidden)) #user-name { max-width: 70px; }
}
@media (max-width: 800px) {
  .hk-bar { display: none; }
}

/* ─── Header on a phone ───────────────────────────────────────
 * At 375px the header was 548px wide with nobody signed in and 850px signed in, so every
 * page scrolled sideways: the logo image alone is 333px (it carries the ARL NETWORK
 * wordmark), "Search Ctrl K" 141px, the name ~160px and Sign out 74px. At the repo's mobile
 * breakpoint (800px: sidebar.js MQ_OVERLAY, where the hamburger shows) every control stays
 * and only the words go:
 *   - the logo keeps the flame, the anvil and FORGE, cut just before the divider and wordmark;
 *   - search, the bell, your name (the link to your profile) and Sign out become icons drawn
 *     like the sidebar's (scripts/gen-sidebar-icons.mjs). The words stay in the page for
 *     screen readers; Ctrl K goes, as a phone has no Ctrl key;
 *   - 16px side padding puts the hamburger's lines 24px in, level with the page below.
 * Nothing here applies above 800px: the desktop header is unchanged. Pinned by
 * header-phone.client.test.js. */
@media (max-width: 800px) {
  header {
    padding: 0 16px;
    --hdr-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 2h-14z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
    --hdr-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");
    --hdr-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.8-3.8 3.6-6 7-6s6.2 2.2 7 6'/%3E%3C/svg%3E");
    --hdr-i-sign-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a1.5 1.5 0 0 0-1.5 1.5v13A1.5 1.5 0 0 0 6 20h4'/%3E%3Cpath d='M15 8l4 4-4 4'/%3E%3Cpath d='M19 12H9.5'/%3E%3C/svg%3E");
  }
  /* The logo image is 500×60: the flame, the anvil and FORGE, a faint divider at x=170, and
   * the wordmark from 182. Same 40px height, cropped half a unit short of the divider so its
   * anti-aliasing leaves no sliver at the edge (113px). An <img> SVG cannot load Oswald:
   * FORGE ends at x=152 in Arial Narrow, but at 171 in the Arial Bold an iPhone falls back
   * to, so there the crop trims about a pixel off the E's arms. */
  header .header-logo {
    width: calc(40px * 169.5 / 60);
    object-fit: cover;
    object-position: left center;
  }
  header .header-actions,
  header .user-info { gap: 4px; }

  /* Search and the bell: 36px icon buttons. The search label is hidden the screen-reader
   * way, so the button is still called "Search"; the bell has its aria-label. */
  header .nav-btn-search,
  header .nb-bell {
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    justify-content: center;
  }
  header .nav-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  header .nav-search-kbd { display: none; }
  /* Their emoji give way to line icons the way the sidebar's do: the glyph at size 0, the
   * icon a mask filled with the button's own colour. */
  header .nav-search-icon,
  header .nb-bell-icon { font-size: 0; }
  header .nav-search-icon::before,
  header .nb-bell-icon::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--hdr-i-search) center / 18px 18px no-repeat;
    mask: var(--hdr-i-search) center / 18px 18px no-repeat;
  }
  header .nb-bell-icon::before {
    -webkit-mask-image: var(--hdr-i-bell);
    mask-image: var(--hdr-i-bell);
  }

  /* Your name and Sign out: the words are pushed out past the edge of the box and clipped
   * (screen readers still read them), and the icon is drawn in their place. The ids match
   * `.user-info #user-name`, which would otherwise keep its ellipsis. Sign out keeps its
   * border, in the 36×30 box of the Manage team button beside it on Home. */
  #app-header .user-name-link,
  #landing-header .user-name-link,
  header .btn-logout {
    position: relative;
    width: 36px;
    height: 36px;
    max-width: none;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    text-overflow: clip;
  }
  header .btn-logout { height: 30px; }
  #app-header .user-name-link::before,
  #landing-header .user-name-link::before,
  header .btn-logout::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--hdr-i-user) center / 18px 18px no-repeat;
    mask: var(--hdr-i-user) center / 18px 18px no-repeat;
  }
  header .btn-logout::before {
    -webkit-mask-image: var(--hdr-i-sign-out);
    mask-image: var(--hdr-i-sign-out);
  }
}
/* Below 360px (an iPhone with Display Zoom is 320px wide) FORGE no longer fits beside the
 * hamburger and four icons, so the app header shows the flame and anvil alone. Home's
 * header, with no hamburger and at most three icons, keeps the word. */
@media (max-width: 359px) {
  #app-header .header-logo { width: calc(40px * 50 / 60); }
}

/* ─── App Sidebar ─────────────────────────────────────────── */

:root {
  --sidebar-w-expanded: 240px;
  --sidebar-w-rail: 60px;
  --sidebar-header-h: 56px;

  /* How far down the viewport page content actually begins.
   *
   * The app header is `position: sticky; top: 0` at z-index 100, so ANYTHING that
   * sticks to the top of the PAGE (as opposed to its own scroll container) has to
   * offset by this or it parks underneath the header and is never seen. That was
   * feedback #123: the Quote Tracker table header already said
   * `position: sticky; top: 0` and looked broken, because it was sticking
   * correctly — behind the black bar, at z-index 1.
   *
   * Adjusted below for the impersonation banner, which pushes everything down.
   * Consume this rather than writing 56px (or 88px) again: the four existing
   * `body.impersonating` offsets each restate the same 32px, and that is exactly
   * how such a number drifts.
   */
  --app-content-top: var(--sidebar-header-h);
}

.app-sidebar {
  position: fixed;
  top: var(--sidebar-header-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w-expanded);
  background: linear-gradient(180deg, var(--arl-dark) 0%, var(--arl-dark-alt) 100%);
  color: var(--arl-text-on-dark);
  display: flex;
  flex-direction: column;
  z-index: 90;
  transition: width 0.18s ease, transform 0.22s ease;
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.app-sidebar.hidden { display: none; }
.app-sidebar.rail { width: var(--sidebar-w-rail); }
.app-sidebar.overlay {
  width: var(--sidebar-w-expanded);
  box-shadow: 0 0 40px rgba(0,0,0,0.4);
  transform: translateX(0);
}
.app-sidebar.overlay.closed {
  transform: translateX(-100%);
}

/* The impersonation banner (32px, position: fixed at the very top) pushes the
   header down, and everything anchored below it with it. */
body.impersonating {
  --app-content-top: calc(var(--sidebar-header-h) + 32px);
}

body.impersonating .app-sidebar {
  top: var(--app-content-top);
}

/* Sidebar collapse toggle button */
.sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--arl-text-on-dark);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s, transform 0.2s;
  z-index: 2;
}
.sidebar-toggle:hover { opacity: 1; background: rgba(255,255,255,0.14); }
.app-sidebar.rail .sidebar-toggle {
  top: 8px;
  right: 50%;
  transform: translateX(50%);
}
.app-sidebar.rail .sidebar-toggle-icon { display: inline-block; transform: rotate(180deg); }

/* Sections & groups */
.sidebar-section,
.sidebar-group {
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-modules {
  padding-top: 44px; /* space under toggle */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-group.hidden { display: none; }

.sidebar-group-heading {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.45);
  padding: 12px 10px 4px;
}
.app-sidebar.rail .sidebar-group-heading {
  visibility: hidden;
  height: 8px;
  padding: 6px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 6px 8px 0;
}

/* Nav items */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-family: var(--arl-font-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--arl-white);
}
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(0, 96, 175, 0.34), rgba(0, 96, 175, 0.06));
  color: var(--arl-white);
  border-left-color: var(--arl-primary-light);
  box-shadow: inset 0 0 0 1px rgba(51, 136, 199, 0.16);
}

/* The line icons (sidebar-icons.css) take their colour from here: dim at rest, bright
   on hover, ARL light blue on the page you are on. */
.sidebar-icon {
  flex: 0 0 24px;
  font-size: 16px;
  text-align: center;
  line-height: 1;
}
.sidebar-item .sidebar-icon {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.12s;
}
.sidebar-item:hover .sidebar-icon { color: rgba(255, 255, 255, 0.85); }
.sidebar-item.active .sidebar-icon { color: #6FB3EE; }
.sidebar-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar.rail .sidebar-label { display: none; }

.sidebar-badge {
  margin-left: auto;
  background: var(--arl-warning);
  color: #3d2200;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
.sidebar-badge:empty { display: none; }
.app-sidebar.rail .sidebar-badge {
  position: absolute;
  margin: 0;
  transform: translate(10px, -6px);
  padding: 0 4px;
}

/* ── The sidebar as a tree (#316) ───────────────────────────────────────────────
   Brandon: "collapsible dropdowns, where clicking a main category expands or collapses its
   sub-menu, along with an indicator (like an arrow)". sidebar.js nests each module's group
   under its row. The row carries the arrow (right when closed, down when open). Its pages sit
   under its name, on a thin rule down from its icon, so they read as that module's; they show
   no icon of their own while their names are on screen, which keeps 240px wide enough for
   "Unattributed Customers". `is-open` is the open state; `hidden` still means "not yours to
   see", and a module's pages go with its row. */
.sidebar-modules .sidebar-group {
  position: relative;
  padding: 0 0 6px;
  gap: 0;
}
.sidebar-modules .sidebar-group::before {
  content: "";
  position: absolute;
  left: 25px; /* under the module's icon */
  top: 0;
  bottom: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.sidebar-modules .sidebar-group:not(.is-open),
.sidebar-modules .sidebar-item.hidden + .sidebar-group { display: none; }
.sidebar-modules .sidebar-group-heading { display: none; } /* the row above names it */
/* Each page's row starts on the rule, so the page on screen lights its stretch of it blue, and
   its name sits under the module's name. */
.sidebar-modules .sidebar-group .sidebar-item {
  margin-left: 25px;
  padding: 6px 6px 6px 21px;
}
.sidebar-modules .sidebar-group .sidebar-item .sidebar-icon { display: none; }
.sidebar-modules .sidebar-group .sidebar-action { margin: 4px 0 6px 36px; }

/* The Admin row is a button (Admin has no page of its own): as plain as the links beside it. */
button.sidebar-item {
  width: 100%;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  line-height: inherit;
  text-align: left;
}

/* The arrow sits in the row's right padding, so a module's name keeps its width. */
.sidebar-parent {
  position: relative;
  padding-right: 24px;
}
.sidebar-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.55;
  transform: rotate(-45deg);
  transition: transform 0.15s ease, opacity 0.12s;
}
.sidebar-parent[aria-expanded="true"] .sidebar-caret { transform: rotate(45deg); margin-top: -5px; }
.sidebar-parent:hover .sidebar-caret { opacity: 0.9; }
.sidebar-parent.is-empty { padding-right: 10px; }
.sidebar-parent.is-empty .sidebar-caret { display: none; }
/* The page's own module, with its pages open below it: the page's row carries the mark. */
.sidebar-parent.active[aria-expanded="true"] {
  background: none;
  box-shadow: none;
  border-left-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-caret { transition: none; }
}
/* Collapsed to the rail (icons only; also how the sidebar starts at 1200px and below): the
   pages are icons again, on a darker panel under their module, and the arrow shrinks into the
   row's corner. */
.app-sidebar.rail .sidebar-modules .sidebar-group {
  padding: 2px 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
}
.app-sidebar.rail .sidebar-modules .sidebar-group::before { display: none; }
.app-sidebar.rail .sidebar-modules .sidebar-group .sidebar-item { margin-left: 0; padding: 8px 10px; }
.app-sidebar.rail .sidebar-modules .sidebar-group .sidebar-item .sidebar-icon { display: block; }
.app-sidebar.rail .sidebar-modules .sidebar-group .sidebar-action { margin: 4px 0; }
.app-sidebar.rail .sidebar-parent { padding-right: 10px; }
.app-sidebar.rail .sidebar-caret {
  top: auto;
  right: 5px;
  bottom: 9px;
  width: 5px;
  height: 5px;
  margin-top: 0;
}

/* Primary action button (Parse Email) */
.sidebar-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin: 4px 0 8px;
  border: none;
  border-radius: var(--fk-radius-md);
  background: var(--fk-blue-600);
  color: var(--fk-white);
  /* The kit's button words: normal case in the UI font ("One FORGE look" step 3). */
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s;
}
.sidebar-action:hover { background: var(--fk-blue-700); }
.sidebar-action .sidebar-icon { font-size: 18px; font-weight: 700; }
.app-sidebar.rail .sidebar-action {
  justify-content: center;
  padding: 9px 0;
}

/* Footer */
.sidebar-footer {
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0,0,0,0.18);
}
.sidebar-env-switch-wrap {
  position: relative;
  align-self: flex-start;
}
.sidebar-env-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--arl-font-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 96, 175, 0.25);
  color: #8fc1ff;
  border: none;
  cursor: pointer;
}
.sidebar-env-badge:hover { filter: brightness(1.2); }
.sidebar-env-caret { font-size: 7px; opacity: 0.7; }
.sidebar-env-badge.env-local { background: rgba(120, 120, 120, 0.25); color: #c8c8c8; }
.sidebar-env-badge.env-beta { background: rgba(217, 119, 6, 0.25); color: #f3c978; }
.sidebar-env-badge.env-prod { background: rgba(22, 163, 74, 0.25); color: #7cd99d; }

.sidebar-env-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #1a1f2b;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  padding: 6px;
  z-index: 2000;
}
.sidebar-env-popover.hidden { display: none; }
.sidebar-env-popover-head {
  font-family: var(--arl-font-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding: 4px 8px 6px;
}
.sidebar-env-popover-empty {
  padding: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.sidebar-env-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  text-align: left;
}
.sidebar-env-row:hover:not(:disabled) { background: rgba(255,255,255,0.06); }
.sidebar-env-row:disabled { cursor: default; }
.sidebar-env-row.is-current { background: rgba(0, 96, 175, 0.18); }
.sidebar-env-row.is-locked { opacity: 0.5; }
.sidebar-env-row-icon {
  width: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  text-align: center;
}
.sidebar-env-row-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sidebar-env-row-label { font-size: 12px; font-weight: 600; }
.sidebar-env-row-sub {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
}

.sidebar-org-cell {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  padding: 4px 2px;
  border-radius: 4px;
  line-height: 1.25;
  overflow: hidden;
}
.sidebar-org-cell:hover { background: rgba(255,255,255,0.05); }
.sidebar-org-name {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-org-role {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.app-sidebar.rail .sidebar-footer {
  align-items: center;
  padding: 10px 4px;
}
.app-sidebar.rail .sidebar-org-cell,
.app-sidebar.rail .sidebar-env-switch-wrap {
  display: none;
}

/* Overlay backdrop (shown below 800px or when overlay is open) */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 10, 25, 0.5);
  z-index: 89;
  opacity: 1;
  transition: opacity 0.2s;
}
.sidebar-backdrop.hidden { display: none; }

/* Mobile hamburger toggle in header (only visible in overlay mode) */
.sidebar-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: 6px;
}
.sidebar-mobile-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--arl-text-on-dark);
  border-radius: 1px;
}

/* Main content offset when sidebar is visible */
main.with-sidebar {
  margin-left: var(--sidebar-w-expanded);
  max-width: none;
  transition: margin-left 0.18s ease;
}
main.with-sidebar.sidebar-rail {
  margin-left: var(--sidebar-w-rail);
}
main.with-sidebar.sidebar-overlay {
  margin-left: 0;
}

/* Responsive: auto-collapse to rail between 800–1200px, overlay below 800px */
@media (max-width: 1200px) {
  .app-sidebar.auto-rail:not(.overlay) { width: var(--sidebar-w-rail); }
  .app-sidebar.auto-rail:not(.overlay) .sidebar-label,
  .app-sidebar.auto-rail:not(.overlay) .sidebar-org-cell,
  .app-sidebar.auto-rail:not(.overlay) .sidebar-env-switch-wrap { display: none; }
  .app-sidebar.auto-rail:not(.overlay) .sidebar-group-heading {
    visibility: hidden;
    height: 8px;
    padding: 6px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 6px 8px 0;
  }
  .app-sidebar.auto-rail:not(.overlay) .sidebar-action {
    justify-content: center;
    padding: 9px 0;
  }
  main.with-sidebar:not(.sidebar-overlay) { margin-left: var(--sidebar-w-rail); }
}

@media (max-width: 800px) {
  .sidebar-mobile-toggle { display: inline-flex; }
  .app-sidebar:not(.hidden) { transform: translateX(-100%); }
  .app-sidebar.overlay { transform: translateX(0); }
  main.with-sidebar { margin-left: 0; }
  .sidebar-toggle { display: none; }
}

/* Landing page responsive. Six cards to a row need 1438px (six cards, five gaps and the
   side padding), five need 1204px. Below 1000px the grid is as it was before #310. */
@media (max-width: 1437px) {
  .landing-grid {
    max-width: calc(var(--landing-cols-5) * (220px + 14px) + 48px);
  }
}

@media (max-width: 1203px) {
  .landing-grid {
    max-width: calc(var(--landing-cols-4) * (220px + 14px) + 48px);
  }
}

@media (max-width: 1000px) {
  .landing-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 880px;
  }
}

@media (max-width: 768px) {
  .landing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .landing-hero {
    padding: 36px 20px 32px;
  }

  .landing-welcome {
    font-size: 26px;
  }

}

@media (max-width: 480px) {
  .landing-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  .landing-welcome {
    font-size: 22px;
  }

  .landing-card {
    min-height: auto;
  }
}

/* A short window, a laptop's, tightens the welcome and the cards (#310): two rows then fit
   a 1536x730 window without a scroll. */
@media (max-height: 800px) {
  .landing-hero {
    padding: 28px 20px 24px;
  }

  .landing-grid {
    padding-bottom: 16px;
  }

  .landing-card {
    padding: 16px 16px 14px;
  }

  .landing-footer {
    padding: 12px 20px;
  }
}

/* ─── Impersonation Banner ──────────────────────────────── */

.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: linear-gradient(90deg, #D97706, #B45309);
  color: white;
  font-family: var(--arl-font-accent);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  letter-spacing: 0.3px;
}

.impersonation-banner .impersonation-exit {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  border-radius: var(--arl-radius);
  padding: 2px 12px;
  font-size: 11px;
  font-family: var(--arl-font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}

.impersonation-banner .impersonation-exit:hover {
  background: rgba(255,255,255,0.35);
  border-color: white;
}

body.impersonating #landing-header,
body.impersonating #app-header {
  top: 32px;
}

body.impersonating .user-mgmt-panel {
  top: 88px;
}

body.impersonating main {
  padding-top: 32px;
  /* That 32px sits under the header (pushed down by the banner), so the page already
     starts flush below it: a band pulls up nothing. */
  --band-pull-top: 0px;
}

/* ─── Organization Tree ─────────────────────────────────── */

.org-header {
  margin-bottom: 20px;
}
.org-header h2 {
  font-family: var(--arl-font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--arl-primary-dark);
  font-size: 22px;
  margin-bottom: 4px;
}
.org-subtitle {
  font-size: 13px;
  color: var(--arl-text-muted);
  font-family: var(--arl-font-accent);
}

.org-tree-container {
  max-width: 800px;
}

.org-node {
  margin-bottom: 2px;
}

.org-node-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--arl-radius);
  border: 1px solid transparent;
  transition: all 0.1s;
  cursor: default;
}
.org-node-row:hover {
  background: var(--arl-surface-light);
  border-color: var(--arl-border);
}

.org-node-toggle {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--arl-text-muted);
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.org-node-toggle.expanded { transform: rotate(90deg); }
.org-node-toggle.no-children { visibility: hidden; }

.org-level-badge {
  display: inline-block;
  font-size: 9px;
  font-family: var(--arl-font-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 58px;
  text-align: center;
}
.org-level-network  { background: #DBEAFE; color: #1D4ED8; }
.org-level-company  { background: #DCFCE7; color: #166534; }
.org-level-office   { background: #FEF3C7; color: #92400E; }
.org-level-terminal { background: #EDE9FE; color: #6D28D9; }
.org-level-team     { background: #F3F4F6; color: #6B7280; }

.org-node-name {
  font-family: var(--arl-font-accent);
  font-size: 14px;
  font-weight: 600;
  color: var(--arl-dark);
  flex: 1;
}

.org-node-count {
  font-size: 11px;
  color: var(--arl-text-muted);
  flex-shrink: 0;
}

.org-node-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.1s;
  flex-shrink: 0;
}
.org-node-row:hover .org-node-actions { opacity: 1; }

.org-node-actions button {
  background: none;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
  font-family: var(--arl-font-accent);
  color: var(--arl-text-secondary);
  transition: all 0.1s;
}
.org-node-actions button:hover {
  background: var(--arl-surface);
  color: var(--arl-text);
}
.org-node-actions .org-btn-danger:hover {
  background: var(--arl-error-light);
  color: var(--arl-error);
  border-color: var(--arl-error);
}

.org-children {
  padding-left: 24px;
}
.org-children.collapsed { display: none; }

.org-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 100;
}

/* ─── User Management Popover ───────────────────────────── */

.user-mgmt-trigger {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--arl-radius);
  color: rgba(255,255,255,0.7);
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.user-mgmt-trigger:hover {
  color: white;
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
}

.user-mgmt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 99;
}

.user-mgmt-panel {
  position: fixed;
  top: 56px;
  right: 16px;
  width: 560px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 100;
  font-family: var(--arl-font-body);
}

.user-mgmt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--arl-border);
}
.user-mgmt-header h3 {
  font-family: var(--arl-font-heading);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--arl-dark);
  margin: 0;
}
.user-mgmt-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--arl-text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.user-mgmt-close:hover { color: var(--arl-text); }

.user-mgmt-add {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--arl-border);
  flex-wrap: wrap;
  align-items: center;
}
.user-mgmt-add input,
.user-mgmt-add select {
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-family: var(--arl-font-body);
}
.user-mgmt-add input[type="email"] { flex: 1; min-width: 160px; }
.user-mgmt-add input[type="text"] { width: 120px; }
.user-mgmt-add select { width: 120px; }

#user-mgmt-list {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-mgmt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--arl-radius);
  background: var(--arl-surface-light);
  border: 1px solid transparent;
  transition: background 0.1s;
}
.user-mgmt-row:hover {
  background: var(--arl-surface);
  border-color: var(--arl-border);
}
.user-mgmt-row.user-inactive {
  opacity: 0.5;
}
.user-mgmt-row.user-viewing {
  border-color: var(--arl-warning);
  background: var(--arl-warning-light);
}

.user-mgmt-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.user-mgmt-name {
  font-family: var(--arl-font-accent);
  font-size: 13px;
  font-weight: 600;
  color: var(--arl-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-mgmt-email {
  font-size: 11px;
  color: var(--arl-text-muted);
}
.user-mgmt-login {
  font-size: 10px;
  color: var(--arl-text-muted);
}

.user-mgmt-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.user-mgmt-controls select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-family: var(--arl-font-body);
  background: white;
}

/* The kit's look at its smallest ("One FORGE look" step 3). */
.user-mgmt-btn {
  background: var(--fk-surface);
  border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius-sm);
  padding: 3px 8px;
  font-size: var(--fk-type-xs);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--fk-font-ui);
  transition: background-color 0.1s, border-color 0.1s;
}
.user-mgmt-btn:hover { background: var(--fk-canvas); }
.user-mgmt-btn-danger { color: var(--fk-broken); }
.user-mgmt-btn-danger:hover { background: var(--fk-broken-bg); border-color: var(--fk-broken-line); }

.role-badge {
  display: inline-block;
  font-size: 10px;
  font-family: var(--arl-font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
}
.role-super_admin { background: #EDE9FE; color: #6D28D9; }
.role-admin { background: #DBEAFE; color: #1D4ED8; }
.role-manager { background: #FEF3C7; color: #92400E; }
.role-user { background: #DCFCE7; color: #166534; }
.role-guest { background: #F3F4F6; color: #6B7280; }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot-active { background: var(--arl-success); }
.status-dot-inactive { background: var(--arl-text-muted); }

@media (max-width: 600px) {
  .user-mgmt-panel {
    right: 0;
    width: 100%;
    border-radius: 0;
    top: 48px;
  }
}

/* ─── Org Features Modal & Badges ─────────────────────── */

.org-features-badge {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 3px;
  background: #EFF6FF;
  color: var(--arl-primary);
  margin-left: 6px;
}
.org-features-inherit {
  background: var(--arl-surface-light, #f1f5f9);
  color: var(--arl-text-muted);
}

.features-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.features-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--arl-font-body);
  font-size: 14px;
  color: var(--arl-text);
  cursor: pointer;
}
.features-check-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--arl-primary);
  cursor: pointer;
}
.features-check-item input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: default;
}
.features-inherit-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--arl-font-body);
  font-size: 13px;
  color: var(--arl-text-secondary);
  cursor: pointer;
  padding: 8px 0;
  border-top: 1px solid var(--arl-border);
}
.features-inherit-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--arl-primary);
}

.landing-card-hidden {
  display: none !important;
}

/* ─── Users Page (Full-Page Admin) ─────────────────────── */

.users-header {
  margin-bottom: 20px;
}
.users-header h2 {
  font-family: var(--arl-font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--arl-primary-dark);
  font-size: 22px;
  margin-bottom: 4px;
}
.users-subtitle {
  font-size: 13px;
  color: var(--arl-text-muted);
  font-family: var(--arl-font-accent);
}

.users-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.users-search-input {
  padding: 8px 14px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 14px;
  font-family: var(--arl-font-body);
  width: 320px;
  max-width: 100%;
  background: var(--arl-surface);
  color: var(--arl-text);
}
.users-search-input:focus {
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}

.users-add-form {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: var(--arl-surface-light, #f8fafc);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg, 8px);
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.users-add-form input,
.users-add-form select {
  font-family: var(--arl-font-body);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  color: var(--arl-text);
  background: var(--arl-surface);
}
.users-add-form input[type="email"] { flex: 1; min-width: 200px; }
.users-add-form input[type="text"] { width: 180px; }
.users-add-form select { width: 160px; }

#users-table {
  width: 100%;
}
#users-table th {
  font-family: var(--arl-font-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
#users-table td {
  vertical-align: middle;
}

.users-row-inactive {
  opacity: 0.5;
}
.users-cell-name {
  font-weight: 600;
  color: var(--arl-text);
}
.users-you-badge {
  font-weight: 400;
  font-size: 11px;
  color: var(--arl-text-muted);
}
.users-viewing-badge {
  font-weight: 500;
  font-size: 10px;
  color: var(--arl-warning);
  background: var(--arl-warning-light, #fff3cd);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
}
.users-cell-email {
  font-size: 13px;
  color: var(--arl-text-secondary);
}
#users-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

#users-table th[data-sort]:hover {
  color: var(--arl-text);
}

#users-table th[data-sort]::after {
  content: ' \2195';
  opacity: 0.3;
}

#users-table th[data-sort].sort-asc::after {
  content: ' \25B2';
  opacity: 1;
}

#users-table th[data-sort].sort-desc::after {
  content: ' \25BC';
  opacity: 1;
}

.users-cell-login {
  font-size: 13px;
  color: var(--arl-text-muted);
  white-space: nowrap;
}
.users-role-select,
.users-org-select {
  font-family: var(--arl-font-body);
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  background: var(--arl-surface);
  color: var(--arl-text);
  cursor: pointer;
}
.users-org-select {
  max-width: 180px;
}
.users-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--arl-font-body);
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  background: transparent;
  color: var(--arl-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.users-status-btn:hover {
  background: var(--arl-surface);
}
.users-cell-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
/* #273 — job positions (positions.js). A position is what someone does, not what they
 * can access, so it reads as a quiet label, not as a status or a permission badge. */
.users-cell-positions {
  white-space: nowrap;
}
.pos-chip {
  display: inline-block;
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  margin: 0 4px 2px 0;
  border-radius: 10px;
  background: var(--arl-surface);
  color: var(--arl-primary-dark);
  border: 1px solid var(--arl-border);
}
.pos-none {
  color: var(--arl-text-muted);
  margin-right: 6px;
}
.users-positions-edit {
  padding: 2px 8px;
  font-size: 11px;
}
.pos-manage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.pos-manage-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pos-manage-label,
.pos-new-label {
  flex: 1;
  font-family: var(--arl-font-body);
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
}
.pos-builtin {
  font-size: 11px;
  color: var(--arl-text-muted);
  min-width: 52px;
  text-align: center;
  cursor: help;
}
.pos-manage-add {
  display: flex;
  gap: 6px;
}
.pos-modal-error {
  margin-top: 10px;
  color: var(--arl-error);
  font-size: 13px;
}
.users-action-btn {
  font-family: var(--arl-font-body);
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  background: transparent;
  color: var(--arl-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.users-action-btn:hover {
  background: var(--arl-surface);
}
.users-action-btn-danger {
  color: var(--arl-error);
  font-size: 16px;
  font-weight: 700;
  padding: 2px 8px;
}
.users-action-btn-danger:hover {
  background: var(--arl-error-light, #fde8e8);
  border-color: var(--arl-error);
}
/* A control /users locks — your own row, or someone ranked above you — has to LOOK
   locked. Without this it kept its colours and its hover, and read as a button that does
   nothing. Why it is locked is in its title. */
.users-role-select:disabled,
.users-org-select:disabled,
.users-status-btn:disabled,
.users-action-btn:disabled,
.user-mgmt-controls select:disabled,
.user-mgmt-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.users-status-btn:disabled:hover,
.users-action-btn:disabled:hover,
.user-mgmt-btn:disabled:hover {
  background: transparent;
  border-color: var(--arl-border);
}

/* ─── Profile Page ──────────────────────────────────────── */

.profile-page-header {
  margin-bottom: 24px;
}
.profile-page-header h2 {
  font-family: var(--arl-font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--arl-primary-dark);
  font-size: 22px;
}

.profile-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
}

.profile-info-grid {
  display: grid;
  gap: 18px;
}
.profile-field label {
  display: block;
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arl-text-muted);
  margin-bottom: 4px;
}
.profile-field span {
  font-size: 15px;
  color: var(--arl-text);
  font-weight: 500;
}

.profile-perm-count {
  font-size: 13px;
  color: var(--arl-text-muted);
  margin-bottom: 12px;
}

.profile-permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.permission-badge {
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #EFF6FF;
  color: var(--arl-primary);
}
.permission-resource {
  opacity: 0.7;
}

.profile-notify-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--arl-text);
  cursor: pointer;
}
.profile-notify-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--arl-primary);
}
.profile-notify-toggle.is-saving {
  opacity: 0.6;
  pointer-events: none;
}
.profile-notify-hint {
  font-size: 13px;
  color: var(--arl-text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* My Profile → Banner stats (the header's hk-bar). One small panel per stat: the number
 * (and remove) on top, its period and whose number under it — in a half-width card, three
 * selects side by side cut "This quarter" and "As OC (no goal this month)" short. */
.profile-hk-intro {
  font-size: 13px;
  color: var(--arl-text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.profile-hk-rows {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.profile-hk-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 28px; /* "As OC (no goal this month)" is the longest */
  grid-template-areas: "kpi kpi remove" "period role .";
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  background: var(--arl-surface-light);
}
.profile-hk-row select[data-field="kpi"] { grid-area: kpi; font-weight: 600; }
.profile-hk-row select[data-field="period"] { grid-area: period; }
.profile-hk-row select[data-field="role"] { grid-area: role; }
.profile-hk-row .profile-hk-remove { grid-area: remove; }
.profile-hk-row select {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--arl-text);
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
}
.profile-hk-row select:focus {
  outline: none;
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0, 96, 175, 0.15);
}
.profile-hk-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  background: var(--arl-white);
  color: var(--arl-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.profile-hk-remove:hover:not(:disabled) {
  color: var(--arl-error);
  border-color: var(--arl-error);
}
.profile-hk-row select:disabled,
.profile-hk-remove:disabled,
.profile-hk-actions .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.profile-hk-empty {
  font-size: 13px;
  color: var(--arl-text-muted);
}
.profile-hk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-hk-card.is-saving .profile-hk-rows,
.profile-hk-card.is-saving .profile-hk-actions {
  opacity: 0.6;
  pointer-events: none;
}

.user-name-link {
  cursor: pointer;
}
.user-name-link:hover {
  text-decoration: underline;
}

/* Users/Profile responsive */
@media (max-width: 768px) {
  .profile-page-grid {
    grid-template-columns: 1fr;
  }
  .users-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .users-search-input {
    width: 100%;
  }
  .users-add-form {
    flex-direction: column;
  }
  .users-add-form input,
  .users-add-form select {
    width: 100% !important;
    min-width: 0 !important;
  }
  #users-table {
    font-size: 13px;
  }
  .users-cell-actions {
    flex-direction: column;
  }
}

/* ─── Moving backdrops (forge-backdrop.js) ─────────────────── */

/* The host. Its gradient is the backdrop whenever the canvas cannot run. */
.forge-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 90% at 70% 40%, #04294A 0%, var(--arl-dark-alt) 45%, var(--arl-dark) 100%);
}

.forge-backdrop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* arlnetwork.com lays black → ARL blue over its hero video; the same idea, lighter. */
.forge-backdrop-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 10, 25, 0.62) 0%, rgba(1, 10, 25, 0.22) 55%, rgba(0, 96, 175, 0.16) 100%);
}

/* ─── Module header band ──────────────────────────────────────
   A page's title row on a dark band, carrying the sign-in page's light streaks at a
   calm half pace: forge-backdrop.js adds them to every .module-band. The sign-in look on
   the pages people work in all day, moving only in the band, never behind the work.
   It bleeds to main's edges by --band-pull-*, which main declares beside its padding. */
/* ⚠ No overflow:hidden and no stacking context (isolation, z-index) on the band or its
   children: Quote Tracker's "Hide reps & inboxes" menu opens out of this header at
   z-index 60 and must stay above the table below it. The backdrop clips itself, and the
   header's own content paints over it by document order alone (both are positioned,
   and the backdrop comes first). */
main .module-band {
  position: relative;
  margin: calc(-1 * var(--band-pull-top, 16px)) calc(-1 * var(--band-pull-x, 24px)) 16px;
  padding: 18px var(--band-pull-x, 24px);
  background: var(--arl-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  flex-wrap: wrap;
  gap: 10px 16px;
}
main .module-band > :not(.forge-backdrop) { position: relative; }
/* On a phone a header's control row wraps inside the band instead of hanging off its
   edge (Customers' and Quote Tracker's did, before the band; it shows on dark). */
main .module-band > div { flex-wrap: wrap; }
main .module-band .forge-backdrop-tint {
  /* darker on the left, where the title is */
  background: linear-gradient(90deg, rgba(1, 10, 25, 0.78) 0%, rgba(1, 10, 25, 0.35) 45%, rgba(0, 96, 175, 0.18) 100%);
}
main .module-band h2 {
  margin: 0;
  font-family: var(--arl-font-heading);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--arl-white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
/* The module's name, small, above the title: <h2 data-kicker="Load Builder">. In the kit's
   UI font, so it matches a detail page's "← Back" link (.fk-band-back), which sits in the
   same place. */
main .module-band h2[data-kicker]::before {
  content: attr(data-kicker);
  display: block;
  margin-bottom: 4px;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: none;
}
/* Words that were grey on white read light grey on the band. */
main .module-band .qt-queue-count,
main .module-band .users-subtitle,
main .module-band .org-subtitle { color: rgba(255, 255, 255, 0.65); }
/* The Review Queue's status tabs are the kit's tabs on dark, along the band's bottom edge
   like every page's tabs (.fk-page-tabs), "Mine" at the row's right end. */
main .module-band.queue-header { padding-bottom: 0; }
main .module-band .queue-filters { flex: 1 0 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
main .module-band .filter-btn { color: rgba(255, 255, 255, 0.62); }
main .module-band .filter-btn:hover { color: var(--fk-white); }
main .module-band .filter-btn.active { color: var(--fk-white); border-bottom-color: var(--fk-blue-400); }
/* TAI errors' period switch, as glass on the band. */
main .module-band .tea-range-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
main .module-band .tea-range-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--arl-white);
}
main .module-band .tea-range-btn.active {
  background: var(--arl-primary);
  border-color: var(--arl-primary-light);
  color: var(--arl-white);
  box-shadow: 0 6px 18px rgba(0, 96, 175, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* The shipment page's buttons sit on its band: one line each, the row wrapping instead. */
main .module-band .detail-actions .btn { white-space: nowrap; }
/* The small outlined link pills (Open in Front, TAI #) turn white on the band. */
main .module-band .front-link { color: var(--fk-white); border-color: rgba(255, 255, 255, 0.4); }
main .module-band .front-link:hover { background: rgba(255, 255, 255, 0.12); color: var(--fk-white); }
/* A small icon button on the band (the quote title's pencil): white, and not in the
   title's Oswald capitals. */
main .module-band .btn-icon {
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.3);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
  letter-spacing: 0;
  text-shadow: none;
  vertical-align: middle;
}
main .module-band .btn-icon:hover { color: var(--fk-white); border-color: var(--fk-white); }
/* Secondary and outline buttons are white with a grey edge, too bright on the band: they
   take the kit's on-dark glass instead (forge-kit.css, :is(.module-band, .fk-on-dark)). */
main .module-band .btn-outline,
main .module-band .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--arl-white);
  box-shadow: none;
}
main .module-band .btn-outline:hover:not(:disabled),
main .module-band .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
/* The outlined danger button (a quote's "Mark Lost"), in the kit's on-dark red. */
main .module-band .btn-danger { background: rgba(225, 26, 34, 0.14); color: var(--fk-red-100); border-color: rgba(225, 26, 34, 0.5); }
main .module-band .btn-danger:hover:not(:disabled) { background: rgba(225, 26, 34, 0.24); }
/* A link dressed as a button (Project Management's "All projects") keeps the browser's
   link underline unless told otherwise; on the band it reads as a mistake. */
main .module-band a.btn { text-decoration: none; }

/* Carrier Procurement on the band (Keith, 2026-10-23: "Fabio is going to be out for a while
   on vacation. Lets push the changes to his pages as well").
   - Why each rule carries an id: carrier-procurement.css gives each CP title its Coverage
     look (near-black on white) with selectors that carry one, and it loads after this file.
     Each rule here carries an id too (the :is() list of CP pages), plus `main`, to outweigh
     those wherever the stylesheets load.
   - The detail pages' bands (.cp-detail-band) take the page's own title block up from its
     content (forge-page.js, data-fk-head-from). */
main :is(#cp-coverage-view, #cp-carriers-view, #cp-vet-view, #cp-sourcing-view, #cp-tracking-view, #cp-project-detail-view, #cp-os-view, #cp-bdr-projects-view, #cp-bdr-project-detail-view) .cp-page-header.module-band h2,
main :is(#cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .cp-detail-band h2.cp-detail-title {
  margin: 0;
  font-family: var(--arl-font-heading);
  font-size: var(--fk-type-3xl);
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fk-white);
  /* A project's or a carrier's name can be long: it wraps rather than running off. */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The line under the title: a count, a description, the project's code and customer,
   Tracking's figures (their numbers in white below). */
main :is(#cp-coverage-view, #cp-carriers-view, #cp-vet-view, #cp-sourcing-view, #cp-tracking-view, #cp-project-detail-view, #cp-os-view, #cp-bdr-projects-view, #cp-bdr-project-detail-view) .cp-page-header.module-band :is(.cp-count, .cp-sub, .cp-sp-desc, .cp-trk-figs),
main :is(#cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .cp-detail-band .cp-detail-meta {
  display: block;
  margin: 4px 0 0;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.68);
}
main :is(#cp-project-detail-view, #cp-bdr-project-detail-view) .cp-page-header.module-band .cp-muted { color: rgba(255, 255, 255, 0.5); }
main #cp-tracking-view .cp-page-header.module-band .cp-pm-n { color: var(--fk-white); }
/* The detail page's title block sits on the band with no gap of its own under it. */
main :is(#cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .cp-detail-band .cp-detail-head { margin: 0; }
/* Its links and the Vet chip are ARL blue, unreadable on the band: white instead, and a
   link in the title is underlined the way Quote Tracker's is (.qt-detail-band-link). */
main :is(#cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .cp-detail-band :is(.cp-link, .qm-ext) { color: var(--fk-white); }
main :is(#cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .cp-detail-band h2 .cp-link { border-bottom: 1px dashed rgba(255, 255, 255, 0.45); }
main :is(#cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .cp-detail-band .qm-vet-chip { color: var(--fk-white); border-color: rgba(255, 255, 255, 0.4); }
main :is(#cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .cp-detail-band .qm-vet-chip:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--fk-white); }
/* Coverage's Refresh, and every outlined button's hover, as glass on the band. */
main #cp-coverage-view .cp-page-header.module-band .cp-sp-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--fk-white);
}
main #cp-coverage-view .cp-page-header.module-band .cp-sp-btn:hover { background: rgba(255, 255, 255, 0.12); }
main :is(#cp-coverage-view, #cp-carriers-view, #cp-vet-view, #cp-sourcing-view, #cp-tracking-view, #cp-project-detail-view, #cp-os-view, #cp-bdr-projects-view, #cp-bdr-project-detail-view, #cp-carrier-detail-view, #cp-load-detail-view, #cp-offer-detail-view) .module-band .btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--fk-white);
}

/* ─── Pages on a phone ────────────────────────────────────────
 * At 375px six pages were still wider than the screen because of their own content, with
 * the header fitting: Quote Tracker 1607px, Customers 1156, Users 932, Quote Tracker's
 * Customers 690, Activity 563, and Coverage 510 (2026-10-27, no rows). At the phone
 * breakpoint (800px: sidebar.js MQ_OVERLAY, as for the header) they fit without hiding
 * anything:
 *   - each wide table scrolls sideways in its own box (.fk-table-scroll, forge-kit.css),
 *     so the band and the filters above it stay put;
 *   - Activity's number tiles wrap onto more rows;
 *   - Coverage's search box gives up width so it and Filters fit;
 *   - a long page title wraps;
 *   - the menus that open from these pages stay on the screen.
 * Nothing here applies above 800px: desktop is unchanged. Pinned by pages-phone.client.test.js. */
@media (max-width: 800px) {
  /* A page title on the band keeps to one line on a desktop. On a phone a long one
     ("Unattributed Customers", 339px) ran past the screen below 375px, so there it wraps. */
  main .module-band h2 { white-space: normal; }

  /* Quote Tracker's header rows pin to the page (#123), offset by --app-content-top. In the
     phone's scroller there is no page to pin to, and that offset would push them down over
     the first quotes, so there they stay put. */
  .fk-table-scroll .qt-table thead th { position: static; }
  /* A person picker opened in a row (Quote Tracker's BDR cells, Customers' OC) drops its
     list, up to 260px, below the row. The scroller clips what runs past its bottom, which
     cut off the list in a short table, so while one is open the box makes room under it. */
  .fk-table-scroll:has(.up-results:not([hidden])) { padding-bottom: 264px; }

  /* Quote Tracker's "Hide reps & inboxes" menu (320px) opens leftward from its button's
     right edge, the band's right end on a desktop. Below about 560px the band wraps that
     button to the left, and the menu opened 163px off the screen. On a phone it hangs
     from the end of the button row instead, which runs to the band's right edge. */
  #qt-queue-view .qt-queue-header > div:has(> .qt-hide-inboxes) { flex: 1 1 auto; justify-content: flex-end; }
  #qt-queue-view .qt-hide-inboxes { position: static; }
  #qt-queue-view .qt-hide-inboxes-menu { max-width: calc(100vw - 48px); }
  /* The bar that appears once quotes are ticked wraps, and its menus open below the whole
     bar from its left edge: hung from their own buttons, the last ran off the right. */
  #qt-queue-view .qt-bulk-bar { flex-wrap: wrap; position: relative; }
  #qt-queue-view .qt-bulk-bar .qt-status-dropdown { position: static; }
  #qt-queue-view .qt-bulk-bar .qt-dropdown-menu { max-width: calc(100vw - 48px); }

  /* Activity: the tiles two to a row, and the table keeps readable columns, scrolling
     sideways in its own box (.fk-table-scroll) rather than crushing them. */
  .activity-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-table { min-width: 640px; }

  /* Coverage's toolbar became the kit's filter bar on 2026-11-05: it wraps by itself, and its
     menus stay on the screen (forge-kit.css, carrier-procurement.css "The filter bar"). */

  /* "Viewing as …" stays on one line. A long name wrapped the banner to 54px, over the top
     22px of the header, which sits 32px down while impersonating. */
  #impersonation-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ─── SSO Login Page ────────────────────────────────────────── */

/* A column: the logo block centres itself with auto margins and the footer follows it.
   justify-content:center would push the top of a too-tall block above the window, out
   of reach; auto margins centre it when it fits and let the page scroll when it does
   not (a phone turned sideways, a squashed window). */
.sso-login-page {
  position: fixed;
  inset: 0;
  background: var(--arl-dark);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Pinned to the window, so it stays put if the page scrolls. */
.sso-login-page > .forge-backdrop {
  position: fixed;
}

/* The red swoosh from arlnetwork.com's hero, bottom right. */
.sso-login-swoosh {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(62vw, 1000px);
  height: auto;
}

.sso-login-container {
  position: relative;
  z-index: 1; /* its own stacking context, so the ::before pool paints above the backdrop */
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 40px 16px;
  text-align: center;
}

/* A dark pool behind the logo and button so the streaks never compete with them. */
.sso-login-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(980px, 100vw);
  height: min(760px, 100vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(1, 10, 25, 0.72), rgba(1, 10, 25, 0));
  z-index: -1;
}

.sso-login-kicker {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 -14px;
}

.sso-login-logo {
  width: min(560px, 86vw, 68vh); /* 68vh keeps logo + button on a short laptop screen */
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
}

.sso-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 340px;
  max-width: 86vw;
  padding: 15px 24px;
  background: var(--arl-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-family: var(--arl-font-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 96, 175, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.sso-login-btn:hover {
  background: var(--arl-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 96, 175, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* In the flow, bottom left, below the logo block. Pinned with position:absolute it sat on
   the sign-in button whenever the window was too short for both. */
.sso-login-foot {
  position: relative;
  align-self: flex-start;
  margin: 0 0 20px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Short windows: tighten the block so it fits where it can, and scrolls where it cannot. */
@media (max-height: 600px) {
  .sso-login-container {
    gap: 16px;
    padding: 20px 16px;
  }
  .sso-login-kicker {
    margin-bottom: -6px;
  }
  .sso-login-logo {
    width: min(560px, 86vw, 50vh);
  }
}

/* ── Dashboard date-range control (#155, #160) ─────────────────────────────────
   Pills sit left of the month arrows because the range is the coarser choice: you
   pick "last week" and then stop, or you pick a month and step through it. */
.dash-rangenav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  margin-right: 10px;
}

.dash-range-pill {
  background: transparent;
  border: 1px solid var(--arl-border, rgba(255, 255, 255, .25));
  color: inherit;
  font-family: var(--arl-font-accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.dash-range-pill:hover { border-color: var(--arl-primary); }

.dash-range-pill.is-active {
  background: var(--arl-primary);
  border-color: var(--arl-primary);
  color: #fff;
}

/* The custom-range popover. Anchored to the nav, not the page, so it travels with
   the control on both boards. */
.dash-range-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  padding: 12px;
  border-radius: var(--arl-radius, 6px);
  background: var(--arl-surface-dark-2, #12293d);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  text-align: left;
}

.dash-range-pop label { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.dash-range-pop input[type="date"] {
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: var(--arl-surface-dark, #0b1b2b);
  color: inherit;
  font-family: var(--arl-font-body);
}
.dash-range-pop-actions { display: flex; gap: 6px; justify-content: flex-end; }
.dash-range-pop-err { color: var(--arl-danger, #ff8a80); min-height: 14px; }

/* A pro-rated goal is a number NOBODY ENTERED — it has to look like a caveat, not
   like part of the figure. */
.dash-prorated-note {
  color: var(--arl-warning, #B25E00);
  background: var(--arl-warning-light, #FFF4E5);
  border-radius: 3px;
  padding: 6px 10px;
}

/* Said on the two surfaces the window deliberately does not filter. */
.dash-month-only-note {
  font-size: 11px;
  color: var(--arl-text-muted, #8fa6b8);
  font-family: var(--arl-font-accent);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-left: 8px;
}

/* ── TAI Errors (tai-errors.js) ───────────────────────────────────────────────
   A failure HISTORY, as opposed to the Review Queue's "TAI Failed" work queue.
   `.tea-stale` is the load-bearing style here, not decoration: ranking causes by
   count alone floats a bug that stopped in April above one that happened today,
   so a cause nobody has hit in 30 days is visibly dimmed and labelled.
   The title, its line and the period switch sit in the page's header band. */
.tea-range { display: flex; gap: 6px; flex-shrink: 0; }
.tea-range-btn {
  padding: 6px 12px; border: 1px solid var(--arl-border); background: var(--arl-white);
  color: var(--arl-text-secondary); border-radius: 6px; cursor: pointer; font-size: 13px;
}
.tea-range-btn:hover { border-color: var(--arl-primary-light); color: var(--arl-primary); }
.tea-range-btn.active {
  background: var(--arl-primary); border-color: var(--arl-primary); color: var(--arl-white);
}

.tea-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.tea-stat { display: flex; flex-direction: column; }
.tea-stat-n { font-size: 26px; font-weight: 600; color: var(--arl-text); line-height: 1.1; }
.tea-stat-l { font-size: 12px; color: var(--arl-text-muted); text-transform: uppercase; letter-spacing: .04em; }

.tea-truncated {
  padding: 8px 12px; margin-bottom: 12px; border-radius: 6px; font-size: 13px;
  background: #FFF7E6; border: 1px solid #FFD591; color: #874D00;
}

/* The table scrolls inside its own box so a long cause never pushes the page sideways. */
.tea-table-wrap { overflow-x: auto; }
.tea-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tea-table th {
  text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--arl-border);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--arl-text-muted);
  white-space: nowrap;
}
.tea-table td { padding: 10px 12px; border-bottom: 1px solid var(--arl-border); vertical-align: top; }
.tea-count { font-weight: 600; font-size: 16px; white-space: nowrap; }
.tea-cause { min-width: 280px; }
.tea-label { color: var(--arl-text); }
.tea-fix { font-size: 12.5px; color: var(--arl-text-secondary); margin-top: 3px; }
.tea-when { white-space: nowrap; }
.tea-note { font-size: 11.5px; color: var(--arl-text-muted); font-style: italic; }
.tea-people { text-align: right; }

.tea-src {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
}
/* FORGE's own bugs read differently from TAI's rejections: one needs a code fix,
   the other needs the data corrected. Same table, different owner. */
.tea-src-tai { background: #E6F0FA; color: var(--arl-primary-dark); }
.tea-src-forge { background: #FDE8E8; color: var(--arl-accent-dark); }

.tea-stale { opacity: .55; }
.tea-stale .tea-count { font-weight: 500; }

/* ── Retroactive re-stamp control (profile editor → Assignment) ──────────────
 *
 * ⚠ `.field-row { display: flex }` is an AUTHOR rule, and author styles beat the
 * UA stylesheet's `[hidden] { display: none }` however specific that is. So a
 * .field-row carrying the hidden attribute renders ANYWAY — and this row's whole
 * safety design is "hidden until the BDR actually changes". Without this line it
 * shows on every customer, offering to move a year of freight.
 * (carrier-procurement.css:1119 hit the same wall and fixed it locally; this one
 * sits on the shared class so the next .field-row wanting `hidden` gets it free.
 * No other .field-row uses the attribute today, so nothing else changes.)
 */
.field-row[hidden] { display: none; }

/*
 * This row's label is a SENTENCE, not a field name, so it cannot sit in the
 * clamp(52px, 5vw, 75px) label column every other row uses — in a side zone it
 * wraps to six lines. Stacked instead, label at its natural width.
 */
#pf-restamp-row { gap: 3px; margin: 6px 0 4px; }
/*
 * ⚠ white-space MATTERS AS MUCH AS width. `.pf-zone-operations .field-row label`
 * sets `white-space: nowrap` as well as `width: 80px`; this id selector beats it on
 * width but says nothing about wrapping, so the label stayed ONE unbreakable line at
 * its natural 308px inside a zone that is 20% of the form grid (~263px) with
 * `overflow: hidden`. It rendered as "Also move existing loads to the new B" —
 * clipped, no ellipsis, no tooltip — at 1440px, 1600px and 1920px, i.e. every width
 * this form is actually used at. The clipped words were "BDR, from": exactly the
 * disambiguation the label exists to carry.
 *
 * My own browser probe missed this because it forced a 320px zone instead of taking
 * the real 20% column, and dropped the ancestors that do the clipping.
 */
#pf-restamp-row label { width: auto; white-space: normal; }
/* `.field-row input { flex: 1 }` grows on the CROSS axis once the row is a
 * column, stretching the date field to the height of the whole block. */
#pf-restamp-row input { flex: 0 0 auto; }
.pf-restamp-hint {
  /* Not .field-config-desc: that is 13px, LARGER than the labels (10-12px) and
   * inputs (11-13px) it sits under here, because its other users are full-width
   * zones. A hint louder than the field it explains reads as an error. */
  font-size: 11px;
  line-height: 1.35;
  color: var(--arl-text-muted);
}

/* ── #233 Unreadable attachments ─────────────────────────────────────────────
 * FORGE reads PDFs and spreadsheets. Anything else was dropped in silence until
 * this, so a Word tender in the attachments list looked identical to a PDF that
 * had actually been read.
 *
 * Tokens carry NO fallback on purpose: --arl-warning and --arl-warning-light are
 * both defined, and `var(--x, y)` never reaches y when --x exists, so a fallback
 * here would be dead code that reads like a safety net. The neighbouring
 * .queue-card-buywarn rule has exactly that dead fallback; do not copy it.
 */
.queue-card-unreadwarn {
  background: var(--arl-warning-light);
  color: var(--arl-warning);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  white-space: nowrap;
  cursor: help;
}
/* #275. The parser's own score under 50%: a load it partly guessed. The error tokens,
 * not the warning ones, because this chip sits beside the amber "unread" chips and a
 * guessed load is the more serious of the two. No fallback — both tokens are defined
 * (see the note above). */
.queue-card-lowconf {
  background: var(--arl-error-light);
  color: var(--arl-error);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  white-space: nowrap;
  cursor: help;
}
/* #278. A shipment type other than Truckload. Amber, like the "unread" chips: it asks for
 * a check, it does not say the load is wrong. No fallback on the tokens (see above). */
.queue-card-typewarn {
  background: var(--arl-warning-light);
  color: var(--arl-warning);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  white-space: nowrap;
  cursor: help;
}
/* The detail page's copy, on its own row under the Shpmt Type select (the empty label keeps
 * it aligned with the select). It wraps, because the Equipment column is narrow. */
.field-warn-chip {
  background: var(--arl-warning-light);
  color: var(--arl-warning);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: help;
}
/* #275. The parse's own warnings get a line of their own UNDER the customer name, and
 * only on a card that has one. Measured on the 4875 card: inside .queue-card-customer
 * (which clips at the header's 280px) a name plus both chips lost the second one; beside
 * the status they squeezed the details leftwards over the name at a 1100px card. Here
 * the header keeps its width, so the details column stays aligned across the list. */
.queue-card-header-flagged {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.queue-card-header-flagged .queue-card-customer {
  max-width: 100%;
}
.queue-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
}
.queue-card-flags > span {
  margin-left: 0;
}
/* The chip stays a link and keeps its layout — only its colour changes, so the
 * Attachments panel still reads as one list rather than two groups. */
.attachment-chip-unread {
  border-color: var(--arl-warning);
  background: var(--arl-warning-light);
  color: var(--arl-warning);
}

/* ── #223 No-salesperson review view ────────────────────────────────────────
 * Tokens carry no fallback: both are defined, and var(--x, y) never reaches y
 * when --x exists, so a fallback here would be dead code dressed as a net.
 */
.dash-dd-unattr-agent {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--arl-surface-light);
  color: var(--arl-text-secondary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pf-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}
.pf-checkbox-inline input { width: auto; margin: 0; }

/* ── "FORGE has been updated" (#350, update-notice.js) ───────────────────────────
 * Bottom right, just left of the round Feedback button (feedback.css: 48px, 20px from
 * the corner, z-index 9500), and above it on a phone. Under the Feedback modal (10000).
 */
.forge-update-notice {
  position: fixed;
  right: 80px;
  bottom: 20px;
  z-index: 9400;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100vw - 100px));
  padding: 12px 14px;
  border-radius: var(--fk-radius-md);
  background: var(--fk-surface);
  color: var(--fk-ink-2);
  box-shadow: var(--fk-shadow-lg), inset 0 0 0 1px var(--fk-line);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
  line-height: 1.45;
}
.forge-update-text { margin: 0; }
.forge-update-text strong { color: var(--fk-ink); }
.forge-update-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 800px) {
  .forge-update-notice { left: 16px; right: 16px; bottom: 80px; max-width: none; flex-wrap: wrap; }
}