/* ============================================
   MOBILE FIX DEFINITIVO - OVERRIDE TOTALE
   Per schermi fino a 768px (smartphone)
   ============================================ */

@media screen and (max-width: 768px) {

    /* ========== NASCONDI COMPLETAMENTE LA SIDEBAR DESKTOP ========== */
    body > #sidebar,
    html body #sidebar,
    #sidebar.sidebar,
    div#sidebar,
    div.sidebar,
    .sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        z-index: 9999 !important;
        background: #ffffff !important;
        border-top: 2px solid #f59e42 !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        transform: none !important;
        transition: none !important;
    }

    /* Nascondi scrollbar */
    #sidebar::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* ========== MAIN CONTENT SENZA MARGINI ========== */
    body > #main-content,
    html body #main-content,
    #main-content,
    main,
    .main-content,
    #content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px !important;
        padding-bottom: 80px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
    }

    /* ========== TOPBAR ========== */
    body > .topbar,
    html body .topbar,
    .topbar,
    header,
    #header {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding: 8px 12px !important;
        position: relative !important;
    }

    /* ========== BOTTOM NAV ========== */
    #sidebar > ul:first-child,
    #sidebar ul:first-of-type,
    .sidebar > ul,
    #sidebar ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        overflow: hidden !important;
    }

    #sidebar ul li,
    .sidebar ul li,
    #sidebar > ul > li {
        flex: 1 !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    #sidebar ul li a,
    .sidebar ul li a,
    #sidebar .menu-link,
    .sidebar .menu-link,
    #sidebar a[href^="#"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.6rem !important;
        padding: 2px !important;
        color: #555 !important;
        text-decoration: none !important;
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    #sidebar ul li a i,
    .sidebar ul li a i,
    #sidebar .menu-link i {
        font-size: 1.4rem !important;
        margin-bottom: 2px !important;
        display: block !important;
    }

    /* ========== NASCONDI SOTTOMENU DESKTOP ========== */
    #sidebar ul ul,
    #sidebar .submenu,
    .sidebar .submenu,
    #sidebar > ul > li > ul {
        position: fixed !important;
        bottom: 65px !important;
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
        padding: 10px !important;
        display: none !important;
        z-index: 10000 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        border: 1px solid #ddd !important;
        top: auto !important;
        margin: 0 !important;
    }

    #sidebar .submenu.active,
    #sidebar ul ul.active {
        display: block !important;
    }

    #sidebar .submenu li,
    #sidebar ul ul li {
        padding: 8px 0 !important;
        border-bottom: 1px solid #eee !important;
        height: auto !important;
        display: block !important;
    }

    #sidebar .submenu li a,
    #sidebar ul ul li a {
        font-size: 1rem !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        height: auto !important;
    }

    /* ========== NASCONDI ELEMENTI CHE ESCONO FUORI ========== */
    .sidebar-flyout,
    #sidebar-flyout,
    #sidebar .flyout,
    .flyout {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* ========== BOTTONI AZIONI ========== */
    .card-header-row,
    .form-actions,
    .btn-group,
    .action-buttons,
    .button-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .card-header-row .btn,
    .form-actions .btn,
    .btn-group .btn,
    .action-buttons .btn {
        flex: 1 1 45% !important;
        min-width: 140px !important;
        max-width: 48% !important;
        white-space: nowrap !important;
        font-size: 0.85rem !important;
        padding: 10px !important;
    }

    /* ========== CATEGORIE SCROLLABILI ========== */
    #filtro-categorie-menu,
    .filtro-categorie-menu-group,
    .category-filters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
        width: 100% !important;
    }

    #filtro-categorie-menu::-webkit-scrollbar,
    .filtro-categorie-menu-group::-webkit-scrollbar {
        display: none !important;
    }

    .filtro-cat-btn,
    .category-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
    }

    /* ========== CARD PRODOTTI ========== */
    .prodotto-card,
    .product-card,
    .card-standard {
        width: 100% !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }

    .prodotto-card .d-flex,
    .product-card .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .prodotto-card .fw-bold,
    .product-card .fw-bold {
        font-size: 1rem !important;
    }

    .prodotto-card .text-secondary,
    .product-card .text-secondary {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    /* ========== FILTRI E INPUT ========== */
    #filtro-gusto,
    .filtro-gusto,
    .input-custom,
    input[type="text"],
    input[type="search"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* ========== FORM ========== */
    .form-group,
    .form-row {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    input, select, textarea {
        width: 100% !important;
        font-size: 16px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Escludi checkbox e radio dalla larghezza 100% */
    input[type="checkbox"], input[type="radio"] {
        width: auto !important;
        min-width: auto !important;
    }

    /* ========== BOTTONI TOUCH-FRIENDLY ========== */
    .btn, button, [type="button"], [type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* ========== TABELLE ========== */
    .table-responsive {
        overflow-x: auto !important;
        display: block !important;
        width: 100% !important;
    }

    /* ========== LAYOUT A COLONNA ========== */
    .row, .d-flex.flex-row, .flex-row {
        flex-direction: column !important;
    }

    .col, .col-6, .col-4, .col-3, .col-8, .col-sm-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}