/* ==========================================
   ATS FUSION - COMPLETE RESPONSIVE CSS
========================================== */

/* ---------- GLOBAL ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

img,
canvas,
video {
    max-width: 100%;
}

button {
    touch-action: manipulation;
}

input,
select,
textarea {
    max-width: 100%;
}


/* ==========================================
   DESKTOP LAYOUT
========================================== */

@media (min-width: 769px) {

    body {
        padding-bottom: 0 !important;
        overflow-x: hidden;
    }

    #main-nav-tabs {
        display: flex !important;
    }

    #mobile-bottom-bar,
    .mobile-nav-bar {
        display: none !important;
    }

    main {
        width: 100%;
        max-width: 100%;
    }

    /* Dispenser table */

    #view-fueling {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #view-fueling .apple-glass-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    #view-fueling .apple-glass-card > div:has(> table.apple-list-table) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    #view-fueling table.apple-list-table {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    #view-fueling .apple-list-table th,
    #view-fueling .apple-list-table td {
        padding: 9px 6px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }
}


/* ==========================================
   MOBILE LAYOUT
========================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0 !important;
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Header */

    header {
        position: sticky !important;
        top: 0;
        z-index: 10000 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 56px;
        height: auto !important;
        padding: 8px 10px !important;
    }

    .nav-container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .brand {
        min-width: 0 !important;
        max-width: 100%;
        gap: 7px !important;
    }

    .brand img {
        width: auto;
        max-width: 105px !important;
        height: auto !important;
    }

    .brand-org {
        max-width: 110px;
        overflow-wrap: anywhere;
    }

    #main-nav-tabs {
        display: none !important;
    }

    .global-search-container {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin: 4px 0 0 !important;
    }

    #nav-user-box {
        margin-left: auto !important;
        gap: 6px !important;
        max-width: 100%;
        min-width: 0;
    }

    .user-profile {
        min-width: 0 !important;
    }

    .btn-logout {
        min-height: 38px;
    }

    /* Main content */

    main {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    main > *,
    main section,
    main .view,
    main [id^="view-"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .dashboard-grid,
    .kpi-grid,
    .stat-strip-grid,
    .meters-row,
    .action-row,
    .presets-grid {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .table-card,
    .card,
    .hero-card,
    .side-mgmt-card,
    .login-card,
    .modal-content,
    .panel,
    .section-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Standard scrollable tables */

    .table-responsive,
    .table-wrap,
    .table-container,
    .data-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        max-width: 100%;
    }

    /* ======================================
       DISPENSER PAGE
    ====================================== */

    #view-fueling {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #view-fueling h1,
    #view-fueling h2 {
        max-width: 100%;
        font-size: 24px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }

    #view-fueling p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    #view-fueling .apple-glass-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #view-fueling input,
    #view-fueling select {
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Only the actual dispenser table scrolls */

    #view-fueling .apple-glass-card > div:has(> table.apple-list-table) {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch !important;
    }

    #view-fueling table.apple-list-table {
        width: 850px !important;
        min-width: 850px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    #view-fueling .apple-list-table th,
    #view-fueling .apple-list-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Pump configuration */

    #view-fueling tr td[colspan] {
        box-sizing: border-box !important;
    }

    #view-fueling tr td[colspan] > div {
        box-sizing: border-box !important;
        max-width: 100%;
    }

    #view-fueling td button,
    #view-fueling td input,
    #view-fueling td select {
        max-width: 100%;
    }

    /* Other mobile cards */

    .modal,
    .modal-overlay {
        padding: 10px !important;
    }

    .modal-dialog,
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* ======================================
       MOBILE BOTTOM NAVIGATION
    ====================================== */

    .mobile-nav-bar,
    #mobile-bottom-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        justify-content: space-around !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.97) !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -5px 20px rgba(15, 23, 42, 0.08) !important;
        z-index: 99999 !important;
    }

    /* Hidden before login */

    #mobile-bottom-bar {
        display: none !important;
    }

    /* Visible after login */

    body.user-logged-in #mobile-bottom-bar {
        display: flex !important;
    }

    .mobile-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 6px 2px !important;
    }

    .mobile-nav-item span {
        overflow-wrap: anywhere;
    }
}


/* ==========================================
   SMALL MOBILE PHONES
========================================== */

@media (max-width: 380px) {

    main {
        padding: 9px !important;
    }

    .kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .brand-org {
        display: none !important;
    }

    .mobile-nav-item {
        font-size: 10px !important;
    }
}


/* ==========================================
   DESKTOP FOOTER SAFETY
========================================== */

@media (min-width: 769px) {

    #mobile-bottom-bar,
    .mobile-nav-bar {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}

/* Dispenser table responsive fix */

#view-fueling .dispenser-table-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden !important;
    border-radius: 20px;
    box-sizing: border-box;
}

#view-fueling .dispenser-table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#view-fueling .dispenser-table-wrapper .apple-list-table {
    width: 100%;
    min-width: 950px;
    table-layout: fixed;
    border-collapse: collapse;
}

#view-fueling .dispenser-table-wrapper th,
#view-fueling .dispenser-table-wrapper td {
    padding: 10px 8px;
    font-size: 12px;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
    #view-fueling .dispenser-table-wrapper .apple-list-table {
        width: 950px;
        min-width: 950px;
    }

    #view-fueling .dispenser-table-wrapper th,
    #view-fueling .dispenser-table-wrapper td {
        padding: 8px;
        font-size: 11px;
    }
}

/* Desktop */
@media (min-width: 769px) {
    #view-fueling .dispenser-table-wrapper .apple-list-table {
        width: 100%;
        min-width: 950px;
    }
}