/* Manager list heroes — same visual language as dispatcher dsp-pa-list-hero */

.dsp-pa-list-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--vs-border));
    border-radius: 1.1rem;
    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);
}

.dsp-pa-list-hero__main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 1 18rem;
}

.dsp-pa-list-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #d97706 16%, var(--vs-bg-muted));
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.dsp-pa-list-hero__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}

.dsp-pa-list-hero .vs-page-title {
    margin: 0.25rem 0 0;
}

.dsp-pa-list-hero__lead {
    margin: 0.45rem 0 0;
    max-width: 36rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--vs-text-muted);
}

.dsp-pa-list-hero__stat {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1.15rem;
    min-width: 7.5rem;
    border: 1px solid color-mix(in srgb, #d97706 28%, var(--vs-border));
    border-radius: 0.95rem;
    background: color-mix(in srgb, #d97706 8%, var(--vs-surface));
    text-align: center;
}

.dsp-pa-list-hero__stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b45309;
}

.dsp-pa-list-hero__stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #b45309;
}

.dsp-pa-list-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    align-self: center;
}

/* Compact secondary actions on ManagerConfigHero (matches contract-detail Edit/Delete). */
.mgr-config-hero-action {
    min-width: 0;
    padding: 0.4rem 0.85rem;
    font-size: 0.84rem;
    white-space: nowrap;
    text-decoration: none;
}

.page-manager-contract,
.mgr-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mgr-dashboard.page-dashboard {
    gap: 0;
}

.mgr-dashboard__lead,
.mgr-contract-hero__lead {
    margin: 0.35rem 0 0;
    color: var(--vs-text-muted);
    max-width: 52rem;
}

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

.mgr-dash-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--vs-border);
    border-radius: 16px;
    background: linear-gradient(
        155deg,
        var(--vs-bg-card),
        color-mix(in srgb, var(--vs-bg-card) 90%, var(--vs-accent-soft))
    );
    box-shadow: var(--vs-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.mgr-dash-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--vs-shadow-lg);
}

.mgr-dash-stat.is-attention,
.mgr-dash-stat--alert.is-attention {
    border-color: color-mix(in srgb, #d68910 45%, var(--vs-border));
    background: linear-gradient(
        155deg,
        color-mix(in srgb, #d68910 8%, var(--vs-bg-card)),
        var(--vs-bg-card)
    );
}

.mgr-dash-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.45rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

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

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

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

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

.mgr-dash-stat--alert .mgr-dash-stat__icon {
    background: color-mix(in srgb, #d68910 16%, transparent);
    color: #d68910;
    font-size: 1rem;
}

.mgr-dash-stat__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-dash-stat__value {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.mgr-dash-stat--pending .mgr-dash-stat__value {
    color: #d68910;
}

.mgr-dash-stat--running .mgr-dash-stat__value {
    color: #1f9d55;
}

.mgr-dash-stat--closed .mgr-dash-stat__value {
    color: #64748b;
}

.mgr-dash-stat--alert.is-attention .mgr-dash-stat__value {
    color: #d68910;
}

.mgr-dash-stat__meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
}

.mgr-dash-stats--prealerts {
    grid-template-columns: minmax(240px, 320px);
}

a.mgr-dash-stat {
    text-decoration: none;
    color: inherit;
}

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

.mgr-dash-stat--prealert.is-attention {
    border-color: color-mix(in srgb, #2563eb 35%, var(--vs-border));
    background: linear-gradient(
        155deg,
        color-mix(in srgb, #2563eb 8%, var(--vs-bg-card)),
        var(--vs-bg-card)
    );
}

.mgr-dash-stat--prealert.is-attention .mgr-dash-stat__value {
    color: #2563eb;
}

.mgr-dash-stat__link {
    margin-left: auto;
    align-self: center;
    color: var(--vs-accent);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

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

.mgr-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--vs-accent);
    background-image: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    text-transform: capitalize;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--vs-accent) 28%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mgr-add-btn span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.15rem;
    line-height: 1;
}

.mgr-add-btn:hover {
    transform: translateY(-1px);
}

.mgr-contracts-panel,
.mgr-wizard {
    border: 1px solid var(--vs-border);
    border-radius: 1.1rem;
    background: var(--vs-surface);
    overflow: hidden;
}

.mgr-contracts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 70%, transparent);
}

.mgr-search {
    flex: 1;
    max-width: 34rem;
}

.mgr-search input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    background: var(--vs-bg);
    color: var(--vs-text);
}

.mgr-contracts-count {
    color: var(--vs-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.mgr-contracts-page-size {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
    white-space: nowrap;
}

.mgr-contracts-page-size select {
    min-width: 4.5rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.55rem;
}

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

.page-manager-contract .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-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.page-manager-contract .mgr-reports-pagination__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--vs-text-muted) 35%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-bg-secondary) 50%, var(--vs-bg-card));
}

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

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

.page-manager-contract .mgr-contracts-table--enhanced tbody tr.is-clickable {
    cursor: pointer;
}

.page-manager-contract .mgr-contracts-table--enhanced tbody tr.is-clickable:hover {
    background: color-mix(in srgb, var(--vs-bg-secondary) 50%, transparent);
}

.page-manager-contract .mgr-contracts-table--enhanced tbody tr.is-selected {
    background: color-mix(in srgb, var(--vs-bg-secondary) 65%, transparent);
}

.page-manager-contract .mgr-trips-panel__toolbar--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

.page-manager-contract .mgr-trips-panel__toolbar--stacked > .mgr-contracts-toolbar {
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

.page-manager-contract .mgr-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mgr-contracts-table-wrap {
    overflow-x: auto;
    padding: 1.25rem;
}

.mgr-contracts-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 100%;
}

.mgr-contracts-table th,
.mgr-contracts-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--vs-border);
    vertical-align: top;
}

.mgr-contracts-table th {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.mgr-contracts-table tbody tr:hover {
    background: color-mix(in srgb, var(--vs-accent) 5%, transparent);
}

.mgr-route-cell {
    max-width: 16rem;
    color: var(--vs-text-muted);
}

.mgr-status-pill,
.mgr-active-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.mgr-status-pill.is-running {
    background: color-mix(in srgb, #1f9d55 16%, transparent);
    color: #1f9d55;
}

.mgr-status-pill.is-pending {
    background: color-mix(in srgb, #d68910 16%, transparent);
    color: #d68910;
}

.mgr-status-pill.is-neutral {
    background: color-mix(in srgb, var(--vs-text-muted) 16%, transparent);
    color: var(--vs-text-muted);
}

.mgr-active-pill.is-active {
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
}

.mgr-active-pill.is-inactive {
    background: color-mix(in srgb, #c0392b 12%, transparent);
    color: #c0392b;
}

.mgr-loading-panel,
.mgr-empty-panel {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 2.5rem 1.5rem;
    color: var(--vs-text-muted);
}

.mgr-wizard {
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.mgr-wizard--modal {
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.mgr-wizard-stepper {
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
    padding: 1rem 1.25rem 0.75rem;
    overflow-x: auto;
    scrollbar-width: thin;
    background: transparent;
    border-bottom: 1px solid var(--vs-border);
}

.mgr-wizard-step {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-bg-card);
    color: var(--vs-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.mgr-wizard-step:hover {
    border-color: color-mix(in srgb, var(--vs-accent) 45%, var(--vs-border));
    color: var(--vs-text);
}

.mgr-wizard-step.is-active {
    border-color: var(--vs-accent);
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-card));
    color: var(--vs-accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--vs-accent) 18%, transparent);
}

.mgr-wizard-step.is-complete {
    border-color: color-mix(in srgb, #1f9d55 40%, var(--vs-border));
    color: #1f9d55;
}

.mgr-wizard-step.is-complete .mgr-wizard-step__marker {
    background: color-mix(in srgb, #1f9d55 14%, transparent);
    color: #1f9d55;
}

.mgr-wizard-step__marker {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-text-muted) 12%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.mgr-wizard-step.is-active .mgr-wizard-step__marker {
    background: var(--vs-accent);
    color: #fff;
}

.mgr-wizard-progress {
    flex-shrink: 0;
    height: 3px;
    background: color-mix(in srgb, var(--vs-border) 80%, transparent);
}

.mgr-wizard-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--vs-accent), color-mix(in srgb, var(--vs-accent) 70%, #6366f1));
    transition: width 0.25s ease;
}

.mgr-wizard__scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1.15rem 1.25rem 1.25rem;
}

.mgr-wizard__footer {
    margin: 0;
    border-radius: 0;
    flex-shrink: 0;
}

.mgr-client-wizard__footer {
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
}

.mgr-client-wizard__footer-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.mgr-client-wizard__footer .mgr-wizard__step-count {
    margin-left: auto;
}

.mgr-create-modal .vs-accounts-modal__footer-actions {
    flex-wrap: nowrap;
}

.mgr-wizard__step-count {
    color: var(--vs-text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

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

.mgr-wizard__head h3,
.mgr-section-head h4 {
    margin: 0;
}

.mgr-wizard__head p {
    margin: 0.35rem 0 0;
    color: var(--vs-text-muted);
}

.mgr-icon-btn {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    border: 1px solid var(--vs-border);
    background: var(--vs-bg);
    color: var(--vs-text);
    cursor: pointer;
}

.mgr-icon-btn--ghost:hover {
    border-color: var(--vs-accent);
    color: var(--vs-accent);
}

.mgr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mgr-tab {
    border: 1px solid var(--vs-border);
    background: var(--vs-bg);
    color: var(--vs-text);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    cursor: pointer;
}

.mgr-tab.is-active {
    background: var(--vs-accent);
    border-color: var(--vs-accent);
    color: #fff;
}

.mgr-tab-panel {
    padding: 1.35rem;
    border: 1px solid var(--vs-border);
    border-radius: 1rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vs-bg) 35%, transparent) 0%,
        color-mix(in srgb, var(--vs-bg-card) 95%, transparent) 100%
    );
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.mgr-tab-panel__intro {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vs-border);
}

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

.mgr-tab-panel__intro h4 {
    margin: 0.35rem 0 0;
    font-size: 1.15rem;
}

.mgr-tab-panel__intro p {
    margin: 0.4rem 0 0;
    color: var(--vs-text-muted);
    line-height: 1.55;
    max-width: 42rem;
}

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

.mgr-form-grid--header {
    grid-template-columns: minmax(280px, 2fr) repeat(2, minmax(160px, 1fr));
    margin-bottom: 1rem;
}

.mgr-form-grid--routes-head {
    margin-bottom: 1rem;
}

.mgr-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mgr-field--wide,
.mgr-field--client {
    grid-column: span 1;
}

@media (min-width: 900px) {
    .mgr-field--client {
        grid-column: auto;
    }
}

.mgr-field label {
    font-size: 0.85rem;
    color: var(--vs-text-muted);
}

.mgr-field--required > label::after {
    content: " *";
    color: #c0392b;
    font-weight: 700;
}

.mgr-field input,
.mgr-field select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.65rem;
    background: var(--vs-bg);
    color: var(--vs-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mgr-field input:focus,
.mgr-field 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-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mgr-repeat-list {
    display: grid;
    gap: 1rem;
}

.mgr-repeat-card {
    position: relative;
    padding: 1rem 1rem 0.85rem;
    border: 1px dashed color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-surface) 88%, var(--vs-bg-secondary));
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mgr-repeat-card:hover {
    border-color: color-mix(in srgb, var(--vs-accent) 45%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-surface));
}

.mgr-remove-btn {
    margin-top: 0.75rem;
    border: 0;
    background: transparent;
    color: #c0392b;
    cursor: pointer;
}

.mgr-empty {
    color: var(--vs-text-muted);
}

.mgr-upload-zone {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 2rem 1.5rem;
    border: 2px dashed color-mix(in srgb, var(--vs-accent) 35%, var(--vs-border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--vs-accent) 5%, var(--vs-bg));
    text-align: center;
}

.mgr-upload-zone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-size: 1.35rem;
    font-weight: 700;
}

.mgr-upload-zone__title {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 600;
}

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

.mgr-upload-zone__browse {
    position: relative;
    display: inline-flex;
    margin-top: 0.35rem;
    overflow: hidden;
    cursor: pointer;
}

.mgr-upload-zone__browse span {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--vs-accent);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mgr-upload-zone__browse:hover span {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--vs-accent) 24%, transparent);
}

