/* ── Assistenza Tecnica — impianto responsive comune ─────────────────────
 *
 * Un unico file per i tre portali (admin, tecnico, clienti): il menu laterale
 * e le tabelle si comportano allo stesso modo dappertutto, e quando si cambia
 * una misura la si cambia in un posto solo.
 *
 * Le tre misure dello schermo:
 *   - da 1200px in su  → menu largo, con le scritte;
 *   - da 992 a 1199px  → menu stretto a sole icone (è la via di mezzo dove
 *                        prima le tabelle uscivano dallo schermo);
 *   - sotto i 992px    → menu a scomparsa (offcanvas di Bootstrap) che si
 *                        apre col pulsante in alto a sinistra.
 *
 * Il colore lo decide ogni portale con le variabili --menu-*.
 * ------------------------------------------------------------------------ */

:root {
    /* 220px e non 260: a 1200px di schermo il menu torna largo tutto insieme,
       e ogni pixel che si prende è un pixel che manca alla tabella. Con 260 la
       tabella a 1200px stava peggio che a 1050. */
    --menu-largo: 220px;
    --menu-icone: 68px;
}

/* ── Menu laterale ───────────────────────────────────────────────────────── */

.app-menu {
    /* colori predefiniti: ogni portale li sovrascrive */
    --menu-sfondo: #0d3c6e;
    --menu-sfondo-testata: #092d54;
    --menu-testo: #c8dff7;
    --menu-testo-tenue: #90caf9;
    /* larghezza del pannello quando è a scomparsa (telefono e tablet) */
    --bs-offcanvas-width: 260px;
}

/* Il colore sta sul contenitore interno e non sul <nav>: sopra i 992px
   Bootstrap impone `background-color: transparent !important` all'offcanvas,
   quindi un fondo messo sul <nav> sparirebbe. */
.app-menu-interno {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--menu-sfondo);
}

.app-menu-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--menu-sfondo-testata);
    padding: .5rem .75rem;
}

.app-menu-marchio {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .75rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .5px;
    text-decoration: none;
    min-width: 0;
}

.app-menu-marchio:hover { color: var(--menu-testo-tenue); }
.app-menu-marchio i { font-size: 1.25rem; flex-shrink: 0; }

.app-menu-voci {
    flex: 1;
    min-height: 0;
    padding: .75rem 0;
    overflow-y: auto;
}

.app-menu-sezione {
    color: var(--menu-testo-tenue);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1rem 1.5rem .25rem;
}

.app-menu-voce {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1.5rem;
    color: var(--menu-testo);
    text-decoration: none;
    font-size: .92rem;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.app-menu-voce:hover,
.app-menu-voce.attiva {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.app-menu-voce i {
    font-size: 1.15rem;
    opacity: .85;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.app-menu-piede {
    padding: .9rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: var(--menu-testo-tenue);
    font-size: .8rem;
}

/* Da 992px in su il menu è una colonna fissa a sinistra. */
@media (min-width: 992px) {
    .app-menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--menu-largo);
        z-index: 1035;
        display: flex;
        flex-direction: column;
    }
    .app-contenuto { margin-left: var(--menu-largo); }
}

/* Via di mezzo (portatili piccoli, tablet in orizzontale, finestre affiancate):
   il menu si stringe alle sole icone invece di rubare 260px alla tabella. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .app-menu { width: var(--menu-icone); }
    .app-contenuto { margin-left: var(--menu-icone); }

    .app-menu .app-menu-scritta { display: none; }

    .app-menu-testata { padding: .5rem .25rem; justify-content: center; }
    .app-menu-marchio { justify-content: center; gap: 0; padding: .7rem .25rem; }

    .app-menu-voce {
        justify-content: center;
        gap: 0;
        padding-left: .25rem;
        padding-right: .25rem;
    }
    .app-menu-voce i { font-size: 1.25rem; }

    /* L'etichetta di sezione diventa una riga di separazione */
    .app-menu-sezione {
        height: 1px;
        padding: 0;
        margin: .75rem .9rem .5rem;
        overflow: hidden;
        background: rgba(255, 255, 255, .18);
    }

    .app-menu-piede {
        padding: .75rem .25rem;
        text-align: center;
    }
    .app-menu-piede > .d-flex { justify-content: center; }
    .app-menu-piede .app-menu-scritta { display: none; }
}

/* Sotto i 992px comanda Bootstrap (.offcanvas-lg): il pannello scorre da
   sinistra sopra la pagina, con lo sfondo scurito e la chiusura col tocco. */
@media (max-width: 991.98px) {
    .app-contenuto { margin-left: 0; }
}

/* ── Barra in alto ───────────────────────────────────────────────────────── */

