@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/styles/fleetops-engine.css

@@ -114,7 +114,7 @@ body[data-theme='dark'] .next-table-wrapper.order-view-purchase-rate-table-wrapp
 
 nav.next-sidebar {
     height: 100%;
-    overflow-y: scroll;
+    overflow: hidden;
 }
 
 /** places management css mods */
@@ -161,6 +161,154 @@ body.fleetbase-console .next-content-overlay > .next-content-overlay-panel-conta
     flex-shrink: 0;
 }
 
+.fleetops-connectivity-kpi-tile {
+    transition:
+        transform 160ms ease-out,
+        box-shadow 160ms ease-out,
+        border-color 160ms ease-out;
+}
+
+.fleetops-connectivity-kpi-tile:hover {
+    box-shadow: 0 8px 24px -12px rgb(15 23 42 / 35%);
+}
+
+.fleetops-connectivity-kpi-tile .fleetops-connectivity-kpi-icon {
+    color: #64748b;
+    background-color: rgb(100 116 139 / 12%);
+}
+
+.fleetops-connectivity-kpi-accent-blue {
+    border-color: rgb(59 130 246 / 28%);
+    background-image: linear-gradient(135deg, rgb(59 130 246 / 10%) 0%, rgb(59 130 246 / 0%) 62%);
+}
+
+.fleetops-connectivity-kpi-accent-green {
+    border-color: rgb(16 185 129 / 28%);
+    background-image: linear-gradient(135deg, rgb(16 185 129 / 10%) 0%, rgb(16 185 129 / 0%) 62%);
+}
+
+.fleetops-connectivity-kpi-accent-amber {
+    border-color: rgb(245 158 11 / 32%);
+    background-image: linear-gradient(135deg, rgb(245 158 11 / 12%) 0%, rgb(245 158 11 / 0%) 62%);
+}
+
+.fleetops-connectivity-kpi-accent-rose {
+    border-color: rgb(244 63 94 / 28%);
+    background-image: linear-gradient(135deg, rgb(244 63 94 / 10%) 0%, rgb(244 63 94 / 0%) 62%);
+}
+
+.fleetops-connectivity-kpi-accent-blue .fleetops-connectivity-kpi-icon {
+    color: rgb(37 99 235);
+    background-color: rgb(59 130 246 / 12%);
+}
+
+.fleetops-connectivity-kpi-accent-green .fleetops-connectivity-kpi-icon {
+    color: rgb(5 150 105);
+    background-color: rgb(16 185 129 / 12%);
+}
+
+.fleetops-connectivity-kpi-accent-amber .fleetops-connectivity-kpi-icon {
+    color: rgb(217 119 6);
+    background-color: rgb(245 158 11 / 14%);
+}
+
+.fleetops-connectivity-kpi-accent-rose .fleetops-connectivity-kpi-icon {
+    color: rgb(225 29 72);
+    background-color: rgb(244 63 94 / 12%);
+}
+
+body[data-theme='dark'] .fleetops-connectivity-kpi-accent-blue .fleetops-connectivity-kpi-icon {
+    color: rgb(147 197 253);
+}
+
+body[data-theme='dark'] .fleetops-connectivity-kpi-accent-green .fleetops-connectivity-kpi-icon {
+    color: rgb(110 231 183);
+}
+
+body[data-theme='dark'] .fleetops-connectivity-kpi-accent-amber .fleetops-connectivity-kpi-icon {
+    color: rgb(252 211 77);
+}
+
+body[data-theme='dark'] .fleetops-connectivity-kpi-accent-rose .fleetops-connectivity-kpi-icon {
+    color: rgb(251 113 133);
+}
+
+.fleetops-provider-connections-actions .fleetops-provider-connections-search {
+    min-width: 16rem;
+    height: 2.25rem;
+    min-height: 2.25rem;
+}
+
+.fleetops-provider-connections-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+}
+
+@media (width >= 1024px) {
+    .fleetops-provider-connections-header {
+        grid-template-columns: minmax(0, 26rem) minmax(22rem, max-content);
+        align-items: start;
+        justify-content: space-between;
+    }
+}
+
+.fleetops-provider-connections-actions .fleetops-provider-connections-action-button,
+.fleetops-provider-connections-actions .fleetops-telematics-action-button,
+.fleetops-provider-connections-actions button {
+    flex-shrink: 0;
+    height: 2.25rem;
+    min-height: 2.25rem;
+    white-space: nowrap;
+}
+
+.fleetops-provider-connections-actions button span {
+    white-space: nowrap;
+}
+
+.status-badge.long-offline-status-badge > span,
+.status-badge.long_offline-status-badge > span {
+    @apply bg-yellow-800 border-yellow-700 text-yellow-100;
+}
+
+.status-badge.long-offline-status-badge > span svg,
+.status-badge.long_offline-status-badge > span svg {
+    @apply text-yellow-300;
+}
+
+.fleetops-provider-connections-panel .table-wrapper table tbody tr td,
+.fleetops-provider-connections-panel .next-table-wrapper table tbody tr td {
+    vertical-align: top;
+}
+
+.fleetops-provider-connections-panel .table-wrapper table tbody tr td.fleetops-provider-connections-cell-middle,
+.fleetops-provider-connections-panel .next-table-wrapper table tbody tr td.fleetops-provider-connections-cell-middle {
+    vertical-align: middle;
+}
+
+body[data-theme='dark'] .fleetops-provider-connections-panel .table-wrapper.table-fluid,
+body[data-theme='dark'] .fleetops-provider-connections-panel .table-wrapper.table-fluid table,
+body[data-theme='dark'] .fleetops-provider-connections-panel .table-wrapper.table-fluid table tbody,
+body[data-theme='dark'] .fleetops-provider-connections-panel .table-wrapper.table-fluid table tbody tr,
+body[data-theme='dark'] .fleetops-provider-connections-panel .table-wrapper.table-fluid table tbody tr td,
+body[data-theme='dark'] .fleetops-provider-connections-panel .next-table-wrapper,
+body[data-theme='dark'] .fleetops-provider-connections-panel .next-table-wrapper table,
+body[data-theme='dark'] .fleetops-provider-connections-panel .next-table-wrapper table tbody,
+body[data-theme='dark'] .fleetops-provider-connections-panel .next-table-wrapper table tbody tr,
+body[data-theme='dark'] .fleetops-provider-connections-panel .next-table-wrapper table tbody tr td {
+    background-color: rgb(17 24 39);
+}
+
+body[data-theme='dark'] .fleetops-provider-connections-panel .table-wrapper.table-fluid table tbody tr:nth-child(even):not(.is-selected) td,
+body[data-theme='dark'] .fleetops-provider-connections-panel .next-table-wrapper table tbody tr:nth-child(even):not(.is-selected) td {
+    background-color: rgb(17 24 39);
+}
+
+.fleetops-provider-connections-panel div.has-floating-pagination,
+.fleetops-provider-connections-panel .next-table-wrapper.has-floating-pagination {
+    padding-bottom: 0;
+}
+
 /** calendar event css mods */
 
 #fleet-ops-scheduler-calendar .fc-h-event .fc-event-main .fc-event-title {