.mgr-upload-zone__browse input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.mgr-upload-zone__file {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 28rem;
    margin-top: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: var(--vs-bg-card);
    text-align: left;
}

.mgr-upload-zone__file-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.mgr-upload-zone__file-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.1rem 0;
}

.mgr-upload-zone__file strong {
    display: block;
    font-size: 0.92rem;
    word-break: break-word;
}

.mgr-upload-zone__file p {
    margin: 0;
    color: var(--vs-text-muted);
    font-size: 0.82rem;
}

.mgr-upload {
    display: grid;
    gap: 0.75rem;
}

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

.mgr-contract-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.mgr-action-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--vs-border);
    border-radius: 1rem;
    background: var(--vs-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.mgr-action-card:hover {
    border-color: var(--vs-accent);
    transform: translateY(-1px);
}

.mgr-action-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-weight: 700;
}

.mgr-action-card h3 {
    margin: 0;
}

.mgr-action-card p {
    margin: 0.35rem 0 0;
    color: var(--vs-text-muted);
}

.mgr-action-card__cta {
    color: var(--vs-accent);
    font-weight: 600;
}

@media (max-width: 900px) {
    .mgr-form-grid--header {
        grid-template-columns: 1fr;
    }
}

.mgr-status-pill.is-closed {
    background: color-mix(in srgb, #64748b 16%, transparent);
    color: #475569;
}

.mgr-contracts-table tbody tr {
    transition: background 0.15s ease;
}

.mgr-contract-row {
    cursor: pointer;
}

.mgr-contract-row:hover {
    background: color-mix(in srgb, var(--vs-accent) 5%, transparent);
}

.mgr-contracts-table tbody tr.is-alert {
    background: color-mix(in srgb, #d68910 6%, transparent);
}

.mgr-pending-flag {
    font-size: 0.78rem;
    font-weight: 700;
    color: #d68910;
}

/* Portal-wide table pagination — Previous · page · Next centered as one group */
.mgr-pagination,
.mgr-reports-pagination,
.mgr-contracts-pagination,
.reports-pagination,
.cr-vehicles-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--vs-border);
    text-align: center;
}

.mgr-reports-pagination,
.mgr-contracts-pagination,
.reports-pagination,
.cr-vehicles-pagination {
    padding: 0.95rem 1.25rem;
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.mgr-reports-pagination__cluster {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.75rem;
    margin-inline: auto;
}

.mgr-reports-pagination__btn,
.mgr-contracts-pagination .vs-btn,
.mgr-pagination > .vs-btn,
.mgr-pagination > .mgr-pagination__btn,
.reports-pagination__btn,
.cr-vehicles-pagination .vs-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-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
}

.mgr-reports-pagination__btn:hover:not(:disabled),
.mgr-contracts-pagination .vs-btn:hover:not(:disabled),
.mgr-pagination > .vs-btn:hover:not(:disabled),
.mgr-pagination > .mgr-pagination__btn:hover:not(:disabled),
.reports-pagination__btn:hover:not(:disabled),
.cr-vehicles-pagination .vs-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--vs-text-muted) 35%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-bg-secondary) 50%, var(--vs-bg-card));
}

.mgr-reports-pagination__btn:disabled,
.mgr-contracts-pagination .vs-btn:disabled,
.mgr-pagination > .vs-btn:disabled,
.mgr-pagination > .mgr-pagination__btn:disabled,
.reports-pagination__btn:disabled,
.cr-vehicles-pagination .vs-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mgr-reports-pagination__status,
.mgr-pagination__status,
.mgr-pagination__info,
.reports-pagination__status,
.mgr-contracts-pagination > span {
    color: var(--vs-text-muted);
    font-size: 0.88rem;
    white-space: nowrap;
}

.mgr-notifications {
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, #d68910 35%, var(--vs-border));
    border-radius: 1rem;
    background: color-mix(in srgb, #d68910 8%, var(--vs-surface));
}

.mgr-notifications__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #d68910;
}

.mgr-notifications__head h3 {
    margin: 0.25rem 0 0;
}

.mgr-notifications__list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mgr-notification {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
}

.mgr-notification p {
    margin: 0.25rem 0 0;
    color: var(--vs-text-muted);
}

/* Contracts list page */
.page-manager-contracts-list {
    gap: 1.25rem;
}

.mgr-contracts-hero {
    padding: 1.35rem 1.5rem;
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--vs-border));
    border-radius: 1.1rem;
    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);
}

.mgr-contracts-hero__copy {
    flex: 1;
    min-width: 16rem;
}

.mgr-contracts-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.mgr-contracts-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 65%, transparent);
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

.mgr-contracts-hero__stat strong {
    color: var(--vs-text);
    font-size: 1rem;
}

.mgr-contracts-hero__stat--alert {
    border-color: color-mix(in srgb, #d68910 45%, var(--vs-border));
    background: color-mix(in srgb, #d68910 10%, var(--vs-surface));
    color: #b9770e;
}

.mgr-contracts-hero__stat--alert strong {
    color: #d68910;
}

.mgr-contracts-panel--table {
    box-shadow: var(--vs-shadow);
}

.mgr-contracts-search {
    position: relative;
    flex: 1;
    max-width: 36rem;
}

.mgr-contracts-search__icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vs-text-muted);
    pointer-events: none;
}

.mgr-contracts-search input {
    padding-left: 2.35rem;
}

.mgr-contracts-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.mgr-contracts-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    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-contracts-empty h3 {
    margin: 0 0 0.35rem;
}

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

.mgr-contracts-table-wrap--styled {
    padding: 0;
    overflow-x: auto;
}

.mgr-contracts-table--enhanced tbody tr.is-pending-start {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, #d68910 10%, transparent),
        color-mix(in srgb, #d68910 4%, transparent) 55%,
        transparent
    );
    border-left: 3px solid #d68910;
}

.mgr-contracts-table--enhanced tbody tr.is-pending-start:hover {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, #d68910 14%, transparent),
        color-mix(in srgb, #d68910 6%, transparent) 55%,
        color-mix(in srgb, var(--vs-accent) 4%, transparent)
    );
}

.mgr-contract-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.mgr-contract-cell__alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    background: #d68910;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.mgr-contract-cell__number {
    display: block;
}

.mgr-contract-cell__hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #d68910;
}

.mgr-pending-flag--pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, #d68910 14%, transparent);
    color: #b9770e;
    white-space: nowrap;
}

.mgr-pending-flag__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #d68910;
    animation: mgr-pending-pulse 1.6s ease-in-out infinite;
}

@keyframes mgr-pending-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.mgr-notifications--pending-start {
    padding: 1.25rem 1.35rem;
    border-radius: 1.1rem;
    box-shadow: var(--vs-shadow);
}

.mgr-notifications__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mgr-notifications__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: #d68910;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.mgr-notifications__copy {
    flex: 1;
}

.mgr-notifications__lead {
    margin: 0.35rem 0 0;
    color: var(--vs-text-muted);
}

.mgr-notification__contract {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--vs-accent) 10%, transparent);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vs-accent);
}

.mgr-notification__action {
    flex-shrink: 0;
    align-self: center;
}

.mgr-create-modal .vs-modal-backdrop {
    backdrop-filter: blur(4px);
}

.mgr-create-modal .mgr-modal-dialog {
    max-width: min(1120px, calc(100vw - 2rem));
    width: 100%;
}

.mgr-create-modal .mgr-modal-dialog--wide {
    max-width: min(960px, calc(100vw - 2rem));
}

.mgr-contract-hero__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mgr-armed-type-picker {
    display: grid;
    gap: 1.25rem;
    padding: 0.5rem 0 1rem;
}

.mgr-armed-type-picker__lead {
    margin: 0;
    color: var(--vs-text-muted);
    max-width: 42rem;
    line-height: 1.55;
}

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

.mgr-armed-type-card {
    display: grid;
    gap: 0.65rem;
    padding: 1.15rem 1.2rem;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--vs-border) 88%, transparent);
    border-radius: 14px;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--vs-accent) 6%, var(--vs-bg-card)),
        var(--vs-bg-card));
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mgr-armed-type-card:hover,
.mgr-armed-type-card:focus-visible {
    border-color: color-mix(in srgb, var(--vs-accent) 45%, var(--vs-border));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--vs-accent) 12%, transparent);
    transform: translateY(-1px);
}

.mgr-armed-type-card--alt {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, #64748b 8%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.mgr-armed-type-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.mgr-armed-type-card--alt .mgr-armed-type-card__icon {
    background: color-mix(in srgb, #64748b 16%, transparent);
    color: #475569;
}

.mgr-armed-type-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vs-text);
}

.mgr-armed-type-card__copy {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--vs-text-muted);
}

.mgr-armed-type-card__cta {
    margin-top: 0.25rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--vs-accent);
}

.mgr-armed-create-modal__header {
    border-bottom: 1px solid var(--vs-border);
}

.mgr-armed-create-modal__icon {
    background: color-mix(in srgb, #b45309 16%, transparent);
    color: #b45309;
}

.mgr-armed-create-modal__stepper {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg-muted) 55%, var(--vs-bg-card));
    overflow-x: auto;
}

