/* The Execution area (Board, Events, Waiting room, Replan workspace, the route drawer and its dialogs). Its scoped
   .razor.css files became this one stylesheet while the area lived in the Frisco client plugin (2026-10-26 to
   2026-11-02), whose scoped styles never reach the page. Each component's rules stand here under its name, unscoped;
   every class keeps the component's prefix, and ::deep is the descendant step it stood for. index.html links it after
   the DevExpress theme and lara-theme.css, where the plugin used to inject it, so an unscoped rule still wins over the
   theme at equal specificity. */

/* AddRouteColumnDialog */
/* The line over the list and the map: the work day and the routes that are columns already. */
.eac-lead {
    margin-bottom: 8px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-dense);
}

/* The list beside the map. Every part keeps its box whatever the list holds, and the wait for the day's board takes
   the same box, so the dialog never jumps. */
.eac-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 12px;
    height: 480px;
}

.eac-wait {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: var(--lara-text-secondary);
}

.eac-pane {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
}

.eac-sort {
    display: flex;
    flex: none;
    gap: 6px;
    align-items: center;
    height: 26px;
}

.eac-list {
    width: 100%;
    height: 418px;
}

.eac-group {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
}

.eac-group-count {
    color: var(--lara-text-muted);
}

/* What the dialog leaves out of the day's board: one line, the whole text in its tooltip. */
.eac-note {
    display: flex;
    flex: none;
    gap: 6px;
    align-items: center;
    min-width: 0;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.eac-note-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eac-map {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface-tint);
}

/* ReplanColumnChoiceItem */
/* A route of Add route columns in two lines: colour, number, state and times; then shift, van, driver, delivered and
   the distance at the end. The second line starts under the number. */
.eac-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.eac-line {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.eac-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.eac-number {
    flex: none;
    color: var(--lara-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--lara-font-size-dense);
    font-weight: 700;
}

.eac-time {
    flex: none;
    margin-left: auto;
    font-size: var(--lara-font-size-dense);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.eac-crew {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-left: 15px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eac-km {
    flex: none;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* AssignmentGroupHeader */
/* The header of a group of the vehicle or the driver list: its name, then how many rows it holds. */
.aci-group {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
}

.aci-group-count {
    color: var(--lara-text-muted);
}

/* AssignmentChoiceItem */
/* A row of the vehicle or the driver list: the name, then the van's type or the driver's duty that day, and where it
   stands at the end of the row. The detail gives way first when the row is narrow. */
.aci {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.aci-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aci-detail {
    flex: 0 1 auto;
    max-width: 200px;
    min-width: 0;
    overflow: hidden;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The driver's role in the shift: one width for every row, so the roles and the states line up in a column. */
.aci-role {
    display: inline-flex;
    flex: 0 0 104px;
    min-width: 0;
}

/* The route's own vehicle or driver: a bar in the primary colour before it and its name in bold, no fill, so it never
   reads as the picked row. */
.aci--current {
    padding-left: 8px;
    box-shadow: inset 3px 0 0 var(--lara-primary);
}

.aci--current .aci-name {
    font-weight: 600;
}

/* The removal of the route's own driver or vehicle, "No driver" or "No vehicle" (LA-736): its name in the red of the
   action panel's destructive rows, then what it takes off the route, which gets the room the chip of a driver has. A
   removal the route no longer takes keeps the list's grey. */
.aci-icon {
    flex: none;
    font-size: var(--lara-font-size-caption);
}

.aci--removal {
    color: #9c2c20;
}

.aci--removal .aci-name {
    flex: 0 0 auto;
    font-weight: 600;
}

.aci--removal .aci-detail {
    flex: 1 1 auto;
    max-width: none;
}

/* Picked, the removal takes the list's selection colour as every picked row does: its red cannot be read on the
   selection's navy. */
.dxbl-list-box-item-selected .aci--removal,
.dxbl-list-box-item-selected .aci--removal .aci-detail {
    color: inherit;
}

/* BestPlaceDialog */
.ebp-lead {
    margin-bottom: 8px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-dense);
}

/* The places beside the map of the picked one; both keep their box whatever is picked. */
.ebp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 12px;
    align-items: stretch;
    height: 440px;
}

.ebp-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface);
}

.ebp-place {
    display: grid;
    grid-template-columns: 20px 58px minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-top: 1px solid var(--lara-border-medium);
    background: transparent;
    color: var(--lara-text-primary);
    font: inherit;
    font-size: var(--lara-font-size-caption);
    text-align: left;
    cursor: pointer;
}

.ebp-place:first-child {
    border-top: 0;
}

.ebp-place:hover {
    background: var(--lara-surface-secondary);
}

.ebp-place--sel,
.ebp-place--sel:hover {
    background: var(--lara-primary-light);
    box-shadow: inset 3px 0 0 var(--lara-primary);
}

.ebp-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lara-surface-tint);
    font-weight: 700;
}

.ebp-rank--best {
    background: var(--lara-primary);
    color: var(--lara-text-on-dark);
}

