/* Global size scale for every portal page (accounts, manager, dispatcher,
   control room, tracking controller, IT, login). Loaded last; !important
   beats page-specific title/hero/table rules. */

/* Table pagination: keep Previous · page · Next as one centered group on every page */
.vs-app .mgr-pagination,
.vs-app .mgr-reports-pagination,
.vs-app .mgr-contracts-pagination,
.vs-app .mgr-enroute-pagination,
.vs-app .reports-pagination,
.vs-app .cr-vehicles-pagination,
.vs-app footer[class*="pagination"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
}

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

.vs-app .vs-page-title,
.vs-app .vs-content h1,
.vs-app .vs-content h2.vs-page-title,
.vs-empty-layout .vs-page-title,
.vs-empty-layout h1,
.page-landing .vs-landing-title {
    font-size: var(--vs-title-size) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.vs-app .vs-page-subtitle,
.vs-app [class*="hero__lead"],
.vs-app [class*="-hero__lead"],
.vs-app .mgr-contract-hero__lead,
.vs-app .mgr-dashboard__lead,
.vs-empty-layout .vs-page-subtitle {
    font-size: var(--vs-subtitle-size) !important;
    line-height: 1.45;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.vs-app .page-dashboard .vs-page-title {
    font-size: clamp(1.25rem, 0.95rem + 1.3vw, 1.75rem) !important;
}

.vs-modal-header h2,
.vs-modal-title,
.vs-accounts-modal__title {
    font-size: clamp(1rem, 0.88rem + 0.5vw, 1.2rem) !important;
    overflow-wrap: anywhere;
}

.vs-app [class*="-hero"],
.vs-app [class*="hero__main"],
.vs-app [class*="hero__intro"],
.vs-app [class*="hero__title-row"],
.vs-app [class*="title-row"],
.vs-app .mgr-contract-hero,
.vs-app .mgr-trips-hero,
.vs-app .dash-hero {
    min-width: 0;
    max-width: 100%;
}

.vs-app [class*="-hero"]::before,
.vs-app .mgr-contract-hero::before,
.vs-app .mgr-detail-hero::before,
.vs-app .mgr-trips-hero::before,
.vs-app .dash-hero::before {
    content: none !important;
    display: none !important;
}

.vs-app .vs-content table {
    max-width: 100%;
}

@media (max-width: 1600px) {
    .vs-header-settings-name {
        max-width: 7.5rem;
    }

    .vs-brand-name {
        font-size: 1rem;
    }

    .vs-app [class*="list-hero"],
    .vs-app .dsp-pa-list-hero,
    .vs-app .dsp-route-hero,
    .vs-app .mgr-enroute-hero,
    .vs-app .mgr-parked-hero,
    .vs-app .mgr-tc-hero,
    .vs-app .cr-reports-hero,
    .vs-app .mgr-trips-hero--enroute,
    .vs-app .mgr-trips-hero--eta-exceeded,
    .vs-app .mgr-trips-hero--delivered,
    .vs-app .mgr-trips-hero--completion {
        padding: 1.2rem 1.25rem !important;
    }
}

@media (max-width: 1100px) {
    .vs-app [class*="-hero"],
    .vs-app .dash-hero,
    .vs-app .mgr-contract-hero,
    .vs-app .mgr-trips-hero,
    .vs-app .mgr-detail-hero {
        gap: 0.85rem !important;
    }

    .vs-app [class*="hero__icon"] {
        width: 2.55rem !important;
        height: 2.55rem !important;
        font-size: 0.64rem !important;
        flex-shrink: 0;
    }

    .vs-app [class*="hero__stats"],
    .vs-app [class*="hero-stats"] {
        margin-left: 0 !important;
    }

    .vs-app [class*="hero__actions"] {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .vs-app .vs-stat-value,
    .vs-app .mgr-dash-stat__value,
    .vs-app .dash-hero__pulse-value,
    .vs-app [class*="hero__stat-value"],
    .vs-app [class*="hero__stat"] > strong,
    .vs-app .mgr-detail-stat__value,
    .vs-app .mgr-contracts-hero__stat strong {
        font-size: 1.25rem !important;
        line-height: 1.15;
    }

    .vs-app .mgr-detail-layout,
    .vs-app .mgr-detail-fields:not(.mgr-detail-fields--cols-4),
    .vs-app .dsp-route-body,
    .vs-app .dsp-route-allocation,
    .vs-app .vs-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .vs-app .vs-content table th,
    .vs-app .vs-content table td {
        padding: 0.7rem 0.75rem !important;
        font-size: 0.82rem !important;
    }

    .vs-app [class*="table-wrap"] {
        overflow-x: auto;
        max-width: 100%;
    }

    .vs-app .mgr-contracts-toolbar,
    .vs-app .mgr-pagination,
    .vs-app .mgr-section-head,
    .vs-app .mgr-wizard__head,
    .vs-app .mgr-detail-card__head,
    .vs-app .dsp-route-trucks__head,
    .vs-app .mgr-tabs,
    .vs-app .vs-tabs {
        flex-wrap: wrap !important;
        gap: 0.65rem;
    }

    .vs-app .mgr-field input,
    .vs-app .mgr-field select,
    .vs-app .mgr-field textarea,
    .vs-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .vs-app select,
    .vs-app textarea {
        font-size: 0.88rem;
        max-width: 100%;
    }

    .vs-modal-root {
        padding: 0.75rem;
    }

    .vs-modal-header,
    .vs-modal-body,
    .vs-modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .vs-app [class*="list-hero"],
    .vs-app .dsp-pa-list-hero,
    .vs-app .dsp-route-hero,
    .vs-app .mgr-enroute-hero,
    .vs-app .mgr-parked-hero,
    .vs-app .mgr-tc-hero,
    .vs-app .cr-reports-hero {
        padding: 1.05rem 1.1rem !important;
    }
}

@media (max-width: 720px) {
    .vs-app [class*="hero__icon"] {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 0.58rem !important;
    }

    .vs-app .vs-stat-value,
    .vs-app .mgr-dash-stat__value,
    .vs-app .dash-hero__pulse-value,
    .vs-app [class*="hero__stat-value"],
    .vs-app [class*="hero__stat"] > strong,
    .vs-app .mgr-detail-stat__value,
    .vs-app .mgr-contracts-hero__stat strong {
        font-size: 1.12rem !important;
    }

    .vs-app .dash-hero__pulse,
    .vs-app .dsp-pa-list-hero__stat,
    .vs-app .mgr-trips-hero__stat,
    .vs-app .mgr-enroute-hero__stat,
    .vs-app .cr-reports-hero__stat,
    .vs-app .mgr-contracts-hero__stat {
        min-width: 0 !important;
        flex: 1 1 7rem;
    }

    .vs-app [class*="hero__intro"],
    .vs-app [class*="hero__main"],
    .vs-app [class*="hero__title-row"],
    .vs-app .mgr-detail-hero__title-row {
        width: 100%;
        flex-wrap: wrap !important;
    }

    .vs-app .mgr-status-pill {
        font-size: 0.72rem !important;
        padding: 0.2rem 0.55rem !important;
    }

    .vs-app .vs-content table th,
    .vs-app .vs-content table td {
        padding: 0.55rem 0.6rem !important;
        font-size: 0.78rem !important;
    }

    .vs-app .mgr-pagination,
    .vs-app .mgr-reports-pagination,
    .vs-app .mgr-contracts-pagination,
    .vs-app .reports-pagination,
    .vs-app .cr-vehicles-pagination,
    .vs-app .mgr-contracts-toolbar {
        align-items: center !important;
        justify-content: center !important;
    }

    .vs-app [class*="list-hero"],
    .vs-app .dsp-pa-list-hero,
    .vs-app .dsp-route-hero,
    .vs-app .mgr-enroute-hero,
    .vs-app .mgr-parked-hero,
    .vs-app .mgr-tc-hero,
    .vs-app .cr-reports-hero {
        padding: 0.9rem 0.95rem !important;
    }

    .page-login .vs-login-card {
        padding: 1.35rem 1.15rem !important;
    }

    .page-landing {
        padding: 1.25rem 1rem 2rem !important;
        gap: 1.5rem !important;
    }

    .vs-modal-dialog,
    .vs-modal-dialog-wide {
        margin: 0.75rem auto;
        max-width: calc(100vw - 1.5rem);
    }

    .vs-modal-body p {
        font-size: 0.92rem;
    }

    .vs-app .vs-btn,
    .vs-empty-layout .vs-btn {
        font-size: 0.82rem;
    }
}