/* ==========================================================
   Counter Doodle — Button
   ========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    height: var(--control-height);
    padding: 0 var(--space-14);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-bold);
    line-height: var(--line-none);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn:disabled,
.btn[disabled] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary { background: var(--color-neutral-700); color: var(--color-text-inverse); }
.btn-secondary:hover:not(:disabled) { background: var(--color-neutral-800); }

.btn-success { background: var(--color-success); color: var(--color-text-inverse); }
.btn-danger { background: var(--color-danger); color: var(--color-text-inverse); }
.btn-warning { background: var(--color-warning-strong); color: var(--color-text-inverse); }

.btn-outline {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn-outline:hover:not(:disabled) {
    background: var(--color-surface-alt);
    border-color: var(--color-text-muted);
}

.btn-link {
    height: auto;
    padding: var(--space-4);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
}

.btn-block { width: 100%; }

.btn-sm {
    height: var(--control-height-xs);
    padding: 0 var(--space-10);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-xs);
}

.btn-lg {
    height: var(--control-height-xl);
    padding: 0 var(--space-20);
    font-size: var(--font-size-lg);
}

/* tombol ikon kecil (edit / hapus di tabel) */
.btn-icon {
    width: var(--control-height-xs);
    height: var(--control-height-xs);
    padding: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-secondary);
}

.btn-icon:hover { background: var(--color-surface-alt); color: var(--color-text); }
.btn-icon.danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }