/* /Components/ConsigneeTrackingDetail.razor.rz.scp.css */
/* One shipment, phone first. Below 600px: a single column, stages running
   down the page with a sentence each. From 600px: stages run across, and
   the particulars and the activity sit side by side. */

.consignee-detail-container[b-80lgfb2iiq] {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[b-80lgfb2iiq] .consignee-back {
    min-height: 44px;
    margin-left: -8px;
}

.consignee-detail-status[b-80lgfb2iiq],
.consignee-detail-card[b-80lgfb2iiq] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}

.consignee-detail-status[b-80lgfb2iiq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.consignee-detail-status-top[b-80lgfb2iiq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.consignee-detail-po[b-80lgfb2iiq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.consignee-detail-stage[b-80lgfb2iiq] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.consignee-detail-stage-name[b-80lgfb2iiq] {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.consignee-detail-stage-estimated-time-of-arrival[b-80lgfb2iiq] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.consignee-detail-stage-estimated-time-of-arrival.late[b-80lgfb2iiq] {
    color: var(--color-critical);
}

.consignee-detail-stage-estimated-time-of-arrival.done[b-80lgfb2iiq] {
    color: var(--color-success);
}

.consignee-detail-stage-desc[b-80lgfb2iiq] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-main);
}

.consignee-detail-updated[b-80lgfb2iiq] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.consignee-detail-alert[b-80lgfb2iiq] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.5;
}

.consignee-detail-alert.critical[b-80lgfb2iiq] {
    background: var(--color-critical-bg);
    border: 1px solid rgba(198, 40, 40, 0.3);
    color: var(--color-critical);
}

.consignee-detail-alert.warning[b-80lgfb2iiq] {
    background: var(--color-warning-bg);
    border: 1px solid rgba(230, 81, 0, 0.25);
    color: var(--color-warning-text);
}

.consignee-detail-alert .material-symbols-outlined[b-80lgfb2iiq] {
    font-size: 18px;
    margin-top: 1px;
}

.consignee-detail-card-title[b-80lgfb2iiq] {
    margin: 0 0 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-main);
}

