body.sidebar-open .topbar {
    display: none !important;
}
body:not(.app-active).sidebar-open::after {
    display: none !important;
}
/* MOBILE - до 30rem*/
/* Topbar flex alignment for all devices */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    background: #fff;
    z-index: 1001;
    position: relative;
}
@media (max-width: 480px) {
            .topbar {
                align-items: center;
            }
            .burger-btn,
            #cart-trigger {
                height: 2.5rem;
                min-width: 2.5rem;
                padding: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 !important;
                box-sizing: border-box;
            }
            #cart-trigger span {
                display: flex;
                align-items: center;
                height: 100%;
            }
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.5rem 1rem;
            box-sizing: border-box;
            background: #fff;
            z-index: 1001;
            position: relative;
        }
    .module-header {
        padding-left: 0 !important;
        margin-bottom: 1.5rem !important;
    }
   .sidebar {
        width: 90%;
        min-width: 5rem !important;
        left: -5rem !important;
        top: 0 !important;
        height: 100vh !important;
        position: fixed !important;
        transition: left 0.3s ease !important;
    }

    body.sidebar-open .sidebar {
        left: 0 !important;
    }

    body.sidebar-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .search-bar-container { 
        width: 95% !important; 
        margin: 1.25rem auto 1.875rem !important; 
        float: none !important; 
    }

    .search-input { 
        padding: 0.875rem 1.5625rem 0.875rem 3.4375rem !important; 
        font-size: 0.80rem !important; 
        border-radius: 0.9375rem !important; 
        box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.03) !important;
    }

    .search-bar-container::before { 
        left: 1.25rem !important;
        font-size: 1.1rem !important;
    }

     #search-suggestions {
        width: 100% !important;
        left: 0 !important;
        border-radius: 0.75rem !important;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        padding: 0.625rem !important;
    }

    .product-card img { height: 8.75rem !important; }
    .p-name { font-size: 0.75rem !important; }

    .btn-sell {
        font-size: 0.85rem !important;
        padding: 0.8rem 0.5rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important;
        min-width: 5rem !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
    }
    @media (hover: hover) and (pointer: fine) {
        .btn-sell:hover {
            transform: translateY(-2px) !important;
            background: #222 !important;
            box-shadow: 0 10px 18px rgba(0,0,0,0.22) !important;
        }
    }

    .btn-sell:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.16) !important;
        opacity: 0.92 !important;
    }

    .btn-sell:focus,
    .btn-sell:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    #inventory-search:focus,
    #inventory-search:focus-visible,
    .search-input:focus,
    .search-input:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    #cart-trigger, .burger-btn {
        padding: 0.5rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem !important;

    }

    .sync-toast {
        bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px)) !important;
        width: calc(100% - 1.25rem) !important;
        max-width: 26rem !important;
        text-align: center !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.07rem !important;
    }

    #cart-panel {
        width: 17.5rem !important;
        min-width: 17.5rem !important;
        max-width: 17.5rem !important;
        right: -17.5rem !important;
    }

     body.cart-open #cart-panel {
        right: 0 !important;
    }
    
    .btn-finish-transaction {
        padding: 0.9375rem !important;
        font-size: 0.7rem !important;
        display: block !important;
        margin: 0 auto !important;
        width: 90% !important;
    }

    .btn-clear-cart {
        margin-top: 0.625rem !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.12rem !important;
        text-transform: uppercase !important;
        color: var(--grey-text) !important;
        font-weight: 600 !important;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .btn-clear-cart:hover {
            opacity: 1 !important;
            transform: translateY(-1px) !important;
            color: #111 !important;
        }
    }

    .btn-clear-cart:active {
        transform: translateY(0) !important;
        opacity: 0.85 !important;
    }

    .content-module { 
        display: block;
        text-align: center;
        justify-content: center;
    }

    .transaction-details {
        padding: 0.875rem 1.125rem 1rem !important;
        border-radius: 1rem !important;
    }

    .tx-item {
        grid-template-columns: 3rem 1fr !important;
        gap: 0.625rem !important;
    }

    .tx-item-img {
        width: 3rem !important;
        height: 3rem !important;
        border-radius: 0.5rem !important;
    }

    .module-header h2 {
        font-size: 1.25rem !important;
        margin: 10px 0 !important;
        text-align: center !important;
        width: 100%;
        display: block;
    }

    .analytics-range {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 1rem !important;
        padding: 0.625rem 0.75rem !important;
        gap: 0.625rem !important;
    }
    .analytics-range-user { display: none !important; }
    .analytics-range-presets {
        border-right: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    .analytics-preset { padding: 0.3rem 0.45rem !important; }
    .analytics-range-input { font-size: 0.8rem !important; }

    .analytics-controls { width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.5rem !important; margin-top: 0.625rem !important; }
    .analytics-user-pill { display: none !important; }
    .analytics-range-trigger { width: 100% !important; text-align: center !important; }
    .analytics-range-popover { right: 50% !important; transform: translateX(50%) !important; width: calc(100vw - 1.25rem) !important; max-width: 24rem !important; }
    .analytics-user-popover { right: 50% !important; transform: translateX(50%) !important; width: calc(100vw - 1.25rem) !important; max-width: 24rem !important; }
    
    .analytics-grid { grid-template-columns: 1fr !important; }
    .kpi-value { font-size: 1.8rem !important; }

    .product-card:hover,
    .product-card:active {
        transform: none !important;
        box-shadow: none !important;
    }

    .product-card:active {
        opacity: 0.7 !important;
    }

    #camera-module { z-index: 5000 !important; }
    .camera-focus-frame { width: 12rem !important; height: 7rem !important; }
    .scanner-footer { flex-wrap: wrap; padding: 0.75rem 1rem !important; gap: 0.5rem !important; }
    .scanner-done-btn { padding: 0.6rem 1.25rem !important; font-size: 0.85rem !important; }
}

/* TABLET - 30.0625rem до 47.9375rem */
@media (min-width: 30.0625rem) and (max-width: 47.9375rem) {
    body.sidebar-open .topbar {
        display: none !important;
    }
   .sidebar {
        width: 50%;
        min-width: 5rem !important;
        left: -50% !important;
        top: 0 !important;
        height: 100vh !important;
        position: fixed !important;
        transition: left 0.3s ease !important;
    }

    body.sidebar-open .sidebar {
        left: 0 !important;
    }

    body.sidebar-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .search-bar-container { 
        width: 90% !important; 
        margin: 1.25rem auto 1.875rem !important;
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.9375rem !important;
    }

    #cart-panel {
        width: 20rem !important;
        min-width: 20rem !important;
        max-width: 20rem !important;
        right: -20rem !important;
    }

    .module-header {
        font-size: 1.25rem !important;
        margin: 10px 0 !important;
        display: block !important;
        text-align: center !important;
    }
    .analytics-grid { grid-template-columns: 1fr !important; }
}

/* iPad - 48rem до 64rem */
@media (min-width: 48rem) and (max-width: 64rem) {
    .sidebar {
        width: 50%;
        min-width: 17.5rem !important;
        top: 0 !important;
        height: 100vh !important;
        position: fixed !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
    }

    body.sidebar-open .sidebar {
        left: 0 !important;
    }

    body.sidebar-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
    }

    .product-grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
}