/*
 * BalzOS — Global Mobile Stylesheet
 * Applicato a tutte le pagine via base.html
 * Breakpoint principale: 768px
 */

/* ══════════════════════════════════════
   1. BASE — overflow e contenitori
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .main-content { overflow-x: hidden; }

    /* Titoli pagina più compatti */
    h1[style*="font-size:2.2rem"],
    h1[style*="font-size: 2.2rem"] { font-size: 1.6rem !important; }
    h1[style*="font-size:2rem"],
    h1[style*="font-size: 2rem"]   { font-size: 1.5rem !important; }

    /* Bottoni header affiancati al titolo: vanno sotto */
    [style*="display:flex"][style*="justify-content:space-between"],
    [style*="display: flex"][style*="justify-content: space-between"] {
        flex-wrap: wrap;
        gap: .75rem;
    }
}

/* ══════════════════════════════════════
   2. TABELLE — scroll orizzontale
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Wrapper automatico per tabelle non già wrappate */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Celle più compatte */
    th, td { white-space: nowrap; padding: 6px 10px !important; font-size: .82rem; }
}

/* ══════════════════════════════════════
   3. GRIGLIE INLINE — collasso a 1 col
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Sidebar + contenuto */
    [style*="grid-template-columns:240px"],
    [style*="grid-template-columns: 240px"],
    [style*="grid-template-columns:230px"],
    [style*="grid-template-columns: 230px"],
    [style*="grid-template-columns:320px"],
    [style*="grid-template-columns: 320px"],
    [style*="grid-template-columns:1fr 320px"],
    [style*="grid-template-columns: 1fr 320px"] {
        grid-template-columns: 1fr !important;
    }

    /* 2 colonne → 1 */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 3 colonne → 1 */
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 4 colonne → 2 */
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 5+ colonne → 2 */
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* 4 colonne → 1 su schermi molto piccoli */
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ══════════════════════════════════════
   4. PRESENZE — badge e dashboard
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Badge container centrato, più spaziato */
    .presenze-badge-container { max-width: 100% !important; padding: 0 4px; }

    /* Pulsante timbra: gestito da presenze.css */

    /* Dashboard presenze: card utenti in colonna */
    .presenze-dashboard .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: .5rem !important;
    }
    .presenze-card-grid,
    [class*="presenze-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Card utente presenze */
    .user-presence-card { padding: .75rem !important; }
    .presence-hours     { font-size: .82rem !important; }
}

/* ══════════════════════════════════════
   5. PREVENTIVAZIONE
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stat cards: 3 per riga minimo */
    .prev-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: .5rem !important;
    }
    .prev-stat-card { padding: .75rem .5rem !important; }
    .prev-stat-value { font-size: 1.4rem !important; }

    /* Lista preventivi: righe griglia → stack */
    [style*="grid-template-columns:auto 1fr auto auto auto"] {
        grid-template-columns: 1fr !important;
    }

    /* Dettaglio preventivo: pannello + sidebar → colonna */
    [style*="grid-template-columns:1fr 320px"] {
        grid-template-columns: 1fr !important;
    }

    /* Simulatore economico: 5 colonne → 2 */
    [style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tabella righe preventivo scrollabile */
    .prev-table-wrap { overflow-x: auto !important; }
    .prev-righe-table { min-width: 600px; }
}

/* ══════════════════════════════════════
   6. LISTINO ACQUISTI
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .listino-wrap {
        grid-template-columns: 1fr !important;
    }
    /* Colonna filtri: nasconde su mobile (accessibile via toggle) */
    .listino-filtri {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ══════════════════════════════════════
   7. SISTEMA — salute, credenziali, ecc.
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Container card salute */
    .salute-grid,
    .container-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tab sistema scrollabili */
    .sistema-tabs,
    [class*="tab-nav"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
    }
    [class*="tab-nav"] a,
    [class*="tab-nav"] button {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Colonne credenziali */
    .credenziali-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════
   8. RENDICONTAZIONE
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .rend-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .rend-main-grid { grid-template-columns: 1fr !important; }
    .commessa-detail-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════
   9. PRODUZIONE CNC / IoT
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .cnc-machines-grid { grid-template-columns: 1fr !important; }
    .iot-devices-grid  { grid-template-columns: 1fr !important; }
    .machine-stats     { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════
   10. MAGAZZINO
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .magazzino-stats  { grid-template-columns: repeat(2, 1fr) !important; }
    .articoli-grid    { grid-template-columns: 1fr !important; }
    .movimenti-filter { flex-direction: column !important; }
    .movimenti-filter select,
    .movimenti-filter input { width: 100% !important; }
}

/* ══════════════════════════════════════
   11. FORM — input touch-friendly
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="search"],
    select, textarea {
        min-height: 42px;
        font-size: 16px !important; /* previene zoom su iOS */
    }

    /* Bottoni azione: full width su mobile */
    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════
   12. MODAL — bottom sheet su mobile
   ══════════════════════════════════════ */
@media (max-width: 600px) {
    .modal-dialog {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ══════════════════════════════════════
   13. BOTTOM NAV — aggiunta Agenda
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Garantisce padding bottom per non coprire contenuto */
    .main-content { padding-bottom: 80px !important; }
}