/* ============================================================
   HAULEX LOGISTICS — Filament Theme
   Design tokens sourced from: Haulex Platform.dc.html
   Primary: #1E4D8C | Top bar: #102a4c | Page bg: #eef1f6
   ============================================================ */

/* ── Global font & base ──────────────────────────────────── */
:root {
    color-scheme: light !important;
    --sidebar-width: 236px;
    --hx-input-h: 28px;
}
*, *::before, *::after { box-sizing: border-box; }

html, body,
.fi-body,
[data-flux-root] {
    font-family: 'Public Sans', system-ui, -apple-system, sans-serif !important;
    color: #16202e !important;
    -webkit-font-smoothing: antialiased;
    background-color: #eaeef3 !important;
}

/* ── Page / content background ───────────────────────────── */
.fi-main-ctn,
.fi-simple-main,
.fi-main {
    background-color: #eef1f6 !important;
}
.fi-page,
.fi-page-content {
    background-color: #eef1f6 !important;
}

/* ── TOP BAR ─────────────────────────────────────────────── */
/* Outer wrapper */
.fi-topbar {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
/* Inner nav — the actual bar */
.fi-topbar-nav {
    background: #102a4c !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
}

/* Topbar icons (hamburger, search icon, user avatar etc) on dark bg */
.fi-topbar-nav svg,
.fi-topbar-nav .fi-icon-btn svg {
    color: rgba(255,255,255,0.75) !important;
}
.fi-topbar-nav .fi-icon-btn:hover svg {
    color: #fff !important;
}
/* Global search — target the wrapper div (fi-input-wrp has bg-white from Tailwind) */
.fi-topbar-nav .fi-input-wrp {
    background: rgba(255,255,255,0.12) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.18) !important;
    border-radius: 8px !important;
}
.fi-topbar-nav .fi-input-wrp input[type="search"],
.fi-topbar-nav .fi-input-wrp input[type="text"] {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
.fi-topbar-nav .fi-input-wrp input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}
/* Search icon inside wrapper */
.fi-topbar-nav .fi-input-wrp-icon,
.fi-topbar-nav .fi-input-wrp svg {
    color: rgba(255,255,255,0.60) !important;
}
/* Search results dropdown — match width of the search field (same sm:relative parent) */
.fi-global-search-results-ctn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
}
/* User avatar — keep avatar img styling, remove button background */
.fi-topbar-nav [x-persist] button,
.fi-topbar-nav .fi-user-menu button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Breadcrumbs on dark topbar */
.fi-topbar-nav .fi-breadcrumbs,
.fi-topbar-nav .fi-breadcrumbs li,
.fi-topbar-nav .fi-breadcrumbs a {
    color: rgba(255,255,255,0.65) !important;
}
.fi-topbar-nav .fi-breadcrumbs a:hover {
    color: #fff !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
/* No position override here — Filament's own `.fi-sidebar` already ships
   `fixed` (mobile drawer) + `lg:sticky` (desktop, via Alpine-bound
   classes in the sidebar's own blade view) so it stays pinned to the
   viewport while only its inner nav scrolls. An earlier `position:
   relative !important` here (to anchor the ::after border below) was
   overriding both, making the whole sidebar scroll away with the page.
   `sticky`/`fixed` establish a containing block for an absolutely
   positioned child exactly like `relative` does, so ::after below still
   anchors correctly without it. */
.fi-sidebar {
    background-color: #fff !important;
    border-right: none !important;
    width: var(--sidebar-width) !important;
    box-shadow: none !important;
}
.fi-sidebar::after {
    content: '';
    position: absolute;
    top: 64px; /* h-16 = 4rem = 64px — start below the header */
    right: 0;
    bottom: 0;
    width: 1px;
    background: #e3e8f0;
    pointer-events: none;
    z-index: 1;
}

/* Sidebar header — matches topbar color so they look like one bar */
.fi-sidebar-header {
    background-color: #102a4c !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* ── SIDEBAR NAVIGATION ──────────────────────────────────── */

/* Group label: "OPERATIONS" / "ADMINISTRATION" */
.fi-sidebar-group-label,
.fi-sidebar-group > .fi-sidebar-group-label {
    color: #90a0b5 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    padding: 4px 10px 6px !important;
}

/* ── DOT NAVIGATION (replaces heroicons) ─────────────────── */

/* Hide the 24×24 heroicon inside nav items */
.fi-sidebar-item-icon {
    display: none !important;
}

/* Nav item button — left-aligned, with dot pseudo-element */
.fi-sidebar-item-button {
    font-family: 'Public Sans', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    border-radius: 9px !important;
    padding: 7px 10px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    transition: background-color 0.1s, color 0.1s !important;
    background-color: transparent !important;
}

/* Inactive dot */
.fi-sidebar-item-button::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    background: #c8d5e3;
    flex-shrink: 0;
    align-self: center;
}

/* Hover state */
.fi-sidebar-item-button:hover {
    background-color: #f0f5fb !important;
    color: #1E4D8C !important;
}
.fi-sidebar-item-button:hover::before {
    background: #7aadde !important;
}

/* Active nav item */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: #e6f0fb !important;
    color: #1E4D8C !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
/* Active dot — larger, navy */
.fi-sidebar-item.fi-active .fi-sidebar-item-button::before {
    background: #1E4D8C !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
}

/* Override Filament's Tailwind 'bg-gray-100' active class */
.fi-sidebar-item-button.bg-gray-100 {
    background-color: #e6f0fb !important;
}

/* Nav item text label */
.fi-sidebar-item-label {
    font-size: 13.5px !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Hide all remaining SVGs inside sidebar item buttons (already hidden via fi-sidebar-item-icon) */
.fi-sidebar-item-button svg {
    display: none !important;
}

/* Topbar — keep clip so it doesn't overflow */
.fi-topbar {
    overflow-x: clip !important;
}

/* Navigation badge (e.g. pending loads count) */
.fi-sidebar-item-badge {
    background: #1E4D8C !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 10px !important;
}

/* Gap between nav groups */
.fi-sidebar-nav-groups {
    gap: 20px !important;
}
.fi-sidebar-group {
    gap: 2px !important;
}

/* ── MAIN CONTENT AREA ───────────────────────────────────── */
.fi-page {
    padding: 0 !important;
}
/* The inner <section> inside fi-page has py-8 gap-y-8 from Tailwind */
.fi-page > section {
    padding-top: 10px !important;
    padding-bottom: 40px !important;
    row-gap: 12px !important;
}
.fi-page-header {
    margin-bottom: 0 !important;
}
/* Breadcrumbs disabled via ->breadcrumbs(false) in AdminPanelProvider */
.fi-header-heading {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    color: #16202e !important;
}
.fi-header-subheading {
    font-size: 13.5px !important;
    color: #7a8699 !important;
    margin-top: 3px !important;
}

/* ── STAT / OVERVIEW CARDS ───────────────────────────────── */
/* Outer wrapper — transparent so gray page bg shows */
.fi-wi-stats-overview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Each individual stat card */
.fi-wi-stats-overview-stat {
    background: #fff !important;
    border: 1px solid #e3e8f0 !important;
    border-left: 1px solid #e3e8f0 !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    box-shadow: 0 1px 4px rgba(16,42,76,0.06) !important;
}
.fi-wi-stats-overview-stat-label {
    font-size: 12.5px !important;
    color: #8a98ab !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}
.fi-wi-stats-overview-stat-value {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: #16202e !important;
    line-height: 1 !important;
}
.fi-wi-stats-overview-stat-description {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
}
/* Description color per card position — matches prototype exactly */
.fi-wi-stats-overview-stat:nth-child(1) .fi-wi-stats-overview-stat-description { color: #1E4D8C !important; }
.fi-wi-stats-overview-stat:nth-child(2) .fi-wi-stats-overview-stat-description { color: #8a5a00 !important; }
.fi-wi-stats-overview-stat:nth-child(3) .fi-wi-stats-overview-stat-description { color: #3a32a0 !important; }
.fi-wi-stats-overview-stat:nth-child(4) .fi-wi-stats-overview-stat-description { color: #2e6b12 !important; }
/* Hide description icons and sparkline charts — not in design */
.fi-wi-stats-overview-stat-description-icon { display: none !important; }
.fi-wi-stats-overview-stat-chart,
.fi-wi-stats-overview-stat canvas { display: none !important; }

/* ── WIDGET GRID CONTAINER — must be transparent ─────────── */
/* fi-wi is the outer grid wrapper for ALL widgets on a page.  */
/* It is NOT a card — making it white would create one big box. */
.fi-wi {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── INDIVIDUAL CONTENT CARDS / SECTIONS ────────────────────  */
/* fi-section is used inside individual widgets as the card wrapper */
.fi-section,
.fi-wi-custom {
    background: #fff !important;
    border: 1px solid #e3e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(16,42,76,0.06) !important;
}
/* Hide section header chrome in dashboard widgets only (we use hx-card-label) */
.fi-wi-widget .fi-section-header {
    display: none !important;
}
/* Widget sections get fixed 20px padding; form sections use Filament defaults */
.fi-wi-widget .fi-section-content,
.fi-wi-widget .fi-section-content-ctn {
    padding: 20px !important;
    border-radius: 14px !important;
}

/* ── TABLES ──────────────────────────────────────────────── */
.fi-ta-wrap {
    border: 1px solid #e6eaf1 !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    background: #fff !important;
}
/* Global search + column-toggle toolbar strip above the header row —
   Filament ships this at px-4 py-3 sm:px-6 (up to 24px horizontal, 12px
   vertical), which read as unexplained empty white space above the grid
   next to AVAAL's own list (header starts immediately, no toolbar row
   at all) — 2026-07-18. Kept (global search + the "Columns" toggle are
   genuinely useful and were already noted elsewhere as the equivalent
   of AVAAL's own "Columns" button) but shrunk to match the rest of the
   compact chrome instead of removed outright. */
.fi-ta-header-toolbar {
    padding: 8px 16px !important;
    gap: 12px !important;
}
.fi-ta-header-toolbar .ms-auto {
    gap: 12px !important;
}
.fi-ta-header-toolbar .fi-input-wrp {
    height: 24px !important;
    min-height: 24px !important;
}
.fi-ta-header-toolbar input[type="search"],
.fi-ta-header-toolbar input[type="text"] {
    font-size: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.fi-ta-header-cell {
    background: #f0f4f9 !important;
    color: #7a8699 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 4px 8px !important;
}
/* Column titles briefly centered app-wide 2026-07-19, reverted the same
   day — looked fine on Orders (also just-centered filter fields above
   it) but wrong everywhere else (e.g. Clients), so back to Filament's
   default left alignment (each column's own ->alignment() still wins,
   e.g. Amount's ->alignEnd() header lining up over its right-aligned
   values). */
.fi-ta-header-cell-label {
    font-size: 9.5px !important;
}
.fi-ta-row td {
    border-bottom: 1px solid #eef1f6 !important;
    color: #16202e !important;
    font-size: 11px !important;
}
.fi-ta-row:last-child td { border-bottom: none !important; }
.fi-ta-row:hover td { background: #f6f9fd !important; }
/* Dense rows matching AVAAL's spreadsheet-like row height — Filament's
   default cell content wrapper ships px-3 py-4 (12px/16px), which is
   most of what made rows tall/sparse; shrunk here so more orders fit
   on screen without scrolling, same goal as the filter panel above.
   Tightened further 2026-07-18 (now 3px/8px + 11px text, was 5px/10px +
   12.5px, then 3px/8px + 11.5px) across two follow-up "smaller font /
   fit more rows" requests.
   .fi-ta-icon (IconColumn's own wrapper, e.g. boolean "Active" columns)
   ships the same default px-3 py-4 but is a DIFFERENT class from
   .fi-ta-text — missing it here (2026-07-19 bug) left icon cells at the
   old 12px left padding while the header above had already been
   tightened to 8px, so icons sat visibly right of their own column
   title instead of lining up under it. */
.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-icon {
    padding: 3px 8px !important;
    gap: 2px !important;
}
/* Filament's <td> itself (.fi-ta-cell) carries extra built-in padding on
   the FIRST/LAST column specifically (p-0 first-of-type:ps-1
   sm:first-of-type:ps-3 sm:last-of-type:pe-3, from cell.blade.php) on
   top of the .fi-ta-text/.fi-ta-icon padding above. The header cell got
   an equivalent (larger, ps-6) first/last bonus, but our earlier flat
   `padding: 4px 8px` override on .fi-ta-header-cell already replaced
   that — so headers use a uniform 8px everywhere while first-column data
   cells kept their extra 12px, throwing the first column (Company Name,
   Order #, etc.) out of alignment with its own header (2026-07-19 bug).
   Zeroing the <td> out entirely makes .fi-ta-text/.fi-ta-icon's flat 8px
   the only source of horizontal spacing, matching the header exactly. */
.fi-ta-cell {
    padding: 0 !important;
}
/* Extra breathing room on the table's OUTER leading/trailing edges only
   (2026-07-19) — with every cell flattened to a uniform 8px above, the
   first column's text sat almost flush against the card's left border
   (and the last column's against the right). Bumped just the outer edge
   to 16px, applied identically to both the header cell and its data
   cell counterpart so they stay pixel-aligned with each other (the
   asymmetric first/last padding Filament ships by default is exactly
   what caused the header/data misalignment bug fixed above — this
   redoes "extra edge padding" without repeating that mistake). */
.fi-ta-header-cell:first-child {
    padding-left: 16px !important;
}
.fi-ta-header-cell:last-child {
    padding-right: 16px !important;
}
.fi-ta-cell:first-child .fi-ta-text,
.fi-ta-cell:first-child .fi-ta-icon {
    padding-left: 16px !important;
}
.fi-ta-cell:last-child .fi-ta-text,
.fi-ta-cell:last-child .fi-ta-icon {
    padding-right: 16px !important;
}
/* macOS/Chrome "overlay" scrollbars (the default unless the user has
   "always show scrollbars" on) draw the horizontal scrollbar ON TOP of
   the last pixels of content instead of reserving space for it — with
   rows this short, that transient gray bar was covering part of the
   bottom row while actively scrolling (2026-07-18 bug report). Reserve
   real space for it instead of letting it float over content, and pad
   a little further so it sits in dead space, not on the row's text. */
.fi-ta-content {
    scrollbar-gutter: stable !important;
    padding-bottom: 10px !important;
}

/* Sticky Actions column — Dispatch Board grid ONLY (2026-08-15). The
   grid carries ~22 columns (CLAUDE.md "DISPATCH BOARD — CHECKBOX + BULK
   ASSIGN": "grid needs to carry real detail"), wide enough that
   Assign/Open and the status-advance button sat off past the right edge
   of .fi-ta-content's own horizontal scroll — user had to scroll right
   on every single row just to reach them. Pins the EXISTING actions
   cell to the right edge of that same scroll container instead
   (position: sticky, relative to .fi-ta-content — the nearest
   overflow-x-auto ancestor) rather than restructuring any columns —
   explicit user direction was "keep in one line," not a 2-line/card
   layout — a Filament Split/Stack layout was considered and rejected
   before writing any code, since it would have dropped the column
   header row entirely for a "card list" style, and couldn't embed
   actions inside it anyway (Filament only allows real data Columns in
   Split/Stack, not Actions).
   Deliberately scoped to .hx-dispatch-board (the wrapper class in
   dispatch-board.blade.php), NOT a bare .fi-ta-actions-cell rule — this
   changes actual scroll BEHAVIOR (not just color/spacing like the rules
   above), and every other Filament table in the panel (Orders, Clients,
   Carriers, etc.) — some with their own custom per-row CSS (e.g.
   Orders' status-based row tinting) — was never designed around a
   pinned trailing column. A global rule risked visually clashing with
   those without ever having been asked for there. */
.hx-dispatch-board .fi-ta-actions-cell,
.hx-dispatch-board .fi-ta-actions-header-cell {
    position: sticky !important;
    right: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    box-shadow: -6px 0 8px -6px rgba(15, 23, 42, 0.18) !important;
}
.hx-dispatch-board .fi-ta-actions-header-cell {
    background: #f0f4f9 !important;
}
/* Stack the action buttons vertically within the cell instead of side by
   side (2026-08-15 — screenshot feedback: a row with both Assign/Open
   AND the status-advance button ("Mark En Route to Hub" etc.) crammed
   them into one cramped horizontal line, visibly wider/misaligned next
   to rows with only one button). Filament's own actions group
   (.fi-ta-actions, actions.blade.php) is a plain flex row by default —
   overridden here to flex-col so each row's 1-2 buttons sit on their
   own line regardless of how many actions a given row has.
   ->iconButton() (icon only, no visible label) was tried in
   DispatchBoard.php the same round to also narrow the column, then
   reverted per direct feedback ("only icons don't look good... text
   with icons") — back to icon + visible label, so align-items is
   flex-start (left-aligned) here, not center: these are full-width
   text buttons of differing lengths now, not uniform square icons. */
.hx-dispatch-board .fi-ta-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}
/* Keep the sticky cell's background in sync with the existing row-hover
   rule above (.fi-ta-row:hover td) — without this override, that rule's
   own background would visually "turn off" the moment the row is
   hovered while horizontally scrolled, since this more specific sticky
   rule would otherwise keep winning. */
.hx-dispatch-board .fi-ta-row:hover .fi-ta-actions-cell {
    background: #f6f9fd !important;
}

/* ── FORM INPUTS ─────────────────────────────────────────── */
.fi-input,
.fi-select-input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
    font-family: 'Public Sans', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    border-color: #d8e0ec !important;
    background: #fff !important;
    color: #16202e !important;
    border-radius: 8px !important;
}
.fi-input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #1E4D8C !important;
    box-shadow: 0 0 0 3px rgba(30,77,140,0.12) !important;
    outline: none !important;
}
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp > label,
.fi-fo-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #5b6675 !important;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.fi-btn {
    font-family: 'Public Sans', system-ui, sans-serif !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
}
.fi-btn-color-primary,
.fi-btn[data-color="primary"] {
    background: #1E4D8C !important;
    border-color: #1E4D8C !important;
    color: #fff !important;
}
.fi-btn-color-primary:hover {
    background: #102a4c !important;
    border-color: #102a4c !important;
}
.fi-btn-color-success {
    background: #2e6b12 !important;
    border-color: #2e6b12 !important;
}
.fi-btn-color-danger {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}
.fi-btn-color-warning {
    background: #8a5a00 !important;
    border-color: #8a5a00 !important;
}
.fi-btn-color-gray {
    background: #fff !important;
    border-color: #d8e0ec !important;
    color: #1E4D8C !important;
}
.fi-btn-color-gray:hover {
    background: #f6f9fd !important;
}

/* ── BADGES ──────────────────────────────────────────────── */
.fi-badge {
    font-family: 'Public Sans', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    padding: 2px 8px !important;
}
/* 2026-07-18 fix: every non-gray Filament badge (regardless of its actual
   semantic color) gets the SAME "fi-color-custom" class — Filament tells
   them apart via CSS custom properties set inline per-element, not via
   distinct class names. The old selector here (`.fi-color-custom.fi-badge`)
   matched literally every colored badge identically, and the color-specific
   selectors below it (`.fi-badge-color-warning` etc) targeted class names
   Filament doesn't actually generate — so e.g. a "Hold" (warning) status
   badge and a "CAD" (primary) currency badge silently rendered with the
   exact same blue, never visibly distinguishing status at a glance. Correct
   selector is `.fi-badge.fi-color-{name}`, which Filament does emit. */
.fi-badge.fi-color-primary { background: #e6f0fb !important; color: #1E4D8C !important; }
.fi-badge.fi-color-success { background: #ddf3eb !important; color: #09633a !important; }
.fi-badge.fi-color-warning { background: #fff1d6 !important; color: #8a5a00 !important; }
.fi-badge.fi-color-danger  { background: #fde8e8 !important; color: #7a1e1e !important; }
.fi-badge.fi-color-info    { background: #ededfe !important; color: #3a32a0 !important; }
.fi-badge.fi-color-gray    { background: #eef1f6 !important; color: #5b6675 !important; }

/* ── ORDERS LIST — status-tinted row backgrounds: REMOVED 2026-07-19 ───
   Re-checked against the AVAAL reference screenshot: its row backgrounds
   are plain white regardless of status — the colored text seen on some
   rows there tracks the OrderType column (Inbound/Outbound), not Status.
   So full-row tinting-by-status was never actual AVAAL parity, just an
   embellishment on top of it, and redundant with the Status column's
   own colored badge. Removed rather than kept "just in case" — the
   Status column's ->color()/badge (via OrderResource::statusColor())
   is what actually conveys status per row now. */

/* ── ORDERS LIST — AVAAL-style colored status tab strip (2026-07-18) ───
   AVAAL's own Customer Order List tab row (All/Open/Confirmed/Trip
   Created/Enroute/Delivered/Invoiced/Cancelled/Hold) is a row of SOLID
   colored pill buttons — the whole button is the status color, not a
   plain label with a small separate counter chip (which is what this
   used to look like, and what Filament's Tab component does by
   default). Each Tab in ListOrders::getTabs() carries a matching
   `hx-tab-{status}` class via ->extraAttributes() so the whole button
   can be targeted here. AVAAL uses 9 visually distinct hues that don't
   map onto Filament's 6-name badge-color enum, so this is a literal,
   separate palette from OrderResource::statusColor() (which still
   drives the Status column's own badge color elsewhere on this same
   page — that keeps its own smaller semantic palette). Per explicit
   user request the live count stays inside each pill (unlike AVAAL,
   which shows no per-tab counts) — rendered as plain inline text, not
   its own colored badge (2026-07-18: the pill itself is already the
   status color, a second nested pill for the number was redundant). */
.fi-tabs-item.hx-tab {
    border-radius: 7px !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    transition: filter .1s !important;
}
.fi-tabs-item.hx-tab:hover {
    filter: brightness(0.96);
}
.fi-tabs-item.hx-tab .fi-tabs-item-label {
    color: inherit !important;
}
/* Filament's badge base class ships `ring-1 ring-inset` (a colored
   border implemented via box-shadow) plus its own font-size — both
   fought the "just a number, tile already has the color" look, so both
   get explicitly killed/matched here rather than just the background. */
.fi-tabs-item.hx-tab .fi-badge {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: 800 !important;
}
/* Selected tab gets a dark inset ring — AVAAL's own selected-tab state
   is subtle (slightly recessed look), this is the closest equivalent
   without a screenshot of that exact state to match pixel-for-pixel. */
.fi-tabs-item.hx-tab.fi-active {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35) !important;
}
/* Outer tab strip wrapper (Filament's <x-filament::tabs> nav) ships as
   its own white rounded card (bg-white, shadow, ring) by default — with
   every tab now a solid color, that outer card just added a redundant
   white frame around already-colored pills. Scoped via :has(.hx-tab) so
   this doesn't touch tab strips elsewhere in the panel (e.g. form Tabs
   components), only this AVAAL-style status strip. A little padding is
   kept (not 0) so the first/last pill's selected-state ring has room to
   breathe instead of sitting flush against the container edge. */
nav.fi-tabs:has(.hx-tab) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 6px !important;
}

.fi-tabs-item.hx-tab-all          { background: #ded9f5 !important; color: #3d3470 !important; }
.fi-tabs-item.hx-tab-open         { background: #ece7a3 !important; color: #55501a !important; }
.fi-tabs-item.hx-tab-confirmed    { background: #c7c7c7 !important; color: #333333 !important; }
.fi-tabs-item.hx-tab-trip_created { background: #5bc7d2 !important; color: #073e42 !important; }
.fi-tabs-item.hx-tab-enroute      { background: #eda355 !important; color: #5c3200 !important; }
.fi-tabs-item.hx-tab-delivered    { background: #43ad4c !important; color: #ffffff !important; }
.fi-tabs-item.hx-tab-invoiced     { background: #a8531d !important; color: #ffffff !important; }
.fi-tabs-item.hx-tab-cancelled    { background: #eaad9b !important; color: #7a2e1c !important; }
.fi-tabs-item.hx-tab-hold         { background: #cea8ca !important; color: #45204a !important; }

/* Dispatch Board status-group tabs (2026-07-20) — same hx-tab mechanism
   as the Orders list above, own palette since these are lifecycle-phase
   groups (Form 8) rather than the Order status enum. 'all', 'delivered',
   and 'cancelled' intentionally reuse the Orders list's colors above —
   same semantic meaning in both places. */
.fi-tabs-item.hx-tab-active       { background: #a9e0c9 !important; color: #0d4a30 !important; }
.fi-tabs-item.hx-tab-pending      { background: #ece7a3 !important; color: #55501a !important; }
.fi-tabs-item.hx-tab-assigned     { background: #f2c98d !important; color: #5c3a00 !important; }
.fi-tabs-item.hx-tab-in_transit   { background: #5bc7d2 !important; color: #073e42 !important; }
.fi-tabs-item.hx-tab-at_hub       { background: #9fb8e0 !important; color: #17264d !important; }
.fi-tabs-item.hx-tab-dispatched   { background: #7fa8d9 !important; color: #0c2540 !important; }

/* ── ORDERS LIST — compact "Search By" filter panel (2026-07-18,
   tightened 2026-07-18 to match AVAAL's dense field grid) ─────────────
   AboveContent filters render as a full Filament form, which ships at the
   same larger field size as the rest of the app by default. Uses its own
   24px field height (below the shared --hx-input-h:28px used elsewhere)
   plus a much tighter grid gap — Filament's default form grid ships
   gap-6 (24px) both directions, which combined with the old 4-column
   layout is why fields used to look oversized/sparse ("cover half
   screen"). Root cause of the big empty vertical gaps under Salesman/
   Service Type/Origin Hub, specifically: the "Create Date Range" filter
   packs 2 DatePickers in a single grid cell that (without ->columns(2)
   on the filter, see OrderResource::table()) stacked them vertically,
   stretching that whole grid row to ~90px and leaving whitespace under
   every shorter cell sharing the row. Fixed on the PHP side; the tighter
   gap here is the second half of the fix. */
.fi-ta-filters {
    padding: 8px 12px !important;
    gap: 6px !important;
}
.fi-ta-filters .fi-fo-component-ctn {
    gap: 6px 10px !important;
}
.fi-ta-filters input:not([type="checkbox"]),
.fi-ta-filters select,
.fi-ta-filters .fi-input-wrp {
    height: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
.fi-ta-filters input:not([type="checkbox"]) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Non-searchable Filament Select fields (Salesman/Service Type/Origin
   Hub/Order Type here) render as a genuinely native <select> — see
   vendor/filament/support/.../components/input/select.blade.php — not
   the Choices.js-enhanced UI (that only kicks in for ->searchable() or
   ->multiple()). Its default classes carry `py-1.5` (12px total vertical
   padding) + `sm:leading-6` (24px line-height); squeezing the box to our
   24px height without resetting those left the text's line box taller
   than the box itself, so it rendered clipped/pinned to the top instead
   of centered (2026-07-18 bug report). */
.fi-ta-filters select.fi-select-input {
    padding: 0 20px 0 8px !important;
    line-height: 22px !important;
}
.fi-ta-filters .choices__inner {
    height: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
/* AVAAL-style inline labels (label immediately left of its input, not
   stacked above it) — 2026-07-18. Filament ships a native ->inlineLabel()
   per-field, but SelectFilter builds its own internal Select field
   (Tables\Filters\SelectFilter::getFormField()) with no hook to chain
   that call onto, so this is done purely in CSS on the shared
   .fi-fo-field-wrp markup instead — works identically for the plain
   TextInput filters and the SelectFilter/DatePicker ones. The wrapper's
   inner div normally stacks 2 children (label row, then content row) as
   2 grid ROWS in a single column; forcing 2 explicit column tracks here
   turns that same markup into label|input side by side with no template
   changes needed. */
.fi-ta-filters .fi-fo-field-wrp > div.grid {
    grid-template-columns: 92px 1fr !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    align-items: center !important;
}
.fi-ta-filters .fi-fo-field-wrp-label {
    white-space: nowrap;
    margin-bottom: 0 !important;
}
.fi-ta-filters .fi-fo-field-wrp-label span {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #5b6675 !important;
}

/* ── MODALS ──────────────────────────────────────────────── */
/* The bordered "card" look belongs on .fi-modal-window (the actual
   outer modal box — bg-white/shadow/ring per Filament's own
   modal/index.blade.php). .fi-modal-content is just the plain body
   wrapper BETWEEN the header and footer (flex flex-col gap-y-4 py-6,
   no card styling of its own in Filament); putting the border/radius on
   it instead (as this used to) drew a second box around just the form
   fields, flush against the footer buttons below it (2026-07-19 bug
   report — "PDF Document" field touching Extract/Cancel). overflow:
   hidden on the window clips the header's square corners into the
   window's own rounded ones, so the header no longer needs to round
   itself. */
.fi-modal-window {
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid #e6eaf1 !important;
    overflow: hidden !important;
}
.fi-modal-header {
    background: #f6f9fd !important;
    border-bottom: 1px solid #e6eaf1 !important;
    /* Filament only adds the header's own pb-6 when there's no footer
       AND no form slot (see modal/index.blade.php) — ours has both, so
       it ships with padding-bottom: 0, leaving the description text
       sitting right on top of the border with barely any breathing
       room (2026-07-19). */
    padding-bottom: 20px !important;
}
.fi-modal-heading {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #16202e !important;
}

/* ── INLINE CLIENT/LOCATION MODAL ("Add New Client"/"Add New Location")
   — same compact field treatment as the rest of the Order form, not
   Filament/AVAAL's default oversized modal inputs. ── */
.hx-compact-modal input:not([type="checkbox"]):not([type="radio"]),
.hx-compact-modal select,
.hx-compact-modal .fi-input-wrp {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
}
.hx-compact-modal input:not([type="checkbox"]):not([type="radio"]),
.hx-compact-modal select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 4px !important;
}
.hx-compact-modal select {
    padding-right: 22px !important;
}
.hx-compact-modal .fi-input-wrp {
    border-radius: 4px !important;
}
.hx-compact-modal .fi-fo-component-ctn {
    row-gap: 10px !important;
    column-gap: 10px !important;
}

/* Country/Province/City are Choices.js widgets (native(false)/searchable),
   same gotcha as every other searchable Select in this app — .choices__inner
   has its own padding/height, independent of .fi-input-wrp. */
.hx-compact-modal .choices {
    min-height: unset !important;
}
.hx-compact-modal .choices__inner {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline-start: 8px !important;
    padding-inline-end: 20px !important;
    font-size: 12.5px !important;
    line-height: normal !important;
    border-radius: 4px !important;
}
.hx-compact-modal .choices__list--single {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
    white-space: nowrap !important;
}
.hx-compact-modal .choices__placeholder {
    white-space: nowrap !important;
}

/* ── REPEATER ────────────────────────────────────────────── */
.fi-fo-repeater-item {
    border: 1px solid #e6eaf1 !important;
    border-radius: 10px !important;
    background: #fff !important;
}
.fi-fo-repeater-item-header {
    background: #f6f9fd !important;
    border-bottom: 1px solid #eef1f6 !important;
    border-radius: 10px 10px 0 0 !important;
}

/* ── ACTIVE SHIPMENT WIDGET ──────────────────────────────── */
.haulex-shipment-card { padding: .25rem 0; }
.hx-card-label {
    font-size: 12px; font-weight: 700; color: #8a98ab;
    letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px;
}
.hx-ship-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: 1rem;
}
.hx-ship-number { font-size: 19px; font-weight: 800; color: #16202e; }
.hx-ship-meta   { font-size: 13.5px; color: #5b6675; margin-top: 4px; }
.hx-status-badge {
    font-size: 11.5px; font-weight: 700; color: #09633a;
    background: #ddf3eb; padding: 4px 11px;
    border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.hx-progress-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.hx-hub-label { text-align: center; flex-shrink: 0; min-width: 80px; }
.hx-hub-label--right { text-align: right; }
.hx-hub-tag {
    display: block; font-size: 11px; font-weight: 600;
    color: #8a98ab; text-transform: uppercase; margin-bottom: 2px;
}
.hx-hub-label strong { font-size: 14px; font-weight: 700; color: #16202e; }
.hx-progress-bar-wrap { flex: 1; }
.hx-progress-bar {
    height: 3px; border-radius: 3px; background: #e6eaf1; overflow: hidden;
}
.hx-progress-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg,#2f6fc7,#1E4D8C);
    transition: width .5s ease;
}
.hx-progress-pct { font-size: 12px; color: #7a8699; margin-top: 8px; text-align: center; }
.hx-card-footer { border-top: 1px solid #e6eaf1; padding-top: 12px; margin-top: 4px; }
.hx-track-link {
    display: block; width: 100%; padding: 11px;
    border: 1px solid #d8e0ec; background: #f6f9fd;
    color: #1E4D8C; border-radius: 10px; font-weight: 700;
    font-size: 13.5px; text-decoration: none; text-align: center;
    transition: background .15s;
}
.hx-track-link:hover { background: #e6f0fb; }
.haulex-shipment-empty { min-height: 8rem; display: flex; flex-direction: column; justify-content: center; }

/* ── RECENT ACTIVITY FEED ────────────────────────────────── */
.hx-activity-feed {
    display: flex; flex-direction: column; gap: 12px;
    overflow-y: auto; max-height: 22rem;
}
.hx-activity-item { display: flex; gap: 10px; }
.hx-activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.hx-dot-primary { background: #1E4D8C; }
.hx-dot-gray    { background: #d0d8e5; }
.hx-activity-body { flex: 1; min-width: 0; line-height: 1.35; }
.hx-activity-title { font-size: 13px; font-weight: 600; color: #16202e; }
.hx-activity-meta  { font-size: 11.5px; color: #8a98ab; margin-top: 1px; }
.hx-activity-note  { font-size: 12px; color: #5b6675; margin-top: 2px; font-style: italic; }

/* ── STOP TYPE BADGES ────────────────────────────────────── */
.stop-type-p {
    display:inline-flex; align-items:center; justify-content:center;
    width:1.6rem; height:1.6rem; border-radius:.25rem;
    background:#fff1d6; color:#8a5a00; font-weight:800; font-size:.75rem;
}
.stop-type-d {
    display:inline-flex; align-items:center; justify-content:center;
    width:1.6rem; height:1.6rem; border-radius:.25rem;
    background:#e6f0fb; color:#1E4D8C; font-weight:800; font-size:.75rem;
}

/* ── NOTIFICATIONS / TOAST ───────────────────────────────── */
.fi-no-notification {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(30,77,140,.10) !important;
    border: 1px solid #e6eaf1 !important;
    background: #fff !important;
    font-family: 'Public Sans', system-ui, sans-serif !important;
}

/* ── DROPDOWN ────────────────────────────────────────────── */
.fi-dropdown-panel {
    border-radius: 12px !important;
    border: 1px solid #e6eaf1 !important;
    box-shadow: 0 4px 20px rgba(16,42,76,.12) !important;
    background: #fff !important;
}

/* ── LOGIN PAGE ──────────────────────────────────────────── */
.fi-simple-layout {
    background: #eef1f6 !important;
}
/* Bug fixed 2026-08-16 — fields touching the card's left/right edges,
   found via screenshot ("no padding between border and white
   background"). Root cause: this rule was styling .fi-simple-page —
   an INNER wrapper Filament renders with no padding of its own — as if
   it were the visual card. The actual card is its parent, .fi-simple-
   main, which already ships proper horizontal padding (Tailwind's own
   px-6 sm:px-12, ~24-48px). Styling the inner element gave it a border/
   shadow/radius sitting flush against the form fields, with the
   outer element's real padding never actually visible as a gap.
   Moved the border/shadow/radius to .fi-simple-main itself — the
   element that was always meant to be "the card" — so its own existing
   padding finally applies between the border and the fields. Same
   border color / radius language as .fi-ta-wrap elsewhere in this file. */
.fi-simple-main {
    background: #fff !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(16,42,76,.10) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER HEADER — compact fields, same field height as the Stops row
   ═══════════════════════════════════════════════════════════════ */

/* Row gap between the two stacked grids (Row 1: Bill To..Company,
   Row 2: Note/Division) — targets only the outer single-column grid
   that separates the two rows, not the column-gap inside each row. */
.hx-order-header .fi-section-content > .fi-fo-component-ctn {
    row-gap: 10px !important;
}

/* Column gap between fields WITHIN Row 1 / Row 2 (Bill To Customer ↔
   Order # ↔ Credit Limit ↔ ...) — was Tailwind's default gap-6 (24px),
   same tightened value as the row gap above so field spacing feels
   uniform across the whole header, not just between the two rows. */
.hx-order-header .fi-fo-component-ctn .fi-fo-component-ctn {
    column-gap: 10px !important;
    row-gap: 10px !important;
}

/* Label-to-input spacing inside each field, tightened to match */
.hx-order-header .fi-fo-field-wrp .grid.gap-y-2 {
    row-gap: 3px !important;
}

/* Same compact field height as .hx-stop-row */
.hx-order-header input:not([type="checkbox"]),
.hx-order-header select,
.hx-order-header .fi-input-wrp {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
}

/* Note is a 3-row Textarea, not a single-line input — the generic 28px
   .fi-input-wrp rule above would otherwise clip it down to one line and
   cut off exactly the kind of longer text (e.g. PDF-extracted special
   instructions) this field exists to hold. */
.hx-order-header .fi-fo-textarea,
.hx-order-header .fi-fo-textarea.fi-input-wrp {
    height: 62px !important;
    min-height: 62px !important;
}
.hx-order-header textarea {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    font-size: 12.5px !important;
    padding: 5px 8px !important;
    line-height: 1.35 !important;
    resize: none !important;
    box-sizing: border-box !important;
    /* Filament ships this field with a hardcoded overflow-hidden utility
       class (for its autosize feature, disabled here) — without this
       override, notes longer than ~2 lines were silently unreadable and
       unreachable past line 2, with no scrollbar and no visual hint that
       more text existed below the fold. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.hx-order-header input:not([type="checkbox"]),
.hx-order-header select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 4px !important;
}
.hx-order-header .fi-input-wrp {
    border-radius: 4px !important;
}

/* Bill To Customer is a searchable Select → Choices.js widget, same
   gotcha as the Stops "Stop / Location" field: its .choices__inner box
   has its own padding independent of .fi-input-wrp. */
.hx-order-header .choices {
    min-height: unset !important;
}
.hx-order-header .choices__inner {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    max-height: var(--hx-input-h) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12.5px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.hx-order-header .choices__list--single {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.hx-order-header .choices__list--single .choices__item {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100%;
}

/* Same tightened field-to-field gap inside the 4 bottom cards (Order
   Details, Salesman/Dispatcher, Equipment & Special, Order Rate) —
   e.g. Cust. Order # ↔ BOL #, Broker Phone ↔ Fax. Only targets grids
   nested inside another grid, so the outer gap *between* the 4 cards
   (.hx-order-bottom itself) is left alone — that's card spacing, not
   field spacing. */
.hx-order-bottom .fi-fo-component-ctn .fi-fo-component-ctn {
    column-gap: 10px !important;
    row-gap: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   COMPACT BOTTOM CARDS (Order Details, Salesman/Dispatcher, and —
   when asked — Equipment & Special / Order Rate) — same compact
   field treatment as the header row and Stops table
   (var(--hx-input-h), 4px radius, no wasted padding). Each of the
   4 bottom cards is only ~340-420px wide even on a normal desktop
   (1-of-4 columns), which is why fields/placeholders were wrapping.
   Reused across cards via the shared .hx-compact-card class rather
   than being Order-Details-specific.
   ═══════════════════════════════════════════════════════════════ */
.hx-compact-card input:not([type="checkbox"]):not([type="radio"]),
.hx-compact-card select,
.hx-compact-card .fi-input-wrp {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
}
.hx-compact-card input:not([type="checkbox"]):not([type="radio"]),
.hx-compact-card select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 4px !important;
}
.hx-compact-card select {
    padding-right: 22px !important;
}
.hx-compact-card .fi-input-wrp {
    border-radius: 4px !important;
}

/* Origin Hub is a searchable Select → Choices.js widget, same gotcha
   fixed earlier for Bill To Customer / Stop-Location: its .choices__inner
   box has its own padding/height, independent of .fi-input-wrp, which is
   what made the placeholder text wrap onto two lines. */
.hx-compact-card .choices {
    min-height: unset !important;
}
.hx-compact-card .choices__inner {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline-start: 8px !important;
    padding-inline-end: 20px !important;
    font-size: 12.5px !important;
    line-height: normal !important;
    border-radius: 4px !important;
}
.hx-compact-card .choices__list--single {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
    white-space: nowrap !important;
}
.hx-compact-card .choices__placeholder {
    white-space: nowrap !important;
}

/* Truck Load radio group — tighter gap + smaller text so all 4 options
   (FL/LTL/Unknown/Oversized) wrap cleanly and stay left-aligned instead
   of spreading across three uneven, oddly-indented rows. */
.hx-compact-card .fi-fo-radio {
    gap: 6px 12px !important;
}
.hx-compact-card .fi-fo-radio label {
    font-size: 12.5px !important;
    gap: 4px !important;
    align-items: center !important;
}
.hx-compact-card .fi-fo-radio input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

/* Equipment checkbox list — same density fix, same root cause (Tailwind
   gap-4 + a checkbox with mt-1 that isn't actually centered against its
   label). CheckboxList has no ->inline()/inlineLabel() equivalent to a
   Radio's, so this is CSS-only; the 3-column grid() call in PHP stays. */
.hx-compact-card .fi-fo-checkbox-list {
    gap: 6px 10px !important;
}
.hx-compact-card .fi-fo-checkbox-list-option-label {
    font-size: 12.5px !important;
    gap: 4px !important;
    align-items: center !important;
}
.hx-compact-card .fi-fo-checkbox-list-option-label input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   STOPS TABLE — AVAAL layout (confirmed against an actual AVAAL
   screenshot 2026-07-17 — Length/Unit and Zone/Total are real columns;
   Zone removed again "for the time being" same day, Total kept then).
   Column alignment: same CSS grid-template-columns on header + P row + D rows.
   2026-07-23: Dist replaced with a required per-stop Hub select (see
   OrderResource's Stops section comment); Total removed entirely ("doesn't
   make sense here" — user direction) and Hub moved to the very end of the
   row, widened using the space both changes freed up.
   Template: check(22px) | badge(28px) | stop(2fr) | date(105px) | time(98px)
             | pkg(80px) | qty(48px) | length(48px) | unit(80px) | weight(60px)
             | unit(45px) | goods(1fr) | ref(85px) | note(0.9fr) | hub(140px)
   Pkg needs the full 80px — its longest realistic values ("Container",
   "Package", "Cylinder") measure ~76px min at this font/padding; anything
   narrower clips them (confirmed by testing, don't shrink this one further).
   Every input/select in the row also has its default Tailwind horizontal
   padding stripped down (see "tight padding" rule below) — the default
   ~12-32px of padding Filament ships with was eating most of the usable
   width in these narrow columns, which is what was truncating 4-digit
   numbers and "Container" before real content even got close to the
   column's outer width.
   ═══════════════════════════════════════════════════════════════ */

/* Section: flush layout — no internal padding */
.hx-stops-section > .fi-section-content-ctn > .fi-section-content {
    padding: 0 !important;
    overflow-x: auto !important;
}
.hx-stops-section > .fi-section-content-ctn > .fi-section-header {
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid #e3e8f0 !important;
}

/* Kill Filament gap-6 (24px) on every fi-fo-component-ctn in stops */
.hx-stops-section .fi-fo-component-ctn {
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* ── Shared grid template: header and all stop rows use this exactly ── */
.hx-stops-col-hdr,
.hx-stop-row .fi-fo-component-ctn {
    display: grid !important;
    grid-template-columns: 22px 28px 2fr 105px 98px 80px 48px 48px 80px 60px 45px 1fr 85px 0.9fr 140px !important;
    column-gap: 8px !important;
    align-items: center !important;
    min-width: 1330px !important;
}

/* Column header */
.hx-stops-col-hdr {
    background: #f0f4f9;
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 700;
    color: #7a8699;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #dde4ee;
}
.hx-stops-col-hdr span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Stop row outer wrapper (same horizontal padding as col header) */
.hx-stop-row {
    padding: 6px 14px;
    border-bottom: 1px solid #eef1f6;
}

/* P / D badges */
.hx-stop-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.hx-stop-p { background: #fff3cd; color: #856404; }
.hx-stop-d { background: #cfe2ff; color: #084298; }

/* Row-select checkbox (first cell) */
.hx-stop-row-check {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #1E4D8C;
}

/* Checkbox / badge cells: vertically center content inside their grid cell */
.hx-stop-row .fi-fo-component-ctn > .fi-fo-field-wrp:nth-child(1) .fi-fo-placeholder,
.hx-stop-row .fi-fo-component-ctn > .fi-fo-field-wrp:nth-child(2) .fi-fo-placeholder {
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
    height: var(--hx-input-h) !important;
}

/* No labels in stop rows — compact no-header inline style */
.hx-stop-row .fi-fo-field-wrp-label,
.hx-stop-row label {
    display: none !important;
}

/* TextInput fields (Qty, Weight, Dist, Goods Desc, Pickup/Del #, Note)
   still render their (now-empty) label row as a sibling grid row above
   the input — hiding the <label> alone leaves that row's wrapper div
   in place, which still reserves an 8px gap-y-2 row and made every
   TextInput field 8px taller than the Select/DatePicker/TimePicker
   fields next to it in the row. Select-based fields never render this
   wrapper at all when label('') is used, which is why only they were
   sitting at the correct height. Collapse the wrapper entirely. */
.hx-stop-row .fi-fo-field-wrp > .grid.gap-y-2 > .flex.items-center.gap-x-3.justify-between {
    display: none !important;
}

/* Field wrapper: tight — overflow visible so focus rings aren't clipped */
.hx-stop-row .fi-fo-field-wrp {
    gap: 0 !important;
    min-width: 0 !important;
    overflow: visible;
}

/* Uniform row height — every field type (text/number, select, date, time)
   renders at a different native height by default, which is what caused
   fields to sit at different vertical offsets within the row.
   The row-select checkbox is excluded — it's a small square, not a field,
   and forcing --hx-input-h on it stretched it into a tall rectangle. */
.hx-stop-row .fi-input-wrp,
.hx-stop-row input:not([type="checkbox"]),
.hx-stop-row select {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
}
.hx-stop-row input:not([type="checkbox"]),
.hx-stop-row select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 4px !important;
}
.hx-stop-row .fi-input-wrp {
    border-radius: 4px !important;
}

/* Tight horizontal padding — Filament ships ~12px (text inputs) to 32px
   (selects, to clear the native dropdown arrow) of left/right padding by
   default. In these narrow columns that ate most of the usable width,
   which is what was clipping 4-digit numbers and "Container" before the
   text itself even got close to the column's outer edge. */
.hx-stop-row input:not([type="checkbox"]) {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.hx-stop-row select {
    padding-left: 4px !important;
    padding-right: 16px !important;
}

/* Numbers right-aligned */
.hx-stop-row input[type="number"] {
    text-align: right !important;
}

/* Stop / Location field is a Choices.js widget (searchable select), not a
   plain <select> — it renders its own .choices__inner box with its own
   padding/line-height that the rules above never touch. Left uncontrolled
   it renders ~36px tall vs. the 28px every other field is forced to,
   which is what made its placeholder text and dropdown arrow (a
   background-image, positioned "center" relative to .choices__inner's
   own height) sit off-center and the whole row look misaligned. */
.hx-stop-row .choices {
    min-height: unset !important;
}
.hx-stop-row .choices__inner {
    height: var(--hx-input-h) !important;
    min-height: var(--hx-input-h) !important;
    max-height: var(--hx-input-h) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline-start: 8px !important;
    padding-inline-end: 20px !important;
    font-size: 12px !important;
    line-height: normal !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.hx-stop-row .choices__list--single {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
/* Selected location can be a full "Name, Street, City Province" string
   (once a Client/location row is linked) — long enough to wrap onto a
   second line and blow out the row's fixed 28px height, breaking
   alignment with every other single-line cell in the row. Truncate with
   an ellipsis instead; the full value is still visible when the field
   is focused/searched or on the Clients page. */
.hx-stop-row .choices__list--single .choices__item {
    line-height: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100%;
}

/* Hide number input increment/decrement spinners */
.hx-stop-row input[type="number"]::-webkit-outer-spin-button,
.hx-stop-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.hx-stop-row input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ── D Repeater: strip card chrome, flush row layout ─────────── */
.hx-stops-repeater {
    padding: 0 !important;
}
.hx-stops-repeater > .fi-fo-field-wrp {
    margin: 0 !important;
    padding: 0 !important;
}
.hx-stops-repeater .fi-fo-repeater-item {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid #eef1f6 !important;
    margin: 0 !important;
}
.hx-stops-repeater .fi-fo-repeater-item-header {
    display: none !important;
}
.hx-stops-repeater .fi-fo-repeater-item-content {
    padding: 0 !important;
    gap: 0 !important;
}

/* Validation error text ("The Hub field is required.") is a normal block
   <p> Filament renders below the field — in a 28px-tall no-label row that
   pushed the whole row taller and spilled past the row's own width
   (2026-07-23 bug report). The invalid field already gets a red ring
   border (Filament's own .fi-invalid class, automatic) — that's the
   per-field indicator; a page-level Notification toast (see
   CreateOrder::onValidationError()) covers the rest, so the inline
   message itself is redundant here and safe to hide entirely. */
.hx-stops-repeater .fi-fo-field-wrp-error-message {
    display: none !important;
}
/* Filament wraps repeater items in their own grid (Tailwind gap-4 = 16px
   row-gap) that's separate from the item's own margin/border — zeroing
   the item's margin alone (above) doesn't remove this, which is why a
   visible gap reappears between rows every time a new stop is added. */
.hx-stops-repeater ul > div.grid {
    row-gap: 0 !important;
    gap: 0 !important;
}

/* Hide Filament's built-in add button — replaced by custom hx-stops-btn-row below.
   The add button renders as a direct-child <div class="flex"> of the fi-fo-repeater div.
   With collapsible(false) that's the only direct <div> child (items are in a <ul>). */
.hx-stops-repeater > div {
    display: none !important;
}

/* ── Centered action buttons row (Add Pickup + Add Delivery) ── */
.hx-stops-btn-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px 14px;
    border-top: 1px solid #eef1f6;
}
.hx-stop-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 16px;
    background: #fff;
    border: 1px solid #d0d8ea;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #1E4D8C;
    cursor: pointer;
    font-family: 'Public Sans', system-ui, sans-serif;
    transition: background-color 0.12s, border-color 0.12s;
}
.hx-stop-add-btn:hover {
    background: #eaf1fb;
    border-color: #1E4D8C;
}
.hx-stop-delete-btn {
    color: #b91c1c;
}
.hx-stop-delete-btn:hover {
    background: #fde8e8;
    border-color: #b91c1c;
}

/* ── Total (Pickup) summary row (2026-08-16) — see _stops_total
   Placeholder, OrderResource.php. Right-aligned below the Add/Delete
   button row, same border-top separator language as .hx-stops-btn-row
   right above it. Deliberately NOT the yellow "computed field" look
   AVAAL uses elsewhere (e.g. Credit Limit/Avail Credit) — that
   convention was never carried into this app's own design language,
   so introducing it just for this one row would look inconsistent
   rather than familiar. */
/* Bug fixed 2026-08-16 — the huge gap between the label and the values
   (screenshot: "TOTAL (PICKUP):" then a wide empty stretch before "30
   pcs 0 lbs") was this ruleset missing !important on every other rule
   in this file, Filament's own Placeholder wrapper markup carries
   Tailwind utility classes (its default label/content grid layout) with
   enough specificity/source-order priority to win over a plain,
   un-flagged rule — exactly the reason every other selector here uses
   !important. This one just got missed when it was first written. */
.hx-stops-total-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 8px 14px !important;
    border-top: 1px solid #eef1f6 !important;
    background: #f8fafc !important;
}
.hx-stops-total-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #7a8699 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
.hx-stops-total-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #16202e !important;
    min-width: 70px !important;
    text-align: right !important;
}