/* ============================================================
   Buttons
   Per design guidelines: primary, secondary, ghost, destructive
   ============================================================ */

/* --- Base Button --- */
.btn {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

.btn:hover {
    background: var(--bg-subtle);
}

/* --- Primary --- */
.btn-primary {
    background: var(--accent);
    color: #0E0F11;
    border-color: var(--accent);
    font-weight: 600;
}

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

/* --- Destructive --- */
.btn-danger {
    border-color: var(--status-red);
    color: var(--status-red);
    background: transparent;
}

.btn-danger:hover {
    background: var(--status-red-bg);
}

/* --- Small --- */
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

/* --- Button Icons --- */
.btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* --- Action Cells (table row buttons) --- */
.actions-cell {
    display: flex;
    gap: var(--space-xs);
}

/* --- Button States (settings save) --- */
.btn-saving {
    opacity: 0.7;
    pointer-events: none;
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btnSpin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

.btn-saved {
    background: var(--status-green) !important;
    border-color: var(--status-green) !important;
    color: #0E0F11 !important;
}

.btn-save-error {
    background: var(--status-red) !important;
    border-color: var(--status-red) !important;
    color: #fff !important;
}

/* --- Disabled --- */
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}