/* ============================================================
   Modale "Crea un modello" (galleria + barra laterale)
   ------------------------------------------------------------
   Perche' un foglio dedicato invece delle classi Tailwind: il
   pannello NON compila Tailwind su queste viste, quindi nel CSS
   di Filament esistono solo le utility che Filament stessa usa.
   text-primary-700, border-primary-200, hover:bg-primary-500 e i
   valori arbitrari (text-[0.6875rem]) NON ci sono e verrebbero
   ignorati in silenzio. Stessa scelta di tool-cards.css e
   modal-fit.css: CSS puro servito da public/, niente Vite/npm.

   Il tema scuro si aggancia a `.dark`, come gli altri fogli del
   progetto. MAI colori cablati nella vista: un background bianco
   inline si porta dietro il testo chiaro del tema scuro e diventa
   bianco su bianco.
   ============================================================ */

.jo-tp {
    /* I controlli nativi (la select) seguono questo: senza, il browser
       disegnerebbe una tendina chiara su modale scura. */
    color-scheme: light;
    --jo-tp-line: var(--jo-surface-200, #e4e4e7);
    --jo-tp-bg: #ffffff;
    --jo-tp-bg-sunk: var(--jo-surface-50, #fafafa);
    --jo-tp-title: var(--jo-surface-800, #27272a);
    --jo-tp-muted: var(--jo-surface-500, #71717a);
    --jo-tp-accent: var(--jo-primary-base, #7400ff);
    --jo-tp-accent-soft: #f3e8ff;
    --jo-tp-accent-line: #d8b4fe;
    --jo-tp-accent-text: #6100d6;

    display: grid;
    grid-template-columns: 16rem 1fr;
    min-height: 26rem;
    margin: -1.5rem;
}

.dark .jo-tp {
    color-scheme: dark;
    --jo-tp-line: rgba(255, 255, 255, .1);
    --jo-tp-bg: #27272a;
    --jo-tp-bg-sunk: #18181b;
    --jo-tp-title: #f4f4f5;
    --jo-tp-muted: #a1a1aa;
    --jo-tp-accent: #a970ff;
    --jo-tp-accent-soft: rgba(169, 112, 255, .12);
    --jo-tp-accent-line: rgba(169, 112, 255, .35);
    --jo-tp-accent-text: #c9a5ff;
}

@media (max-width: 48rem) {
    .jo-tp { grid-template-columns: 1fr; }
    .jo-tp-rail { border-right: 0; border-bottom: 1px solid var(--jo-tp-line); }
}

/* ---------- barra laterale ---------- */
.jo-tp-rail {
    border-right: 1px solid var(--jo-tp-line);
    background: var(--jo-tp-bg-sunk);
    padding: 1rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow-y: auto;
}

.jo-tp-group {
    border-radius: .5rem;
    padding: .6rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: 1px solid var(--jo-tp-line);
    background: var(--jo-tp-bg);
}

/* Gruppi di AZIONE (portano via dalla modale): fondo accento. */
.jo-tp-group--action {
    background: var(--jo-tp-accent-soft);
    border-color: var(--jo-tp-accent-line);
}

.jo-tp-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--jo-tp-muted);
    padding: 0 .35rem;
}
.jo-tp-group--action .jo-tp-label { color: var(--jo-tp-accent-text); }

/* ---------- schede della barra laterale ---------- */
.jo-tp-item {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--jo-tp-line);
    border-radius: .5rem;
    background: var(--jo-tp-bg);
    color: inherit;
    transition: border-color .15s, background .15s;
}
.jo-tp-item:hover { border-color: var(--jo-tp-accent); }

/* Stato SELEZIONATO: esiste SOLO nel gruppo "Parti da un modello".
   E' il segnale che quelle voci restano nella modale, mentre le
   azioni non si evidenziano mai perche' ti portano via. */
.jo-tp-item--on {
    background: var(--jo-tp-accent-soft);
    border-color: var(--jo-tp-accent);
    box-shadow: inset 3px 0 0 var(--jo-tp-accent);
}
.jo-tp-item--on .jo-tp-item-title { color: var(--jo-tp-accent-text); }

.jo-tp-item-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; color: var(--jo-tp-muted); }
.jo-tp-group--action .jo-tp-item-icon { color: var(--jo-tp-accent); }

.jo-tp-item-title { display: block; font-size: .8125rem; font-weight: 600; color: var(--jo-tp-title); }
.jo-tp-item-desc { display: block; font-size: .6875rem; line-height: 1.35; margin-top: .1rem; color: var(--jo-tp-muted); }

/* ---------- galleria ---------- */
.jo-tp-panel {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow-y: auto;
    background: var(--jo-tp-bg);
}

.jo-tp-panel-title { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--jo-tp-title); }
.jo-tp-panel-sub { margin: .15rem 0 0; font-size: .75rem; color: var(--jo-tp-muted); }

