/* =============================================================
   automations.css — Stili per la pagina Automazioni
   Scope: lista automazioni, catalog picker, chip azioni
   Variables: --mud-palette-* (MudBlazor) e --upf-* (variables.css)
   ============================================================= */


/* ══════════════════════════════════════════════
   HEADER SEZIONE — riga separatore con testo e conteggio
   ══════════════════════════════════════════════ */

/*
 * Riga separatrice che introduce una sezione della lista automazioni.
 * Il testo della sezione appare a sinistra, il conteggio a destra.
 */
.automation-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 6px;
    margin-top: 20px;
    margin-bottom: 8px;
    border-bottom: 1.5px solid var(--mud-palette-primary);
}

.automation-section-header:first-child {
    margin-top: 0;
}

/* Testo etichetta sezione */
.automation-section-header span:first-child {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-primary);
}

/*
 * Contatore numerico a destra dell'header di sezione.
 * Visualizzato in colore secondario per non competere con il titolo.
 */
.automation-section-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-hover);
    border-radius: 10px;
    padding: 1px 8px;
    letter-spacing: 0;
}


/* ══════════════════════════════════════════════
   RIGA AUTOMAZIONE — container principale di ogni regola
   ══════════════════════════════════════════════ */

/*
 * Container flex orizzontale per una singola automazione.
 * Contiene icona, corpo (nome + descrizione + chips) e colonna destra (badge stato + bottone).
 */
.automation-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: default;
}

.automation-row:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-color: var(--mud-palette-primary);
}

/* Riga disabilitata: opacità ridotta per segnalare lo stato "off" */
.automation-row.is-disabled {
    opacity: 0.6;
}


/* ══════════════════════════════════════════════
   ICONA TIPO — quadrato 40x40 con colore per categoria
   ══════════════════════════════════════════════ */

/*
 * Icona identificativa del tipo di automazione (evento, schedulato, disabilitato).
 * Dimensione fissa 40x40, flex-shrink-0 per non comprimersi in layout stretti.
 */
.automation-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: var(--mud-palette-action-hover);
    color: var(--mud-palette-text-secondary);
}

/* Evento: verde semitrasparente, compatibile dark mode */
.automation-icon.ev {
    background-color: rgba(46, 125, 50, 0.15);
    color: #66bb6a;
}

/* Schedulato/notturno: blu semitrasparente, compatibile dark mode */
.automation-icon.sc {
    background-color: rgba(21, 101, 192, 0.15);
    color: #64b5f6;
}

/* Disabilitato: grigio semitrasparente */
.automation-icon.off {
    background-color: rgba(158, 158, 158, 0.12);
    color: #9e9e9e;
}


/* ══════════════════════════════════════════════
   CORPO AUTOMAZIONE — nome, descrizione, chips azione
   ══════════════════════════════════════════════ */

/*
 * Area centrale che occupa tutto lo spazio disponibile tra icona e colonna destra.
 */
.automation-body {
    flex: 1;
    min-width: 0;
    padding: 0 4px;
}

/* Nome dell'automazione: peso grassetto, una riga sola */
.automation-name {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/*
 * Badge inline "SISTEMA" per automazioni predefinite non modificabili.
 * Colore neutro (viola/grigio) per distinguerlo dai chip operativi.
 */
.automation-sys-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: rgba(81, 45, 168, 0.15);
    color: #9575cd;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Descrizione breve: colore secondario, testo piccolo */
.automation-desc {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Riga di chip che descrivono le azioni configurate sull'automazione */
.automation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}


/* ══════════════════════════════════════════════
   COLONNA DESTRA — stato attivo + bottone edit
   ══════════════════════════════════════════════ */

/*
 * Colonna destra con allineamento verticale: badge "come" in cima, bottone in basso.
 * flex-shrink-0 per non essere compressa dalla colonna centrale.
 */
.automation-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/*
 * Chip "come viene triggerata" l'automazione (evento o schedulato).
 * Varianti how-ev e how-sc per colorazione contestuale.
 */
.how-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Evento: arancione semitrasparente, compatibile dark mode */
.how-chip.how-ev {
    background-color: rgba(230, 81, 0, 0.12);
    color: #ffa726;
}

/* Schedulato: blu semitrasparente, compatibile dark mode */
.how-chip.how-sc {
    background-color: rgba(13, 71, 161, 0.12);
    color: #64b5f6;
}

/*
 * Bottone modifica piccolo, stile outlined coerente con il resto dell'app.
 * Dimensioni compatte per adattarsi alla colonna destra.
 */
.edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    color: var(--mud-palette-primary);
    background: transparent;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    text-decoration: none;
}