.mgr-armed-create-modal__step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--vs-text-muted);
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 600;
}

.mgr-armed-create-modal__step.is-active {
    color: var(--vs-text);
}

.mgr-armed-create-modal__step.is-complete {
    color: color-mix(in srgb, var(--vs-accent) 75%, var(--vs-text));
}

.mgr-armed-create-modal__step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    border: 1px solid var(--vs-border);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--vs-bg-card);
}

.mgr-armed-create-modal__step.is-active .mgr-armed-create-modal__step-marker {
    border-color: var(--vs-accent);
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-card));
    color: var(--vs-accent);
}

.mgr-armed-create-modal__step.is-complete .mgr-armed-create-modal__step-marker {
    border-color: color-mix(in srgb, var(--vs-accent) 40%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 18%, var(--vs-bg-card));
    color: var(--vs-accent);
}

.mgr-armed-create-modal__step-connector {
    flex: 1 1 1.5rem;
    min-width: 1rem;
    height: 2px;
    border-radius: 999px;
    background: var(--vs-border);
}

.mgr-armed-create-modal__step-connector.is-complete {
    background: color-mix(in srgb, var(--vs-accent) 55%, var(--vs-border));
}

.mgr-armed-create-modal__body {
    overflow: auto;
    padding: 1rem 1.25rem 1.25rem;
}

.mgr-armed-create-modal__footer {
    margin-top: 0.5rem;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, var(--vs-bg-card) 24%);
}

.mgr-armed-trip-step__toolbar {
    margin-bottom: 1rem;
}

.mgr-armed-trip-step__search {
    position: relative;
    flex: 1;
}

.mgr-armed-trip-step__search input,
.mgr-armed-panel__search input {
    padding-left: 2.2rem;
}

.mgr-armed-trip-step__search-icon,
.mgr-armed-panel__search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vs-text-muted);
    pointer-events: none;
    font-size: 0.95rem;
}

.mgr-armed-trip-list {
    display: grid;
    gap: 0.75rem;
    max-height: min(420px, 52vh);
    overflow: auto;
    padding-right: 0.15rem;
}

.mgr-armed-trip-card {
    display: grid;
    gap: 0.55rem;
    width: 100%;
    padding: 0.95rem 1rem;
    text-align: left;
    border: 1px solid var(--vs-border);
    border-radius: 12px;
    background: var(--vs-bg-card);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.mgr-armed-trip-card:hover,
.mgr-armed-trip-card:focus-visible {
    border-color: color-mix(in srgb, var(--vs-accent) 42%, var(--vs-border));
    box-shadow: 0 8px 22px color-mix(in srgb, #000 8%, transparent);
    background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card));
}

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

.mgr-armed-trip-card__date {
    font-size: 0.82rem;
    color: var(--vs-text-muted);
}

.mgr-armed-trip-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--vs-text-muted);
    font-size: 0.9rem;
}

.mgr-armed-trip-card__dot {
    opacity: 0.55;
}

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

.mgr-armed-trip-card__facts div {
    display: grid;
    gap: 0.15rem;
}

.mgr-armed-trip-card__facts dt {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vs-text-muted);
}

.mgr-armed-trip-card__facts dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
}

.mgr-armed-trip-step__empty-hint {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

.mgr-armed-details-step {
    display: grid;
    gap: 1rem;
}

.mgr-armed-form-section__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

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

.mgr-armed-form-section__lead {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

.mgr-armed-form-section .mgr-form-section__title {
    margin: 0;
}

.mgr-armed-create-trip-summary {
    margin-bottom: 0;
}

.mgr-armed-create-trip-summary__pill {
    margin-left: auto;
}

.mgr-input-readonly {
    background: color-mix(in srgb, var(--vs-bg-muted) 65%, var(--vs-bg-card));
    color: var(--vs-text-muted);
}

.page-manager-armed-responses .mgr-armed-hero,
.page-manager-armed-detail .mgr-armed-detail-hero {
    border: 1px solid color-mix(in srgb, #b45309 18%, var(--vs-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #b45309 7%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

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

.mgr-armed-hero__badge {
    font-size: 0.78rem;
}

.mgr-armed-add-btn {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--vs-accent) 18%, transparent);
}

.mgr-armed-panel {
    border-radius: 14px;
}

.mgr-armed-panel__toolbar {
    align-items: center;
}

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

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

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

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

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

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

.mgr-armed-row__id {
    font-weight: 700;
    color: var(--vs-text-muted);
}

.mgr-armed-type-tag {
    display: inline-flex;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, #b45309 12%, var(--vs-bg-muted));
    color: #9a3412;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mgr-armed-reason-cell {
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mgr-armed-detail-hero__badge {
    background: color-mix(in srgb, #b45309 16%, transparent);
    color: #b45309;
}

.mgr-armed-verification-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, #059669 14%, var(--vs-bg-muted));
    color: #047857;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .mgr-armed-trip-card__facts {
        grid-template-columns: 1fr;
    }

    .mgr-armed-create-modal__stepper {
        padding-inline: 1rem;
    }
}

.mgr-armed-type-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mgr-armed-type-picker__btn {
    min-width: 11rem;
}

.mgr-armed-create-trip-summary {
    margin-bottom: 1rem;
}

.mgr-armed-trip-picker {
    max-height: 360px;
    overflow: auto;
}

.mgr-create-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vs-border);
}

.mgr-form-section {
    margin-bottom: 1.25rem;
}

.mgr-form-section__title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.mgr-detail-fields--compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.mgr-create-modal__shell {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
        0 24px 48px color-mix(in srgb, #000 18%, transparent),
        0 0 0 1px color-mix(in srgb, var(--vs-border) 80%, transparent);
}

.mgr-create-modal__header {
    flex-shrink: 0;
}

.mgr-create-modal__icon {
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.mgr-create-modal__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--vs-bg-card);
}

.mgr-create-modal__loading {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 4rem 1.5rem;
    color: var(--vs-text-muted);
}

.mgr-modal-content {
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border-radius: 1rem;
    padding: 0;
}

.mgr-create-modal .mgr-wizard {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.page-manager-contract-detail {
    gap: 1.35rem;
}

.mgr-contract-detail__back {
    display: inline-flex;
    align-self: flex-start;
    color: var(--vs-accent);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mgr-contract-detail__back:hover {
    color: color-mix(in srgb, var(--vs-accent) 80%, var(--vs-text));
    text-decoration: underline;
}

.mgr-detail-loading,
.mgr-detail-empty-page {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 3rem 1.5rem;
    border: 1px solid var(--vs-border);
    border-radius: 1rem;
    background: var(--vs-surface);
    color: var(--vs-text-muted);
    text-align: center;
}

.mgr-detail-empty-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-text-muted) 12%, transparent);
    color: var(--vs-text-muted);
    font-size: 1.35rem;
    font-weight: 700;
}

.mgr-detail-hero {
    display: grid;
    gap: 1.15rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--vs-border));
    border-radius: 1.1rem;
    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);
}

.mgr-detail-hero__main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mgr-detail-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #d97706 16%, var(--vs-bg-muted));
    color: #b45309;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.mgr-detail-hero__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}

.mgr-detail-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.mgr-detail-hero__title-row .vs-page-title {
    margin: 0;
}

.mgr-detail-hero__route {
    margin: 0.55rem 0 0;
    color: var(--vs-text-muted);
    line-height: 1.55;
    max-width: 52rem;
}

.mgr-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.mgr-detail-stat {
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--vs-border) 85%, transparent);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--vs-bg-card) 88%, transparent);
}

.mgr-detail-stat__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-detail-stat__value {
    display: block;
    font-size: 0.95rem;
    line-height: 1.45;
    word-break: break-word;
}

.mgr-detail-lifecycle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: 1.5rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--vs-border);
    border-radius: 1.1rem;
    background: var(--vs-surface);
    border-left: 4px solid var(--vs-accent);
}

.mgr-detail-lifecycle.is-running {
    border-left-color: #1f9d55;
}

.mgr-detail-lifecycle.is-closed {
    border-left-color: #64748b;
}

.mgr-detail-lifecycle.is-pending {
    border-left-color: #d68910;
}

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

.mgr-detail-lifecycle h3 {
    margin: 0.35rem 0 0;
}

.mgr-detail-lifecycle__copy {
    margin: 0.45rem 0 0;
    color: var(--vs-text-muted);
    line-height: 1.6;
    max-width: 40rem;
}

.mgr-detail-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.mgr-detail-timeline__step {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    min-width: 5.5rem;
    text-align: center;
}

.mgr-detail-timeline__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 2px solid var(--vs-border);
    background: var(--vs-bg-card);
    color: var(--vs-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.mgr-detail-timeline__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--vs-text-muted);
}

.mgr-detail-timeline__connector {
    flex: 1;
    min-width: 1.5rem;
    height: 2px;
    margin-bottom: 1.35rem;
    background: var(--vs-border);
}

.mgr-detail-timeline__step.is-complete .mgr-detail-timeline__marker {
    border-color: #1f9d55;
    background: color-mix(in srgb, #1f9d55 14%, transparent);
    color: #1f9d55;
}

.mgr-detail-timeline__step.is-complete .mgr-detail-timeline__label {
    color: #1f9d55;
}

.mgr-detail-timeline__connector.is-complete {
    background: color-mix(in srgb, #1f9d55 55%, var(--vs-border));
}

.mgr-detail-timeline__step.is-active .mgr-detail-timeline__marker {
    border-color: var(--vs-accent);
    background: var(--vs-accent);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vs-accent) 18%, transparent);
}

.mgr-detail-timeline__step.is-active .mgr-detail-timeline__label {
    color: var(--vs-accent);
}

.mgr-detail-lifecycle__aside {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--vs-bg) 40%, transparent);
}

.mgr-detail-lifecycle__field {
    margin: 0;
}

.mgr-detail-lifecycle__submit {
    width: 100%;
}

.mgr-detail-lifecycle__locked {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    text-align: center;
    color: var(--vs-text-muted);
}

.mgr-detail-lifecycle__locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, #64748b 14%, transparent);
    color: #64748b;
    font-weight: 700;
}

.mgr-detail-lifecycle__locked p {
    margin: 0;
    line-height: 1.55;
}

.mgr-detail-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mgr-detail-card {
    padding: 0;
    border: 1px solid var(--vs-border);
    border-radius: 1rem;
    background: var(--vs-surface);
    overflow: hidden;
    box-shadow: 0 8px 24px color-mix(in srgb, #000 4%, transparent);
}

.mgr-detail-card--wide {
    grid-column: 1 / -1;
}

.mgr-detail-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg-secondary) 55%, transparent);
}

.mgr-detail-card__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;
    flex-shrink: 0;
}

