@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ouw50eeq2n.bundle.scp.css';

/* /Components/Features/Challenge/ChallengeDiscussionsWidget.razor.rz.scp.css */
/* ===================================
   CHALLENGE DISCUSSIONS WIDGET - BEM ARCHITECTURE
   
   Widget d'affichage des discussions du Challenge 2026
   Architecture: BEM (Block Element Modifier)
   =================================== */

/* ===================================
   BLOCK: challenge-discussions-widget
   =================================== */
.challenge-discussions-widget[b-1crukdkguv] {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-5);
}

/* Modifier: locked state */
.challenge-discussions-widget--locked[b-1crukdkguv] {
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
}

/* ===================================
   ELEMENT: widget-header
   =================================== */
.widget-header[b-1crukdkguv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--color-border-light);
}

.widget-header h3[b-1crukdkguv] {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: var(--font-weight-semibold);
}

.widget-header i[b-1crukdkguv] {
    color: #ffd700;
}

.widget-lock-icon[b-1crukdkguv] {
    color: var(--color-gray-500);
    font-size: var(--font-size-base);
}

.widget-header-link[b-1crukdkguv] {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.widget-header-link:hover[b-1crukdkguv] {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

/* ===================================
   ELEMENT: widget-empty
   =================================== */
.widget-empty[b-1crukdkguv] {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-5);
    color: var(--color-text-secondary);
}

.widget-empty p[b-1crukdkguv] {
    margin: 0;
}

.widget-empty-hint[b-1crukdkguv] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-2);
}

/* ===================================
   ELEMENT: widget-locked
   =================================== */
.widget-locked[b-1crukdkguv] {
    text-align: center;
    padding: var(--spacing-6);
}

.widget-locked__icon[b-1crukdkguv] {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-3);
}

.widget-locked__message[b-1crukdkguv] {
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-4);
}

.widget-locked__button[b-1crukdkguv] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-text-inverse);
    border: none;
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.widget-locked__button:hover[b-1crukdkguv] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.widget-locked__button:active[b-1crukdkguv] {
    transform: translateY(0);
}

.widget-locked__closed[b-1crukdkguv] {
    color: #78350f;
    font-size: var(--font-size-sm);
    background: var(--color-warning-light);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius-md);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
}

.widget-locked__closed i[b-1crukdkguv] {
    color: var(--color-warning);
}

/* ===================================
   ELEMENT: widget-content
   =================================== */
.widget-content[b-1crukdkguv] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* ===================================
   ELEMENT: discussion-item
   =================================== */
.discussion-item[b-1crukdkguv] {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.discussion-item:hover[b-1crukdkguv] {
    background-color: var(--color-surface-secondary);
}

.discussion-avatar[b-1crukdkguv] {
    flex-shrink: 0;
}

.discussion-info[b-1crukdkguv] {
    flex: 1;
    min-width: 0;
}

/* ===================================
   ELEMENT: discussion-header
   =================================== */
.discussion-header[b-1crukdkguv] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-1);
}

.discussion-username[b-1crukdkguv] {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* ===================================
   ELEMENT: discussion-performance
   =================================== */
.discussion-performance[b-1crukdkguv] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-sm);
}

/* Modifier: positive */
.discussion-performance.positive[b-1crukdkguv] {
    color: var(--color-success);
    background-color: var(--color-success-light);
}

/* Modifier: negative */
.discussion-performance.negative[b-1crukdkguv] {
    color: var(--color-danger);
    background-color: var(--color-danger-light);
}

/* Modifier: neutral */
.discussion-performance.neutral[b-1crukdkguv] {
    color: var(--color-gray-600);
    background-color: var(--color-gray-100);
}

/* ===================================
   ELEMENT: discussion-meta
   =================================== */
