/* ============================================================================
   BUTTONS
   Solid, flat-modern aesthetic. Cohesive states across all variants.
   ============================================================================ */

.btn {
    --btn-bg:        transparent;
    --btn-bg-hover:  transparent;
    --btn-color:     var(--text-dark);
    --btn-border:    transparent;
    --btn-border-hover: transparent;
    --btn-shadow:    none;
    --btn-ring:      var(--focus-ring-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--border-radius-sm);
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    text-decoration: none;
    box-shadow: var(--btn-shadow);
    transition: var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

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

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

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn .bi,
.btn i { font-size: 1em; line-height: 1; }

/* ── Sizes ─────────────────────────────────────────────────────────────── */
.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-xs);
    gap: 0.35rem;
}
.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius);
}
.btn-icon {
    padding: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
}
.btn-icon.btn-sm { width: 1.85rem; height: 1.85rem; padding: 0.3rem; }

/* ── Primary ───────────────────────────────────────────────────────────── */
.btn-primary {
    --btn-bg:           var(--primary-color);
    --btn-bg-hover:     var(--primary-light-color);
    --btn-color:        #fff;
    --btn-border:       var(--primary-color);
    --btn-border-hover: var(--primary-light-color);
    --btn-shadow:       var(--shadow-xs);
}
.btn-primary:hover { color: #fff; box-shadow: var(--shadow-sm); }

.btn-outline-primary {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--primary-color);
    --btn-color:        var(--primary-color);
    --btn-border:       var(--primary-color);
    --btn-border-hover: var(--primary-color);
}
.btn-outline-primary:hover { color: #fff; }

/* ── Secondary ─────────────────────────────────────────────────────────── */
.btn-secondary {
    --btn-bg:           var(--secondary-color);
    --btn-bg-hover:     #1640b8;
    --btn-color:        #fff;
    --btn-border:       var(--secondary-color);
    --btn-border-hover: #1640b8;
}
.btn-secondary:hover { color: #fff; }

.btn-outline-secondary {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--surface-2);
    --btn-color:        var(--text-default);
    --btn-border:       var(--border-strong);
    --btn-border-hover: var(--text-muted);
}
.btn-outline-secondary:hover { color: var(--text-strong); }

/* ── Success ───────────────────────────────────────────────────────────── */
.btn-success {
    --btn-bg:           var(--success-color);
    --btn-bg-hover:     var(--success-dark);
    --btn-color:        #fff;
    --btn-border:       var(--success-color);
    --btn-border-hover: var(--success-dark);
    --btn-ring:         rgba(22, 163, 74, 0.28);
}
.btn-success:hover { color: #fff; }

.btn-outline-success {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--success-color);
    --btn-color:        var(--success-color);
    --btn-border:       var(--success-color);
    --btn-border-hover: var(--success-color);
    --btn-ring:         rgba(22, 163, 74, 0.28);
}
.btn-outline-success:hover { color: #fff; }

/* ── Warning ───────────────────────────────────────────────────────────── */
.btn-warning {
    --btn-bg:           var(--warning-color);
    --btn-bg-hover:     var(--warning-dark);
    --btn-color:        #fff;
    --btn-border:       var(--warning-color);
    --btn-border-hover: var(--warning-dark);
    --btn-ring:         rgba(217, 119, 6, 0.28);
}
.btn-warning:hover { color: #fff; }

.btn-outline-warning {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--warning-color);
    --btn-color:        var(--warning-color);
    --btn-border:       var(--warning-color);
    --btn-border-hover: var(--warning-color);
    --btn-ring:         rgba(217, 119, 6, 0.28);
}
.btn-outline-warning:hover { color: #fff; }

/* ── Danger ────────────────────────────────────────────────────────────── */
.btn-danger {
    --btn-bg:           var(--danger-color);
    --btn-bg-hover:     var(--danger-dark);
    --btn-color:        #fff;
    --btn-border:       var(--danger-color);
    --btn-border-hover: var(--danger-dark);
    --btn-ring:         rgba(220, 38, 38, 0.28);
}
.btn-danger:hover { color: #fff; }

.btn-outline-danger {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--danger-color);
    --btn-color:        var(--danger-color);
    --btn-border:       var(--danger-color);
    --btn-border-hover: var(--danger-color);
    --btn-ring:         rgba(220, 38, 38, 0.28);
}
.btn-outline-danger:hover { color: #fff; }

/* ── Info ──────────────────────────────────────────────────────────────── */
.btn-info {
    --btn-bg:           var(--info-color);
    --btn-bg-hover:     var(--info-dark);
    --btn-color:        #fff;
    --btn-border:       var(--info-color);
    --btn-border-hover: var(--info-dark);
    --btn-ring:         rgba(8, 145, 178, 0.28);
}
.btn-info:hover { color: #fff; }

.btn-outline-info {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--info-color);
    --btn-color:        var(--info-color);
    --btn-border:       var(--info-color);
    --btn-border-hover: var(--info-color);
    --btn-ring:         rgba(8, 145, 178, 0.28);
}
.btn-outline-info:hover { color: #fff; }

/* ── Light ─────────────────────────────────────────────────────────────── */
.btn-light {
    --btn-bg:           var(--surface-2);
    --btn-bg-hover:     var(--surface-3);
    --btn-color:        var(--text-default);
    --btn-border:       var(--border-color);
    --btn-border-hover: var(--border-strong);
}
.btn-light:hover { color: var(--text-strong); }

.btn-outline-light {
    --btn-bg:           transparent;
    --btn-bg-hover:     rgba(255, 255, 255, 0.12);
    --btn-color:        var(--text-light);
    --btn-border:       rgba(255, 255, 255, 0.4);
    --btn-border-hover: #fff;
}
.btn-outline-light:hover { color: #fff; }

/* ── Accent ────────────────────────────────────────────────────────────── */
.btn-accent {
    --btn-bg:           var(--accent-color);
    --btn-bg-hover:     var(--accent-dark-color);
    --btn-color:        #fff;
    --btn-border:       var(--accent-color);
    --btn-border-hover: var(--accent-dark-color);
    --btn-ring:         rgba(200, 164, 80, 0.32);
}
.btn-accent:hover { color: #fff; }

.btn-outline-accent {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--accent-color);
    --btn-color:        var(--accent-color);
    --btn-border:       var(--accent-color);
    --btn-border-hover: var(--accent-color);
    --btn-ring:         rgba(200, 164, 80, 0.32);
}
.btn-outline-accent:hover { color: #fff; }

/* ── Ghost / link buttons ──────────────────────────────────────────────── */
.btn-ghost {
    --btn-bg:           transparent;
    --btn-bg-hover:     var(--surface-3);
    --btn-color:        var(--text-default);
    --btn-border:       transparent;
    --btn-border-hover: transparent;
}

.btn-link {
    --btn-color:        var(--secondary-color);
    background: transparent;
    border: 0;
    padding: 0.25rem 0.4rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}
.btn-link:hover { color: var(--primary-color); text-decoration: underline; }

/* ── Loading state ─────────────────────────────────────────────────────── */
.btn.is-loading {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kf-spin 0.7s linear infinite;
    color: var(--text-light);
    inset: 0;
    margin: auto;
}
@keyframes kf-spin { to { transform: rotate(360deg); } }

/* ── Button group polish ───────────────────────────────────────────────── */
.btn-group .btn { box-shadow: none; }
.btn-group .btn + .btn { margin-left: -1px; }