/* ================================================================ */
/*     RESPONSIVE BREAKPOINTS REFERENCE    */
/* ================================================================ */
/*
 * This file handles responsive layouts for all screen sizes EXCEPT
 * Full HD (1920x1080), which uses the default styles in app.css.
 *
 * PRIMARY TARGET DEVICES:
 * ═══════════════════════════════════════════════════════════════════
 * 
 * 📱 iPhone 12 Pro              390x844   (391-430px breakpoint)
 * 📱 iPhone 14 Pro Max          430x932   (431-945px breakpoint)
 * 📱 Galaxy S24                 360x780   (381-390px breakpoint)
 * 📱 Galaxy S24 Ultra           480x1080  (431-945px breakpoint)
 * 📱 iPad Pro                   1024x1366  (1024-1279px breakpoint)
 * 💻 13" Laptops                ~1280-1440  (1280-1439px breakpoint)
 * 💻 15" Laptops ~1440-1680     (1440-1679px & 1680-1920px)
 * 🖥️ Full HD (1920x1080)        BASELINE  (uses app.css defaults)
 * 🖥️ Larger Displays            1921px+    (2560px+ for 4K)
 *
 * COMPLETE BREAKPOINT STRUCTURE:
 * ═══════════════════════════════════════════════════════════════════
 *
 * MOBILE PHONES (≤945px)
 * ─────────────────────────────────────────────────────────────────
 *   ≤380px        Very small phones, single column nav
 *      • Older compact devices
 *   381-390px     iPhone 12 mini, Galaxy S24, small Android phones ⭐
 *          • iPhone 12 mini (375x812)
 * • Samsung Galaxy S24 (360x780) ⭐
 *               • Icon size: 1.875rem
 *             • Sidebar nav: 4.5rem width
 *   391-430px     iPhone 12 Pro, iPhone 13/14 Pro (390x844) ⭐
 *        • iPhone 12 Pro (390x844) ⭐
 *          • iPhone 13 Pro (390x844)
 *        • iPhone 14 Pro (393x852)
 *  • Icon size: 2.125rem
 *        • Sidebar nav: 5rem width
 *   431-945px iPhone 14 Pro Max, Galaxy S24 Ultra, large phones ⭐
 *   • iPhone 14 Pro Max (430x932) ⭐
 *       • Samsung Galaxy S24 Ultra (480x1080) ⭐
 *      • iPhone 15 Plus, 15 Pro Max
 *        • Large Android phones
 *          • Bottom navigation bar (5rem height)
 *     • 2-column nav grid (square buttons)
 *      • Icon size: 2.25rem
 *           • Sidebar nav: 5.5rem width
 *           • Horizontal scrolling tables
 *
 * TABLETS (768px-1279px)
 * ─────────────────────────────────────────────────────────────────
 *   768-1023px    Standard tablets (iPad, Android tablets)
 *       • 3-column nav grid
 *      • Standard sidebar
 *   1024-1279px iPad Pro (1024x1366), large tablets ⭐
 *  • 4-column nav grid
 *           • 3-column options container
 *
 * LAPTOPS (1280px-1920px)
 * ─────────────────────────────────────────────────────────────────
 *   1280-1439px   13" MacBook Air/Pro, ultrabooks ⭐
 *          • 4-column options layout
 *              • Max-width: 1200px
 *   1440-1679px   15" laptops, 2K displays (scaled) ⭐
 *             • 5-column options layout
 *       • Max-width: 1400px
 *   1680-1920px   Large laptops, MacBook Pro 16" ⭐
 *   • 5-column options layout
 *         • Max-width: 1600px
 *
 * DESKTOP MONITORS (1920px+)
 * ─────────────────────────────────────────────────────────────────
 *   1920px  Full HD / 1080p ⭐ BASELINE
 *  • Uses app.css defaults (NO overrides here)
 *   1921-2559px Large displays, 2K monitors, ultra-wide
 *            • 6-column options layout
 *        • Max-width: 1900px
 *   2560px+     4K monitors (3840x2160), 5K displays
 *           • 8-column options layout
 *    • Max-width: 2400px
 *
 * SPECIAL LAYOUTS:
 * ─────────────────────────────────────────────────────────────────
 *   946-1489px    VIN detail: 3-column grid layout ⭐ NEW
 *   1490-1580px   VIN detail: flexible flex layout
 *   ≤430px        Single column for options container
 *   Landscape     Special mobile landscape optimizations
 *   Touch         44x44px minimum tap targets (Apple guidelines)
 *
 * NAVIGATION GRID COLUMNS:
 * ─────────────────────────────────────────────────────────────────
 *   ≤380px:       1 column    |  381-945px:  2 columns
 *   768-1023px:   3 columns   |  1024px+:    4+ columns
 *
 * OPTIONS CONTAINER COLUMNS (VIN Detail):
 * ─────────────────────────────────────────────────────────────────
 *   ≤430px:       1 column    |  431-945px:   2 columns
 *   946-1489px:   3 columns ⭐ NEW | 1490-1580px: flex layout
 *   1280-1439px:  4 columns (general) | 1440-1920px: 5 columns (general)
 *   1921-2559px:  6 columns  |  2560px+:     8 columns
 */

/* ----------------------------------- */
/*   Responsive Layout for Phones, Tablets, smaller laptops, and larger screens  */
/*   (Grouped: General / Nav / Tables) */
/* ----------------------------------- */

/* ---------------------------------------------------------------- */
/* Mobile Banner - shown only on mobile devices     */
/* ---------------------------------------------------------------- */
/* Banner visibility is now controlled server-side by MobileBanner component */
/* using DeviceDetectionHelper.IsMobileView() - no CSS media queries needed */

