/* FanTR Cooling — Modal de configuração
   Header dark #345a74 + texto branco (mesma linguagem dos card headers).
   Aplicado via className="modal-modern" no dbc.Modal.

   NOTA: configuracao_modal.py é HERDADO DO PSM e será removido na Fase 3.
   Não investir em refatoração estrutural — apenas estilização.
*/

/* ── Conteúdo do modal ────────────────────────────────────── */
.modal-modern .modal-content {
    border: none;
    border-radius: var(--radius-lg);    /* 8px — D05 */
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* ── Header — dark, idêntico ao card-header ─────────────────── */
.modal-modern .modal-header {
    background: var(--color-brand-dark) !important;   /* #345a74 */
    border-bottom: none !important;
    padding: var(--space-3) var(--space-4) !important;   /* 12px 16px */
    gap: var(--space-2);
}

.modal-modern .modal-header .modal-title {
    color: var(--color-text-on-dark) !important;   /* #ffffff */
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);                /* 14px */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Ícone no modal-title: branco com leve opacidade */
.modal-modern .modal-header .modal-title .bi {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px;
    flex-shrink: 0;
}

/* Botão fechar (X): invertido para visibilidade sobre fundo escuro */
.modal-modern .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.75;
    transition: opacity var(--transition-fast);
}

.modal-modern .modal-header .btn-close:hover,
.modal-modern .modal-header .btn-close:focus {
    opacity: 1;
}

/* ── Body — fundo branco, padding consistente ───────────────── */
.modal-modern .modal-body {
    background: var(--color-bg-card) !important;   /* #ffffff */
    padding: 20px 24px !important;
}

/* Separadores hr entre seções */
.modal-modern .modal-body hr {
    border-color: var(--color-border) !important;  /* #c8d9e3 */
    opacity: 1 !important;
    margin: var(--space-2) 0 var(--space-1) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.modal-modern .modal-footer {
    background: var(--color-bg-card) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: var(--space-3) var(--space-4) !important;   /* 12px 16px */
}

/* ── Títulos de seção dentro do body (.config-section-title) ── */
.config-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);                           /* 8px */
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);                /* 12px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand-dark);                /* #345a74 */
    padding: var(--space-3) 0 var(--space-2);      /* 12px 0 8px */
    border-bottom: 2px solid var(--color-brand-dark);
    margin-bottom: var(--space-3);                 /* 12px */
}

.config-section-title .bi {
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* ── Responsividade ─────────────────────────────────────────── */
@media (max-width: 576px) {
    .modal-modern .modal-content {
        border-radius: var(--radius-md);           /* 5px — mais compacto em mobile */
    }

    .modal-modern .modal-body {
        padding: var(--space-3) !important;        /* 12px */
    }

    .modal-modern .modal-footer {
        padding: var(--space-2) var(--space-3) !important;
    }

    .config-section-title {
        font-size: 11px;
    }
}