.mgr-detail-card__eyebrow {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-detail-card__head h3 {
    margin: 0.15rem 0 0;
    font-size: 1rem;
}

.mgr-detail-fields,
.mgr-detail-subsection,
.mgr-detail-empty-state,
.mgr-detail-table-wrap,
.mgr-detail-attachments {
    padding: 1rem 1.15rem 1.15rem;
}

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

.mgr-detail-fields--compact {
    padding-top: 0;
}

.mgr-detail-field {
    padding: 0.75rem 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) 35%, transparent);
}

.mgr-detail-field--span-all {
    grid-column: 1 / -1;
}

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

.mgr-detail-field dd {
    margin: 0.25rem 0 0;
    line-height: 1.45;
    word-break: break-word;
}

.mgr-detail-subsection + .mgr-detail-subsection {
    border-top: 1px solid var(--vs-border);
}

.mgr-detail-subsection__title {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-detail-empty-state {
    margin: 0;
    padding-top: 0;
    color: var(--vs-text-muted);
    font-style: italic;
}

.mgr-detail-table-wrap {
    padding-top: 0;
    overflow-x: auto;
}

.mgr-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.mgr-detail-table th,
.mgr-detail-table td {
    padding: 0.75rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--vs-border);
}

.mgr-detail-table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
    background: color-mix(in srgb, var(--vs-bg) 45%, transparent);
}

.mgr-detail-table tbody tr:hover {
    background: color-mix(in srgb, var(--vs-accent) 4%, transparent);
}

.mgr-detail-table__amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mgr-detail-attachments {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    list-style: none;
}

.mgr-detail-attachment {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-accent) 5%, var(--vs-bg));
}

.mgr-detail-attachment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    color: var(--vs-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.mgr-detail-attachment__copy strong {
    display: block;
    font-size: 0.92rem;
}

.mgr-detail-attachment__copy p {
    margin: 0.15rem 0 0;
    color: var(--vs-text-muted);
    font-size: 0.82rem;
}

@media (max-width: 1100px) {
    .mgr-search {
        max-width: none;
        flex: 1 1 16rem;
    }

    .mgr-form-grid--header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .mgr-detail-layout {
        grid-template-columns: 1fr;
    }

    .mgr-detail-lifecycle {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .mgr-action-card,
    .mgr-contract-footer,
    .mgr-contracts-toolbar,
    .mgr-wizard__footer:not(.mgr-client-wizard__footer):not(.mgr-armed-cost-form__footer) {
        flex-direction: column;
        align-items: stretch;
    }

    .mgr-detail-fields {
        grid-template-columns: 1fr;
    }

    .mgr-detail-hero__main {
        flex-direction: column;
    }

    .mgr-wizard-stepper {
        padding-inline: 1rem;
    }

    .mgr-wizard-step__label {
        display: none;
    }

    .mgr-wizard-step.is-active .mgr-wizard-step__label {
        display: inline;
    }

    .mgr-wizard__step-count {
        text-align: center;
    }

    .vs-accounts-modal__footer-actions {
        width: 100%;
    }

    .vs-accounts-modal__footer-actions .vs-btn {
        flex: 1;
    }

    .mgr-add-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Client pre-alerts */

.page-manager-prealert,
.page-manager-prealert-detail {
    display: grid;
    gap: 1.25rem;
}

.mgr-status-pill.is-approved {
    background: color-mix(in srgb, #1f9d55 16%, transparent);
    color: #1f9d55;
}

.mgr-status-pill.is-disapproved {
    background: color-mix(in srgb, #c0392b 14%, transparent);
    color: #c0392b;
}

.mgr-prealert-hero__badge {
    background: color-mix(in srgb, #2563eb 14%, transparent);
    color: #2563eb;
}

.mgr-prealert-stat--accent {
    border-color: color-mix(in srgb, #2563eb 24%, var(--vs-border));
    background: color-mix(in srgb, #2563eb 6%, var(--vs-bg-card));
}

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

.mgr-prealert-lifecycle.is-approved {
    border-left-color: #1f9d55;
}

.mgr-prealert-lifecycle.is-disapproved {
    border-left-color: #c0392b;
}

.mgr-prealert-lifecycle__aside {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.mgr-prealert-aside__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-accent);
}

.mgr-prealert-aside__copy {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--vs-text-muted);
}

.mgr-prealert-decision {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
}

.mgr-prealert-decision--approved {
    background: color-mix(in srgb, #1f9d55 10%, transparent);
    border: 1px solid color-mix(in srgb, #1f9d55 22%, transparent);
}

.mgr-prealert-decision--disapproved {
    background: color-mix(in srgb, #c0392b 8%, transparent);
    border: 1px solid color-mix(in srgb, #c0392b 20%, transparent);
}

.mgr-prealert-decision__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mgr-prealert-decision--approved .mgr-prealert-decision__icon {
    background: color-mix(in srgb, #1f9d55 18%, transparent);
    color: #1f9d55;
}

.mgr-prealert-decision--disapproved .mgr-prealert-decision__icon {
    background: color-mix(in srgb, #c0392b 16%, transparent);
    color: #c0392b;
}

.mgr-prealert-decision strong {
    display: block;
    margin-bottom: 0.15rem;
}

.mgr-prealert-decision p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--vs-text-muted);
}

.mgr-prealert-field--wide {
    grid-column: 1 / -1;
}

.mgr-prealert-reason {
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--vs-text-muted) 8%, transparent);
    line-height: 1.55;
}

.mgr-prealert-trucks-empty {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    text-align: center;
    padding: 1.5rem 1rem;
}

.mgr-prealert-trucks-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    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: 800;
    letter-spacing: 0.05em;
}

.mgr-prealert-truck-reg {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.mgr-prealert-driver-name {
    display: block;
    font-weight: 600;
}

.mgr-prealert-driver-id {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--vs-text-muted);
}

.mgr-prealert-contact {
    display: grid;
    gap: 0.15rem;
    font-size: 0.86rem;
}

.mgr-prealert-contact__alt {
    font-size: 0.78rem;
    color: var(--vs-text-muted);
}

.mgr-prealert-route {
    display: grid;
    gap: 0.15rem;
    font-size: 0.84rem;
    line-height: 1.45;
    max-width: 14rem;
}

.mgr-prealert-route__arrow {
    color: var(--vs-accent);
    font-weight: 700;
}

.mgr-prealert-trailer-chip {
    display: inline-block;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-text-muted) 10%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.mgr-prealert-trucks-table td {
    vertical-align: top;
}

.mgr-prealert-review {
    padding: 1.35rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--vs-accent) 8%, transparent), transparent 45%),
        var(--vs-surface);
}

.mgr-prealert-review__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.mgr-prealert-review__approve,
.mgr-prealert-review__disapprove {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--vs-bg-card) 88%, transparent);
}

.mgr-prealert-review__approve {
    border-color: color-mix(in srgb, #1f9d55 24%, var(--vs-border));
}

.mgr-prealert-review__disapprove {
    border-color: color-mix(in srgb, #c0392b 18%, var(--vs-border));
}

.mgr-prealert-review__approve h4,
.mgr-prealert-review__disapprove h4 {
    margin: 0;
    font-size: 0.95rem;
}

.mgr-prealert-review__approve p,
.mgr-prealert-review__disapprove p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--vs-text-muted);
}

.mgr-prealert-review__approve-btn {
    justify-self: start;
}

/* SAP supplier combobox on purchase-order approvals */
.mgr-po-supplier-select {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
    position: relative;
}

.mgr-po-supplier-select__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.mgr-po-supplier-select__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vs-text);
}

.mgr-po-supplier-select__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vs-text-muted);
    white-space: nowrap;
}

.mgr-po-supplier-select__control {
    position: relative;
}

.mgr-po-supplier-select__trigger {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mgr-po-supplier-select__trigger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--vs-accent) 30%, var(--vs-border));
}

.mgr-po-supplier-select__trigger: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-supplier-select.is-open .mgr-po-supplier-select__trigger {
    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-supplier-select__trigger:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.mgr-po-supplier-select__placeholder {
    color: var(--vs-text-muted);
    font-size: 0.92rem;
}

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

.mgr-po-supplier-select__value strong {
    font-size: 0.92rem;
    line-height: 1.25;
    word-break: break-word;
}

.mgr-po-supplier-select__value-meta {
    font-size: 0.76rem;
    color: var(--vs-text-muted);
}

.mgr-po-supplier-select__chevron {
    color: var(--vs-text-muted);
    font-size: 0.9rem;
    transition: transform 0.18s ease;
}

.mgr-po-supplier-select.is-open .mgr-po-supplier-select__chevron {
    transform: rotate(180deg);
}

.mgr-po-supplier-select__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: default;
}

.mgr-po-supplier-select__menu {
    position: fixed;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    background: var(--vs-bg-card);
    box-shadow:
        0 16px 40px color-mix(in srgb, var(--vs-text) 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--vs-border) 70%, transparent);
}

.mgr-po-supplier-select__menu-search {
    position: relative;
    padding: 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 75%, transparent);
    background: color-mix(in srgb, var(--vs-border) 12%, var(--vs-bg-card));
}

.mgr-po-supplier-select__search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vs-text-muted);
    font-size: 0.92rem;
    pointer-events: none;
}

.mgr-po-supplier-select__search {
    width: 100%;
    padding: 0.62rem 0.75rem 0.62rem 2rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.62rem;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font: inherit;
    line-height: 1.35;
}

.mgr-po-supplier-select__search:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--vs-accent) 55%, var(--vs-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--vs-accent) 12%, transparent);
}

.mgr-po-supplier-select__options {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.mgr-po-supplier-select__options li {
    margin: 0;
}

.mgr-po-supplier-select__option {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.62rem 0.7rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--vs-text);
    cursor: pointer;
    transition: background 0.14s ease;
}

.mgr-po-supplier-select__option:hover {
    background: color-mix(in srgb, var(--vs-accent) 8%, var(--vs-bg-card));
}

.mgr-po-supplier-select__option.is-selected {
    background: color-mix(in srgb, var(--vs-accent) 14%, var(--vs-bg-card));
}

.mgr-po-supplier-select__option-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mgr-po-supplier-select__option-main strong {
    font-size: 0.86rem;
    line-height: 1.25;
}

.mgr-po-supplier-select__option-meta {
    font-size: 0.74rem;
    color: var(--vs-text-muted);
}

.mgr-po-supplier-select__empty {
    padding: 0.85rem 0.75rem;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
}

.mgr-po-approve-modal__supplier {
    margin-bottom: 1rem;
}

.mgr-prealert-disapprove__field {
    display: grid;
    gap: 0.45rem;
}

.mgr-prealert-disapprove__field span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vs-text);
}

.mgr-prealert-disapprove__field textarea {
    width: 100%;
    min-height: 6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font: inherit;
    resize: vertical;
}

.mgr-prealert-disapprove__btn {
    justify-self: start;
}

