/* Trip requisition detail & trip detail pages */

.page-manager-trip-requisition-detail,
.page-manager-trip-requisition-edit,
.page-manager-trip-detail,
.page-manager-trips-list,
.page-manager-trips-en-route,
.page-manager-trips-delivered,
.page-manager-trips-detail,
.page-manager-armed-responses,
.page-manager-armed-detail {
    display: grid;
    gap: 1.25rem;
}

.page-manager-trip-requisition-detail {
    padding-bottom: 0.5rem;
}

.page-manager-trip-requisition-detail .mgr-detail-layout {
    grid-template-columns: 1fr;
    gap: 1.15rem;
}

.page-manager-trip-requisition-detail .mgr-detail-fields.mgr-po-req-overview-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 1rem 1.15rem 1.15rem;
}

@media (max-width: 768px) {
    .page-manager-trip-requisition-detail .mgr-detail-fields.mgr-po-req-overview-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .page-manager-trip-requisition-detail .mgr-detail-fields.mgr-po-req-overview-fields {
        grid-template-columns: 1fr;
    }
}

/* Trip detail — Client & Vehicle cards span full width with four field columns */
.page-manager-trips-detail .mgr-detail-card.mgr-detail-card--wide,
.page-manager-trip-detail .mgr-detail-card.mgr-detail-card--wide {
    grid-column: 1 / -1;
    width: 100%;
}

.page-manager-trips-detail .mgr-detail-fields.mgr-detail-fields--cols-4,
.page-manager-trip-detail .mgr-detail-fields.mgr-detail-fields--cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .page-manager-trips-detail .mgr-detail-fields.mgr-detail-fields--cols-4,
    .page-manager-trip-detail .mgr-detail-fields.mgr-detail-fields--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .page-manager-trips-detail .mgr-detail-fields.mgr-detail-fields--cols-4,
    .page-manager-trip-detail .mgr-detail-fields.mgr-detail-fields--cols-4 {
        grid-template-columns: 1fr !important;
    }
}

.mgr-po-req-hero__badge {
    background: color-mix(in srgb, #d68910 14%, transparent);
    color: #d68910;
}

.mgr-po-req-stat--accent {
    border-color: color-mix(in srgb, #d68910 28%, var(--vs-border));
    background: color-mix(in srgb, #d68910 6%, var(--vs-bg-card));
}

.mgr-po-req-stat__hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vs-text-muted);
}

.mgr-po-req-kind-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    grid-column: 1 / -1;
    margin: 0.15rem 0 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-left: 3px solid var(--vs-accent);
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--vs-accent) 8%, transparent), transparent 55%),
        color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card));
}

.mgr-po-req-kind-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-card));
    color: var(--vs-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mgr-po-req-kind-banner strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--vs-text);
}

.mgr-po-req-kind-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--vs-text-muted);
}

.mgr-po-escort-change-pill {
    display: inline-flex;
    margin-left: 0.45rem;
    vertical-align: middle;
}

.mgr-po-truck-table-wrap {
    margin: 0 1.25rem 1.35rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    overflow: auto;
}

.mgr-po-truck-table {
    margin: 0;
}

.mgr-po-truck-table th:last-child,
.mgr-po-truck-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.mgr-po-truck-row.is-clickable {
    cursor: pointer;
}

.mgr-po-truck-row__link {
    pointer-events: auto;
}

.mgr-po-truck-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1.15rem 1.25rem 1.35rem;
}

.mgr-po-truck-card {
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.25rem 1.2rem;
    border: 1px solid var(--vs-border);
    border-radius: 1rem;
    background: var(--vs-bg-card);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mgr-po-truck-card:hover {
    border-color: var(--vs-accent);
    transform: translateY(-2px);
    box-shadow: var(--vs-shadow-sm);
}

.mgr-po-truck-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.mgr-po-truck-card__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    margin: 0;
    padding: 0.15rem 0 0;
}

.mgr-po-truck-card__fields dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-po-truck-card__fields dd {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.mgr-po-truck-card__cta {
    color: var(--vs-accent);
    font-size: 0.84rem;
    font-weight: 600;
    padding-top: 0.65rem;
    margin-top: 0.15rem;
    border-top: 1px solid var(--vs-border);
}

.mgr-po-req-trucks-empty,
.mgr-po-row--clickable {
    cursor: pointer;
}

.mgr-po-req-review {
    margin-top: 1.25rem;
}

.page-manager-trip-requisition-detail .mgr-detail-card.mgr-po-req-review .mgr-po-req-review__lead,
.page-manager-trip-requisition-detail .mgr-detail-card.mgr-po-req-review .mgr-prealert-review__grid {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.page-manager-trip-requisition-detail .mgr-detail-card.mgr-po-req-review .mgr-po-req-review__lead {
    padding-top: 1rem;
}

.page-manager-trip-requisition-detail .mgr-detail-card.mgr-po-req-review .mgr-prealert-review__grid {
    padding-bottom: 1.15rem;
}

.mgr-po-req-hero__actions,
.mgr-po-req-review__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

/* Tracking controller — disapproved trip requisition detail */
.page-manager-trip-requisition-detail--tc-disapproved .mgr-po-req-hero {
    border-color: color-mix(in srgb, var(--vs-danger) 22%, var(--vs-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-danger) 7%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.page-manager-trip-requisition-detail--tc-disapproved .mgr-po-req-hero__badge {
    background: color-mix(in srgb, var(--vs-danger) 14%, transparent);
    color: var(--vs-danger);
}

.page-manager-trip-requisition-detail--tc-disapproved .mgr-po-req-stat--accent {
    border-color: color-mix(in srgb, var(--vs-danger) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-danger) 6%, var(--vs-bg-card));
}

.mgr-trip-req-disapproval-banner {
    margin: 0;
}

.mgr-trip-req-disapproval-banner p {
    margin: 0.35rem 0 0;
    line-height: 1.55;
}

.mgr-trip-req-disapproval-banner__reason {
    margin-top: 0.75rem !important;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vs-danger) 18%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-danger) 4%, var(--vs-bg-card));
    color: var(--vs-text);
    font-size: 0.92rem;
}

.mgr-trip-req-next-steps {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 24%, var(--vs-border));
    border-radius: 0.95rem;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--vs-accent) 8%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.mgr-trip-req-next-steps__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--vs-accent) 14%, var(--vs-bg-muted));
    color: var(--vs-accent);
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.mgr-trip-req-next-steps strong {
    display: block;
    margin-bottom: 0.2rem;
}

.mgr-trip-req-next-steps p {
    margin: 0;
    color: var(--vs-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.mgr-trip-req-next-steps__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.page-manager-trip-requisition-detail .mgr-po-truck-table-wrap {
    margin: 0 1.25rem 1.35rem;
}

.page-manager-trip-requisition-detail .mgr-detail-empty-state.mgr-po-req-trucks-empty {
    margin: 0 1.25rem 1.35rem;
}

.mgr-po-req-trucks-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-muted));
    color: var(--vs-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Tracking controller — trip requisition edit (resubmit) */
.page-manager-trip-requisition-edit {
    display: grid;
    gap: 1rem;
}

.page-manager-trip-requisition-edit .mgr-tc-hero--trip-req-edit {
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: 1.1rem;
    padding: 1.35rem 1.5rem;
    box-shadow: var(--vs-shadow);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 9%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card)));
}

.page-manager-trip-requisition-edit .mgr-tc-hero--trip-req-edit .mgr-tc-hero__icon {
    background: color-mix(in srgb, var(--vs-accent) 14%, var(--vs-bg-muted));
    color: var(--vs-accent);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-hero__stats {
    margin-top: 0.85rem;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-hero__stat {
    border-color: color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 7%, var(--vs-surface));
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-hero__stat--accent {
    border-color: color-mix(in srgb, var(--vs-accent) 35%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-surface));
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-hero__stat--accent .mgr-trips-hero__stat-value {
    color: var(--vs-accent);
}

.mgr-trip-req-edit-workflow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 20%, var(--vs-border));
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card));
}

.mgr-trip-req-edit-workflow__step {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--vs-text-muted);
}

.mgr-trip-req-edit-workflow__step.is-complete {
    color: var(--vs-success);
}

.mgr-trip-req-edit-workflow__step.is-active {
    color: var(--vs-accent);
}

.mgr-trip-req-edit-workflow__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-border) 50%, var(--vs-bg-muted));
    color: var(--vs-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.mgr-trip-req-edit-workflow__step.is-complete .mgr-trip-req-edit-workflow__badge {
    background: color-mix(in srgb, var(--vs-success) 14%, var(--vs-bg-muted));
    color: var(--vs-success);
}

.mgr-trip-req-edit-workflow__step.is-active .mgr-trip-req-edit-workflow__badge {
    background: color-mix(in srgb, var(--vs-accent) 16%, var(--vs-bg-muted));
    color: var(--vs-accent);
}

.mgr-trip-req-edit-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.mgr-trip-req-edit-aside {
    display: grid;
    gap: 0.85rem;
}

.mgr-trip-req-edit-aside-card {
    border: 1px solid var(--vs-border);
    border-radius: 0.95rem;
    background: var(--vs-bg-card);
    box-shadow: var(--vs-shadow-sm);
    overflow: hidden;
}

.mgr-trip-req-edit-aside-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 45%, var(--vs-bg-card));
}

