/**
 * Bouton d'action principal — composant réutilisable
 *
 * Utilisé pour les actions de création sur toutes les pages :
 * "Nouvel article", "Nouvelle facture", "Nouveau client", etc.
 *
 * Usage :
 *   <a class="btn btn-action-primary" href="...">
 *       <i class="ti ti-plus me-1"></i> Nouvel article
 *   </a>
 *
 * Avec dropdown :
 *   <div class="btn-group">
 *       <a class="btn btn-action-primary" href="...">...</a>
 *       <button class="btn btn-action-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
 *           <span class="visually-hidden">Menu</span>
 *       </button>
 *       <ul class="dropdown-menu dropdown-menu-end shadow-sm">...</ul>
 *   </div>
 */

/* Bouton d'action principal */
.btn-action-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    color: #fff;
    border: none;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    letter-spacing: 0.01em;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), 0.25);
    text-decoration: none;
}

.btn-action-primary:hover,
.btn-action-primary:focus {
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.35);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-action-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(var(--brand-primary-rgb), 0.2);
}

/* Icône dans le bouton */
.btn-action-primary i {
    font-size: 1rem;
    vertical-align: -1px;
}

/* Split dropdown : même style pour la flèche */
.btn-group .btn-action-primary.dropdown-toggle-split {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* Dropdown menu propre */
.btn-group .btn-action-primary + .dropdown-menu,
.btn-group .btn-action-primary.dropdown-toggle-split + .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    padding: 0.375rem;
    margin-top: 0.25rem;
}

.btn-group .btn-action-primary + .dropdown-menu .dropdown-item,
.btn-group .btn-action-primary.dropdown-toggle-split + .dropdown-menu .dropdown-item {
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.btn-group .btn-action-primary + .dropdown-menu .dropdown-item:hover,
.btn-group .btn-action-primary.dropdown-toggle-split + .dropdown-menu .dropdown-item:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.06);
}

/* ========================================
   TAILLES — Comme Bootstrap : sm, (défaut), lg
   Usage : class="btn btn-action-primary btn-action-sm"
   ======================================== */

.btn-action-sm,
.btn-action-sm.btn-action-primary,
.btn-action-sm.btn-action-danger {
    padding: 0.35rem 0.85rem;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
}

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

.btn-action-lg,
.btn-action-lg.btn-action-primary,
.btn-action-lg.btn-action-danger {
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}

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

/* Split dropdown tailles */
.btn-group .btn-action-sm.dropdown-toggle-split {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.btn-group .btn-action-lg.dropdown-toggle-split {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* État désactivé (quota atteint, etc.) */
.btn-action-primary.disabled,
.btn-action-primary:disabled {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    opacity: 1;
}

/* ========================================
   VARIANTES
   ======================================== */

/* ========================================
   DROPDOWN ACTIONS (tableaux)
   ======================================== */

.dropdown-menu .dropdown-item {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    margin: 0 0.25rem;
    width: calc(100% - 0.5rem);
    transition: background-color 0.15s ease;
    text-decoration: none !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background-color: rgba(var(--brand-primary-rgb), 0.06) !important;
    color: #1e293b !important;
    text-decoration: none !important;
}

.dropdown-menu .dropdown-item.text-danger:hover {
    background-color: rgba(239, 68, 68, 0.06);
    color: #ef4444 !important;
}

.dropdown-menu .dropdown-item a,
.dropdown-menu a.dropdown-item {
    text-decoration: none !important;
}

/* Variante danger (pour suppression groupée, etc.) */
.btn-action-danger {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-hover) 100%);
    color: #fff;
    border: none;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(var(--color-danger-rgb, 239, 68, 68), 0.25);
    text-decoration: none;
}

.btn-action-danger:hover,
.btn-action-danger:focus {
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0.35);
    transform: translateY(-1px);
    text-decoration: none;
}