@fleetbase/fleetops-engine 0.6.49 → 0.6.51

package/addon/styles/fleetops-engine.css

@@ -345,6 +345,51 @@ body.fleetbase-console .next-content-overlay > .next-content-overlay-panel-conta
     gap: 0.5rem;
 }
 
+.fleetops-order-form-waypoint {
+    position: relative;
+}
+
+.fleetops-order-form-waypoint--required {
+    border-color: #f97316 !important;
+    padding-top: 1.25rem;
+    box-shadow:
+        0 1px 3px 0 rgb(249 115 22 / 15%),
+        0 0 0 1px rgb(249 115 22 / 10%);
+}
+
+.fleetops-order-form-waypoint__required-tab {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    border-top-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+    background-color: #f97316;
+    color: #fff7ed;
+    padding: 0.15rem 0.5rem;
+    font-size: 0.62rem;
+    font-weight: 700;
+    line-height: 1.2;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+.fleetops-order-form-waypoint__marker {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 3.25rem;
+    padding-top: 0.15rem;
+}
+
+.fleetops-order-form-waypoint__badge {
+    min-width: 1.65rem;
+    width: 1.65rem;
+    height: 1.65rem;
+    font-size: 0.75rem;
+    flex-shrink: 0;
+}
+
 .fleetops-route-editor-empty-state {
     border: 1px dashed rgb(75 85 99 / 75%);
     border-radius: 0.5rem;
@@ -464,7 +509,52 @@ body[data-theme='light'] .flow-activity-status-pill text {
 .activity-flow-graph-container {
     position: relative;
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 16rem);
+    min-height: 24rem;
+    overflow: auto hidden;
+    scrollbar-width: none;
+}
+
+.activity-flow-graph-container > .joint-js-paper {
+    min-width: 100%;
+    max-width: none;
+    overflow: visible;
+}
+
+.activity-flow-graph-container::-webkit-scrollbar {
+    display: none;
+}
+
+.activity-flow-horizontal-scrollbar {
+    position: fixed;
+    bottom: 0;
+    z-index: 100;
+    height: 12px;
+    overflow: auto hidden;
+    background-color: transparent;
+    scrollbar-color: #6b7280 transparent;
+    scrollbar-width: thin;
+}
+
+.activity-flow-horizontal-scrollbar.is-hidden {
+    display: none;
+}
+
+.activity-flow-horizontal-scrollbar-content {
+    height: 1px;
+}
+
+.activity-flow-horizontal-scrollbar::-webkit-scrollbar {
+    height: 8px;
+}
+
+.activity-flow-horizontal-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #6b7280;
+    border-radius: 9999px;
+}
+
+.activity-flow-horizontal-scrollbar::-webkit-scrollbar-track {
+    background-color: transparent;
 }
 
 .activity-flow-zoom-controls {
@@ -4824,3 +4914,1039 @@ 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;
+}
+
+.issue-detail-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;
+}
+
+.issue-detail-order-card:hover {
+    background: #eff6ff;
+    border-color: #93c5fd;
+}
+
+.issue-detail-order-topline,
+.issue-detail-order-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.issue-detail-order-title-block {
+    min-width: 0;
+}
+
+.issue-detail-order-title {
+    overflow: hidden;
+    color: #111827;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.issue-detail-order-subtitle,
+.issue-detail-order-meta,
+.issue-detail-timeline-value,
+.issue-detail-coordinate {
+    color: #6b7280;
+    font-size: 0.75rem;
+}
+
+.issue-detail-order-progress {
+    position: relative;
+    height: 0.25rem;
+    margin: 0.625rem 0 0.75rem;
+    overflow: hidden;
+    background: #e5e7eb;
+    border-radius: 9999px;
+}
+
+.issue-detail-order-progress span {
+    position: absolute;
+    inset: 0 auto 0 0;
+    background: #3485e2;
+    border-radius: inherit;
+}
+
+.issue-detail-order-progress.is-pending span {
+    width: 22%;
+    background: #94a3b8;
+}
+
+.issue-detail-order-progress.is-active span {
+    width: 58%;
+}
+
+.issue-detail-order-progress.is-complete span {
+    width: 100%;
+    background: #10b981;
+}
+
+.issue-detail-order-route {
+    display: grid;
+    gap: 0.5rem;
+    color: #64748b;
+    font-size: 0.75rem;
+}
+
+.issue-detail-order-stop {
+    display: grid;
+    grid-template-columns: 1.5rem minmax(0, 1fr);
+    gap: 0.5rem;
+    align-items: start;
+}
+
+.issue-detail-order-stop.compact {
+    opacity: 0.88;
+}
+
+.issue-detail-order-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;
+}
+
+.issue-detail-order-stop-marker.pickup {
+    background: #3485e2;
+}
+
+.issue-detail-order-stop-marker.dropoff {
+    background: #10b981;
+}
+
+.issue-detail-order-stop-marker.middle {
+    color: #2563eb;
+    background: #dbeafe;
+}
+
+.issue-detail-order-stop-label {
+    color: #94a3b8;
+    font-weight: 700;
+    font-size: 0.625rem;
+    text-transform: uppercase;
+}
+
+.issue-detail-order-stop-address {
+    overflow: hidden;
+    color: #334155;
+    font-weight: 700;
+    font-size: 0.75rem;
+    line-height: 1.2rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.issue-detail-order-meta {
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    margin-top: 0.75rem;
+    font-size: 0.6875rem;
+}
+
+.issue-detail-order-meta span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.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'] .issue-detail-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'] .issue-detail-order-title,
+body[data-theme='dark'] .issue-detail-order-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'] .issue-detail-order-subtitle,
+body[data-theme='dark'] .issue-detail-order-route,
+body[data-theme='dark'] .issue-detail-order-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'] .issue-detail-order-card:hover {
+    background: #374151;
+    border-color: #2563eb;
+}
+
+body[data-theme='dark'] .issue-detail-avatar {
+    color: #bfdbfe;
+    background: #1e3a8a;
+}
+
+body[data-theme='dark'] .issue-detail-order-progress {
+    background: #4b5563;
+}
+
+body[data-theme='dark'] .issue-detail-order-stop-marker.middle {
+    color: #93c5fd;
+    background: rgb(37 99 235 / 24%);
+}
+
+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;
+}