/* v99.90.8.2.45 — Gestionale leggibile sul telefono (iPhone e Android).
   Vale solo sugli schermi stretti (fino a 900 pixel: telefoni, anche in orizzontale).
   Sul computer non cambia niente: tutte le regole sono dentro la media query.
   1) barre in alto dentro lo schermo; 2) tabelle che scorrono in orizzontale;
   3) finestre a tutto schermo che scorrono; 4) griglie su una colonna;
   5) larghezze minime fisse tolte fuori dalle tabelle. */
@media (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* 1) Barre in alto: restano dentro lo schermo, senza testi superflui */
    .homepage-header,
    .module-fullscreen-header {
        height: auto;
        min-height: 52px;
        padding: 6px 8px !important;
        gap: 6px;
    }
    .homepage-header-center,
    .module-title-header,
    .module-breadcrumb,
    .homepage-logo span,
    #hpUserName,
    #moduleUserName,
    .module-fullscreen-header > div:last-child > div:not(.hp-dropdown) {
        display: none !important;
    }
    .homepage-header-left,
    .homepage-header-right,
    .module-fullscreen-header > div {
        flex: 0 1 auto;
        min-width: 0;
        gap: 6px !important;
    }
    .hp-env-badge {
        margin-right: 0 !important;
    }
    .btn-back-home {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap;
    }
    .module-mode .hamburger-btn {
        display: none !important;
    }
    .homepage-content {
        padding-top: 64px;
    }
    .module-mode .main-content {
        padding: 12px !important;
        padding-top: 64px !important;
    }

    /* 2) Tabelle: scorrono in orizzontale con il dito */
    .table-container,
    .report-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .truncate {
        max-width: none;
    }

    /* 3) Finestre: larghe quanto lo schermo, sopra la barra in alto, il contenuto scorre */
    .modal-overlay {
        padding: 6px !important;
        z-index: 1002;
    }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 94vh;
        max-height: calc(100dvh - 12px);
        margin: 0 !important;
    }
    .modal-body {
        padding: 12px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .modal-header,
    .modal-footer {
        padding: 10px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 4) Griglie a colonne fisse: una colonna */
    .dashboard-header-cards,
    .dash-two-col,
    .dash-kpi-grid,
    .anni-cards-grid,
    .form-row,
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="minmax(300px"] {
        grid-template-columns: 1fr !important;
    }

    /* 5) Larghezze minime piu' larghe dello schermo: tolte; le righe di filtri e pulsanti vanno a capo */
    [style*="min-width:300px"],
    [style*="min-width: 300px"],
    [style*="min-width:320px"],
    [style*="min-width: 320px"],
    [style*="min-width:420px"],
    [style*="min-width: 420px"],
    .filters select,
    .filters input {
        min-width: 0 !important;
    }
    .main-content select,
    .main-content input,
    .modal select,
    .modal input {
        max-width: 100%;
    }
    .main-content .btn,
    .modal .btn {
        white-space: normal;
    }
    .filters,
    .page-header,
    .main-content div[style*="display:flex"]:not([style*="column"]),
    .main-content div[style*="display: flex"]:not([style*="column"]),
    .modal-body div[style*="display:flex"]:not([style*="column"]),
    .modal-body div[style*="display: flex"]:not([style*="column"]) {
        flex-wrap: wrap;
    }
}

/* Telefoni molto stretti (iPhone SE e simili): pulsanti della barra in alto piu' compatti */
@media (max-width: 360px) {
    .btn-back-home {
        padding: 4px 5px;
        font-size: 12px;
    }
    .homepage-anno-btn {
        padding: 6px 8px;
    }
    .homepage-user-btn {
        padding: 2px !important;
        gap: 0 !important;
    }
}