.mobile-banner {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff3cd;
    color: #856404;
    border-bottom: 1px solid #ffc107;
    padding: 0.1rem 0.3rem !important;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 0.8125rem;
    font-weight: 500;
}

@media (max-width: 945px) {
    /* Hide inventory pulse content phones*/
    .nav-page > .inner-content.nav-inner-content {
        display: none !important;
    }

    /* Adjust page wrapper to account for banner */
    .page {
        padding-top: 1.5rem;
    }
}

/* Add top padding for tablets to account for mobile banner */
@media (min-width: 768px) and (max-width: 1279px) {
    /* Adjust page wrapper to account for banner on tablets */
    .page {
        padding-top: 1.5rem;
    }
}

/* ================================================================ */
/* DESKTOP & LARGE SCREEN OPTIMIZATIONS*/
/* Full HD (1920px) uses default app.css - no overrides needed     */
/* ================================================================ */

/* ---------------------------------------------------------------- */
/* Extra large screens (2560px+)*/
/* 4K monitors and ultra-wide displays       */
/* ---------------------------------------------------------------- */
@media (min-width: 2560px) {
    .wrapper {
        max-width: 2400px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .options-container,
    .options-container.generated-only {
        grid-template-columns: repeat(8, 1fr);
        gap: 1.25rem;
    }

    .excel-table.wholesale,
    .vin-summary,
    .vin-detail,
    .excel-table.vin-pulsereport {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------- */
/* Large displays (1921px - 2559px)        */
/* Screens larger than Full HD               */
/* ---------------------------------------------------------------- */
@media (min-width: 1921px) and (max-width: 2559px) {
    .wrapper {
        max-width: 1900px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .options-container,
    .options-container.generated-only {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.125rem;
    }
}

/* ---------------------------------------------------------------- */
/* Standard laptops (1440px - 1679px)      */
/* 15" laptops, smaller external monitors*/
/* ---------------------------------------------------------------- */
@media (min-width: 1440px) and (max-width: 1679px) {
    .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .options-container,
    .options-container.generated-only {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.875rem;
    }
}

/* ---------------------------------------------------------------- */
/* Small laptops and large tablets (1280px - 1439px)         */
/* 13" laptops, iPad Pro landscape          */
/* ---------------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1439px) {
    .wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .options-container,
    .options-container.generated-only {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .header-title {
        font-size: 1.75rem;
    }
}

/* ---------------------------------------------------------------- */
/* Flexible layout for VIN detail filters    */
/* Applies between 946px and 1580px    */
/* ---------------------------------------------------------------- */
@media (max-width: 1580px) and (min-width: 946px) {
    .options-container:not(.mobile-options),
    .options-container.generated-only {
        display: flex !important;
   flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
 padding: 0.75rem 1rem !important;
    }

      .options-container:not(.mobile-options) .filter-container,
      .options-container.generated-only .filter-container {
            flex: 0 0 auto !important;
      min-width: fit-content !important;
            margin: 0 !important;
        }

       /* Keep selects and checkbox groups appropriately sized */
       .options-container:not(.mobile-options) .filter-container select {
          min-width: 120px !important;
        max-width: 200px !important;
         }

       .options-container:not(.mobile-options) .filter-container .checkbox-group {
     min-width: 140px !important;
    max-width: 180px !important;
            }

    /* Tabs push to the right and stay on same line when possible */
        .options-container:not(.mobile-options) .inner-tab-container,
        .options-container.generated-only .inner-tab-container {
     margin-left: auto !important;
            flex: 0 0 auto !important;
      padding-left: 0 !important;
            margin-bottom: 0 !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
 }

      /* Reset button inside tab container */
            .options-container:not(.mobile-options) .inner-tab-container .reset-btn {
     margin-left: 0.75rem !important;
                padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
  }

    /* Expand/collapse button stays with filters */
    .expand-toggle-container {
        flex: 0 0 auto !important;
        min-width: 80px !important;
        max-width: 100px !important;
    }
}

/* ---------------------------------------------------------------- */
/* VIN Detail: 3-column grid layout below 1490px */
/* Applies between 946px and 1489px */
/* ---------------------------------------------------------------- */
@media (max-width: 1489px) and (min-width: 946px) {
    /* Force 3-column grid layout, overriding app.css defaults */
    .options-container:not(.mobile-options),
    .options-container.generated-only {
    display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
     align-items: start !important;
    }

    .options-container:not(.mobile-options) .filter-container,
    .options-container.generated-only .filter-container {
        display: flex !important;
      flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
   flex: none !important;
    }

        .options-container:not(.mobile-options) .filter-container select,
        .options-container:not(.mobile-options) .filter-container .checkbox-group {
  width: 100% !important;
     max-width: 100% !important;
            min-width: 0 !important;
        }

    /* Tabs span full width at bottom */
    .options-container:not(.mobile-options) .inner-tab-container,
    .options-container.generated-only .inner-tab-container {
        grid-column: 1 / -1 !important;
  display: flex !important;
      justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
  gap: 0.5rem !important;
        width: 100% !important;
    }

    /* Reset button inside tab container */
    .options-container:not(.mobile-options) .inner-tab-container .reset-btn {
        margin-left: 0.5rem !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
    }

    /* ===== DISABLE EXPAND/COLLAPSE TOGGLE ===== */
    /* Hide expand/collapse button */
    .expand-toggle-container {
        display: none !important;
    }

    /* Force expandable-options to collapsed state with scroll */
    .expandable-options,
    .expandable-options.expanded {
        min-height: auto !important;
        max-height: 11.25rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        pointer-events: auto !important; /* Allow scrolling */
    }

    /* Disable click interactions on filter containers that have expandable-options */
    .filter-container:has(.expandable-options) {
        pointer-events: none !important;
    }

        /* Re-enable pointer events for interactive elements inside */
        .filter-container:has(.expandable-options) .checkbox-group,
        .filter-container:has(.expandable-options) input[type="checkbox"],
      .filter-container:has(.expandable-options) label,
        .filter-container:has(.expandable-options) .expandable-options {
        pointer-events: auto !important;
     }

    /* Prevent label clicks from toggling expand/collapse */
    .filter-container label {
   cursor: default !important;
      user-select: none;
        -webkit-user-select: none;
    }

    /* Checkbox groups: full height, no internal scroll within expandable-options */
    .options-container .filter-container .checkbox-group {
        max-height: none !important;
        min-height: auto !important;
        overflow-y: visible !important;
 height: auto !important;
    }

    /* ===== MOBILE-OPTIONS: Fixed height with scrolling ===== */
    .options-container.mobile-options {
        display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
        height: 12rem !important;
  max-height: 12rem !important;
        overflow-y: auto !important;
     overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
 gap: 0.75rem !important;
     padding: 0.75rem 1rem !important;
    }

        /* Force filter-containers in mobile-options to span full grid cell */
        .options-container.mobile-options .filter-container {
  display: block !important;
        width: 100% !important;
     min-width: 0 !important;
     max-width: 100% !important;
            flex-shrink: initial !important;
        }

          .options-container.mobile-options .filter-container select,
   .options-container.mobile-options .filter-container .checkbox-group {
         width: 100% !important;
    max-width: 100% !important;
            }
}

/* ---------------------------------------------------------------- */
/* Button text toggling based on screen size */
/* Below 1680px: show short text, hide full text */
/* ---------------------------------------------------------------- */
@media (max-width: 1679px) {
    .text-full {
        display: none;
    }

    .text-short {
        display: inline;
    }
}

/* Above 1680px: show full text, hide short text */
@media (min-width: 1680px) {
    .text-full {
        display: inline !important;
    }

    .text-short {
        display: none !important;
    }
}

/* ================================================================ */
/* TABLET OPTIMIZATIONS      */
/* ================================================================ */

/* ---------------------------------------------------------------- */
/* iPad Pro and large tablets (1024px - 1279px)         */
/* Portrait and landscape modes             */
/* ---------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .wrapper {
        max-width: 100%;
        padding: 0 1.5rem;
    }

    .options-container,
    .options-container.generated-only {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

        .options-container.generated-only {
            max-height: 40px;
        }

        /* Specific styling for mobile-options (VIN Detail filters) on large tablets */
        .options-container.mobile-options {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            height: 12rem !important;
            max-height: 12rem !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 0.75rem !important;
        }

            /* Force filter-containers to span full grid cell width and remove flex display */
            .options-container.mobile-options .filter-container {
                display: block !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                flex-shrink: initial !important;
            }

    .nav-page .nav-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .nav-button {
        padding: 1rem;
    }

        .nav-button .icon-container {
            height: 3rem;
        }

        .nav-button img {
            width: 2.5rem;
            height: auto;
            max-height: 2.5rem;
        }

        .nav-button .button-text {
            font-size: 0.9rem;
        }

    .excel-table.wholesale,
    .vin-summary,
    .vin-detail,
    .excel-table.vin-pulsereport {
        font-size: 0.9rem;
    }

        .excel-table.wholesale th,
        .excel-table.wholesale td,
        .vin-summary th,
        .vin-summary td,
        .vin-detail th,
        .vin-detail td,
        .excel-table.vin-pulsereport th,
        .excel-table.vin-pulsereport td {
            padding: 0.5rem 0.375rem;
        }
}

/* ---------------------------------------------------------------- */
/* Standard tablets (768px - 1023px)  */
/* iPad, Android tablets in portrait    */
/* ---------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .wrapper {
        padding: 0 1rem;
    }

    .options-container,
    .options-container.generated-only {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

        /* Specific styling for mobile-options (VIN Detail filters) on standard tablets */
        .options-container.mobile-options {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            height: 12rem !important;
            max-height: 12rem !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 0.75rem !important;
        }

            /* Force filter-containers to span full grid cell width and remove flex display */
            .options-container.mobile-options .filter-container {
                display: block !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                flex-shrink: initial !important;
            }

    .nav-page .nav-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .nav-button .icon-container {
        height: 2.5rem;
    }

    .nav-button img {
        width: 2.25rem;
        height: auto;
        max-height: 2.25rem;
    }

    .nav-button .button-text {
        font-size: 0.85rem;
    }

    /* ===== VIN DETAIL: DISABLE EXPAND/COLLAPSE ON TABLETS ===== */
    /* Keep expandable-options at collapsed height with scroll */
    /* But show full checkbox groups without internal scrolling */

    /* Hide expand/collapse button */
    .expand-toggle-container {
        display: none !important;
    }

    /* Force expandable-options to collapsed state with scroll */
    .expandable-options,
    .expandable-options.expanded {
        min-height: auto !important;
        max-height: 11.25rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        pointer-events: auto !important; /* Allow scrolling */
    }

    /* Disable click interactions on filter containers that have expandable-options */
    .filter-container:has(.expandable-options) {
        pointer-events: none !important;
    }

        /* Re-enable pointer events for interactive elements inside */
        .filter-container:has(.expandable-options) .checkbox-group,
        .filter-container:has(.expandable-options) input[type="checkbox"],
        .filter-container:has(.expandable-options) label,
        .filter-container:has(.expandable-options) .expandable-options {
            pointer-events: auto !important;
        }

    /* Prevent label clicks from toggling expand/collapse */
    .filter-container label {
        cursor: default !important;
    }

    /* Checkbox groups: full height, no internal scroll */
    .options-container .filter-container .checkbox-group {
        max-height: none !important;
        min-height: auto !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Options-container itself can grow if needed */
    .options-container {
        max-height: none !important;
    }
}

/* ================================================================ */
/* MOBILE PHONE OPTIMIZATIONS*/
/* ================================================================ */

/* ======= GENERAL MOBILE LAYOUT ======= */
/* Applies at 945px and below */
@media (max-width: 945px) {
    html, body {
        font-size: 0.9375rem !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Shorten buttons*/
    button {
        max-height: 90%;
    }

    .wrapper {
        max-width: 100vw !important;
        margin: 0.75rem auto !important;
        padding: 0 0.25rem !important;
    }

    .section {
        padding: 0.875rem 0.25rem !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .header-container,
    header {
        padding: 0.1875rem 0.125rem !important;
    }

    .header-title {
        font-size: 1.1rem !important;
    }

    .logo img {
        height: 35px;
        width: auto;
        object-fit: cover;
    }

    .top-header {
        padding: 0px;
        padding-bottom: 10px;
        padding-left: 10px;
    }

    #infoContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: .25rem 1rem !important;
        gap: 0.15rem !important;
    }

    .report-description {
        position: static !important;
        width: 100% !important;
        order: 2 !important;
        margin: 0 !important;
    }

        .report-description > span {
            font-size: 1rem;
        }

    #middleInfo {
        order: 1 !important;
        margin: 0 !important;
        text-align: center !important;
    }

        #middleInfo > span {
            font-size: 1.1rem;
        }

    .user-menu-wrapper {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
    }

    .dataviewer-page {
        height: calc(100vh - 6.5rem);
    }

    .dealer-container,
    .vehicle-container,
    .filter-container {
        align-items: center;
        margin-right: 15px; /* space between them */
        justify-content: center;
    }

    /* Archive selector - wrap archive-note when it runs out of space */
    .archive-selector-container {
        flex-wrap: wrap !important;
        padding: 0.5rem !important;
        margin: 0.5rem 0.25rem !important;
        gap: 0;
    }

        .archive-selector-container strong {
            flex: 0 0 auto !important;
            margin-right: 0.5rem !important;
        }

        .archive-selector-container select {
            flex: 1 1 auto !important;
            min-width: 120px !important;
            max-width: none !important;
        }

        .archive-selector-container button {
            flex: 0 0 auto !important;
            margin-left: 0.5rem !important;
            font-size: 0.85rem !important;
            padding: 0.375rem 0.5rem !important;
        }

        .archive-selector-container small {
            flex: 0 0 auto !important;
        }

        /* Archive note wraps naturally when space runs out */
        .archive-selector-container .archive-note {
            flex: 0 1 auto !important;
            margin-left: 0rem !important;
            margin-top: 0.25rem !important;
            text-align: center !important;
            font-style: italic !important;
            white-space: normal !important;
            word-wrap: break-word !important;
            font-size: .8rem;
        }

    button.btn.btn-sm.btn-secondary.text-short {
        padding: .1rem .5rem !important;
        border-radius: .75rem !important;
        padding-bottom: .25rem !important;
    }
}

/* ---------------------------------------------------------------- */
/* Large phones (431px - 945px)  */
/* iPhone 14 Pro Max and similar large phones         */
/* ---------------------------------------------------------------- */
@media (min-width: 431px) and (max-width: 945px) {
    .wrapper {
        padding: 0 0.5rem !important;
    }

    .section {
        padding: 1rem 0.5rem !important;
    }

    .header-title {
        font-size: 1.25rem !important;
    }

    .nav-button .icon-container {
        height: 2.25rem !important;
    }

    .nav-button img {
        width: 2.25rem !important;
        max-height: 2.25rem !important;
    }

    .nav-button .button-text {
        font-size: 0.75rem !important;
        max-height: 2.6rem !important;
    }

    .options-container {
        padding: 0.875rem;
        gap: 0.625rem;
    }

    .sidebar nav a,
    .sidebar .nav-item > a {
        width: 5.5rem !important;
        min-width: 5.5rem !important;
        font-size: 0.75rem !important;
    }

        .sidebar nav a img,
        .sidebar .nav-item > a > img {
            width: 1.625rem !important;
        }

    /* Login form adjustments for large phones */
    .login-form input,
    .login-form button {
        font-size: 1rem !important;
        padding: 0.6875rem 0.4375rem !important;
    }
}

/* ---------------------------------------------------------------- */
/* Standard phones (391px - 430px)        */
/* iPhone 12 Pro, iPhone 13 Pro, iPhone 14 Pro   */
/* ---------------------------------------------------------------- */
@media (min-width: 391px) and (max-width: 430px) {
    .wrapper {
        padding: 0 0.375rem !important;
    }

    .header-title {
        font-size: 1.15rem !important;
    }

    .nav-button .icon-container {
        height: 2.125rem !important;
    }

    .nav-button img {
        width: 2.125rem !important;
        max-height: 2.125rem !important;
    }

    .nav-button .button-text {
        font-size: 0.725rem !important;
    }

    .options-container {
        padding: 0.75rem;
        gap: 0.5rem;
    }

        .options-container .filter-container > div,
        .options-container .filter-container button {
            font-size: 0.875rem;
            padding-top: 0.35rem;
            padding-bottom: 0.35rem;
        }

    /* Login form adjustments for standard phones */
    .login-form input,
    .login-form button {
        font-size: 1rem !important;
        padding: 0.6875rem 0.4375rem !important;
    }
}

/* ======= NAV PAGE GRID - MOBILE ======= */
/* Applies at 945px and below */
@media (max-width: 945px) {
    /* Force 2-column grid with high specificity */
    .nav-page .nav-container,
    div.nav-page > .nav-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: minmax(auto, 1fr) !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        max-height: calc(100vh - 8rem) !important;
        overflow-y: auto !important;
    }

    .nav-page .nav-button-wrapper,
    .nav-container > .nav-button-wrapper {
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        aspect-ratio: 1 / 1 !important;
    }

    .nav-page .nav-button,
    .nav-button-wrapper > .nav-button,
    .nav-button-wrapper > a.nav-button {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 0.25rem !important;
        gap: 0.3rem !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .nav-button .icon-container,
    .nav-button > .button-content > .icon-container {
        height: 2.5rem !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

        .nav-button img,
        .nav-button .icon-container img {
            width: 2.5rem !important;
            height: auto !important;
            max-height: 2.5rem !important;
            display: block !important;
        }

    .nav-button .button-text,
    .nav-button > .button-content > .button-text {
        font-size: 0.875rem !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        margin: 0 !important;
        padding: 0 0.25rem !important;
        max-height: 2.6rem !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        width: 100% !important;
    }

    .nav-button .button-content,
    .nav-button > .button-content {
        gap: 0.3rem !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ---------------------------------------------------------------- */
/* Small phones (381px - 390px)           */
/* iPhone 12 mini, smaller Android phones   */
/* ---------------------------------------------------------------- */
@media (min-width: 381px) and (max-width: 390px) {

    .header-title {
        font-size: 1.05rem !important;
    }

    .nav-button .icon-container {
        height: 1.875rem !important;
    }

    .nav-button img {
        width: 1.875rem !important;
        max-height: 1.875rem !important;
    }

    .nav-button .button-text {
        font-size: 0.675rem !important;
        padding: 0 0.125rem !important;
    }

    .options-container {
        padding: 0.625rem;
        max-height: 11rem;
    }

        .options-container .filter-container > div,
        .options-container .filter-container button {
            font-size: 0.85rem;
            padding-top: 0.275rem;
            padding-bottom: 0.275rem;
        }

    .sidebar nav a,
    .sidebar .nav-item > a {
        width: 4.5rem !important;
        min-width: 4.5rem !important;
        font-size: 0.65rem !important;
        padding: 0.4rem 0.2rem !important;
    }

        .sidebar nav a img,
        .sidebar .nav-item > a > img {
            width: 1.375rem !important;
        }

    /* Login form adjustments for small phones */
    .login-form input,
    .login-form button {
        font-size: 1rem !important;
        padding: 0.6875rem 0.4375rem !important;
    }
}

/* Keep single column only for very small phones */
@media (max-width: 380px) {
    .nav-page .nav-container,
    div.nav-page > .nav-container {
        grid-template-columns: 1fr !important;
    }

    .header-title {
        font-size: 1rem !important;
    }

    .nav-button .button-text {
        font-size: 0.65rem !important;
    }

    .options-container {
        max-height: 10rem;
    }

    .sidebar nav a,
    .sidebar .nav-item > a {
        width: 4.25rem !important;
        min-width: 4.25rem !important;
        font-size: 0.625rem !important;
    }

        .sidebar nav a img,
        .sidebar .nav-item > a > img {
            width: 1.25rem !important;
        }

    /* Login form adjustments for very small phones */
    .login-form input,
    .login-form button {
        font-size: 1rem !important;
        padding: 0.6875rem 0.4375rem !important;
        width: 100% !important;
    }
}

/* === OPTIONS CONTAINER – MOBILE (≤945px) === */
@media (max-width: 945px) {
    .inner-tab-container {
        margin: 0;
    }

    .options-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
        padding: 0.75rem;
        box-sizing: border-box;
        max-height: 12rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }

        /* Specific styling for mobile-options (VIN Detail filters) */
        .options-container.mobile-options {
            height: 12rem !important;
            max-height: 12rem !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
        }

        .options-container .filter-container {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            margin: 0;
        }

            .options-container .filter-container label {
                margin: 0;
                font-weight: bold;
            }

            .options-container .filter-container select {
                width: 100%;
                max-height: 5rem;
                overflow-y: auto;
            }

            .options-container .filter-container .checkbox-group {
                width: 100%;
                max-height: 5rem;
                overflow-y: auto;
                margin-top: 0.2rem;
            }

            .options-container .filter-container > div,
            .options-container .filter-container button {
                width: 100%;
                padding-top: 0.3rem;
                padding-bottom: 0.3rem;
                font-size: 0.9rem;
                box-sizing: border-box;
                margin: 0;
                margin-top: .2rem;
                border-radius: .8rem;
            }

            .options-container .filter-container.reset-filters {
                grid-column: 1 / -1;
                min-height: 1rem;
            }

                .options-container .filter-container.reset-filters button {
                    padding-top: .6rem;
                    border-radius: 1rem;
                }

        /* Default: tabs at top for VIN/other reports */
        .options-container .inner-tab-container {
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: center;
            grid-row: 1 !important;
        }

        /* FastTurn specific: tabs AFTER vehicle selector */
        .options-container:has(.vehicle-container) .inner-tab-container {
            grid-row: auto !important;
        }

        .options-container .inner-tab-container .inner-tab {
            flex: 1 1 auto;
            min-width: 5rem;
            text-align: center;
            padding: 0.5rem;
            font-size: 0.9rem;
            box-sizing: border-box;
        }

        .options-container .filter-container select,
        .options-container .filter-container .checkbox-group {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

    .vin-meta {
        width: 100%;
        text-align: center;
        padding-right: 0px;
        padding-bottom: 2px;
    }

    #js-vin-rowcount {
        text-align: center !important;
        display: inline-block;
        width: 90%;
        text-size-adjust: 85%;
    }

    .label-group {
        align-items: flex-start;
    }
}

/* === REPORT TABS: full-width below filters on mobile === */
/* Applies at 945px and below */
@media (max-width: 945px) {
    .options-container.generated-only .inner-tab-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        /*        padding-top: 5px;*/
    }

    .options-container.generated-only .btn-download {
        width: auto !important;
        padding: 0.1rem 0.3rem !important;
        display: inline-flex !important;
        align-items: center;
    }

        .options-container.generated-only .btn-download > span {
            display: none !important;
        }

        .options-container.generated-only .btn-download::after {
            content: "XL";
            margin-left: 0.25rem;
            font-size: 0.9rem;
        }

    .options-container.generated-only #js-vin-generated-date {
        display: inline-block !important;
        margin: 0 !important;
        font-size: 0.85rem;
        line-height: 1.2;
    }

    #mimic-js-vin-generated-date {
        text-align: center;
    }

    div.options-container.generated-only {
        padding: 0 !important;
    }

    .otd-selections-wrapper {
        max-width: 100%;
    }
}

/* === SIDEBAR → BOTTOM NAV BAR (scrollable) - MOBILE === */
/* Applies at 945px and below */
@media (max-width: 945px) {
    .sidebar,
    .sidebar.slide-in,
    .sidebar.slide-in.show {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 5rem !important;
        transform: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        background-color: #f4f4f4 !important;
        box-shadow: 0 -1px 5px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        overflow: hidden !important;
        display: block !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }

        /* Nav container inside sidebar */
        .sidebar nav {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
            padding: 0.5rem 0.25rem !important;
            box-sizing: border-box !important;
            height: 100% !important;
            width: 100% !important;
            gap: 0 !important;
            align-items: center !important;
            /* Scrollbar styling */
            scrollbar-width: thin !important;
            scrollbar-color: rgba(0, 51, 102, 0.3) transparent !important;
            /* Prevent scroll reset */
            scroll-snap-type: none !important;
        }

            /* Webkit scrollbar styling */
            .sidebar nav::-webkit-scrollbar {
                height: 6px !important;
            }

            .sidebar nav::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.05) !important;
                border-radius: 3px !important;
            }

            .sidebar nav::-webkit-scrollbar-thumb {
                background: rgba(0, 51, 102, 0.3) !important;
                border-radius: 3px !important;
            }

                .sidebar nav::-webkit-scrollbar-thumb:hover {
                    background: rgba(0, 51, 102, 0.5) !important;
                }

        /* Nav items inside sidebar nav */
        .sidebar .nav-item {
            flex: 0 0 auto !important;
            width: auto !important;
            min-width: 5rem !important;
            margin: 0 0.25rem !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative !important;
        }

            /* Links inside nav items */
            .sidebar nav a,
            .sidebar .nav-item > a {
                flex: 0 0 auto !important;
                width: 5rem !important;
                min-width: 5rem !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0.5rem 0.25rem !important;
                text-align: center !important;
                font-size: 0.7rem !important;
                white-space: nowrap !important;
                color: #003366 !important;
                box-sizing: border-box !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 0.25rem !important;
                text-decoration: none !important;
                position: relative !important;
                border-radius: 8px !important;
            }

                /* Mobile circular hover effect matching desktop - applied to main nav links only */
                .sidebar nav a:not(.submenu-link)::before,
                .sidebar .nav-item > a:not(.submenu-link)::before {
                    content: "" !important;
                    position: absolute !important;
                    top: 50% !important;
                    left: 50% !important;
                    transform: translate(-50%, -50%) !important;
                    width: 60px !important;
                    height: 60px !important;
                    border-radius: 50% !important;
                    background-color: rgba(0, 0, 0, 0.1) !important;
                    opacity: 0 !important;
                    transition: opacity 0.3s !important;
                    pointer-events: none !important;
                    z-index: -1 !important;
                }

                .sidebar nav a:not(.submenu-link):hover::before,
                .sidebar .nav-item > a:not(.submenu-link):hover::before {
                    opacity: 1 !important;
                }

                .sidebar nav a:not(.submenu-link).active::before,
                .sidebar .nav-item > a:not(.submenu-link).active::before {
                    opacity: 1 !important;
                    background-color: rgba(0, 0, 0, 0.2) !important;
                }

                /* Images in nav links */
                .sidebar nav a img,
                .sidebar .nav-item > a > img {
                    width: 1.5rem !important;
                    height: auto !important;
                    margin: 0 !important;
                    margin-bottom: 0.25rem !important;
                    display: block !important;
                    flex-shrink: 0 !important;
                }

                /* Text spans in nav links */
                .sidebar nav a span,
                .sidebar .nav-item > a > span:not(.submenu-arrow) {
                    font-size: 0.7rem !important;
                    line-height: 1.1 !important;
                    white-space: normal !important;
                    word-break: break-word !important;
                    text-align: center !important;
                    display: block !important;
                    max-width: 5rem !important;
                }

    /* Adjust main content for bottom nav */
    .content-container,
    .main-container {
        margin-left: 0 !important;
        margin-bottom: 5.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* ======= TABLES: horizontal scroll - MOBILE ======= */
/* Applies at 945px and below */
@media (max-width: 945px) {
    .wholesale-wrapper,
    .vin-summary-wrapper,
    .retails-summary-wrapper {
        margin: 0 !important;
    }

    .excel-table.wholesale,
    .vin-summary,
    .vin-detail,
    .excel-table.vin-pulsereport {
        font-size: 0.97rem !important;
        width: 99vw !important;
        overflow-x: auto !important;
        display: block !important;
    }

        .excel-table.wholesale th,
        .excel-table.wholesale td,
        .vin-summary th,
        .vin-summary td,
        .vin-detail th,
        .vin-detail td,
        .excel-table.vin-pulsereport th,
        .excel-table.vin-pulsereport td {
            padding: 0.375rem 0.125rem !important;
            min-width: 2.5rem !important;
            max-width: 90vw !important;
        }

    .filter-container.reset-filters {
        margin-top: 15px !important;
    }

    /* ===== VIN DETAIL: DISABLE EXPAND/COLLAPSE TOGGLE ON PHONES ===== */
    /* Keep expandable-options at collapsed height with scroll */
    /* But show full checkbox groups without internal scrolling */

    /* Hide expand/collapse button */
    .expand-toggle-container {
        display: none !important;
    }

    /* Force expandable-options to collapsed state with scroll */
    .expandable-options,
    .expandable-options.expanded {
        min-height: auto !important;
        max-height: 11.25rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        pointer-events: auto !important; /* Allow scrolling */
    }

    /* Disable click interactions on filter containers that have expandable-options */
    .filter-container:has(.expandable-options) {
        pointer-events: none !important;
    }

        /* Re-enable pointer events for interactive elements inside */
        .filter-container:has(.expandable-options) .checkbox-group,
        .filter-container:has(.expandable-options) input[type="checkbox"],
        .filter-container:has(.expandable-options) label,
        .filter-container:has(.expandable-options) .expandable-options {
            pointer-events: auto !important;
        }

    /* Prevent label clicks from toggling expand/collapse */
    .filter-container label {
        cursor: default !important;
    }

    /* Checkbox groups: full height, no internal scroll */
    .options-container .filter-container .checkbox-group {
        max-height: none !important;
        min-height: auto !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Options-container itself can grow if needed */
    .options-container {
        max-height: none !important;
    }
}

/* === SINGLE COLUMN ON PHONES (≤430px) === */
@media (max-width: 430px) {
    .options-container {
        grid-template-columns: 1fr;
    }

    .label-group {
        align-items: flex-start;
    }

    .filter-container.reset-filters {
        margin-top: 15px !important;
    }
}

/* ----------------------------------------------------------- */
/*   End responsive Layout for Phones     */
/* ----------------------------------------------------------- */

/* Hide submenus on mobile - they're not needed in bottom nav */
@media (max-width: 945px) {
    .sidebar .submenu {
        display: none;
    }

    .sidebar .submenu-arrow {
        display: none;
    }
}

/* ===== NAVIGATION PAGE DROPDOWN STYLES ===== */
/* Only apply to screens 946px and above (tablets/desktops) */
@media (min-width: 946px) {
    /* Navigation button wrapper for dropdown positioning */
    .nav-button-wrapper {
        position: relative;
        display: inline-block;
    }

        .nav-button-wrapper .dropdown-arrow {
            font-size: 12px;
            margin-top: 4px;
            opacity: 0.7;
            transition: transform 0.2s ease;
        }

        .nav-button-wrapper.has-dropdown:hover .dropdown-arrow {
            transform: rotate(180deg);
        }

        .nav-button-wrapper.has-dropdown .dropdown-arrow {
            transform: rotate(180deg);
        }

    /* Navigation dropdown styling */
    .nav-dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        min-width: 160px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.15);
        z-index: 1000;
        padding: 0.5rem 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(-10px);
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        pointer-events: none;
        margin-top: 0; /* Remove the gap that was causing hover issues */
    }

    /* Create an invisible bridge to connect button and dropdown */
    .nav-button-wrapper.has-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 4px; /* Small bridge to maintain hover */
        background: transparent;
        z-index: 999;
    }

    /* Show dropdown on hover */
    .nav-button-wrapper:hover .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    /* Dropdown items */
    .nav-dropdown .dropdown-link {
        display: block;
        width: 100%;
        text-align: center;
        background: none;
        border: none;
        padding: 8px 16px;
        font-size: 14px;
        cursor: pointer;
        color: #222;
        text-decoration: none;
        transition: background 0.18s;
        white-space: nowrap;
    }

        .nav-dropdown .dropdown-link:hover {
            background: #f0f0f0;
            color: #003366;
        }

    .nav-button-wrapper.open .nav-dropdown {
        /* Keep dropdown open when a submenu is expanded */
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

/* Hide nav dropdowns on mobile (redundant but explicit) */
@media (max-width: 945px) {
    .nav-dropdown {
        display: none;
    }

    .nav-button-wrapper .dropdown-arrow {
        display: none;
    }

    .nav-button-wrapper.has-dropdown::after {
        display: none;
    }
}

/* ---------------------------------------------------------------- */
/* Slightly larger filters for mid-range laptops  */
/* Between 1280px and 1440px */
/* ---------------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1439px) {
    .options-container .filter-container select {
        min-width: 110px !important;
        max-width: 170px !important;
    }

    .options-container .filter-container .checkbox-group {
        min-width: 120px !important;
        max-width: 150px !important;
    }
}

/* ---------------------------------------------------------------- */
/* Standard size filters for larger laptops */
/* Between 1440px and 1680px */
/* ---------------------------------------------------------------- */
@media (min-width: 1440px) and (max-width: 1679px) {
    .options-container .filter-container select {
        min-width: 120px !important;
        max-width: 180px !important;
    }

    .options-container .filter-container .checkbox-group {
        min-width: 130px !important;
        max-width: 160px !important;
    }
}

/* ---------------------------------------------------------------- */
/* Adjust margin for smaller screens */
/* ---------------------------------------------------------------- */
@media (max-width: 1279px) and (min-width: 946px) {
    .options-container .filter-container.reset-filters,
    .options-container.generated-only .filter-container.reset-filters {
        margin-top: 0.5rem !important;
    }
}

/* ================================================================ */
/* MOBILE-SPECIFIC INTERACTION ENHANCEMENTS */
/* These rules target mobile devices beyond just screen size */
/* ================================================================ */

/* Remove hover effects on touch devices to prevent sticky states */
@media (hover: none) and (pointer: coarse) {
    .nav-button:hover,
    .sidebar nav a:hover,
    .dropdown-link:hover,
    button:hover {
        transition: none;
    }

    /* Use active/pressed states for touch feedback */
    .nav-button:active,
    .sidebar nav a:active,
    button:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Prevent iOS Safari zoom on input focus */
@media (max-width: 945px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* iOS zooms if < 16px */
    }
}

/* Respect user motion preferences (battery/accessibility) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-button,
    .sidebar nav a,
    button {
        border: 2px solid currentColor;
    }
}

/* Touch-optimized tap targets - minimum 44x44px */
@media (max-width: 945px) {
/*    button,
    a,*/
    input[type="button"],
    input[type="submit"],
    .nav-button,
    .dropdown-link {
    min-height: 44px;
        min-width: 44px;
    }

    /* Larger checkbox/radio hit areas */
    input[type="checkbox"],
    input[type="radio"] {
      min-width: 24px;
 min-height: 24px;
        cursor: pointer;
 }

  /* Larger labels for easier tapping */
    .checkbox-group label {
     padding: 0.5rem;
        display: flex;
        align-items: center;
 cursor: pointer;
   min-height: 44px;
    }

    /* Mobile-specific: prevent text selection on tap */
    .filter-container label {
     user-select: none;
 -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

/* Add visual feedback for tapped elements */
        .filter-container label:active {
     opacity: 0.7;
 }

    /* Momentum scrolling for tables */
 .excel-table.wholesale,
    .vin-summary,
    .vin-detail,
    .excel-table.vin-pulsereport {
 -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
 }

        /* Touch-friendly table cells */
   .excel-table.wholesale th,
        .excel-table.wholesale td,
        .vin-summary th,
   .vin-summary td,
.vin-detail th,
      .vin-detail td,
        .excel-table.vin-pulsereport th,
      .excel-table.vin-pulsereport td {
     min-height: 44px;
        }

    /* ===== LABEL-GROUP: Mobile - Label and buttons on same line ===== */
    .filter-container .label-group {
    display: flex !important;
    flex-direction: row !important;
 align-items: center !important;
  gap: 0.375rem !important;
     flex-wrap: nowrap !important;
    }

      .filter-container .label-group label {
  flex: 0 0 auto !important;
       margin: 0 !important;
       white-space: nowrap !important;
            font-size: 0.85rem !important;
 }

        .filter-container .label-group .button-group {
            display: flex !important;
            gap: 0.25rem !important;
            flex: 0 0 auto !important;
        }

            .filter-container .label-group .button-group button {
            flex: 0 0 auto !important;
      white-space: nowrap !important;
         padding: 0.2rem 0.5rem !important;
       font-size: 0.8rem !important;
         }
}

/* ================================================================ */
/* TABLET & SMALL LAPTOP: Label and buttons on same line */
/* Applies to screens 946px - 1489px */
/* ================================================================ */
@media (min-width: 946px) and (max-width: 1489px) {
    /* ===== LABEL-GROUP: Tablet - Label and buttons on same line ===== */
    .filter-container .label-group {
        display: flex !important;
        flex-direction: row !important;
    align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }

        .filter-container .label-group label {
       flex: 0 0 auto !important;
  margin: 0 !important;
   white-space: nowrap !important;
        }

        .filter-container .label-group .button-group {
  display: flex !important;
 gap: 0.375rem !important;
          flex: 0 0 auto !important;
        }

         .filter-container .label-group .button-group button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    padding: 0.25rem 0.75rem !important;
   }
}

/* ================================================================ */
/* DESKTOP: Label on top, buttons below (default/original layout) */
/* Applies to screens ≥1490px */
/* ================================================================ */
@media (min-width: 1490px) {
    /* Reset label-group to default vertical stacking for desktop */
  .filter-container .label-group {
    display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.1rem !important;
    }

.filter-container .label-group label {
    margin-bottom: 0.25rem !important;
        }

        .filter-container .label-group .button-group {
            display: flex !important;
   gap: 0.375rem !important;
        }

       .filter-container .label-group .button-group button {
           padding: 0.25rem 0.75rem !important;
    }
}