/* =========================================
   BUTTON SYSTEM
========================================= */

.btn {
    border-radius: var(--app-radius-md);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    transition: var(--app-transition);
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    width: auto;
}

.btn:focus,
.btn:active:focus,
.btn-check:focus + .btn {
    box-shadow: none !important;
}

/* =========================================
   SIZES
========================================= */

.btn-sm {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 10px;
    gap: 6px;
}

.btn-md,
.btn:not(.btn-sm):not(.btn-lg) {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 12px;
    gap: 8px;
}

.btn-lg {
    min-height: 50px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 14px;
    gap: 8px;
}

/* =========================================
   ICONS
========================================= */

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

.btn-sm i,
.btn-sm .bi {
    font-size: 13px;
}

.btn-lg i,
.btn-lg .bi {
    font-size: 15px;
}

/* icon only */
.btn-icon {
    padding: 0 !important;
    aspect-ratio: 1 / 1;
}

.btn-icon.btn-sm {
    width: 36px;
    min-width: 36px;
}

.btn-icon.btn-md,
.btn-icon:not(.btn-sm):not(.btn-lg) {
    width: 44px;
    min-width: 44px;
}

.btn-icon.btn-lg {
    width: 50px;
    min-width: 50px;
}

/* =========================================
   PRIMARY
========================================= */

.btn-primary {
    background: var(--app-primary) !important;
    border: 1px solid var(--app-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--app-primary-hover) !important;
    border-color: var(--app-primary-hover) !important;
    color: #fff !important;
}

/* =========================================
   SECONDARY
========================================= */

.btn-secondary {
    background: #fff !important;
    border: 1px solid var(--app-secondary-border) !important;
    color: var(--app-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--app-secondary-hover-bg) !important;
    border-color: #cbd5e1 !important;
    color: var(--app-primary) !important;
}

/* =========================================
   SUCCESS
========================================= */

.btn-success {
    background: var(--app-success) !important;
    border: 1px solid var(--app-success) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: var(--app-success-hover) !important;
    border-color: var(--app-success-hover) !important;
    color: #fff !important;
}

/* =========================================
   WARNING
========================================= */

.btn-warning {
    background: var(--app-warning) !important;
    border: 1px solid var(--app-warning) !important;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background: var(--app-warning-hover) !important;
    border-color: var(--app-warning-hover) !important;
    color: #fff !important;
}


/* =========================================
   DANGER
========================================= */

.btn-danger {
    background: var(--app-danger) !important;
    border: 1px solid var(--app-danger) !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: var(--app-danger-hover) !important;
    border-color: var(--app-danger-hover) !important;
    color: #fff !important;
}

/* =========================================
   INFO
========================================= */

.btn-info {
    background: #0dcaf0 !important;
    border: 1px solid #0dcaf0 !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: #31d2f2 !important;
    border-color: #31d2f2 !important;
    color: #fff !important;
}


/* =========================================
   SOLID V2 (white hover effect)
========================================= */

/* PRIMARY */
.btn-v2-primary {
    background: var(--app-primary) !important;
    border: 1px solid var(--app-primary) !important;
    color: #fff !important;
}

.btn-v2-primary:hover,
.btn-v2-primary:focus,
.btn-v2-primary:active {
    background: #fff !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary) !important;
}

/* SUCCESS */
.btn-v2-success {
    background: var(--app-success) !important;
    border: 1px solid var(--app-success) !important;
    color: #fff !important;
}

.btn-v2-success:hover,
.btn-v2-success:focus,
.btn-v2-success:active {
    background: #fff !important;
    border-color: var(--app-success) !important;
    color: var(--app-success) !important;
}

/* WARNING */
.btn-v2-warning {
    background: var(--app-warning) !important;
    border: 1px solid var(--app-warning) !important;
    color: #fff !important;
}

.btn-v2-warning:hover,
.btn-v2-warning:focus,
.btn-v2-warning:active {
    background: #fff !important;
    border-color: var(--app-warning) !important;
    color: var(--app-warning) !important;
}

/* DANGER */
.btn-v2-danger {
    background: var(--app-danger) !important;
    border: 1px solid var(--app-danger) !important;
    color: #fff !important;
}

.btn-v2-danger:hover,
.btn-v2-danger:focus,
.btn-v2-danger:active {
    background: #fff !important;
    border-color: var(--app-danger) !important;
    color: var(--app-danger) !important;
}

/* DARK */
.btn-v2-dark {
    background: #212529 !important;
    border: 1px solid #212529 !important;
    color: #fff !important;
}

.btn-v2-dark:hover,
.btn-v2-dark:focus,
.btn-v2-dark:active {
    background: #fff !important;
    border-color: #212529 !important;
    color: #212529 !important;
}

