/*
 * Customer portal mobile corrections.
 * Every rule is breakpoint-bound so the approved desktop layout stays intact.
 */

@media (max-width: 991px) {
    html,
    body.portal-customer-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.portal-customer-page .header-container,
    body.portal-customer-page .header-container .header.navbar,
    body.portal-customer-page #content.main-content {
        width: 100%;
        max-width: 100%;
    }

    body.portal-customer-page .header-container .header.navbar {
        display: flex;
        flex-wrap: nowrap;
    }

    body.portal-customer-page .portal-header-context {
        min-width: 0;
        margin-right: 6px;
    }

    body.portal-customer-page .portal-page-context,
    body.portal-customer-page .portal-page-context-copy {
        min-width: 0;
    }

    body.portal-customer-page .navbar .navbar-item.navbar-dropdown {
        min-width: 0;
        margin-left: auto;
    }

    body.portal-customer-page #content.main-content > .layout-px-spacing,
    body.portal-customer-page #content.main-content > .container-fluid,
    body.portal-customer-page #content.main-content > .col-lg-12 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.portal-customer-page .row > [class*="col-"] {
        min-width: 0;
    }

    body.portal-customer-page .table-responsive,
    body.portal-customer-page .dataTables_wrapper,
    body.portal-customer-page .dataTables_scroll,
    body.portal-customer-page .dataTables_scrollBody {
        width: 100% !important;
        max-width: 100%;
    }

    body.portal-customer-page .modal-dialog {
        max-width: calc(100vw - 24px);
        margin: 12px auto;
    }

    /*
     * The legacy theme expands a closed sidebar on :hover and leaves it at
     * left:-52px. Touch browsers can keep that hover state active, producing
     * the clipped, half-open navigation. Mobile uses one explicit off-canvas
     * state instead: only .sbar-open may bring the drawer into view.
     */
    body.portal-customer-page .main-container .sidebar-wrapper,
    body.portal-customer-page .main-container.sidebar-closed > .sidebar-wrapper,
    body.portal-customer-page .main-container.sidebar-closed > .sidebar-wrapper:hover {
        left: 0 !important;
        width: min(88vw, 300px) !important;
        height: 100dvh !important;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform .22s ease, opacity .16s ease, visibility 0s linear .22s !important;
    }

    body.portal-customer-page .main-container.sbar-open > .sidebar-wrapper,
    body.portal-customer-page .main-container.sbar-open.sidebar-closed > .sidebar-wrapper,
    body.portal-customer-page .main-container.sbar-open.sidebar-closed > .sidebar-wrapper:hover {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) !important;
        transition: transform .22s ease, opacity .16s ease !important;
    }

    body.portal-customer-page .sidebar-wrapper #sidebar {
        width: 100% !important;
        height: 100dvh !important;
        overflow: hidden;
    }

    body.portal-customer-page #sidebar .theme-brand {
        width: 100%;
        padding-right: 14px !important;
        padding-left: 18px !important;
        box-sizing: border-box;
    }

    body.portal-customer-page #sidebar .theme-brand .theme-text {
        min-width: 0;
        flex: 1 1 auto;
        text-align: left;
    }

    body.portal-customer-page #sidebar .theme-brand .navbar-logo {
        max-width: min(170px, calc(88vw - 82px));
    }

    body.portal-customer-page #sidebar ul.menu-categories,
    body.portal-customer-page #sidebar ul.menu-categories.ps {
        height: calc(100dvh - 68px) !important;
        padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.sidebar-noneoverflow,
    html.sidebar-noneoverflow body.portal-customer-page {
        height: 100%;
        overflow: hidden !important;
    }

    html.sidebar-noneoverflow .portal-mobile-nav,
    body.sidebar-noneoverflow .portal-mobile-nav,
    html.sidebar-noneoverflow .remap-cookie-settings,
    body.sidebar-noneoverflow .remap-cookie-settings {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html:has(#container.sbar-open) .portal-mobile-nav,
    html:has(#container.sbar-open) .remap-cookie-settings {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 767px) {
    body.portal-customer-page {
        -webkit-text-size-adjust: 100%;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    body.portal-customer-page .header-container .header.navbar {
        padding-right: 8px;
        padding-left: 8px;
    }

    body.portal-customer-page .header-container .sidebarCollapse {
        width: 34px;
        min-width: 34px;
        margin-right: 3px;
    }

    body.portal-customer-page .portal-page-context-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    body.portal-customer-page .portal-page-context-copy strong {
        display: block;
        max-width: 126px;
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.portal-customer-page .customer-mode-badge {
        min-height: 28px;
        padding: 4px 6px;
        font-size: 10px;
    }

    body.portal-customer-page .navbar .currency-dropdown {
        display: none;
    }

    /* Support, files and profile already live in the mobile bottom bar. */
    body.portal-customer-page .navbar .message-dropdown,
    body.portal-customer-page .navbar .notification-dropdown,
    body.portal-customer-page .navbar .user-profile-dropdown {
        display: none !important;
    }

    body.portal-customer-page .navbar .language-dropdown > .nav-link,
    body.portal-customer-page .navbar .message-dropdown > .nav-link,
    body.portal-customer-page .navbar .notification-dropdown > .nav-link,
    body.portal-customer-page .navbar .user-profile-dropdown > .nav-link {
        min-width: 32px;
        width: 32px;
        padding: 0 5px;
    }

    body.portal-customer-page .navbar .message-dropdown .portal-header-dropdown,
    body.portal-customer-page .navbar .notification-dropdown .portal-header-dropdown {
        position: fixed !important;
        top: 58px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(70dvh, 480px);
        overflow: hidden;
        transform: none !important;
    }

    body.portal-customer-page .portal-header-dropdown .portal-dropdown-list {
        max-height: min(54dvh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.portal-customer-page .navbar .language-dropdown .dropdown-menu,
    body.portal-customer-page .navbar .user-profile-dropdown .dropdown-menu {
        max-width: calc(100vw - 16px);
        max-height: 68dvh;
        overflow-y: auto;
    }

    body.portal-customer-page #content.main-content > .layout-px-spacing,
    body.portal-customer-page #content.main-content > .container-fluid,
    body.portal-customer-page #content.main-content > .col-lg-12 {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body.portal-customer-page .remap-page-header,
    body.portal-customer-page .portal-page-header,
    body.portal-customer-page .shop-heading {
        width: 100%;
        min-width: 0;
        margin-top: 12px;
        padding: 12px 0;
        gap: 10px;
    }

    body.portal-customer-page .remap-page-heading,
    body.portal-customer-page .portal-page-heading,
    body.portal-customer-page .shop-heading > div {
        min-width: 0;
    }

    body.portal-customer-page .remap-page-header h1,
    body.portal-customer-page .portal-page-header h1,
    body.portal-customer-page .shop-heading h1 {
        overflow-wrap: anywhere;
        font-size: 19px;
        line-height: 1.2;
    }

    body.portal-customer-page .remap-page-header p,
    body.portal-customer-page .portal-page-header p,
    body.portal-customer-page .shop-heading p {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.4;
    }

    body.portal-customer-page .card-body,
    body.portal-customer-page .widget-content,
    body.portal-customer-page .widget-content.widget-content-area {
        min-width: 0;
    }

    body.portal-customer-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body.portal-customer-page select,
    body.portal-customer-page textarea,
    body.portal-customer-page .bootstrap-select,
    body.portal-customer-page .bootstrap-select > .dropdown-toggle {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.portal-customer-page input,
    body.portal-customer-page select,
    body.portal-customer-page textarea {
        font-size: 16px !important;
    }

    body.portal-customer-page .input-group {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    body.portal-customer-page .input-group > .form-control {
        flex: 1 1 180px;
    }

    body.portal-customer-page .btn,
    body.portal-customer-page button,
    body.portal-customer-page [role="button"] {
        max-width: 100%;
    }

    body.portal-customer-page .dataTables_wrapper .row:first-child {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    body.portal-customer-page .dataTables_wrapper .dataTables_length,
    body.portal-customer-page .dataTables_wrapper .dataTables_filter {
        display: flex;
        width: 100%;
        align-items: center;
    }

    body.portal-customer-page .dataTables_wrapper .dataTables_filter label,
    body.portal-customer-page .dataTables_wrapper .dataTables_length label {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    body.portal-customer-page .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* My Files becomes a readable card list instead of a cropped desktop table. */
    body.portal-customer-page #customer-vehicle-list-datatable,
    body.portal-customer-page #customer-vehicle-list-datatable tbody,
    body.portal-customer-page #customer-vehicle-list-datatable tr,
    body.portal-customer-page #customer-vehicle-list-datatable td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    body.portal-customer-page #customer-vehicle-list-datatable thead {
        display: none !important;
    }

    body.portal-customer-page #customer-vehicle-list-datatable tr {
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid #e1e6ee;
        border-radius: 8px;
        background: #fff;
    }

    body.portal-customer-page #customer-vehicle-list-datatable td {
        display: flex !important;
        min-height: 36px;
        padding: 7px 0 !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 0 !important;
        border-bottom: 1px solid #eef1f5 !important;
        text-align: right;
        white-space: normal !important;
    }

    body.portal-customer-page #customer-vehicle-list-datatable td:last-child { border-bottom: 0 !important; }
    body.portal-customer-page #customer-vehicle-list-datatable td::before {
        content: attr(data-label);
        flex: 0 0 94px;
        color: #667085;
        font-size: 11px;
        font-weight: 600;
        text-align: left;
    }
    body.portal-customer-page #customer-vehicle-list-datatable .btn-sq span,
    body.portal-customer-page #customer-vehicle-list-datatable .file-revision-request-button span,
    body.portal-customer-page #customer-vehicle-list-datatable .file-revision-open-button span {
        display: inline !important;
    }

    body.portal-customer-page #customer-vehicle-list-datatable td .btn,
    body.portal-customer-page #customer-vehicle-list-datatable td button,
    body.portal-customer-page #customer-vehicle-list-datatable td a {
        white-space: normal;
    }

    /* Keep large catalogue/database tables contained and swipeable. */
    body.portal-customer-page #vehicle-list-datatable,
    body.portal-customer-page #creditTable,
    body.portal-customer-page #product-list,
    body.portal-customer-page #cart-list {
        min-width: 680px !important;
    }

    body.portal-customer-page .portal-profile-card .card-body { padding: 16px 14px; }
    body.portal-customer-page .portal-profile-card .card-title { margin-bottom: 20px; }
    body.portal-customer-page .profile-settings-nav { overflow-x: auto; margin-bottom: 19px; }
    body.portal-customer-page .profile-settings-nav a { flex: 1 0 auto; justify-content: center; }
    body.portal-customer-page .portal-profile-card .form-group { margin-bottom: 15px; }
    body.portal-customer-page .portal-profile-card #img-upload { width: 72px !important; height: 72px; }

    body.portal-customer-page .profile-newsletter-section { margin-top: 24px; padding-top: 22px; }
    body.portal-customer-page .profile-newsletter-heading {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }
    body.portal-customer-page .profile-newsletter-icon { width: 36px; height: 36px; }
    body.portal-customer-page .profile-newsletter-status { grid-column: 2; justify-self: start; }
    body.portal-customer-page .profile-newsletter-heading h2 { font-size: 17px; }
    body.portal-customer-page .profile-newsletter-toggle { align-items: flex-start; padding: 13px; }
    body.portal-customer-page .profile-newsletter-actions { align-items: stretch; flex-direction: column; }
    body.portal-customer-page .profile-newsletter-actions .btn { width: 100%; min-height: 42px; }

    body.portal-customer-page.portal-file-upload-page #file-upload-step { width: 100%; max-width: 100%; }
    body.portal-customer-page.portal-file-upload-page #file-upload-step .steps ul {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100%;
    }
    body.portal-customer-page.portal-file-upload-page #file-upload-step .steps li,
    body.portal-customer-page.portal-file-upload-page #file-upload-step .steps li a { min-width: 0 !important; }
    body.portal-customer-page.portal-file-upload-page #file-upload-step .steps li a { padding-right: 2px !important; padding-left: 2px !important; }
    body.portal-customer-page.portal-file-upload-page #file-upload-step .steps .number { width: 31px; height: 31px; }
    body.portal-customer-page.portal-file-upload-page #file-upload-step .steps li a span:not(.number) { font-size: 10px; }
    body.portal-customer-page.portal-file-upload-page .multi-upload-box { padding: 25px 12px; }
    body.portal-customer-page.portal-file-upload-page .actions ul { display: flex; gap: 8px; }
    body.portal-customer-page.portal-file-upload-page .actions li { flex: 1 1 0; }
    body.portal-customer-page.portal-file-upload-page .actions a { display: flex !important; min-height: 42px; align-items: center; justify-content: center; }

    body.portal-customer-page.remap-support-page .support-shell,
    body.portal-customer-page.remap-support-page .support-workspace {
        min-height: 0 !important;
        height: calc(100dvh - 146px) !important;
        max-height: none !important;
    }

    body.portal-customer-page .shop-heading.with-balance {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }
    body.portal-customer-page .shop-heading.with-balance .balance-chip {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    body.portal-customer-page .portal-mobile-nav {
        right: 6px;
        bottom: calc(6px + env(safe-area-inset-bottom));
        left: 6px;
        min-height: 62px;
        border-radius: 13px;
    }

    html.show--consent .portal-mobile-nav,
    html.show--settings .portal-mobile-nav {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 479px) {
    body.portal-customer-page .header-container .sidebarCollapse { display: flex; }
    body.portal-customer-page .portal-page-context-copy { display: none; }
    body.portal-customer-page .customer-mode-item { margin-left: 2px; }
    body.portal-customer-page .customer-mode-badge { padding-right: 5px; padding-left: 5px; }

    body.portal-customer-page .navbar .language-dropdown > .nav-link,
    body.portal-customer-page .navbar .message-dropdown > .nav-link,
    body.portal-customer-page .navbar .notification-dropdown > .nav-link,
    body.portal-customer-page .navbar .user-profile-dropdown > .nav-link {
        width: 30px;
        min-width: 30px;
        padding: 0 4px;
    }

    body.portal-customer-page #customer-vehicle-list-datatable td:nth-child(1) { display: flex !important; }
    body.portal-customer-page .profile-newsletter-toggle { gap: 10px; }
    body.portal-customer-page .profile-newsletter-toggle input { width: 36px; flex-basis: 36px; }

    body.portal-customer-page .portal-mobile-nav a { font-size: 9.5px; }
    body.portal-customer-page .portal-mobile-nav a i { font-size: 17px; }
}

@media (max-width: 359px) {
    body.portal-customer-page .portal-header-context { display: none; }
    body.portal-customer-page .header-container .sidebarCollapse { display: flex; }
    body.portal-customer-page .navbar .navbar-item.navbar-dropdown { width: auto; }
    body.portal-customer-page .portal-mobile-nav a span { display: none; }
    body.portal-customer-page .portal-mobile-nav { min-height: 54px; }
}