/* =============================================================
   whatsapp-templates.css — Template WhatsApp del tenant

   Scope:
     - dialog di import dalla libreria WABA: selezione multipla sulle card
       del picker (riusa lo scheletro .autpk-* del dialog "Nuova automazione"
       e aggiunge solo ciò che la selezione multipla richiede)
     - pill di stato di approvazione Meta, usate nell'elenco e nei dialog

   Perché riusare .autpk-*: il picker della libreria ha la stessa forma del
   picker dei template di automazione (ricerca, colonna categorie con
   conteggi, griglia di card). Duplicare quel layout con nomi nuovi avrebbe
   moltiplicato il CSS da mantenere allineato a ogni ritocco.
   ============================================================= */


/* ══════════════════════════════════════════════
   PALETTE — famiglia rossa per lo stato REJECTED

   Le altre tinte vengono dalla palette di modulo delle Automazioni
   (--aut-* su :root in automations.css): azzurro, verde, ambra, viola.
   Manca solo il rosso, che serve al template rifiutato da Meta.
   Su :root perché i dialog vivono nel portale MudBlazor, fuori dal
   contenitore di pagina.
   ══════════════════════════════════════════════ */

:root {
    --watpl-red: #d64550;
    --watpl-red-bg: rgba(214, 69, 80, 0.12);
    --watpl-red-ink: #a52b35;
}

[data-bs-theme=dark] {
    --watpl-red: #ef7a84;
    --watpl-red-bg: rgba(239, 122, 132, 0.16);
    --watpl-red-ink: #f2949c;
}


/* ══════════════════════════════════════════════
   DIALOG DI IMPORT — selezione multipla sulle card
   ══════════════════════════════════════════════ */

/* Riquadro del prerequisito: nessun provider WhatsApp attivo.
   Occupa il posto della griglia, così il dialog non mostra un elenco
   selezionabile che poi fallirebbe al momento dell'import. */
.watpl-gate {
    padding: 36px 28px;
    text-align: center;
}

.watpl-gate-ic {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--aut-amber-bg);
    color: var(--aut-amber-ink);
}

.watpl-gate-t {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--mud-palette-text-primary);
}

.watpl-gate-d {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    max-width: 460px;
    margin: 0 auto 18px;
}

/* La card della libreria è selezionabile: serve spazio in alto a destra per
   l'indicatore di selezione, che è sovrapposto e non in flusso. */
.autpk-tpl.watpl-card {
    position: relative;
    padding-right: 44px;
}

/* Card selezionata: bordo e velo della tinta primaria, così il conteggio in
   fondo al dialog e ciò che si vede nella griglia raccontano la stessa cosa. */
.autpk-tpl.watpl-card.watpl-on {
    border-color: var(--aut-green);
    background: var(--aut-green-bg);
}

/* Voce già importata: resta visibile — l'operatore deve sapere che c'è — ma
   non è selezionabile. L'indice univoco la rifiuterebbe comunque; vederlo
   prima del clic evita di scoprirlo dall'errore. */
.autpk-tpl.watpl-off {
    opacity: 0.62;
    cursor: default;
    background: var(--mud-palette-action-disabled-background);
}

.autpk-tpl.watpl-off:hover {
    border-color: var(--mud-palette-divider);
    box-shadow: none;
    transform: none;
}

/* Indicatore di selezione in alto a destra sulla card */
.watpl-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    color: transparent;
    flex-shrink: 0;
}

.autpk-tpl.watpl-on .watpl-check {
    border-color: var(--aut-green);
    background: var(--aut-green);
    color: var(--aut-blue-on);
}

/* Marchio "già importato": sostituisce l'indicatore di selezione */
.watpl-imported {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--aut-green-bg);
    color: var(--aut-green-ink);
    white-space: nowrap;
}

/* Anteprima del corpo del messaggio sulla card: è il testo che finirà sotto
   gli occhi degli iscritti, quindi va letto prima di importare. */
.watpl-preview {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    white-space: pre-wrap;
    max-height: 76px;
    overflow: hidden;
}

/* Contatore dei selezionati nella barra azioni del dialog */
.watpl-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.watpl-count b {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}


/* ══════════════════════════════════════════════
   PILL DI STATO DI APPROVAZIONE META

   Cinque stati che devono distinguersi a colpo d'occhio nell'elenco:
   bozza locale, in attesa, approvato, rifiutato, sospeso.
   ══════════════════════════════════════════════ */

.watpl-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
}

.watpl-status.draft    { background: var(--mud-palette-action-hover);   color: var(--mud-palette-text-secondary); }
.watpl-status.pending  { background: var(--aut-blue-bg);   color: var(--aut-blue-ink); }
.watpl-status.approved { background: var(--aut-green-bg);  color: var(--aut-green-ink); }
.watpl-status.rejected { background: var(--watpl-red-bg);  color: var(--watpl-red-ink); }
.watpl-status.paused   { background: var(--aut-amber-bg);  color: var(--aut-amber-ink); }
.watpl-status.disabled { background: var(--mud-palette-action-hover);   color: var(--mud-palette-text-secondary); }

/* Motivo del rifiuto: visibile in riga, non in un tooltip.
   È l'informazione che serve per correggere il template, e nasconderla dietro
   un passaggio del mouse la rende invisibile a chi scorre l'elenco. */
.watpl-reason {
    margin-top: 4px;
    padding: 5px 8px;
    border-left: 3px solid var(--watpl-red);
    border-radius: 0 6px 6px 0;
    background: var(--watpl-red-bg);
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--watpl-red-ink);
    max-width: 420px;
    white-space: normal;
}

/* Riclassificazione della categoria da parte di Meta: cambia costo e regole
   di consegna, quindi è un avviso e non un dettaglio. */
.watpl-recat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--aut-amber-bg);
    color: var(--aut-amber-ink);
    white-space: nowrap;
}

/* Nome tecnico Meta: monospaziato, si legge come un identificativo */
.watpl-meta-name {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}