.jo-tp-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.jo-tp-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: .4rem .65rem;
    font-size: .8125rem;
    border: 1px solid var(--jo-tp-line);
    border-radius: .375rem;
    background: var(--jo-tp-bg-sunk);
    color: var(--jo-tp-title);
}
.jo-tp-search::placeholder { color: var(--jo-tp-muted); }
.jo-tp-search:focus {
    outline: none;
    border-color: var(--jo-tp-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jo-tp-accent) 25%, transparent);
}

/* NB: la griglia sta su un elemento SENZA x-show. Alpine, quando
   mostra un elemento, gli azzera style.display — e con esso un
   display:grid inline, facendo impilare le card a tutta larghezza. */
.jo-tp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-content: start;
}

/* Due colonne: l'anteprima di un'email e' larga 600px, con card
   piu' strette il design non si legge. Sotto la soglia si passa a
   una sola colonna invece di stringere ancora. */
@media (max-width: 40rem) {
    .jo-tp-grid { grid-template-columns: minmax(0, 1fr); }
}

.jo-tp-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--jo-tp-line);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--jo-tp-bg);
    transition: border-color .15s;
}
.jo-tp-card:hover { border-color: var(--jo-tp-accent); }

.jo-tp-thumb {
    position: relative;
    height: 11rem;
    overflow: hidden;
    background: var(--jo-tp-bg-sunk);
    display: flex;
    /* Ancorata in ALTO: l'immagine e' piu' alta del riquadro, e centrandola
       si vedrebbe la pancia dell'email invece dell'intestazione. */
    align-items: flex-start;
    justify-content: center;
}
.jo-tp-thumb img { width: 100%; height: auto; display: block; }
.jo-tp-thumb svg { width: 1.75rem; height: 1.75rem; margin: auto; color: var(--jo-tp-muted); opacity: .5; }

.jo-tp-card-body {
    padding: .5rem .6rem .6rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .3rem;
}
.jo-tp-card-name { font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--jo-tp-title); }