.mgr-trip-req-edit-aside-card__head h3 {
    margin: 0;
    font-size: 0.92rem;
}

.mgr-trip-req-edit-aside-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-muted));
    color: var(--vs-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mgr-trip-req-edit-aside-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0.35rem 0;
}

.mgr-trip-req-edit-aside-list__item {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 70%, transparent);
}

.mgr-trip-req-edit-aside-list__item:last-child {
    border-bottom: 0;
}

.mgr-trip-req-edit-aside-list__item dt {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-trip-req-edit-aside-list__item dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.mgr-trip-req-edit-aside-empty {
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    color: var(--vs-text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.mgr-trip-req-edit-trip-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0 0.5rem;
    max-height: 16rem;
    overflow: auto;
}

.mgr-trip-req-edit-trip-list__item {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 70%, transparent);
}

.mgr-trip-req-edit-trip-list__item:last-child {
    border-bottom: 0;
}

.mgr-trip-req-edit-trip-list__meta {
    font-size: 0.78rem;
    color: var(--vs-text-muted);
    line-height: 1.4;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-panel {
    overflow: hidden;
    margin: 0;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-decline-notice {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border-radius: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--vs-danger) 18%, var(--vs-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vs-danger) 5%, var(--vs-bg-card)),
        var(--vs-bg-card));
    box-shadow: var(--vs-shadow-sm);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-decline-notice__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-decline-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-danger) 14%, var(--vs-bg-muted));
    color: #b91c1c;
    font-size: 0.78rem;
    font-weight: 800;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-decline-notice__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-decline-notice p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--vs-text);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-decline-notice__meta {
    font-size: 0.8rem;
    color: var(--vs-text-muted);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-form {
    display: grid;
    gap: 0.85rem;
    padding: 0 1.25rem 1.35rem;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-section--card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--vs-bg) 35%, var(--vs-bg-card));
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-section__intro {
    display: grid;
    gap: 0.25rem;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-section__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vs-text);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-section__hint {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--vs-text-muted);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-fields .mgr-create-field {
    margin-bottom: 0;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-loading {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    padding: 1.5rem 1rem;
    color: var(--vs-text-muted);
    text-align: center;
}

.mgr-trip-req-edit-cost-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

.mgr-trip-req-edit-cost-compare__card {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    background: var(--vs-bg-card);
}

.mgr-trip-req-edit-cost-compare__card span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-trip-req-edit-cost-compare__card strong {
    font-size: 1rem;
    line-height: 1.2;
}

.mgr-trip-req-edit-cost-compare__card.is-revised {
    border-color: color-mix(in srgb, var(--vs-accent) 30%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 6%, var(--vs-bg-card));
}

.mgr-trip-req-edit-cost-compare__card.is-revised strong {
    color: var(--vs-accent);
}

.mgr-trip-req-edit-cost-compare__card.is-per-truck strong {
    color: var(--vs-text);
}

.mgr-trip-req-edit-cost-compare__arrow {
    display: grid;
    place-items: center;
    color: var(--vs-text-muted);
    font-size: 1.1rem;
    font-weight: 700;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-selected-escort {
    margin-top: 0.35rem;
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-footer--sticky {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    padding: 1rem 1.05rem;
    margin: 0.25rem -0.05rem 0;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: 0.9rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vs-accent) 5%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-footer__hint {
    margin: 0;
    flex: 1 1 220px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--vs-text-muted);
}

.page-manager-trip-requisition-edit .mgr-trip-req-edit-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

@media (max-width: 960px) {
    .mgr-trip-req-edit-layout {
        grid-template-columns: 1fr;
    }

    .page-manager-trip-requisition-edit .mgr-trip-req-edit-fields {
        grid-template-columns: 1fr;
    }

    .mgr-trip-req-edit-cost-compare {
        grid-template-columns: 1fr 1fr;
    }

    .mgr-trip-req-edit-cost-compare__arrow {
        display: none;
    }

    .mgr-trip-req-edit-cost-compare__card.is-per-truck {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .mgr-trip-req-next-steps {
        flex-direction: column;
    }

    .page-manager-trip-requisition-edit .mgr-trip-req-edit-footer--sticky {
        flex-direction: column;
        align-items: stretch;
    }

    .page-manager-trip-requisition-edit .mgr-trip-req-edit-footer__actions {
        width: 100%;
    }

    .page-manager-trip-requisition-edit .mgr-trip-req-edit-footer__actions .vs-btn {
        flex: 1 1 auto;
    }
}

.mgr-po-req-review__lead {
    margin: 0 0 1rem;
    color: var(--vs-text-muted);
    line-height: 1.55;
    max-width: 44rem;
}

.mgr-detail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.mgr-po-disapprove-modal__dialog {
    max-width: min(560px, calc(100vw - 2rem));
    width: 100%;
}

.mgr-po-disapprove-modal__content {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 18%, var(--vs-border));
    box-shadow: 0 24px 64px color-mix(in srgb, var(--vs-accent) 14%, transparent);
}

.mgr-po-disapprove-modal__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem 1rem;
    border-bottom: 1px solid var(--vs-border);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 8%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.mgr-po-disapprove-modal__hero-main {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.mgr-po-disapprove-modal__hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-size: 0.78rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.mgr-po-disapprove-modal__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vs-accent);
}

.mgr-po-disapprove-modal__subtitle {
    margin: 0.35rem 0 0;
    color: var(--vs-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.mgr-po-disapprove-modal__body {
    padding: 1.15rem 1.35rem;
}

.mgr-po-disapprove-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.95rem 1.35rem 1.2rem;
    border-top: 1px solid var(--vs-border);
}

.mgr-po-approve-modal__dialog {
    max-width: min(920px, calc(100vw - 2rem));
    width: 100%;
}

.mgr-po-approve-modal__content {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    max-height: min(90vh, 820px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 18%, var(--vs-border));
    box-shadow: 0 24px 64px color-mix(in srgb, var(--vs-accent) 14%, transparent);
}

.mgr-po-approve-modal__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.45rem 1.15rem;
    border-bottom: 1px solid var(--vs-border);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.mgr-po-approve-modal__hero-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.mgr-po-approve-modal__hero-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-accent) 16%, transparent);
    color: var(--vs-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.mgr-po-approve-modal__hero-copy {
    min-width: 0;
}

.mgr-po-approve-modal__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vs-accent);
}

.mgr-po-approve-modal__subtitle {
    margin: 0.45rem 0 0;
    color: var(--vs-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 38rem;
}

.mgr-po-approve-modal__req-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.82rem;
    font-weight: 800;
}

.mgr-po-approve-modal__close {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.mgr-po-approve-modal__kind-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    padding: 0.8rem 1.45rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vs-accent) 18%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 6%, var(--vs-bg-card));
}

.mgr-po-approve-modal__kind-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--vs-accent) 14%, var(--vs-bg-card));
    color: var(--vs-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mgr-po-approve-modal__kind-banner strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
}

.mgr-po-approve-modal__kind-banner p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--vs-text-muted);
}

.mgr-po-approve-modal__summary {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 0.85rem 1.45rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card));
}

.mgr-po-approve-modal__summary-stat {
    display: grid;
    gap: 0.15rem;
}

.mgr-po-approve-modal__summary-stat strong {
    font-size: 1.05rem;
    line-height: 1.1;
}

.mgr-po-approve-modal__summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-po-approve-modal__summary-stat--accent strong {
    color: var(--vs-accent);
}

.mgr-po-approve-modal__progress {
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-border) 70%, transparent);
    overflow: hidden;
}

.mgr-po-approve-modal__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--vs-accent) 80%, #fff),
        var(--vs-accent));
    transition: width 0.22s ease;
}

.mgr-po-approve-modal__body {
    overflow: auto;
    padding: 1.15rem 1.45rem;
}

.mgr-po-approve-modal__loading,
.mgr-po-approve-modal__empty {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 2.5rem 1rem;
    color: var(--vs-text-muted);
    text-align: center;
}

.mgr-po-approve-modal__empty-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-border) 40%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--vs-text-muted);
}

.mgr-po-approve-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.95rem;
}

.mgr-po-approve-modal__card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem 1.05rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.95rem;
    background: var(--vs-bg-card);
    box-shadow: var(--vs-shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mgr-po-approve-modal__card.is-complete {
    border-color: color-mix(in srgb, var(--vs-accent) 42%, var(--vs-border));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--vs-accent) 10%, transparent);
}

.mgr-po-approve-modal__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.mgr-po-approve-modal__trip {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.mgr-po-approve-modal__trip-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-po-approve-modal__reg {
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 10%, transparent);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--vs-accent);
    white-space: nowrap;
}

.mgr-po-approve-modal__done {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #15803d;
    font-size: 0.82rem;
    font-weight: 800;
}

.mgr-po-approve-modal__facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-border) 24%, transparent);
}

.mgr-po-approve-modal__fact {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.mgr-po-approve-modal__fact-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-po-approve-modal__fact-value {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.mgr-po-approve-modal__field {
    display: grid;
    gap: 0.45rem;
}

.mgr-po-approve-modal__field-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vs-text);
}

.mgr-po-approve-modal__select-wrap {
    position: relative;
}

.mgr-po-approve-modal__select-wrap::after {
    content: "▾";
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--vs-text-muted);
    font-size: 0.82rem;
}

.mgr-po-approve-modal__select {
    width: 100%;
    appearance: none;
    padding: 0.72rem 2.2rem 0.72rem 0.85rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.72rem;
    background: var(--vs-bg);
    color: var(--vs-text);
    font: inherit;
    line-height: 1.35;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mgr-po-approve-modal__select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--vs-accent) 55%, var(--vs-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-accent) 14%, transparent);
}

.mgr-po-approve-modal__warning {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    color: #b45309;
    font-size: 0.86rem;
    line-height: 1.45;
}

.mgr-po-approve-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.45rem 1.2rem;
    border-top: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-border) 18%, var(--vs-bg-card));
}

.mgr-po-approve-modal__footer-hint {
    margin: 0;
    flex: 1 1 220px;
    color: var(--vs-text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.mgr-po-approve-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mgr-po-approve-modal__proceed {
    min-width: 10.5rem;
}

.page-manager-failed-sap {
    display: grid;
    gap: 1.25rem;
}

.mgr-failed-sap-panel {
    margin-top: 0.25rem;
}

.mgr-failed-sap-table td,
.mgr-failed-sap-table th {
    vertical-align: top;
}

.mgr-failed-sap-table__meta {
    display: block;
    margin-top: 0.2rem;
    color: var(--vs-text-muted);
    font-size: 0.78rem;
}

.mgr-failed-sap-table__error {
    max-width: 320px;
    color: #b45309;
    line-height: 1.45;
    word-break: break-word;
}

@media (max-width: 720px) {
    .mgr-po-approve-modal__summary {
        grid-template-columns: 1fr 1fr;
    }

    .mgr-po-approve-modal__progress {
        grid-column: 1 / -1;
    }

    .mgr-po-approve-modal__footer {
        align-items: stretch;
    }

    .mgr-po-approve-modal__actions {
        width: 100%;
    }

    .mgr-po-approve-modal__actions .vs-btn {
        flex: 1 1 auto;
    }
}

.mgr-trip-hero__badge {
    align-self: flex-start;
    margin-top: 0.35rem;
}

.mgr-trip-detail-hero__badge {
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
}

.mgr-trip-detail-stat--accent {
    border-color: color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 6%, var(--vs-bg-card));
}

.mgr-trip-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.mgr-trip-detail-actions .vs-btn {
    min-width: 11rem;
}

.mgr-trip-reports-card {
    margin-bottom: 1.25rem;
}

.mgr-trip-report-tabs-wrap {
    padding: 0 1.25rem 1.25rem;
}

.mgr-trip-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mgr-trip-report-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-bg-card);
    color: var(--vs-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mgr-trip-report-tab:hover,
.mgr-trip-report-tab.is-active {
    border-color: color-mix(in srgb, var(--vs-accent) 45%, var(--vs-border));
    color: var(--vs-text);
}

.mgr-trip-report-tab.is-active {
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
    font-weight: 600;
}

.mgr-trip-report-tab__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    background: var(--vs-bg-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mgr-trip-report-tab.is-active .mgr-trip-report-tab__code {
    background: color-mix(in srgb, var(--vs-accent) 18%, var(--vs-bg-card));
}

.mgr-trip-report-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: var(--vs-bg-secondary);
}

.mgr-trip-report-panel__copy h4 {
    margin: 0;
    font-size: 1rem;
}

.mgr-trip-report-panel__copy p {
    margin: 0.45rem 0 0;
    font-size: 0.88rem;
    color: var(--vs-text-muted);
    line-height: 1.5;
    max-width: 52rem;
}

.mgr-trip-report-panel__export {
    align-self: flex-start;
    min-width: 10rem;
}

.mgr-trip-report-panel__empty {
    margin: 0;
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

.mgr-trip-reports-card .mgr-trip-reports-grid,
.mgr-trip-reports-card .mgr-trip-checkpoint-exports {
    padding: 0;
}

.mgr-trip-reports-card .mgr-trip-checkpoint-exports {
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vs-border);
}

.mgr-trip-reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.mgr-trip-pdf-exports__lookup-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
    padding: 0 1.25rem 1.25rem;
}

.mgr-trip-pdf-exports__trip-field {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.mgr-trip-report-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: var(--vs-bg-card);
}

.mgr-trip-report-item h4 {
    margin: 0;
    font-size: 0.98rem;
}

.mgr-trip-report-item p {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
    line-height: 1.45;
}

.mgr-trip-checkpoint-exports {
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vs-border);
}

.mgr-trip-checkpoint-exports__title {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vs-text-muted);
}

.mgr-trip-checkpoint-exports__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.dash-section__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: var(--vs-text-muted);
    max-width: 42rem;
}

.mgr-dash-stats--ops,
.mgr-dash-stats--requisitions {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mgr-dash-stat--breakdown .mgr-dash-stat__icon {
    background: color-mix(in srgb, var(--vs-danger) 14%, transparent);
    color: var(--vs-danger);
}

.mgr-dash-stat--breakdown.is-attention {
    border-color: color-mix(in srgb, var(--vs-danger) 32%, var(--vs-border));
}

.mgr-dash-stat--breakdown.is-attention .mgr-dash-stat__value {
    color: var(--vs-danger);
}

.mgr-dash-stat--armed .mgr-dash-stat__icon {
    background: color-mix(in srgb, #b45309 14%, transparent);
    color: #b45309;
}

.mgr-dash-stat--armed.is-attention {
    border-color: color-mix(in srgb, #b45309 32%, var(--vs-border));
}

.mgr-dash-stat--armed.is-attention .mgr-dash-stat__value {
    color: #b45309;
}

.mgr-dash-stat--requisition .mgr-dash-stat__icon {
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
}

.mgr-dash-stat--requisition.is-attention {
    border-color: color-mix(in srgb, var(--vs-accent) 30%, var(--vs-border));
}

.mgr-dash-stat--requisition.is-attention .mgr-dash-stat__value {
    color: var(--vs-accent);
}

.mgr-dash-approved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.mgr-dash-approved-card {
    border: 1px solid var(--vs-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: var(--vs-bg-card);
    animation: mgr-dash-rise 0.35s ease both;
    animation-delay: calc(var(--dash-i, 0) * 60ms);
}

.mgr-dash-approved-card.has-data {
    border-color: color-mix(in srgb, var(--vs-success) 28%, var(--vs-border));
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--vs-success) 6%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.mgr-dash-approved-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mgr-dash-approved-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--vs-success) 14%, transparent);
    color: var(--vs-success);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.mgr-dash-approved-card__head h4 {
    margin: 0;
    font-size: 0.98rem;
}

.mgr-dash-approved-card__head p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
}

.mgr-dash-approved-card__empty {
    margin: 0;
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

.mgr-dash-approved-card__amounts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.mgr-dash-approved-card__amounts li {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
}

.mgr-dash-approved-card__currency {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--vs-text-muted);
}

.mgr-dash-approved-card__amounts strong {
    font-size: 1.05rem;
    font-weight: 700;
}

.mgr-dash-approved-card__count {
    font-size: 0.78rem;
    color: var(--vs-text-muted);
}

@keyframes mgr-dash-rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-manager-trips-en-route .mgr-trips-hero--enroute,
.page-manager-trips-exceeded-main .mgr-trips-hero--eta-exceeded,
.page-manager-trips-exceeded-route .mgr-trips-hero--eta-exceeded,
.page-manager-trips-delivered .mgr-trips-hero--delivered,
.page-manager-trips-pending-completion .mgr-trips-hero--completion,
.page-manager-trips-detail .mgr-trips-detail-hero,
.page-manager-trip-completion-detail .mgr-detail-hero.mgr-trip-completion-detail__hero {
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #d97706 14%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, #d97706 6%, var(--vs-bg-card)), var(--vs-bg-card));
    box-shadow: var(--vs-shadow);
}

.page-manager-trips-pending-completion .mgr-trips-hero--completion,
.page-manager-trip-completion-detail .mgr-detail-hero.mgr-trip-completion-detail__hero {
    border-color: color-mix(in srgb, #d97706 22%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #d97706 14%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, #d97706 6%, var(--vs-bg-card)), var(--vs-bg-card));
}

.page-manager-trips-delivered .mgr-trips-hero--delivered {
    border-color: color-mix(in srgb, #d97706 22%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #d97706 14%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, #d97706 6%, var(--vs-bg-card)), var(--vs-bg-card));
}

.mgr-trips-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.mgr-trips-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.mgr-trips-hero__links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mgr-trips-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.mgr-trips-hero__stat {
    display: grid;
    gap: 0.15rem;
    min-width: 5.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--vs-border) 80%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-bg-card) 88%, transparent);
}

.mgr-trips-hero__stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-trips-hero__stat-value {
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--vs-text);
}

.mgr-trips-panel {
    overflow: hidden;
}

.mgr-trips-panel__toolbar {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 45%, transparent);
}

.mgr-trips-panel__count {
    white-space: nowrap;
}

.mgr-trips-panel__search {
    position: relative;
    min-width: min(100%, 22rem);
}

.mgr-trips-panel__search input {
    padding-left: 2.2rem;
}

.mgr-trips-panel__search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vs-text-muted);
    pointer-events: none;
}

.mgr-trips-table-wrap {
    border-radius: 12px;
    border: 1px solid var(--vs-border);
    overflow: hidden;
}

.mgr-trips-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--vs-bg) 35%, transparent);
}