/* --- Stages: across by default (tablet and up) --- */
.consignee-detail-steps[b-80lgfb2iiq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.consignee-detail-step[b-80lgfb2iiq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.consignee-detail-step-track[b-80lgfb2iiq] {
    display: flex;
    align-items: center;
}

.consignee-detail-step-dot[b-80lgfb2iiq] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
}

.consignee-detail-step.completed .consignee-detail-step-dot[b-80lgfb2iiq] {
    background: var(--color-success);
    border-color: var(--color-success);
}

.consignee-detail-step.current .consignee-detail-step-dot[b-80lgfb2iiq] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.consignee-detail-step-line[b-80lgfb2iiq] {
    flex-grow: 1;
    height: 2px;
    margin: 0 6px;
    background: var(--color-border);
}

.consignee-detail-step.completed .consignee-detail-step-line[b-80lgfb2iiq] {
    background: var(--color-success);
}

.consignee-detail-step-body[b-80lgfb2iiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consignee-detail-step-name[b-80lgfb2iiq] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.consignee-detail-step.completed .consignee-detail-step-name[b-80lgfb2iiq] {
    color: var(--color-text-main);
}

.consignee-detail-step.current .consignee-detail-step-name[b-80lgfb2iiq] {
    color: var(--color-primary-dark, #0D47A1);
    font-weight: 700;
}

/* Across, there is no room for a sentence per stage; the status block
   above already explains the current one. */
.consignee-detail-step-desc[b-80lgfb2iiq] {
    display: none;
}

.consignee-detail-step-date[b-80lgfb2iiq] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* --- Particulars and activity --- */
.consignee-detail-columns[b-80lgfb2iiq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.consignee-detail-facts[b-80lgfb2iiq] {
    margin: 0;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px 12px;
    font-size: 0.875rem;
}

.consignee-detail-facts dt[b-80lgfb2iiq] {
    color: var(--color-text-secondary);
}

.consignee-detail-facts dd[b-80lgfb2iiq] {
    margin: 0;
    color: var(--color-text-main);
    overflow-wrap: anywhere;
}

.consignee-detail-chips[b-80lgfb2iiq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Reference Chip (DESIGN.md): an identifier as a value, in mono on Quay Grey. */
.consignee-ref-chip[b-80lgfb2iiq] {
    display: inline-flex;
    align-items: center;
    min-height: 32px; /* tappable now, so the portal's 32px floor applies */
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-main);
    cursor: pointer;
}

.consignee-ref-chip:hover[b-80lgfb2iiq] {
    border-color: var(--color-text-secondary);
}

.consignee-detail-log[b-80lgfb2iiq] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.consignee-detail-log li[b-80lgfb2iiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-row-border);
    font-size: 0.875rem;
    color: var(--color-text-main);
}

.consignee-detail-log li:last-child[b-80lgfb2iiq] {
    border-bottom: 0;
}

.consignee-detail-log-time[b-80lgfb2iiq] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* --- Phone: one column, stages down the page --- */
@media (max-width: 599.98px) {
    .consignee-detail-status[b-80lgfb2iiq],
    .consignee-detail-card[b-80lgfb2iiq] {
        padding: 14px 16px;
    }

    .consignee-detail-stage-name[b-80lgfb2iiq] {
        font-size: 1.5rem;
    }

    .consignee-detail-steps[b-80lgfb2iiq] {
        display: flex;
        flex-direction: column;
    }

    .consignee-detail-step[b-80lgfb2iiq] {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        column-gap: 12px;
    }

    .consignee-detail-step-track[b-80lgfb2iiq] {
        flex-direction: column;
        align-items: center;
        padding-top: 3px;
    }

    .consignee-detail-step-line[b-80lgfb2iiq] {
        width: 2px;
        height: auto;
        flex-grow: 1;
        min-height: 24px;
        margin: 4px 0;
    }

    .consignee-detail-step-body[b-80lgfb2iiq] {
        padding-bottom: 16px;
    }

    .consignee-detail-step-name[b-80lgfb2iiq] {
        font-size: 0.9375rem;
    }

    .consignee-detail-step-desc[b-80lgfb2iiq] {
        display: block;
        font-size: 0.8125rem;
        line-height: 1.5;
        color: var(--color-text-secondary);
    }

    .consignee-detail-step-date[b-80lgfb2iiq] {
        padding-top: 1px;
    }

    .consignee-detail-columns[b-80lgfb2iiq] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Dashboard/KpiDetailCard.razor.rz.scp.css */
.kpi-detail-card[b-9p6zfo9w2w] {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default);
    padding: 16px;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    overflow: hidden;
}

.kpi-detail-card:hover[b-9p6zfo9w2w] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kpi-detail-header[b-9p6zfo9w2w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kpi-detail-name[b-9p6zfo9w2w] {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.kpi-detail-badge[b-9p6zfo9w2w] {
    font-size: 0.625rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--color-background);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.kpi-detail-body[b-9p6zfo9w2w] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.kpi-detail-value-row[b-9p6zfo9w2w] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.kpi-detail-value[b-9p6zfo9w2w] {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
}

.kpi-detail-unit[b-9p6zfo9w2w] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.kpi-detail-trend[b-9p6zfo9w2w] {
    font-size: 0.875rem;
    font-weight: 700;
}

.trend-good[b-9p6zfo9w2w] {
    color: var(--color-success);
}

.trend-bad[b-9p6zfo9w2w] {
    color: var(--color-critical);
}

.kpi-detail-footer[b-9p6zfo9w2w] {
    margin-top: 8px;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
}

/* Risk level indicator bar at bottom */
.kpi-detail-indicator[b-9p6zfo9w2w] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

/* Risk level colors */
.kpi-risk-green .kpi-detail-indicator[b-9p6zfo9w2w] {
    background: var(--color-success);
}

.kpi-risk-green .kpi-detail-value[b-9p6zfo9w2w] {
    color: var(--color-text-main);
}

.kpi-risk-yellow .kpi-detail-indicator[b-9p6zfo9w2w] {
    background: var(--color-warning);
}

.kpi-risk-yellow .kpi-detail-value[b-9p6zfo9w2w] {
    color: var(--color-warning);
}

.kpi-risk-red .kpi-detail-indicator[b-9p6zfo9w2w] {
    background: var(--color-critical);
}

.kpi-risk-red .kpi-detail-value[b-9p6zfo9w2w] {
    color: var(--color-critical);
}
/* /Components/Shipment/ShipmentActivityFeed.razor.rz.scp.css */
.shipment-activity-feed[b-bb360u06n2] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.key-events-toggle[b-bb360u06n2] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #5F6368);
    user-select: none;
}

.feed-checkbox[b-bb360u06n2] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-primary, #1565C0);
    cursor: pointer;
}

.key-events-label[b-bb360u06n2] {
    cursor: pointer;
}

.feed-empty[b-bb360u06n2] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #5F6368);
}

/* Feed Stream: time | dot | title + subline */
.feed-stream[b-bb360u06n2] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 520px;
    padding: 0 4px;
}

.feed-item[b-bb360u06n2] {
    display: grid;
    grid-template-columns: 96px 12px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-row-border, #EEF0F2);
}

.feed-time[b-bb360u06n2] {
    font-size: 0.75rem;
    line-height: 1.5rem;
    color: var(--color-text-secondary, #5F6368);
}

.feed-dot[b-bb360u06n2] {
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--color-text-muted, #9AA0A6);
}

.feed-dot.tone-operator[b-bb360u06n2] {
    background: var(--color-primary, #1565C0);
}

.feed-dot.tone-external[b-bb360u06n2] {
    background: var(--color-warning-text, #E65100);
}

.feed-dot.tone-system[b-bb360u06n2] {
    background: var(--color-text-secondary, #5F6368);
}

.feed-dot.tone-error[b-bb360u06n2] {
    background: var(--color-critical, #C62828);
}

.feed-title[b-bb360u06n2] {
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--color-text-main, #1A1C1E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-subline[b-bb360u06n2] {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #5F6368);
}

@media (max-width: 600px) {
    .feed-item[b-bb360u06n2] {
        grid-template-columns: 12px minmax(0, 1fr);
        row-gap: 2px;
    }

    .feed-time[b-bb360u06n2] {
        grid-column: 2;
        grid-row: 2;
        line-height: 1rem;
    }
}
/* /Components/Shipment/ShipmentDocumentsCard.razor.rz.scp.css */
.shipment-docs-card[b-76x5e2q9jz] {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E0E3E7);
    border-radius: var(--radius-default, 4px);
    padding: 16px 18px;
    margin-bottom: 12px;
}

.docs-card-title[b-76x5e2q9jz] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-main, #1A1C1E);
}

.docs-ratio[b-76x5e2q9jz] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #5F6368);
}

/* Progress track: uploaded | overdue | due soon, each segment sized by count */
.docs-progress-track[b-76x5e2q9jz] {
    width: 100%;
    height: 6px;
    background: var(--color-border, #E0E3E7);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    gap: 2px;
}

.docs-progress-fill[b-76x5e2q9jz] {
    height: 100%;
    flex-basis: 0;
}

.docs-progress-fill.success[b-76x5e2q9jz] {
    background: var(--color-success, #2E7D32);
}

.docs-progress-fill.critical[b-76x5e2q9jz] {
    background: var(--color-critical, #C62828);
}

.docs-progress-fill.warning[b-76x5e2q9jz] {
    background: var(--color-warning, #F9A825);
}

/* List rows */
.docs-list[b-76x5e2q9jz] {
    display: flex;
    flex-direction: column;
}

.docs-row[b-76x5e2q9jz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
}

.docs-icon[b-76x5e2q9jz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.docs-icon.success[b-76x5e2q9jz] {
    background: var(--color-success-bg, #E8F5E9);
    color: var(--color-success, #2E7D32);
}

.docs-icon.critical[b-76x5e2q9jz] {
    background: var(--color-critical-bg, #FFEBEE);
    color: var(--color-critical, #C62828);
}

.docs-icon.warning[b-76x5e2q9jz] {
    background: var(--color-warning-bg, #FFF8E1);
    color: var(--color-warning-text, #E65100);
}

.docs-icon.muted[b-76x5e2q9jz] {
    background: var(--color-surface-subtle, #FAFBFC);
    color: var(--color-text-muted, #9AA0A6);
}

.docs-name[b-76x5e2q9jz] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-main, #1A1C1E);
}

.docs-status-text[b-76x5e2q9jz] {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #5F6368);
}

.docs-status-text.critical[b-76x5e2q9jz] {
    color: var(--color-critical, #C62828);
    font-weight: 600;
}

.docs-status-text.warning[b-76x5e2q9jz] {
    color: var(--color-warning-text, #E65100);
    font-weight: 600;
}

.docs-status-text.muted[b-76x5e2q9jz] {
    color: var(--color-text-muted, #9AA0A6);
}

.docs-empty[b-76x5e2q9jz] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #9AA0A6);
}
/* /Components/Shipment/ShipmentHorizontalStepper.razor.rz.scp.css */
.shipment-stepper-card[b-4yqzawfl4m] {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E0E3E7);
    border-radius: var(--radius-default, 4px);
    padding: 16px 20px 14px 20px;
    margin-bottom: 12px;
    box-shadow: none;
    overflow-x: auto;
}

.stepper-horizontal-track[b-4yqzawfl4m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 760px;
    width: 100%;
    position: relative;
}

.stepper-col[b-4yqzawfl4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    text-align: center;
    min-width: 68px;
}

/* Node Label (Top) */
.stepper-node-title[b-4yqzawfl4m] {
    font-family: 'Space Grotesk', var(--font-display, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 8px;
    white-space: nowrap;
    color: var(--color-text-secondary, #5F6368);
    transition: color 0.2s ease;
}

.stepper-node-title.completed[b-4yqzawfl4m] {
    color: var(--color-text-main, #1A1C1E);
    font-weight: 600;
}

.stepper-node-title.current[b-4yqzawfl4m] {
    color: var(--color-primary, #1565C0);
    font-weight: 700;
}

.stepper-node-title.stalled[b-4yqzawfl4m] {
    color: var(--color-critical, #C62828);
    font-weight: 700;
}

.stepper-node-title.future[b-4yqzawfl4m] {
    color: var(--color-text-muted, #9AA0A6);
}

/* Rail & Dots Row */
.stepper-node-rail[b-4yqzawfl4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    height: 24px;
}

.stepper-rail-line[b-4yqzawfl4m] {
    position: absolute;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    z-index: 1;
}

.stepper-rail-line.left[b-4yqzawfl4m] {
    left: 0;
    right: 50%;
}

.stepper-rail-line.right[b-4yqzawfl4m] {
    left: 50%;
    right: 0;
}

.stepper-rail-line.completed[b-4yqzawfl4m] {
    background: var(--color-success, #2E7D32);
}

.stepper-rail-line.future[b-4yqzawfl4m] {
    background: var(--color-border, #E0E3E7);
}

/* Dot circle */
.stepper-dot-circle[b-4yqzawfl4m] {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    transition: all 0.2s ease;
}

.stepper-dot-circle.completed[b-4yqzawfl4m] {
    background: var(--color-success, #2E7D32);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
}

[b-4yqzawfl4m] .stepper-dot-circle.completed .mud-icon-root {
    color: #FFFFFF !important;
    font-size: 15px !important;
}

.stepper-dot-circle.current[b-4yqzawfl4m] {
    background: var(--color-primary, #1565C0);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25);
}

.stepper-current-dot[b-4yqzawfl4m] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
}

.stepper-dot-circle.stalled[b-4yqzawfl4m] {
    background: var(--color-critical, #C62828) !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25) !important;
}

.stepper-stalled-mark[b-4yqzawfl4m] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

.stepper-dot-circle.future[b-4yqzawfl4m] {
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E0E3E7);
}

.stepper-future-dot[b-4yqzawfl4m] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border, #E0E3E7);
}

/* Date / Stagnation (Bottom) */
.stepper-date-row[b-4yqzawfl4m] {
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    line-height: 1.2;
    min-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-date-text[b-4yqzawfl4m] {
    color: var(--color-text-secondary, #5F6368);
    font-weight: 500;
}

.stepper-stalled-text[b-4yqzawfl4m] {
    color: var(--color-critical, #C62828);
    font-weight: 700;
    white-space: nowrap;
}

.stepper-date-empty[b-4yqzawfl4m] {
    color: var(--color-text-muted, #9AA0A6);
}
/* /Components/Shipment/ShipmentKeyInfoCard.razor.rz.scp.css */
.shipment-key-info-card[b-zjcex7myye] {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E0E3E7);
    border-radius: var(--radius-default, 4px);
    padding: 16px 18px;
    margin-bottom: 12px;
}

.key-info-title[b-zjcex7myye] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-main, #1A1C1E);
}

/* Label column + value column, values left-aligned */
.key-info-list[b-zjcex7myye] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 10px;
    margin: 0;
}

.key-info-label[b-zjcex7myye] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #5F6368);
}

.key-info-value[b-zjcex7myye] {
    margin: 0;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-main, #1A1C1E);
    overflow-wrap: anywhere;
}

.text-muted[b-zjcex7myye] {
    color: var(--color-text-muted, #9AA0A6);
}

.container-line[b-zjcex7myye] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.container-track-link[b-zjcex7myye] {
    font-size: 0.75rem;
    color: var(--color-primary, #1565C0);
    text-decoration: underline;
}

/* Copy affordance only on hover/focus, so the resting card matches the design */
.copyable[b-zjcex7myye] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.copyable[b-zjcex7myye]  .copy-button {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.copyable:hover[b-zjcex7myye]  .copy-button,
.copyable[b-zjcex7myye]  .copy-button:focus-visible {
    opacity: 1;
}

.key-info-flag[b-zjcex7myye] {
    margin-left: 6px;
    font-weight: 600;
}

.key-info-flag.critical[b-zjcex7myye] {
    color: var(--color-critical, #C62828);
}

.key-info-flag.warning[b-zjcex7myye] {
    color: var(--color-warning-text, #E65100);
}

.key-info-flag.success[b-zjcex7myye] {
    color: var(--color-success, #2E7D32);
}

.sync-failed[b-zjcex7myye] {
    color: var(--color-critical, #C62828);
    font-weight: 600;
}
/* /Components/Shipment/ShipmentNextStepBar.razor.rz.scp.css */
.next-step-blocker-banner[b-jcydzhkhv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: #FFF8E1;
    border: 1px solid rgba(230, 81, 0, 0.35);
    border-radius: var(--radius-default, 4px);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.blocker-title[b-jcydzhkhv2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-warning-text, #E65100);
}
/* /Components/Shipment/UnifiedTimeline.razor.rz.scp.css */
/* UnifiedTimeline — MudTimeline-based container-aware timeline with inline date editing */

.unified-timeline-container[b-09abg0uxkd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Container Selector Chips ===== */

.container-selector[b-09abg0uxkd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

/* ===== Timeline Item Content ===== */

.timeline-item-header[b-09abg0uxkd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.timeline-item-header:hover[b-09abg0uxkd] {
    background: rgba(0, 0, 0, 0.03);
}

/* State name color variants */
.timeline-name-completed[b-09abg0uxkd] {
    color: var(--color-success) !important;
}

.timeline-name-current[b-09abg0uxkd] {
    color: var(--color-primary) !important;
}

.timeline-name-future[b-09abg0uxkd] {
    color: var(--color-text-secondary) !important;
}

/* Date display */
.timeline-date-actual[b-09abg0uxkd] {
    color: var(--color-success) !important;
    font-weight: 600 !important;
}

.timeline-date-estimated[b-09abg0uxkd] {
    color: var(--color-text-secondary) !important;
    font-style: italic !important;
}

/* ===== Inline Expanded Detail ===== */

.timeline-detail[b-09abg0uxkd] {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default, 4px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Date fields (shared by detail panel) */
.date-field-row[b-09abg0uxkd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-field-label[b-09abg0uxkd] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 80px;
}

.date-field-value[b-09abg0uxkd] {
    font-size: 0.8125rem;
    color: var(--color-text-main);
}

.date-field-empty[b-09abg0uxkd] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.date-range[b-09abg0uxkd] {
    font-style: italic;
}

/* State logs */
.state-logs[b-09abg0uxkd] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.state-log-entry[b-09abg0uxkd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.log-timestamp[b-09abg0uxkd] {
    color: var(--color-text-secondary);
}

.log-operator[b-09abg0uxkd] {
    color: var(--color-primary);
    font-weight: 600;
}

.log-notes[b-09abg0uxkd] {
    color: var(--color-text-main);
    font-style: italic;
}

/* ===== Advance Action ===== */

.advance-action[b-09abg0uxkd] {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

/* ===== Financial Section ===== */

.financial-section[b-09abg0uxkd] {
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.financial-dates[b-09abg0uxkd] {
    display: flex;
    gap: 24px;
}

.financial-item[b-09abg0uxkd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ===== Vertical Stepper for Compact / Drawer Mode ===== */

.vertical-stepper[b-09abg0uxkd] {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 2px;
}

/* --- Vertical Stepper (Compact / Drawer Mode) --- */
.vertical-stepper[b-09abg0uxkd] {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.stepper-step[b-09abg0uxkd] {
    display: flex;
    position: relative;
    min-height: 48px;
}

.stepper-rail[b-09abg0uxkd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
    margin-right: 14px;
    position: relative;
}

.stepper-dot[b-09abg0uxkd] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    background: var(--color-surface, #ffffff);
    transition: all 0.2s ease;
}

.stepper-dot.completed[b-09abg0uxkd] {
    background: var(--color-success, #2e7d32);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.stepper-dot.current[b-09abg0uxkd] {
    position: relative;
    background: #ffffff;
    border: 2px solid var(--color-primary, #1565C0);
}

.pulse-ring[b-09abg0uxkd] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--color-primary, #1565C0);
    animation: stepper-pulse-b-09abg0uxkd 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-center[b-09abg0uxkd] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary, #1565C0);
}

@keyframes stepper-pulse-b-09abg0uxkd {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.4); opacity: 0; }
}

.stepper-dot.future[b-09abg0uxkd] {
    background: var(--color-surface, #ffffff);
    border: 2px solid var(--color-border, #E0E3E7);
}

.stepper-number[b-09abg0uxkd] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-text-secondary, #5F6368);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.stepper-line[b-09abg0uxkd] {
    width: 2px;
    flex-grow: 1;
    min-height: 26px;
    margin: 2px 0;
    transition: background 0.2s ease;
}

.stepper-line.completed[b-09abg0uxkd] {
    background: var(--color-success, #2e7d32);
}

.stepper-line.future[b-09abg0uxkd] {
    background: var(--color-border, #E0E3E7);
}

.stepper-content[b-09abg0uxkd] {
    flex-grow: 1;
    padding-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stepper-header[b-09abg0uxkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.stepper-title[b-09abg0uxkd] {
    font-size: 0.85rem;
    font-weight: 600;
}

.stepper-title.completed[b-09abg0uxkd] {
    color: var(--color-text-main, #1A1C1E);
}

.stepper-title.current[b-09abg0uxkd] {
    color: var(--color-primary, #1565C0);
    font-weight: 700;
}

.stepper-title.future[b-09abg0uxkd] {
    color: var(--color-text-secondary, #5F6368);
    font-weight: 500;
}

.stepper-node-badge[b-09abg0uxkd] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #5F6368);
    font-weight: 400;
    margin-left: 2px;
}

.stepper-date-actual[b-09abg0uxkd] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-success, #2e7d32);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    margin-left: auto;
}

.stepper-date-estimated[b-09abg0uxkd] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #5F6368);
    font-style: italic;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    margin-left: auto;
}

.stepper-date-missing[b-09abg0uxkd] {
    font-size: 0.75rem;
    color: var(--color-secondary, #ff8f00);
    font-weight: 600;
    margin-left: auto;
}

.stepper-doc-chips[b-09abg0uxkd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.stepper-doc-tag[b-09abg0uxkd] {
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--color-text-secondary, #5F6368);
    background: var(--color-background, #F5F7FA);
    border: 1px solid var(--color-border, #E0E3E7);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 18px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
    user-select: none;
}

.stepper-doc-tag:hover[b-09abg0uxkd] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.stepper-doc-tag.uploaded[b-09abg0uxkd] {
    color: var(--color-success, #2e7d32);
    background: rgba(46, 125, 50, 0.08);
    border-color: rgba(46, 125, 50, 0.28);
}

.stepper-doc-tag.warning[b-09abg0uxkd] {
    color: var(--color-warning-text, #e65100);
    background: rgba(255, 143, 0, 0.1);
    border-color: rgba(255, 143, 0, 0.35);
}

.stepper-doc-tag.overdue[b-09abg0uxkd] {
    color: var(--color-critical, #c62828);
    background: rgba(198, 40, 40, 0.08);
    border-color: rgba(198, 40, 40, 0.3);
}

.stepper-current-body[b-09abg0uxkd] {
    background: rgba(21, 101, 192, 0.04);
    border: 1px solid rgba(21, 101, 192, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.current-date-row[b-09abg0uxkd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.state-distribution[b-09abg0uxkd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.state-distribution-item[b-09abg0uxkd] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}

.container-selector-dropdown[b-09abg0uxkd] {
    padding-bottom: 8px;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
    .date-field-row[b-09abg0uxkd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .financial-dates[b-09abg0uxkd] {
        flex-direction: column;
        gap: 8px;
    }
}