/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base */
.btn { padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; border: none; margin: 0.25rem; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.4rem; text-align: center; text-decoration: none; font-weight: 500; transition: all var(--transition-fast); }

/* Variants */
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--primary-dark); }
.btn-secondary { background-color: var(--secondary-color); color: white; text-decoration: none; }
.btn-secondary:hover { background-color: #565e6b; }
.btn-danger { background-color: var(--color-danger); color: white; text-decoration: none; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-success { background-color: var(--color-success); color: white; text-decoration: none; }
.btn-success:hover { filter: brightness(0.92); }
.btn-ghost { background: none; color: var(--secondary-color); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--light-color); color: var(--dark-color); }

/* Sizes */
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }

/* States */
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-loading { display: none; align-items: center; gap: 0.5rem; }
.btn-loading .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spinner 0.8s linear infinite; }
@keyframes btn-spinner { to { transform: rotate(360deg); } }
button[type="submit"].is-loading .btn-text { display: none; }
button[type="submit"].is-loading .btn-loading { display: inline-flex; }

/* Icon button */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg { width: 14px; height: 14px; }

/* Responsive */
@media (max-width: 768px) {
    .btn { width: 100%; margin: 0.25rem 0; justify-content: center; min-height: 44px; }
    .btn-sm { width: auto; min-height: 40px; }

    /* Full-width stacking is for forms; keep side-by-side layouts intact
       in modal footers and bulk-action bars. */
    .modal-footer .btn,
    .modal-actions .btn,
    .bulk-actions .btn,
    .form-actions .btn {
        width: auto;
        flex: 1;
    }
}