.app-barra {
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

.app-corpo {
    flex: 1;
    padding: 1.5rem 1rem;
}

@media (min-width: 768px) {
    .app-barra { padding: .6rem 1.5rem; }
    .app-corpo { padding: 1.75rem 1.5rem; }
}

/* Su telefono le briciole di pane mangiano la riga: si tiene solo l'ultima. */
@media (max-width: 575.98px) {
    .app-barra .breadcrumb { flex-wrap: nowrap; }
    .app-barra .breadcrumb-item:not(:last-child) { display: none; }
    .app-barra .breadcrumb-item + .breadcrumb-item::before { display: none; }
}

/* ── Tabelle ─────────────────────────────────────────────────────────────── */

/* Le colonne meno importanti si nascondono con le classi di Bootstrap
   (d-none d-md-table-cell e simili). Qui restano solo gli accorgimenti che
   Bootstrap non ha: niente testo spezzato lettera per lettera e larghezze
   massime sensate. */
.table td, .table th { vertical-align: middle; }

/* Il numero ticket non deve andare a capo: spezzato diventa "#TKT-2026-" e
   "9001" su due righe, che è illeggibile. In cambio va tenuto stretto. */
.col-numero { white-space: nowrap; font-size: .82rem; }

/* Nei riquadri affiancati della dashboard lo spazio è la metà: lì il numero
   ticket rinuncia anche al margine in più. */
.table-sm .col-numero { font-size: .75rem; padding-left: .5rem !important; }
.col-cliente { min-width: 140px; }
.col-titolo { max-width: 230px; }
.col-stretta { white-space: nowrap; }
.col-sla { min-width: 100px; }
.col-persona { max-width: 210px; }

/* Nella via di mezzo il titolo è la colonna che fa uscire la tabella dallo
   schermo: si accorcia lui, che tanto è già troncato con i puntini. */
@media (max-width: 1399.98px) {
    .col-titolo { max-width: 180px; }
}

@media (max-width: 991.98px) {
    .col-cliente { min-width: 110px; }
    .col-titolo { max-width: 130px; }
    .col-persona { max-width: 170px; }
}

/* Sotto il monitor grande le etichette lunghe («IN ATTESA CLIENTE») possono
   andare a capo: meglio due righe che una colonna da 160px che spinge il
   resto della tabella fuori dallo schermo. */
@media (max-width: 1399.98px) {
    td .badge[class*="badge-stato-"] { white-space: normal; }
}

/* I filtri a caselle: la casella e la sua etichetta non devono separarsi
   quando la riga va a capo. */
.filtri-stato .form-check {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.filtri-stato .form-check-input { margin: 0; flex-shrink: 0; }
.filtri-stato .form-check-label { margin: 0; cursor: pointer; }

/* ── Schede al posto della tabella (solo telefono) ───────────────────────── */

/* Sotto i 576px una tabella a otto colonne è illeggibile comunque la si
   stringa: gli elenchi lunghi diventano schede impilate. */
.elenco-schede { display: flex; flex-direction: column; }

.scheda-riga {
    display: block;
    padding: .8rem 1rem;
    border-bottom: 1px solid #e9ecef;
    text-decoration: none;
    color: inherit;
    background: #fff;
}
.scheda-riga:last-child { border-bottom: 0; }
.scheda-riga:active { background: #e8f0fe; }

.scheda-riga-allarme { background: #fdeced; }
.scheda-riga-attenzione { background: #fff8e6; }

.scheda-titolo {
    font-size: .9rem;
    font-weight: 600;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.scheda-riga .scheda-numero { font-weight: 700; font-size: .9rem; }
.scheda-riga .scheda-nota { font-size: .78rem; }

/* ── Etichette colorate (stato e priorità) ───────────────────────────────── */

/* Stesse identiche tinte di prima, ma scritte una volta sola: prima ogni
   template ripeteva dieci righe di `if` per colorare lo stesso riquadro.
   La prima regola è la rete di sicurezza: uno stato mai visto resta grigio
   invece di diventare un riquadro trasparente e illeggibile.
   ⚠️ Le regole sotto usano due classi (.badge.badge-stato-x) perché la rete
   di sicurezza è un selettore con attributo, che pesa di più di una classe
   sola: scritte con una classe sola verrebbero tutte grigie. */
.badge[class*="badge-stato-"],
.badge[class*="badge-priorita-"] { background-color: #6c757d; color: #fff; }

.badge.badge-stato-nuova { background-color: #0d6efd; color: #fff; }
.badge.badge-stato-assegnata { background-color: #ffc107; color: #000; }
.badge.badge-stato-in_corso { background-color: #0dcaf0; color: #000; }
.badge.badge-stato-in_attesa_cliente,
.badge.badge-stato-in_attesa_parti,
.badge.badge-stato-in_attesa_ricambi { background-color: #6c757d; color: #fff; }
.badge.badge-stato-pianificata,
.badge.badge-stato-assistenza_pianificata { background-color: #6610f2; color: #fff; }
.badge.badge-stato-risolta { background-color: #198754; color: #fff; }
.badge.badge-stato-chiusa { background-color: #212529; color: #fff; }
.badge.badge-stato-riaperta,
.badge.badge-stato-annullata { background-color: #dc3545; color: #fff; }
.badge.badge-stato-sconosciuto { background-color: #6c757d; color: #fff; }

.badge.badge-priorita-critica { background-color: #dc3545; color: #fff; }
.badge.badge-priorita-alta { background-color: #ffc107; color: #000; }
.badge.badge-priorita-media { background-color: #0dcaf0; color: #000; }
.badge.badge-priorita-bassa { background-color: #6c757d; color: #fff; }