/* ==========================================================================
   MODERAZIONE - SCHEDA DI REVISIONE A TUTTO SCHERMO su telefono
   (public/assets/css/admin-mod-mobile.css - caricato da admin.html)

   Segnalato dall'utente: "quando si pubblica il post, il modale con i contenuti
   per la moderazione deve essere fullscreen e leggibile... non vedo i bottoni".
   Misurato prima di questo foglio (WebKit 390x844, coda con 3 elementi):
     - ogni riga della coda, su mobile, diventa una colonna di 9 celle alta
       ~500px (la tabella "responsive" di admin.css);
     - il blocco Decisione e' l'ULTIMA cella: select a y=3271 e pulsante
       "Applica" a y=3336 (poi 3844, 4360) - cioe' 3-4 schermate piu' in basso;
     - "Applica" e' alto 25px: sotto il minimo toccabile.
   Qui: toccando una riga si apre la **scheda a tutto schermo** (riga `is-open`)
   con i dati leggibili e i comandi decisionali **agganciati in fondo**, sempre
   visibili e alti >=44px. Su schermo largo non cambia nulla.
   ========================================================================== */

@media (max-width: 720px) {

    /* Riga di coda = scheda apribile */
    #modRows tr { cursor: pointer; }

    /* ---------- Scheda a tutto schermo ---------- */
    #modRows tr.is-open {
        position: fixed;
        inset: 0;
        z-index: 1300;
        display: block;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: var(--mood-bg, #0f0f1a);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* spazio per la barra dei comandi agganciata in fondo */
        padding: 56px 0 calc(190px + env(safe-area-inset-bottom));
    }

    /* Il pulsante di chiusura lo mette admin-mod-mobile.js */
    #modRows tr.is-open .mod-review-close {
        position: fixed;
        top: calc(8px + env(safe-area-inset-top));
        right: 10px;
        z-index: 1301;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--mood-border, #2b2b3d);
        border-radius: 50%;
        background: var(--mood-bg-card, #181825);
        color: var(--mood-text, #eaeaf2);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    /* Intestazione della scheda: oggetto e autore in chiaro */
    #modRows tr.is-open td {
        display: block;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 0.95rem;
    }
    #modRows tr.is-open td::before {
        display: block;
        margin-bottom: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--mood-text-muted, #8b8b9e);
    }
    #modRows tr.is-open td:first-child {
        padding-top: 16px;
        font-size: 1.02rem;
        font-weight: 700;
    }
    #modRows tr.is-open td:first-child::before { content: none; }

    /* ---------- Comandi decisionali agganciati in fondo ----------
       Solo i comandi (menu, motivo, "Applica") stanno nella barra fissa: la riga
       "deciso da..." e "Dettagli analisi" restano nel contenuto che scorre, cosi' la
       barra e' bassa e non copre i dati della scheda. */
    #modRows tr.is-open .mod-dec {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1301;
        grid-template-columns: 1fr;
        grid-template-areas: "sel" "reason" "btn";
        gap: 8px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--mood-bg-card, #181825);
        border-top: 1px solid var(--mood-border, #2b2b3d);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    }
    #modRows tr.is-open .mod-dec > select,
    #modRows tr.is-open .mod-dec > .mod-reason {
        min-height: 44px;
        font-size: 0.95rem;
    }
    #modRows tr.is-open .mod-dec > select { grid-area: sel; }
    #modRows tr.is-open .mod-dec > .mod-reason { grid-area: reason; }
    #modRows tr.is-open .mod-dec > .admin-link-btn {
        grid-area: btn;
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 12px;
        background: var(--mood-primary, #6C5CE7);
        color: #fff;
        font-weight: 700;
        font-size: 0.95rem;
    }
    #modRows tr.is-open .mod-dec > .admin-link-btn:disabled {
        opacity: 0.5;
        background: var(--mood-bg-muted, #23233a);
        color: var(--mood-text-muted, #8b8b9e);
    }
    #modRows tr.is-open .mod-dec-cell { max-height: none; overflow: visible; }
    #modRows tr.is-open .mod-decided {
        font-size: 0.85rem;
        color: var(--mood-text-muted, #8b8b9e);
    }

    /* La barra di navigazione mobile non deve passare sopra la scheda */
    body.mod-review-open .mood-app-bottombar { display: none !important; }
}

/* ==========================================================================
   LA CODA DI REVISIONE SU TELEFONO - la riga diventa la SCHEDA del Marketplace
   (10/10/2026)
   --------------------------------------------------------------------------
   Segnalato dall'utente: «si vede malissimo in mobile». Misurato a 390x844 con
   19 righe in coda, PRIMA di questo blocco:
     - la coda era larga 368px dentro un riquadro di 338: si doveva scorrere di
       lato, e ogni valore allineato a destra finiva 13px FUORI dal bordo del
       pannello («Scaduta», «Consenti», «Dati Personali» si leggevano tagliate);
     - la larghezza minima la faceva il campo «Motivo»: un `<input>` senza
       larghezza vale 220px di serie (`size=20`), piu' l'etichetta e il padding
       della cella = 366px di riga;
     - ogni riga era alta 541px (la pagina 20.740px) e i tre comandi della
       decisione (select, motivo, «Applica») erano alti 25px: sotto il minimo
       toccabile che quest'area usa altrove (44px).
   Qui la riga e' la scheda del Marketplace: l'oggetto in evidenza, i dati come
   pillole che vanno a capo, i comandi in fondo alti 44px. A 390px la coda non
   ha piu' niente da scorrere (`scrollWidth` = `clientWidth`).
   Vale per la scheda CHIUSA: aperta a tutto schermo (`is-open`, blocco qui
   sopra) comanda quello, con i comandi agganciati in fondo.
   ========================================================================== */