.mgr-trips-row {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.mgr-trips-row:hover {
    background: color-mix(in srgb, var(--vs-accent) 6%, var(--vs-bg-card)) !important;
}

.mgr-trips-date-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mgr-trips-commodity-cell {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgr-breakdown-linked-trip {
    padding: 1.15rem 1.25rem 1.35rem;
}

.mgr-breakdown-linked-trip .mgr-detail-card__lead {
    margin: 0 0 1rem;
    color: var(--vs-text-muted);
}

.page-manager-breakdowns-pending .mgr-breakdowns-hero--pending,
.page-manager-breakdowns-verified .mgr-breakdowns-hero--verified {
    border: 1px solid color-mix(in srgb, var(--vs-accent) 18%, var(--vs-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 7%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.mgr-breakdown-verify-panel {
    padding-bottom: 0.35rem;
}

.mgr-breakdown-verify-form {
    display: grid;
    gap: 1rem;
    padding: 0 1.25rem 1.35rem;
}

.mgr-breakdown-verify-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mgr-breakdown-verify-form__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
}

.mgr-trips-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.mgr-trips-empty h3 {
    margin: 0.5rem 0 0.35rem;
}

.mgr-trips-empty p {
    margin: 0;
    color: var(--vs-text-muted);
}

.mgr-trips-empty__icon {
    font-size: 1.75rem;
}

.mgr-trip-detail-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.mgr-trip-detail-nav__alt {
    margin-left: auto;
}

.mgr-trips-detail-hero__badge {
    background: color-mix(in srgb, var(--vs-accent) 16%, transparent);
    color: var(--vs-accent);
}

.mgr-trip-delivered-tag {
    display: inline-flex;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-success) 14%, var(--vs-bg-muted));
    color: var(--vs-success);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.page-manager-trips-en-route,
.page-manager-trips-delivered,
.page-manager-trips-detail {
    display: grid;
    gap: 1rem;
}

.mgr-trips-row.is-clickable {
    cursor: pointer;
}

.mgr-truck-status-map {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.mgr-truck-status-map__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vs-text-muted);
}

.mgr-truck-status-map__image {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: var(--vs-bg-secondary);
}

.mgr-truck-status-map__placeholder {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed var(--vs-border);
    border-radius: 0.85rem;
    background: var(--vs-bg-secondary);
    color: var(--vs-text-muted);
    text-align: center;
}

.mgr-truck-status-map__placeholder--action {
    width: 100%;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.mgr-truck-status-map__placeholder--action:hover {
    border-color: color-mix(in srgb, var(--vs-accent) 40%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 6%, var(--vs-bg-secondary));
    transform: translateY(-1px);
}

.mgr-truck-status-map__file-input {
    display: none;
}

.mgr-truck-status-map__placeholder p {
    margin: 0;
    max-width: 28rem;
    line-height: 1.5;
    font-size: 0.88rem;
}

.mgr-trips-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mgr-trips-table__select-col {
    width: 2.75rem;
    text-align: center;
}

.mgr-trips-table__select-col input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.mgr-bulk-truck-status-modal .mgr-create-modal__body {
    max-height: min(72vh, 820px);
    overflow: auto;
}

.mgr-bulk-truck-status__summary {
    padding: 0.85rem 1rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: var(--vs-bg-secondary);
}

.mgr-bulk-truck-status__summary p {
    margin: 0;
}

.mgr-bulk-truck-status__shared,
.mgr-bulk-truck-status__trucks {
    display: grid;
    gap: 0.85rem;
}

.mgr-bulk-truck-status__section-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--vs-text);
}

.mgr-bulk-truck-row {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: var(--vs-bg-secondary);
}

.mgr-bulk-truck-row__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.mgr-bulk-truck-row__trip {
    font-size: 0.98rem;
}

.mgr-bulk-truck-row__meta {
    margin: 0.25rem 0 0;
    color: var(--vs-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.mgr-truck-status-map--compact .mgr-truck-status-map__image {
    max-height: 180px;
}

.mgr-truck-status-map--compact .mgr-truck-status-map__placeholder {
    min-height: 120px;
}

.mgr-trip-change-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.mgr-trip-change-actions .vs-btn {
    min-width: 10.5rem;
}

.mgr-change-driver-search {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.mgr-change-driver-search__field {
    flex: 1;
    margin-bottom: 0;
}

.mgr-change-driver-results__label {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-driver-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-height: 12rem;
    overflow: auto;
}

.mgr-change-driver-results__item {
    width: 100%;
    display: grid;
    gap: 0.15rem;
    text-align: left;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.65rem;
    background: #fff;
    cursor: pointer;
}

.mgr-change-driver-results__item.is-selected {
    border-color: var(--vs-accent);
    background: rgba(37, 99, 235, 0.06);
}

.mgr-change-driver-results__item strong {
    font-size: 0.95rem;
}

.mgr-change-driver-results__item span {
    font-size: 0.82rem;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-driver-empty {
    margin: 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.9rem;
}

.mgr-change-driver-detail {
    display: grid;
    gap: 1rem;
}

.mgr-change-driver-profile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 18%, var(--vs-border, #dbe3ee));
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vs-accent) 7%, #fff), #fff);
}

.mgr-change-driver-profile__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mgr-change-driver-profile__copy {
    min-width: 0;
}

.mgr-change-driver-profile__name {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vs-text, #0f172a);
    line-height: 1.25;
}

.mgr-change-driver-profile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0;
    font-size: 0.84rem;
}

.mgr-change-driver-profile__id {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.mgr-change-driver-profile__phone {
    color: var(--vs-text-muted, #64748b);
    font-weight: 500;
}

.mgr-change-driver-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    margin-bottom: 0;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-bg-secondary, #f1f5f9) 55%, #fff);
}

.mgr-change-driver-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: none;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.mgr-change-driver-tabs__tab:hover:not(.is-active) {
    color: var(--vs-text, #0f172a);
    background: color-mix(in srgb, #fff 70%, transparent);
}

.mgr-change-driver-tabs__tab.is-active {
    color: var(--vs-accent);
    background: #fff;
    box-shadow: 0 1px 3px color-mix(in srgb, #0f172a 8%, transparent);
}

.mgr-change-driver-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 16%, transparent);
    color: var(--vs-accent);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.mgr-change-driver-tab-panel {
    min-height: 6rem;
}

.mgr-change-driver-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
}

.mgr-change-driver-info__row {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border, #dbe3ee) 75%, transparent);
}

.mgr-change-driver-info__row:last-child {
    border-bottom: none;
}

.mgr-change-driver-info__row--span-all {
    grid-column: 1 / -1;
}

.mgr-change-driver-info__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-driver-info__value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--vs-text, #0f172a);
    line-height: 1.35;
    word-break: break-word;
}

.mgr-change-driver-info__value--phone {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.mgr-change-driver-fields.mgr-detail-fields {
    padding: 0;
}

.mgr-change-driver-fields .mgr-detail-field {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.mgr-change-driver-register-link {
    margin: 0.35rem 0 0.85rem;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.875rem;
}

.mgr-change-driver-register-link__btn {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--vs-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.mgr-register-driver-form-shell {
    gap: 0;
}

.mgr-register-driver-detail {
    display: grid;
    gap: 1rem;
}

.mgr-register-driver-intro {
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 16%, var(--vs-border, #dbe3ee));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-accent) 5%, #fff);
}

.mgr-register-driver-intro__text {
    margin: 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.875rem;
    line-height: 1.45;
}

.mgr-register-driver-preview {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 18%, var(--vs-border, #dbe3ee));
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vs-accent) 7%, #fff), #fff);
}

.mgr-register-driver-preview__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mgr-register-driver-preview__copy {
    min-width: 0;
}

.mgr-register-driver-preview__name {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vs-text, #0f172a);
    line-height: 1.25;
}

.mgr-register-driver-preview__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0;
    font-size: 0.84rem;
}

.mgr-register-driver-preview__id {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.mgr-register-driver-preview__phone {
    color: var(--vs-text-muted, #64748b);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.mgr-register-driver-tabs {
    margin-bottom: 0;
}

.mgr-register-driver-panel {
    padding: 1rem 1.05rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.75rem;
    background: #fff;
}

.mgr-register-driver-form {
    margin-bottom: 0;
}

.mgr-register-driver-callout {
    margin-bottom: 0.9rem;
    padding: 0.75rem 0.85rem;
    border-left: 3px solid color-mix(in srgb, var(--vs-accent) 55%, transparent);
    border-radius: 0 0.55rem 0.55rem 0;
    background: color-mix(in srgb, var(--vs-accent) 6%, #fff);
}

.mgr-register-driver-callout p {
    margin: 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.45;
}

.mgr-register-driver-phone-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.85rem;
    border: 1px dashed color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border, #dbe3ee));
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--vs-accent) 4%, #fff);
}

.mgr-register-driver-phone-add__field {
    flex: 1;
    min-width: 14rem;
    margin-bottom: 0;
}

.mgr-register-driver-phone-add__btn {
    flex-shrink: 0;
}

.mgr-register-driver-phone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mgr-register-driver-phone-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border, #dbe3ee));
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 6%, #fff);
}

.mgr-register-driver-phone-chips__number {
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vs-text, #0f172a);
}

.mgr-register-driver-phone-chips__remove {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mgr-register-driver-phone-chips__remove:hover {
    background: var(--vs-accent);
    color: #fff;
}

.mgr-register-driver-uploads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
}

.mgr-register-driver-upload-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.75rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mgr-register-driver-upload-card.is-complete {
    border-color: color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border, #dbe3ee));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-accent) 8%, transparent);
}

.mgr-register-driver-upload-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mgr-register-driver-upload-card__head strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vs-text, #0f172a);
}

.mgr-register-driver-upload-card__status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-register-driver-upload-card.is-complete .mgr-register-driver-upload-card__status {
    color: var(--vs-accent);
}

.mgr-register-driver-upload-card__hint {
    margin: 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.78rem;
    line-height: 1.4;
}

.mgr-register-driver-upload-card__preview-wrap {
    display: grid;
    gap: 0.35rem;
}

.mgr-register-driver-upload-card__preview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--vs-bg-secondary, #f1f5f9) 40%, #fff);
}

.mgr-register-driver-upload-card__filename {
    margin: 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.75rem;
    word-break: break-all;
}

.mgr-register-driver-upload-card__placeholder {
    min-height: 120px;
    display: grid;
    place-items: center;
    padding: 0.75rem;
    border: 1px dashed color-mix(in srgb, var(--vs-accent) 24%, var(--vs-border, #dbe3ee));
    border-radius: 0.55rem;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.82rem;
    background: color-mix(in srgb, var(--vs-accent) 4%, #fff);
}

.mgr-register-driver-upload-card__pick {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    cursor: pointer;
}

.mgr-register-driver-upload-card__input {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.mgr-change-driver-panel {
    padding: 0.9rem 1rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.75rem;
    background: #fff;
}

.mgr-change-driver-panel h6 {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.mgr-change-driver-phone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mgr-change-driver-phone-chips li {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border, #dbe3ee));
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 6%, #fff);
    color: var(--vs-text, #0f172a);
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mgr-change-driver-passports {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.mgr-change-driver-passport {
    margin: 0;
}

.mgr-change-driver-passport figcaption {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-driver-passport img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.5rem;
    background: #fff;
}

.mgr-change-driver-passport__placeholder {
    min-height: 140px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--vs-border, #dbe3ee);
    border-radius: 0.5rem;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.85rem;
    background: #fff;
}

.mgr-change-horse-modal__readonly {
    background: #f1f5f9;
    color: var(--vs-text-muted, #64748b);
    cursor: not-allowed;
}

.mgr-change-escort-choice {
    display: grid;
    gap: 1.15rem;
}

.mgr-change-escort-choice__head {
    display: grid;
    gap: 0.35rem;
}

.mgr-change-escort-choice__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vs-accent);
}

.mgr-change-escort-choice__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vs-text);
}

.mgr-change-escort-choice__lead {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-choice__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

@media (max-width: 760px) {
    .mgr-change-escort-choice__options {
        grid-template-columns: 1fr;
    }
}

.mgr-change-escort-choice__option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.95rem;
    width: 100%;
    min-height: 100%;
    padding: 1.15rem 1.15rem 1rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 1.05rem;
    background: var(--vs-bg-card, #fff);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 22px color-mix(in srgb, #000 3.5%, transparent);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background 0.15s ease;
}

.mgr-change-escort-choice__option:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--vs-accent) 34%, var(--vs-border));
    box-shadow: 0 14px 32px color-mix(in srgb, #000 7%, transparent);
    transform: translateY(-2px);
    background:
        radial-gradient(ellipse 110% 120% at 0% 0%, color-mix(in srgb, var(--vs-accent) 10%, transparent), transparent 65%),
        var(--vs-bg-card, #fff);
}

.mgr-change-escort-choice__option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--vs-accent) 45%, transparent);
    outline-offset: 2px;
}

.mgr-change-escort-choice__option:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mgr-change-escort-choice__option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mgr-change-escort-choice__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.85rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.mgr-change-escort-choice__option--requisition .mgr-change-escort-choice__option-icon {
    background: color-mix(in srgb, var(--vs-accent) 14%, var(--vs-bg-muted, #f1f5f9));
    color: var(--vs-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-accent) 22%, transparent);
}

.mgr-change-escort-choice__option--direct .mgr-change-escort-choice__option-icon {
    background: color-mix(in srgb, #1f9d55 14%, var(--vs-bg-muted, #f1f5f9));
    color: #1f9d55;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f9d55 22%, transparent);
}

.mgr-change-escort-choice__option--direct:hover:not(:disabled) {
    border-color: color-mix(in srgb, #1f9d55 36%, var(--vs-border));
    background:
        radial-gradient(ellipse 110% 120% at 0% 0%, color-mix(in srgb, #1f9d55 10%, transparent), transparent 65%),
        var(--vs-bg-card, #fff);
}

.mgr-change-escort-choice__option-copy {
    display: grid;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

.mgr-change-escort-choice__option-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg-muted, #f1f5f9) 70%, transparent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-choice__option--requisition .mgr-change-escort-choice__option-badge {
    border-color: color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-bg-card, #fff));
    color: var(--vs-accent);
}

.mgr-change-escort-choice__option--direct .mgr-change-escort-choice__option-badge {
    border-color: color-mix(in srgb, #1f9d55 28%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 10%, var(--vs-bg-card, #fff));
    color: #1f9d55;
}

.mgr-change-escort-choice__option-copy strong {
    font-size: 1rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--vs-text);
}

.mgr-change-escort-choice__option-desc {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-choice__option-points {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.mgr-change-escort-choice__option-points > span {
    position: relative;
    padding-left: 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-choice__option-points > span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 70%, transparent);
}

.mgr-change-escort-choice__option--direct .mgr-change-escort-choice__option-points > span::before {
    background: color-mix(in srgb, #1f9d55 70%, transparent);
}

.mgr-change-escort-choice__option-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--vs-border) 85%, transparent);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--vs-accent);
}

.mgr-change-escort-choice__option--direct .mgr-change-escort-choice__option-cta {
    color: #1f9d55;
}

.mgr-change-escort-choice__option-cta span {
    transition: transform 0.15s ease;
}

.mgr-change-escort-choice__option:hover:not(:disabled) .mgr-change-escort-choice__option-cta span {
    transform: translateX(3px);
}

.mgr-change-escort-modal__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vs-accent);
}

.mgr-change-escort-spotlight {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border, #dbe3ee));
    border-radius: 1rem;
    background:
        radial-gradient(ellipse 100% 120% at 0% 0%, color-mix(in srgb, var(--vs-accent) 10%, transparent), transparent 60%),
        var(--vs-bg-card, #fff);
    box-shadow: 0 8px 24px color-mix(in srgb, #000 4%, transparent);
}

.mgr-change-escort-spotlight--requisition {
    border-color: color-mix(in srgb, var(--vs-accent) 24%, var(--vs-border, #dbe3ee));
}

.mgr-change-escort-spotlight--direct {
    border-color: color-mix(in srgb, #1f9d55 24%, var(--vs-border, #dbe3ee));
    background:
        radial-gradient(ellipse 100% 120% at 0% 0%, color-mix(in srgb, #1f9d55 10%, transparent), transparent 60%),
        var(--vs-bg-card, #fff);
}

.mgr-change-escort-spotlight__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
}

.mgr-change-escort-spotlight__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-bg-card, #fff));
    color: var(--vs-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mgr-change-escort-spotlight--direct .mgr-change-escort-spotlight__badge {
    border-color: color-mix(in srgb, #1f9d55 28%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 10%, var(--vs-bg-card, #fff));
    color: #1f9d55;
}

.mgr-change-escort-spotlight__lead {
    margin: 0;
    flex: 1;
    min-width: 12rem;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.86rem;
    line-height: 1.45;
}

.mgr-change-escort-spotlight__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

@media (max-width: 900px) {
    .mgr-change-escort-spotlight__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mgr-change-escort-spotlight__stat {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.75rem;
    background: var(--vs-bg-card, #fff);
}

.mgr-change-escort-spotlight__stat--accent {
    border-color: color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 7%, var(--vs-bg-card, #fff));
}

.mgr-change-escort-spotlight--direct .mgr-change-escort-spotlight__stat--accent {
    border-color: color-mix(in srgb, #1f9d55 28%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 7%, var(--vs-bg-card, #fff));
}

.mgr-change-escort-spotlight__stat-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-spotlight__stat-value {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vs-text, #0f172a);
    word-break: break-word;
}

.mgr-change-escort-spotlight__meta {
    font-weight: 500;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-panel {
    margin-bottom: 0;
}

.mgr-change-escort-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mgr-change-escort-panel__head h6 {
    margin: 0;
    font-size: 0.95rem;
}

.mgr-change-escort-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.75rem;
}

.mgr-change-escort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mgr-change-escort-table th,
.mgr-change-escort-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--vs-border, #dbe3ee);
    text-align: left;
    white-space: nowrap;
}

.mgr-change-escort-table tr.is-current {
    background: #eff6ff;
}

.mgr-change-escort-empty {
    margin: 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.875rem;
}

.mgr-change-escort-filters {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .mgr-change-escort-filters {
        grid-template-columns: 1fr auto;
        align-items: end;
    }
}

.mgr-change-escort-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.85rem;
    padding: 0.28rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-bg-muted, #f1f5f9) 55%, var(--vs-bg-card, #fff));
}

.mgr-change-escort-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mgr-change-escort-tabs__tab:hover:not(.is-active) {
    color: var(--vs-text);
    background: color-mix(in srgb, var(--vs-bg-card, #fff) 80%, transparent);
}

.mgr-change-escort-tabs__tab.is-active {
    color: var(--vs-accent);
    border-color: color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    background: var(--vs-bg-card, #fff);
    box-shadow: 0 4px 12px color-mix(in srgb, #000 5%, transparent);
}

.mgr-change-escort-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.72rem;
    font-weight: 800;
}

.mgr-change-escort-panel__hint {
    margin: 0 0 0.75rem;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.875rem;
}

.mgr-change-escort-select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.65rem;
    background: var(--vs-bg-card, #fff);
}

.mgr-change-escort-remove {
    white-space: nowrap;
}

.mgr-change-escort-form--direct,
.mgr-change-escort-form--requisition {
    display: grid;
    gap: 1rem;
}

.mgr-change-escort-section {
    display: grid;
    gap: 0.85rem;
}

.mgr-change-escort-section--card {
    padding: 1rem 1.05rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 1rem;
    background: var(--vs-bg-card, #fff);
    box-shadow: 0 6px 18px color-mix(in srgb, #000 3%, transparent);
}

.mgr-change-escort-section--notes {
    padding-top: 1rem;
}

.mgr-change-escort-section__head h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mgr-change-escort-section__hint {
    margin: 0.25rem 0 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.45;
}

.mgr-change-escort-fields {
    display: grid;
    gap: 0.85rem;
}

.mgr-change-escort-field {
    margin-bottom: 0;
}

.mgr-change-escort-empty-panel {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 1.35rem 1rem;
    border: 1px dashed color-mix(in srgb, var(--vs-border) 85%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-bg-muted, #f1f5f9) 45%, var(--vs-bg-card, #fff));
    text-align: center;
}

.mgr-change-escort-empty-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mgr-change-escort-empty-panel p {
    margin: 0;
    max-width: 28rem;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.875rem;
    line-height: 1.45;
}

.mgr-change-escort-loading {
    padding: 1.25rem 1rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-bg-muted, #f1f5f9) 40%, var(--vs-bg-card, #fff));
}

.mgr-change-escort-modal__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
}

.mgr-change-escort-modal__footer-hint {
    margin: 0;
    flex: 1 1 14rem;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.82rem;
    line-height: 1.45;
}

.mgr-change-escort-modal__footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.mgr-change-escort-context {
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 18%, var(--vs-border, #dbe3ee));
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vs-accent) 7%, #fff), #fff);
}

.mgr-change-escort-context__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-bottom: 0.85rem;
}

.mgr-change-escort-context__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mgr-change-escort-context__lead {
    margin: 0;
    color: var(--vs-text-muted, #64748b);
    font-size: 0.875rem;
}

.mgr-change-escort-context__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.mgr-change-escort-context__item {
    margin: 0;
}

.mgr-change-escort-context__item dt {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-context__item dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--vs-text, #0f172a);
}

.mgr-change-escort-context__item--accent dd {
    color: var(--vs-accent);
}

.mgr-change-escort-context__meta {
    font-weight: 500;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-trip-card {
    padding: 0.95rem 1rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.85rem;
    background: #fff;
}

.mgr-change-escort-trip-card.is-current {
    border-color: color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border, #dbe3ee));
    background: color-mix(in srgb, var(--vs-accent) 5%, #fff);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--vs-accent) 8%, transparent);
}

.mgr-change-escort-trip-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mgr-change-escort-trip-card__eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-trip-card__head h6 {
    margin: 0;
    font-size: 1rem;
}

.mgr-change-escort-trip-card__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem 0.85rem;
    margin: 0;
}

.mgr-change-escort-trip-card__grid dt {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-trip-card__grid dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 500;
}

.mgr-change-escort-table-wrap--direct {
    border-radius: 0.85rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-border, #dbe3ee) 80%, transparent);
}

.mgr-change-escort-table--direct th {
    background: #f8fafc;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-table--direct tr.is-current {
    background: color-mix(in srgb, var(--vs-accent) 6%, #fff);
}

.mgr-change-escort-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.mgr-change-escort-picker__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-picker__count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vs-accent);
}

.mgr-change-escort-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mgr-change-escort-picker__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--vs-border, #dbe3ee);
    border-radius: 0.85rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mgr-change-escort-picker__option:hover {
    border-color: color-mix(in srgb, var(--vs-accent) 35%, var(--vs-border, #dbe3ee));
    background: color-mix(in srgb, var(--vs-accent) 4%, #fff);
}

.mgr-change-escort-picker__option.is-selected {
    border-color: var(--vs-accent);
    background: color-mix(in srgb, var(--vs-accent) 8%, #fff);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--vs-accent) 10%, transparent);
}

.mgr-change-escort-picker__avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-muted));
    color: var(--vs-accent);
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mgr-change-escort-picker__copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.mgr-change-escort-picker__copy strong {
    font-size: 0.95rem;
}

.mgr-change-escort-picker__copy span {
    color: var(--vs-text-muted, #64748b);
    font-size: 0.8rem;
}

.mgr-change-escort-picker__check {
    margin-left: auto;
    color: var(--vs-accent);
    font-size: 1rem;
    font-weight: 700;
}

.mgr-change-escort-selected {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 24%, var(--vs-border, #dbe3ee));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-accent) 6%, #fff);
}

.mgr-change-escort-selected__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted, #64748b);
}

.mgr-change-escort-selected strong {
    font-size: 1rem;
}

.mgr-change-escort-selected span:last-child {
    color: var(--vs-text-muted, #64748b);
    font-size: 0.84rem;
}

.mgr-change-escort-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.mgr-change-escort-notes__reason {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .mgr-change-escort-spotlight__stats,
    .mgr-change-escort-context__grid,
    .mgr-change-escort-trip-card__grid,
    .mgr-change-escort-notes,
    .mgr-change-driver-info {
        grid-template-columns: 1fr;
    }

    .mgr-change-escort-modal__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .mgr-change-escort-modal__footer-actions {
        width: 100%;
        justify-content: stretch;
    }

    .mgr-change-escort-modal__footer-actions .vs-btn {
        flex: 1 1 auto;
    }

    .mgr-change-escort-picker {
        grid-template-columns: 1fr;
    }

    .mgr-change-driver-profile {
        align-items: flex-start;
    }

    .mgr-register-driver-preview {
        align-items: flex-start;
    }
}

.vs-modal-confirm--warning {
    background: #fffbeb;
    border-bottom-color: #f59e0b;
}

.vs-modal-confirm--warning .vs-modal-icon {
    background: #fef3c7;
    color: #b45309;
}

/* Enroute truck updates list */
.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-hero,
.page-manager-enroute-truck-updates .mgr-tc-hero--enroute {
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: 1.1rem;
    padding: 1.35rem 1.5rem;
    box-shadow: var(--vs-shadow);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 9%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card)));
}

.page-manager-client-specific-trip-updates .mgr-tc-hero--enroute {
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: 1.1rem;
    padding: 1.35rem 1.5rem;
    box-shadow: var(--vs-shadow);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 9%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card)));
}

.page-manager-enroute-truck-updates .mgr-status-pill.is-running {
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    border: 1px solid color-mix(in srgb, var(--vs-accent) 28%, transparent);
}

.page-manager-client-specific-trip-updates .mgr-status-pill.is-running {
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    border: 1px solid color-mix(in srgb, var(--vs-accent) 28%, transparent);
}

.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-hero__stat--selected,
.page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-hero__stat--selected {
    border-color: color-mix(in srgb, var(--vs-accent) 35%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-surface));
    color: var(--vs-text);
}

.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-hero__stat--selected strong,
.page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-hero__stat--selected strong {
    color: var(--vs-accent);
}

.page-manager-enroute-truck-updates .mgr-trips-panel__count,
.page-manager-client-specific-trip-updates .mgr-trips-panel__count {
    margin-left: auto;
}

.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-toolbar,
.page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-toolbar {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1rem;
}

.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-toolbar__actions,
.page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-toolbar__actions {
    flex: 0 0 auto;
}

.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-toolbar__bulk,
.page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-toolbar__bulk {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-toolbar__bulk-count,
.page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-toolbar__bulk-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 22%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

.page-manager-enroute-truck-updates .mgr-enroute-truck-updates-empty__icon,
.page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--vs-success) 12%, transparent);
    color: var(--vs-success);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.mgr-enroute-truck-tracking-unit {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-success) 10%, var(--vs-bg-muted));
    color: var(--vs-success);
    font-size: 0.82rem;
    font-weight: 600;
}

.mgr-enroute-convoy-cell__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.mgr-enroute-convoy-id {
    font-weight: 700;
    color: var(--vs-text);
    font-size: 0.88rem;
    word-break: break-word;
}

.mgr-enroute-convoy-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--vs-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.mgr-enroute-convoy-link:hover {
    color: color-mix(in srgb, var(--vs-accent) 80%, #000);
}

.mgr-convoy-trips-modal__summary {
    margin-bottom: 0.85rem;
}

.mgr-convoy-trips-modal__table-wrap {
    max-height: min(52vh, 28rem);
    overflow: auto;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
}

.mgr-convoy-trips-modal__loading,
.mgr-convoy-trips-modal__empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.mgr-convoy-trips-modal__empty h6 {
    margin: 0 0 0.35rem;
}

.mgr-convoy-trips-modal__empty p {
    margin: 0;
    color: var(--vs-text-muted);
}

.mgr-parked-trucks-modal__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.mgr-parked-trucks-modal__toolbar .mgr-search {
    flex: 1 1 16rem;
}

.mgr-parked-trucks-modal__count {
    font-size: 0.82rem;
    color: var(--vs-text-muted);
}

.mgr-parked-trucks-modal__summary {
    margin-bottom: 0.85rem;
}

.mgr-parked-trucks-modal__table-wrap {
    max-height: min(52vh, 28rem);
    overflow: auto;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
}

.mgr-parked-trucks-modal__table tbody tr.is-clickable {
    cursor: pointer;
}

.mgr-parked-trucks-modal__table tbody tr.is-focused {
    background: color-mix(in srgb, #d97706 10%, var(--vs-bg-card)) !important;
}

.mgr-parked-trucks-modal__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.mgr-parked-trucks-modal__loading,
.mgr-parked-trucks-modal__empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.mgr-parked-trucks-modal__empty h6 {
    margin: 0 0 0.35rem;
}

.mgr-parked-trucks-modal__empty p {
    margin: 0;
    color: var(--vs-text-muted);
}

.page-manager-enroute-truck-updates .mgr-contracts-table--enhanced tbody tr.is-selected,
.page-manager-client-specific-trip-updates .mgr-contracts-table--enhanced tbody tr.is-selected {
    background: color-mix(in srgb, var(--vs-accent) 8%, var(--vs-bg-card)) !important;
}

.page-manager-enroute-truck-updates .mgr-contracts-table--enhanced tbody tr.is-selected:hover,
.page-manager-client-specific-trip-updates .mgr-contracts-table--enhanced tbody tr.is-selected:hover {
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-card)) !important;
}

.page-manager-enroute-truck-updates .mgr-contracts-table--enhanced tbody tr.is-clickable:hover .mgr-po-trip-id,
.page-manager-client-specific-trip-updates .mgr-contracts-table--enhanced tbody tr.is-clickable:hover .mgr-po-trip-id {
    background: color-mix(in srgb, var(--vs-success) 18%, var(--vs-bg-muted));
}

.page-manager-enroute-truck-updates .mgr-reports-pagination,
.page-manager-client-specific-trip-updates .mgr-reports-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    padding: 0.95rem 1.25rem;
    border-top: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.page-manager-enroute-truck-updates .mgr-reports-pagination__btn,
.page-manager-client-specific-trip-updates .mgr-reports-pagination__btn {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.page-manager-enroute-truck-updates .mgr-reports-pagination__btn:hover:not(:disabled),
.page-manager-client-specific-trip-updates .mgr-reports-pagination__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--vs-success) 40%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-success) 6%, var(--vs-bg-card));
}

.page-manager-enroute-truck-updates .mgr-reports-pagination__btn:disabled,
.page-manager-client-specific-trip-updates .mgr-reports-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-manager-enroute-truck-updates .mgr-reports-pagination__status,
.page-manager-client-specific-trip-updates .mgr-reports-pagination__status {
    font-size: 0.86rem;
    color: var(--vs-text-muted);
}

@media (max-width: 720px) {
    .page-manager-enroute-truck-updates .mgr-contracts-search,
    .page-manager-client-specific-trip-updates .mgr-contracts-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .page-manager-enroute-truck-updates .mgr-enroute-truck-updates-toolbar__actions,
    .page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-toolbar__actions {
        flex: 1 1 100%;
    }

    .page-manager-enroute-truck-updates .mgr-enroute-truck-updates-toolbar__bulk,
    .page-manager-client-specific-trip-updates .mgr-enroute-truck-updates-toolbar__bulk {
        width: 100%;
        justify-content: center;
    }
}

/* Parked truck updates list */
.page-manager-parked-truck-updates .mgr-parked-truck-updates-hero {
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: 1.1rem;
    padding: 1.35rem 1.5rem;
    box-shadow: var(--vs-shadow);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 9%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card)));
}

.page-manager-parked-truck-updates .mgr-status-pill.is-pending {
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    border: 1px solid color-mix(in srgb, var(--vs-accent) 28%, transparent);
}

.page-manager-parked-truck-updates .mgr-parked-truck-updates-hero__stat--active {
    border-color: color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-surface));
    color: var(--vs-accent);
}

.page-manager-parked-truck-updates .mgr-parked-truck-updates-hero__stat--active strong {
    color: var(--vs-accent);
}

.page-manager-parked-truck-updates .mgr-trips-panel__count {
    margin-left: auto;
}

.page-manager-parked-truck-updates .mgr-parked-truck-updates-toolbar {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1rem;
}

.page-manager-parked-truck-updates .mgr-parked-truck-updates-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #d97706 12%, transparent);
    color: #d97706;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.mgr-parked-truck-status {
    display: inline-flex;
    max-width: 14rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, #d97706 12%, var(--vs-bg-muted));
    color: #b45309;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mgr-parked-record-status {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-bg-muted));
    color: var(--vs-text);
    font-size: 0.82rem;
    font-weight: 600;
}

.page-manager-parked-truck-updates .mgr-contracts-table--enhanced tbody tr.is-clickable:hover .mgr-po-trip-id {
    background: color-mix(in srgb, #d97706 18%, var(--vs-bg-muted));
}

.page-manager-parked-truck-updates .mgr-contracts-table--enhanced tbody tr.is-clickable:hover .mgr-parked-truck-status {
    background: color-mix(in srgb, #d97706 18%, var(--vs-bg-muted));
}

.page-manager-parked-truck-updates .mgr-reports-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    padding: 0.95rem 1.25rem;
    border-top: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.page-manager-parked-truck-updates .mgr-reports-pagination__btn {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.page-manager-parked-truck-updates .mgr-reports-pagination__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, #d97706 40%, var(--vs-border));
    background: color-mix(in srgb, #d97706 6%, var(--vs-bg-card));
}

.page-manager-parked-truck-updates .mgr-reports-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-manager-parked-truck-updates .mgr-reports-pagination__status {
    font-size: 0.86rem;
    color: var(--vs-text-muted);
}

@media (max-width: 720px) {
    .page-manager-parked-truck-updates .mgr-contracts-search {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Trip changes list */
.page-manager-trip-changes .mgr-trip-changes-hero {
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: 1.1rem;
    padding: 1.35rem 1.5rem;
    box-shadow: var(--vs-shadow);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vs-accent) 9%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card)));
}

.page-manager-trip-changes .mgr-trip-changes-badge {
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    border: 1px solid color-mix(in srgb, var(--vs-accent) 28%, transparent);
}

.page-manager-trip-changes .mgr-trip-changes-hero__stat--active {
    border-color: color-mix(in srgb, var(--vs-accent) 35%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-surface));
    color: var(--vs-accent);
}

.page-manager-trip-changes .mgr-trip-changes-hero__stat--active strong {
    color: var(--vs-accent);
}

.page-manager-trip-changes .mgr-trips-panel__count {
    margin-left: auto;
}

.page-manager-trip-changes .mgr-trip-changes-toolbar {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1rem;
}

.page-manager-trip-changes .mgr-contracts-search {
    flex: 1;
    min-width: 14rem;
    max-width: 36rem;
}

.page-manager-trip-changes .mgr-trip-changes-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.mgr-trip-changes-tracking-unit {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-bg-muted));
    color: var(--vs-accent);
    font-size: 0.82rem;
    font-weight: 600;
}

.page-manager-trip-changes .mgr-contracts-table--enhanced tbody tr.is-clickable:hover .mgr-po-trip-id {
    background: color-mix(in srgb, var(--vs-accent) 18%, var(--vs-bg-muted));
}

.page-manager-trip-changes .mgr-contracts-table--enhanced tbody tr.is-clickable:hover .mgr-trip-changes-tracking-unit {
    background: color-mix(in srgb, var(--vs-accent) 18%, var(--vs-bg-muted));
}

.page-manager-trip-changes .mgr-reports-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    padding: 0.95rem 1.25rem;
    border-top: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.page-manager-trip-changes .mgr-reports-pagination__btn {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.page-manager-trip-changes .mgr-reports-pagination__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--vs-accent) 40%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 6%, var(--vs-bg-card));
}

.page-manager-trip-changes .mgr-reports-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-manager-trip-changes .mgr-reports-pagination__status {
    font-size: 0.86rem;
    color: var(--vs-text-muted);
}

@media (max-width: 720px) {
    .page-manager-trip-changes .mgr-contracts-search {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Client-specific trip updates — workflow strip (shares enroute list colors above) */
.page-manager-client-specific-trip-updates .mgr-client-place-workflow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    padding: 0.95rem 1.15rem;
    margin-bottom: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--vs-success) 18%, var(--vs-border));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--vs-success) 5%, var(--vs-bg-card));
}

.page-manager-client-specific-trip-updates .mgr-client-place-workflow__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: var(--vs-text-muted);
}

.page-manager-client-specific-trip-updates .mgr-client-place-workflow__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-success) 14%, transparent);
    color: var(--vs-success);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* Client place trip detail */