.edit-btn:hover {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.edit-btn i {
    font-size: 0.85rem;
}


/* ══════════════════════════════════════════════
   CHIP AZIONI — etichette inline per il tipo di azione
   ══════════════════════════════════════════════ */

/*
 * Chip generico piccolo usato dentro .automation-chips.
 * Sottoclassi definiscono colore per tipo (parametro, tag, comunicazione, push).
 */
.chip {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* Chip parametro generico: grigio semitrasparente */
.chip-param {
    background-color: rgba(158, 158, 158, 0.15);
    color: var(--mud-palette-text-secondary);
}

/* Chip tag cliente: verde semitrasparente */
.chip-tag {
    background-color: rgba(46, 125, 50, 0.15);
    color: #66bb6a;
}

/* Chip comunicazione (email, SMS, WhatsApp): blu semitrasparente */
.chip-comm {
    background-color: rgba(21, 101, 192, 0.15);
    color: #64b5f6;
}

/* Chip push notification: viola semitrasparente */
.chip-push {
    background-color: rgba(106, 27, 154, 0.15);
    color: #ba68c8;
}


/* ══════════════════════════════════════════════
   CATALOG PICKER — griglia per selezione tipo automazione
   ══════════════════════════════════════════════ */

/*
 * Griglia responsive per le card del catalog picker.
 * auto-fill con minmax garantisce adattamento senza breakpoint espliciti.
 */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

/*
 * Card singola del catalog: bordo sottile, hover con elevazione e accento primario.
 * min-height garantisce un'altezza minima uniforme tra card con testo diverso.
 */
.catalog-card {
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px 16px;
    min-height: 100px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}

.catalog-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    border-color: var(--mud-palette-primary);
}

/* Card selezionata: bordo primario evidenziato e sfondo leggermente colorato */
.catalog-card.selected {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
}

/*
 * Card che occupa tutta la larghezza della griglia (es. voce "Personalizzato" o separatori).
 * grid-column: 1 / -1 forza l'elemento a coprire tutte le colonne disponibili.
 */
.catalog-card-full {
    grid-column: 1 / -1;
}

/* Icona emoji/testo grande in cima alla card */
.catalog-icon {
    font-size: 2rem;
    margin-bottom: 6px;
    line-height: 1;
}

/* Titolo della card: grassetto, dimensione contenuta */
.catalog-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

/* Descrizione breve sotto il titolo: testo secondario, font piccolo */
.catalog-desc {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    margin-top: 4px;
    line-height: 1.4;
    flex: 1;
}

/* Riga di pillole in fondo alla card che indicano le azioni disponibili */
.catalog-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

/*
 * Pillola extra-piccola usata nel catalog per indicare tipologia di azione.
 * border-radius elevato per forma "pill".
 */
.apill {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* Pillola tag: verde semitrasparente, compatibile dark mode */
.apill-tag {
    background-color: rgba(46, 125, 50, 0.15);
    color: #66bb6a;
}

/* Pillola comunicazione: blu semitrasparente, compatibile dark mode */
.apill-comm {
    background-color: rgba(21, 101, 192, 0.15);
    color: #64b5f6;
}

/*
 * Header di sezione interno al catalog picker.
 * Separa visivamente i gruppi di automazioni (es. "Tag", "Comunicazioni").
 */
.automation-catalog-section-header {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 4px;
    grid-column: 1 / -1;
}