@media (max-width: 700px) {

    /* --- 0. La coda non e' piu' una TABELLA: e' un elenco di schede --------
       Con `display: table` la larghezza minima dei contenuti (l'anteprima
       nowrap dell'oggetto, il `max-width` di 165px, i comandi) allargava la
       tabella a 370px dentro un riquadro di 338: da li' lo scorrimento di lato
       e i valori tagliati. Da blocco, la scheda prende la larghezza del
       riquadro. (E' quello che fa il Marketplace: una lista, non una tabella.) */
    #admin-pane-moderation .admin-table--mod {
        display: block;
        inline-size: 100%;
        min-inline-size: 0;
    }
    #admin-pane-moderation .admin-table--mod > tbody { display: block; }

    /* --- 1. La riga: una scheda che va a capo -------------------------- */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem 0.6rem;
        padding: 0.7rem 0.8rem;
        border-radius: 16px;
    }
    /* Le celle: etichetta piccola a sinistra e valore accanto. Niente
       `space-between` (era quello a spingere i valori oltre il bordo). */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.3rem;
        inline-size: auto;
        max-inline-size: 100%;
        min-inline-size: 0;
        padding: 0;
        border-bottom: 0;
        font-size: 0.85rem;
        white-space: normal;
    }
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td::before {
        position: static;
        margin: 0;
        font-size: 0.62rem;
        letter-spacing: 0.04em;
    }
    /* L'oggetto: riga intera, in evidenza. Lo spazio a destra e' della casella
       della scelta, che sta nell'angolo (regola in admin.css). */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td[data-label="Oggetto"] {
        flex: 1 1 100%;
        padding-inline-end: 3.4rem;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.35;
    }
    /* L'anteprima del contenuto: due righe che si leggono, non un tronco a
       puntini di 165px (era scritta per stare in una colonna larga 165px). */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td[data-label="Oggetto"] .mod-obj__text small {
        max-inline-size: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* L'oggetto va a capo invece di allargare la scheda. */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td[data-label="Oggetto"] .mod-obj,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td[data-label="Oggetto"] .mod-obj__text strong {
        min-inline-size: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* I dati minori: pillole intere, mai schiacciate ne' tagliate. `.badge` ha
       `margin: auto` (centra la pillola nella cella della tabella): in una cella
       in fila la spingerebbe a meta' riga. */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td > .badge,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td > .mod-dec-pill,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td > .mod-sev,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td > .mod-score,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td > .mod-score__num {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
    }
    /* La nota «contro l'analisi» e' una riga di testo, non una pillola: a tutta
       larghezza e che va a capo. Con `nowrap` usciva di 28px dalla sua cella
       (misurato) e la scheda la tagliava. */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td > .mod-note-warn {
        flex: 1 1 100%;
        min-inline-size: 0;
        margin: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* --- 2. La decisione: blocco intero, con i comandi da dito ---------- */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td[data-label="Decisione"] {
        display: block;
        flex: 1 1 100%;
        margin-top: 0.45rem;
        padding-top: 0.6rem;
        border-top: 1px dashed var(--mood-border, #2b2b3d);
    }
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) td[data-label="Decisione"]::before {
        display: block;
        margin-bottom: 0.4rem;
    }
    /* Un comando per riga: e' il campo «Motivo» (un input con la larghezza di
       serie) a fare la larghezza minima della riga. */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "sel" "reason" "btn";
        gap: 0.45rem;
    }
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec-cell {
        inline-size: 100%;
        min-inline-size: 0;
    }
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec > select,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec > .mod-reason,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec > .admin-link-btn {
        inline-size: 100%;
        min-inline-size: 0;
        /* `.admin-table select, .admin-table input` fermano i campi a 220px (va
           bene nelle celle, non qui): era il tetto che teneva la riga a 370px. */
        max-inline-size: none;
        block-size: 44px;
    }
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec > select,
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec > .mod-reason {
        font-size: 0.95rem;
    }
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-dec > .admin-link-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 0;
    }

    /* --- 3. Le azioni della riga: pillole da dito ---------------------- */
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-azioni {
        gap: 0.45rem;
        margin-top: 0.6rem;
    }
    #admin-pane-moderation .admin-table[data-responsive] tbody tr[data-qid]:not(.is-open) .mod-azioni .admin-link-btn {
        display: inline-flex;
        align-items: center;
        min-block-size: 44px;
        padding-inline: 0.9rem;
        margin: 0;
    }
}