/* ============================================================================
   BUTTONS - Unified Button System
   ============================================================================
   Replaces 500+ lines of duplicated button styles across 15+ files
   
   Base class + modifiers pattern:
   - .btn (base)
   - .btn--primary, .btn--secondary, etc. (variants)
   - .btn--sm, .btn--md, .btn--lg (sizes)
   ============================================================================ */

/* ============================================================================
   BASE BUTTON
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn.disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* État désactivé des boutons du produit — DÉPLACÉ tel quel depuis
   `modules/chat/_index.css`, où il vivait (et valait pour TOUTE l'application :
   une feuille de chat qui écrasait le canon). Même rendu qu'avant ; un retour
   au seul `opacity` du canon est une décision visuelle à part. */
.btn-disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
}

.btn .icon {
    font-size: 1rem;
    line-height: 1;
}

/* Une icône posée par `data-icon` dans un bouton est un élément flexible, donc
   rendu en bloc : son SVG en ligne y ouvrait une ligne de texte de 16 px, et un
   bouton à icône mesurait 34 px à côté d'un bouton sans icône à 33 px dans le
   même pied (mesuré le 2026-09-29, TDE : « Annuler » 33, « Appliquer » 34).
   En boîte flexible, l'icône a la hauteur de son SVG et les deux s'alignent. */
.btn [data-icon] {
    display: inline-flex;
    align-items: center;
}

/* ============================================================================
   BUTTON VARIANTS
   ============================================================================ */

/* Primary Button */
.btn--primary {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Secondary Button */
.btn--secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border);
}

.btn--secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--border-heavy);
}

/* Tertiary Button (Ghost) */
.btn--tertiary,
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn--tertiary:hover,
.btn--ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Danger Button */
.btn--danger {
    background: var(--error);
    color: var(--text-inverse);
    border-color: var(--error);
}

.btn--danger:hover {
    background: var(--error-border);
}

/* Success Button */
.btn--success {
    background: var(--success);
    color: var(--text-inverse);
    border-color: var(--success);
}

.btn--success:hover {
    background: var(--success-border);
}

/* Warning Button */
.btn--warning {
    background: var(--warning);
    color: var(--text-inverse);
    border-color: var(--warning);
}

.btn--warning:hover {
    background: var(--warning-border);
}

/* ============================================================================
   BUTTON SIZES
   ============================================================================ */

/* Small Button */
.btn--sm {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.8125rem;
    gap: var(--space-xs);
}

.btn--sm .icon {
    font-size: 0.875rem;
}

/* Medium Button (default, no modifier needed) */

/* Large Button */
.btn--lg {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
    gap: var(--space-md);
}

.btn--lg .icon {
    font-size: 1.125rem;
}

/* ============================================================================
   BUTTON SHAPES
   ============================================================================ */

/* Icon-only button (square) */
.btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    gap: 0;
}

.btn--icon.btn--sm {
    width: 28px;
    height: 28px;
}

/* ============================================================================
   RESPONSIVE ICON-ONLY BUTTONS (Container Query)
   ============================================================================
   Add .btn-responsive-icon to any button and wrap its text in .btn-label.
   When the nearest container (container-type: inline-size) is narrow,
   the label hides and the button becomes icon-only.

   Variants:
     .btn-responsive-icon        → collapses at ≤ 320px (simple layouts)
     .btn-responsive-icon--wide  → collapses at ≤ 500px (crowded title bars)
   ============================================================================ */
.btn-responsive-icon {
    flex-shrink: 0;
    white-space: nowrap;
}

@container (max-width: 320px) {
    .btn-responsive-icon .btn-label {
        display: none;
    }
    .btn-responsive-icon {
        padding: var(--space-xs);
        gap: 0;
        min-width: 28px;
        justify-content: center;
    }
}

/* Wide variant: for contexts where buttons share space with long content */
@container (max-width: 500px) {
    .btn-responsive-icon--wide .btn-label {
        display: none;
    }
    .btn-responsive-icon--wide {
        padding: var(--space-xs);
        gap: 0;
        min-width: 28px;
        justify-content: center;
    }
}

.btn--icon.btn--lg {
    width: 40px;
    height: 40px;
}

/* Round button */
.btn--round {
    border-radius: var(--radius-round);
}

/* Full width button */
.btn--block {
    width: 100%;
}

/* ============================================================================
   BUTTON GROUPS
   ============================================================================ */
.btn-group {
    display: inline-flex;
    gap: var(--space-sm);
}

.btn-group .btn:not(:last-child) {
    margin-right: calc(var(--space-sm) * -1);
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ============================================================================
   SPECIAL STATES
   ============================================================================ */

/* Loading state — the button keeps its label and colours, a small spinner
   precedes it (the label stays readable: « Saving… »). The previous version
   made the text transparent and drew the spinner in currentColor, so the
   spinner was transparent too: nothing showed (2026-10-02). */
.btn--loading {
    pointer-events: none;
    cursor: wait;
}

.btn--loading::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-round);
    animation: spin 0.6s linear infinite;
}

/* Active/Selected state */
.btn--active,
.btn.active {
    background: var(--accent-active);
    color: var(--text-inverse);
    border-color: var(--accent-active);
}

/* ============================================================================
   DARK MODE THEME
   ============================================================================ */

[data-theme="dark"] .btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

[data-theme="dark"] .btn--primary {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

[data-theme="dark"] .btn--secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

[data-theme="dark"] .btn--tertiary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .btn--tertiary:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
}

[data-theme="dark"] .btn--success {
    background: var(--success);
    color: var(--text-inverse);
    border-color: var(--success);
}

[data-theme="dark"] .btn--danger {
    background: var(--error);
    color: var(--text-inverse);
    border-color: var(--error);
}

[data-theme="dark"] .btn--warning {
    background: var(--warning);
    color: var(--text-primary);
    border-color: var(--warning);
}

[data-theme="dark"] .btn--icon {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .btn--icon:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    border-color: var(--border);
}

[data-theme="dark"] .btn--active,
[data-theme="dark"] .btn.active {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}