/* ===================================================================
   SUBLIMA AE FORM — Modello Replicabile Anagrafiche BS5
   ===================================================================
   Classi standard per tutte le form ae_*.html (semplici e complesse).
   Garantisce coerenza visiva: header → sezioni → footer sempre uguali.
   Colori dal Pantone system (--sublima-burgundy, --gray-*, --bs5-*).
   =================================================================== */

/* --- HEADER BANNER --- */
.ae-header {
    background: linear-gradient(135deg, var(--sublima-burgundy, #8B0000) 0%, var(--sublima-burgundy-light, #A52A2A) 100%);
    padding: 14px 0 12px 0;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(60, 60, 60, 0.10);
}

.ae-header h2 {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.6rem;
    margin: 0;
    color: #fff;
    text-align: center;
}

.ae-header h2 i {
    margin-right: 8px;
}

/* --- SEZIONE CARD --- */
.ae-section {
    margin-bottom: 16px;
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.ae-section-header {
    background: linear-gradient(90deg, var(--gray-100, #f8f9fa) 0%, var(--gray-200, #e9ecef) 100%);
    border-bottom: 1px solid var(--gray-300, #dee2e6);
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800, #343a40);
    letter-spacing: 0.03em;
}

.ae-section-header i {
    margin-right: 6px;
    color: var(--sublima-burgundy, #8B0000);
}

.ae-section > .card-body {
    padding: 16px;
}

/* --- Override s2026: solo dentro .artedit2026 (pagine migrate), non tocca
   le altre ae_*.html che condividono queste classi ma restano sul vecchio
   sistema Pantone/burgundy hardcoded (senza variante dark).
   Header banner: rimosso, .ae-header qui e' anche .page-header--incard
   (vedi sublima2026.css:1850) → niente gradient custom. --- */
.artedit2026 .ae-section {
    border-color: var(--s2026-rule, #dee2e6);
    background: var(--s2026-bg-panel, #fff);
}

.artedit2026 .ae-section-header {
    background: var(--s2026-bg-raised, var(--s2026-bg-panel, #f8f9fa));
    border-bottom-color: var(--s2026-rule, #dee2e6);
    color: var(--s2026-ink, #343a40);
}

.artedit2026 .ae-section-header i {
    color: var(--s2026-brand-text, #8B1538);
}

/* .ae-header qui e' anche .page-header--incard: neutralizza il vecchio h2
   bianco-centrato del banner, il titolo lo stila gia' .page-header__h1. */
.artedit2026 .ae-header.page-header h2 {
    color: inherit;
    text-align: left;
    letter-spacing: normal;
}

/* --- FORM TYPOGRAPHY (scoped a #ae_form) ---
   ⚠ Ogni regola e' dichiarata anche per `.setup-scheda-wrap`: il form del Setup
   si chiama `ae_form`, quello della scheda che si apre dall'anagrafica no. Gli
   stessi partial finiscono in tutti e due, e senza il gemello le stesse card si
   vedrebbero diverse nei due posti. */
#ae_form .form-label,
#ae_form label.form-label,
.setup-scheda-wrap .form-label,
.setup-scheda-wrap label.form-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800, #343a40);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

#ae_form .form-control,
#ae_form .form-select,
.setup-scheda-wrap .form-control,
.setup-scheda-wrap .form-select {
    font-size: 0.95rem;
}

#ae_form .form-control::placeholder,
.setup-scheda-wrap .form-control::placeholder {
    color: var(--gray-500, #adb5bd);
    font-weight: 400;
}

/* --- SWITCH BS5 dentro ae_form --- */
#ae_form .form-check.form-switch,
.setup-scheda-wrap .form-check.form-switch {
    padding-top: 6px;
}

#ae_form .form-check.form-switch .form-check-input,
.setup-scheda-wrap .form-check.form-switch .form-check-input {
    width: 2.8em;
    height: 1.4em;
    cursor: pointer;
}

#ae_form .form-check.form-switch .form-check-label,
.setup-scheda-wrap .form-check.form-switch .form-check-label {
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    padding-top: 2px;
}

/* --- NOTE / AVVERTENZE sotto i campi --- */
/* ⚠ `display:block` non e' decorativo: `<small>` e' inline e il wrapper degli
   interruttori s2026 e' `inline-flex`, quindi la spiegazione si accodava sulla
   stessa riga dell'etichetta e le girava intorno andando a capo. Sotto un campo
   normale non si vedeva, perche' li' il campo che precede e' gia' blocco. */
#ae_form .ae-field-note,
.setup-scheda-wrap .ae-field-note {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600, #6c757d);
    margin-top: 4px;
    line-height: 1.35;
}

#ae_form .ae-field-warning,
.setup-scheda-wrap .ae-field-warning {
    display: block;
    font-size: 0.8rem;
    color: var(--bs5-danger, #dc3545);
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.35;
}

/* --- FOOTER BOTTONI --- */
.ae-actions {
    display: flex;
    gap: 12px;
    padding: 20px 0 8px 0;
    border-top: 1px solid var(--gray-200, #e9ecef);
    margin-top: 8px;
}

.ae-actions .btn {
    min-width: 120px;
    font-weight: 600;
    font-size: 0.95rem;
}

.ae-actions .btn i {
    font-size: 1rem;
}

/* --- SIDEBAR NAV BUTTONS (tab laterali ae_articolo / ae_cliente) --- */
.ae-sidebar-btn {
    background: linear-gradient(90deg, var(--sublima-burgundy, #8B0000) 0%, var(--sublima-burgundy-light, #A52A2A) 100%);
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
    border-radius: 10px;
    border: none;
}

.ae-sidebar-btn:hover,
.ae-sidebar-btn:focus {
    background: linear-gradient(90deg, var(--sublima-burgundy-dark, #6B0000) 0%, var(--sublima-burgundy, #8B0000) 100%);
    color: #fff;
}

.ae-sidebar-btn i {
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.85);
}

.ae-sidebar-btn .list-group-item {
    background: transparent;
    color: inherit;
    font-size: 1rem;
    font-weight: 500;
    border: none;
}

/* --- GRIGLIA COLORI (palette chiusa) ---
   Sostituisce la <select> con gli <option> colorati inline: il popup di una
   select nativa lo disegna il browser, e Firefox lo disegna col tema di
   sistema buttando via background-color/color degli <option> — su Firefox la
   palette si vedeva in bianco e nero, su Chrome a colori. Qui i colori stanno
   su <label> normali, che ogni browser colora allo stesso modo.
   Il valore viaggia in un <input type="radio"> nascosto con lo stesso name
   della vecchia select: il form si invia identico a prima. */
#ae_form .ae-color-grid {
    /* i radio sono position:absolute: ancorarli alla griglia evita che, dando
       loro il fuoco da tastiera, il browser scrolli altrove nella pagina. */
    position: relative;
    display: grid;
    /* OTTO colonne fisse: le 24 tinte di lib/colori_azienda.py cadono sempre in
       8x3 e l'arrangiamento non cambia allargando la finestra (auto-fill invece
       cambiava: su una colonna larga ne infilava 18 sulla prima riga).
       Niente max-width: la griglia prende tutta la colonna, quindi resta larga
       quanto i bottoni che le stanno sopra. A crescere e' solo la LARGHEZZA
       delle tinte - da quadrati diventano rettangoli - perche' l'altezza e'
       fissa nello swatch: il blocco non si gonfia mai in verticale, e su
       colonne strette i rettangoli si assottigliano restando alti da cliccare. */
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    margin-top: 2px;
}

/* nascosto ma ancora focusabile: la navigazione da tastiera tra i colori
   (frecce, come in ogni gruppo di radio) continua a funzionare. */
#ae_form .ae-color-radio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

#ae_form .ae-color-swatch {
    position: relative;
    display: block;
    margin: 0;
    /* altezza fissa, larghezza dalla colonna della griglia: e' cio' che tiene
       l'8x3 a qualunque larghezza senza far crescere il blocco in verticale. */
    height: 34px;
    border: 1px solid var(--s2026-rule, #ced4da);
    border-radius: var(--s2026-radius-sm, 4px);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* su un rettangolo largo lo scale di prima (1.12) era un salto vistoso: qui
   basta un accenno, e lo z-index tiene il bordo sopra i vicini. */
#ae_form .ae-color-swatch:hover {
    transform: scale(1.06);
    z-index: 1;
}

/* Selezionato: doppio anello (interno del colore della pagina, esterno
   dell'inchiostro del tema, cosi' si stacca sia in chiaro sia in scuro) piu'
   una spunta bianca. Le tinte della palette hanno tutte contrasto >= 4.5:1 col
   bianco (vedi lib/colori_azienda.py), quindi la spunta si legge su ognuna. */
#ae_form .ae-color-radio:checked + .ae-color-swatch {
    box-shadow: 0 0 0 2px var(--s2026-bg, #fff), 0 0 0 4px var(--s2026-ink, #212529);
}

#ae_form .ae-color-radio:checked + .ae-color-swatch::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

#ae_form .ae-color-radio:focus-visible + .ae-color-swatch {
    box-shadow: 0 0 0 2px var(--s2026-bg, #fff), 0 0 0 4px var(--s2026-focus-ring, #0d6efd);
}

/* "Nessun colore": due triangoli grigi, per non confonderlo con un bianco
   scelto apposta. Stessa soluzione della griglia dei bottoni di cassa. */
#ae_form .ae-color-swatch--vuoto {
    background: repeating-linear-gradient(45deg,
        var(--s2026-bg-raised, #FAFAFC) 0 6px,
        var(--s2026-rule, #E4E6EB) 6px 12px);
}

/* Tinta salvata prima dell'attuale palette: bordo tratteggiato. Resta
   selezionabile - toglierla dalla griglia cambierebbe il colore del record al
   primo risalvataggio, alle spalle di chi apre la scheda per altro. */
#ae_form .ae-color-swatch--fuori {
    border-style: dashed;
    border-color: var(--s2026-ink-3, #6B7280);
}

/* --- RESPONSIVE --- */
@media (max-width: 575.98px) {
    .ae-header h2 {
        font-size: 1.25rem;
        letter-spacing: 1px;
    }

    .ae-section-header {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    .ae-actions {
        flex-direction: column;
    }

    .ae-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Selettore dell'icona per la TESSERA (segnaposto degli articoli senza foto).
   Stessa famiglia della griglia dei colori qui sopra: bersagli quadrati, il
   scelto si riconosce dal bordo. Le icone sono 1030: il JS ne disegna al
   massimo 120 per volta e si restringe scrivendo.
   ========================================================================== */
#ae_form .ui-icone {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: .4rem;
    max-height: 9.5rem;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid var(--s2026-rule, #ddd);
    border-radius: 6px;
}

#ae_form .ui-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--s2026-ink-2, #444);
    font-size: 1.1rem;
    line-height: 1;
}
#ae_form .ui-icona:hover { background: var(--s2026-bg-raised, #f2f2f2); }
#ae_form .ui-icona.is-scelta {
    border-color: var(--s2026-brand, #8B0000);
    background: var(--s2026-bg-raised, #f7f2f2);
    color: var(--s2026-brand, #8B0000);
}