.action-box-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.action-box {
    position: relative;
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: var(--radius);
    padding: 15px;
    overflow: hidden;
}


.action-box.active {
    border-color: var(--primary);
    background: var(--white);
}

.action-box.warning {
    border-color: var(--warning);
    background: var(--white);
}

/*
.action-box.active:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--success);
    opacity: 0.1;
    z-index: 0;
}
*/

.action-box > div {
    position: relative;
}

.action-box .action-box-header {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    container-type: inline-size;
}
.action-box .action-box-header .action-box-icon {

}

.action-box .action-box-header .action-box-icon > i {
    width: 1.2em;
    text-align: center;
}

.action-box .action-box-header .action-box-icon > img {
    width: 65px;
    max-height: 65px;
    object-fit: contain;
    border-radius: var(--radius);
}


.action-box .action-box-header .action-box-icon +.action-box-info {
    padding-left: 15px;
    border-left: 1px solid var(--border);
}

/* Il bordo/padding a sinistra ha senso solo finché icona e testo stanno sulla stessa riga.
   Quando l'header non è abbastanza largo, .action-box-info va a capo SOTTO l'icona: in quel
   caso togliamo bordo e padding. In CSS non esiste un selettore "andato a capo", quindi usiamo
   una container-query sull'header (container-type: inline-size, sopra). La soglia di wrap
   dipende dalla larghezza dell'icona, perciò distinguiamo icona-immagine da icona-font con :has().
   Box model: tutto border-box, --font-body 14px, .action-box-info min-width 220px, gap 15px.
   Dove :has()/@container non sono supportati il bordo resta com'era (degrado pulito). */

/* Icona immagine (width 100px):  100 + 15(gap) + 220(info) = 335  → va a capo sotto i 335px */
@container (max-width: 334px) {
    .action-box-header:has(> .action-box-icon > img) > .action-box-icon +.action-box-info {
        padding-left: 0;
        border-left: 0;
    }
}

/* Icona font (es. fa-3x ≈ 50px):  50 + 15 + 220 = 285  → va a capo sotto i 285px */
@container (max-width: 284px) {
    .action-box-header:has(> .action-box-icon > i) > .action-box-icon +.action-box-info {
        padding-left: 0;
        border-left: 0;
    }
}

.action-box .action-box-header .action-box-info {
    flex: 1;
    min-width: 220px;
}


.action-box .action-box-header .action-box-info .action-box-title {
    font-size: var(--font-h2);
}

.action-box .action-box-header .action-box-info .action-box-description {
    margin: 5px 0 0 0;
    /* white-space: pre-line; */
}


.action-box.active  .action-box-header .action-box-icon,
.action-box.active  .action-box-header .action-box-info {
    color: var(--primary);
}

.action-box .action-box-header .action-box-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.action-box .action-box-content {
    padding: 15px;
    margin: 15px -15px -15px;
    border-top: 1px solid var(--border);
    /* background: var(--light); */
}

.action-box.active > .action-box-header > .action-box-actions > .action-box-enable,
.action-box:not(.active) > .action-box-header > .action-box-actions >  .action-box-disable,
.action-box:not(.active) > .action-box-content {
    display: none;
}

.action-box.active .action-box-view-mode {
    display: none;
}

.action-box:not(.active) .action-box-edit-mode {
    display: none;
}