@media (max-width: 900px) {
    .mgr-prealert-review__grid {
        grid-template-columns: 1fr;
    }
}

/* Manager purchase-order requisitions */

.page-manager-purchase-orders {
    display: grid;
    gap: 1.25rem;
}

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

.mgr-po-tabs--queue {
    margin-top: 0.35rem;
}

.mgr-tab--sub {
    font-size: 0.92rem;
}

.mgr-po-paid-toolbar {
    margin-bottom: 0.75rem;
    align-items: center;
    gap: 1rem;
}

.mgr-po-paid-date {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--vs-text-muted);
}

.mgr-po-paid-date input[type="date"] {
    min-width: 11rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--vs-border);
    border-radius: 8px;
    background: var(--vs-bg-card);
    color: var(--vs-text);
}

.mgr-po-paid-date__hint {
    font-size: 0.82rem;
    color: var(--vs-text-muted);
}

.vs-nav-subgroup {
    margin-bottom: 0.15rem;
}

.vs-nav-subgroup__toggle {
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
}

.vs-nav-subgroup > .vs-nav-group__children {
    margin-left: 0.35rem;
    padding-left: 0.5rem;
}

.vs-nav-subgroup > .vs-nav-group__children a {
    font-size: 0.8rem;
    padding: 0.45rem 0.75rem;
}

.mgr-po-tabs {
    margin-top: -0.25rem;
}

a.mgr-tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

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

.mgr-po-panel__intro {
    padding: 1.25rem 1.25rem 0;
}

.mgr-po-panel__intro h3 {
    margin: 0.35rem 0 0;
    font-size: 1.15rem;
}

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

.mgr-po-panel .mgr-contracts-toolbar {
    margin-top: 0.35rem;
}

.page-manager-purchase-orders .mgr-reports-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 0.35rem 0 0.15rem;
}

.page-manager-purchase-orders .mgr-reports-pagination__btn {
    border: 1px solid var(--vs-border);
    border-radius: 10px;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    padding: 0.45rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

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

.page-manager-purchase-orders .mgr-reports-pagination__status {
    color: var(--vs-text-muted);
    font-size: 0.88rem;
}

.mgr-po-empty {
    gap: 0.65rem;
}

.mgr-po-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
    color: var(--vs-accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.mgr-po-empty__hint {
    font-size: 0.84rem;
    color: var(--vs-text-muted);
}

.mgr-po-req-no {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--vs-accent) 10%, transparent);
    color: var(--vs-accent);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mgr-po-amount {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--vs-text);
}

.mgr-po-trip-id,
.mgr-po-code {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--vs-text-muted) 10%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

.mgr-po-priority {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.mgr-po-priority.is-high {
    background: color-mix(in srgb, #c0392b 14%, transparent);
    color: #c0392b;
}

.mgr-po-priority.is-medium {
    background: color-mix(in srgb, #d68910 16%, transparent);
    color: #d68910;
}

.mgr-po-priority.is-low {
    background: color-mix(in srgb, #1f9d55 14%, transparent);
    color: #1f9d55;
}

.mgr-po-priority.is-neutral {
    background: color-mix(in srgb, var(--vs-text-muted) 14%, transparent);
    color: var(--vs-text-muted);
}

.mgr-po-cell-stack {
    display: grid;
    gap: 0.15rem;
}

.mgr-po-cell-stack small {
    color: var(--vs-text-muted);
    font-size: 0.75rem;
}

.mgr-po-table tbody tr.is-alert td:first-child .mgr-po-req-no {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #d68910 35%, transparent);
}

@media (max-width: 900px) {
    .mgr-po-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .mgr-po-tabs .mgr-tab {
        white-space: nowrap;
    }
}

/* Trip requisition detail & trip detail pages */

.page-manager-trip-requisition-detail,
.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 {
    gap: 1.15rem;
}

.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-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;
}

.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__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, #dc2626 14%, transparent);
    color: #dc2626;
}

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

.mgr-dash-stat--breakdown.is-attention .mgr-dash-stat__value {
    color: #dc2626;
}

.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, #7c3aed 14%, transparent);
    color: #7c3aed;
}

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

.mgr-dash-stat--requisition.is-attention .mgr-dash-stat__value {
    color: #7c3aed;
}

.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, #059669 28%, var(--vs-border));
    background: linear-gradient(
        155deg,
        color-mix(in srgb, #059669 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, #059669 14%, transparent);
    color: #047857;
    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-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-trip-completion-detail__hero {
    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));
}

.page-manager-trips-en-route .mgr-trips-hero--enroute {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, #1f9d55 24%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, var(--vs-accent) 12%, transparent), transparent 55%),
        radial-gradient(ellipse 90% 75% at 0% 100%, color-mix(in srgb, #1f9d55 10%, transparent), transparent 52%),
        linear-gradient(
            145deg,
            color-mix(in srgb, #1f9d55 6%, var(--vs-bg-card)),
            var(--vs-bg-card));
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.06),
        0 0 0 1px color-mix(in srgb, var(--vs-border) 75%, transparent);
}

.page-manager-trips-en-route .mgr-trips-hero--enroute::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--vs-accent),
        color-mix(in srgb, #1f9d55 72%, var(--vs-accent))
    );
}

.mgr-enroute-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.35rem 1.5rem;
}

.mgr-enroute-hero__intro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mgr-enroute-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #1f9d55 14%, transparent);
    border: 1px solid color-mix(in srgb, #1f9d55 28%, var(--vs-border));
    color: #1f9d55;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.mgr-enroute-hero__stats {
    margin-top: 1rem;
    margin-left: 4.1rem;
}

.mgr-enroute-hero__stat {
    border-color: color-mix(in srgb, #1f9d55 28%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 8%, var(--vs-bg-card));
}

.mgr-enroute-hero__stat strong {
    color: #1f9d55;
}

.mgr-enroute-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
}

.mgr-parked-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.35rem 1.5rem;
}

.mgr-parked-hero__intro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mgr-parked-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #d97706 14%, transparent);
    border: 1px solid color-mix(in srgb, #d97706 28%, var(--vs-border));
    color: #d97706;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.mgr-parked-hero__stats {
    margin-top: 1rem;
    margin-left: 4.1rem;
}

.mgr-parked-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
}

.mgr-parked-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

@media (max-width: 900px) {
    .mgr-parked-hero__stats {
        margin-left: 0;
    }

    .mgr-parked-export-actions {
        width: 100%;
    }
}

.mgr-enroute-panel {
    border: 1px solid color-mix(in srgb, var(--vs-accent) 14%, var(--vs-border));
}

.mgr-enroute-panel__toolbar {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vs-bg) 55%, transparent),
        color-mix(in srgb, var(--vs-bg-card) 88%, transparent)
    );
}

.mgr-enroute-table-wrap {
    border: none;
    border-radius: 0;
}

.mgr-enroute-table thead {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vs-accent) 7%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-bg) 40%, var(--vs-bg-card))
    );
}

.mgr-enroute-table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
    white-space: nowrap;
}

.mgr-enroute-row {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.mgr-enroute-row:hover {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, #1f9d55 8%, transparent),
        color-mix(in srgb, var(--vs-accent) 5%, transparent) 55%,
        transparent
    ) !important;
}

.mgr-enroute-trip-id {
    display: grid;
    gap: 0.15rem;
}

.mgr-enroute-trip-id__meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vs-text-muted);
}

.mgr-enroute-status-pill {
    white-space: nowrap;
}

.mgr-enroute-empty .vs-btn {
    margin-top: 0.35rem;
}

.mgr-enroute-loading {
    min-height: 14rem;
}

.mgr-enroute-pagination {
    border-top: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 45%, transparent);
}

.page-manager-trips-en-route .mgr-reports-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.75rem;
    padding: 0.95rem 1.15rem;
}

.page-manager-trips-en-route .mgr-reports-pagination__btn {
    min-width: 0;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.65rem;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.page-manager-trips-en-route .mgr-reports-pagination__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, #1f9d55 35%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 8%, var(--vs-bg-card));
}

