/* ============================================================================================
   Area clienti (portale del trasportatore).

   Tutto sotto `.pt`, classi `pt-*`: stessa disciplina di landing.css/`lp-*`. Il motivo è che
   questo foglio convive con app.css, che porta la griglia fissa da 232px della scrivania — senza
   un prefisso, una regola qui cambierebbe l'applicazione dell'agenzia.

   Mobile-first sul serio, non «responsive per completezza»: il cliente apre il portale dal
   telefono, in piazzale, per controllare un permesso prima di partire. Da 700px in su la
   navigazione torna in alto; sotto, va in fondo allo schermo dove sta il pollice.

   Token e componenti riusati da tokens.css / app.css / extras.css: .btn, .badge-*, .spinner,
   .tabs, .sintesi-*, .quadro-*, .fin-*. Qui c'è solo ciò che il portale ha in più.
   ============================================================================================ */

.pt {
    /* 100dvh e non 100vh: su iOS la barra degli indirizzi si ritrae e con vh la pagina
       «salta» di 60px a ogni scroll. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
    color: var(--fg-1);
}

.pt-boot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
}

/* ── Testata ─────────────────────────────────────────────────────────────── */

.pt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-1);
}

/* Il nome dell'AGENZIA in grande: il cliente sta entrando in casa di qualcuno, e deve vedere
   subito di chi. Il proprio nome sotto, più piccolo — serve a confermare, non a informare. */
.pt-agency {
    font-family: var(--font-display);
    font-size: var(--fs-5);
    font-weight: 600;
    line-height: 1.15;
}

.pt-customer {
    font-size: var(--fs-2);
    color: var(--fg-3);
    margin-top: 2px;
}

.pt-top-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.pt-esci {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px: sotto questa misura un bersaglio tattile si sbaglia, e questo è il bottone che
       chiude la sessione — sbagliarlo è fastidioso in entrambe le direzioni. */
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-2);
    background: #fff;
    color: var(--fg-2);
    cursor: pointer;
}

.pt-esci:hover { background: var(--bg-sunken); }

/* ── Navigazione ─────────────────────────────────────────────────────────── */

.pt-nav {
    display: flex;
    gap: var(--sp-1);
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-1);
    /* Se un domani le voci diventassero cinque, scorrono invece di comprimersi a icone mute. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pt-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    color: var(--fg-2);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.pt-nav-item.active {
    color: var(--brand-1);
    border-bottom-color: var(--brand-1);
    font-weight: 600;
}

/* ── Corpo ───────────────────────────────────────────────────────────────── */

.pt-main {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--sp-5) 16px;
    /* Spazio per la tab bar sotto i 700px, più la tacca del telefono. */
    padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.pt-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    padding: var(--sp-5);
}

.pt-card-centro { text-align: center; max-width: 520px; margin: var(--sp-6) auto; }

.pt-muted { color: var(--fg-3); }

/* ── Recapiti ────────────────────────────────────────────────────────────── */

.pt-contatti { list-style: none; margin: var(--sp-4) 0 0; padding: 0; text-align: left; }

.pt-contatti li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-2);
}

.pt-contatti-et {
    min-width: 128px;
    color: var(--fg-3);
    font-size: var(--fs-2);
}

/* I recapiti sono link veri: tel: e mailto:. Su un telefono un numero che non si può toccare
   è un numero da ricopiare a mano. */
.pt-contatti a { color: var(--brand-1); text-decoration: none; min-height: 24px; }
.pt-contatti a:hover { text-decoration: underline; }

/* ── Chiedi all'AI ───────────────────────────────────────────────────────── */

/* La conversazione riempie lo schermo e scorre DENTRO di sé. Se allungasse la pagina, la casella
   di invio finirebbe sotto la piega e su un telefono si scriverebbe alla cieca.

   Il numero è l'ingombro fisso che sta sopra e sotto: testata (~77px) + navigazione (49px) + il
   padding di .pt-main (24+24). Sta scritto qui perché è l'unico posto dove serve — il resto del
   portale scorre insieme alla pagina, come deve. */
.pt-chat {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 200px);
    min-height: 340px;
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    overflow: hidden;
}

/* Dentro un tab la chat non e' sola sullo schermo: sopra ci sono l'intestazione del permesso (o
   del trasporto) e la riga dei tab, e con l'altezza piena la casella di invio finirebbe comunque
   sotto la piega — il difetto che tutto questo blocco esiste per evitare. */