/* INFO */
.btn-v2-info {
    background: #0dcaf0 !important;
    border: 1px solid #0dcaf0 !important;
    color: #fff !important;
}

.btn-v2-info:hover,
.btn-v2-info:focus,
.btn-v2-info:active {
    background: #fff !important;
    border-color: #0dcaf0 !important;
    color: #0dcaf0 !important;
}

/* =========================================
   OUTLINE VARIANTS
========================================= */

/* .btn-outline-primary {
    background: #fff !important;
    border: 1px solid var(--app-primary) !important;
    color: var(--app-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: rgba(30, 58, 138, 0.06) !important;
    border-color: var(--app-primary-hover) !important;
    color: var(--app-primary-hover) !important;
}

.btn-outline-secondary {
    background: #fff !important;
    border: 1px solid var(--app-secondary-border) !important;
    color: var(--app-secondary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background: var(--app-secondary-hover-bg) !important;
    border-color: #cbd5e1 !important;
    color: var(--app-primary) !important;
}

.btn-outline-success {
    background: #fff !important;
    border: 1px solid var(--app-success) !important;
    color: var(--app-success) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background: rgba(15, 118, 110, 0.06) !important;
    border-color: var(--app-success-hover) !important;
    color: var(--app-success-hover) !important;
}


.btn-outline-warning {
    background: #fff !important;
    border: 1px solid var(--app-warning) !important;
    color: var(--app-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background: rgba(217, 119, 6, 0.08) !important;
    border-color: var(--app-warning-hover) !important;
    color: var(--app-warning-hover) !important;
}

.btn-outline-danger {
    background: #fff !important;
    border: 1px solid var(--app-danger) !important;
    color: var(--app-danger) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background: rgba(220, 38, 38, 0.06) !important;
    border-color: var(--app-danger-hover) !important;
    color: var(--app-danger-hover) !important;
} */



/* =========================================
   OUTLINE V2 (surface-based)
========================================= */

.btn-outline-v2-primary {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-outline-primary-border) !important;
    color: var(--app-primary) !important;
}

.btn-outline-v2-primary:hover,
.btn-outline-v2-primary:focus,
.btn-outline-v2-primary:active {
    background: var(--app-outline-primary-hover-bg) !important;
    border-color: var(--app-outline-primary-hover-border) !important;
    color: var(--app-primary-hover) !important;
}

.btn-outline-v2-secondary {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-outline-secondary-border) !important;
    color: var(--app-secondary) !important;
}

.btn-outline-v2-secondary:hover,
.btn-outline-v2-secondary:focus,
.btn-outline-v2-secondary:active {
    background: var(--app-outline-secondary-hover-bg) !important;
    border-color: var(--app-outline-secondary-hover-border) !important;
    color: var(--app-primary) !important;
}

.btn-outline-v2-success {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-outline-success-border) !important;
    color: var(--app-success) !important;
}

.btn-outline-v2-success:hover,
.btn-outline-v2-success:focus,
.btn-outline-v2-success:active {
    background: var(--app-outline-success-hover-bg) !important;
    border-color: var(--app-outline-success-hover-border) !important;
    color: var(--app-success-hover) !important;
}

.btn-outline-v2-warning {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-outline-warning-border) !important;
    color: var(--app-warning) !important;
}

.btn-outline-v2-warning:hover,
.btn-outline-v2-warning:focus,
.btn-outline-v2-warning:active {
    background: var(--app-outline-warning-hover-bg) !important;
    border-color: var(--app-outline-warning-hover-border) !important;
    color: var(--app-warning-hover) !important;
}

.btn-outline-v2-danger {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-outline-danger-border) !important;
    color: var(--app-danger) !important;
}

.btn-outline-v2-danger:hover,
.btn-outline-v2-danger:focus,
.btn-outline-v2-danger:active {
    background: var(--app-outline-danger-hover-bg) !important;
    border-color: var(--app-outline-danger-hover-border) !important;
    color: var(--app-danger-hover) !important;
}
/* =========================================
   LIGHT / GHOST UTILITY
========================================= */

.btn-light {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: var(--app-primary) !important;
}

.btn-ghost {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--app-text-muted) !important;
}

.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active {
    background: #f8fafc !important;
    color: var(--app-primary) !important;
}

/* =========================================
   ICON BUTTON GROUP
========================================= */

.btn-icon-group {
    display: flex;
    align-items: center;
    gap: 8px;
}


.btn-icon-group.compact {
    gap: 6px;
}

.btn-icon-group.right {
    justify-content: flex-end;
}


.btn-icon-group.center {
    justify-content: center;
}



/* =========================================
   BUTTON GROUP , FOR DEMO PURPOSES ONLY
========================================= */

.buttons-demo-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.buttons-demo-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--app-border);
}

.buttons-demo-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.buttons-demo-label {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-group-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 0;
}