.discussion-meta[b-1crukdkguv] {
    display: flex;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.discussion-meta i[b-1crukdkguv] {
    margin-right: var(--spacing-1);
}

.discussion-messages[b-1crukdkguv],
.discussion-date[b-1crukdkguv] {
    display: flex;
    align-items: center;
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 768px) {
    .challenge-discussions-widget[b-1crukdkguv] {
        padding: var(--spacing-4);
    }

    .widget-header h3[b-1crukdkguv] {
        font-size: var(--font-size-lg);
    }

    .widget-locked[b-1crukdkguv] {
        padding: var(--spacing-5);
    }

    .widget-locked__button[b-1crukdkguv] {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .widget-header[b-1crukdkguv] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .discussion-item[b-1crukdkguv] {
        padding: var(--spacing-2);
    }

    .discussion-meta[b-1crukdkguv] {
        flex-direction: column;
        gap: var(--spacing-1);
    }
}
/* /Components/Features/Challenge/Forum/ChallengeDiscussionPage.razor.rz.scp.css */
/* ============================================
   Challenge Discussion Page - Scoped CSS
   Architecture BEM avec variables du Design System
   ============================================ */

/* Block: access-denied */
.access-denied[b-jnp9q1sq8o] {
    max-width: 600px;
    margin: var(--spacing-16) auto;
    text-align: center;
    padding: var(--spacing-10);
    background: var(--color-surface);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
}

/* Element: access-denied__icon */
.access-denied__icon[b-jnp9q1sq8o] {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-6);
}

/* Element: access-denied__title */
.access-denied__title[b-jnp9q1sq8o] {
    font-size: var(--font-size-3xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    font-weight: var(--font-weight-semibold);
}

/* Element: access-denied__message */
.access-denied__message[b-jnp9q1sq8o] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-8);
}

/* Element: access-denied__actions */
.access-denied__actions[b-jnp9q1sq8o] {
    padding: var(--spacing-6);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-6);
}

/* Element: access-denied__hint */
.access-denied__hint[b-jnp9q1sq8o] {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-4);
    font-weight: var(--font-weight-medium);
}

/* Element: access-denied__closed */
.access-denied__closed[b-jnp9q1sq8o] {
    padding: var(--spacing-4);
    background: var(--color-warning-light);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-6);
}

/* Element: access-denied__closed-message */
.access-denied__closed-message[b-jnp9q1sq8o] {
    color: #78350f; /* Couleur spécifique pour le message de fermeture */
    font-size: var(--font-size-base);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

/* Modifier: access-denied__closed-message icon color */
.access-denied__closed-message i[b-jnp9q1sq8o] {
    color: var(--color-warning);
}

/* Element: access-denied__back */
.access-denied__back[b-jnp9q1sq8o] {
    margin-top: var(--spacing-6);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .access-denied[b-jnp9q1sq8o] {
        margin: var(--spacing-8) var(--spacing-4);
        padding: var(--spacing-6);
    }

    .access-denied__title[b-jnp9q1sq8o] {
        font-size: var(--font-size-2xl);
    }

    .access-denied__message[b-jnp9q1sq8o] {
        font-size: var(--font-size-base);
    }
}
/* /Components/Shared/Components/BankAccountPicker/BankAccountPicker.razor.rz.scp.css */
/* ============================================
   ✅ BANK ACCOUNT PICKER - Convention BEM
   ============================================
   Composant de sélection de compte bancaire
   BEM Block: bank-account-picker
   
   Note: Réutilise les classes du Design System
   - .form-group pour le conteneur
   - .form-label pour le label
   - .form-select pour le select
   ============================================ */

/* Ce fichier est volontairement minimal car on réutilise
   les styles du Design System définis dans forms-page.css
   
   Les classes suivantes sont déjà stylisées globalement:
   - .form-group : conteneur avec margin-bottom
   - .form-label : label avec font-weight et color
   - .form-select : select stylisé avec border, padding, focus, etc.
   
   Aucun style supplémentaire n'est nécessaire ici.
*/