/* ===================================================================
   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;
}

/* --- FORM TYPOGRAPHY (scoped a #ae_form) --- */
#ae_form .form-label,
#ae_form 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 {
    font-size: 0.95rem;
}

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

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

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

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

/* --- NOTE / AVVERTENZE sotto i campi --- */
#ae_form .ae-field-note {
    font-size: 0.8rem;
    color: var(--gray-600, #6c757d);
    margin-top: 4px;
    line-height: 1.35;
}

#ae_form .ae-field-warning {
    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);
}

/* --- 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%;
    }
}