/* ============================================================================
   LogiFlotte — boutons (BEM : .btn + .btn--variant + .btn--size).
   Variantes : primary (par défaut), ghost, danger, success, warning.
   Tailles : sm. Modificateurs : block.
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.55rem 1.1rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    background: var(--color-primary);
    color: #fff;
    white-space: nowrap;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        opacity var(--transition),
        transform var(--transition);
}

.btn:hover {
    background: var(--color-primary-dark);
    color: #fff;
    text-decoration: none;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.btn[disabled],
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* -- Variantes -- */
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn--ghost:hover {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-primary);
}

.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { background: #b91c1c; }

.btn--success { background: var(--color-success); color: #fff; }
.btn--success:hover { background: #15803d; }

.btn--warning { background: var(--color-warning); color: #fff; }
.btn--warning:hover { background: #b45309; }

/* -- Tailles -- */
.btn--sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}
.btn--sm svg { width: 14px; height: 14px; }

/* Actions secondaires à l'intérieur d'une ligne de tableau. */
.btn--xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.3;
}
.btn--xs svg { width: 12px; height: 12px; }

/* -- Modificateurs -- */
.btn--block {
    display: flex;
    width: 100%;
}

/* -- Boutons text-only / liens action dans tableau -- */
.btn.text--danger:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}