.page-manager-client-place-trip-detail {
    display: grid;
    gap: 1rem;
}

.page-manager-client-place-trip-detail .tc-dispatch-detail-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    position: relative;
    z-index: 1;
}

.page-manager-client-place-trip-detail .tc-dispatch-detail-hero__actions {
    margin-top: 0;
    margin-left: auto;
    justify-content: flex-end;
    flex-shrink: 0;
}

.page-manager-client-place-trip-detail .tc-dispatch-detail-hero__actions .vs-btn {
    min-width: 0;
}

.page-manager-client-place-trip-detail .mgr-client-place-hero__place-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    padding: 0.22rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--vs-success) 28%, transparent);
    background: color-mix(in srgb, var(--vs-success) 12%, var(--vs-surface));
    color: var(--vs-success);
}

.page-manager-client-place-trip-detail .mgr-client-place-visit-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--vs-success) 24%, var(--vs-border));
    border-radius: 0.95rem;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--vs-success) 10%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-accent) 5%, var(--vs-bg-card)));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--vs-success) 8%, transparent);
}

.page-manager-client-place-trip-detail .mgr-client-place-visit-banner__main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.page-manager-client-place-trip-detail .mgr-client-place-visit-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-success) 16%, var(--vs-bg-muted));
    color: var(--vs-success);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.page-manager-client-place-trip-detail .mgr-client-place-visit-banner__copy h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--vs-success);
}