.page-manager-trips-en-route .mgr-reports-pagination__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.page-manager-trips-en-route .mgr-reports-pagination__status {
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

@media (max-width: 900px) {
    .mgr-enroute-hero__stats {
        margin-left: 0;
    }

    .mgr-enroute-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.page-manager-trips-pending-completion .mgr-trips-hero--completion,
.page-manager-trip-completion-detail .mgr-trip-completion-detail__hero {
    border-color: color-mix(in srgb, #d97706 22%, var(--vs-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #d97706 9%, var(--vs-bg-card)),
        color-mix(in srgb, #f59e0b 4%, var(--vs-bg-card)));
}

.page-manager-trips-pending-completion .mgr-trips-hero--completion {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, #d97706 24%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #d97706 12%, transparent), transparent 55%),
        radial-gradient(ellipse 90% 75% at 0% 100%, color-mix(in srgb, #f59e0b 10%, transparent), transparent 52%),
        linear-gradient(
            145deg,
            color-mix(in srgb, #d97706 7%, var(--vs-bg-card)),
            var(--vs-bg-card));
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.06),
        0 0 0 1px color-mix(in srgb, var(--vs-border) 75%, transparent);
}

.page-manager-trips-pending-completion .mgr-trips-hero--completion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        #d97706,
        color-mix(in srgb, #f59e0b 72%, #d97706)
    );
}

.mgr-pending-pod-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.35rem 1.5rem;
}

.mgr-pending-pod-hero__intro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mgr-pending-pod-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #d97706 14%, transparent);
    border: 1px solid color-mix(in srgb, #d97706 28%, var(--vs-border));
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.mgr-pending-pod-hero__stats {
    margin-top: 1rem;
    margin-left: 4.1rem;
}

.mgr-pending-pod-hero__stat {
    border-color: color-mix(in srgb, #d97706 28%, var(--vs-border));
    background: color-mix(in srgb, #d97706 8%, var(--vs-bg-card));
}

.mgr-pending-pod-hero__stat strong {
    color: #b45309;
}

.mgr-pending-pod-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.mgr-pending-pod-panel {
    border-color: color-mix(in srgb, #d97706 14%, var(--vs-border));
}

.mgr-pending-pod-panel__toolbar {
    border-bottom-color: color-mix(in srgb, #d97706 10%, var(--vs-border));
}

.mgr-pending-pod-loading {
    padding: 2.5rem 1.5rem;
}

.mgr-pending-pod-empty .mgr-trip-completion-empty__icon {
    background: color-mix(in srgb, #d97706 12%, transparent);
    color: #b45309;
}

.mgr-pending-pod-cards {
    background: color-mix(in srgb, #d97706 2%, var(--vs-bg-card));
}

.mgr-pending-pod-card__code {
    font-size: 0.62rem;
}

.mgr-pending-pod-card__status {
    flex-shrink: 0;
}

.mgr-pending-pod-pagination {
    border-top: 1px solid color-mix(in srgb, #d97706 10%, var(--vs-border));
    background: color-mix(in srgb, #d97706 2%, var(--vs-bg-card));
}

@media (max-width: 768px) {
    .mgr-pending-pod-hero__stats {
        margin-left: 0;
    }

    .mgr-pending-pod-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.page-manager-trips-delivered .mgr-trips-hero--delivered {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, #059669 24%, var(--vs-border));
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, #059669 12%, transparent), transparent 55%),
        radial-gradient(ellipse 90% 75% at 0% 100%, color-mix(in srgb, #10b981 10%, transparent), transparent 52%),
        linear-gradient(
            145deg,
            color-mix(in srgb, #059669 7%, var(--vs-bg-card)),
            var(--vs-bg-card));
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.06),
        0 0 0 1px color-mix(in srgb, var(--vs-border) 75%, transparent);
}

.page-manager-trips-delivered .mgr-trips-hero--delivered::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        #059669,
        color-mix(in srgb, #10b981 72%, #059669)
    );
}

.mgr-delivered-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.35rem 1.5rem;
}

.mgr-delivered-hero__intro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mgr-delivered-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, #059669 14%, transparent);
    border: 1px solid color-mix(in srgb, #059669 28%, var(--vs-border));
    color: #059669;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.mgr-delivered-hero__stats {
    margin-top: 1rem;
    margin-left: 4.1rem;
}

.mgr-delivered-hero__stat {
    border-color: color-mix(in srgb, #059669 28%, var(--vs-border));
    background: color-mix(in srgb, #059669 8%, var(--vs-bg-card));
}

.mgr-delivered-hero__stat strong {
    color: #059669;
}

.mgr-delivered-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
}

.mgr-delivered-panel {
    border: 1px solid color-mix(in srgb, #059669 14%, var(--vs-border));
}

.mgr-delivered-panel__toolbar {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vs-bg) 55%, transparent),
        color-mix(in srgb, var(--vs-bg-card) 88%, transparent)
    );
}

.mgr-delivered-table-wrap {
    border: none;
    border-radius: 0;
}

.mgr-delivered-table thead {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #059669 7%, var(--vs-bg-card)),
        color-mix(in srgb, var(--vs-bg) 40%, var(--vs-bg-card))
    );
}

.mgr-delivered-table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
    white-space: nowrap;
}

.mgr-delivered-row {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.mgr-delivered-row:hover {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, #059669 8%, transparent),
        color-mix(in srgb, #10b981 5%, transparent) 55%,
        transparent
    ) !important;
}

.mgr-delivered-trip-id {
    display: grid;
    gap: 0.15rem;
}

.mgr-delivered-trip-id__meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vs-text-muted);
}

.mgr-delivered-date-cell strong,
.mgr-delivered-date-cell {
    color: #047857;
    font-weight: 600;
}

.mgr-delivered-status-pill {
    white-space: nowrap;
}

.mgr-delivered-empty .vs-btn {
    margin-top: 0.35rem;
}

.mgr-delivered-loading {
    min-height: 14rem;
}

.mgr-delivered-pagination {
    border-top: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 45%, transparent);
}

.page-manager-trips-delivered .mgr-reports-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.75rem;
    padding: 0.95rem 1.15rem;
}

.page-manager-trips-delivered .mgr-reports-pagination__btn {
    min-width: 0;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.65rem;
    background: var(--vs-bg-card);
    color: var(--vs-text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.page-manager-trips-delivered .mgr-reports-pagination__btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, #059669 35%, var(--vs-border));
    background: color-mix(in srgb, #059669 8%, var(--vs-bg-card));
}

.page-manager-trips-delivered .mgr-reports-pagination__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.page-manager-trips-delivered .mgr-reports-pagination__status {
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

@media (max-width: 900px) {
    .mgr-delivered-hero__stats {
        margin-left: 0;
    }

    .mgr-delivered-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.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, #059669 14%, var(--vs-bg-muted));
    color: #047857;
    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;
}

/* Manager reports */
.page-manager-reports {
    gap: 1.25rem;
}

.mgr-reports-hero {
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--vs-border);
    border-radius: 1.1rem;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow);
}

.mgr-reports-panel {
    border: 1px solid var(--vs-border);
    border-radius: 1.1rem;
    background: var(--vs-surface);
    overflow: hidden;
    box-shadow: var(--vs-shadow);
}

.mgr-reports-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.mgr-reports-tab {
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-bg-card);
    color: var(--vs-text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mgr-reports-tab.is-active {
    border-color: color-mix(in srgb, var(--vs-accent) 45%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-surface));
    color: var(--vs-accent);
}

.mgr-reports-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.25rem;
}

.mgr-reports-filters .mgr-field {
    min-width: 12rem;
}

.mgr-field--wide {
    flex: 1;
    min-width: 16rem;
}

.mgr-reports-results {
    border: 1px solid var(--vs-border);
    border-radius: 1.1rem;
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow);
    overflow: hidden;
}

.mgr-reports-results__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid var(--vs-border);
}

.mgr-reports-results__head h3 {
    margin: 0;
}

.mgr-reports-results__meta {
    margin: 0.35rem 0 0;
    color: var(--vs-text-muted);
    font-size: 0.9rem;
}

.mgr-reports-type-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vs-border);
}

.mgr-reports-type-total {
    padding: 0.85rem 1rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-bg) 60%, transparent);
}

.mgr-reports-type-total__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-reports-type-total strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.1rem;
}

.mgr-reports-type-total small {
    color: var(--vs-text-muted);
}

.mgr-reports-table--compact th,
.mgr-reports-table--compact td {
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
}

.mgr-dash-enroute-lead {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #1f9d55 30%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 10%, var(--vs-bg-card));
    color: var(--vs-text-muted);
    font-size: 0.82rem;
    line-height: 1.3;
}

.mgr-dash-enroute-lead strong {
    color: #1f9d55;
    font-weight: 700;
}

.mgr-dash-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
    gap: 1.25rem;
    align-items: start;
}

.mgr-dash-split__main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.mgr-dash-split__main .dash-section {
    margin-bottom: 0;
}

.mgr-dash-split__aside {
    position: sticky;
    top: 1rem;
}

.mgr-dash-aside-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mgr-dash-enroute-aside {
    --dash-radius: 16px;
    position: relative;
    padding: 1.15rem 1.2rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--vs-accent) 22%, var(--vs-border));
    border-radius: var(--dash-radius);
    background:
        radial-gradient(ellipse 120% 85% at 100% 0%, color-mix(in srgb, var(--vs-accent) 11%, transparent), transparent 58%),
        radial-gradient(ellipse 95% 70% at 0% 100%, color-mix(in srgb, #1f9d55 9%, transparent), transparent 52%),
        linear-gradient(
            165deg,
            var(--vs-bg-card),
            color-mix(in srgb, var(--vs-bg-card) 90%, var(--vs-accent-soft))
        );
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.06),
        0 0 0 1px color-mix(in srgb, var(--vs-border) 75%, transparent);
    overflow: hidden;
}

.mgr-dash-enroute-aside::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--vs-accent),
        color-mix(in srgb, #1f9d55 72%, var(--vs-accent))
    );
}

.mgr-dash-enroute-aside .dash-section__head {
    position: relative;
    padding-bottom: 0.65rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 82%, transparent);
}

.mgr-dash-enroute-aside .dash-section__title {
    font-size: 1rem;
}

.mgr-dash-enroute-aside-table {
    border-collapse: separate;
    border-spacing: 0;
}

.mgr-dash-enroute-aside-table thead {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vs-accent) 9%, var(--vs-bg-secondary)),
        color-mix(in srgb, var(--vs-accent) 4%, var(--vs-bg-card))
    );
}

.mgr-dash-enroute-aside-table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 88%, transparent);
}

.mgr-dash-enroute-aside-table th,
.mgr-dash-enroute-aside-table td {
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
}

.mgr-dash-enroute-aside-table tbody tr {
    background: var(--vs-bg-card);
    transition: background 0.15s ease;
}

.mgr-dash-enroute-aside-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--vs-bg) 28%, var(--vs-bg-card));
}

.mgr-dash-enroute-aside .mgr-contract-row {
    cursor: pointer;
}

.mgr-dash-enroute-aside .mgr-contract-row:hover {
    background: color-mix(in srgb, var(--vs-accent) 9%, var(--vs-bg-card)) !important;
}

.mgr-dash-enroute-aside .mgr-contract-row td strong {
    color: var(--vs-accent);
}

.mgr-te-req-attachments {
    list-style: none;
    margin: 0;
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page-manager-trip-expense-requisition-detail .mgr-detail-layout {
    gap: 1.15rem;
    align-items: start;
}

.page-manager-trip-expense-requisition-detail .mgr-te-req-side {
    display: grid;
    gap: 1.15rem;
    align-content: start;
}

.page-manager-trip-expense-requisition-detail .mgr-detail-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-manager-trip-expense-requisition-detail .mgr-te-req-attachments,
.page-manager-trip-expense-requisition-detail .mgr-detail-empty-state {
    flex: 1;
}

.mgr-te-req-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.75rem;
    background: var(--vs-bg-card);
}

.mgr-te-req-attachment__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.1rem 0;
}

.mgr-te-req-attachment__meta strong {
    font-size: 0.92rem;
    word-break: break-word;
}

.mgr-te-req-attachment__meta span {
    font-size: 0.8rem;
    color: var(--vs-text-muted);
}

@media (max-width: 1100px) {
    .mgr-dash-split {
        grid-template-columns: 1fr;
    }

    .mgr-dash-split__aside,
    .mgr-dash-aside-stack {
        position: static;
    }
}

.mgr-dash-enroute-empty {
    padding: 1.35rem 1.15rem;
    border: 1px dashed color-mix(in srgb, var(--vs-accent) 28%, var(--vs-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--vs-accent) 5%, var(--vs-bg-card));
    color: var(--vs-text-muted);
    text-align: center;
}

.mgr-dash-enroute-empty p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.mgr-dash-enroute-table {
    padding: 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--vs-border) 88%, transparent);
    background: color-mix(in srgb, var(--vs-bg) 32%, var(--vs-bg-card));
    overflow: hidden;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--vs-border) 35%, transparent);
}

.mgr-dash-enroute-more {
    margin: 0.85rem 0 0;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
    background: color-mix(in srgb, var(--vs-bg) 40%, var(--vs-bg-card));
    border: 1px solid color-mix(in srgb, var(--vs-border) 85%, transparent);
    text-align: center;
}

.mgr-dash-enroute-more a {
    color: var(--vs-accent);
    font-weight: 600;
    text-decoration: none;
}