.ebp-route {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

.ebp-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.ebp-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ebp-where {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebp-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: center;
    color: var(--lara-text-secondary);
}

.ebp-via,
.ebp-findings {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0 6px;
    border-radius: var(--lara-radius-md);
    font-weight: 600;
}

.ebp-via {
    background: var(--lara-warning-light);
    color: var(--lara-warning);
}

.ebp-findings {
    background: var(--lara-danger-light);
    color: var(--lara-danger);
}

.ebp-cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--lara-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ebp-cost-main {
    color: var(--lara-text-primary);
    font-weight: 700;
}

.ebp-map {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface-tint);
}

.ebp-muted {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

.ebp-refused {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.ebp-refused-title {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

.ebp-searching {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: var(--lara-text-secondary);
}

/* ClosedRouteBanner */
/* A card at the top of the drawer's action panel, in place of the actions; the text wraps in the panel's width. Only
   the paint tells how the route ended. */
.erb {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
}

.erb-icon {
    margin-top: 2px;
    font-size: var(--lara-font-size-title);
}

.erb-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.erb-title {
    font-size: var(--lara-font-size-body);
    font-weight: 700;
    line-height: 18px;
}

.erb-summary {
    font-size: var(--lara-font-size-dense);
    line-height: 16px;
}

.erb--finished {
    background: var(--lara-success-light);
    color: #1F7A0C;
}

.erb--ended {
    background: var(--lara-danger-light);
    color: var(--lara-danger-active);
}

.erb--cancelled {
    background: var(--lara-surface-tint);
    color: var(--lara-text-secondary);
}

/* DeliveryDetailDialog */
.edd-h {
    margin: 10px 0 2px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.edd-timeline {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.edd-timeline li {
    display: flex;
    gap: 8px;
    padding: 2px 0;
}

.edd-time {
    min-width: 40px;
    color: var(--lara-text-secondary);
    font-variant-numeric: tabular-nums;
}

.edd-muted {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

/* ExecutionEventList */
.evl {
    display: flex;
    flex-direction: column;
}

.evl-empty {
    padding: 16px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    text-align: center;
}

/* The time column holds a day and a time, "Wed 30. 12. 23:59" at the caption size being the widest (~91px). */
.evl-row {
    display: grid;
    grid-template-columns: 96px 22px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    padding: 6px 10px;
    border-bottom: 1px solid var(--lara-surface-tint);
}

.evl-row:hover {
    background: var(--lara-surface-secondary);
}

.evl-row--resolved {
    opacity: 0.6;
}

.evl-time {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 2px;
}

.evl-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lara-surface-tint);
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.evl-row--warning .evl-icon {
    background: var(--lara-warning-light);
    color: #B45309;
}

.evl-row--critical .evl-icon {
    background: var(--lara-danger-light);
    color: #C00000;
}

.evl-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.evl-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}

.evl-kind {
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
}

.evl-ref {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.evl-msg {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

/* ExecutionRouteDrawer */
/* One height chain from the drawer down: the shell beside the action panel, each as high as the drawer. */
.erd {
    display: flex;
    height: 100%;
    min-height: 0;
}

.erd-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.erd .erd-shell {
    flex: 1;
    min-height: 0;
    height: auto;
}

.erd-empty {
    flex: 1;
    padding: 24px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    text-align: center;
}

.erd-empty .erd-retry {
    margin-left: 8px;
}

.erd-late {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--lara-radius-md);
    background: var(--lara-warning-light);
    color: #B45309;
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
}

.erd-late .oi {
    font-size: var(--lara-font-size-caption);
}

.erd-stops {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: auto;
}

.erd-stops-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 12px 6px;
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

.erd-map {
    position: relative;
    height: 100%;
    min-height: 260px;
}

/* The drawer's two views (LA-742): the tab strip on the head's lower edge. */
.erd-views {
    margin: 0 -16px;
    padding: 0 8px;
}

.erd-view {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* ExecutionStopGrid: the Stops view, the grid filling the drawer's width and height. It is a size container, so an
   opened order (.eod) can take the width the drawer shows. */
.esg {
    container-type: inline-size;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 8px 12px 0;
}

.esg-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border: 2px solid var(--esg-route);
    border-radius: 11px;
    background: var(--esg-route);
    color: var(--lara-text-on-dark);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

/* A stop with a result is drawn hollow, as its marker on the map. */
.esg-mark--done {
    background: var(--lara-surface);
    color: var(--esg-route);
}

.esg-mark--depot {
    border-color: var(--lara-text-primary);
    border-radius: var(--lara-radius-md);
    background: var(--lara-text-primary);
    color: var(--lara-text-on-dark);
}

.esg-mark .oi {
    font-size: var(--lara-font-size-caption);
}

.esg-time {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* The colour rides on the dot; the time stays dark, so it reads in every colour. */
.esg-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
}

.esg-num {
    font-variant-numeric: tabular-nums;
}

.esg-late {
    color: #B45309;
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

.esg-row--done {
    color: var(--lara-text-secondary);
}

.esg-row--depot {
    background: var(--lara-surface-secondary);
}

/* The order a row of the Stops view opens (RequestDetailPanel, LA-725). The detail cell is as wide as all the columns
   together, which the property columns make wider than the drawer, so the order keeps to the width the grid shows (the
   Stops view's, less the grid's frame) and stays in view while the grid scrolls sideways. A sticky box needs a cell
   that is no scroll container: the cell clips instead of hiding its overflow as DevExpress has it. Without its side
   padding and in the grey of a warehouse row, the detail reads as part of the row above it. */
.esg .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-detail-cell {
    overflow: clip;
    padding-right: 0;
    padding-left: 0;
    background: var(--lara-surface-secondary);
}

/* The order top-left under the Status column: the inset is the arrow, tick and Stop columns as declared (45 + 50 + 72)
   and a cell's padding (5). The panel takes no padding of its own here; its blocks lay themselves out. */
.eod {
    --rdp-padding: 0;
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: min(100%, calc(100cqw - 2px));
    padding: 3px 16px 3px 172px;
    font-size: var(--lara-font-size-dense);
    line-height: 20px;
}

.eod-muted {
    padding: 6px 4px 10px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

/* A warehouse serves no order: its place, in one line. */
.eod > .eod-muted {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-dense);
}

.erd-pane {
    height: 100%;
    overflow: auto;
}

.erd-pane--padded {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    font-size: var(--lara-font-size-caption);
}

.erd-h {
    margin: 8px 0 2px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.erd-grid {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 2px 14px;
}

.erd-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}

.erd-closing .oi {
    font-size: var(--lara-font-size-caption);
}

/* VehicleCheckList: one card per check, the photos as a five-column grid */
.evc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evc-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
}

.evc-card--skipped {
    background: var(--lara-surface-secondary);
}

.evc-card--awaited {
    border-style: dashed;
}

.evc-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    font-size: var(--lara-font-size-body);
}

.evc-count {
    margin-left: auto;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-dense);
}

.evc-sub {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-dense);
}

.evc-sub:empty {
    display: none;
}

.evc-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.evc-slot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.evc-photo-button {
    display: block;
    padding: 0;
    border: none;
    border-radius: var(--lara-radius-sm);
    background: transparent;
    cursor: zoom-in;
}

.evc-photo-button:focus-visible {
    outline: 2px solid var(--lara-primary);
    outline-offset: 2px;
}

.evc-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    box-sizing: border-box;
    padding: 4px;
    border-radius: var(--lara-radius-sm);
    background: var(--lara-surface-tint);
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    text-align: center;
}

img.evc-photo {
    padding: 0;
    object-fit: cover;
}

/* hidden until it has loaded, so a photo that fails never shows the browser's broken-image icon */
.evc-photo--loading {
    opacity: 0;
}

.evc-photo--pending {
    border: 1px dashed var(--lara-border-strong);
    background: transparent;
}

.evc-caption {
    overflow: hidden;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the enlarged photo (LA-636, variant A of the photo viewer mocks, in the light of every dialog since 2026-11-04: the
   dark ground never reached the popup, DevExpress's own popup rules won, so its white controls stood on white). The
   check's facts and tools head the viewer; the photo sits in a well with the arrows on it, the strip of the check's
   photos under it. Whole page grows the dialog over the browser window and the well with it; Actual size shows the
   photo at its own pixels, scrolled in the well. */
/* Whole page: the page less the popup's own margin, and as tall as a Lara dialog gets (92vh, lara-theme.css). A class,
   because DevExpress takes a changed Width and Height of an open popup only at its next layout pass; !important beats
   the inline size it sets */
.evc-lightbox.evc-lightbox--whole-page {
    width: calc(100vw - 2 * var(--dxbl-popup-margin)) !important;
    height: min(92vh, calc(100vh - 2 * var(--dxbl-popup-margin))) !important;
}

.evc-lb {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    box-sizing: border-box;
    padding: 4px 20px 14px;
    background: var(--lara-surface);
}

.evc-lb-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    min-height: 30px;
}

.evc-lb-sub {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-dense);
}

.evc-lb-count {
    margin-left: auto;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-dense);
    font-variant-numeric: tabular-nums;
}

.evc-lb-tool {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-sm);
    background: var(--lara-surface);
    color: var(--lara-text-primary);
    font: inherit;
    font-size: var(--lara-font-size-body);
    text-decoration: none;
    cursor: pointer;
}

