/**
 * components.css — Primitives de composants (Niveau 1 refonte DS)
 * ============================================================================
 * Couche de composants token-driven, alimentée par design-tokens.css.
 * Voir .claude/docs/audits/AUDIT_DESIGN_SYSTEM.md
 *
 * Chargé APRÈS Tailwind et les fichiers de thème → peut surcharger les
 * utilitaires Tailwind sans `!important` (spécificité élément+classe).
 *
 * MAJ : 2026-06-23
 *   - N1.1 : fix instabilité bouton + primitives .badge / .ui-input.
 *   - N1.2 : système .btn-primary/.btn-secondary CONSOLIDÉ ici (déplacé de
 *            themes-gi.css), désormais THEME-AGNOSTIC (clair = sombre).
 *            Le remap `bg-red-600`/`bg-blue-600` → orange/cyan est conservé
 *            tel quel (migration explicite des ~22 boutons + .btn-danger au lot suivant).
 *            `!important` conservé (fidèle à l'original) — réduction prévue plus tard.
 */

/* ============================================================================
   1. BOUTONS — système consolidé, theme-agnostic (clair ET sombre identiques)
   .btn-primary = orange GI · .btn-secondary = cyan GI
   (le remap bg-red/bg-blue reproduit le comportement historique de themes-gi)
   ============================================================================ */
.btn-primary,
button.bg-red-600,
button.bg-red-500,
a.bg-red-600,
a.bg-red-500 {
    background: linear-gradient(135deg, var(--gi-web) 0%, #d15316 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(235, 93, 24, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn-primary::before,
button.bg-red-600::before,
button.bg-red-500::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
}
.btn-primary:hover,
button.bg-red-600:hover,
button.bg-red-500:hover,
a.bg-red-600:hover,
a.bg-red-500:hover {
    background: linear-gradient(135deg, #d15316 0%, var(--gi-web) 100%) !important;
    box-shadow: 0 8px 20px rgba(235, 93, 24, 0.35) !important;
    transform: translateY(-2px) !important;
}
.btn-primary:hover::before,
button.bg-red-600:hover::before,
button.bg-red-500:hover::before {
    left: 100% !important;
}
.btn-primary:active,
button.bg-red-600:active,
button.bg-red-500:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(235, 93, 24, 0.2) !important;
}

.btn-secondary,
button.bg-blue-600,
button.bg-blue-500,
a.bg-blue-600,
a.bg-blue-500 {
    background: linear-gradient(135deg, var(--gi-cyan) 0%, #0088c7 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-secondary:hover,
button.bg-blue-600:hover,
button.bg-blue-500:hover,
a.bg-blue-600:hover,
a.bg-blue-500:hover {
    background: linear-gradient(135deg, #0088c7 0%, var(--gi-cyan) 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 159, 227, 0.35) !important;
    transform: translateY(-2px) !important;
}
.btn-secondary:active,
button.bg-blue-600:active,
button.bg-blue-500:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 159, 227, 0.2) !important;
}

/* Variante DESTRUCTIVE (stop / reset / delete) — rouge, sémantique danger.
   À utiliser à la place de `bg-red-600` pour les actions destructives. */
.btn-danger {
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #991B1B 0%, #DC2626 100%) !important;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35) !important;
    transform: translateY(-2px) !important;
}
.btn-danger:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2) !important;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   2. BADGE — primitive neuve (remplace les `bg-green-900 text-green-200` inline)
   Usage : <span class="badge badge-success">Actif</span>
   ============================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--gi-radius-full);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.badge-success { background: rgba(16, 185, 129, 0.14); color: #10B981; }
.badge-warning { background: rgba(245, 158, 11, 0.14); color: #D97706; }
.badge-error   { background: rgba(239, 68, 68, 0.14);  color: #DC2626; }
.badge-info    { background: rgba(0, 159, 227, 0.14);  color: var(--gi-cyan); }
.badge-neutral { background: rgba(107, 114, 128, 0.14); color: var(--color-gray-500, #6B7280); }

/* ============================================================================
   3. INPUT — primitive neuve `.ui-input` (token-driven, theme-stable)
   Reproduit le pattern canonique `bg-surface border border-edge rounded-lg`.
   Usage : <input class="ui-input"> ou <div class="ui-field"><label>..</label><input class="ui-input"></div>
   ============================================================================ */
.ui-field { display: block; margin-bottom: 16px; }
.ui-field > label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}
.ui-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    border-radius: var(--gi-radius-md);
    font-family: var(--font-secondary);
    font-size: 14px;
    transition: border-color var(--gi-transition-fast), box-shadow var(--gi-transition-fast);
}
.ui-input::placeholder { color: var(--text-muted); }
.ui-input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}
.ui-input:disabled { opacity: 0.6; cursor: not-allowed; }