/* FanTR Cooling — Alerts e Status Bar
   Cores semânticas conforme D03:
     info    #067cb1  bg #e8f4fa
     success #2d8653  bg #eaf7f0
     warning #b87700  bg #fff8e6
     error   #c0392b  bg #fdf0ef

   STATUS BAR: componente html.Div com class="status-bar status-bar-{variant}"
   Corrige bug histórico: callbacks emitiam "status-bar-info" (single-dash)
   mas CSS definia "status-bar--info" (double-dash) → variantes nunca aplicadas.

   dbc.Alert: Bootstrap renderiza class="alert alert-{variant}"
   — override completo com design FanTR: borda lateral esquerda 4px +
     fundo tonal + ícone colorido + texto corpo #333333.
*/

/* ══════════════════════════════════════════════════════════════
   STATUS BAR — variantes (single-dash, conforme callbacks)
   ══════════════════════════════════════════════════════════════ */

/* info — azul institucional */
.status-bar-info {
    background-color: var(--color-info-bg) !important;        /* #e8f4fa */
    border-left-color: var(--color-info) !important;          /* #067cb1 */
    color: var(--color-brand-dark) !important;                /* #345a74 */
}
.status-bar-info .bi {
    color: var(--color-info) !important;
}

/* success — verde semântico sóbrio */
.status-bar-success {
    background-color: var(--color-success-bg) !important;     /* #eaf7f0 */
    border-left-color: var(--color-success) !important;       /* #2d8653 */
    color: var(--color-success) !important;
}
.status-bar-success .bi {
    color: var(--color-success) !important;
}

/* warning — âmbar */
.status-bar-warning {
    background-color: var(--color-warning-bg) !important;     /* #fff8e6 */
    border-left-color: var(--color-warning) !important;       /* #b87700 */
    color: var(--color-warning) !important;
}
.status-bar-warning .bi {
    color: var(--color-warning) !important;
}

/* danger — vermelho */
.status-bar-danger {
    background-color: var(--color-error-bg) !important;       /* #fdf0ef */
    border-left-color: var(--color-error) !important;         /* #c0392b */
    color: var(--color-error) !important;
}
.status-bar-danger .bi {
    color: var(--color-error) !important;
}

/* ══════════════════════════════════════════════════════════════
   dbc.Alert — override Bootstrap com design FanTR
   Bootstrap: .alert + .alert-{variant}
   Design: borda lateral 4px + fundo tonal + ícone colorido
           + texto body #333333
   ══════════════════════════════════════════════════════════════ */

.alert {
    border: none !important;
    border-left: 4px solid var(--color-info) !important;  /* fallback — overridden por variante */
    border-radius: var(--radius-md) !important;
    padding: 10px 16px !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    color: var(--color-text-body) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: var(--line-height-base);
}

/* Ícone dentro do alert */
.alert .bi,
.alert i.bi {
    flex-shrink: 0;
    font-size: 15px;
}

/* Botão de fechar do alert Bootstrap */
.alert .btn-close {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
}
.alert .btn-close:hover { opacity: 1; }

/* ── Variantes dbc.Alert ────────────────────────────────────── */

.alert-info {
    background-color: var(--color-info-bg) !important;
    border-left-color: var(--color-info) !important;
}
.alert-info .bi,
.alert-info i.bi { color: var(--color-info) !important; }

.alert-success {
    background-color: var(--color-success-bg) !important;
    border-left-color: var(--color-success) !important;
}
.alert-success .bi,
.alert-success i.bi { color: var(--color-success) !important; }

.alert-warning {
    background-color: var(--color-warning-bg) !important;
    border-left-color: var(--color-warning) !important;
}
.alert-warning .bi,
.alert-warning i.bi { color: var(--color-warning) !important; }

.alert-danger {
    background-color: var(--color-error-bg) !important;
    border-left-color: var(--color-error) !important;
}
.alert-danger .bi,
.alert-danger i.bi { color: var(--color-error) !important; }

/* ── Responsividade ────────────────────────────────────────── */
@media (max-width: 576px) {
    .alert {
        padding: 8px 12px !important;
        font-size: var(--font-size-xs) !important;
    }
    .status-bar {
        font-size: var(--font-size-xs);
        padding: 7px 12px;
    }
}