.mgr-dash-parked-aside {
    --dash-radius: 16px;
    position: relative;
    padding: 1.15rem 1.2rem 1.2rem;
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--vs-border));
    border-radius: var(--dash-radius);
    background:
        radial-gradient(ellipse 120% 85% at 100% 0%, color-mix(in srgb, #d97706 11%, transparent), transparent 58%),
        radial-gradient(ellipse 95% 70% at 0% 100%, color-mix(in srgb, #b45309 9%, transparent), transparent 52%),
        linear-gradient(
            165deg,
            var(--vs-bg-card),
            color-mix(in srgb, var(--vs-bg-card) 90%, color-mix(in srgb, #d97706 12%, var(--vs-bg-card)))
        );
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.06),
        0 0 0 1px color-mix(in srgb, var(--vs-border) 75%, transparent);
    overflow: hidden;
}

.mgr-dash-parked-aside::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        #d97706,
        color-mix(in srgb, #b45309 72%, #d97706)
    );
}

.mgr-dash-parked-aside .dash-section__head {
    position: relative;
    padding-bottom: 0.65rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 82%, transparent);
}

.mgr-dash-parked-aside .dash-section__title {
    font-size: 1rem;
}

.mgr-dash-parked-lead {
    margin: 0.35rem 0 0.85rem;
    font-size: 0.88rem;
    color: var(--vs-text-muted);
}

.mgr-dash-parked-lead strong {
    color: #d97706;
    font-weight: 700;
}

.mgr-dash-parked-aside-table {
    border-collapse: separate;
    border-spacing: 0;
}

.mgr-dash-parked-aside-table thead {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #d97706 9%, var(--vs-bg-secondary)),
        color-mix(in srgb, #d97706 4%, var(--vs-bg-card))
    );
}

.mgr-dash-parked-aside-table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
    border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 88%, transparent);
}

.mgr-dash-parked-aside-table th,
.mgr-dash-parked-aside-table td {
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
}

.mgr-dash-parked-aside-table tbody tr {
    background: var(--vs-bg-card);
    transition: background 0.15s ease;
}

.mgr-dash-parked-aside-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--vs-bg) 28%, var(--vs-bg-card));
}

.mgr-dash-parked-aside .mgr-contract-row {
    cursor: pointer;
}

.mgr-dash-parked-aside .mgr-contract-row:hover {
    background: color-mix(in srgb, #d97706 9%, var(--vs-bg-card)) !important;
}

.mgr-dash-parked-aside .mgr-contract-row td strong {
    color: #d97706;
}

.mgr-dash-parked-empty {
    padding: 1.35rem 1.15rem;
    border: 1px dashed color-mix(in srgb, #d97706 28%, var(--vs-border));
    border-radius: 12px;
    background: color-mix(in srgb, #d97706 5%, var(--vs-bg-card));
    color: var(--vs-text-muted);
    text-align: center;
}

.mgr-dash-parked-empty p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.mgr-dash-parked-table {
    padding: 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--vs-border) 88%, transparent);
    background: color-mix(in srgb, var(--vs-bg) 32%, var(--vs-bg-card));
    overflow: hidden;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--vs-border) 35%, transparent);
}

.mgr-dash-parked-more {
    margin: 0.85rem 0 0;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--vs-text-muted);
    background: color-mix(in srgb, var(--vs-bg) 40%, var(--vs-bg-card));
    border: 1px solid color-mix(in srgb, var(--vs-border) 85%, transparent);
    text-align: center;
}

.page-manager-trips-pending-completion .mgr-trips-action-cell {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Trip completion queue */
.mgr-trip-completion-panel {
    overflow: hidden;
}

.mgr-trip-completion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    padding: 1.15rem;
}

.mgr-trip-completion-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem 1.05rem;
    border: 1px solid color-mix(in srgb, #d97706 16%, var(--vs-border));
    border-radius: 1rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #d97706 4%, var(--vs-bg-card)),
        var(--vs-bg-card));
    box-shadow: 0 10px 28px color-mix(in srgb, #d97706 8%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mgr-trip-completion-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, #d97706 28%, var(--vs-border));
    box-shadow: 0 16px 36px color-mix(in srgb, #d97706 12%, transparent);
}

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

.mgr-trip-completion-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.mgr-trip-completion-card__code {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, #d97706 16%, transparent);
    color: #b45309;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.mgr-trip-completion-card__client {
    margin: 0.2rem 0 0;
    color: var(--vs-text-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.mgr-trip-completion-card__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.85rem;
    margin: 0;
}

.mgr-trip-completion-card__fields div {
    min-width: 0;
}

.mgr-trip-completion-card__fields dt {
    margin: 0 0 0.12rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
}

.mgr-trip-completion-card__fields dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vs-text);
    overflow-wrap: anywhere;
}

.mgr-trip-completion-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.15rem;
    border-top: 1px solid color-mix(in srgb, var(--vs-border) 85%, transparent);
}

.mgr-trip-completion-pagination {
    padding: 0 1.15rem 1.15rem;
}

.mgr-trip-completion-empty__icon {
    background: color-mix(in srgb, #059669 12%, transparent);
    color: #059669;
}

.page-manager-trip-completion-detail .mgr-trip-completion-detail__badge {
    background: color-mix(in srgb, #d97706 16%, transparent);
    color: #b45309;
}

.page-manager-trip-completion-detail .mgr-trip-completion-detail__layout {
    align-items: start;
}

.mgr-trip-completion-detail__lead {
    margin: 0 0 1rem;
    color: var(--vs-text-muted);
    line-height: 1.55;
    max-width: 42rem;
}

.mgr-trip-completion-detail__upload-card {
    border-color: color-mix(in srgb, #d97706 18%, var(--vs-border));
}

.mgr-trip-completion-detail__upload-card .mgr-trip-completion-upload,
.mgr-trip-completion-detail__upload-card .mgr-upload-zone {
    margin: 1rem 1.35rem 0;
    padding: 1.25rem 1.35rem;
}

.mgr-trip-completion-detail__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.mgr-trip-completion-upload__file {
    width: min(100%, 28rem);
}

.mgr-trip-completion-upload__clear {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #c0392b;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.mgr-trip-completion-upload__clear:hover {
    text-decoration: underline;
}

/* Trip completion modal */
.mgr-trip-completion-modal__dialog {
    max-width: min(760px, calc(100vw - 2rem));
    width: 100%;
}

.mgr-trip-completion-modal__content {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    max-height: min(90vh, 780px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #d97706 20%, var(--vs-border));
    box-shadow: 0 24px 64px color-mix(in srgb, #d97706 14%, transparent);
}

.mgr-trip-completion-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, #d97706 12%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

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

.mgr-trip-completion-modal__hero-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, #d97706 16%, transparent);
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.mgr-trip-completion-modal__hero-copy {
    min-width: 0;
}

.mgr-trip-completion-modal__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}

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

.mgr-trip-completion-modal__close {
    flex-shrink: 0;
}

.mgr-trip-completion-modal__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.95rem 1.45rem;
    border-bottom: 1px solid var(--vs-border);
    background: color-mix(in srgb, var(--vs-bg) 35%, transparent);
}

.mgr-trip-completion-modal__summary-stat {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.mgr-trip-completion-modal__summary-stat strong {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

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

.mgr-trip-completion-modal__summary-stat--accent strong {
    color: #b45309;
}

.mgr-trip-completion-modal__body {
    overflow: auto;
    padding: 1.15rem 1.45rem 1.35rem;
    display: grid;
    gap: 1.15rem;
}

.mgr-trip-completion-modal__details h4,
.mgr-trip-completion-modal__upload h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.mgr-trip-completion-modal__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--vs-bg) 40%, transparent);
}

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

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

.mgr-trip-completion-modal__fact-value {
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mgr-trip-completion-modal__footer {
    gap: 0.65rem;
    padding: 0.95rem 1.35rem 1.2rem;
    border-top: 1px solid var(--vs-border);
}

@media (max-width: 768px) {
    .mgr-trip-completion-modal__summary,
    .mgr-trip-completion-modal__facts {
        grid-template-columns: 1fr;
    }

    .mgr-trip-completion-card__fields {
        grid-template-columns: 1fr;
    }
}

/* CRM clients & armed response costs configuration */

.page-manager-clients .mgr-clients-hero,
.page-manager-armed-costs .mgr-clients-hero {
    border: 1px solid color-mix(in srgb, #2563eb 18%, var(--vs-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #2563eb 7%, var(--vs-bg-card)),
        var(--vs-bg-card));
}

.mgr-contracts-hero__stat--success {
    border-color: color-mix(in srgb, #1f9d55 35%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 8%, var(--vs-surface));
    color: #1f9d55;
}

.mgr-contracts-hero__stat--success strong {
    color: #1f9d55;
}

.mgr-clients-toolbar {
    flex-wrap: wrap;
    gap: 0.85rem;
}

.mgr-clients-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mgr-filter-pill {
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-bg-card);
    color: var(--vs-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mgr-filter-pill.is-active {
    border-color: color-mix(in srgb, #2563eb 45%, var(--vs-border));
    background: color-mix(in srgb, #2563eb 10%, var(--vs-bg-card));
    color: #2563eb;
}

.mgr-clients-table tbody tr.is-inactive-row {
    opacity: 0.82;
}

.mgr-client-cell {
    display: grid;
    gap: 0.15rem;
}

.mgr-client-cell__name {
    display: block;
    line-height: 1.35;
}

.mgr-client-cell__meta {
    font-size: 0.78rem;
    color: var(--vs-text-muted);
}

.mgr-clients-table__actions,
.mgr-contracts-table__actions {
    width: auto;
    min-width: 11.5rem;
    white-space: nowrap;
    vertical-align: middle;
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--vs-bg-card);
    box-shadow: -10px 0 14px -12px color-mix(in srgb, #000 14%, transparent);
}

.mgr-contracts-table thead .mgr-contracts-table__actions {
    z-index: 2;
    background: color-mix(in srgb, var(--vs-bg) 55%, transparent);
}

.mgr-contracts-table tbody tr:hover .mgr-contracts-table__actions {
    background: color-mix(in srgb, var(--vs-accent) 5%, var(--vs-bg-card));
}

.mgr-row-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-start;
}

.mgr-row-actions .vs-btn {
    flex-shrink: 0;
}

.mgr-btn-danger-outline {
    border-color: color-mix(in srgb, #c0392b 35%, var(--vs-border));
    color: #c0392b;
}

.mgr-btn-danger-outline:hover:not(:disabled) {
    border-color: #c0392b;
    background: color-mix(in srgb, #c0392b 8%, var(--vs-bg-card));
}

.mgr-amount-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mgr-armed-cost-modal__dialog {
    max-width: min(420px, calc(100vw - 2rem));
    width: 100%;
}

.mgr-armed-cost-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    padding: 1.15rem 1.25rem 1.35rem;
}

@media (max-width: 520px) {
    .mgr-armed-cost-form {
        grid-template-columns: 1fr;
    }
}

.mgr-armed-cost-form__footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--vs-border);
    background: var(--vs-bg-secondary);
}

.mgr-create-modal__body > .mgr-detail-list {
    padding: 1.15rem 1.25rem 0;
}

@media (max-width: 900px) {
    .mgr-clients-toolbar {
        align-items: stretch;
    }

    .mgr-clients-filters {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .mgr-armed-cost-form__footer {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

/* Manager configuration pages (countries, towns, borders, routes, centers, points) */

.page-manager-countries,
.page-manager-towns,
.page-manager-exit-borders,
.page-manager-route-checkpoints,
.page-manager-processing-centers,
.page-manager-dispatch-points,
.page-manager-pickup-destination-points {
    gap: 1.35rem;
}

.page-manager-processing-centers .mgr-config-card-grid {
    --mgr-config-accent: #0891b2;
}

.page-manager-route-checkpoints .mgr-contracts-table--enhanced tbody tr:hover {
    background: color-mix(in srgb, #d68910 5%, var(--vs-bg-card));
}

.mgr-config-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.35rem 1.5rem;
    border-radius: 1.1rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vs-border);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--mgr-config-accent, var(--vs-accent)) 8%, var(--vs-bg-card)),
        var(--vs-bg-card));
    box-shadow: var(--vs-shadow);
}

.mgr-config-hero::after {
    content: "";
    position: absolute;
    top: -3.5rem;
    right: -2.5rem;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mgr-config-accent, var(--vs-accent)) 12%, transparent);
    pointer-events: none;
}

.mgr-config-hero__main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.mgr-config-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--mgr-config-accent, var(--vs-accent)) 14%, transparent);
    color: var(--mgr-config-accent, var(--vs-accent));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mgr-config-accent, var(--vs-accent)) 18%, transparent);
}

