/* ==========================================================================
   FormTemplateBuilder - Styles pour le form builder
   ========================================================================== */

/* Styles pour les champs marqués pour suppression */
.field-card.marked-for-deletion {
    position: relative !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s ease;
}

.field-card.marked-for-deletion::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 3px dashed #ef4444 !important;
    border-radius: 12px !important;
    pointer-events: none !important;
    z-index: 50 !important;
}

/* Styles pour le focus clavier (navigation avec flèches) */
.field-card.field-focused {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* Focus visible même quand marqué pour suppression */
.field-card.field-focused.marked-for-deletion {
    outline-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

/* ==========================================================================
   Mode sélection - Styles pour la sélection multi-champs
   ========================================================================== */

/* Champ sélectionnable (hover en mode sélection) */
.field-card.field-selectable:hover {
    border-color: #93c5fd !important;
    background-color: #eff6ff !important;
}

/* Champ sélectionné */
.field-card.field-selected {
    border-color: #3b82f6 !important;
    border-width: 2px !important;
    background-color: #eff6ff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* ==========================================================================
   Form Reference - Styles pour le type form_reference
   ========================================================================== */

.form-reference-preview {
    margin-top: 0.5rem;
}

.form-reference-header {
    user-select: none;
    transition: background-color 0.15s ease;
}

.form-reference-header:hover {
    background-color: #f3f4f6;
}

.form-reference-fields {
    max-height: 300px;
    overflow-y: auto;
}

.form-reference-editor .referenced-form-info {
    position: relative;
}

.form-reference-editor .referenced-form-details {
    min-height: 60px;
}

/* Badge pour le nombre de champs référencés */
.form-reference-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: #dbeafe;
    color: #1e40af;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Animation pour le chevron */
[data-chevron] {
    transition: transform 0.2s ease;
}