/* ========================================
   STEP 6 - UPLOAD CONTACTS
   Reproduction fidele du design system pour l'import de contacts :
   dropzone, info cards, mapping rows, preview table.
   Les classes generiques loader/progress (loader-container, ai-animation,
   phase-indicators, campaign-progress) vivent dans loader.css.
   ======================================== */

/* ==========================================================================
   Dropzone (ecran empty / index)
   ========================================================================== */
.step6-dropzone {
    border: 2px dashed var(--color-border, #d9e2ec);
    border-radius: var(--border-radius-lg, 12px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-card, #fff);
    cursor: pointer;
}

.step6-dropzone:hover,
.step6-dropzone.is-dragover {
    border-color: var(--color-primary, #003080);
    background: linear-gradient(135deg, rgba(0, 48, 128, 0.04), rgba(57, 191, 239, 0.04));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 48, 128, 0.1);
}

.step6-upload-icon {
    font-size: 4rem;
    line-height: 1;
    color: var(--color-primary, #003080);
}

.step6-selected-file {
    color: var(--color-primary, #003080);
    font-weight: 600;
}

/* ==========================================================================
   Info cards (features IA/RGPD/Mapping) + File info compact
   ========================================================================== */
/*
 * Task #123 : aligne les info-cards Step 6 sur le design system de reference
 * (myCfia-designSystem/assets/css/components/_contact-upload.css lignes 31-56).
 * Copie mecanique des proprietes : fond plat var(--bg-card), icone 48x48px 1.5rem,
 * hover translateY(-4px) + box-shadow. Variable --color-primary-rgb avec fallback
 * pour cohérence si les themes dark-blue/dark-red definissent la variable.
 */
.step6-info-card {
    /* --theme-card-bg pour suivre le theme (bordeaux/marine en dark, blanc
       en light), eviter le blanc dur via --bg-card qui reste fige a #ffffff
       (cf. bug d'heritage CSS variables :root). */
    background: var(--theme-card-bg, #ffffff) !important;
    border-radius: var(--border-radius-md, 8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step6-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

.step6-info-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb, 0, 48, 128), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step6-info-icon {
    font-size: 1.5rem;
    color: var(--color-primary, #003080);
}

/* ==========================================================================
   Mapping rows (suggestions + mapping manuel)
   ========================================================================== */
.step6-mapping-row-success {
    background-color: rgba(25, 135, 84, 0.06);
}

.step6-mapping-row-success:hover {
    background-color: rgba(25, 135, 84, 0.1);
}

.step6-mapping-row-ignored {
    background-color: rgba(108, 117, 125, 0.05);
    color: var(--text-muted, #6c757d);
}

.step6-mapping-row-error {
    background-color: rgba(220, 53, 69, 0.08);
}

.step6-mapping-row-error:hover {
    background-color: rgba(220, 53, 69, 0.12);
}

.step6-mapping-row-error .form-select {
    border-color: var(--bs-danger, #dc3545);
}

/* ==========================================================================
   Mapping legend (ecran mapping manuel)
   ========================================================================== */
.step6-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.step6-legend-dot-required { background: var(--bs-danger, #dc3545); }
.step6-legend-dot-optional { background: var(--bs-secondary, #6c757d); }
.step6-legend-dot-mapped { background: var(--bs-success, #198754); }
.step6-legend-dot-ignored {
    background: transparent;
    border: 1px dashed var(--bs-secondary, #6c757d);
}

/* ==========================================================================
   Preview table
   ========================================================================== */
.step6-preview-row-valid td {
    border-left: 3px solid transparent;
}

.step6-preview-row-warning {
    background-color: rgba(255, 193, 7, 0.08);
}

.step6-preview-row-warning td {
    border-left: 3px solid var(--bs-warning, #ffc107);
}

.step6-preview-row-error {
    background-color: rgba(220, 53, 69, 0.08);
}

.step6-preview-row-error td {
    border-left: 3px solid var(--bs-danger, #dc3545);
}

.step6-preview-status-icon {
    font-size: 1.1rem;
}