/* ============================================================================
   Transport Management System — modern, compact, professional UI.
   Scoped under .tms so it never touches the rest of the app.
   ========================================================================== */

.tms { font-size: 13px; color: #1f2937;
    /* Primary follows the active app theme (same source the Workshop module uses),
       falling back to the FleetView accent and finally a neutral blue. Red is
       reserved strictly for errors/danger below — never as the brand colour. */
    --tms-primary:   var(--wo-accent, var(--fcw-accent, #1b99bd));
    --tms-primary-d: color-mix(in srgb, var(--tms-primary) 86%, #000);
    --tms-tint:      color-mix(in srgb, var(--tms-primary) 12%, #fff);
    --tms-tint-2:    color-mix(in srgb, var(--tms-primary) 20%, #fff);
}
.tms * { box-sizing: border-box; }

/* ── Shell / top bar ───────────────────────────────────────────── */
.tms-shell { padding: 14px 16px 28px; background: #f6f7f9; min-height: 100%; }
.tms-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tms-top h1 { font-size: 18px; font-weight: 700; margin: 0; color: #111827; letter-spacing: -0.01em; }
.tms-top .tms-sub { font-size: 12px; color: #9aa3af; margin-top: 2px; }

/* ── Buttons ───────────────────────────────────────────────────── */
.tms-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
    border-radius: 8px; border: 1px solid #e2e5ea; background: #fff; color: #374151;
    font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.tms-btn:hover { background: #f3f5f8; color: #111827; }
.tms-btn--primary { background: var(--tms-primary); border-color: var(--tms-primary); color: #fff; }
.tms-btn--primary:hover { background: var(--tms-primary-d); border-color: var(--tms-primary-d); color: #fff; }
.tms-btn--sm { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: 7px; }
.tms-btn i { font-size: 12px; }

/* ── Orders data table (Order → Trips, expandable, column-aligned) ── */
.tms-otable { --ocols: minmax(150px,1.4fr) minmax(130px,1.3fr) minmax(150px,1.5fr) 88px 88px 76px 96px;
    display: flex; flex-direction: column; }
.tms-ohead { display: grid; grid-template-columns: var(--ocols); gap: 12px; align-items: center; padding: 9px 8px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa3af;
    background: #fafbfc; border-bottom: 1px solid #eceff2; border-radius: 10px 10px 0 0; }
.tms-orow { border-bottom: 1px solid #f0f1f4; }
.tms-orow:last-child { border-bottom: 0; }
.tms-orow-main { display: grid; grid-template-columns: var(--ocols); gap: 12px; align-items: center;
    padding: 11px 8px; cursor: pointer; }
.tms-orow-main:hover { background: #fafbfc; }
.tms-oc { min-width: 0; }
.tms-oc .l1, .tms-oc .l2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tms-oc .l1 { font-size: 12.5px; color: #1f2937; }
.tms-oc .l2 { font-size: 11px; color: #9aa3af; margin-top: 1px; }
.tms-oid { display: flex; align-items: flex-start; gap: 9px; }
.tms-oid .exp { font-size: 12px; color: #c2c9d4; margin-top: 3px; flex: none; transition: transform .18s; }
.tms-orow.is-open .tms-oid .exp { transform: rotate(180deg); }
.tms-oid .l1 a { color: #1d4ed8; font-weight: 700; text-decoration: none; }
.tms-oid .l1 a:hover { text-decoration: underline; }
.tms-oid .ot { font-size: 10px; font-weight: 700; color: #8b5cf6; margin-left: 2px; }
.tms-ovh { font-size: 12.5px; font-weight: 600; color: #1f2937; }
.tms-ost { font-size: 12px; font-weight: 700; }
@media (max-width: 1040px) { .tms-otable { --ocols: minmax(140px,1.4fr) minmax(120px,1.3fr) 84px 84px 72px 92px; } .tms-oc.c-loc { display: none; } }
@media (max-width: 720px)  { .tms-otable { --ocols: minmax(130px,1.5fr) minmax(110px,1.3fr) 70px 90px; } .tms-oc.c-pick, .tms-oc.c-del { display: none; } }

/* expanded trips sub-table */
.tms-orow-trips { background: #fafbfc; padding: 4px 14px 14px 30px; --tcols: 110px minmax(140px,1.4fr) minmax(150px,1.6fr) 100px; }
.tms-trips-meta { font-size: 11px; color: #9aa3af; padding: 9px 4px 5px; }
.tms-tphead { display: grid; grid-template-columns: var(--tcols); gap: 12px; padding: 6px 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #aeb6c2; border-bottom: 1px solid #eef0f3; }
.tms-triprow { display: grid; grid-template-columns: var(--tcols); gap: 12px; align-items: center;
    padding: 9px 4px; border-bottom: 1px solid #eef0f3; font-size: 12px; }
.tms-triprow .code { font-family: ui-monospace, Menlo, monospace; color: #1d4ed8; font-weight: 600; }
.tms-triprow--click { cursor: pointer; border-radius: 7px; transition: background .12s; }
.tms-triprow--click:hover { background: #f1f5fd; }
.tms-triprow .veh { color: #1f2937; display: flex; align-items: center; gap: 7px; min-width: 0; }
.tms-triprow .veh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tms-triprow .veh i { color: var(--tms-primary); flex: none; }
.tms-triprow .drv .l1 { font-size: 12px; color: #1f2937; }
.tms-triprow .drv .l2 { font-size: 11px; color: #9aa3af; }
.tms-trip-empty { font-size: 12px; color: #9aa3af; padding: 10px 4px; }
.tms-orow-actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 720px) { .tms-orow-trips { --tcols: 96px 1fr 96px; padding-left: 16px; } .tms-triprow .drv, .tms-tphead .h-drv { display: none; } }

/* ── Status filter tabs (raised folder style) ──────────────────── */
/* Inactive tabs read as plain text on the page; the active tab lifts to a
   white flap that merges into the .tms-folder sheet below it. */
/* A hairline baseline runs under the whole row; the active tab lifts to a
   white card (border + soft shadow, rounded top) and notches into the sheet. */
.tms-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; padding: 0;
    border-bottom: 1px solid #e7eaef; position: relative; z-index: 2; }
.tms-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; cursor: pointer;
    font-size: 13px; font-weight: 500; color: #6b7280; background: transparent;
    border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0;
    margin-bottom: -1px; transition: color .15s; }
.tms-tab:hover:not(.is-active) { color: #111827; }
.tms-tab.is-active { background: #fff; color: #111827; font-weight: 600;
    border-color: #e7eaef; box-shadow: 0 -4px 10px rgba(16,24,40,.06); position: relative; z-index: 3; }
.tms-tab .tms-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
    padding: 0 6px; border-radius: 9px; background: #eef1f5; color: #8a93a2; font-size: 11px; font-weight: 700; }
.tms-tab.is-active .tms-count { background: var(--tms-tint); color: var(--tms-primary); }
/* Dim statuses with no rows so populated tabs stand out. */
.tms-tab.is-empty:not(.is-active) { color: #aeb6c2; }
.tms-tab.is-empty:not(.is-active) .tms-count { background: #f1f3f6; color: #c2c9d4; }

/* List panel — a flat-topped white sheet under the tab row (holds toolbar + table). */
.tms-folder { background: #fff; border: 1px solid #e7eaef; border-top: none; border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 3px rgba(16,24,40,.05); padding: 14px 16px; position: relative; z-index: 1; }
.tms-folder .tms-toolbar { margin-bottom: 12px; }
.tms-folder > *:last-child { margin-bottom: 0; }

/* ── Toolbar / filters ─────────────────────────────────────────── */
.tms-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tms-search { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.tms-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9aa3af; font-size: 13px; }
.tms-search input { width: 100%; height: 36px; padding: 0 12px 0 32px; border: 1px solid #e2e5ea; border-radius: 9px;
    background: #fff; font-size: 13px; outline: none; }
.tms-search input:focus { border-color: #c7cdd6; box-shadow: 0 0 0 3px rgba(99,102,241,.08); }
.tms-toolbar select { height: 36px; padding: 0 30px 0 12px; border: 1px solid #e2e5ea; border-radius: 9px; background: #fff;
    font-size: 12.5px; color: #475569; outline: none; }
.tms-toolbar .tms-spacer { flex: 1; }
.tms-count-label { font-size: 12px; color: #9aa3af; }

/* ── Cards ─────────────────────────────────────────────────────── */
.tms-card { background: #fff; border: 1px solid #ebedf1; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.tms-card + .tms-card { margin-top: 12px; }
.tms-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 16px; border-bottom: 1px solid #f0f1f4; }
.tms-card-h h2 { font-size: 13.5px; font-weight: 700; margin: 0; color: #111827; }
.tms-card-b { padding: 14px 16px; }

/* ── Detail header cards (4-up, tinted) ────────────────────────── */
.tms-hcards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1100px) { .tms-hcards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .tms-hcards { grid-template-columns: 1fr; } }
.tms-hcard { background: #fff; border: 1px solid #ebedf1; border-radius: 12px; padding: 13px 15px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04); position: relative; overflow: hidden; }
.tms-hcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, #6366f1); }
.tms-hcard .r { display: flex; align-items: flex-start; gap: 9px; }
.tms-hcard .r + .r { margin-top: 10px; }
.tms-hcard .ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c, #6366f1) 13%, #fff); color: var(--c, #6366f1); font-size: 15px; }
.tms-hcard .k { font-size: 11px; color: #9aa3af; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tms-hcard .v { font-size: 13px; color: #1f2937; font-weight: 600; margin-top: 1px; line-height: 1.35; }
.tms-hcard .v small { display: block; font-weight: 400; color: #9aa3af; font-size: 11.5px; }

/* ── Compact form grid ─────────────────────────────────────────── */
.tms-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8;
    margin: 4px 0 10px; padding-bottom: 7px; border-bottom: 1px solid #f0f1f4; }
.tms-sec:not(:first-child) { margin-top: 20px; }
.tms-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 14px; }
@media (max-width: 1100px) { .tms-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .tms-grid { grid-template-columns: 1fr; } }
.tms-grid .col-2 { grid-column: span 2; }
.tms-grid .col-4 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .tms-grid .col-2, .tms-grid .col-4 { grid-column: 1 / -1; } }

.tms-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tms-field label { font-size: 11.5px; font-weight: 600; color: #6b7280; }
.tms-field label .req { color: #dc2626; }
.tms-field input, .tms-field select, .tms-field textarea {
    height: 34px; padding: 0 11px; border: 1px solid #e2e5ea; border-radius: 8px; background: #fff;
    font-size: 13px; color: #1f2937; outline: none; width: 100%; font-family: inherit; }
.tms-field textarea { height: auto; padding: 8px 11px; resize: vertical; }
.tms-field input:focus, .tms-field select:focus, .tms-field textarea:focus {
    border-color: #c7cdd6; box-shadow: 0 0 0 3px rgba(99,102,241,.08); }
.tms-field.has-error input, .tms-field.has-error select { border-color: #dc2626; }
.tms-field .err { color: #dc2626; font-size: 11px; }
.tms-field .unit-wrap { display: flex; gap: 6px; }
.tms-field .unit-wrap select { width: 86px; flex: none; }

.tms-checks { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.tms-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #374151; cursor: pointer; }
.tms-check input { width: 15px; height: 15px; accent-color: var(--tms-primary); }

/* ── Status pill ───────────────────────────────────────────────── */
.tms-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px; white-space: nowrap;
    background: color-mix(in srgb, var(--c, #6b7280) 12%, #fff); color: var(--c, #6b7280); }
.tms-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #6b7280); }

/* ── List / board ──────────────────────────────────────────────── */
.tms-list { display: flex; flex-direction: column; }
.tms-trow { display: grid; grid-template-columns: 1.3fr 1.1fr 1.4fr 1fr 1.1fr 1.1fr auto; gap: 12px;
    align-items: center; padding: 12px 16px; border-bottom: 1px solid #f0f1f4; }
.tms-trow:last-child { border-bottom: 0; }
.tms-trow:hover { background: #fafbfc; }
.tms-trow--click { cursor: pointer; transition: background .12s; }
.tms-trow--click:hover { background: #f1f5fd; }
.tms-thead { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa3af;
    background: #fafbfc; border-radius: 10px 10px 0 0; }
.tms-trow .lead { font-weight: 700; color: #1d4ed8; }
.tms-trow .lead a { color: #1d4ed8; text-decoration: none; }
.tms-trow .muted { color: #9aa3af; font-size: 11.5px; }
.tms-trow .strong { font-weight: 600; }
.tms-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tms-cell-stack span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Empty / skeleton ──────────────────────────────────────────── */
.tms-empty { text-align: center; color: #9aa3af; padding: 48px 20px; }
.tms-empty i { font-size: 30px; display: block; margin-bottom: 10px; color: #cbd2dc; }
.tms-empty p { margin: 0; font-size: 13px; max-width: 420px; margin-inline: auto; line-height: 1.5; }

/* ── Full-screen in-panel form view ────────────────────────────── */
.tms-form-view { background: #f6f7f9; min-height: 100%; }
.tms-page-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff;
    border-bottom: 1px solid #ebedf1; position: sticky; top: 0; z-index: 5; }
.tms-page-head .back { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e2e5ea; background: #fff;
    display: flex; align-items: center; justify-content: center; color: #475569; cursor: pointer; }
.tms-page-head .title { font-size: 15px; font-weight: 700; color: #111827; flex: 1; }
.tms-page-head .actions { display: flex; gap: 8px; }
.tms-page-body { padding: 16px; }
.tms-form-banner { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 9px;
    padding: 9px 13px; font-size: 12.5px; margin-bottom: 14px; }

.tms-loading { text-align: center; color: #9aa3af; padding: 50px; font-size: 13px; }

/* ── Pick-on-map link + modal ──────────────────────────────────── */
.tms .tms-maplink { font-size: 11px; font-weight: 600; color: #1d4ed8; margin-left: 8px; text-decoration: none; }
.tms .tms-maplink:hover { text-decoration: underline; }
.tms-map-modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 20000;
    display: flex; align-items: center; justify-content: center; padding: 20px; }
.tms-map-box { background: #fff; border-radius: 14px; width: 720px; max-width: 96vw; max-height: 92vh;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.tms-map-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px;
    border-bottom: 1px solid #eef0f3; font-weight: 700; font-size: 14px; color: #111827; }
.tms-map-x { border: 0; background: none; font-size: 22px; line-height: 1; color: #9aa3af; cursor: pointer; }
.tms-map-search { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #f0f1f4; }
.tms-map-search input { flex: 1; height: 34px; padding: 0 11px; border: 1px solid #e2e5ea; border-radius: 8px; font-size: 13px; outline: none; }
.tms-map-canvas { height: 380px; width: 100%; background: #eef2f6; }
.tms-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid #eef0f3; }
.tms-map-addr { font-size: 12.5px; color: #475569; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Trip Definition timeline ──────────────────────────────────── */
.tms-timeline { display: flex; flex-direction: column; }
.tms-tl-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid #f0f1f4; }
.tms-tl-row:last-child { border-bottom: 0; }
.tms-tl-ic { width: 32px; height: 32px; border-radius: 8px; background: #eef1f5; color: #64748b;
    display: flex; align-items: center; justify-content: center; font-size: 14px; }
.tms-tl-row.is-done .tms-tl-ic { background: #e8f6ee; color: #1f9d57; }
.tms-tl-name { font-size: 13px; font-weight: 600; color: #1f2937; }
.tms-tl-leg { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; margin-left: 6px; }
.tms-tl-loc { font-size: 11.5px; color: #9aa3af; margin-top: 1px; }
.tms-tl-dur { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 11.5px; color: #94a3b8; white-space: nowrap; }
.tms-tl-dur .tms-tl-est-over { text-decoration: line-through; }
.tms-tl-act { font-weight: 700; color: #1f9d57; }
.tms-tl-act.over { color: #dc2626; }
.tms-tl-act-btns { display: flex; gap: 6px; align-items: center; }
.tms-tl-dur .tms-tl-est.is-replaced { text-decoration: line-through; color: #b3bac6; }
/* per-leg expenditure (inline under a leg in Trip Definition) */
.tms-tl-main .tl-exp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tl-exp-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6b7280;
    background: #f4f6f8; border: 1px solid #eceff2; border-radius: 999px; padding: 2px 4px 2px 10px; }
.tl-exp-item b { font-weight: 600; color: #374151; }
.tl-exp-x { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; color: #c4cdd6; font-size: 9px; }
.tl-exp-x:hover { background: #fde2e2; color: #dc2626; }
.tl-exp-add { margin-top: 6px; }
.tl-exp-toggle { font-size: 11.5px; color: var(--tms-primary); font-weight: 600; }
.tl-exp-toggle i { font-size: 9px; margin-right: 3px; }
.tl-exp-form { align-items: center; gap: 6px; margin-top: 7px; }
.tl-exp-form input { height: 28px; padding: 0 9px; border: 1px solid #e2e5ea; border-radius: 7px; font-size: 12px; outline: none; }
.tl-exp-form .tl-exp-type { width: 150px; }
.tl-exp-form .tl-exp-amount { width: 92px; }

/* Order detail — Trip Definition tab: expandable trip → its legs */
.to-trip + .to-trip { border-top: 1px solid #f0f1f4; }
.to-trip-chev { color: #c7cdd6; font-size: 11px; margin-left: 5px; transition: transform .15s; }
.to-trip.is-open .to-trip-chev { transform: rotate(180deg); }
.to-trip.is-open > .tms-trow { background: #f6f8fa; }
.to-trip-legs { padding: 4px 14px 14px; background: #fafbfc; border-top: 1px solid #f0f1f4; }
.to-trip-legs .tms-timeline { margin-top: 4px; }

/* per-leg demurrage (inline on border/offloading legs in Trip Definition) */
.dem-leg.tl-dem { border: 0; background: transparent; padding: 0; margin: 7px 0 0; border-radius: 0; }
.tl-dem-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #6b7280; }
.tl-dem-toggle > i.fa-stopwatch { color: #b3bac6; font-size: 11px; }
.tl-dem-toggle .dem-amt { font-weight: 700; }
.tl-dem-toggle .dem-live { margin-left: 0; }
.tl-dem-toggle .tl-dem-gps { color: #16a34a; font-size: 10px; }
.tl-dem-chev { color: #c4cdd6; font-size: 9px; transition: transform .15s; }
.tl-dem.is-open .tl-dem-chev { transform: rotate(180deg); }
.tl-dem-editor { margin-top: 8px; padding: 10px 12px; border: 1px solid #eef0f3; border-radius: 10px; background: #fafbfc; }
.tl-dem-editor .tms-grid { gap: 8px 12px; }
.tms-tl-check { color: #1f9d57; font-size: 18px; }

/* ── New-order wizard (stepped form) ───────────────────────────── */
.tms-steps { display: flex; align-items: center; margin: 2px 0 18px; }
.tms-step-tab { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
    padding: 9px 13px; border: 1px solid #e3e6ec; border-radius: 9px; background: #fff; cursor: pointer;
    transition: background .15s, border-color .15s; }
.tms-step-tab .n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex;
    align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #eef1f5; color: #94a3b8; }
.tms-step-tab .t { font-size: 12.5px; font-weight: 600; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tms-step-tab:hover { border-color: #d3d9e2; }
.tms-step-tab.is-active { border-color: var(--tms-primary); background: var(--tms-tint); }
.tms-step-tab.is-active .n { background: var(--tms-primary); color: #fff; }
.tms-step-tab.is-active .t { color: #1f2937; }
.tms-step-tab.is-done { border-color: color-mix(in srgb, var(--tms-primary) 45%, #fff); }
.tms-step-tab.is-done .n { background: var(--tms-tint-2); color: var(--tms-primary); }
.tms-step-tab.is-done .t { color: #5b6472; }
.tms-step-conn { width: 18px; height: 2px; background: #e3e6ec; flex: none; }
.tms-step-conn.is-filled { background: color-mix(in srgb, var(--tms-primary) 45%, #fff); }
@media (max-width: 680px) { .tms-step-tab .t { display: none; } .tms-step-tab { flex: none; padding: 9px 11px; } }

.tms-step { display: none; }
.tms-step.is-active { display: block; }
.tms-step .tms-sec:first-child { margin-top: 0; }

.tms-wizard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0f1f4; }
.tms-wizard-foot .left { display: flex; align-items: center; gap: 14px; }
.tms-wizard-foot .counter { font-size: 12px; color: #9aa3af; }

/* ── Apply-template picker on the trip detail ──────────────────── */
.tms-tpl-select { height: 30px; max-width: 220px; padding: 0 10px; border: 1px solid #e2e5ea; border-radius: 7px;
    background: #fff; font-size: 12.5px; color: #475569; outline: none; }
.tms-tpl-select:focus { border-color: #c7cdd6; }

/* ── Order details page (tabbed: basic / vehicles / invoices / trips) ── */
.tms-omuted { color: #9aa3af; font-size: 12px; margin-left: 6px; font-weight: 500; }
.tms-link { color: #1d4ed8; text-decoration: none; font-size: 12.5px; font-weight: 600; align-self: center; }
.tms-link:hover { text-decoration: underline; }
.tms-iconbtn { width: 34px; padding: 0; justify-content: center; }
.tms-opane { animation: tmsFade .12s ease; }
@keyframes tmsFade { from { opacity: 0; } to { opacity: 1; } }

/* read-only definition grid */
.tms-dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 18px; }
.tms-dl > div { min-width: 0; }
.tms-dl .col-2 { grid-column: span 2; }
.tms-dl dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9aa3af; margin: 0 0 2px; }
.tms-dl dd { margin: 0; font-size: 13px; color: #1f2937; word-break: break-word; }
@media (max-width: 900px) { .tms-dl { grid-template-columns: repeat(2, minmax(0,1fr)); } .tms-dl .col-2 { grid-column: span 2; } }

/* accordion sections */
.tms-acc { border-bottom: 1px solid #eef0f3; }
.tms-acc:last-child { border-bottom: 0; }
.tms-acc-h { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
    padding: 13px 2px; font-size: 13.5px; font-weight: 700; color: #111827; }
.tms-acc-h i { color: #c7cdd6; transition: transform .15s; }
.tms-acc.is-open .tms-acc-h i { transform: rotate(180deg); }
.tms-acc-b { padding: 4px 2px 16px; }

/* status history rows */
.tms-hist-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f4f5f7; font-size: 12.5px; }
.tms-hist-row:last-child { border-bottom: 0; }

/* ── Vehicle Nomination: counts bar + add-vehicle card ── */
.tms-vn-bar { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.tms-vn-chip, .tms-vn-add { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--c, #94a3b8) 38%, #fff); border-radius: 11px;
    background: color-mix(in srgb, var(--c, #94a3b8) 7%, #fff); min-width: 190px; }
.tms-vn-chip .ic, .tms-vn-add .ic { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); font-size: 15px; }
.tms-vn-chip .k, .tms-vn-add .k { font-size: 12px; color: #6b7280; font-weight: 600; }
.tms-vn-chip .v, .tms-vn-add .v { font-size: 18px; font-weight: 800; color: #111827; line-height: 1.1; }
.tms-vn-add { margin-left: auto; cursor: pointer; text-align: left; border-style: dashed; }
.tms-vn-add:hover { background: color-mix(in srgb, var(--c) 12%, #fff); }
.tms-trow .tms-cell-stack .muted { display: block; font-size: 11px; color: #9aa3af; margin-top: 1px; }

/* ── Trip detail: match the orders table's compact font scale ──────
   Orders table reads at 12.5px primary / 11px secondary; bring the trip
   detail (header cards, timeline, expenditure) in line. Scoped to #tr-detail
   so the shared form/card classes elsewhere are unaffected. */
#tr-detail { font-size: 12.5px; }
#tr-detail .tms-card-h h2 { font-size: 13px; }
#tr-detail .tms-hcard .v { font-size: 12.5px; }
#tr-detail .tms-hcard .v small { font-size: 11px; }
#tr-detail .tms-tl-name { font-size: 12.5px; }
#tr-detail .tms-tl-loc,
#tr-detail .tms-tl-dur { font-size: 11px; }
#tr-detail .tms-field label { font-size: 11px; }
#tr-detail .tms-trow { font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════
   Dispatch workspace (FleetTrack two-pane queue) — UI/UX mockup.
   Master–detail with a collapsible/expandable detail pane.
   ════════════════════════════════════════════════════════════════════ */
.tms-ws { display: flex; flex-direction: column; height: 100%; background: #f6f7f9; padding: 14px 16px; }
    border-bottom-width: 2px; border-radius: 5px; background: #fff; font: 600 10.5px ui-monospace, Menlo, monospace; color: #6b7280; }

/* top bar */
.tms-ws-top { display: flex; align-items: center; gap: 16px; padding: 0 2px 10px; background: transparent; }
/* White card holding the toolbar + body — the folder tabs connect into it (like the Trips page). */
.tms-ws-card { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #e7eaef; border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.tms-ws-toolbar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #f0f1f4; flex-wrap: wrap; }
.tms-ws-toolbar .tms-ws-prio { padding-bottom: 0; }
.tms-ws-toolbar .tms-ws-search { margin: 0; flex: 1; min-width: 200px; max-width: 360px; }
.tms-ws-toolbar .tms-ws-viewtoggle { margin: 0 0 0 auto; }
.tms-ws-top h1 { font-size: 18px; font-weight: 700; margin: 0; color: #111827; letter-spacing: -0.01em; }
.tms-ws-top .tms-sub { font-size: 12px; color: #9aa3af; margin-top: 2px; }
.tms-ws-top .tms-sub span { font-weight: 700; color: #4b5563; }

/* filter strip */
.tms-ws-filters { display: flex; align-items: flex-end; gap: 16px; padding: 10px 18px 0; background: #fff; border-bottom: 1px solid #e7eaef; flex-wrap: wrap; }
.tms-ws-filters .tms-tabs { border-bottom: 0; }
.tms-ws-prio { display: flex; align-items: center; gap: 6px; padding-bottom: 9px; }
.tms-ws-prio .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa3af; margin-right: 2px; }
.tms-prio-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid #e2e5ea;
    border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: #6b7280; cursor: pointer; }
.tms-prio-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tms-prio-chip:hover { background: #f6f7f9; }
.tms-prio-chip.is-on { border-color: var(--c); color: #111827; background: color-mix(in srgb, var(--c) 10%, #fff); }
.tms-ws-search { flex: 1; min-width: 200px; max-width: 340px; margin: 0 0 7px auto; }

/* view toggle (List | Board) */
.tms-ws-viewtoggle { display: inline-flex; margin: 0 0 7px 8px; border: 1px solid #e2e5ea; border-radius: 8px; overflow: hidden; align-self: center; }
.tms-ws-viewtoggle button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; background: #fff; color: #6b7280; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tms-ws-viewtoggle button + button { border-left: 1px solid #e2e5ea; }
.tms-ws-viewtoggle button.is-on { background: var(--tms-primary); color: #fff; }

/* body — list (two-pane) vs board (kanban), with a shared detail pane.
   data-view = list|board ; data-detail = closed|open|expanded. */
.tms-ws-body { flex: 1; min-height: 0; min-width: 0; display: flex; position: relative; }
.tms-ws-body[data-view="board"] .tms-ws-queue { display: none; }
.tms-ws-body[data-view="list"]  .tms-ws-board { display: none; }
.tms-ws-body[data-detail="closed"] .tms-ws-detail { display: none; }
/* The full-width table stays scannable; the detail opens as a right-side overlay
   drawer in BOTH list and board views (it never squeezes the queue). */
.tms-ws-body:not([data-detail="closed"]) .tms-ws-detail {
    display: flex; position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 94%);
    border-left: 1px solid #e7eaef; box-shadow: -14px 0 36px rgba(16,24,40,.16); z-index: 15; background: #fff; }
.tms-ws-body[data-detail="expanded"] .tms-ws-detail { width: min(900px, 97%); }

/* Animation — the detail pane slides in from the right when a row is selected,
   and the queue eases to its narrower width. The keyframe re-fires whenever the
   pane goes from display:none → flex (i.e. opening from the closed state). */
@keyframes dispDetailIn {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: translateX(0); }
}
.tms-ws-body:not([data-detail="closed"]) .tms-ws-detail {
    animation: dispDetailIn .26s cubic-bezier(.32, .72, 0, 1);
    will-change: transform, opacity;
}
.tms-ws-queue { transition: flex .26s cubic-bezier(.32, .72, 0, 1), max-width .26s cubic-bezier(.32, .72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
    .tms-ws-body:not([data-detail="closed"]) .tms-ws-detail { animation: none; }
    .tms-ws-queue { transition: none; }
}

/* Make the Dispatch workspace fill the full-screen panel height. The panel's
   .panel-content is content-height by default, so the workspace (and board)
   looked short with empty space below — flex the chain so it fills. */
#tms-dispatch-panel .panel-content { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#tms-dispatch-panel #tms_dispatch_content { flex: 1; min-height: 0; display: flex; }
#tms-dispatch-panel .tms-ws { flex: 1; min-height: 0; min-width: 0; height: auto; }

/* kanban board — columns stretch to the full board height (tall drop zones) */
.tms-ws-board { flex: 1; min-width: 0; display: flex; gap: 12px; overflow-x: auto; padding: 14px; align-items: stretch; }
.disp-col { flex: 0 0 290px; max-width: 290px; display: flex; flex-direction: column; max-height: 100%;
    background: #fff; border: 1px solid #e7eaef; border-radius: 12px; }
.disp-col-h { display: flex; align-items: center; gap: 7px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: #374151; border-bottom: 1px solid #f0f1f4; }
.disp-col-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.disp-col-n { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: #eef1f5; color: #6b7280; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.disp-col-b { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 46px; }
.disp-col-b.drop-hover { background: var(--tms-tint); outline: 2px dashed var(--tms-primary); outline-offset: -4px; border-radius: 8px; }
.disp-bcard { border: 1px solid #eceff2; border-left: 3px solid var(--p, #cbd2db); border-radius: 9px; background: #fff; padding: 9px 11px; cursor: grab; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.disp-bcard:hover { border-color: #d8dce3; }
.disp-bcard.is-active { box-shadow: 0 0 0 2px var(--tms-primary); }
.disp-bcard.is-dragging { opacity: .45; }
.disp-bcard .bc-head { display: flex; align-items: center; gap: 8px; }
.disp-bcard .r-code { font: 700 11.5px ui-monospace, Menlo, monospace; color: #1d4ed8; }
.disp-bcard .r-prio { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--c); text-transform: uppercase; }
.disp-bcard .r-prio .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.disp-bcard .bc-title { font-size: 12.5px; font-weight: 600; color: #1f2937; margin: 5px 0 4px; }
.disp-bcard .bc-meta { font-size: 11px; color: #6b7280; } .disp-bcard .bc-meta i { color: #9aa3af; margin-right: 3px; }
.disp-bcard .bc-route { font-size: 11px; color: #9aa3af; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* queue (left) */
.tms-ws-queue { flex: 1; min-width: 0; overflow: auto; background: #fff; }
.tms-ws-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 16px 11px 14px; border-bottom: 1px solid #f1f2f5;
    border-left: 3px solid var(--p, transparent); cursor: pointer; transition: background .1s; }
.tms-ws-row:hover { background: #fafbfc; }
.tms-ws-row.is-active { background: color-mix(in srgb, var(--tms-primary) 7%, #fff); }
.tms-ws-row .r-main { flex: 1; min-width: 0; }
.tms-ws-row .r-head { display: flex; align-items: center; gap: 8px; }
.tms-ws-row .r-code { font: 700 12px ui-monospace, Menlo, monospace; color: #1d4ed8; }
.tms-ws-row .r-sub { font: 11px ui-monospace, Menlo, monospace; color: #9aa3af; }
.tms-ws-row .r-prio { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .02em; }
.tms-ws-row .r-prio .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.tms-ws-row .r-title { font-size: 12.5px; font-weight: 600; color: #1f2937; margin: 3px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tms-ws-row .r-meta { font-size: 11.5px; color: #9aa3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tms-ws-row .r-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.tms-ws-row .r-win { font-size: 11px; color: #9aa3af; white-space: nowrap; }
/* fact chips — customer, truck/trailer, pickup/delivery/created dates */
.tms-ws-row .r-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.tms-ws-row .r-fact { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #8a93a2; white-space: nowrap; }
.tms-ws-row .r-fact i { font-size: 10.5px; color: #b3bac6; width: 12px; text-align: center; }
.tms-ws-row .r-fact b { font-weight: 600; color: #4b5563; }
/* advance-to-next-status button */
.tms-ws-row .r-advance { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--c, #1b99bd) 40%, #e2e5ea); border-radius: 999px;
    background: color-mix(in srgb, var(--c, #1b99bd) 9%, #fff); color: color-mix(in srgb, var(--c, #1b99bd) 72%, #1f2937);
    font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: background .12s, border-color .12s; }
.tms-ws-row .r-advance:hover { background: color-mix(in srgb, var(--c, #1b99bd) 16%, #fff); border-color: var(--c, #1b99bd); }
.tms-ws-row .r-advance i { font-size: 10px; }

/* ── Dispatch filter bar (reference-style discrete filters) ─────────────── */
.disp-filters { gap: 8px 10px; align-items: center; }
.disp-f { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px;
    border: 1px solid #e2e5ea; border-radius: 8px; background: #fff; }
.disp-f i { font-size: 11px; color: #b3bac6; }
.disp-f input, .disp-f select { border: 0; outline: 0; background: transparent; font-size: 12.5px; color: #1f2937; }
.disp-f input { min-width: 116px; }
.disp-f select { min-width: 150px; cursor: pointer; }
.disp-f-spacer { flex: 1; min-width: 8px; }
.disp-sortwrap { display: inline-flex; align-items: center; gap: 6px; }
.disp-sortwrap label { font-size: 11px; font-weight: 700; color: #8a93a2; text-transform: uppercase; letter-spacing: .03em; }
.disp-sortwrap select { height: 34px; border: 1px solid #e2e5ea; border-radius: 8px; padding: 0 8px; font-size: 12.5px; background: #fff; cursor: pointer; }

/* ── Dispatch scannable table ───────────────────────────────────────────── */
.disp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.disp-table thead th { position: sticky; top: 0; z-index: 3; background: #f7f8fa; text-align: left;
    padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #8a93a2; border-bottom: 1px solid #e7eaef; white-space: nowrap; }
.disp-table thead th.ta-c { text-align: center; }
.disp-table tbody td { padding: 11px 14px; border-bottom: 1px solid #f1f2f5; vertical-align: top; color: #1f2937; }
.disp-table tbody tr.tms-ws-row { display: table-row; cursor: pointer; transition: background .1s; border-left: 0; padding: 0; }
.disp-table tbody tr.tms-ws-row:hover { background: #fafbfc; }
.disp-table tbody tr.tms-ws-row.is-active { background: color-mix(in srgb, var(--tms-primary) 8%, #fff); }
.disp-table td > span { display: block; white-space: nowrap; }
.disp-table .r-code { font: 700 12px ui-monospace, Menlo, monospace; color: #1d4ed8; }
.disp-table .r-sub { font: 11px ui-monospace, Menlo, monospace; color: #9aa3af; margin-top: 2px; }
.disp-table .muted { color: #9aa3af; margin-top: 2px; }
.disp-table .strong { font-weight: 600; }
.disp-table .c-date b, .disp-table .c-loc .strong { font-weight: 600; color: #374151; }
.disp-table .c-cust { max-width: 220px; white-space: normal; font-weight: 500; }
.disp-table .c-action { white-space: nowrap; text-align: center; }
.disp-table .c-action .r-advance { font-size: 11px; }
/* group-by-order header row */
.disp-table tr.disp-group td { background: #f3f5f8; padding: 7px 14px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: #6b7280; border-bottom: 1px solid #e7eaef; }
.disp-table tr.disp-group.is-link td { cursor: pointer; color: var(--tms-primary); }
.disp-table tr.disp-group.is-link:hover td { background: color-mix(in srgb, var(--tms-primary) 7%, #f3f5f8); }
.disp-table tr.disp-group i { margin-left: 3px; font-size: 10px; }
.tms-ws-empty { padding: 40px 24px; text-align: center; color: #9aa3af; } .tms-ws-empty i { font-size: 26px; color: #cbd2db; } .tms-ws-empty p { margin: 10px 0 0; font-size: 12.5px; }

/* detail (right) */
.tms-ws-detail { background: #fff; display: flex; flex-direction: column; min-height: 0; position: relative; }
.tms-ws-detail-empty { margin: auto; text-align: center; color: #9aa3af; padding: 40px; }
.tms-ws-detail-empty i { font-size: 34px; color: #cbd2db; } .tms-ws-detail-empty h3 { margin: 14px 0 4px; font-size: 15px; color: #4b5563; } .tms-ws-detail-empty p { margin: 0; font-size: 12.5px; }
.disp-card { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.disp-card-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #eef0f3; }
.dh-row1 { display: flex; align-items: center; gap: 8px; }
.dh-l h2 { margin: 6px 0 3px; font-size: 15px; font-weight: 700; color: #111827; }
.dh-sub { font-size: 12px; color: #9aa3af; }
.dh-l .r-prio { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--c); text-transform: uppercase; } .dh-l .r-prio .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.dh-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dh-actions .disp-goorder { white-space: nowrap; }
.tms-ws-ibtn { width: 30px; height: 30px; border: 1px solid #e2e5ea; border-radius: 7px; background: #fff; color: #6b7280; cursor: pointer; }
.tms-ws-ibtn:hover { background: #f3f5f8; color: #111827; }
.disp-card-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.disp-card-body .tms-sec { margin: 16px 0 8px; } .disp-card-body .tms-sec:first-child { margin-top: 0; }

.disp-route { display: flex; flex-direction: column; gap: 2px; }
.disp-route .rl { display: flex; gap: 10px; padding: 4px 0; }
.disp-route .ic { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; flex: none; position: relative; }
.disp-route .ic.pu { border: 3px solid #3b82f6; } .disp-route .ic.de { background: #14b8a6; border-radius: 3px; }
.disp-route .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9aa3af; }
.disp-route .v { font-size: 13px; color: #1f2937; } .disp-route .w { font-size: 11.5px; color: #9aa3af; }
.disp-map { margin: 10px 0 4px; height: 190px; border-radius: 10px; overflow: hidden; border: 1px solid #e7eaef; background: #eef2f5; position: relative; }
.disp-map .leaflet-container { height: 100%; width: 100%; font: inherit; }
.disp-map-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: #9aa3af; }
.disp-map-cap { font-size: 11.5px; color: #9aa3af; margin: 0 0 12px; }
.disp-mk-truck { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--tms-primary, #1b99bd); color: #fff; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,.35); }

/* trip definition list in the dispatch drawer */
.disp-defn { display: flex; flex-direction: column; }
.disp-defn-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f2f5; }
.disp-defn-row:last-child { border-bottom: none; }
.disp-defn-ic { width: 26px; height: 26px; flex: none; border-radius: 7px; background: #eef1f5; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.disp-defn-main { flex: 1; min-width: 0; }
.disp-defn-name { font-size: 12.5px; font-weight: 600; color: #1f2937; }
.disp-defn-leg { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9aa3af; margin-left: 4px; }
.disp-defn-loc { font-size: 11.5px; color: #9aa3af; margin-top: 1px; }
.disp-defn-dur { font-size: 11.5px; color: #6b7280; white-space: nowrap; }
.disp-defn-row.is-done .disp-defn-name { color: #6b7280; }
.disp-defn-empty { font-size: 12px; color: #9aa3af; padding: 6px 0 4px; }

.disp-vd { display: flex; flex-direction: column; gap: 8px; }
.disp-vd .vd-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid #eef0f3; border-radius: 10px; }
.disp-vd .vd-ic { width: 32px; height: 32px; border-radius: 8px; background: #eef2f7; color: #64748b; display: inline-flex; align-items: center; justify-content: center; }
.disp-vd .vd-ini { width: 32px; height: 32px; border-radius: 50%; background: #e7e9f5; color: #4f46e5; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.disp-vd .vd-main { flex: 1; display: flex; flex-direction: column; } .disp-vd .strong { font-size: 13px; font-weight: 600; color: #1f2937; } .disp-vd .muted { font-size: 11.5px; color: #9aa3af; }
.disp-vd .vd-plate { font: 700 12px ui-monospace, Menlo, monospace; color: #374151; background: #f1f3f6; padding: 3px 8px; border-radius: 6px; }
.disp-vd .vd-phone { font-size: 12px; color: #6b7280; }

.disp-activity { display: flex; flex-direction: column; gap: 0; }
.disp-activity .act { display: flex; gap: 10px; padding: 7px 0; }
.disp-activity .act-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7cdd6; margin-top: 5px; flex: none; }
.disp-activity .act:first-child .act-dot { background: var(--tms-primary); }
.disp-activity .act-l { font-size: 12.5px; font-weight: 600; color: #1f2937; }
.disp-activity .act-m { font-size: 11px; color: #9aa3af; } .disp-activity .act-n { font-size: 11.5px; color: #6b7280; margin-top: 2px; font-style: italic; }
.disp-note { display: flex; gap: 8px; margin-top: 10px; }
.disp-note-in { flex: 1; height: 32px; padding: 0 10px; border: 1px solid #e2e5ea; border-radius: 8px; font-size: 12.5px; outline: none; }
.disp-note-in:focus { border-color: #c7cdd6; }

.disp-card-foot { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-top: 1px solid #eef0f3; background: #fff; flex-wrap: wrap; }
.disp-moveto { position: relative; margin-left: auto; }
.disp-moveto-menu { position: absolute; right: 0; bottom: 40px; min-width: 190px; background: #fff; border: 1px solid #e2e5ea; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16,24,40,.14); padding: 6px; display: none; max-height: 280px; overflow-y: auto; z-index: 5; }
.disp-moveto.is-open .disp-moveto-menu { display: block; }
.disp-moveto-menu a { display: block; padding: 5px 6px; border-radius: 7px; } .disp-moveto-menu a:hover { background: #f3f5f8; }

/* toast */
.tms-ws-toast { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
    background: #111827; color: #fff; font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: all .18s; z-index: 20; }
.tms-ws-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* responsive: detail becomes an overlay on narrow panels */
@media (max-width: 1000px) {
    /* list view: detail becomes a full overlay over the queue */
    .tms-ws-body[data-view="list"]:not([data-detail="closed"]) .tms-ws-queue { flex: 1; max-width: none; }
    .tms-ws-body[data-view="list"]:not([data-detail="closed"]) .tms-ws-detail { position: absolute; inset: 0; z-index: 12; box-shadow: -8px 0 24px rgba(16,24,40,.12); }
    .tms-ws-body[data-view="board"]:not([data-detail="closed"]) .tms-ws-detail { width: 100%; }
    .tms-ws-search { max-width: none; }
}

/* Dispatch: group-by-order headers + active toggle */
#disp-group-btn.is-on { background: var(--tms-primary); border-color: var(--tms-primary); color: #fff; }
.disp-group { position: sticky; top: 0; z-index: 1; padding: 8px 16px 5px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: #6b7280; background: #fafbfc; border-bottom: 1px solid #eef0f3; }
.disp-group.is-link { cursor: pointer; }
.disp-group.is-link:hover { color: var(--tms-primary); }
.disp-group i { font-size: 10px; color: #c2c9d4; margin-left: 2px; }
.disp-group.is-link:hover i { color: var(--tms-primary); }

/* Dispatch tabs match the Customer/Template (wo-tab) look: plain grey count
   (no colored pill) + the same active border. Scoped to #disp-tabs only. */
#disp-tabs .tms-count { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none;
    color: #9aa4b2; font-size: 11px; font-weight: 600; }
#disp-tabs .tms-tab.is-active .tms-count { background: none; color: #9aa4b2; }
#disp-tabs .tms-tab.is-active { border-color: #eceff2; }

/* ── Dispatch shell adopts the Customers/Templates (wo-) treatment ──────────
   Flat white surface with a padded tab bar and flush content, so the tabs read
   identically to the Customers/Templates tabs (white page, not a grey card). */
#tms-dispatch-panel .tms-ws, #disp-ws.tms-ws { background: #fff; padding: 0; }
#disp-ws .tms-ws-top { padding: 16px 24px 12px; }
#disp-ws #disp-tabs { padding: 0 24px; background: #fff; border-bottom: 1px solid #eceff2; }
#disp-ws .tms-ws-card { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; box-shadow: none; }

/* ── Border free-days & demurrage panel (trip detail) ─────────────────────── */
.dem-hint { margin: 0 0 14px; color: #9aa3af; font-size: 12.5px; line-height: 1.5; }
.dem-leg { border: 1px solid #ebedf1; border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fafbfc; }
.dem-leg:last-child { margin-bottom: 0; }
.dem-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dem-ic { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: #eef1f5; color: #6b7280; font-size: 13px; }
.dem-id { min-width: 0; }
.dem-title { font-size: 13.5px; font-weight: 700; color: #1f2937; }
.dem-sub { font-size: 12px; color: #9aa3af; margin-top: 1px; }
.dem-live { margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.dem-live:empty { display: none; }
.dem-live--ok  { background: #ecfdf3; color: #16a34a; }
.dem-live--hot { background: #fef2f2; color: #ef4444; }
.dem-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.dem-calc { font-size: 12.5px; color: #6b7280; }
.dem-calc b { color: #1f2937; font-weight: 700; }
.dem-calc span { color: #cbd2dc; margin: 0 1px; }
.dem-waive { margin-left: auto; font-size: 12.5px; color: #6b7280; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.dem-foot .tms-btn { flex: none; }
.dem-geo { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.dem-geo > i { color: #b3bac6; font-size: 13px; }
.dem-geo select { height: 32px; border: 1px solid #e2e5ea; border-radius: 8px; padding: 0 9px; font-size: 12.5px; color: #1f2937; background: #fff; min-width: 220px; cursor: pointer; }
.dem-geo-on { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #16a34a; }
.dem-geo-on .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }

/* ── Trip detail tabs — flatten section cards inside the folder sheet ──────── */
#tr-detail .tms-folder > .tms-tpane > .tms-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
#tr-detail .tms-folder > .tms-tpane > .tms-card > .tms-card-h { padding: 0 0 11px; }
#tr-detail .tms-folder > .tms-tpane > .tms-card > .tms-card-b { padding: 14px 0 0; }
#tr-detail .tms-folder > .tms-tpane > .tms-card + .tms-card { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef0f3; }
#tr-detail .tms-sec i { margin-right: 7px; color: #b3bac6; font-size: .92em; }

/* Trip details — card-grid layout (alert · info cards · stat chips · collapsibles) */
.trc-alert { display: flex; align-items: center; gap: 12px; background: #fef2f2; border: 1px solid #fbd5d5; border-radius: 12px; padding: 13px 16px; margin-bottom: 12px; }
.trc-alert-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: #fde2e2; color: #dc2626; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.trc-alert-t { font-size: 14px; font-weight: 700; color: #b91c1c; }
.trc-alert-s { font-size: 12.5px; color: #6b7280; margin-top: 1px; }

.trc-chip { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.trc-chip.c-bl { background: #e6f1fb; color: #185fa5; }
.trc-chip.c-tl { background: #e1f5ee; color: #0f6e56; }
.trc-chip.c-pu { background: #eeedfe; color: #534ab7; }
.trc-chip.c-am { background: #faeeda; color: #854f0b; }
.trc-k { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: #9aa3af; }
.trc-v { font-size: 13.5px; font-weight: 600; color: #1f2937; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.trc-v.mono, .trc-v .mono { font-family: ui-monospace, Menlo, monospace; }
.trc-sub { font-size: 12px; color: #9aa3af; margin-top: 1px; font-family: ui-monospace, Menlo, monospace; }
.trc-mut { color: #9aa3af; font-weight: 400; }
.trc-b { min-width: 0; }

.trc-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 1100px) { .trc-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .trc-cards { grid-template-columns: 1fr; } }
.trc-card { background: #fff; border: 1px solid #ebedf1; border-radius: 12px; padding: 14px; }
.trc-fld { display: flex; gap: 10px; align-items: flex-start; }
.trc-fld + .trc-fld { margin-top: 12px; }

.trc-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 1100px) { .trc-stats { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px)  { .trc-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.trc-stat { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #ebedf1; border-radius: 10px; padding: 11px 12px; }
.trc-stat--action { border-color: color-mix(in srgb, var(--tms-primary) 40%, #ebedf1); }
.trc-action { font-size: 12.5px; font-weight: 600; color: var(--tms-primary); display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; cursor: pointer; }
.trc-action i { font-size: 10px; }

.trc-coll { background: #fff; border: 1px solid #ebedf1; border-radius: 12px; margin-top: 12px; }
.trc-coll-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 13px; font-weight: 700; color: #111827; cursor: pointer; }
.trc-coll-h > span > i { color: #b3bac6; margin-right: 7px; font-size: 14px; }
.trc-chev { color: #9aa3af; font-size: 12px; transition: transform .15s; }
.trc-coll:not(.is-open) .trc-chev { transform: rotate(180deg); }
.trc-coll-b { padding: 14px 16px 16px; border-top: 1px solid #f0f1f4; display: none; }
.trc-coll.is-open .trc-coll-b { display: block; }
.trc-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 20px; }
.trc-grid dd { font-weight: 600; }

/* Order Information — key-facts strip + ledger rows + chips (scannable) */
.tro-keyfacts { display: flex; flex-wrap: wrap; gap: 14px 26px; background: #fafbfc; border: 1px solid #eef0f3; border-radius: 10px; padding: 12px 16px; margin: 0 0 4px; }
.tro-kf { min-width: 0; }
.tro-kf .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa3af; }
.tro-kf .v { font-size: 14px; font-weight: 600; color: #1f2937; margin-top: 3px; }
.tro-kf .v.rate { color: #0f766e; }
.tro-ledger { margin: 2px 0 0; }
.tro-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f4f5f7; font-size: 13px; }
.tro-row:last-child { border-bottom: none; }
.tro-row .k { color: #6b7280; flex: none; }
.tro-row .val { color: #1f2937; text-align: right; min-width: 0; }
.tro-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tro-chip + .tro-chip { margin-left: 5px; }

/* Order Information — route journey strip */
.tro-route { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 12px; align-items: center;
    padding: 14px 16px; border: 1px solid #eef0f3; border-radius: 12px; background: #fafbfc; margin-bottom: 18px; }
.tro-node { display: flex; gap: 11px; min-width: 0; }
.tro-dot { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.tro-dot--from { background: #eaf2ff; color: #3b82f6; }
.tro-dot--to { background: #e7f7f1; color: #14b8a6; }
.tro-body { min-width: 0; }
.tro-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa3af; }
.tro-city { font-size: 14.5px; font-weight: 700; color: #1f2937; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tro-city span { color: #9aa3af; font-weight: 600; font-size: 12.5px; }
.tro-line { font-size: 12px; color: #6b7280; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tro-line i { color: #c4cdd6; margin-right: 5px; width: 12px; text-align: center; }
.tro-date { font-size: 11.5px; color: #9aa3af; margin-top: 5px; }
.tro-mid { position: relative; display: flex; align-items: center; justify-content: center; }
.tro-track { position: absolute; left: -6px; right: -6px; top: 50%; height: 0; border-top: 2px dashed #d6dbe2; }
.tro-truck { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #e2e5ea; display: inline-flex; align-items: center; justify-content: center; color: #6b7280; font-size: 12px; }
@media (max-width: 720px) { .tro-route { grid-template-columns: 1fr; } .tro-mid { display: none; } }

/* ── Quick-add customer (order form) ─────────────────────────────── */
.tms-with-add { display: flex; gap: 6px; align-items: center; }
.tms-with-add select { flex: 1; min-width: 0; }
.tms-add-btn { flex: none; width: 34px; height: 34px; border: 1px solid #dfe3e8; border-radius: 7px;
    background: #fff; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tms-add-btn:hover { background: #f4f6f9; color: #1a1d23; }

.tms-qc-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); z-index: 2200;
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.tms-qc { width: 100%; max-width: 520px; background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(17, 24, 39, .28); }
.tms-qc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    border-bottom: 1px solid #eef0f3; font-weight: 500; }
.tms-qc-x { border: 0; background: none; color: #9aa4b2; cursor: pointer; font-size: 14px; }
.tms-qc-x:hover { color: #1a1d23; }
.tms-qc-body { padding: 14px; }
.tms-qc-body label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 5px; }
.tms-qc-body input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #dfe3e8; border-radius: 7px;
    font-size: 13px; outline: none; box-sizing: border-box; }
.tms-qc-body input:focus { border-color: #2f6fed; }
.tms-qc-err { margin-top: 8px; color: #dc2626; font-size: 12px; }
.tms-qc-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid #eef0f3; background: #fafbfc; }

.tms-qc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 12px; }
.tms-qc-f--wide { grid-column: 1 / -1; }
.tms-qc-f label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.tms-qc-f input, .tms-qc-f select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #dfe3e8;
    border-radius: 7px; font-size: 13px; outline: none; box-sizing: border-box; background: #fff; }
.tms-qc-f input:focus, .tms-qc-f select:focus { border-color: #2f6fed; }
.tms-qc-req { color: #dc2626; }
.tms-qc-hint { margin: 10px 0 0; color: #9aa4b2; font-size: 11.5px; }
@media (max-width: 520px) { .tms-qc-grid { grid-template-columns: 1fr; } }
.tms-qc-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #1a1d23; height: 34px; margin: 0; }
.tms-qc-check input { width: auto; height: auto; margin: 0; }