/* ============================================================
   DataTable JOORNA — comportamento unico di tutte le tabelle
   ------------------------------------------------------------
   Solo CSS (owner 9-ott-2026: niente ricalcoli dal vivo).
   - Scorre la PAGINA, non l'area righe: la tabella è alta quanto le
     sue righe (25 per pagina di partenza, AppServiceProvider) e la
     paginazione sta in fondo alla tabella.
   - Da 1280px la riga dei titoli resta ferma sotto la topbar mentre la
     pagina scorre: contenitore e area righe non tagliano più in
     "hidden"/"auto" (che fermerebbero lo sticky) ma in "clip".
   - Sotto i 1280px le colonne che non ci stanno scorrono in
     orizzontale dentro la tabella (la pagina non si allarga); lì la
     riga dei titoli scorre con la pagina.
   - Colonna Azioni ferma a destra, con un filetto che la separa.
   - Icone delle azioni sempre su una riga: misure e colori in
     public/css/actions.css (.jo-row-actions).
   Escluse: vista Card (.jo-ta-cards, le righe diventano card) e la
   board a colonne dei Lead (.jo-lb, ha il suo scorrimento).
   ============================================================ */

td.fi-ta-actions-cell {
    width: 1%;
    white-space: nowrap;
}

/* ── Riga dei titoli ferma sotto la topbar (pagina che scorre) ── */
@media (min-width: 1280px) {
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-ctn,
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-ctn > .fi-ta-content {
        overflow: clip;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-content > table.fi-ta-table > thead > tr > th {
        top: var(--jo-topbar-h, 64px);
    }

    /* Tabelle nei modali e nei campi di form: titoli in cima al loro riquadro. */
    :is(.fi-modal, .fi-fo-component-ctn) .fi-ta:not(.jo-ta-cards) .fi-ta-content > table.fi-ta-table > thead > tr > th {
        top: 0;
    }
}

/* ── Tabelle che stanno nello schermo (da 1280px) ────────────
   Con la riga dei titoli ferma la tabella non può scorrere di lato:
   le colonne si stringono, i testi lunghi finiscono coi puntini (testo
   intero nel tooltip, ui-standard.js) e i titoli vanno su due righe. */
@media (min-width: 1280px) {
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table {
        width: 100%;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell):not(.fi-ta-selection-cell) {
        max-width: 15rem;
        min-width: 0 !important;
        overflow: hidden;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) * {
        min-width: 0 !important;
        max-width: 100%;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) :is(.fi-ta-text-item-label, .fi-ta-text-description, .truncate, span, p, a) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > thead > tr > th:not(:last-child):not(.fi-ta-selection-cell) {
        max-width: 15rem;
        min-width: 0 !important;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > thead > tr > th:not(:last-child) * {
        white-space: normal !important;
        min-width: 0 !important;
    }

    /* Stato col pallino e valori che si cambiano dalla cella (Stato, In
       carico a): si stringono fino al nome breve, mai "Nuov" o "Assegı"
       (audit 12-ott-2026). Stessi :not() della regola sopra, che sennò vince. */
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell):not(.fi-ta-selection-cell):has(.jo-cell-status) {
        min-width: 6.5rem !important;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell):not(.fi-ta-selection-cell):has(.jo-cell-menu-btn) {
        min-width: 9rem !important;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:has(:is(.jo-cell-menu-btn, .jo-cell-status)) .fi-ta-text {
        flex: 1 1 auto;
    }

    /* Se manca ancora qualche pixel lo stato va a capo ("Ha / prenotato"),
       mai coi puntini: è il dato principale della cella. */
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-cell-status,
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-cell-status span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* ...e la colonna non scende sotto la parola più lunga ("Programmata"). */
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-cell-status {
        min-width: min-content !important;
    }

    /* Titoli di colonna: a capo fra le parole in modo equilibrato. */
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > thead > tr > th:not(:last-child) .jo-colh > span:first-child {
        text-wrap: balance;
    }
}

/* Schermi da 1280 a 1439px (portatili da 13–14"): con la sidebar aperta
   Lead, Preventivatore, Automazioni, Campagne WhatsApp, Voucher, Richieste
   ospiti e Schede hotel sforavano di 25–160px (audit 12-ott-2026). Margini
   delle celle più stretti, imbuto e freccia d'ordinamento più piccoli (anche
   nascosti tengono il loro posto), colonne del Preventivatore più strette. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > thead > tr > th.fi-ta-header-cell {
        padding-inline: 6px;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell):not(.fi-ta-selection-cell) .fi-ta-col-wrp .px-3 {
        padding-inline: 6px;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table .fi-ta-header-cell-sort-icon {
        width: 14px;
        height: 14px;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table .jo-colf-btn {
        width: 16px;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell):not(.fi-ta-selection-cell):has(.jo-cell-menu-btn) {
        min-width: 8rem !important;
    }

    html .fi-page .fi-ta:not(.jo-ta-cards) .jo-cell-menu-btn {
        gap: 2px;
    }

    html .fi-page .fi-ta:not(.jo-ta-cards) .jo-cell-menu-chevron {
        flex-basis: 12px;
        width: 12px;
        height: 12px;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) :is(.jo-qd-cell--client, .jo-qd-cell--request) {
        width: 122px;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .jo-qd-cell--quote {
        width: 115px;
    }

    /* Date della richiesta: vanno a capo dopo la freccia, mai tagliate. */
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-qd-cell--request .jo-qd-title {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-qd-cell--request .jo-qd-arrow,
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-q-dates .jo-q-arrow {
        flex: none;
        min-width: 14px !important;
    }

    /* Stesso a capo per il soggiorno delle Prenotazioni (arrivo → partenza · notti). */
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-q-dates {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-q-proposal .jo-q-clamp {
        max-width: 9.5rem;
    }

    /* Preventivi ▸ colonna Preventivo: scadenza e autore vanno a capo
       ("Prenotato · n. JRN-…") invece di allargare la colonna. */
    .fi-page .fi-ta:not(.jo-ta-cards) .fi-ta-table > tbody > tr > td:not(.fi-ta-actions-cell) .jo-q-cell :is(.jo-q-expiry, .jo-q-faint) {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ── Intestazioni sticky ─────────────────────────────────── */
:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    /* Fondo pieno: le righe passano SOTTO l'intestazione. --jo-ui-soft
       in dark è trasparente, quindi si posa sulla superficie. */
    background: linear-gradient(var(--jo-ui-soft), var(--jo-ui-soft)), var(--jo-ui-surface);
    box-shadow: inset 0 -1px 0 var(--jo-ui-line);
}

/* Gruppi di colonne (due righe di intestazione): la seconda sotto la prima. */
:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table > thead > tr:first-child:not(:last-child) > th {
    position: static;
}

/* ── Colonna Azioni sticky a destra ──────────────────────── */
:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table > tbody > tr > td.fi-ta-actions-cell:last-child,
:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table:has(> tbody > tr > td.fi-ta-actions-cell:last-child) > thead > tr > th:last-child {
    position: sticky;
    right: 0;
}

:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table > tbody > tr > td.fi-ta-actions-cell:last-child {
    z-index: 2;
    /* Stesso fondo della riga (hover e selezione compresi), ma pieno. */
    background: linear-gradient(var(--jo-dt-row, transparent), var(--jo-dt-row, transparent)), var(--jo-ui-surface);
}

:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table:has(> tbody > tr > td.fi-ta-actions-cell:last-child) > thead > tr > th:last-child {
    z-index: 4;
}

/* Menu a tre puntini aperto: la sua cella sta sopra le celle Azioni delle
   righe sotto e sopra l'intestazione, altrimenti il menu ci finisce sotto. */
:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table > tbody > tr > td.fi-ta-actions-cell:last-child:has(.fi-dropdown-panel:not([style*='display: none'])) {
    z-index: 5;
}

.fi-ta-ctn .fi-ta-table > tbody > tr.fi-ta-row:hover {
    --jo-dt-row: rgb(124 92 203 / 2.5%);
}

/* Filetto che separa la colonna Azioni (ferma a destra). */
:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table > tbody > tr > td.fi-ta-actions-cell:last-child,
:is(.fi-ta:not(.jo-ta-cards)) .fi-ta-content > table.fi-ta-table:has(> tbody > tr > td.fi-ta-actions-cell:last-child) > thead > tr > th:last-child {
    box-shadow: inset 1px 0 0 var(--jo-ui-line);
}

/* Righe con un dettaglio: tutta la riga è cliccabile (data-table.js). */
.fi-ta-row:has(td .fi-ta-col-wrp > a[href]) { cursor: pointer; }

/* Colonne ridimensionate dall'utente (table-columns.js, owner 7-ott-2026):
 * larghezze fisse, il contenuto si adatta alla colonna (puntini o a capo)
 * invece di allargarla; la tabella resta piena, senza vuoti. */
html .fi-ta-table.jo-cols-sized {
    table-layout: fixed;
}
html .fi-ta-table.jo-cols-sized > tbody > tr > td:not(.fi-ta-actions-cell) {
    overflow: hidden;
}
html .fi-ta-table.jo-cols-sized > tbody > tr > td :is(.jo-qd-cell, .fi-ta-col-wrp, .fi-ta-text) {
    width: auto;
    min-width: 0;
    max-width: 100%;
}
html .fi-ta-table.jo-cols-sized .jo-qd-cell > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html .fi-ta-table.jo-cols-sized > tbody > tr > td:not(.fi-ta-actions-cell) > * {
    padding-right: 8px;
}