/* ========================================
   STEP 5 — MODAL CFI TEST (task #89)
   Saisie contacts test SMS/Email + config Courrier (template + affranchissement).
   ======================================== */

/* Icons colorées par canal (form-section-icon est la base noire/primary) */
.cfi-modal-icon--sms {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
}

.cfi-modal-icon--email {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
}

.cfi-modal-icon--courrier {
    background: linear-gradient(135deg, #f97316, #c2410c);
    color: #fff;
}

/* Liste des contacts — rows saisies dynamiquement */
.cfi-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cfi-contact-row {
    width: 100%;
}

.cfi-contact-row .form-control {
    flex: 1 1 auto;
}

.cfi-contact-remove {
    flex: 0 0 auto;
    min-width: 42px;
}

.cfi-contact-remove:hover {
    color: #fff;
}

/* Task #125 : row SMS avec 4 champs optionnels (civilite/prenom/nom) + tel requis.
   Grid responsive : 4 colonnes sur desktop, 2 sur tablette, 1 sur mobile. */
.cfi-contact-row-sms {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cfi-contact-sms-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 160px;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .cfi-contact-sms-grid {
        grid-template-columns: 80px 1fr;
    }
}

@media (max-width: 480px) {
    .cfi-contact-sms-grid {
        grid-template-columns: 1fr;
    }
}

/* Template Courrier — card présélectionnée */
.cfi-template-card {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.04) 0%, rgba(0, 48, 128, 0.06) 100%);
}

/* Affranchissement — options radio cliquables */
.cfi-affr-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cfi-affr-option {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0;
    transition: all 0.2s ease;
}

.cfi-affr-option:has(input:checked) {
    border-color: var(--color-primary, #003080);
    background: rgba(13, 110, 253, 0.05);
}

.cfi-affr-option .form-check-input {
    margin-top: 0.35rem;
}

.cfi-affr-option .form-check-label {
    gap: 1rem;
    cursor: pointer;
}

/* Badge "complété" sur la card CFI (Step 5 toggle) — placé à droite pour
   ne pas empiéter sur l'icône d'asset (coin supérieur gauche). Cliquable :
   rouvre la modal en mode édition. */
.cfi-channel-complete-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #10b981;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 2;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.cfi-channel-complete-badge:hover,
.cfi-channel-complete-badge:focus-visible {
    background: #059669;
    transform: translateY(-1px);
    outline: none;
}

/* Si la card porte déjà le badge score IA (top-0 end-0), on décale notre badge
   dessous pour éviter la superposition. */
.asset-card-modern:has(.asset-card-badge) .cfi-channel-complete-badge {
    top: 2.4rem;
}

.cfi-channel-complete-badge i {
    font-size: 0.8rem;
}

/* Card CFI invalid (active mais modal non complétée) — feedback visuel.
   Warning aussi à droite pour rester cohérent avec le badge de succès. */
.asset-card-modern.cfi-channel-missing {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.asset-card-modern.cfi-channel-missing::after {
    content: "\F33A"; /* bi-exclamation-triangle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #f59e0b;
    font-size: 1rem;
    z-index: 2;
}

.asset-card-modern.cfi-channel-missing:has(.asset-card-badge)::after {
    top: 2.4rem;
}