/* =========================================================
   TACHIREAD — MOBILE UNIVERSALE V1 (2026-09-12)
   ---------------------------------------------------------
   Scopo: applicare il layout da telefono in base al dispositivo,
   non alla sola larghezza CSS. In landscape un telefono moderno
   puo' superare 900/1000px e venire altrimenti scambiato per tablet/PC.

   La classe html.tr-phone viene impostata da app.js.
   Il portrait gia' funzionante resta invariato; qui si normalizza
   soprattutto il landscape dei telefoni.
   ========================================================= */

/* Viewport mobile reale e nessun overflow orizzontale accidentale. */
html.tr-phone,
html.tr-phone body,
html.tr-phone body.app-page #app-online {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

html.tr-phone body.app-page #app-online {
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   TELEFONO ORIZZONTALE — vale per Pixel, iPhone, Xiaomi, ecc.
   Non dipende da una larghezza massima: basta essere un telefono
   riconosciuto e avere orientamento landscape.
   ========================================================= */
@media (orientation: landscape) {
    html.tr-phone body.app-page #app-online {
        padding: 58px 8px calc(84px + env(safe-area-inset-bottom)) !important;
    }

    html.tr-phone body.app-page #app-online .section-title.app-logo-title {
        display: none !important;
    }

    html.tr-phone body.app-page #app-online .panel {
        min-height: 0 !important;
    }

    /* Il pannello parametri cresce col contenuto e non taglia nulla. */
    html.tr-phone body.app-page #app-online #paramsPanel.params-panel.param-slider,
    html.tr-phone body.app-page #app-online #paramsPanel.params-panel.param-slider.personal-open {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    /* Su telefono niente slider orizzontale da 200%: una pagina alla volta. */
    html.tr-phone body.app-page #app-online #paramsPanel .params-slide-track,
    html.tr-phone body.app-page #app-online #paramsPanel.personal-open .params-slide-track {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        transition: none !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-page {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel:not(.personal-open) .params-page-main {
        display: block !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel:not(.personal-open) .params-page-extra {
        display: none !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel.personal-open .params-page-main {
        display: none !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel.personal-open .params-page-extra {
        display: block !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-page-main {
        padding: 12px 58px 16px 14px !important;
    }

    /* Header parametri: titolo sopra; Numero + Tempo sulla seconda riga. */
    html.tr-phone body.app-page #app-online #paramsPanel .params-head {
        display: grid !important;
        grid-template-columns:
            42px
            max-content
            82px
            max-content
            190px !important;
        grid-template-rows: 44px 42px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px 10px !important;
        align-items: center !important;
        margin: 0 0 14px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > .icon {
        position: static !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        justify-self: start !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > h3 {
        position: static !important;
        grid-column: 2 / -1 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 54px 0 0 !important;
        font-size: clamp(16px, 2.7vw, 22px) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > label:not(.label-info) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > #numero {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > .label-info {
        grid-column: 4 !important;
        grid-row: 2 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > #tempoAutomaticoParole {
        grid-column: 5 !important;
        grid-row: 2 !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        height: 40px !important;
        padding: 0 66px 0 14px !important;
        box-sizing: border-box !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head label,
    html.tr-phone body.app-page #app-online #paramsPanel .params-head input,
    html.tr-phone body.app-page #app-online #paramsPanel .params-head select {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head label {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head #numero {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        height: 40px !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head .label-info {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head .info-dot {
        flex: 0 0 auto !important;
    }

    /* Badge PRO: stessa cella del menu Fisso e mai fuori viewport. */
    html.tr-phone body.app-page #app-online #paramsPanel .params-head
    > .plan-gate-control-badge[data-for="tempoAutomaticoParole"] {
        grid-column: 5 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        align-self: center !important;
        position: relative !important;
        z-index: 3 !important;
        margin: 0 30px 0 0 !important;
        pointer-events: none !important;
        white-space: nowrap !important;
    }

    /* Tooltip centrato nel viewport: non esce lateralmente. */
    html.tr-phone body.app-page #app-online #paramsPanel .params-head .info-tooltip {
        position: fixed !important;
        top: 68px !important;
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        transform: none !important;
        z-index: 99999999 !important;
    }

    /* Righe principali: sempre fluide, niente misure desktop ereditate. */
    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
        margin: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows .param-row {
        display: grid !important;
        grid-template-columns: 30px minmax(150px, 1fr) 90px 30px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows .param-row > span,
    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows .param-row > label,
    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows .param-row > input,
    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows .param-row > small {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows .param-row > input {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: 38px !important;
        box-sizing: border-box !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-main-rows .param-row > label {
        min-width: 0 !important;
        white-space: normal !important;
    }

    /* Ordine parole su una riga propria: nessun Xiaomi/iPhone puo' tagliarlo. */
    html.tr-phone body.app-page #app-online #paramsPanel .param-row-with-order {
        grid-template-columns: 30px minmax(150px, 1fr) 90px 30px !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .param-order-inline {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 30px minmax(150px, 1fr) minmax(150px, 220px) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
        justify-self: stretch !important;
        margin: 6px 0 0 !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .param-order-inline label {
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .param-order-inline select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 220px !important;
        height: 38px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Freccia personalizzazione sempre dentro al pannello. */
    html.tr-phone body.app-page #app-online #paramsPanel .param-slide-btn {
        top: 10px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20 !important;
    }

    html.tr-phone body.app-page #app-online #btnApriPersonalizzazione {
        right: 10px !important;
    }

    html.tr-phone body.app-page #app-online #btnChiudiPersonalizzazione {
        left: 10px !important;
    }

    /* Personalizzazione in landscape: due colonne se c'e' spazio. */
    html.tr-phone body.app-page #app-online #paramsPanel .params-page-extra {
        padding: 12px 58px 18px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-extra-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 22px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .extra-control,
    html.tr-phone body.app-page #app-online #paramsPanel .extra-control select {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Avvia / Reset sempre entro la larghezza visibile. */
    html.tr-phone body.app-page #app-online .bottom-actions {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        margin: 12px auto calc(16px + env(safe-area-inset-bottom)) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html.tr-phone body.app-page #app-online .bottom-actions button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
}

/* Landscape molto stretto (vecchi telefoni / split-screen). */
@media (orientation: landscape) and (max-width: 740px) {
    html.tr-phone body.app-page #app-online #paramsPanel .params-page-main {
        padding-right: 50px !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head {
        grid-template-columns: 38px minmax(90px, 1fr) 72px minmax(90px, 1fr) !important;
        grid-template-rows: 40px 40px 40px !important;
        gap: 7px 8px !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > .icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > h3 {
        grid-column: 2 / -1 !important;
        grid-row: 1 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > label:not(.label-info) {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > #numero {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > .label-info {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head > #tempoAutomaticoParole {
        grid-column: 3 / 5 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html.tr-phone body.app-page #app-online #paramsPanel .params-head
    > .plan-gate-control-badge[data-for="tempoAutomaticoParole"] {
        grid-column: 3 / 5 !important;
        grid-row: 3 !important;
    }
}