.page-manager-client-place-trip-detail .mgr-client-place-visit-banner__copy p {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
    color: var(--vs-text-muted);
}

.page-manager-client-place-trip-detail .mgr-client-place-visit-banner__meta {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vs-success);
}

.page-manager-client-place-trip-detail .mgr-client-place-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card));
}

.page-manager-client-place-trip-detail .mgr-client-place-panel__head h3 {
    margin: 0;
    font-size: 1rem;
}

.page-manager-client-place-trip-detail .mgr-client-place-panel__count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-success) 10%, transparent);
    color: var(--vs-success);
    font-size: 0.8rem;
    font-weight: 700;
}

.page-manager-client-place-trip-detail .mgr-client-place-table .mgr-place-name {
    font-weight: 700;
    color: var(--vs-text);
}

.page-manager-client-place-trip-detail .mgr-client-place-table .mgr-place-type-pill {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-bg-muted));
    color: var(--vs-accent);
    font-size: 0.78rem;
    font-weight: 600;
}

.page-manager-client-place-trip-detail .mgr-client-place-table tbody tr.is-at-place {
    background: color-mix(in srgb, var(--vs-success) 6%, var(--vs-bg-card));
}

.page-manager-client-place-trip-detail .mgr-client-place-table tbody tr.is-at-place:hover {
    background: color-mix(in srgb, var(--vs-success) 10%, var(--vs-bg-card));
}

