@fleetbase/fleetops-engine 0.6.38 → 0.6.40

package/addon/styles/fleetops-engine.css

@@ -1851,3 +1851,1661 @@ body[data-theme='dark'] .positions-replay-component .metric-card:hover {
     height: 40px;
     flex-shrink: 0;
 }
+
+/* Scheduling: Availability Type Toggle Buttons */
+.availability-type-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 0;
+    border-radius: 0.5rem;
+    border: 1px solid;
+    font-size: 0.75rem;
+    font-weight: 500;
+    transition:
+        color 0.15s,
+        background-color 0.15s,
+        border-color 0.15s;
+    cursor: pointer;
+}
+
+.availability-type-btn.is-unselected {
+    background-color: #fff;
+    border-color: #d1d5db;
+    color: #4b5563;
+}
+
+body[data-theme='dark'] .availability-type-btn.is-unselected {
+    background-color: #1f2937;
+    border-color: #4b5563;
+    color: #9ca3af;
+}
+
+.availability-type-btn.is-selected-available {
+    background-color: #f0fdf4;
+    border-color: #22c55e;
+    color: #15803d;
+}
+
+body[data-theme='dark'] .availability-type-btn.is-selected-available {
+    background-color: #14532d;
+    border-color: #4ade80;
+    color: #bbf7d0;
+}
+
+.availability-type-btn.is-selected-unavailable {
+    background-color: #fef2f2;
+    border-color: #ef4444;
+    color: #b91c1c;
+}
+
+body[data-theme='dark'] .availability-type-btn.is-selected-unavailable {
+    background-color: #7f1d1d;
+    border-color: #f87171;
+    color: #fecaca;
+}
+
+/* Scheduling: Shift Chip in Driver Calendar (ember-ui Badge info style) */
+
+.driver-schedule-shift-chip {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: 0.25rem;
+    margin-bottom: 0.25rem;
+    padding: 0.25rem 0.375rem;
+    font-size: 0.7rem;
+    line-height: 1.3;
+    border: 1px solid #bfdbfe;
+    background-color: #eff6ff;
+    color: #1e40af;
+}
+
+body[data-theme='dark'] .driver-schedule-shift-chip {
+    background-color: #1e3a5f;
+    border-color: #3b82f6;
+    color: #93c5fd;
+}
+
+.driver-schedule-shift-chip .shift-chip-time {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.driver-schedule-shift-chip .shift-chip-actions {
+    display: flex;
+    gap: 0.125rem;
+    margin-top: 0.125rem;
+}
+
+.driver-schedule-shift-chip .shift-chip-action-btn {
+    padding: 0.125rem;
+    border-radius: 0.25rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    line-height: 1;
+    opacity: 0.7;
+    transition: opacity 0.15s;
+}
+
+.driver-schedule-shift-chip .shift-chip-action-btn:hover {
+    opacity: 1;
+}
+
+.driver-schedule-shift-chip .shift-chip-action-btn.edit {
+    color: #2563eb;
+}
+
+body[data-theme='dark'] .driver-schedule-shift-chip .shift-chip-action-btn.edit {
+    color: #93c5fd;
+}
+
+.driver-schedule-shift-chip .shift-chip-action-btn.delete {
+    color: #dc2626;
+}
+
+body[data-theme='dark'] .driver-schedule-shift-chip .shift-chip-action-btn.delete {
+    color: #fca5a5;
+}
+
+/* Fleet Calendar FullCalendar Overrides */
+
+#fleet-ops-fleet-schedule-container .fc {
+    font-size: 0.75rem;
+    font-family: inherit;
+}
+
+#fleet-ops-fleet-schedule-container .fc-theme-standard td,
+#fleet-ops-fleet-schedule-container .fc-theme-standard th,
+#fleet-ops-fleet-schedule-container .fc-theme-standard .fc-scrollgrid {
+    border-color: #e5e7eb;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-theme-standard td,
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-theme-standard th,
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-theme-standard .fc-scrollgrid {
+    border-color: #374151;
+}
+
+#fleet-ops-fleet-schedule-container .fc-col-header-cell {
+    background-color: #f9fafb;
+    font-weight: 600;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-col-header-cell {
+    background-color: #111827;
+    color: #9ca3af;
+}
+
+#fleet-ops-fleet-schedule-container .fc-resource-area .fc-cell-text {
+    font-weight: 500;
+    font-size: 0.75rem;
+    color: #111827;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-resource-area .fc-cell-text {
+    color: #f3f4f6;
+}
+
+#fleet-ops-fleet-schedule-container .fc-resource-area th {
+    background-color: #f9fafb;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-resource-area th {
+    background-color: #111827;
+}
+
+#fleet-ops-fleet-schedule-container .fc-timeline-lane {
+    background-color: #fff;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-timeline-lane {
+    background-color: #1f2937;
+}
+
+#fleet-ops-fleet-schedule-container .fc-timeline-slot.fc-day-today {
+    background-color: #eff6ff;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-timeline-slot.fc-day-today {
+    background-color: #1e3a5f;
+}
+
+#fleet-ops-fleet-schedule-container .fc-event {
+    border-radius: 0.25rem;
+    border: none;
+    font-size: 0.7rem;
+    font-weight: 500;
+    padding: 0.1rem 0.35rem;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 8%);
+}
+
+#fleet-ops-fleet-schedule-container .fc-event:hover {
+    filter: brightness(0.95);
+}
+
+#fleet-ops-fleet-schedule-container .fc-timeline-slot-label {
+    font-size: 0.65rem;
+    color: #9ca3af;
+    padding: 0 0.25rem;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-timeline-slot-label {
+    color: #6b7280;
+}
+
+#fleet-ops-fleet-schedule-container .fc-scrollgrid {
+    border-radius: 0.5rem;
+    overflow: hidden;
+    border: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] #fleet-ops-fleet-schedule-container .fc-scrollgrid {
+    border-color: #374151;
+}
+
+/* ============================================================
+   @event-calendar/core - Fleetbase Scheduler Overrides
+   ============================================================ */
+
+/* Light-mode variable overrides */
+#fleet-ops-scheduler-timeline .ec {
+    --ec-color-400: #9ca3af;
+    --ec-color-300: #d1d5db;
+    --ec-color-200: #e5e7eb;
+    --ec-color-100: #f3f4f6;
+    --ec-color-50: #f9fafb;
+    --ec-bg-color: #fff;
+    --ec-text-color: #111827;
+    --ec-border-color: #e5e7eb;
+    --ec-button-bg-color: #fff;
+    --ec-button-border-color: #d1d5db;
+    --ec-button-text-color: #374151;
+    --ec-button-active-bg-color: #4f46e5;
+    --ec-button-active-border-color: #4338ca;
+    --ec-button-active-text-color: #fff;
+    --ec-today-bg-color: #eff6ff;
+    --ec-highlight-color: #e0e7ff;
+    --ec-event-bg-color: #4f46e5;
+    --ec-event-text-color: #fff;
+    --ec-bg-event-color: #e5e7eb;
+    --ec-bg-event-opacity: 0.4;
+    --ec-now-indicator-color: #ef4444;
+
+    font-size: 0.75rem;
+    font-family: inherit;
+}
+
+/* Dark-mode variable overrides */
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec {
+    --ec-color-400: #4b5563;
+    --ec-color-300: #374151;
+    --ec-color-200: #1f2937;
+    --ec-color-100: #111827;
+    --ec-color-50: #0f172a;
+    --ec-bg-color: #111827;
+    --ec-text-color: #f3f4f6;
+    --ec-border-color: #374151;
+    --ec-button-bg-color: #1f2937;
+    --ec-button-border-color: #374151;
+    --ec-button-text-color: #d1d5db;
+    --ec-button-active-bg-color: #4f46e5;
+    --ec-button-active-border-color: #6366f1;
+    --ec-button-active-text-color: #fff;
+    --ec-today-bg-color: #1e3a5f;
+    --ec-highlight-color: #312e81;
+    --ec-event-bg-color: #6366f1;
+    --ec-event-text-color: #fff;
+    --ec-bg-event-color: #374151;
+    --ec-bg-event-opacity: 0.5;
+    --ec-now-indicator-color: #f87171;
+}
+
+/* Toolbar refinements */
+#fleet-ops-scheduler-timeline .ec-toolbar {
+    padding: 0.5rem 0.75rem;
+    margin-block-end: 0;
+    border-bottom: none;
+    background-color: var(--ec-bg-color);
+}
+
+#fleet-ops-scheduler-timeline .ec-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ec-text-color);
+}
+
+#fleet-ops-scheduler-timeline .ec-button {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    transition:
+        background-color 0.15s,
+        border-color 0.15s,
+        color 0.15s;
+}
+
+#fleet-ops-scheduler-timeline .ec-button:not(:disabled):hover {
+    background-color: var(--ec-color-100);
+    border-color: var(--ec-color-300);
+}
+
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec-button:not(:disabled):hover {
+    background-color: var(--ec-color-200);
+}
+
+/* Resource label column */
+#fleet-ops-scheduler-timeline .ec-sidebar {
+    background-color: var(--ec-color-50);
+    border-inline-end-color: var(--ec-border-color);
+    min-width: 180px;
+}
+
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec-sidebar {
+    background-color: var(--ec-color-100);
+}
+
+#fleet-ops-scheduler-timeline .ec-resource {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--ec-text-color);
+    padding: 0;
+}
+
+/* Column headers (time slots) */
+#fleet-ops-scheduler-timeline .ec-col-head,
+#fleet-ops-scheduler-timeline .ec-col-group {
+    background-color: var(--ec-color-50);
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #6b7280;
+    border-color: var(--ec-border-color);
+}
+
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec-col-head,
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec-col-group {
+    background-color: var(--ec-color-100);
+    color: #9ca3af;
+}
+
+/* Row / lane backgrounds */
+#fleet-ops-scheduler-timeline .ec-day {
+    background-color: var(--ec-bg-color);
+}
+
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec-day {
+    background-color: #1f2937;
+}
+
+/* Events */
+#fleet-ops-scheduler-timeline .ec-event {
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 8%);
+    border: none;
+    min-height: 3.25rem;
+    overflow: hidden;
+}
+
+#fleet-ops-scheduler-timeline .ec-event:hover {
+    filter: brightness(0.92);
+}
+
+/* Now indicator */
+#fleet-ops-scheduler-timeline .ec-now-indicator {
+    border-color: var(--ec-now-indicator-color);
+}
+
+#fleet-ops-scheduler-timeline .ec-now-indicator-arrow {
+    border-top-color: var(--ec-now-indicator-color);
+    border-bottom-color: var(--ec-now-indicator-color);
+}
+
+/* Drag-over hover state */
+#fleet-ops-scheduler-timeline[data-dragging-over='true'] .ec-main {
+    background-color: rgba(99, 102, 241, 4%);
+}
+
+body[data-theme='dark'] #fleet-ops-scheduler-timeline[data-dragging-over='true'] .ec-main {
+    background-color: rgba(129, 140, 248, 6%);
+}
+
+/* Per-column drop cursor indicator */
+#fleet-ops-scheduler-timeline .ec-drop-cursor {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: #6366f1;
+    pointer-events: none;
+    z-index: 10;
+    border-radius: 1px;
+    box-shadow: 0 0 6px rgba(99, 102, 241, 70%);
+    transition: left 0.04s linear;
+}
+
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec-drop-cursor {
+    background-color: #818cf8;
+    box-shadow: 0 0 6px rgba(129, 140, 248, 70%);
+}
+
+/* Full-height timeline */
+#fleet-ops-scheduler-timeline {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+#fleet-ops-scheduler-timeline .fleetbase-event-calendar,
+#fleet-ops-scheduler-timeline .ec {
+    flex: 1 1 0;
+    min-height: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#fleet-ops-scheduler-timeline .ec-main {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+/* Scrollbar styling (Webkit) */
+#fleet-ops-scheduler-timeline .ec-main::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+}
+
+#fleet-ops-scheduler-timeline .ec-main::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 3px;
+}
+
+body[data-theme='dark'] #fleet-ops-scheduler-timeline .ec-main::-webkit-scrollbar-thumb {
+    background-color: #4b5563;
+}
+
+/* ============================================================
+   Scheduler - Full-height layout & header overflow fixes
+   ============================================================ */
+
+/* 1. Make the tab-navigation a flex column so the tab-content
+      fills the remaining height below the tab-list. */
+.tab-navigation.fleet-ops-scheduler-tab-nav {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* 2. The tab-content should grow to fill all remaining space
+      below the tab-list. */
+.tab-navigation.fleet-ops-scheduler-tab-nav > .tab-content {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 3. The next-view-section-body inside the scheduler should
+      fill the remaining space below the subheader. */
+.tab-navigation.fleet-ops-scheduler-tab-nav .next-view-section-body {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 4. Fix the subheader overflow: prevent the actions from
+      stretching beyond the viewport width. */
+.tab-navigation.fleet-ops-scheduler-tab-nav .next-view-section-subheader {
+    flex-shrink: 0;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+/* 5. Allow the actions area to shrink and wrap so buttons
+      remain visible when the timeline stretches the layout. */
+.tab-navigation.fleet-ops-scheduler-tab-nav .next-view-section-subheader-actions {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+/* 6. The scheduler container and timeline fill the body. */
+#fleet-ops-scheduler-container {
+    flex: 1 1 0;
+    min-height: 0;
+}
+
+/* ============================================================
+   Scheduler – follow-up fixes (round 3)
+   ============================================================ */
+
+/* 1. Resource label: make the inner span (direct child of .ec-row-head)
+      fill the full cell width so the workload bar stretches correctly. */
+#fleet-ops-orchestrator-plan-timeline .ec-row-head > span,
+#fleet-ops-scheduler-timeline .ec-row-head > span {
+    display: block;
+    width: 100%;
+    text-align: left;
+}
+
+/* 2. Event blocks: ensure a minimum width so the 3-line content is readable.
+      The timeline slot width determines how wide each column is; we set a
+      sensible min-width so the block never collapses to an unreadable sliver. */
+#fleet-ops-orchestrator-plan-timeline .ec-event,
+#fleet-ops-scheduler-timeline .ec-event {
+    min-width: 200px;
+}
+
+/* 3. Search icon: FontAwesome SVGs carry vertical-align:-0.125em which shifts
+      the icon slightly below the visual centre of the flex container.
+      The span uses Tailwind utility classes (absolute, inset-y-0, flex,
+      items-center) not a semantic class, so we target the first span child
+      of the .relative wrapper. */
+#fleet-ops-scheduler-sidebar .relative > span:first-child .svg-inline--fa,
+#fleet-ops-scheduler-sidebar .relative > span:first-child svg {
+    vertical-align: middle;
+    display: block;
+    line-height: 1;
+}
+
+/* 4. Schedule card: remove horizontal padding from .card-content so the
+      content sits flush with the card border. */
+.order-schedule-card .card-content {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+/* ============================================================
+   Orchestrator Workbench
+   ============================================================ */
+
+/* ── Workbench layout ── */
+.orchestrator-workbench {
+    background: #f9fafb; /* gray-50 — light mode default */
+}
+
+body[data-theme='dark'] .orchestrator-workbench,
+.dark .orchestrator-workbench {
+    background: #111827; /* gray-900 — dark mode */
+}
+
+/* ── Toolbar ── */
+.workbench-toolbar {
+    min-height: 44px;
+}
+
+/* ── Options panel ── */
+.workbench-options-panel label {
+    white-space: nowrap;
+}
+
+/* ── Order pool card ── */
+
+/* Light-mode base: white card with gray-200 border */
+.order-pool-card {
+    background: #fff;
+    border-color: #e5e7eb; /* gray-200 */
+    transition:
+        background 0.1s,
+        border-color 0.1s;
+}
+
+.order-pool-card:hover {
+    background: #f9fafb;
+    border-color: #93c5fd; /* blue-300 */
+}
+
+.order-pool-card.selected {
+    background: #eff6ff; /* blue-50 */
+    border-color: #3b82f6;
+}
+
+/* Dark-mode overrides */
+body[data-theme='dark'] .order-pool-card,
+.dark .order-pool-card {
+    background: #1f2937;
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .order-pool-card:hover,
+.dark .order-pool-card:hover {
+    background: #263040;
+    border-color: #4b5563;
+}
+
+body[data-theme='dark'] .order-pool-card.selected,
+.dark .order-pool-card.selected {
+    background: #1e3a5f;
+    border-color: #3b82f6;
+}
+
+/* ── Order filter chips ── */
+.order-filter-chip {
+    padding: 2px 8px;
+    border-radius: 9999px;
+    font-size: 0.65rem;
+    font-weight: 500;
+    color: #9ca3af;
+    background: transparent;
+    border: 1px solid #374151;
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+        background 0.1s,
+        color 0.1s,
+        border-color 0.1s;
+}
+
+.order-filter-chip:hover {
+    background: #374151;
+    color: #e5e7eb;
+}
+
+.order-filter-chip.active {
+    background: #1d4ed8;
+    border-color: #3b82f6;
+    color: #fff;
+}
+
+/* ── Skill tags ── */
+.skill-tag {
+    display: inline-block;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 0.6rem;
+    font-weight: 500;
+    background: #1e3a5f;
+    color: #93c5fd;
+    border: 1px solid #1d4ed8;
+}
+
+/* ── Vehicle route cards ── */
+.vehicle-route-card {
+    transition: box-shadow 0.1s;
+}
+
+.vehicle-route-card:hover {
+    box-shadow: 0 0 0 1px #3b82f6;
+}
+
+/* ── Assigned stop row ── */
+.assigned-stop {
+    transition: background 0.1s;
+}
+
+.assigned-stop:hover {
+    background: #263040 !important;
+}
+
+/* ── Driver card ── */
+.driver-card {
+    cursor: pointer;
+    transition:
+        background 0.1s,
+        border-color 0.1s;
+}
+
+.driver-card:hover {
+    background: #263040;
+    border-color: #4b5563;
+}
+
+/* ── Vehicle drop zone (drag target) ── */
+.vehicle-drop-zone {
+    min-height: 32px;
+    transition: background 0.1s;
+}
+
+.vehicle-drop-zone.drag-over {
+    background: rgba(59, 130, 246, 10%);
+    outline: 1px dashed #3b82f6;
+    border-radius: 4px;
+}
+
+/* ── Import modal ── */
+.import-dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    border: 2px dashed #d1d5db; /* gray-300 — works in both modes */
+    border-radius: 0.5rem;
+    background: #f9fafb; /* gray-50 — light mode default */
+    text-align: center;
+    cursor: pointer;
+    transition:
+        border-color 0.15s,
+        background 0.15s;
+}
+
+/* Dark mode override */
+body[data-theme='dark'] .import-dropzone,
+.dark .import-dropzone {
+    border-color: #374151;
+    background: #1f2937;
+}
+
+.import-dropzone:hover,
+.import-dropzone.dragging {
+    border-color: #3b82f6;
+    background: #eff6ff; /* blue-50 for light mode */
+}
+
+body[data-theme='dark'] .import-dropzone:hover,
+body[data-theme='dark'] .import-dropzone.dragging,
+.dark .import-dropzone:hover,
+.dark .import-dropzone.dragging {
+    background: #1e3a5f;
+}
+
+.import-dropzone p {
+    margin: 0;
+}
+
+/* ── Import step indicator ── */
+.import-step {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7rem;
+    color: #6b7280;
+    font-weight: 500;
+}
+
+.import-step.active {
+    color: #3b82f6;
+}
+
+.import-step-num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #374151;
+    font-size: 0.6rem;
+    font-weight: 700;
+    color: #9ca3af;
+}
+
+.import-step.active .import-step-num {
+    background: #1d4ed8;
+    color: #fff;
+}
+
+.import-step-divider {
+    flex: 1;
+    height: 1px;
+    background: #374151;
+    min-width: 16px;
+}
+
+/* ── Orchestrator Workbench: panel toggle buttons ── */
+.workbench-panel-toggle {
+    cursor: pointer;
+    z-index: 1;
+}
+
+/* ── Orchestrator Workbench: Leaflet div-icon markers ── */
+
+/* The wrapper div produced by div-icon must have no default background/border */
+.orch-marker-wrapper {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Order drop-off dot — blue */
+.orch-marker-order {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #3b82f6;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 50%);
+    transition: transform 0.1s;
+}
+
+.orch-marker-order.selected {
+    background: #f59e0b;
+    border-color: #fff;
+    transform: scale(1.3);
+}
+
+/* Driver/vehicle dot — green online, red offline */
+.orch-marker-driver {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 50%);
+    background: #ef4444; /* default: offline */
+}
+
+.orch-marker-driver.online {
+    background: #10b981;
+}
+
+.pl-7i {
+    padding-left: 1.75rem !important;
+}
+
+/**
+ * Base reset for the Leaflet divIcon container.
+ * Leaflet adds its own background/border by default; we clear those
+ * so our custom HTML circle renders cleanly.
+ */
+.fleetops-waypoint-marker {
+    background: transparent !important;
+    border: none !important;
+}
+
+/**
+ * Tooltip shown on hover over a waypoint marker.
+ * Minimal padding, small font, semi-transparent dark background.
+ */
+.fleetops-waypoint-tooltip {
+    background: rgba(15, 23, 42, 88%) !important;
+    border: none !important;
+    border-radius: 4px !important;
+    color: #f8fafc !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    padding: 3px 7px !important;
+    white-space: nowrap;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 35%) !important;
+}
+
+.fleetops-waypoint-tooltip::before {
+    border-top-color: rgba(15, 23, 42, 88%) !important;
+}
+
+/* ============================================================
+   Route Visualization – Waypoint Popup
+   ============================================================ */
+
+/**
+ * Override Leaflet's default popup wrapper to use our design system.
+ */
+.fleetops-waypoint-popup-wrapper .leaflet-popup-content-wrapper {
+    border-radius: 6px !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 20%) !important;
+    padding: 0 !important;
+    overflow: hidden;
+}
+
+.fleetops-waypoint-popup-wrapper .leaflet-popup-content {
+    margin: 0 !important;
+    width: auto !important;
+    min-width: 180px;
+}
+
+.fleetops-waypoint-popup-wrapper .leaflet-popup-tip-container {
+    margin-top: -1px;
+}
+
+/**
+ * Inner popup layout.
+ */
+.fleetops-waypoint-popup {
+    font-family:
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        sans-serif;
+    font-size: 12px;
+    line-height: 1.5;
+    color: #1e293b;
+    padding: 10px 12px;
+}
+
+.fleetops-waypoint-popup__header {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    margin-bottom: 6px;
+    font-size: 13px;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.fleetops-waypoint-popup__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+
+.fleetops-waypoint-popup__name {
+    font-weight: 600;
+    color: #0f172a;
+    margin-bottom: 2px;
+}
+
+.fleetops-waypoint-popup__address {
+    color: #475569;
+    font-size: 11px;
+    margin-bottom: 4px;
+}
+
+.fleetops-waypoint-popup__meta {
+    color: #64748b;
+    font-size: 11px;
+    margin-top: 2px;
+}
+
+.fleetops-waypoint-popup__meta strong {
+    color: #334155;
+}
+
+/* ============================================================
+   Route Visualization – Live Map Route Tooltips
+   ============================================================ */
+
+/**
+ * Tooltip shown when hovering over a live-map route polyline.
+ */
+.fleetops-route-tooltip-wrapper {
+    pointer-events: none;
+}
+
+.fleetops-route-tooltip-wrapper .leaflet-tooltip {
+    background: rgba(15, 23, 42, 92%) !important;
+    border: none !important;
+    border-radius: 5px !important;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 30%) !important;
+    padding: 6px 10px !important;
+    color: #f1f5f9 !important;
+    font-size: 11px !important;
+    white-space: nowrap;
+}
+
+.fleetops-route-tooltip-wrapper .leaflet-tooltip::before {
+    border-top-color: rgba(15, 23, 42, 92%) !important;
+}
+
+.fleetops-route-tooltip {
+    font-family:
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        sans-serif;
+    line-height: 1.6;
+}
+
+.fleetops-route-tooltip__id {
+    font-weight: 700;
+    font-size: 12px;
+    color: #f8fafc;
+    margin-bottom: 1px;
+}
+
+.fleetops-route-tooltip__driver,
+.fleetops-route-tooltip__status {
+    font-size: 11px;
+    color: #94a3b8;
+}
+
+/* ============================================================
+   Route Visualization – In-Progress Pulse Animation
+   Applies a subtle animated glow to active (in_progress) routes.
+   ============================================================ */
+
+@keyframes fleetops-route-pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.55;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.fleetops-route-active path {
+    animation: fleetops-route-pulse 2s ease-in-out infinite;
+}
+
+.card-fields-settings .card-fields-settings-container {
+    height: 300px;
+    min-height: 300px;
+    max-height: 300px;
+    overflow-y: scroll;
+}
+
+/* ============================================================
+   @event-calendar/core - Orchestrator Plan Timeline Overrides
+   Mirrors the scheduler timeline styles, scoped to the
+   #fleet-ops-orchestrator-plan-timeline wrapper div.
+   ============================================================ */
+#fleet-ops-orchestrator-plan-timeline .ec {
+    --ec-color-400: #9ca3af;
+    --ec-color-300: #d1d5db;
+    --ec-color-200: #e5e7eb;
+    --ec-color-100: #f3f4f6;
+    --ec-color-50: #f9fafb;
+    --ec-bg-color: #fff;
+    --ec-text-color: #111827;
+    --ec-border-color: #e5e7eb;
+    --ec-button-bg-color: #fff;
+    --ec-button-border-color: #d1d5db;
+    --ec-button-text-color: #374151;
+    --ec-button-active-bg-color: #4f46e5;
+    --ec-button-active-border-color: #4338ca;
+    --ec-button-active-text-color: #fff;
+    --ec-today-bg-color: #eff6ff;
+    --ec-highlight-color: #e0e7ff;
+    --ec-event-bg-color: #4f46e5;
+    --ec-event-text-color: #fff;
+    --ec-bg-event-color: #e5e7eb;
+    --ec-bg-event-opacity: 0.4;
+    --ec-now-indicator-color: #ef4444;
+
+    font-size: 0.75rem;
+    font-family: inherit;
+}
+
+body[data-theme='dark'] #fleet-ops-orchestrator-plan-timeline .ec {
+    --ec-color-400: #4b5563;
+    --ec-color-300: #374151;
+    --ec-color-200: #1f2937;
+    --ec-color-100: #111827;
+    --ec-color-50: #0f172a;
+    --ec-bg-color: #111827;
+    --ec-text-color: #f3f4f6;
+    --ec-border-color: #374151;
+    --ec-button-bg-color: #1f2937;
+    --ec-button-border-color: #374151;
+    --ec-button-text-color: #d1d5db;
+    --ec-button-active-bg-color: #4f46e5;
+    --ec-button-active-border-color: #6366f1;
+    --ec-button-active-text-color: #fff;
+    --ec-today-bg-color: #1e3a5f;
+    --ec-highlight-color: #312e81;
+    --ec-event-bg-color: #6366f1;
+    --ec-event-text-color: #fff;
+    --ec-bg-event-color: #374151;
+    --ec-bg-event-opacity: 0.5;
+    --ec-now-indicator-color: #f87171;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-toolbar {
+    padding: 0.5rem 0.75rem;
+    margin-block-end: 0;
+    border-bottom: none;
+    background-color: var(--ec-bg-color);
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ec-text-color);
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-button {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    transition:
+        background-color 0.15s,
+        border-color 0.15s,
+        color 0.15s;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-button:not(:disabled):hover {
+    background-color: var(--ec-color-100);
+    border-color: var(--ec-color-300);
+}
+
+body[data-theme='dark'] #fleet-ops-orchestrator-plan-timeline .ec-button:not(:disabled):hover {
+    background-color: var(--ec-color-200);
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-sidebar {
+    background-color: var(--ec-color-50);
+    border-inline-end-color: var(--ec-border-color);
+    min-width: 160px;
+}
+
+body[data-theme='dark'] #fleet-ops-orchestrator-plan-timeline .ec-sidebar {
+    background-color: var(--ec-color-100);
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-resource {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--ec-text-color);
+    padding: 0;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-col-head,
+#fleet-ops-orchestrator-plan-timeline .ec-col-group {
+    background-color: var(--ec-color-50);
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #6b7280;
+    border-color: var(--ec-border-color);
+}
+
+body[data-theme='dark'] #fleet-ops-orchestrator-plan-timeline .ec-col-head,
+body[data-theme='dark'] #fleet-ops-orchestrator-plan-timeline .ec-col-group {
+    background-color: var(--ec-color-100);
+    color: #9ca3af;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-day {
+    background-color: var(--ec-bg-color);
+}
+
+body[data-theme='dark'] #fleet-ops-orchestrator-plan-timeline .ec-day {
+    background-color: #1f2937;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-event {
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    cursor: default;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 8%);
+    border: none;
+    min-height: 3.25rem;
+    overflow: hidden;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-event:hover {
+    filter: brightness(0.92);
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-now-indicator {
+    border-color: var(--ec-now-indicator-color);
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-now-indicator-arrow {
+    border-top-color: var(--ec-now-indicator-color);
+    border-bottom-color: var(--ec-now-indicator-color);
+}
+
+#fleet-ops-orchestrator-plan-timeline {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+#fleet-ops-orchestrator-plan-timeline .fleetbase-event-calendar,
+#fleet-ops-orchestrator-plan-timeline .ec {
+    flex: 1 1 0;
+    min-height: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-main {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-main::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+}
+
+#fleet-ops-orchestrator-plan-timeline .ec-main::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 3px;
+}
+
+body[data-theme='dark'] #fleet-ops-orchestrator-plan-timeline .ec-main::-webkit-scrollbar-thumb {
+    background-color: #4b5563;
+}
+
+.orchestrator-map-container.next-map-container .leaflet-top {
+    top: 0;
+}
+
+/* ── Orchestrator Import Modal: tab-style step indicator ── */
+.import-step-tab {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 22px 12px 16px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #6b7280;
+    border-bottom: 3px solid transparent;
+    cursor: default;
+    user-select: none;
+    letter-spacing: 0.01em;
+    transition:
+        color 0.15s,
+        border-color 0.15s;
+}
+
+/* Light mode: gray-500 on gray-50 background */
+body[data-theme='light'] .import-step-tab {
+    color: #6b7280; /* gray-500 — readable on gray-50 */
+}
+
+/* Dark mode: gray-400 on gray-800 background */
+body[data-theme='dark'] .import-step-tab {
+    color: #9ca3af; /* gray-400 — readable on gray-800 */
+}
+
+.import-step-tab--active {
+    color: #3b82f6;
+    border-bottom-color: #3b82f6;
+}
+
+.import-step-tab-num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: #e5e7eb; /* gray-200 — light mode default */
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #6b7280;
+    flex-shrink: 0;
+    transition:
+        background 0.15s,
+        color 0.15s;
+}
+
+/* Dark mode step number badge */
+body[data-theme='dark'] .import-step-tab-num,
+.dark .import-step-tab-num {
+    background: #374151;
+    color: #9ca3af;
+}
+
+.import-step-tab-num--active {
+    background: #1d4ed8;
+    color: #fff;
+}
+
+/* ── Orchestrator Import Modal: column-mapping table layout ── */
+
+/* Sticky column header bar (Target field / Your spreadsheet) */
+.import-mapping-header {
+    display: grid;
+    grid-template-columns: 1fr 28px 1fr;
+    align-items: center;
+    padding: 6px 16px;
+    background: #f3f4f6; /* gray-100 — light mode */
+    border-bottom: 1px solid #e5e7eb;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .import-mapping-header,
+.dark .import-mapping-header {
+    background: #111827;
+    border-bottom-color: #1f2937;
+    color: #4b5563;
+}
+
+/* Scrollable body that holds all groups + rows */
+.import-mapping-body {
+    overflow-y: auto;
+    max-height: 420px;
+}
+
+/* Section group header (ORDER, PICKUP, DROPOFF, etc.) */
+.import-mapping-group-header {
+    display: flex;
+    align-items: center;
+    padding: 5px 16px;
+    background: #e5e7eb; /* gray-200 — light mode */
+    border-top: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.09em;
+    color: #6b7280;
+    position: sticky;
+    top: 0;
+    z-index: 5;
+}
+
+body[data-theme='dark'] .import-mapping-group-header,
+.dark .import-mapping-group-header {
+    background: #0f172a;
+    border-top-color: #1f2937;
+    border-bottom-color: #1f2937;
+    color: #4b5563;
+}
+
+.import-mapping-group-header:first-child {
+    border-top: none;
+}
+
+/* Individual mapping row */
+.import-mapping-row {
+    display: grid;
+    grid-template-columns: 1fr 28px 1fr;
+    align-items: center;
+    padding: 5px 16px;
+    border-bottom: 1px solid #f3f4f6; /* gray-100 — light mode */
+    transition: background 0.1s;
+}
+
+body[data-theme='dark'] .import-mapping-row,
+.dark .import-mapping-row {
+    border-bottom-color: #1f2937;
+}
+
+.import-mapping-row:last-child {
+    border-bottom: none;
+}
+
+.import-mapping-row:hover {
+    background: rgba(0, 0, 0, 2%); /* light mode hover */
+}
+
+body[data-theme='dark'] .import-mapping-row:hover,
+.dark .import-mapping-row:hover {
+    background: rgba(255, 255, 255, 2%);
+}
+
+/* Highlight rows that have a mapping applied */
+.import-mapping-row--mapped {
+    background: rgba(16, 185, 129, 5%);
+}
+
+.import-mapping-row--mapped:hover {
+    background: rgba(16, 185, 129, 9%);
+}
+
+/* Column sizing helpers */
+.import-mapping-col-target {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding-right: 8px;
+}
+
+.import-mapping-col-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.65rem;
+    color: #374151;
+}
+
+.import-mapping-col-source {
+    padding-left: 8px;
+}
+
+/* Field name label */
+.import-mapping-field-name {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #374151; /* gray-700 — light mode */
+    line-height: 1.3;
+}
+
+body[data-theme='dark'] .import-mapping-field-name,
+.dark .import-mapping-field-name {
+    color: #d1d5db; /* gray-300 — dark mode */
+}
+
+/* Optional hint text below field name */
+.import-mapping-field-hint {
+    font-size: 0.65rem;
+    color: #6b7280; /* gray-500 — light mode */
+    line-height: 1.2;
+}
+
+body[data-theme='dark'] .import-mapping-field-hint,
+.dark .import-mapping-field-hint {
+    color: #4b5563; /* gray-600 — dark mode */
+}
+
+/* The select inside a mapping row — full width, compact */
+select.import-mapping-select {
+    width: 100%;
+    font-size: 0.72rem !important;
+    padding-top: 3px !important;
+    padding-bottom: 3px !important;
+}
+
+/* Red border on required fields that are not yet mapped */
+select.import-mapping-select--error {
+    border-color: #ef4444 !important;
+}
+
+/* ── Orchestrator Import Modal: unified header + step-tab region ──
+   The header background is applied via modalHeaderClass='import-modal-header'
+   which lands directly on .flb--modal-header via ...attributes, bypassing
+   any CSS cascade conflict with ember-ui's own modal.css rules.
+   Dark mode  : gray-800 (#1f2937)
+   Light mode : gray-50  (#f9fafb) */
+
+/* Modal header — class applied via modalHeaderClass option */
+.flb--modal-header.import-modal-header {
+    background: #f9fafb !important; /* gray-50 — light mode */
+    border-bottom: none !important;
+}
+
+body[data-theme='dark'] .flb--modal-header.import-modal-header {
+    background: #1f2937 !important; /* gray-800 — dark mode */
+    border-bottom: none !important;
+}
+
+/* Step tabs nav — must match the header background */
+.fleetops-order-import nav.import-step-tabs {
+    background: #f9fafb; /* gray-50 — light mode */
+    border-bottom: 1px solid #e5e7eb; /* gray-200 */
+}
+
+body[data-theme='dark'] .fleetops-order-import nav.import-step-tabs {
+    background: #1f2937; /* gray-800 — dark mode */
+    border-bottom: 1px solid #374151; /* gray-700 subtle separator */
+}
+
+/* ── Orchestrator Import Modal: modal body + step content layout ── */
+
+/* The modal body is made flex so the step content div fills it, which in turn
+   allows the download block to be pushed to the very bottom with margin-top:auto. */
+.fleetops-order-import .flb--modal-body {
+    display: flex;
+    flex-direction: column;
+    min-height: 480px; /* consistent height across all steps */
+}
+
+.fleetops-order-import .import-step-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1; /* fill all available body space */
+}
+
+/* Upload step inner content — grows to fill available space above the download block */
+.fleetops-order-import .import-upload-content {
+    flex: 1;
+}
+
+/* ── Orchestrator Import Modal: download template InfoBlock ── */
+
+/* The InfoBlock is placed inside the flex column; margin-top:auto pushes it
+   to the bottom of the upload step regardless of the dropzone height. */
+.import-template-download {
+    margin-top: auto;
+}
+
+/* ── Button: trailing icon support (wrapperClass = btn-icon-right) ── */
+
+/* When a Button is given @wrapperClass="btn-icon-right" the icon wrapper
+   appears after the text label (trailing position). */
+.btn-wrapper.btn-icon-right .btn {
+    flex-direction: row-reverse;
+}
+
+.btn-wrapper.btn-icon-right .btn .btn-icon-wrapper {
+    margin-right: 0;
+    margin-left: 0.375rem;
+}
+
+.btn-wrapper.btn-icon-right .btn .btn-icon-wrapper .svg-inline--fa {
+    margin-right: 0 !important;
+}
+
+/* ── Orchestrator Import Modal: preview table ── */
+
+.import-preview-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.import-preview-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-bottom: 1px solid #1f2937;
+    font-size: 0.75rem;
+}
+
+.import-preview-table-wrap {
+    overflow: auto auto;
+    max-height: 360px;
+}
+
+.import-preview-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.72rem;
+    white-space: nowrap;
+}
+
+.import-preview-table thead {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    background: #111827;
+}
+
+body[data-theme='light'] .import-preview-table thead {
+    background: #f3f4f6;
+}
+
+.import-preview-table th {
+    padding: 6px 10px;
+    text-align: left;
+    font-weight: 600;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #4b5563;
+    border-bottom: 1px solid #1f2937;
+}
+
+body[data-theme='light'] .import-preview-table th {
+    color: #6b7280;
+    border-bottom-color: #e5e7eb;
+}
+
+.import-preview-table td {
+    padding: 5px 10px;
+    color: #9ca3af;
+    border-bottom: 1px solid #1f2937;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+body[data-theme='light'] .import-preview-table td {
+    color: #374151;
+    border-bottom-color: #e5e7eb;
+}
+
+.import-preview-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.import-preview-table tbody tr:hover td {
+    background: rgba(255, 255, 255, 2%);
+}
+
+body[data-theme='light'] .import-preview-table tbody tr:hover td {
+    background: rgba(0, 0, 0, 2%);
+}
+
+.import-preview-row--error td {
+    background: rgba(239, 68, 68, 6%) !important;
+}
+
+/* Address cell — allow wrapping for long addresses */
+.import-preview-addr {
+    white-space: normal !important;
+    min-width: 120px;
+    max-width: 180px;
+    line-height: 1.3;
+}
+
+/* Status badges */
+.import-preview-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.import-preview-badge--blue {
+    background: rgba(59, 130, 246, 15%);
+    color: #60a5fa;
+}
+
+.import-preview-badge--gray {
+    background: rgba(107, 114, 128, 15%);
+    color: #9ca3af;
+}
+
+.import-preview-badge--green {
+    background: rgba(16, 185, 129, 15%);
+    color: #34d399;
+}
+
+/* Row status indicator */
+.import-preview-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 0.7rem;
+    font-weight: 500;
+}
+
+.import-preview-status--ok {
+    color: #34d399;
+}
+
+.import-preview-status--error {
+    color: #f87171;
+    cursor: help;
+}
+
+/* Warning strip at the bottom of the preview step */
+.import-preview-warning {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-top: 1px solid #1f2937;
+    font-size: 0.72rem;
+    color: #fbbf24;
+    background: rgba(251, 191, 36, 6%);
+}