@@ -4914,3 +5062,1167 @@ body[data-theme='dark'] .next-google-container-map .fleetops-google-draw-actions
 .overflow-y-scroll-i {
     overflow-y: scroll !important;
 }
+
+.fleet-ops-home-guidance-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+}
+
+.fleet-ops-get-started-content {
+    min-height: 256px;
+}
+
+.fleet-ops-get-started .fleet-ops-get-started-step {
+    min-height: 52px;
+}
+
+.fleet-ops-recommended-features-loading {
+    min-height: 256px;
+}
+
+.fleet-ops-recommended-feature {
+    min-height: 92px;
+}
+
+@media (width <= 1180px) {
+    .fleet-ops-home-guidance-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.fleet-ops-recommended-feature-icon {
+    background: rgba(37, 99, 235, 0.12);
+    color: #2563eb;
+}
+
+.fleet-ops-recommended-feature.feature-accent-green .fleet-ops-recommended-feature-icon {
+    background: rgba(16, 185, 129, 0.12);
+    color: #059669;
+}
+
+.fleet-ops-recommended-feature.feature-accent-amber .fleet-ops-recommended-feature-icon {
+    background: rgba(245, 158, 11, 0.14);
+    color: #d97706;
+}
+
+.fleet-ops-recommended-feature.feature-accent-purple .fleet-ops-recommended-feature-icon {
+    background: rgba(124, 58, 237, 0.12);
+    color: #7c3aed;
+}
+
+[data-theme='dark'] .fleet-ops-recommended-feature-icon {
+    background: rgba(96, 165, 250, 0.16);
+    color: #93c5fd;
+}
+
+[data-theme='dark'] .fleet-ops-recommended-feature.feature-accent-green .fleet-ops-recommended-feature-icon {
+    background: rgba(52, 211, 153, 0.14);
+    color: #6ee7b7;
+}
+
+[data-theme='dark'] .fleet-ops-recommended-feature.feature-accent-amber .fleet-ops-recommended-feature-icon {
+    background: rgba(251, 191, 36, 0.14);
+    color: #fcd34d;
+}
+
+[data-theme='dark'] .fleet-ops-recommended-feature.feature-accent-purple .fleet-ops-recommended-feature-icon {
+    background: rgba(167, 139, 250, 0.14);
+    color: #c4b5fd;
+}
+
+.issue-panel-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    background: #fff;
+    padding: 0.75rem 1rem;
+}
+
+.issue-panel-header-main {
+    display: flex;
+    flex: 1 1 0%;
+    align-items: flex-start;
+    gap: 0.75rem;
+    min-width: 0;
+}
+
+.issue-panel-header-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    color: #d97706;
+    font-size: 0.875rem;
+    background: #fffbeb;
+    border: 1px solid #fcd34d;
+    border-radius: 0.375rem;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+}
+
+.issue-panel-header-content {
+    flex: 1 1 0%;
+    min-width: 0;
+}
+
+.issue-panel-header-title-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 0.5rem;
+    min-width: 0;
+}
+
+.issue-panel-header-title {
+    overflow: hidden;
+    color: #111827;
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.issue-panel-header-id {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+    padding: 0.125rem 0.5rem;
+    margin-top: 0.25rem;
+    color: #6b7280;
+    font-weight: 600;
+    font-size: 0.75rem;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 9999px;
+}
+
+.issue-panel-header-id:hover {
+    color: #2563eb;
+}
+
+.issue-panel-header-meta {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 0.25rem 0.75rem;
+    margin-top: 0.25rem;
+    color: #6b7280;
+    font-size: 0.75rem;
+}
+
+.issue-panel-header-actions {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 0.5rem;
+}
+
+.issue-panel-header-badges {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 0.375rem;
+}
+
+.issue-detail-surface {
+    padding: 1rem;
+}
+
+.issue-detail-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
+}
+
+.issue-detail-main {
+    min-width: 0;
+}
+
+.issue-detail-main > * + * {
+    margin-top: 1rem;
+}
+
+.issue-detail-side-rail {
+    min-width: 0;
+}
+
+.issue-detail-side-rail > * + * {
+    margin-top: 0.75rem;
+}
+
+.issue-detail-message,
+.issue-detail-correspondence,
+.issue-detail-summary-card,
+.issue-detail-side-card {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 10%),
+        0 2px 4px -2px rgb(0 0 0 / 10%);
+}
+
+.issue-detail-summary-card {
+    padding: 0.875rem 1rem;
+    margin-bottom: 1rem;
+}
+
+.issue-detail-summary-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 0.625rem 1rem;
+    margin: 0;
+}
+
+.issue-detail-summary-item {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.issue-detail-summary-item dt {
+    margin-bottom: 0.25rem;
+    color: #6b7280;
+    font-weight: 700;
+    font-size: 0.6875rem;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+}
+
+.issue-detail-summary-item dd {
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    color: #1f2937;
+    font-size: 0.8125rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.issue-detail-summary-item dd > * {
+    max-width: 100%;
+    min-width: 0;
+}
+
+.issue-detail-inline-link {
+    max-width: 100%;
+    overflow: hidden;
+    color: #2563eb;
+    font-weight: 600;
+    text-align: left;
+    text-overflow: ellipsis;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    white-space: nowrap;
+}
+
+.issue-detail-message {
+    display: flex;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 0.75rem;
+}
+
+.issue-detail-avatar {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: #1d4ed8;
+    font-weight: 700;
+    font-size: 0.875rem;
+    background: #dbeafe;
+    border-radius: 9999px;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+}
+
+.issue-detail-message-content {
+    flex: 1 1 0%;
+    min-width: 0;
+}
+
+.issue-detail-message-meta {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.issue-detail-message-author {
+    color: #111827;
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+
+.issue-detail-message-subtitle,
+.issue-detail-message-meta time,
+.issue-detail-section-header p {
+    color: #6b7280;
+    font-size: 0.75rem;
+}
+
+.issue-detail-report {
+    padding: 0.75rem;
+    color: #1f2937;
+    font-size: 0.8125rem;
+    line-height: 1.375rem;
+    white-space: pre-line;
+    background: #f9fafb;
+    border: 1px solid #f3f4f6;
+    border-radius: 0.75rem;
+}
+
+.issue-detail-documents {
+    padding-top: 0.75rem;
+    margin-top: 1rem;
+    border-top: 1px solid #f3f4f6;
+}
+
+.issue-detail-documents-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.issue-detail-documents-title,
+.issue-detail-section-title {
+    color: #4b5563;
+    font-weight: 700;
+    font-size: 0.75rem;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+}
+
+.issue-detail-documents-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.issue-detail-file-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+}
+
+.issue-detail-dropzone {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 8rem;
+    padding: 1rem;
+    color: #4b5563;
+    text-align: center;
+    background: #f9fafb;
+    border: 1px dashed #d1d5db;
+    border-radius: 0.75rem;
+}
+
+.issue-detail-dropzone-empty,
+.issue-detail-dropzone-ready {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.issue-detail-dropzone-empty svg,
+.issue-detail-dropzone-ready svg {
+    color: #6b7280;
+    font-size: 1.25rem;
+}
+
+.issue-detail-upload-link {
+    color: #2563eb;
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.issue-detail-dropzone-progress {
+    color: #2563eb;
+    font-weight: 700;
+    font-size: 0.75rem;
+}
+
+.issue-detail-upload-queue {
+    margin-bottom: 0.75rem;
+}
+
+.issue-detail-upload-queue > * + * {
+    margin-top: 0.5rem;
+}
+
+.issue-detail-upload-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    color: #1e3a8a;
+    font-size: 0.75rem;
+    background: #eff6ff;
+    border: 1px solid #bfdbfe;
+    border-radius: 0.375rem;
+}
+
+.issue-detail-correspondence {
+    padding: 1rem;
+}
+
+.issue-detail-section-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+}
+
+.issue-detail-comment-thread {
+    font-size: 0.875rem;
+}
+
+.issue-detail-side-card {
+    padding: 0.75rem;
+}
+
+.issue-detail-resolution-state {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    margin-top: 0.75rem;
+    background: #fffbeb;
+    border: 1px solid #fde68a;
+    border-radius: 0.5rem;
+}
+
+.issue-detail-resolution-state.is-resolved {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+}
+
+.issue-detail-resolution-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    color: #b45309;
+    background: #fef3c7;
+    border-radius: 9999px;
+}
+
+.issue-detail-resolution-state.is-resolved .issue-detail-resolution-icon {
+    color: #15803d;
+    background: #dcfce7;
+}
+
+.issue-detail-resolution-title {
+    color: #111827;
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+
+.issue-detail-resolution-state p {
+    margin-top: 0.25rem;
+    color: #6b7280;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+}
+
+.issue-detail-meta-list {
+    margin-top: 0.75rem;
+}
+
+.issue-detail-meta-list > * + * {
+    margin-top: 0.5rem;
+}
+
+.issue-detail-meta-list > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding-top: 0.5rem;
+    border-top: 1px dashed #e5e7eb;
+}
+
+.issue-detail-meta-list dt,
+.issue-detail-resource-label,
+.issue-detail-timeline-label {
+    color: #6b7280;
+    font-weight: 600;
+    font-size: 0.75rem;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+}
+
+.issue-detail-meta-list dd {
+    color: #1f2937;
+    font-size: 0.875rem;
+    text-align: right;
+}
+
+.issue-detail-resource-stack {
+    margin-top: 0.75rem;
+}
+
+.issue-detail-resource-stack > * + * {
+    margin-top: 0.75rem;
+}
+
+.issue-detail-resource-row {
+    display: block;
+}
+
+.issue-detail-resource-row > * + * {
+    margin-top: 0.375rem;
+}
+
+.order-card {
+    display: block;
+    width: 100%;
+    padding: 0.75rem;
+    margin-top: 0.75rem;
+    overflow: hidden;
+    text-align: left;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease;
+}
+
+.order-card.is-interactive {
+    cursor: pointer;
+}
+
+.order-card.is-interactive:hover {
+    background: #eff6ff;
+    border-color: #93c5fd;
+}
+
+.order-card-compact,
+.order-card-list {
+    padding: 0.625rem;
+    margin-top: 0;
+}
+
+.order-card-selection {
+    padding: 0;
+    margin-top: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0.375rem;
+    box-shadow: none;
+}
+
+.order-card-selection .order-card-topline {
+    padding: 0.5rem 0.75rem 0;
+}
+
+.order-card-selection .order-card-route {
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem 0;
+}
+
+.order-card-selection .order-card-stop {
+    grid-template-columns: 1.25rem minmax(0, 1fr);
+    gap: 0.5rem;
+}
+
+.order-card-selection .order-card-stop-marker {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 0.625rem;
+}
+
+.order-card-selection .order-card-meta {
+    padding: 0 0.75rem 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.order-card-selection .order-card-empty-route {
+    margin: 0.375rem 0.75rem 0.5rem;
+}
+
+.ember-power-select-option[aria-selected='true'] .order-card-selection,
+.ember-power-select-option[aria-current='true'] .order-card-selection,
+.ember-power-select-option.ember-power-select-option--highlighted .order-card-selection {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.ember-power-select-option[aria-selected='true'] .order-card-selection .order-card-title,
+.ember-power-select-option[aria-current='true'] .order-card-selection .order-card-title,
+.ember-power-select-option.ember-power-select-option--highlighted .order-card-selection .order-card-title,
+.ember-power-select-option[aria-selected='true'] .order-card-selection .order-card-stop-address,
+.ember-power-select-option[aria-current='true'] .order-card-selection .order-card-stop-address,
+.ember-power-select-option.ember-power-select-option--highlighted .order-card-selection .order-card-stop-address {
+    color: #fff;
+}
+
+.ember-power-select-option[aria-selected='true'] .order-card-selection .order-card-subtitle,
+.ember-power-select-option[aria-current='true'] .order-card-selection .order-card-subtitle,
+.ember-power-select-option.ember-power-select-option--highlighted .order-card-selection .order-card-subtitle,
+.ember-power-select-option[aria-selected='true'] .order-card-selection .order-card-route,
+.ember-power-select-option[aria-current='true'] .order-card-selection .order-card-route,
+.ember-power-select-option.ember-power-select-option--highlighted .order-card-selection .order-card-route,
+.ember-power-select-option[aria-selected='true'] .order-card-selection .order-card-meta,
+.ember-power-select-option[aria-current='true'] .order-card-selection .order-card-meta,
+.ember-power-select-option.ember-power-select-option--highlighted .order-card-selection .order-card-meta,
+.ember-power-select-option[aria-selected='true'] .order-card-selection .order-card-stop-label,
+.ember-power-select-option[aria-current='true'] .order-card-selection .order-card-stop-label,
+.ember-power-select-option.ember-power-select-option--highlighted .order-card-selection .order-card-stop-label {
+    color: rgb(255 255 255 / 78%);
+}
+
+.order-card.is-selected {
+    border-color: #3485e2;
+    box-shadow: 0 0 0 2px rgb(52 133 226 / 16%);
+}
+
+.order-card.is-disabled {
+    opacity: 0.55;
+    pointer-events: none;
+}
+
+.order-card.is-selectable {
+    cursor: pointer;
+}
+
+.order-card-topline,
+.order-card-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.order-card-checkbox {
+    flex: 0 0 auto;
+}
+
+.order-card-title-block {
+    min-width: 0;
+}
+
+.order-card-title {
+    overflow: hidden;
+    color: #111827;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.order-card-subtitle,
+.order-card-meta,
+.issue-detail-timeline-value,
+.issue-detail-coordinate {
+    color: #6b7280;
+    font-size: 0.75rem;
+}
+
+.order-card-header-actions {
+    flex: 0 0 auto;
+}
+
+.order-card-progress {
+    position: relative;
+    height: 0.25rem;
+    margin: 0.625rem 0 0.75rem;
+    overflow: hidden;
+    background: #e5e7eb;
+    border-radius: 9999px;
+}
+
+.order-card-progress span {
+    position: absolute;
+    inset: 0 auto 0 0;
+    background: #3485e2;
+    border-radius: inherit;
+}
+
+.order-card-progress.is-pending span {
+    width: 22%;
+    background: #94a3b8;
+}
+
+.order-card-progress.is-active span {
+    width: 58%;
+}
+
+.order-card-progress.is-complete span {
+    width: 100%;
+    background: #10b981;
+}
+
+.order-card-route {
+    display: grid;
+    gap: 0.5rem;
+    color: #64748b;
+    font-size: 0.75rem;
+}
+
+.order-card-stop {
+    display: grid;
+    grid-template-columns: 1.5rem minmax(0, 1fr);
+    gap: 0.5rem;
+    align-items: start;
+}
+
+.order-card-stop.compact {
+    opacity: 0.88;
+}
+
+.order-card-stop-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: #fff;
+    font-weight: 800;
+    font-size: 0.6875rem;
+    background: #64748b;
+    border-radius: 9999px;
+}
+
+.order-card-stop-marker.pickup {
+    background: #3485e2;
+}
+
+.order-card-stop-marker.dropoff {
+    background: #10b981;
+}
+
+.order-card-stop-marker.middle {
+    color: #2563eb;
+    background: #dbeafe;
+}
+
+.order-card-stop-label {
+    color: #94a3b8;
+    font-weight: 700;
+    font-size: 0.625rem;
+    text-transform: uppercase;
+}
+
+.order-card-stop-address {
+    overflow: hidden;
+    color: #334155;
+    font-weight: 700;
+    font-size: 0.75rem;
+    line-height: 1.2rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.order-card-meta {
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    margin-top: 0.75rem;
+    font-size: 0.6875rem;
+}
+
+.order-card-meta span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.order-card-empty-route {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    margin-top: 0.75rem;
+    color: #6b7280;
+    font-size: 0.75rem;
+    background: #fff;
+    border: 1px dashed #d1d5db;
+    border-radius: 0.375rem;
+}
+
+.issue-detail-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    margin-top: 0.75rem;
+    color: #6b7280;
+    font-size: 0.875rem;
+    background: #f9fafb;
+    border: 1px dashed #e5e7eb;
+    border-radius: 0.5rem;
+}
+
+.issue-detail-empty-compact {
+    padding: 0.75rem;
+    font-size: 0.75rem;
+}
+
+.issue-detail-tags {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 0.375rem;
+    margin-top: 0.75rem;
+}
+
+.issue-detail-timeline {
+    margin-top: 0.75rem;
+}
+
+.issue-detail-timeline > * + * {
+    margin-top: 0.75rem;
+}
+
+.issue-detail-timeline li {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.issue-detail-timeline-marker {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    color: #6b7280;
+    font-size: 0.75rem;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 9999px;
+}
+
+.issue-timeline {
+    margin-top: 0.75rem;
+}
+
+.issue-timeline-loading {
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.issue-timeline-list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.875rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.issue-timeline-list::before {
+    position: absolute;
+    top: 0.875rem;
+    bottom: 0.875rem;
+    left: 0.875rem;
+    width: 1px;
+    background: #d1d5db;
+    content: '';
+}
+
+.issue-timeline-event {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1.75rem minmax(0, 1fr);
+    gap: 0.75rem;
+}
+
+.issue-timeline-marker {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    color: #4b5563;
+    font-size: 0.75rem;
+    background: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 9999px;
+}
+
+.issue-timeline-card {
+    padding: 0.625rem 0.75rem;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.625rem;
+}
+
+.issue-timeline-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.issue-timeline-label {
+    color: #111827;
+    font-weight: 600;
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+}
+
+.issue-timeline-actor,
+.issue-timeline-card time,
+.issue-timeline-card p {
+    color: #6b7280;
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+}
+
+.issue-timeline-card p {
+    margin-top: 0.375rem;
+}
+
+.issue-timeline-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-top: 0.5rem;
+    color: #2563eb;
+    font-weight: 600;
+    font-size: 0.75rem;
+}
+
+.issue-timeline-event.tone-green .issue-timeline-marker {
+    color: #15803d;
+    border-color: #86efac;
+}
+
+.issue-timeline-event.tone-blue .issue-timeline-marker {
+    color: #2563eb;
+    border-color: #93c5fd;
+}
+
+.issue-timeline-event.tone-orange .issue-timeline-marker {
+    color: #d97706;
+    border-color: #fcd34d;
+}
+
+.issue-timeline-event.tone-red .issue-timeline-marker {
+    color: #dc2626;
+    border-color: #fca5a5;
+}
+
+.issue-timeline-event.tone-purple .issue-timeline-marker,
+.issue-timeline-event.tone-indigo .issue-timeline-marker {
+    color: #4f46e5;
+    border-color: #a5b4fc;
+}
+
+.issue-detail-custom-fields {
+    display: block;
+}
+
+@media (width >= 768px) {
+    .issue-detail-summary-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .issue-detail-grid {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .issue-detail-main {
+        grid-column: span 3 / span 3;
+    }
+
+    .issue-detail-side-rail {
+        grid-column: span 2 / span 2;
+    }
+}
+
+@media (width >= 1180px) {
+    .issue-detail-summary-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
+
+body[data-theme='dark'] .issue-panel-header {
+    background: #111827;
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .issue-detail-message,
+body[data-theme='dark'] .issue-detail-correspondence,
+body[data-theme='dark'] .issue-detail-summary-card,
+body[data-theme='dark'] .issue-detail-side-card {
+    background: #1f2937;
+    border-color: #374151;
+    box-shadow:
+        0 10px 15px -3px rgb(0 0 0 / 20%),
+        0 4px 6px -4px rgb(0 0 0 / 20%);
+}
+
+body[data-theme='dark'] .issue-panel-header-icon {
+    background: #111827;
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .issue-detail-report,
+body[data-theme='dark'] .issue-detail-resolution-state,
+body[data-theme='dark'] .order-card,
+body[data-theme='dark'] .issue-detail-empty,
+body[data-theme='dark'] .issue-detail-timeline-marker {
+    background: #374151;
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .issue-panel-header-title,
+body[data-theme='dark'] .issue-detail-message-author,
+body[data-theme='dark'] .issue-detail-resolution-title,
+body[data-theme='dark'] .issue-detail-meta-list dd,
+body[data-theme='dark'] .issue-detail-summary-item dd,
+body[data-theme='dark'] .order-card-title,
+body[data-theme='dark'] .order-card-stop-address,
+body[data-theme='dark'] .issue-detail-report {
+    color: #f9fafb;
+}
+
+body[data-theme='dark'] .issue-panel-header-meta,
+body[data-theme='dark'] .issue-detail-message-subtitle,
+body[data-theme='dark'] .issue-detail-message-meta time,
+body[data-theme='dark'] .issue-detail-section-header p,
+body[data-theme='dark'] .issue-detail-resolution-state p,
+body[data-theme='dark'] .issue-detail-meta-list dt,
+body[data-theme='dark'] .issue-detail-summary-item dt,
+body[data-theme='dark'] .issue-detail-resource-label,
+body[data-theme='dark'] .issue-detail-timeline-label,
+body[data-theme='dark'] .order-card-subtitle,
+body[data-theme='dark'] .order-card-route,
+body[data-theme='dark'] .order-card-meta,
+body[data-theme='dark'] .issue-detail-timeline-value,
+body[data-theme='dark'] .issue-detail-coordinate,
+body[data-theme='dark'] .issue-detail-empty {
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .issue-panel-header-id {
+    color: #9ca3af;
+    background: #111827;
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .issue-panel-header-id:hover {
+    color: #93c5fd;
+}
+
+body[data-theme='dark'] .issue-detail-documents {
+    border-top-color: #374151;
+}
+
+body[data-theme='dark'] .issue-detail-documents-title,
+body[data-theme='dark'] .issue-detail-section-title {
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .issue-detail-upload-row {
+    color: #dbeafe;
+    background: #1e3a8a;
+    border-color: #1e40af;
+}
+
+body[data-theme='dark'] .issue-detail-resolution-icon {
+    color: #fde68a;
+    background: #78350f;
+}
+
+body[data-theme='dark'] .issue-detail-resolution-state.is-resolved .issue-detail-resolution-icon {
+    color: #bbf7d0;
+    background: #14532d;
+}
+
+body[data-theme='dark'] .issue-detail-meta-list > div {
+    border-top-color: #374151;
+}
+
+body[data-theme='dark'] .order-card.is-interactive:hover {
+    background: #374151;
+    border-color: #2563eb;
+}
+
+body[data-theme='dark'] .issue-detail-avatar {
+    color: #bfdbfe;
+    background: #1e3a8a;
+}
+
+body[data-theme='dark'] .order-card-progress {
+    background: #4b5563;
+}
+
+body[data-theme='dark'] .order-card-stop-marker.middle {
+    color: #93c5fd;
+    background: rgb(37 99 235 / 24%);
+}
+
+body[data-theme='dark'] .order-card-empty-route {
+    color: #9ca3af;
+    background: #1f2937;
+    border-color: #4b5563;
+}
+
+body[data-theme='dark'] .order-card-selection {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+body[data-theme='dark'] .issue-detail-dropzone {
+    color: #d1d5db;
+    background: #1f2937;
+    border-color: #4b5563;
+}
+
+body[data-theme='dark'] .issue-detail-dropzone-empty svg,
+body[data-theme='dark'] .issue-detail-dropzone-ready svg {
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .issue-detail-upload-link,
+body[data-theme='dark'] .issue-detail-dropzone-progress,
+body[data-theme='dark'] .issue-timeline-link {
+    color: #93c5fd;
+}
+
+body[data-theme='dark'] .issue-timeline-list::before {
+    background: #4b5563;
+}
+
+body[data-theme='dark'] .issue-timeline-marker,
+body[data-theme='dark'] .issue-timeline-card {
+    background: #1f2937;
+    border-color: #4b5563;
+}
+
+body[data-theme='dark'] .issue-timeline-label {
+    color: #f9fafb;
+}
+
+body[data-theme='dark'] .issue-timeline-actor,
+body[data-theme='dark'] .issue-timeline-card time,
+body[data-theme='dark'] .issue-timeline-card p {
+    color: #d1d5db;
+}