.pt-chat-tab { height: calc(100dvh - 330px); min-height: 300px; }

/* Le conversazioni passate stanno CHIUSE: chi arriva qui vuole scrivere, non sfogliare, e sul
   telefono una lista aperta si mangia mezzo schermo prima della prima domanda. */
.pt-conversazioni { margin-bottom: var(--sp-3); }

.pt-conversazioni > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-3);
    cursor: pointer;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-2);
    background: var(--bg-surface);
    font-weight: 600;
}

.pt-conversazioni > summary span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.pt-conv-lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) 0 0;
}

.pt-conv {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-2);
    background: var(--bg-surface);
}

.pt-conv.is-on { border-color: var(--brand-1); }

.pt-conv-apri {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    /* 44px: è il bersaglio minimo per un dito, e queste righe si toccano dal telefono. */
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pt-conv-titolo {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-conv-data { font-size: var(--fs-1); color: var(--fg-3); }

.pt-conv-conferma { display: inline-flex; gap: var(--sp-1); padding-right: var(--sp-2); }

.pt-conv .icon-btn { margin-right: var(--sp-2); }

/* ── Telefono: la navigazione va in fondo ────────────────────────────────── */

@media (max-width: 699px) {
    .pt-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        border-top: 1px solid var(--border-1);
        border-bottom: none;
        padding: 0 0 env(safe-area-inset-bottom);
        justify-content: space-around;
        overflow-x: visible;
    }

    .pt-nav-item {
        flex-direction: column;
        gap: 2px;
        flex: 1;
        justify-content: center;
        min-height: 56px;
        font-size: var(--fs-1);
        border-bottom: none;
        border-top: 2px solid transparent;
    }

    .pt-nav-item.active { border-top-color: var(--brand-1); border-bottom-color: transparent; }

    .pt-main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    /* Qui la navigazione e' fissa in fondo (56px + tacca) e .pt-main porta gia' il suo
       padding: l'ingombro da sottrarre e' un altro. */
    .pt-chat { height: calc(100dvh - 250px - env(safe-area-inset-bottom)); }
    .pt-chat-tab { height: calc(100dvh - 360px - env(safe-area-inset-bottom)); }

    .pt-agency { font-size: var(--fs-4); }

    /* Sul telefono l'etichetta «Esci» non serve: l'icona è universale e lo spazio no. */
    .pt-esci-testo { display: none; }
}

/* Le tabelle del quadro «quando si passa» non si comprimono: scorrono. Comprimerle manderebbe
   ogni nota a capo tre volte e renderebbe illeggibile proprio la colonna che si legge. */
@media (max-width: 559px) {
    .pt .quadro-wrap,
    .pt .fin-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pt .quadro-tab { min-width: 560px; }
}

/* ── Pagine ──────────────────────────────────────────────────────────────── */

.pt-h1 {
    font-family: var(--font-display);
    font-size: var(--fs-6);
    font-weight: 600;
    margin: 0 0 var(--sp-4);
    line-height: 1.15;
}

.pt-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-4);
}

.pt-filtri .form-input { flex: 1 1 220px; min-height: 44px; }

.pt-chips { display: flex; gap: var(--sp-1); }

.pt-chip {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-1);
    border-radius: 999px;
    background: #fff;
    color: var(--fg-2);
    cursor: pointer;
    white-space: nowrap;
}

.pt-chip.is-on {
    background: var(--brand-1);
    border-color: var(--brand-1);
    color: #fff;
    font-weight: 600;
}

/* ── Card di elenco ──────────────────────────────────────────────────────── */

.pt-lista { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Card e non righe di tabella: a sei colonne su un telefono si legge un dato per volta
   scorrendo in orizzontale, che è il modo peggiore di leggere una scadenza. */
.pt-permesso {
    display: block;
    padding: var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    text-decoration: none;
    color: inherit;
}

a.pt-permesso:hover { border-color: var(--brand-1); }

.pt-permesso-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.pt-permesso-ente { font-weight: 600; }
.pt-permesso-num { font-family: var(--font-mono); font-size: var(--fs-2); margin-top: 4px; }

.pt-permesso-tratta,
.pt-permesso-pratica {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-3);
    font-size: var(--fs-2);
    margin-top: 6px;
}