.evc-lb-tool:hover {
    background: var(--lara-surface-tint);
    color: var(--lara-text-primary);
}

.evc-lb-tool[aria-pressed="true"] {
    border-color: var(--lara-primary);
    color: var(--lara-primary);
}

.evc-lb-tool .oi {
    font-size: var(--lara-font-size-caption);
}

.evc-lb-stage {
    position: relative;
    display: flex;
    flex-grow: 1;
    min-height: 0;
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface-tint);
}

.evc-lb-nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--lara-border-light);
    border-radius: 50%;
    background: var(--lara-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    color: var(--lara-text-primary);
    cursor: pointer;
    transform: translateY(-50%);
}

.evc-lb-nav:hover {
    background: var(--lara-surface-tint);
}

.evc-lb-nav--prev {
    left: 12px;
}

.evc-lb-nav--next {
    right: 12px;
}

.evc-lb-frame {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 12px 64px;
    cursor: zoom-in;
}

/* Actual size: the photo's own pixels, scrolled in the well; "safe" keeps a photo larger than the well from losing
   its top and left edge to the centering */
.evc-lb-frame--actual {
    align-items: safe center;
    justify-content: safe center;
    overflow: auto;
    padding: 12px;
    cursor: zoom-out;
}

.evc-lb-image {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--lara-radius-md);
    font-size: var(--lara-font-size-body);
}

