/* css/alerts.css */

.alert {
    border-radius: var(--md-sys-shape-corner-medium);
    border-width: 1px;
    border-style: solid;
    padding: var(--md-sys-spacing-m) var(--md-sys-spacing-l);
    display: flex;
    align-items: flex-start;
}

.alert .bi {
    font-size: 1.3em;
    margin-right: var(--md-sys-spacing-m);
    line-height: 1.5; /* Allineamento verticale migliore */
}

.alert-dismissible .btn-close {
    padding: var(--md-sys-spacing-l);
}

/* Primary Alert */
.alert-primary {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: color-mix(in srgb, var(--md-sys-color-primary-container) 80%, var(--md-sys-color-primary) 20%);
}
.alert-primary .bi { color: var(--md-sys-color-primary); }
.alert-primary .alert-link { color: var(--md-sys-color-primary); }

/* Secondary Alert (Info) */
.alert-info {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 80%, var(--md-sys-color-secondary) 20%);
}
.alert-info .bi { color: var(--md-sys-color-secondary); }
.alert-info .alert-link { color: var(--md-sys-color-secondary); }

/* Success Alert */
.alert-success {
    background-color: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    border-color: color-mix(in srgb, var(--md-sys-color-tertiary-container) 80%, var(--md-sys-color-tertiary) 20%);
}
.alert-success .bi { color: var(--md-sys-color-tertiary); }
.alert-success .alert-link { color: var(--md-sys-color-tertiary); }

/* Danger Alert */
.alert-danger {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border-color: color-mix(in srgb, var(--md-sys-color-error-container) 80%, var(--md-sys-color-error) 20%);
}
.alert-danger .bi { color: var(--md-sys-color-error); }
.alert-danger .alert-link { color: var(--md-sys-color-error); }

/* Warning Alert */
.alert-warning {
    background-color: #FFF4E5; /* Colore base arancione chiaro */
    color: #663C00; /* Testo scuro su sfondo arancione */
    border-color: #FFDDB9;
}
.alert-warning .bi { color: #995A00; }
.alert-warning .alert-link { color: #995A00; }