/* ── Dettaglio ───────────────────────────────────────────────────────────── */

.pt-indietro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    color: var(--fg-3);
    text-decoration: none;
    font-size: var(--fs-2);
}

.pt-indietro :first-child { transform: rotate(180deg); }

.pt-dettaglio-hd { margin-bottom: var(--sp-4); }

.pt-dettaglio-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    color: var(--fg-2);
}

.pt-dettaglio-tratta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-3);
    margin-top: 6px;
}

.pt-limiti { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }

.pt-limite {
    padding: 4px 10px;
    background: var(--bg-sunken);
    border-radius: var(--radius-2);
    font-size: var(--fs-2);
}

/* L'azione resta a portata mentre il cliente scorre le condizioni: è quello per cui è entrato. */
.pt-azione-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--sp-3) 0;
    margin-top: var(--sp-3);
    background: linear-gradient(var(--bg-page) 70%, transparent);
}

.pt-azione-sticky .btn { min-height: 44px; }

/* ── Prescrizioni ────────────────────────────────────────────────────────── */

/* Chiuse per default: un permesso autostradale ne ha centinaia, e aprirle tutte consegnerebbe
   al cliente lo stesso muro di testo da cui la piattaforma dovrebbe salvarlo. */
.pt-gruppo {
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    margin-bottom: var(--sp-3);
}

.pt-gruppo > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    min-height: 44px;
    cursor: pointer;
}

.pt-prescrizioni { margin: 0; padding: 0 var(--sp-5) var(--sp-4) var(--sp-6); }
.pt-prescrizioni li { margin-bottom: var(--sp-2); line-height: 1.5; }

/* ── Selettore azienda, variante chiara ──────────────────────────────────── */
/*
   Il CompanySwitcher nasce per il fondo della sidebar scura della scrivania: per questo il suo
   menu si apre verso l'alto (`bottom: 100%`) ed è dipinto sui blu del pannello. Nella testata
   del portale — in cima, e bianca — quelle due scelte diventano due difetti: il menu esce dallo
   schermo verso l'alto e diventa irraggiungibile, e il bottone è una pastiglia scura in mezzo
   al bianco. Qui sotto `.pt` si ribaltano entrambe.

   Nota: nella scrivania quel componente non c'è più — il cambio azienda è finito dentro il menu
   utente della testata, perché in fondo a una colonna alta 100vh spariva sotto il bordo dello
   schermo. Il portale è rimasto l'unico a usarlo, e le regole scure qui sopra sono la base che
   queste righe ridipingono. Il giorno in cui si volesse semplificare, si semplifica lì.
*/

.pt .side-switch { padding: 0; }

.pt .side-switch__btn {
    min-height: 44px;
    background: #fff;
    border-color: var(--border-1);
    color: var(--fg-1);
    font-size: var(--fs-2);
    /* Nella sidebar occupa tutta la colonna; qui deve stare stretto accanto a «Esci». */
    width: auto;
    max-width: 240px;
}

.pt .side-switch__btn:hover { background: var(--bg-sunken); border-color: var(--border-1); }
.pt .side-switch__btn svg { color: var(--fg-3); }

.pt .side-switch__menu {
    /* Verso il BASSO: è la correzione che conta. */
    top: calc(100% + 6px);
    bottom: auto;
    margin-bottom: 0;
    /* Ancorato a destra: il selettore sta sul bordo destro della testata, e un menu ancorato a
       sinistra uscirebbe dallo schermo dall'altra parte. */
    left: auto;
    right: 0;
    min-width: 240px;
    background: #fff;
    border-color: var(--border-1);
    box-shadow: var(--shadow-lg);
}

.pt .side-switch__opt { color: var(--fg-2); min-height: 44px; }
.pt .side-switch__opt:hover:not(:disabled) { background: var(--bg-sunken); color: var(--fg-1); }
.pt .side-switch__opt.is-current { color: var(--fg-1); font-weight: 600; }
.pt .side-switch__opt.is-current svg { color: var(--brand-1); }
.pt .side-switch__opt-role { color: var(--fg-3); }

/* Sul telefono la testata è stretta: il menu si allarga quanto serve senza sbordare. */
@media (max-width: 699px) {
    .pt .side-switch__btn { max-width: 150px; }
    .pt .side-switch__menu { min-width: min(280px, calc(100vw - 32px)); }
}