/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        card.css
 * Path:        public/css/card.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce l’aspetto del componente card, usato per raggruppare visivamente contenuti, form e blocchi informativi.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: schede grafiche riutilizzabili.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato dalle view;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: struttura base del componente card
 * ========================================================== */

/* Wrapper principale della scheda. */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

/* Testata colorata della card con gradiente standard del framework. */
.card-header {
    position: relative;
    padding: 6px 13px 11px;
    background: var(--color-primary-light);
    background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary-mid));
    color: var(--color-on-primary) !important;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-top-large);
    cursor: pointer;
    user-select: none;
}

/* Icona di stato della testata, usata per indicare card espansa. */
.card-header::after {
    content: "expand_less";
    position: absolute;
    top: 50%;
    right: 12px;
    font-family: var(--font-family-icon);
    font-size: 20px;
    line-height: 1;
    transform: translateY(-50%);
}

/* Testata della card collassata, senza separatore inferiore. */
.card.is-collapsed .card-header {
    border-bottom: 0;
    border-radius: var(--radius-large);
}

/* Icona di stato della testata quando la card è collassata. */
.card.is-collapsed .card-header::after {
    content: "expand_more";
}

/* Titolo della sezione interna alla card. */
.card-title {
    font-size: 20px;
}

/* Corpo della card: ospita form-box, detail-grid o contenuto libero. */
.card-body {
    padding: 9px 15px 16px;
    background-color: var(--color-on-primary);
    border-radius: var(--radius-bottom-large);
}

/* Nasconde il corpo quando la card è nello stato collassato. */
.card.is-collapsed .card-body {
    display: none;
}