.jo-tp-use {
    display: block;
    text-align: center;
    margin-top: auto;
    padding: .3rem;
    border-radius: .375rem;
    background: var(--jo-tp-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    transition: filter .15s;
}
.jo-tp-use:hover { filter: brightness(1.12); }

.jo-tp-empty { grid-column: 1 / -1; font-size: .8125rem; color: var(--jo-tp-muted); }

/* Anteprima dal vivo: geometria FISSA, non percentuale.
   L'approccio "width:250% + scale(.4)" dipendeva da come il flex risolve
   la percentuale e rendeva l'anteprima ora troppo stretta ora troppo
   zoomata. Qui invece l'email viene disegnata alla sua larghezza REALE
   (600px, la misura standard di un'email) e poi rimpicciolita di un
   fattore fisso, tarato perche' riempia la card come fa il PNG: senza,
   le card con iframe restavano piu' strette di quelle con l'immagine e la
   galleria sembrava costruita con due criteri diversi.
   pointer-events:none — il click deve arrivare alla card. */
.jo-tp-thumb-frame {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -300px; /* meta' di 600px: centra prima della scala */
    width: 600px;
    height: 430px;
    border: 0;
    transform: scale(.58);
    transform-origin: top center;
    pointer-events: none;
    background: #ffffff;
}

/* Ordinamento: deve LEGGERSI come una select.
   ATTENZIONE alla scorciatoia `background:`. Filament stila i select in due
   punti: app.css con `select` (immagine + posizione + no-repeat + misura) e
   forms.css con `select:not(.choices)`, che ridichiara la SOLA immagine.
   Quest'ultimo selettore ha specificita' (0,1,1), piu' alta di .jo-tp-sort
   (0,1,0): la freccetta vince comunque. Se qui si usa `background:`, la
   scorciatoia azzera repeat e size — e su quelle la nostra regola batte
   app.css — quindi la freccetta ricompare a dimensione naturale e RIPETUTA
   in orizzontale per tutta la larghezza. Si tocca solo background-color, e
   si lascia spazio a destra per la freccetta di Filament. */
.jo-tp-sort {
    flex: 0 0 auto;
    padding: .35rem 2.25rem .35rem .5rem;
    font-size: .8125rem;
    border: 1px solid var(--jo-tp-line);
    border-radius: .375rem;
    background-color: var(--jo-tp-bg-sunk);
    color: var(--jo-tp-title);
    cursor: pointer;
}
.jo-tp-sort:focus {
    outline: none;
    border-color: var(--jo-tp-accent);
}

/* Ordinamento per nome: il rango lo scrive PHP su ogni card (--rank), il
   VERSO lo decide una classe sulla griglia. Serve tenerli separati: un
   x-bind:style in forma di stringa riscrive l'intero attributo style e
   cancellerebbe il display:none messo da x-show, facendo ricomparire le
   card escluse dalla ricerca a ogni cambio di ordinamento. */
.jo-tp-card { order: var(--rank, 0); }
.jo-tp-grid.is-desc .jo-tp-card { order: calc(var(--rank, 0) * -1); }

/* ---------- variante INCORPORATA (blocco Contenuto della campagna) ----------
   Nella modale "Crea un modello" il picker E' il corpo della modale: altezza
   fissa, margini negativi fino ai bordi, barra laterale e galleria che
   scorrono ciascuna per conto suo. Dentro un form (stato vuoto del blocco
   Contenuto) quello schema produceva TRE scrollbar annidate (corpo della
   modale + barra + galleria). Qui il picker NON ha altezza propria: cresce
   col contenuto e a scorrere e' SOLO il corpo della modale (.jo-modal-fit,
   header e footer ancorati); la barra laterale resta sticky in alto mentre
   la galleria scorre. Niente overflow:hidden sul contenitore: spezzerebbe
   lo sticky. */
.jo-tp--embedded {
    margin: 0;
    min-height: 0;
    border: 1px solid var(--jo-tp-line);
    border-radius: .5rem;
    overflow: visible;
}
.jo-tp--embedded .jo-tp-rail {
    position: sticky;
    top: 0;
    align-self: start;
    overflow: visible;
    border-right: 0;
    background: transparent;
    border-radius: .5rem 0 0 .5rem;
}
.jo-tp--embedded .jo-tp-panel {
    overflow: visible;
    border-left: 1px solid var(--jo-tp-line);
    border-radius: 0 .5rem .5rem 0;
}
@media (max-width: 48rem) {
    .jo-tp--embedded .jo-tp-rail { position: static; border-radius: .5rem .5rem 0 0; }
    .jo-tp--embedded .jo-tp-panel { border-left: 0; border-top: 1px solid var(--jo-tp-line); border-radius: 0 0 .5rem .5rem; }
}

/* "Usa modello" come <button> (modalita' "scegli": seleziona senza
   cambiare pagina) — stesso aspetto del link. */
button.jo-tp-use { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 500; }

/* Badge "Consigliato" sulla card: il modello ha lo stesso obiettivo della
   campagna (stessa logica del gruppo "Consigliati per l'obiettivo"). */
.jo-tp-badge {
    position: absolute;
    top: .4rem;
    left: .4rem;
    padding: .1rem .5rem;
    border-radius: 9999px;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: var(--jo-tp-accent);
    color: #fff;
}