836 lines
19 KiB
CSS
836 lines
19 KiB
CSS
/* ══ Dispatch (xpressconsole Design Implementation) ═════════════════════════
|
|
Curated palette with deep purple/indigo accents (#662582), glassmorphic elements,
|
|
live telemetry cards and interactive map timelines. */
|
|
|
|
/* ── Dispatch's palette is now the console's ────────────────────────────────
|
|
|
|
These fourteen names are kept, and every one of them is an ALIAS. About
|
|
fifty rules in this file reference them, so pointing the names at the shared
|
|
tokens restyles the whole page at once — and, more to the point, makes it
|
|
impossible for Dispatch to drift away from the rest of the console again.
|
|
|
|
It had drifted. This file arrived as a port of another product and brought
|
|
that product's palette with it: `#e2e8f0` for a hairline where the console
|
|
uses `#e0e4ea`, `#1e293b` for body text where the console uses `#0f172a`,
|
|
`#f8fafc` for a sunken fill against the console's `#fafbfc`. Each is a
|
|
shade off the real token — close enough to look like a rendering
|
|
inconsistency rather than a decision, and far enough that a Dispatch card
|
|
beside a Console card were visibly two different whites.
|
|
|
|
The two shadow steps are now the card's, which is to say nothing at all.
|
|
`--dispatch-shadow-lg` is referenced by no rule in this file and is gone
|
|
rather than aliased. */
|
|
:root {
|
|
--dispatch-bg: var(--color-surface);
|
|
--dispatch-bg-sub: var(--color-surface-subtle);
|
|
--dispatch-card-bg: var(--card-bg);
|
|
--dispatch-border: var(--color-line);
|
|
--dispatch-border-active: var(--color-brand);
|
|
--dispatch-text: var(--color-ink-1);
|
|
--dispatch-text-muted: var(--color-ink-3);
|
|
--dispatch-accent: var(--color-brand);
|
|
--dispatch-accent-light: #9255ab;
|
|
--dispatch-accent-soft: color-mix(in oklab, var(--color-brand) 8%, transparent);
|
|
--dispatch-success: var(--color-success, #1f9d55);
|
|
--dispatch-warning: var(--color-warning, #b7860b);
|
|
--dispatch-error: var(--color-error, #d64545);
|
|
--dispatch-shadow-sm: var(--card-shadow);
|
|
--dispatch-shadow-md: var(--card-shadow);
|
|
}
|
|
|
|
.dispatch-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
width: 100%;
|
|
color: var(--dispatch-text);
|
|
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
}
|
|
|
|
/* ── Top Operations Header (xpressconsole #hdr) ─────────────────────────────
|
|
|
|
GONE, because it was never rendered.
|
|
|
|
This file arrived as a port of another product, and it brought that
|
|
product's whole operations header with it: `.dispatch-header`, a logo lockup,
|
|
a city picker, a demo/live toggle, a live-GPS chip, a running clock, and
|
|
`.date-chip` — a pill with prev/next arrows for stepping through days.
|
|
|
|
Not one of those class names appears in any markup in this repository. The
|
|
Dispatch page reads the date from `useDateScope()`, which is the range
|
|
picker in the app's own top bar; two comments in `DispatchPage.tsx` already
|
|
tell the reader to "change the date range in the top bar". So the header was
|
|
215 lines of CSS for a component that does not exist, and `.date-chip` was a
|
|
date filter nobody can see.
|
|
|
|
If the ported header is wanted later it is in the git history, but it would
|
|
need rebuilding against this console's own controls rather than restoring:
|
|
the date range, the branch scope and the account menu are all in the app
|
|
shell, and a second set of them on one page is the drift this pass has been
|
|
removing everywhere else. */
|
|
|
|
|
|
/* ── Strategy & View Mode Bar (xpressconsole #strat-row) ───────────────────── */
|
|
.strat-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 6px 12px;
|
|
min-height: 42px;
|
|
background: var(--dispatch-card-bg);
|
|
border: 1px solid var(--dispatch-border);
|
|
border-radius: var(--card-radius);
|
|
box-shadow: var(--dispatch-shadow-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.strat-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.strat-ops-cluster {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.sbt {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 11px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--dispatch-border);
|
|
background: var(--dispatch-bg);
|
|
color: var(--dispatch-text-muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.sbt:hover {
|
|
background: var(--dispatch-bg-sub);
|
|
color: var(--dispatch-text);
|
|
border-color: rgba(102, 37, 130, 0.3);
|
|
}
|
|
|
|
.sbt.active {
|
|
background: var(--dispatch-accent);
|
|
border-color: var(--dispatch-accent);
|
|
color: #ffffff;
|
|
box-shadow: 0 3px 10px rgba(102, 37, 130, 0.25);
|
|
}
|
|
|
|
.sbt-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sbt-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
border-radius: 999px;
|
|
background: var(--dispatch-bg-sub);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-text);
|
|
}
|
|
|
|
.sbt.active .sbt-badge {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.sbt-dot-live {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #22c55e;
|
|
animation: pulse-ring 1.5s infinite;
|
|
}
|
|
|
|
/* Wave / Batch Slots */
|
|
/* No KPI overrides.
|
|
The shared `.kpi-grid` and `KpiCard` are what every other page uses. This
|
|
file used to re-grid them at minmax(180px) and force a 74px min-height and
|
|
8px padding with !important, which is the only reason the dispatch cards
|
|
looked unlike the ones on Sales. */
|
|
|
|
/* ── Main Operations Workspace ────────────────────────────────────────────── */
|
|
.dispatch-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (min-width: 1050px) {
|
|
.dispatch-body {
|
|
grid-template-columns: 310px minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.dispatch-rail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dispatch-main {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Rail Search and Filter */
|
|
.rail-search-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.rail-search-box .search-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
color: var(--dispatch-text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rail-search-input {
|
|
width: 100%;
|
|
padding: 8px 30px 8px 32px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--dispatch-border);
|
|
background: #ffffff;
|
|
font-size: 12.5px;
|
|
font-family: inherit;
|
|
color: var(--dispatch-text);
|
|
outline: none;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.rail-search-input:focus {
|
|
border-color: var(--dispatch-accent);
|
|
box-shadow: 0 0 0 3px var(--dispatch-accent-soft);
|
|
}
|
|
|
|
.search-clear-btn {
|
|
position: absolute;
|
|
right: 8px;
|
|
background: none;
|
|
border: 0;
|
|
font-size: 16px;
|
|
color: var(--dispatch-text-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rail-filter-chips {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
overflow-x: auto;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.filter-pill {
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--dispatch-border);
|
|
background: #ffffff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--dispatch-text-muted);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.filter-pill:hover {
|
|
background: var(--dispatch-bg-sub);
|
|
color: var(--dispatch-text);
|
|
}
|
|
|
|
.filter-pill.active {
|
|
background: var(--dispatch-accent-soft);
|
|
border-color: rgba(102, 37, 130, 0.35);
|
|
color: var(--dispatch-accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Rail Group Cards (xpressconsole rcard design) ────────────────────────── */
|
|
.group-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dispatch-container .rcard,
|
|
.rcard {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--dispatch-border);
|
|
border-radius: var(--card-radius);
|
|
padding: 14px 16px;
|
|
cursor: pointer;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
text-align: left;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Hover is the line, not a lift -- see the note on `.pcard` in index.css. */
|
|
.dispatch-container .rcard:hover,
|
|
.rcard:hover {
|
|
border-color: var(--dispatch-accent);
|
|
}
|
|
|
|
.dispatch-container .rcard.is-focused,
|
|
.dispatch-container .rcard[data-active='true'],
|
|
.rcard.is-focused,
|
|
.rcard[data-active='true'] {
|
|
border-color: var(--dispatch-accent);
|
|
background: linear-gradient(180deg, #ffffff, rgba(102, 37, 130, 0.02));
|
|
box-shadow: 0 0 0 2px var(--dispatch-accent), 0 8px 20px rgba(102, 37, 130, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.dispatch-container .rcard[data-urgent='true'],
|
|
.rcard[data-urgent='true'] {
|
|
border-color: #fca5a5;
|
|
background: #fffafa;
|
|
}
|
|
|
|
.dispatch-container .rcard-top,
|
|
.rcard-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dispatch-container .rcard-emo,
|
|
.rcard-emo {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
border: 1.5px solid var(--dispatch-border);
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.dispatch-container .rcard:hover .rcard-emo,
|
|
.rcard:hover .rcard-emo {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.dispatch-container .rcard-info,
|
|
.rcard-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dispatch-container .rcard-name,
|
|
.rcard-name {
|
|
font-size: 14.5px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.dispatch-container .rcard-zone,
|
|
.rcard-zone {
|
|
font-size: 12px;
|
|
color: var(--dispatch-text-muted);
|
|
margin-top: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dispatch-container .rcard-badge,
|
|
.rcard-badge {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 3px 9px;
|
|
border-radius: 8px;
|
|
background: var(--dispatch-bg-sub);
|
|
color: #475569;
|
|
font-variant-numeric: tabular-nums;
|
|
font-feature-settings: 'tnum';
|
|
white-space: nowrap;
|
|
border: 1px solid var(--dispatch-border);
|
|
}
|
|
|
|
/* All deliveries done — flip to green so it pops vs the per-rider tint */
|
|
.dispatch-container .rcard-badge.is-done,
|
|
.rcard-badge.is-done {
|
|
background: rgba(22, 163, 74, 0.12) !important;
|
|
color: #16a34a !important;
|
|
border-color: rgba(22, 163, 74, 0.3) !important;
|
|
}
|
|
|
|
.dispatch-container .bar-bg,
|
|
.bar-bg {
|
|
background: var(--dispatch-bg-sub);
|
|
border-radius: 4px;
|
|
height: 5px;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dispatch-container .bar-fg,
|
|
.bar-fg {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.dispatch-container .rcard-meta,
|
|
.rcard-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: var(--dispatch-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dispatch-container .rcard-meta span,
|
|
.rcard-meta span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.dispatch-container .rcard-est-meters,
|
|
.rcard-est-meters {
|
|
color: #0284c7;
|
|
font-weight: 600;
|
|
background: rgba(2, 132, 199, 0.08);
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dispatch-container .step-ids,
|
|
.step-ids {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.dispatch-container .step-id,
|
|
.step-id {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
background: var(--dispatch-bg-sub);
|
|
color: var(--dispatch-text-muted);
|
|
border: 1px solid var(--dispatch-border);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dispatch-container .step-id.is-done,
|
|
.step-id.is-done {
|
|
background: rgba(22, 163, 74, 0.08);
|
|
color: #16a34a;
|
|
border-color: rgba(22, 163, 74, 0.25);
|
|
}
|
|
|
|
.dispatch-container .step-id-more,
|
|
.step-id-more {
|
|
background: var(--dispatch-accent-soft);
|
|
color: var(--dispatch-accent);
|
|
border-color: rgba(102, 37, 130, 0.2);
|
|
}
|
|
|
|
/* ── Main Area Cards & Map Header ─────────────────────────────────────────── */
|
|
.dispatch-card-elevated,
|
|
.dispatch-focus-card,
|
|
.dispatch-map-card {
|
|
background: var(--card-bg) !important;
|
|
border: var(--card-border) !important;
|
|
border-radius: var(--card-radius) !important;
|
|
box-shadow: var(--card-shadow) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Focused Rider Live Summary Bar */
|
|
.group-detail-avatar {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-weight: 800;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rider-phone-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--dispatch-accent);
|
|
background: var(--dispatch-accent-soft);
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.focus-metrics-cluster {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.focus-pill {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 6px 12px;
|
|
border-radius: 10px;
|
|
background: var(--dispatch-bg-sub);
|
|
border: 1px solid var(--dispatch-border);
|
|
color: var(--dispatch-text);
|
|
}
|
|
|
|
.focus-pill.value {
|
|
background: var(--dispatch-accent-soft);
|
|
border-color: rgba(102, 37, 130, 0.25);
|
|
color: var(--dispatch-accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.rider-live-summary-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
background: var(--dispatch-bg-sub);
|
|
border: 1px solid var(--dispatch-border);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
|
|
.rl-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.rl-label {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.rl-val {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-text);
|
|
}
|
|
|
|
.status-badge-live {
|
|
color: var(--dispatch-success) !important;
|
|
}
|
|
|
|
/* ── Stop Sequence Timeline Carousel (under Map) ──────────────────────────── */
|
|
.round-timeline-section,
|
|
.stops-quick-carousel-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--dispatch-border);
|
|
}
|
|
|
|
.timeline-section-head,
|
|
.quick-carousel-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-accent);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.timeline-cards-row,
|
|
.stops-timeline-carousel {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.timeline-step-card,
|
|
.stop-timeline-card {
|
|
flex: 0 0 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--card-radius);
|
|
border: 1px solid var(--dispatch-border);
|
|
background: var(--card-bg);
|
|
cursor: pointer;
|
|
transition: border-color 0.18s ease, background 0.18s ease;
|
|
}
|
|
|
|
.timeline-step-card:hover,
|
|
.stop-timeline-card:hover {
|
|
border-color: var(--dispatch-accent);
|
|
}
|
|
|
|
.timeline-step-card.is-current {
|
|
border-color: var(--dispatch-accent);
|
|
background: linear-gradient(180deg, #ffffff, rgba(102, 37, 130, 0.04));
|
|
box-shadow: 0 0 0 2px var(--dispatch-accent);
|
|
}
|
|
|
|
.tsc-head,
|
|
.stop-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tsc-num,
|
|
.stop-seq-badge {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: var(--dispatch-accent);
|
|
background: var(--dispatch-accent-soft);
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.tsc-status,
|
|
.stop-card-status {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.tsc-body,
|
|
.stop-card-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.tsc-cust,
|
|
.stop-card-body strong {
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tsc-addr,
|
|
.stop-card-addr {
|
|
font-size: 11px;
|
|
color: var(--dispatch-text-muted);
|
|
line-height: 1.35;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tsc-foot,
|
|
.stop-card-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding-top: 6px;
|
|
border-top: 1px dashed var(--dispatch-border);
|
|
}
|
|
|
|
.tsc-val,
|
|
.stop-val {
|
|
color: var(--dispatch-accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tsc-order {
|
|
color: var(--dispatch-text-muted);
|
|
}
|
|
|
|
.stop-eta {
|
|
color: var(--dispatch-success);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Loading and Empty Rail States */
|
|
.rail-loading-state,
|
|
.rail-empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
gap: 8px;
|
|
color: var(--dispatch-text-muted);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.spin-icon {
|
|
animation: spin 1s linear infinite;
|
|
color: var(--dispatch-accent);
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ── Stops Table Styling ─────────────────────────────────────────────────── */
|
|
.table-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.stops-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.stops-table th {
|
|
text-align: left;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid var(--dispatch-border);
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stops-table td {
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.stops-table tbody tr {
|
|
cursor: pointer;
|
|
transition: background 0.12s;
|
|
}
|
|
|
|
.stops-table tbody tr:hover {
|
|
background: var(--dispatch-bg-sub);
|
|
}
|
|
|
|
.stops-table td strong {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--dispatch-text);
|
|
}
|
|
|
|
.stops-table td span {
|
|
display: block;
|
|
font-size: 11.5px;
|
|
color: var(--dispatch-text-muted);
|
|
max-width: 240px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stops-table td.num {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stop-status {
|
|
display: inline-flex;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: capitalize;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Auto-assign Banner ──────────────────────────────────────────────────── */
|
|
.aa-launch {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 12px 14px;
|
|
border: 1px solid rgba(102, 37, 130, 0.25);
|
|
border-radius: var(--card-radius);
|
|
background: linear-gradient(135deg, rgba(102, 37, 130, 0.06), rgba(146, 85, 171, 0.03));
|
|
}
|
|
|
|
.aa-launch span {
|
|
flex: 1 1 260px;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
color: var(--dispatch-text);
|
|
}
|
|
|
|
.aa-launch-btn {
|
|
display: inline-flex;
|
|
gap: 7px;
|
|
align-items: center;
|
|
flex: none;
|
|
height: 34px;
|
|
padding: 0 16px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: var(--dispatch-accent);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
box-shadow: 0 3px 10px rgba(102, 37, 130, 0.25);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.aa-launch-btn:hover {
|
|
background: #501b67;
|
|
transform: translateY(-1px);
|
|
}
|