/*
 * InfissiProduction — Mobile Responsive Overrides
 * Step 16: ottimizzazioni per viewport 360-430px (Android)
 * Breakpoint principale: 768px
 */

/* =========================================================
   TOUCH TARGETS — tutti i bottoni min 44px
   ========================================================= */
@media (max-width: 768px) {
    .ip-btn, .filter-tab, .nav-item, .settings-btn,
    .logout-btn, .ip-input, select.ip-select {
        min-height: 44px;
    }

    /* Bottoni azione nelle card: full width su mobile */
    .ip-btn-sm {
        min-height: 40px;
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* =========================================================
   GLOBAL PAGE LAYOUT
   ========================================================= */
@media (max-width: 768px) {
    .ip-hero-row {
        grid-template-columns: 1fr !important;
    }

    .ip-hero-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ip-hero-actions .ip-btn {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    /* Griglia 2 colonne → 1 colonna */
    .stat-grid-2,
    .orari-layout {
        grid-template-columns: 1fr !important;
    }

    .stat-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================================
   PRODUZIONE — card e tab fasi
   ========================================================= */
@media (max-width: 768px) {
    .prod-grid {
        grid-template-columns: 1fr !important;
    }

    .prod-card {
        padding: 1rem !important;
    }

    /* Tab fasi: scroll orizzontale invece di wrap */
    .filter-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.3rem;
        gap: 0.35rem !important;
    }

    .filter-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* KPI sidebar → riga sopra le tab */
    .prod-kpi {
        width: 100%;
    }

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

    /* Azioni sulla card: stack verticale */
    .prod-card-actions {
        flex-direction: column;
        gap: 0.4rem;
    }

    .prod-card-actions .ip-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   MONTAGGIO
   ========================================================= */
@media (max-width: 768px) {
    .mont-kpis {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }

    .mont-card-actions {
        flex-direction: column;
        gap: 0.4rem;
    }

    .mont-card-actions .ip-btn {
        width: 100%;
        justify-content: center;
    }

    /* Date picker pianificazione: full width */
    .mont-pianifica-form {
        flex-direction: column;
        gap: 0.6rem;
    }

    .mont-pianifica-form input,
    .mont-pianifica-form .ip-btn {
        width: 100%;
    }
}

/* =========================================================
   MATERIALI
   ========================================================= */
@media (max-width: 768px) {
    /* Form ricezione: stack verticale */
    .mat-ricevi-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .mat-ricevi-row .ip-btn {
        width: 100%;
    }

    /* Lista materiali: card invece di riga */
    .mat-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.6rem;
    }

    .mat-item-actions {
        width: 100%;
        display: flex;
        gap: 0.4rem;
    }

    .mat-item-actions .ip-btn {
        flex: 1;
        justify-content: center;
    }
}

/* =========================================================
   COMMESSA DETTAGLIO — modal full screen
   ========================================================= */
@media (max-width: 768px) {
    /* Modal a full screen */
    .cd-modal-overlay {
        align-items: flex-end !important;
    }

    .cd-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 92vh !important;
    }

    /* Riga info: wrap */
    .cd-riga-meta {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Bottoni riga: wrap */
    .cd-riga-actions {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .cd-riga-actions .ip-btn {
        flex: 1 1 auto;
        min-width: 80px;
        justify-content: center;
        font-size: 0.78rem;
    }
}

/* =========================================================
   COMMESSE LIST
   ========================================================= */
@media (max-width: 768px) {
    .comm-filter-grid {
        grid-template-columns: 1fr !important;
    }

    /* Card commessa: nasconde colonne secondarie */
    .comm-card-meta {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* =========================================================
   STATISTICHE — modal full screen
   ========================================================= */
@media (max-width: 768px) {
    .stat-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .stat-modal,
    .stat-modal-wide {
        max-width: 100% !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 90vh !important;
    }

    .stat-trend-header-ext,
    .stat-trend-row-ext {
        grid-template-columns: 70px 40px 40px 45px 45px !important;
        font-size: 0.75rem !important;
    }
}

/* =========================================================
   ADMIN PAGINE (utenti, categorie, orari)
   ========================================================= */
@media (max-width: 768px) {
    .admin-users-form-grid {
        grid-template-columns: 1fr !important;
    }

    .cat-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cat-form-row .ip-btn {
        width: 100%;
    }

    .cat-row {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .cat-row-actions {
        width: 100%;
        margin-left: 0 !important;
    }

    .cat-row-actions .ip-btn {
        flex: 1;
    }
}

/* =========================================================
   INPUT / FORM GLOBAL
   ========================================================= */
@media (max-width: 768px) {
    /* Previene zoom automatico iOS/Android su focus */
    input.ip-input,
    select.ip-select,
    textarea.ip-input {
        font-size: 16px !important;
    }

    .ip-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Modal generici: full screen dal basso */
    .ip-modal-overlay {
        align-items: flex-end !important;
    }

    .ip-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 92vh !important;
    }
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
@media (max-width: 768px) {
    .ip-page h1 { font-size: 1.6rem !important; }
    .ip-eyebrow { font-size: 0.65rem !important; }
}