.mgr-config-hero__actions {
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.mgr-config-hero--countries {
    --mgr-config-accent: #2563eb;
}

.mgr-config-hero--towns {
    --mgr-config-accent: #7c3aed;
}

.mgr-config-hero--exit-borders {
    --mgr-config-accent: #c0392b;
}

.mgr-config-hero--route-checkpoints {
    --mgr-config-accent: #d68910;
}

.mgr-config-hero--processing-centers {
    --mgr-config-accent: #0891b2;
}

.mgr-config-hero--dispatch-points {
    --mgr-config-accent: #1f9d55;
}

.mgr-config-hero--pickup-destination-points {
    --mgr-config-accent: #db2777;
}

.page-manager-countries .mgr-config-hero,
.page-manager-towns .mgr-config-hero,
.page-manager-exit-borders .mgr-config-hero,
.page-manager-route-checkpoints .mgr-config-hero,
.page-manager-processing-centers .mgr-config-hero,
.page-manager-dispatch-points .mgr-config-hero,
.page-manager-pickup-destination-points .mgr-config-hero {
    border-color: color-mix(in srgb, var(--mgr-config-accent) 22%, var(--vs-border));
}

.page-manager-countries .mgr-filter-pill.is-active,
.page-manager-towns .mgr-filter-pill.is-active,
.page-manager-exit-borders .mgr-filter-pill.is-active,
.page-manager-route-checkpoints .mgr-filter-pill.is-active,
.page-manager-processing-centers .mgr-filter-pill.is-active,
.page-manager-dispatch-points .mgr-filter-pill.is-active,
.page-manager-pickup-destination-points .mgr-filter-pill.is-active {
    border-color: color-mix(in srgb, var(--mgr-config-accent) 45%, var(--vs-border));
    background: color-mix(in srgb, var(--mgr-config-accent) 10%, var(--vs-bg-card));
    color: var(--mgr-config-accent);
}

.page-manager-countries .mgr-add-btn,
.page-manager-towns .mgr-add-btn,
.page-manager-exit-borders .mgr-add-btn,
.page-manager-route-checkpoints .mgr-add-btn,
.page-manager-processing-centers .mgr-add-btn,
.page-manager-dispatch-points .mgr-add-btn,
.page-manager-pickup-destination-points .mgr-add-btn {
    background: var(--mgr-config-accent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mgr-config-accent) 28%, transparent);
}

.page-manager-countries .mgr-contracts-empty__icon,
.page-manager-towns .mgr-contracts-empty__icon,
.page-manager-exit-borders .mgr-contracts-empty__icon,
.page-manager-route-checkpoints .mgr-contracts-empty__icon,
.page-manager-processing-centers .mgr-contracts-empty__icon,
.page-manager-dispatch-points .mgr-contracts-empty__icon,
.page-manager-pickup-destination-points .mgr-contracts-empty__icon {
    background: color-mix(in srgb, var(--mgr-config-accent) 12%, transparent);
    color: var(--mgr-config-accent);
}

.page-manager-countries .mgr-config-chip--direction,
.page-manager-towns .mgr-config-chip--country,
.page-manager-exit-borders .mgr-config-chip--country,
.page-manager-route-checkpoints .mgr-config-chip--country,
.page-manager-dispatch-points .mgr-config-chip--country,
.page-manager-pickup-destination-points .mgr-config-chip--country {
    border-color: color-mix(in srgb, var(--mgr-config-accent) 28%, var(--vs-border));
    background: color-mix(in srgb, var(--mgr-config-accent) 8%, var(--vs-bg-card));
    color: var(--mgr-config-accent);
}

.mgr-config-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-bg) 70%, var(--vs-bg-card));
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.mgr-config-chip--direction-north {
    border-color: color-mix(in srgb, #2563eb 30%, var(--vs-border));
    background: color-mix(in srgb, #2563eb 10%, var(--vs-bg-card));
    color: #2563eb;
}

.mgr-config-chip--direction-south {
    border-color: color-mix(in srgb, #1f9d55 30%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 10%, var(--vs-bg-card));
    color: #1f9d55;
}

.mgr-config-chip--direction-east {
    border-color: color-mix(in srgb, #d68910 30%, var(--vs-border));
    background: color-mix(in srgb, #d68910 10%, var(--vs-bg-card));
    color: #d68910;
}

.mgr-config-chip--direction-west {
    border-color: color-mix(in srgb, #7c3aed 30%, var(--vs-border));
    background: color-mix(in srgb, #7c3aed 10%, var(--vs-bg-card));
    color: #7c3aed;
}

.mgr-config-chip--currency {
    border-color: color-mix(in srgb, #1f9d55 28%, var(--vs-border));
    background: color-mix(in srgb, #1f9d55 8%, var(--vs-bg-card));
    color: #1f9d55;
    font-variant-numeric: tabular-nums;
}

.mgr-config-chip--short {
    border-color: color-mix(in srgb, var(--vs-text-muted) 25%, var(--vs-border));
    color: var(--vs-text-muted);
}

.mgr-config-name-cell {
    display: grid;
    gap: 0.15rem;
}

.mgr-config-name-cell__primary {
    font-weight: 700;
    line-height: 1.35;
}

.mgr-config-name-cell__meta {
    font-size: 0.78rem;
    color: var(--vs-text-muted);
}

.page-manager-countries .mgr-contracts-table--enhanced tbody tr:hover,
.page-manager-towns .mgr-contracts-table--enhanced tbody tr:hover,
.page-manager-exit-borders .mgr-contracts-table--enhanced tbody tr:hover,
.page-manager-route-checkpoints .mgr-contracts-table--enhanced tbody tr:hover,
.page-manager-dispatch-points .mgr-contracts-table--enhanced tbody tr:hover,
.page-manager-pickup-destination-points .mgr-contracts-table--enhanced tbody tr:hover {
    background: color-mix(in srgb, var(--mgr-config-accent) 5%, var(--vs-bg-card));
}

.mgr-config-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 0.85rem;
    padding: 1rem 1.15rem 1.15rem;
}

.mgr-config-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-height: 7.5rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--vs-border);
    border-radius: 1rem;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--mgr-config-accent) 6%, var(--vs-bg-card)),
        var(--vs-bg-card));
    box-shadow: var(--vs-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.mgr-config-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vs-shadow-lg);
    border-color: color-mix(in srgb, var(--mgr-config-accent) 28%, var(--vs-border));
}

.mgr-config-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.mgr-config-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--mgr-config-accent) 12%, transparent);
    color: var(--mgr-config-accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.mgr-config-card__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mgr-config-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mgr-config-modal .vs-modal-content {
    border-top: 3px solid var(--mgr-config-accent, var(--vs-accent));
}

.mgr-config-modal .mgr-create-modal__icon,
.mgr-config-modal .vs-accounts-modal__icon {
    background: color-mix(in srgb, var(--mgr-config-accent, var(--vs-accent)) 12%, transparent);
    color: var(--mgr-config-accent, var(--vs-accent));
}

.mgr-config-modal--countries { --mgr-config-accent: #2563eb; }
.mgr-config-modal--towns { --mgr-config-accent: #7c3aed; }
.mgr-config-modal--exit-borders { --mgr-config-accent: #c0392b; }
.mgr-config-modal--route-checkpoints { --mgr-config-accent: #d68910; }
.mgr-config-modal--processing-centers { --mgr-config-accent: #0891b2; }
.mgr-config-modal--dispatch-points { --mgr-config-accent: #1f9d55; }
.mgr-config-modal--pickup-destination-points { --mgr-config-accent: #db2777; }

.mgr-config-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 28rem;
}

@media (max-width: 900px) {
    .mgr-config-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .mgr-config-hero__actions {
        width: 100%;
    }

    .mgr-config-hero__actions .mgr-add-btn,
    .mgr-config-hero__actions .mgr-config-hero-action,
    .dsp-pa-list-hero__actions .mgr-config-hero-action {
        width: 100%;
        justify-content: center;
    }
}

.mgr-location-field .mgr-location-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.mgr-location-field .mgr-location-input-row input {
    width: 100%;
    min-width: 0;
}

.mgr-location-field__hint {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--mgr-muted-text, #64748b);
    line-height: 1.35;
}

.mgr-location-pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--vs-border);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--vs-accent) 10%, var(--vs-surface));
    color: var(--vs-accent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.mgr-location-pick-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--vs-accent) 18%, var(--vs-surface));
    border-color: color-mix(in srgb, var(--vs-accent) 35%, var(--vs-border));
}

.mgr-location-pick-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.mgr-location-pick-btn__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--vs-accent) 25%, transparent);
    border-top-color: var(--vs-accent);
    border-radius: 999px;
    animation: mgr-location-spin 0.8s linear infinite;
}

@keyframes mgr-location-spin {
    to {
        transform: rotate(360deg);
    }
}