/* ==========================================================================
   eCartFlow - Store Owner Panel Responsive Stylesheet (store-responsive.css)
   Mobile, Tablet, and Desktop Breakpoint Rules (Matching Original Design)
   ========================================================================== */

/* 1. Global Z-Index Hierarchy System */
:root {
    --ecf-z-content: 1;
    --ecf-z-header: 1000;
    --ecf-z-bottom-nav: 1020;
    --ecf-z-dropdown: 1040;
    --ecf-z-backdrop: 1050;
    --ecf-z-bottom-sheet: 1060;
    --ecf-z-offcanvas: 1060;
    --ecf-z-modal: 1070;
    --ecf-z-modal-dropdown: 1080;
    --ecf-z-toast: 1090;
}

.ecf-app-header,
.app-header {
    z-index: 1000 !important;
}

.ecf-bottom-nav,
.app-bottom-nav {
    z-index: 1020 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

.dropdown-menu,
.ecf-custom-select-menu,
.ecf-select-dropdown {
    z-index: 1040 !important;
}

.modal-backdrop,
.offcanvas-backdrop {
    z-index: 1050 !important;
}

.offcanvas,
.offcanvas-end,
.offcanvas-bottom,
.ecf-notification-drawer {
    z-index: 1060 !important;
}

.modal {
    z-index: 1070 !important;
}

.modal .dropdown-menu,
.modal .ecf-custom-select-menu,
.variant-option-menu {
    z-index: 1080 !important;
}

.toast-container,
.toast,
#toastContainer {
    z-index: 1090 !important;
}

/* Hide horizontal scrollbar on filter pills across all devices */
.ecf-filter-pills {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.ecf-filter-pills::-webkit-scrollbar {
    display: none !important;
}

/* 2. Mobile & Standalone PWA (< 992px) */
@media (max-width: 991.98px), (display-mode: standalone) {
    html,
    body.store-owner-app {
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
        touch-action: manipulation !important;
    }

    body.store-owner-app {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Outer Canvas Stretches to Full Available Viewport */
    .store-owner-app .ecf-app-canvas {
        min-height: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: var(--ecf-app-bg) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* App Frame Naturally Fills Available Mobile Width */
    .store-owner-app .ecf-app-frame {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Fixed Top Header (Proper Width & Notch Safe Area) */
    .store-owner-app .ecf-app-header,
    .store-owner-app .app-header {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 1000 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        padding-top: max(0.45rem, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 0.45rem !important;
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
        height: auto !important;
        min-height: 48px !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
        box-sizing: border-box !important;
    }

    .store-owner-app .ecf-header-left {
        display: flex !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .store-owner-app .ecf-header-brand {
        display: flex !important;
        align-items: center !important;
    }

    .store-owner-app .ecf-app-header-logo-img {
        height: 26px !important;
        max-height: 26px !important;
        width: auto !important;
        max-width: 115px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .store-owner-app .ecf-header-right {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    .store-owner-app .ecf-header-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-shrink: 0 !important;
    }

    /* Scrollable Middle Content (Uses Full Screen Width & Proper Safe Gutters) */
    .store-owner-app .ecf-app-body,
    .store-owner-app .app-content {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 0.85rem !important;
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
        overscroll-behavior-y: contain !important;
        box-sizing: border-box !important;
    }

    /* Fixed Bottom Navigation (Anchored to Viewport with Bottom Safe Area) */
    .store-owner-app .ecf-bottom-nav,
    .store-owner-app .app-bottom-nav {
        flex: 0 0 auto !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;
        padding-top: 0.25rem !important;
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)) !important;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
        background-color: #ffffff !important;
        border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        box-sizing: border-box !important;
    }

    .ecf-dash-metrics-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Prevent Mobile Browser Auto-Zoom on Input Focus (iOS & Android) */
    .store-owner-app input:not([type="checkbox"]):not([type="radio"]),
    .store-owner-app select,
    .store-owner-app textarea,
    .store-owner-app .form-control,
    .store-owner-app .form-select {
        font-size: 16px !important;
    }

    /* Prevent Horizontal Overflow Across Mobile Components */
    .store-owner-app img {
        max-width: 100% !important;
        height: auto !important;
    }

    .store-owner-app .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .store-owner-app .modal-dialog {
        margin: 0.5rem auto !important;
        max-width: calc(100% - 1rem) !important;
    }

    .store-owner-app .dropdown-menu {
        max-width: calc(100vw - 1.5rem) !important;
    }

    .ecf-quick-sheet-modal,
    .quick-actions-sheet {
        max-width: 100% !important;
        left: 0 !important;
        transform: translateY(100%) !important;
    }
    .ecf-quick-sheet-modal.is-open,
    .quick-actions-sheet.is-open {
        transform: translateY(0) !important;
    }

    .ecf-auth-page {
        padding: 0 !important;
        background-color: var(--ecf-app-bg) !important;
        align-items: stretch !important;
        min-height: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ecf-auth-container {
        border-radius: 0 !important;
        min-height: 100% !important;
        height: auto !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }
}

/* 3. Desktop Frame Setup (> 991.98px) - App Container for Store Panel */
@media (min-width: 992px) {
    html:has(body.store-owner-app),
    body.store-owner-app {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Auth Pages (Login, Register, Forgot Password) on Desktop Web: Full Natural Scrolling */
    html:has(body.ecf-auth-body),
    body.ecf-auth-body {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background-color: #edf3fc !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ecf-auth-body .ecf-auth-page {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 2.5rem 1rem 4rem 1rem !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
    }

    .ecf-auth-body .ecf-auth-container {
        margin: 1rem auto 3rem auto !important;
        flex-shrink: 0 !important;
        max-width: 420px !important;
        border-radius: var(--ecf-radius-xl) !important;
        box-shadow: var(--ecf-shadow-frame) !important;
        border: 1px solid rgba(226, 232, 240, 0.85) !important;
    }

    .ecf-auth-body .ecf-auth-register-container {
        max-width: 460px !important;
    }

    .store-owner-app .ecf-app-canvas {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: var(--ecf-page-bg) !important;
        padding: 0.5rem 1rem !important;
        box-sizing: border-box !important;
    }

    .store-owner-app .ecf-app-frame {
        width: 100% !important;
        max-width: 420px !important;
        height: calc(100vh - 1rem) !important;
        height: calc(100dvh - 1rem) !important;
        max-height: 860px !important;
        min-height: 520px !important;
        background-color: var(--ecf-app-bg) !important;
        border-radius: 28px !important;
        box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.12), 0 8px 24px -4px rgba(15, 23, 42, 0.05) !important;
        border: 1px solid rgba(226, 232, 240, 0.85) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .store-owner-app .ecf-app-header,
    .store-owner-app .app-header {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 1000 !important;
        width: 100% !important;
        min-height: 56px !important;
    }

    .store-owner-app .ecf-app-body,
    .store-owner-app .app-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1rem 1rem 1.5rem !important;
        width: 100% !important;
    }

    .store-owner-app .ecf-bottom-nav,
    .store-owner-app .app-bottom-nav {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 1020 !important;
        width: 100% !important;
        min-height: 60px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}