/* ============================================================
   Elenco segnaposto per la modalita' "Codice HTML" (.jo-mt)
   ------------------------------------------------------------
   Chi compone col drag & drop ha la tendina di Unlayer; chi
   incolla HTML non ha nulla, e senza questo elenco i {{token}}
   andavano indovinati.

   Perche' un foglio dedicato invece di Tailwind: il pannello non
   compila Tailwind su queste viste, quindi nel CSS di Filament
   esistono SOLO le utility che Filament stessa usa. Stessa
   scelta di template-picker.css e tool-cards.css.

   Tema scuro agganciato a `.dark`, come gli altri fogli: mai
   colori cablati nella vista, o nel tema scuro si finisce con
   testo chiaro su fondo bianco.
   ============================================================ */

.jo-mt {
    --jo-mt-line: var(--jo-surface-200, #e4e4e7);
    --jo-mt-bg: var(--jo-surface-50, #fafafa);
    --jo-mt-text: var(--jo-surface-800, #27272a);
    --jo-mt-muted: var(--jo-surface-500, #71717a);
    --jo-mt-accent: var(--jo-primary-base, #7400ff);
    --jo-mt-accent-soft: #f3e8ff;
    --jo-mt-accent-line: #d8b4fe;
    --jo-mt-ok: #15803d;
    --jo-mt-ok-soft: #dcfce7;
}

.dark .jo-mt {
    --jo-mt-line: rgba(255, 255, 255, .1);
    --jo-mt-bg: rgba(255, 255, 255, .03);
    --jo-mt-text: var(--jo-surface-100, #f4f4f5);
    --jo-mt-muted: var(--jo-surface-400, #a1a1aa);
    --jo-mt-accent: #c4a3ff;
    --jo-mt-accent-soft: rgba(139, 92, 246, .16);
    --jo-mt-accent-line: rgba(196, 163, 255, .35);
    --jo-mt-ok: #86efac;
    --jo-mt-ok-soft: rgba(34, 197, 94, .18);
}

/* x-cloak: senza questa regola il badge "copiato" lampeggia al
   primo paint, prima che Alpine agganci x-show. */
.jo-mt [x-cloak] {
    display: none !important;
}

/* L'introduzione e' passata alla descrizione della Section, perche' cambia
   con la modalita': qui restava una regola senza padrone. */
.jo-mt-foot {
    margin: .75rem 0 0;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--jo-mt-muted);
}

.jo-mt-list {
    display: grid;
    /* auto-fill e NON una scala di @media: le media query misurano la
       FINESTRA, mentre questo elenco vive in una sezione la cui larghezza non
       la segue — sopra xl la pagina si divide in due colonne, quindi a parita'
       di finestra lo spazio qui puo' essere meta'. Il risultato era che su
       schermo stretto restavano due riquadri per riga invece di uno solo a
       tutta larghezza.
       Cosi' invece decide lo spazio REALE: entrano tante colonne quante ce ne
       stanno da almeno 16rem, e l'ultima riga si allarga sempre fino al bordo.
       Sotto i 16rem utili resta una colonna sola, a piena larghezza. */
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: .375rem;
    /* Primo elemento del riquadro da quando l'intro e' salita nella Section:
       il margine superiore non ha piu' niente da distanziare. */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le celle si allungano fino alla piu' alta della riga: senza questo il
   bottone si ferma al proprio contenuto e i riquadri restano sfalsati quando
   una descrizione va a capo e le altre no. */
.jo-mt-list li {
    display: flex;
}

.jo-mt-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    /* Descrizione e codice sono le due metà della stessa voce: quasi
       attaccate si leggono come un blocco solo. */
    gap: .0625rem;
    width: 100%;
    padding: .25rem .6rem;
    border: 1px solid var(--jo-mt-line);
    border-radius: .5rem;
    background: var(--jo-mt-bg);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.jo-mt-chip:hover {
    border-color: var(--jo-mt-accent-line);
    background: var(--jo-mt-accent-soft);
}

.jo-mt-chip.is-copied {
    border-color: var(--jo-mt-ok);
    background: var(--jo-mt-ok-soft);
}

/* Riga inferiore: codice a sinistra, conferma di copia a destra. */
.jo-mt-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
}

.jo-mt-token {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Selezionabile a mano: se la clipboard non e' disponibile
       (contesto non sicuro) il click non fa nulla, e almeno il
       testo resta copiabile a mano. */
    user-select: text;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .6875rem;
    color: var(--jo-mt-accent);
    background: none;
}

/* La DESCRIZIONE ora e' la voce principale — e' quella che si legge per
   trovare il segnaposto giusto — quindi prende il colore del testo e il
   codice sotto passa in secondo piano. Prima era il contrario.
   Va a capo invece di troncare: in una colonna stretta i puntini
   nasconderebbero proprio la parte che distingue una voce dall'altra. */
.jo-mt-name {
    font-size: .75rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--jo-mt-text);
}

.jo-mt-done {
    flex: none;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--jo-mt-ok);
}

/* Due piedi consecutivi (avviso del filtro + nota sul vuoto): il secondo non
   ripete la distanza, o sembrano due blocchi scollegati. */
.jo-mt-foot + .jo-mt-foot {
    margin-top: .375rem;
}

.jo-mt-foot strong {
    color: var(--jo-mt-text);
    font-weight: 600;
}