.page-manager-client-place-trip-detail .mgr-client-place-table .mgr-row-num {
    color: var(--vs-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.page-manager-client-place-trip-detail .mgr-client-place-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.page-manager-client-place-trip-detail .mgr-client-place-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.75rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--vs-success) 12%, transparent);
    color: var(--vs-success);
    font-size: 0.72rem;
    font-weight: 800;
}

.mgr-create-hint--warn {
    padding: 0.65rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, #d97706 28%, var(--vs-border));
    background: color-mix(in srgb, #fef3c7 50%, var(--vs-bg-card));
    color: #92400e;
    font-size: 0.86rem;
    line-height: 1.45;
}

/* Trips exceeded ETA — matches en-route trips shell with overdue emphasis */

.page-manager-trips-exceeded-main .mgr-trips-hero--eta-exceeded,
.page-manager-trips-exceeded-route .mgr-trips-hero--eta-exceeded {
    border-color: color-mix(in srgb, #d97706 22%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #d97706 14%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, #d97706 6%, var(--vs-bg-card)), var(--vs-bg-card));
}

.page-manager-trips-exceeded-main .mgr-enroute-hero__icon,
.page-manager-trips-exceeded-route .mgr-enroute-hero__icon {
    background: color-mix(in srgb, #d97706 14%, var(--vs-bg-muted));
    color: #b45309;
}

.mgr-route-eta-summary {
    margin: 0 0 1rem;
}

.mgr-route-eta-extensions-card {
    min-width: 0;
    grid-column: 1 / -1;
    width: 100%;
}

.mgr-route-eta-extensions-card__lead {
    margin: 0.35rem 0 0;
    color: var(--vs-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.mgr-route-eta-extensions-card__empty {
    margin: 0 1rem 1.15rem;
    padding: 1.25rem 1rem;
    border: 1px dashed color-mix(in srgb, var(--vs-border) 85%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-surface-muted, var(--vs-surface)) 70%, transparent);
    text-align: center;
}

.mgr-route-eta-extensions-card__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-text-muted) 12%, transparent);
    color: var(--vs-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mgr-route-eta-extensions-card__empty h4 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.mgr-route-eta-extensions-card__empty p {
    margin: 0;
    color: var(--vs-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.mgr-route-eta-extensions-card__table-wrap {
    margin: 0 1rem 1.15rem;
    overflow-x: auto;
}

.mgr-route-eta-extensions-card__table {
    min-width: 42rem;
}

.mgr-route-eta-extensions-card__actions-col {
    width: 8.5rem;
    white-space: nowrap;
}

/* Route ETA extension detail modal */

.mgr-route-eta-extension-detail-modal .vs-modal-dialog {
    max-width: 42rem;
}

.mgr-route-eta-ext-modal__shell {
    overflow: hidden;
}

.mgr-route-eta-ext-modal__header {
    border-bottom-color: color-mix(in srgb, #d97706 18%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #d97706 10%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, #d97706 4%, var(--vs-bg-card)), var(--vs-bg-card));
}

.mgr-route-eta-ext-modal__icon {
    background: color-mix(in srgb, #d97706 16%, var(--vs-bg-muted));
    color: #b45309;
    border: 1px solid color-mix(in srgb, #d97706 24%, transparent);
}

.mgr-route-eta-ext-modal__eyebrow {
    color: #b45309;
}

.mgr-route-eta-ext-modal__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.mgr-route-eta-ext-modal__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #d97706 28%, transparent);
    background: color-mix(in srgb, #fef3c7 72%, var(--vs-bg-card));
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mgr-route-eta-ext-modal__body {
    display: grid;
    gap: 0.95rem;
}

.mgr-route-eta-ext-modal__eta-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--vs-border));
    border-radius: 0.9rem;
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #d97706 8%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, #fef3c7 42%, var(--vs-bg-card)), var(--vs-bg-card));
}

.mgr-route-eta-ext-modal__eta-node {
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--vs-border) 85%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.mgr-route-eta-ext-modal__eta-node--new {
    border-color: color-mix(in srgb, #d97706 28%, var(--vs-border));
    background: color-mix(in srgb, #fef3c7 38%, var(--vs-bg-card));
}

.mgr-route-eta-ext-modal__eta-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-route-eta-ext-modal__eta-value {
    display: block;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--vs-text);
    word-break: break-word;
}

.mgr-route-eta-ext-modal__eta-node--new .mgr-route-eta-ext-modal__eta-value {
    color: #92400e;
}

.mgr-route-eta-ext-modal__eta-shift {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4.5rem;
    text-align: center;
}

.mgr-route-eta-ext-modal__eta-shift-days {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, #d97706 14%, transparent);
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mgr-route-eta-ext-modal__eta-shift-arrow {
    color: #b45309;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.mgr-route-eta-ext-modal__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.mgr-route-eta-ext-modal__stat {
    padding: 0.72rem 0.82rem;
    border: 1px solid color-mix(in srgb, var(--vs-border) 85%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-bg) 40%, transparent);
}

.mgr-route-eta-ext-modal__stat--accent {
    border-color: color-mix(in srgb, #d97706 24%, var(--vs-border));
    background: color-mix(in srgb, #fef3c7 28%, var(--vs-bg-card));
}

.mgr-route-eta-ext-modal__stat-label {
    display: block;
    margin-bottom: 0.18rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-route-eta-ext-modal__stat-value {
    display: block;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--vs-text);
    word-break: break-word;
}

.mgr-route-eta-ext-modal__stat--accent .mgr-route-eta-ext-modal__stat-value {
    color: #92400e;
}

.mgr-route-eta-ext-modal__section {
    margin: 0;
    padding-top: 0.15rem;
}

.mgr-route-eta-ext-modal__section .mgr-form-section__title {
    margin-bottom: 0.65rem;
}

.mgr-route-eta-ext-modal__fields {
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mgr-route-eta-ext-modal__reason-card {
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--vs-border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, #fef3c7 34%, var(--vs-bg-card));
}

.mgr-route-eta-ext-modal__reason-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #92400e;
}

.mgr-route-eta-ext-modal__reason-card p {
    margin: 0;
    color: var(--vs-text);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.mgr-route-eta-ext-modal__footer {
    border-top-color: color-mix(in srgb, #d97706 14%, var(--vs-border));
}

@media (max-width: 640px) {
    .mgr-route-eta-ext-modal__eta-flow {
        grid-template-columns: 1fr;
    }

    .mgr-route-eta-ext-modal__eta-shift {
        flex-direction: row;
        justify-content: center;
        min-width: 0;
    }

    .mgr-route-eta-ext-modal__stats,
    .mgr-route-eta-ext-modal__fields {
        grid-template-columns: 1fr;
    }
}

.mgr-route-eta-extensions-card__footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 1rem 1.15rem;
    border-top: 1px solid color-mix(in srgb, var(--vs-border) 70%, transparent);
    margin-top: 0.15rem;
    padding-top: 1rem;
}