/* Fit to window: the photo fills the well, smaller or larger than its own pixels, so it grows with Whole page */
img.evc-lb-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.evc-lb-frame--actual img.evc-lb-image {
    flex: none;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}

div.evc-lb-image {
    width: 100%;
    height: 100%;
}

.evc-lb-strip {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.evc-lb-thumb {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 96px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.evc-lb-thumb .evc-photo {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.evc-lb-thumb--current .evc-photo {
    outline-color: var(--lara-primary);
}

.evc-lb-thumb--current .evc-caption {
    color: var(--lara-text-primary);
    font-weight: 700;
}

.erd-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.erd-items .oi {
    margin-right: 3px;
    font-size: var(--lara-font-size-caption);
}

.erd-ok {
    color: #1F7A0C;
}

.erd-muted {
    color: var(--lara-text-muted);
    font-weight: 400;
}

.erd-small {
    margin-top: 6px;
    font-size: var(--lara-font-size-caption);
}

/* ExecutionRouteSummary */
.ers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    font-size: var(--lara-font-size-caption);
}

.ers-head {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ers-number {
    color: var(--lara-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

.ers-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    color: var(--lara-text-secondary);
}

/* ExecutionStateChips */
.exe-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

.exe-chips .oi {
    font-size: var(--lara-font-size-caption);
}

.exe-chip-sep {
    opacity: 0.6;
}

/* ExecutionWindowPanel */
/* The picker across the panel's width, the shifts in a wrapping row under it. */
.edp {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.edp .pw-shell {
    display: flex;
    width: 100%;
}

.edp .planning-window-selector {
    width: 100%;
    min-width: 0;
}

.edp-shifts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ExecutionShiftStrip */
/* The shift tabs in the board's head, between the window and Freya's feed; they take the width left and scroll
   sideways when it is not enough. A tab names its shift, its routes and those that need the dispatcher; under that the
   hours and the orders delivered. */
.exst {
    flex: 1 1 auto;
    align-self: flex-end;
    min-width: 0;
}

.exst-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
}

.exst-tab__head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.exst-tab__sub {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.exst-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* HandoverTracker */
.hot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #DDD6FE;
    border-radius: var(--lara-radius-md);
    background: #FBFAFF;
}

.hot--incomplete {
    border-color: #F5A3A3;
    background: #FFF8F8;
}

.hot-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

.hot-title {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #6D28D9;
    font-size: var(--lara-font-size-caption);
}

.hot-where {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.hot-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hot-step {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 6px;
    align-items: start;
}

.hot-dot {
    grid-row: span 2;
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border: 1px solid #C4B5FD;
    border-radius: 50%;
    background: var(--lara-surface);
    color: var(--lara-text-on-dark);
    font-size: var(--lara-font-size-caption);
}

.hot-step--done .hot-dot {
    border-color: #7C3AED;
    background: #7C3AED;
}

.hot-label {
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
}

.hot-meta {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

.hot-by {
    color: #B45309;
}

.hot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* PunctualityBar */
.exe-pbar {
    display: flex;
    gap: 2px;
    align-items: stretch;
    width: 100%;
    min-width: 60px;
    height: 12px;
}

.exe-pbar--compact {
    height: 8px;
}

.exe-pbar-seg {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 2px;
    background: #D6DCE0;
}

.exe-pbar-seg--handover {
    flex: 0.5 1 0;
}

.exe-pbar-seg--warehouse {
    flex: 0 0 8px;
    margin-right: 3px;
}

/* The punctuality code (FRI-A-25, FRI-16): blue ahead, green on time, grey not yet, red late, black missed.
   Additions: hatched orange forecast late, violet handover step, hatched grey with a violet outline for a
   delivery waiting for its handover. A stop whose punctuality tells no time is drawn by its result: sage
   delivered or loaded, solid orange partly, black not delivered or not loaded, grey not yet. Kept in step with
   ExecutionColors, which the maps and the board legend use. */
.exe-p--pending {
    background: #D6DCE0;
}

.exe-p--ahead {
    background: #2F6FD0;
}

.exe-p--ontime {
    background: #34B416;
}

.exe-p--late {
    background: #E00000;
}

.exe-p--missed {
    background: #1F2328;
}

.exe-p--forecast {
    background: repeating-linear-gradient(135deg, #FF8800 0 3px, #FFD2A1 3px 6px);
}

.exe-p--handover {
    background: #7C3AED;
}

.exe-p--awaiting {
    background: repeating-linear-gradient(135deg, #C9CFD6 0 3px, #EEF1F4 3px 6px);
    box-shadow: inset 0 0 0 1px #7C3AED;
}

.exe-p--done {
    background: #8FB386;
}

.exe-p--partly {
    background: #FF8800;
}

/* ReplaceVehicleDialog, MeetingPlaceDialog and their MeetingPlaceCards */
/* The dialog body keeps one height while it loads and while the dispatcher picks: the map has a fixed box and the
   cards a fixed row, so nothing below them moves. The two vehicles' colours default to those of
   ExecutionColors.ReplacedVehicle and ExecutionColors.ReplacementVehicle, which the map draws with; a handover sets
   them to its two routes' colours on its body (--rvd-old, --rvd-new). */
.rvd-caption {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    margin: 6px 0 4px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.rvd-caption-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rvd-caption-name {
    margin-right: 6px;
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-dense);
    font-weight: 600;
}

.rvd-legend {
    display: inline-flex;
    flex-shrink: 0;
    gap: 10px;
}

/* a distance from one vehicle, or its name in the legend: the dot is the vehicle's colour on the map */
.rvd-km {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
}

.rvd-km::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rvd-old, #0EA5E9);
    content: "";
}

.rvd-km--new::before {
    background: var(--rvd-new, #7C3AED);
}

.rvd-map {
    position: relative;
    height: 360px;
    overflow: hidden;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface-tint);
}

/* the replacement shares its height with the strip of start cards above the map */
.rvd-map--short {
    height: 280px;
}

/* The start of the new vehicle (ReplaceVehicleDialog): the cards keep one height, the picked one holds the time below
   its card and the others stretch to it, so picking another start moves nothing. */
.rvs-cards {
    min-height: 96px;
    margin-top: 0;
}

.rvs-slot {
    flex-direction: column;
    gap: 4px;
}

.rvs-time {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    white-space: nowrap;
}

.rvs-time .rvs-time-edit {
    flex: 1;
    min-width: 0;
}

.rvs-other {
    justify-content: center;
    padding: 6px 8px;
    border: 1px dashed var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    color: var(--lara-primary);
}

.rvd-cards {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
    min-height: 64px;
    margin-top: 8px;
}

.rvd-slot {
    position: relative;
    display: flex;
    min-width: 0;
}

.rvd-card {
    display: grid;
    flex: 1;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 1px 8px;
    align-content: center;
    min-width: 0;
    min-height: 64px;
    padding: 6px 8px;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface);
    color: var(--lara-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rvd-card:hover:not(:disabled) {
    border-color: var(--lara-primary);
}

.rvd-card:disabled {
    color: var(--lara-text-muted);
    cursor: not-allowed;
}

.rvd-card--on {
    border-color: var(--lara-primary);
    background: rgba(var(--lara-primary-rgb), 0.05);
    box-shadow: inset 0 0 0 1px var(--lara-primary);
}

/* the letter of the card is the letter of its pin on the map */
.rvd-letter {
    display: inline-flex;
    grid-row: 1 / span 3;
    align-items: center;
    align-self: start;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lara-primary);
    color: var(--lara-surface);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

.rvd-letter--old {
    background: var(--rvd-old, #0EA5E9);
}

.rvd-letter--new {
    background: var(--rvd-new, #7C3AED);
}

.rvd-card-name {
    overflow: hidden;
    padding-right: 14px;
    font-size: var(--lara-font-size-body);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rvd-card-sub {
    overflow: hidden;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rvd-card-km {
    display: flex;
    gap: 10px;
    margin-top: 2px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.rvd-card-x {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--lara-radius-sm);
    background: transparent;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    cursor: pointer;
}

.rvd-card-x:hover {
    background: var(--lara-surface-tint);
    color: var(--lara-text-primary);
}

/* where the pick on the map goes until the dispatcher makes one */
.rvd-pick {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 64px;
    padding: 6px 8px;
    border: 1px dashed var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    color: var(--lara-primary);
    text-align: center;
}

.rvd-pick-name {
    font-size: var(--lara-font-size-body);
    font-weight: 600;
}

.rvd-pick-sub {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

/* The two steps of a vehicle assignment of a route without a driver (LA-710): the vehicle, then the driver. The step
   shown is in the primary colour; the vehicle step, once done, names the picked vehicle. */
.rvd-steps {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-dense);
}

.rvd-step {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.rvd-step__dot {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--lara-border-light);
    border-radius: 9px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
}

.rvd-step--on {
    color: var(--lara-primary);
    font-weight: 600;
}

.rvd-step--on .rvd-step__dot {
    border-color: var(--lara-primary);
    background: var(--lara-primary);
    color: #FFFFFF;
}

.rvd-step--done {
    color: var(--lara-text-primary);
}

.rvd-step--done .rvd-step__dot {
    border-color: var(--lara-success);
    color: var(--lara-success);
}

.rvd-steps__line {
    flex: 0 0 32px;
    height: 1px;
    background: var(--lara-border-light);
}

/* ShiftDepartureDialog */
.sdd-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sdd-lanes {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* The axis shares the lanes' columns and gutter, so its hours stand under the bars. */
.sdd-axis {
    overflow: hidden;
    scrollbar-gutter: stable;
    padding: 0;
    border-top: none;
}

.sdd-lane {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 120px;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--lara-border-light);
}

.sdd-lane:first-child {
    border-top: none;
}

.sdd-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sdd-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

.sdd-driver {
    overflow: hidden;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-dense);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sdd-track {
    position: relative;
    height: 26px;
    border-radius: var(--lara-radius-sm);
    background: var(--lara-surface-secondary);
}

.sdd-bar-plan,
.sdd-bar-new {
    position: absolute;
    min-width: 3px;
    box-sizing: border-box;
    border-radius: var(--lara-radius-sm);
}

.sdd-bar-plan {
    top: 3px;
    height: 9px;
    border: 1px dashed var(--lara-text-muted);
}

.sdd-bar-new {
    top: 14px;
    height: 9px;
    background: var(--lara-primary);
    transition: left 0.12s ease-out;
}

.sdd-times {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

.sdd-old {
    color: var(--lara-text-secondary);
}

.sdd-times .oi {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.sdd-ruler {
    position: relative;
    height: 16px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    font-variant-numeric: tabular-nums;
}

.sdd-ruler span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.sdd-ruler span:first-child {
    transform: none;
}

.sdd-ruler span:last-child {
    transform: translateX(-100%);
}

.sdd-slider {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

.sdd-caption {
    color: var(--lara-text-secondary);
}

.sdd-slider input {
    width: 100%;
    margin: 0;
    accent-color: var(--lara-primary);
    cursor: pointer;
}

/* Wide enough for the longest step, so the slider does not resize while it moves. */
.sdd-delta {
    min-width: 120px;
    padding: 2px 10px;
    border-radius: var(--lara-radius-pill);
    background: var(--lara-primary-light);
    color: var(--lara-primary);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sdd-delta-none {
    background: var(--lara-surface-secondary);
    color: var(--lara-text-secondary);
}

.sdd-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-dense);
}

.sdd-legend span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.sdd-key-plan,
.sdd-key-new {
    display: inline-block;
    width: 18px;
    height: 8px;
    box-sizing: border-box;
    border-radius: var(--lara-radius-sm);
}

.sdd-key-plan {
    border: 1px dashed var(--lara-text-muted);
}

.sdd-key-new {
    background: var(--lara-primary);
}

/* SendToDriverDialog (LA-636): the vehicle check of the send as three cards, the strip of what the driver gets and a
   hint. The cards, the strip and the hint keep their size in every state, so a pick only repaints. */
.std-routes {
    margin-top: 8px;
}

.std-check {
    margin-top: 12px;
}

.std-check-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 6px;
}

.std-caption {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.std-clear {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lara-primary);
    font: inherit;
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
    cursor: pointer;
}

.std-clear--hidden {
    visibility: hidden;
}

.std-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.std-card {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    min-height: 62px;
    padding: 9px 10px;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface);
    color: var(--lara-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.std-card:hover {
    border-color: #A9B4BE;
}

.std-card:focus-visible {
    outline: 2px solid var(--lara-primary);
    outline-offset: 1px;
}

.std-card--on,
.std-card--on:hover {
    border-color: var(--lara-primary);
    background: rgba(var(--lara-primary-rgb), 0.06);
    box-shadow: inset 0 0 0 1px var(--lara-primary);
}

.std-radio {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    box-sizing: border-box;
    border: 1.5px solid #A19F9D;
    border-radius: 50%;
    background: var(--lara-surface);
}

.std-card--on .std-radio {
    border-color: var(--lara-primary);
}

.std-card--on .std-radio::after {
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: var(--lara-primary);
    content: "";
}

/* A long word wraps inside its card instead of running over the next one. */
.std-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.std-card-name {
    font-size: var(--lara-font-size-body);
    font-weight: 600;
}

.std-card--on .std-card-name {
    color: var(--lara-primary);
}

.std-card-detail {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    line-height: 1.35;
}

.std-app {
    margin-top: 10px;
    padding: 9px 12px 10px;
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface-tint);
}

.std-app-head {
    margin-bottom: 8px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.std-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.std-step,
.std-stops {
    display: inline-flex;
    flex: none;
    gap: 5px;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
    white-space: nowrap;
}

.std-step {
    border: 1px dashed #B5BEC6;
    color: var(--lara-text-muted);
}

.std-step--on {
    border: 1px solid #216025;
    background: #E7F1E8;
    color: #216025;
}

.std-stops {
    background: var(--lara-surface);
    color: var(--lara-text-primary);
}

.std-step .oi,
.std-arrow {
    font-size: var(--lara-font-size-caption);
}

.std-arrow {
    color: #A3ADB6;
}

.std-hint {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    min-height: 32px;
    margin-top: 8px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    line-height: 1.45;
}

.std-hint .oi {
    margin-top: 2px;
    font-size: var(--lara-font-size-caption);
}

/* StopResultLegend */
/* One line of swatches, never wrapping: the toolbar it sits in keeps its height whatever the width. */
.exe-legend {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    overflow: hidden;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    white-space: nowrap;
}

.exe-legend-item {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.exe-legend-swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
}

/* WaitingRoomList */
.wrl-empty {
    padding: 16px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    text-align: center;
}

.wrl-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface);
    cursor: pointer;
}

.wrl-card:hover {
    border-color: #B9C3CD;
}

.wrl-head {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.wrl-order {
    color: var(--lara-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--lara-font-size-caption);
}

.wrl-age {
    margin-left: auto;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    white-space: nowrap;
}

.wrl-who {
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

.wrl-addr,
.wrl-note,
.wrl-orig {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.wrl-orig {
    color: #6D28D9;
}

.wrl-note {
    font-style: italic;
}

.wrl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.wrl-window {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    color: var(--lara-primary);
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
}

.wrl-window .oi {
    font-size: var(--lara-font-size-caption);
}

.wrl-where {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

.wrl-where .oi {
    font-size: var(--lara-font-size-caption);
}

.wrl-where--warehouse {
    color: #1F7A0C;
}

.wrl-where--van {
    color: #6D28D9;
}

.wrl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* ZoneBoxes */
.exe-zones {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.exe-zones-none {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

.exe-zone-key {
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
    opacity: 0.75;
}

/* ExecutionBoard */
/* The board fills the content area: its head, then the form layout, which holds every panel of the board. */
.exb {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The head over the layout: the window, the shift tabs, then the events and Freya's feed at its end. */
.exb-head {
    display: flex;
    flex: none;
    gap: 12px;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 4px 8px 0;
    background: var(--lara-surface);
}

.exb-head__window {
    flex: 0 0 280px;
    min-width: 0;
}

.exb-head__grow {
    flex: 1;
}

.exb-head__feed {
    display: flex;
    flex: none;
    gap: 4px;
    align-items: center;
}

/* An item of the feed is the line the action panel's Open group had, here as wide as its text. */
.exb .exb-head__feed .lara-action-option {
    width: auto;
    height: 32px;
    border-bottom: 0;
    border-radius: 6px;
    white-space: nowrap;
}

/* Takes the rest of the column: the form layout. */
.exb-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Holds the form layout; positioned, so a failure note covers exactly the layout and leaves the head usable. */
.exb-main {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.exb .exb-layout {
    flex: 1;
    min-height: 0;
}

/* The actions on the picked routes, a panel of the layout: it scrolls when the rows outgrow it. */
.exb-actions {
    height: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    overflow-y: auto;
}

.exb-empty {
    padding: 32px;
    color: var(--lara-text-muted);
    text-align: center;
}

.exb-number {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

.exb-route-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.exb-progress {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
    min-width: 0;
}

.exb-progress-count {
    flex: none;
    font-size: var(--lara-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--lara-text-muted);
}

.exb-two {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

/* a badge over a line (the duty's role over its time) keeps its own width */
.exb-two > .lara-badge {
    align-self: flex-start;
}

.exb-strong {
    color: var(--lara-text-primary);
    font-weight: 600;
}

.exb-muted {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

/* the scanner phone of a route's latest login; a device name without a phone in the warning tone */
.exe-scanner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
    white-space: nowrap;
}

.exe-scanner .oi {
    font-size: var(--lara-font-size-caption);
}

.exe-scanner--no-phone {
    color: var(--lara-warning);
}

/* a value longer than its column, such as a vehicle class's label: cut, with the whole in the tooltip */
.exb-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exb-num {
    font-variant-numeric: tabular-nums;
}

.exb-late {
    color: #C00000;
    font-weight: 700;
}

.exb-rail-pane {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    min-height: 0;
    padding: 8px;
    overflow: auto;
}

.exb-rail-actions {
    display: flex;
    justify-content: flex-end;
}

/* A group header: what the routes have in common and how many there are. The group row itself keeps the
   grid's own height and header tone; only the text and the count pill are painted here. */
.exb-group {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.exb-group--alert {
    color: var(--lara-danger-active);
}

.exb-group-count {
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--lara-radius-pill);
    background: var(--lara-surface);
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

/* A closed route takes no more changes, so its row recedes: a solid grey under the zebra tint and secondary
   text. Hover and selection still paint over it, so the row answers the pointer like any other. Paint only:
   nothing here changes a size. The text colour needs !important because the theme forces the cell colour. A driver
   in the Drivers tab whom the roster keeps off routes, or whose timeline blocks the time, recedes the same way. */
.exb .dxbl-grid-table > tbody > tr.exb-row--closed:not(:hover):not(.dxbl-grid-selected-row):not(.dxbl-grid-focused-row) > td,
.exb .dxbl-grid-table > tbody > tr.exb-row--off:not(:hover):not(.dxbl-grid-selected-row):not(.dxbl-grid-focused-row) > td {
    background-color: var(--lara-surface-tint);
}

.exb .dxbl-grid-table > tbody > tr.exb-row--closed > td,
.exb .dxbl-grid-table > tbody > tr.exb-row--off > td {
    color: var(--lara-text-secondary) !important;
}

.exb tr.exb-row--closed .exb-number,
.exb tr.exb-row--closed .exb-strong,
.exb tr.exb-row--off .exb-strong {
    color: var(--lara-text-secondary);
}

/* ExecutionEvents */
/* The grid fills the content area beside the action panel; the page has no ribbon. */
.eev {
    display: flex;
    height: 100%;
    min-height: 0;
}

.eev-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.eev .eev-layout {
    flex: 1;
    min-height: 0;
}

/* The toolbar and the grid fill the layout's cell, as on the Board. LaraGrid's container grows as a flex item
   (flex: 1) and sets no height of its own, so its parent is a flex column; in a block it would stop at its last row. */
.eev-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.eev-num {
    font-variant-numeric: tabular-nums;
}

/* What happened, after its icon; the icon's tint says how much attention the report asks for. */
.eev-kind {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.eev-icon {
    display: inline-flex;
    flex: none;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lara-surface-tint);
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
}

.eev-kind--warning .eev-icon {
    background: var(--lara-warning-light);
    color: #B45309;
}

.eev-kind--critical .eev-icon {
    background: var(--lara-danger-light);
    color: #C00000;
}

.eev-route {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

.eev-msg {
    color: var(--lara-text-secondary);
}

/* A resolved report takes no more decisions, so its row recedes: a solid grey under the zebra tint and secondary
   text, as a closed route on the Board. Hover and selection still paint over it. Paint only: nothing here changes a
   size. The text colour needs !important because the theme forces the cell colour. */
.eev .dxbl-grid-table > tbody > tr.eev-row--resolved:not(:hover):not(.dxbl-grid-selected-row):not(.dxbl-grid-focused-row) > td {
    background-color: var(--lara-surface-tint);
}

.eev .dxbl-grid-table > tbody > tr.eev-row--resolved > td {
    color: var(--lara-text-secondary) !important;
}

/* ReplanWorkspace */
.erw-ribbon {
    flex-shrink: 0;
}

.erw-spacer {
    flex: 1;
}

.erw {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--lara-surface-tint);
}

.erw-muted {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

.erw-empty {
    padding: 40px;
    color: var(--lara-text-muted);
    text-align: center;
}

.erw-body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 8px;
}

.erw-body--busy {
    cursor: progress;
}

.erw-body--busy .erw-columns,
.erw-body--busy .erw-lane {
    opacity: 0.75;
}

.erw-columns {
    display: grid;
    flex: 1;
    gap: 8px;
    min-height: 0;
    overflow-x: auto;
}

.erw-col,
.erw-map,
.erw-lane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface);
    overflow: hidden;
}

.erw-col {
    border-top: 3px solid var(--erw-route, var(--lara-primary));
}

.erw-map {
    position: relative;
    min-height: 260px;
}

.erw-col-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--lara-border-medium);
}

.erw-col-line {
    display: flex;
    gap: 8px;
    align-items: center;
}

.erw-col-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--erw-route, var(--lara-primary));
}

.erw-col-label {
    color: var(--lara-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--lara-font-size-dense);
    font-weight: 700;
}

.erw-col-meta {
    overflow: hidden;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erw-col-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* A column a previewed change touches: its route as the change would leave it. The preview changes paint only:
   the tag and the close button trade visibility, and the summary keeps its one line. */
.erw-col--preview {
    box-shadow: 0 0 0 2px var(--lara-primary-light);
}

.erw-col-sum {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 19px;
    min-width: 0;
    overflow: hidden;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.erw-col-sum .lara-badge {
    flex: none;
}

.erw-col-sum-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erw-preview-tag {
    padding: 1px 7px;
    border-radius: 8px;
    background: var(--lara-primary);
    color: var(--lara-text-on-dark);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
    visibility: hidden;
}

.erw-col--preview .erw-preview-tag {
    visibility: visible;
}

/* No gesture runs while a change is previewed: the close buttons keep their boxes and rest. The rows rest in their data:
   a row drags from anywhere on it, so only a held row (ReplanWorkspace.LadderOf) is one that cannot. */
.erw-columns--preview .erw-col-close {
    pointer-events: none;
    visibility: hidden;
}

/* Best place… while the server searches: the icon turns, the item keeps its text and width. */
.erw-ribbon .erw-spin {
    animation: erw-spin 1.2s linear infinite;
}

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

/* The change while the dispatcher decides on it: a bar floating over the lane, so the columns and the lane keep
   their place. */
.erw-preview {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 5;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-height: 45%;
    padding: 10px 14px;
    overflow-y: auto;
    border: 1px solid var(--lara-border-light);
    border-radius: 8px;
    background: var(--lara-surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.erw-preview-icon {
    padding-top: 2px;
    color: var(--lara-primary);
    font-size: var(--lara-font-size-title);
}

.erw-preview-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.erw-preview-title {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-body);
    font-weight: 700;
}

.erw-preview-summary {
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-weight: 400;
}

.erw-preview-routes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--lara-text-secondary);
    font-size: var(--lara-font-size-caption);
    font-variant-numeric: tabular-nums;
}

.erw-preview-route {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}

.erw-preview-findings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--lara-font-size-caption);
}

.erw-preview-finding {
    display: flex;
    gap: 6px;
    align-items: baseline;
    color: var(--lara-text-primary);
}

.erw-preview-finding .oi {
    color: var(--lara-warning);
}

.erw-preview-finding--fatal .oi,
.erw-preview-finding--fatal .erw-preview-severity {
    color: var(--lara-danger);
}

.erw-preview-severity {
    font-weight: 700;
    text-transform: uppercase;
}

.erw-preview-note {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

.erw-preview-actions {
    display: flex;
    flex: none;
    gap: 8px;
    align-items: center;
    align-self: center;
}

.erw-lane {
    flex: none;
    max-height: 190px;
}

.erw-lane-head {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--lara-border-medium);
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-caption);
    font-weight: 700;
}

.erw-lane-head .oi {
    color: var(--lara-text-muted);
    font-size: var(--lara-font-size-caption);
}

.erw-lane-body {
    flex: 1;
    min-height: 60px;
    overflow: auto;
}

/* WaitingRoom */
/* The list and the map beside the action panel; the page has no ribbon. */
.ewr {
    display: flex;
    height: 100%;
    min-height: 0;
}

.ewr-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.ewr .ewr-layout {
    flex: 1;
    min-height: 0;
}

.ewr-scroll {
    height: 100%;
    min-height: 0;
    padding: 8px;
    overflow: auto;
}