/* ================================================
   MA-GIA - CSS Mobile Responsive Comune
   Da includere in tutte le pagine del gestionale
   v2.1 - Ottimizzato per PWA Mobile + Magazzino
   ================================================ */

/* Reset e Base Mobile */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box !important;
    }

    html {
        font-size: 16px;
    }

    body {
        padding: 60px 10px 90px 10px !important;
        min-height: 100vh;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* =============== HEADER =============== */
    .header, .page-header {
        flex-direction: column !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        padding: 10px !important;
        margin-top: 0 !important;
    }

    .header h1, .page-header h1, .page-title, h1 {
        font-size: 1.25rem !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
    }

    .header p, .page-header p, .subtitle {
        font-size: 0.8rem !important;
        opacity: 0.9;
    }

    /* =============== BTN HOME/BACK FISSO IN BASSO =============== */
    .btn-home, .btn-back, a.btn-home, a.btn-back {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        border-radius: 0 !important;
        padding: 18px !important;
        z-index: 9998 !important;
        justify-content: center !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        text-decoration: none !important;
    }
    
    /* Eccezione per pagina gestione chiavi - home button in header */
    .header .btn-home, header .btn-home {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        border-radius: 10px !important;
        padding: 10px 15px !important;
        z-index: 1 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        width: auto !important;
        font-size: 0.9rem !important;
        background: white !important;
        color: #86b922 !important;
    }
    
    .header .btn-home:hover, header .btn-home:hover {
        background: #86b922 !important;
        color: white !important;
    }

    /* =============== CARDS GRID =============== */
    .cards-grid, .grid, .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .card, .access-card, .menu-card {
        padding: 15px 10px !important;
        border-radius: 14px !important;
        min-height: 90px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    .card .icon, .access-card .icon, .menu-card .icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .card h2, .access-card h2, .menu-card h2,
    .card h3, .access-card h3, .menu-card h3 {
        font-size: 0.85rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    .card p, .access-card p, .menu-card p,
    .card .description, .card .stats, .features,
    .card .notification-badge {
        display: none !important;
    }

    /* =============== WELCOME MESSAGE =============== */
    .welcome-message, .welcome-box {
        padding: 12px !important;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    /* =============== MAIN CONTENT =============== */
    .main-card, .content-card, .main-content {
        padding: 15px !important;
        border-radius: 16px !important;
        margin-bottom: 15px !important;
    }

    /* =============== SECTION HEADER =============== */
    .section-header {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }

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

    /* =============== STATS ROW =============== */
    .stats-row, .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card, .stat-box {
        padding: 12px !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    .stat-card .number, .stat-box .number {
        font-size: 1.5rem !important;
    }

    .stat-card .label, .stat-box .label {
        font-size: 0.7rem !important;
    }

    /* =============== TABELLE =============== */
    table, .data-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        border-radius: 12px !important;
    }

    table th, table td,
    .data-table th, .data-table td {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }

    /* =============== FORM =============== */
    .form-group {
        margin-bottom: 15px !important;
    }

    .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    input, select, textarea,
    .form-group input, 
    .form-group select,
    .form-group textarea {
        padding: 14px !important;
        font-size: 16px !important; /* Previene zoom su iOS */
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* =============== BOTTONI =============== */
    .btn, button:not(.logout-btn) {
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        min-height: 48px !important; /* Touch target minimo */
    }

    .btn-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 12px !important;
    }

    .btn-group, .action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .btn-group .btn, .action-buttons .btn {
        width: 100% !important;
    }

    /* =============== MODAL =============== */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        padding: 20px !important;
        max-height: 85vh !important;
        border-radius: 20px !important;
        margin: 10px !important;
    }

    .modal-header {
        margin-bottom: 15px !important;
    }

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

    .modal-body {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    /* =============== FILTRI E SEARCH =============== */
    .filters {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .search-box, .search-container {
        width: 100% !important;
    }

    .search-box input, .search-container input {
        width: 100% !important;
    }

    /* =============== TABS =============== */
    .tabs, .tab-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 5px !important;
        display: flex !important;
        gap: 5px !important;
    }

    .tab-btn, .tab {
        white-space: nowrap !important;
        font-size: 0.85rem !important;
        padding: 10px 16px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* =============== ORDINI GRID =============== */
    .ordini-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ordine-card {
        padding: 15px !important;
        border-radius: 14px !important;
    }

    .ordine-card .card-header h3 {
        font-size: 1rem !important;
    }

    .ordine-card .badge {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
        border-radius: 15px !important;
    }

    /* =============== PRODOTTI GRID =============== */
    .prodotti-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .prodotto-card {
        padding: 15px !important;
        border-radius: 14px !important;
        flex-direction: row !important;
        gap: 12px !important;
    }

    .prodotto-card .product-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
        flex-shrink: 0 !important;
    }

    /* =============== FORNITORI =============== */
    .fornitori-list, .fornitori-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .fornitore-card {
        padding: 15px !important;
        border-radius: 14px !important;
    }

    /* =============== STORICO =============== */
    .storico-item {
        padding: 15px !important;
        border-radius: 14px !important;
    }

    .storico-item .date {
        font-size: 0.8rem !important;
    }

    /* =============== RICHIESTE =============== */
    .request-card {
        padding: 15px !important;
        border-radius: 14px !important;
    }

    .request-card .request-header {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* =============== ADMIN HEADER =============== */
    .admin-header {
        padding: 15px !important;
    }

    .admin-header h1 {
        font-size: 1.2rem !important;
    }

    /* =============== STATUS E BADGE =============== */
    .status-badge, .badge {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
        border-radius: 15px !important;
    }

    .qty-badge {
        font-size: 0.9rem !important;
        min-width: 35px !important;
    }

    /* =============== NOTIFICHE =============== */
    .notification-badge {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.7rem !important;
        top: -5px !important;
        right: -5px !important;
    }

    /* =============== TOAST =============== */
    .toast {
        bottom: 110px !important;
        width: 90% !important;
        left: 5% !important;
        right: 5% !important;
        border-radius: 12px !important;
    }

    /* =============== EMPTY STATE =============== */
    .empty-state {
        padding: 40px 20px !important;
        text-align: center !important;
    }

    .empty-state .icon, .empty-state i {
        font-size: 3rem !important;
        margin-bottom: 15px !important;
    }

    .empty-state h3 {
        font-size: 1.1rem !important;
    }

    .empty-state p {
        font-size: 0.9rem !important;
    }

    /* =============== ACTIONS =============== */
    .actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .bulk-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* =============== INFO ROW =============== */
    .info-row, .detail-row {
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 10px !important;
    }

    .info-row .label {
        font-weight: 600 !important;
        font-size: 0.8rem !important;
    }

    /* =============== CONFIGURATORE =============== */
    .configurator-container {
        flex-direction: column !important;
    }

    .vending-machine {
        transform: scale(0.55) !important;
        transform-origin: top center !important;
        margin-bottom: -100px !important;
    }

    .sidebar {
        width: 100% !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
    }

    /* =============== CART SUMMARY =============== */
    .cart-summary {
        position: fixed !important;
        bottom: 65px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px !important;
        border-radius: 0 !important;
        z-index: 998 !important;
    }

    body.has-cart {
        padding-bottom: 160px !important;
    }
}

/* =============== TABLET =============== */
@media (min-width: 769px) and (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* =============== TOUCH IMPROVEMENTS =============== */
@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .access-card:hover,
    .btn:hover,
    .menu-card:hover {
        transform: none !important;
    }

    .card:active,
    .access-card:active,
    .btn:active,
    .menu-card:active {
        transform: scale(0.97) !important;
        opacity: 0.9;
    }

    /* Larger touch targets */
    a, button, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
}

/* =============== SAFE AREA (per notch iPhone) =============== */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        body {
            padding-top: calc(60px + env(safe-area-inset-top)) !important;
            padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        }

        .logout-btn, a[href*="logout"] {
            top: calc(12px + env(safe-area-inset-top)) !important;
        }

        .btn-home, .btn-back {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
    }
}
/* ================================================================
   STILI SPECIFICI PAGINE MAGAZZINO - MOBILE
   ================================================================ */
@media (max-width: 768px) {
    /* =============== MAIN CARD MAGAZZINO =============== */
    .main-card {
        padding: 12px !important;
        margin: 0 -5px !important;
        border-radius: 12px !important;
        width: calc(100% + 10px) !important;
        overflow-x: hidden !important;
    }

    /* =============== TABELLE MAGAZZINO =============== */
    .data-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .data-table thead {
        display: none !important;
    }

    .data-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .data-table tr {
        display: block !important;
        margin-bottom: 12px !important;
        background: #f8f9fa !important;
        border-radius: 10px !important;
        padding: 12px !important;
        border: 1px solid #e0e0e0 !important;
    }

    .data-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #eee !important;
        font-size: 0.9rem !important;
        width: 100% !important;
    }

    .data-table td:last-child {
        border-bottom: none !important;
    }

    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        font-size: 0.8rem;
        text-transform: uppercase;
        flex-shrink: 0;
        margin-right: 10px;
    }

    .data-table .actions {
        justify-content: flex-end !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #ddd !important;
    }

    /* =============== SEARCH BAR MAGAZZINO =============== */
    .search-bar {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .search-input {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }

    .filter-select {
        width: 100% !important;
    }

    /* =============== SECTION HEADER MAGAZZINO =============== */
    .section-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .section-title {
        font-size: 1.1rem !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* =============== FORM GRID MAGAZZINO =============== */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .form-group.full-width {
        grid-column: 1 !important;
    }

    .form-group select,
    .form-group input {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* =============== QTY INPUT =============== */
    .qty-input {
        width: 70px !important;
        padding: 10px 5px !important;
        font-size: 1rem !important;
    }

    /* =============== ACTIONS BAR =============== */
    .actions-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .actions-bar .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* =============== BADGE =============== */
    .badge {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }

    /* =============== BTN ICON =============== */
    .btn-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    /* =============== QTY INDICATOR =============== */
    .qty-indicator {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
    }

    .qty-bar {
        width: 50px !important;
    }

    /* =============== HEADER MAGAZZINO =============== */
    .header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }

    .header h1 {
        font-size: 1.2rem !important;
        margin-right: 0 !important;
    }

    /* =============== EMPTY STATE =============== */
    .empty-state {
        padding: 30px 15px !important;
    }

    .empty-state i {
        font-size: 2.5rem !important;
    }

    /* =============== ORDINE CARD MOBILE =============== */
    .ordine-card {
        padding: 15px !important;
    }

    .ordine-card .card-header {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ordine-card .card-body {
        font-size: 0.9rem !important;
    }

    .ordine-card .card-footer {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* =============== PRODOTTO ITEM =============== */
    .prodotto-item, .ordine-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    /* =============== TOTALE BAR =============== */
    .totale-bar, .summary-bar {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* =============== MODAL FIX MOBILE =============== */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        padding: 15px !important;
        margin: 10px !important;
        max-height: 90vh !important;
    }

    .modal-header {
        padding-bottom: 10px !important;
        margin-bottom: 15px !important;
    }

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

    .modal-body {
        max-height: calc(90vh - 150px) !important;
        overflow-y: auto !important;
        padding: 5px !important;
    }

    .modal-footer {
        padding-top: 15px !important;
        margin-top: 15px !important;
    }

    /* =============== LISTA PRODOTTI SELEZIONE =============== */
    .products-list, .prodotti-list {
        max-height: 50vh !important;
        overflow-y: auto !important;
    }

    .product-item, .prodotto-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }

    /* =============== CARRELLO ORDINE =============== */
    .cart-items, .ordine-items {
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
}

/* ================================================
   SPECIFICO PER SCHERMI PICCOLI (5 pollici ~ 320-380px)
   ================================================ */
@media (max-width: 380px) {
    body {
        padding: 50px 6px 80px 6px !important;
    }

    /* Logo più piccolo */
    .logo img {
        max-width: 150px !important;
        height: auto !important;
    }

    .header .logo img {
        max-width: 140px !important;
    }

    /* Welcome message compatto */
    .welcome-message {
        font-size: 0.85rem !important;
        padding: 8px 10px !important;
        margin-bottom: 10px !important;
    }

    .welcome-message strong {
        display: block !important;
        margin-bottom: 2px !important;
    }

    /* Cards grid SEMPRE 2 colonne anche su schermi piccoli */
    .cards-grid, .grid, .menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Cards compatte - solo icona e nome */
    .card, .access-card, .menu-card {
        padding: 12px 8px !important;
        min-height: 80px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px !important;
    }

    .card .icon, .access-card .icon, .menu-card .icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

    .access-card h2 {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }

    .access-card p {
        font-size: 0.75rem !important;
        display: none !important; /* Nascondi descrizione su schermi piccoli */
    }

    .access-card .btn {
        display: none !important; /* Nascondi bottone, card cliccabile */
    }

    /* Stats container compatto */
    .stats-container {
        gap: 6px !important;
        padding: 8px !important;
    }

    .stat-item, .stat-box {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }

    .stat-value {
        font-size: 1rem !important;
    }

    /* Hamburger menu più grande per touch */
    .hamburger-btn {
        width: 44px !important;
        height: 44px !important;
        top: 8px !important;
        left: 8px !important;
    }

    /* Side menu più stretto */
    .side-menu {
        width: 260px !important;
    }

    /* Bottone home/back più compatto */
    .btn-home, .btn-back, a.btn-home, a.btn-back {
        padding: 14px !important;
        font-size: 0.9rem !important;
    }

    /* Titoli più piccoli */
    h1, .page-title {
        font-size: 1.1rem !important;
    }

    h2 {
        font-size: 1rem !important;
    }

    /* Form inputs */
    input, select, textarea {
        font-size: 16px !important; /* Previene zoom su iOS */
        padding: 10px !important;
    }

    /* Bottoni */
    button, .btn {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }

    /* Badge notifiche */
    .notification-badge, .badge-notification {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.65rem !important;
    }
}