/* 🎨 Button Custom Styles - Using Design System Variables */

/* 🧩 Base Button Styles */
.btn {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

/* 🎯 Primary Button */
.btn-primary {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-active);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-border-color: var(--primary-active);
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    background: var(--gradient-primary);
    border: none;
    transform: translateY(0);
}

.btn-primary:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-hover);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-primary);
}

/* 🎯 Secondary Button */
.btn-secondary {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: var(--secondary-hover);
    --bs-btn-hover-border-color: var(--secondary-hover);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: var(--secondary-hover);
    --bs-btn-active-border-color: var(--secondary-hover);
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--secondary);
    --bs-btn-disabled-border-color: var(--secondary);
    background: var(--secondary);
    border: none;
    transform: translateY(0);
}

.btn-secondary:hover {
    background: var(--secondary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.3);
}

.btn-secondary:active {
    background: var(--secondary-hover);
    transform: translateY(0);
}

/* ✅ Success Button */
.btn-success {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--success);
    --bs-btn-disabled-border-color: var(--success);
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    border: none;
    transform: translateY(0);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.3);
}

.btn-success:active {
    transform: translateY(0);
}

/* ❌ Danger Button */
.btn-danger {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52634;
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
    background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%);
    border: none;
    transform: translateY(0);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.3);
}

.btn-danger:active {
    transform: translateY(0);
}

/* ⚠️ Warning Button */
.btn-warning {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    border: none;
    transform: translateY(0);
    color: var(--text-white);
    font-weight: var(--font-weight-semibold);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #ffca2c 0%, #ffc720 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
    color: var(--text-white);
}

.btn-warning:active {
    transform: translateY(0);
    background: linear-gradient(135deg, #ffcd39 0%, #ffc720 100%);
    color: var(--text-white);
}

/* ℹ️ Info Button */
.btn-info {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: #31d2f2;
    --bs-btn-hover-border-color: #25cff2;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--info);
    --bs-btn-disabled-border-color: var(--info);
    background: linear-gradient(135deg, #0dcaf0 0%, #0bb8d8 100%);
    border: none;
    transform: translateY(0);
    color: var(--text-white);
    font-weight: var(--font-weight-semibold);
}

.btn-info:hover {
    background: linear-gradient(135deg, #31d2f2 0%, #25cff2 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 202, 240, 0.4);
    color: var(--text-white);
}

.btn-info:active {
    transform: translateY(0);
    background: linear-gradient(135deg, #3dd5f3 0%, #25cff2 100%);
    color: var(--text-white);
}

/* 🎯 Light Button */
.btn-light {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--gray-100);
    --bs-btn-border-color: var(--gray-100);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--gray-100);
    --bs-btn-disabled-border-color: var(--gray-100);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    transform: translateY(0);
    color: var(--text-white);
}

.btn-light:hover {
    background: linear-gradient(135deg, #d3d4d5 0%, #c6c7c8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    color: var(--text-white);
}

.btn-light:active {
    transform: translateY(0);
    background: linear-gradient(135deg, #c6c7c8 0%, #babbbc 100%);
    color: var(--text-white);
}

/* 🌙 Dark Button */
.btn-dark {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--gray-800);
    --bs-btn-border-color: var(--gray-800);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: var(--gray-700);
    --bs-btn-hover-border-color: var(--gray-700);
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: var(--gray-700);
    --bs-btn-active-border-color: var(--gray-700);
    --bs-btn-disabled-color: var(--text-white);
    --bs-btn-disabled-bg: var(--gray-800);
    --bs-btn-disabled-border-color: var(--gray-800);
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    border: none;
    transform: translateY(0);
}

.btn-dark:hover {
    background: linear-gradient(135deg, #343a40 0%, #495057 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.btn-dark:active {
    transform: translateY(0);
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
}

/* 🧷 Outline Buttons */
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-border-color: var(--primary-active);
    --bs-btn-disabled-color: var(--primary);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-primary:hover::before {
    left: 0;
}

.btn-outline-primary:hover {
    color: var(--text-white);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--secondary);
    --bs-btn-active-bg: var(--secondary-hover);
    --bs-btn-active-border-color: var(--secondary-hover);
    --bs-btn-disabled-color: var(--secondary);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--secondary);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-secondary:hover::before {
    left: 0;
}

.btn-outline-secondary:hover {
    color: var(--text-white);
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.3);
}

.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-color: var(--success);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-success:hover::before {
    left: 0;
}

.btn-outline-success:hover {
    color: var(--text-white);
    border-color: var(--success);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.3);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52634;
    --bs-btn-disabled-color: var(--danger);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-danger:hover::before {
    left: 0;
}

.btn-outline-danger:hover {
    color: var(--text-white);
    border-color: var(--danger);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.3);
}

.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-disabled-color: var(--warning);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-warning:hover::before {
    left: 0;
}

.btn-outline-warning:hover {
    color: var(--text-white);
    border-color: var(--warning);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
}

.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-disabled-color: var(--info);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0dcaf0 0%, #0bb8d8 100%);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-info:hover::before {
    left: 0;
}

.btn-outline-info:hover {
    color: var(--text-white);
    border-color: var(--info);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 202, 240, 0.4);
}

.btn-outline-light {
    --bs-btn-color: var(--gray-100);
    --bs-btn-border-color: var(--gray-100);
    --bs-btn-hover-bg: var(--gray-100);
    --bs-btn-hover-border-color: var(--gray-100);
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-disabled-color: var(--gray-100);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-light:hover::before {
    left: 0;
}

.btn-outline-light:hover {
    color: var(--text-white);
    border-color: var(--gray-100);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.btn-outline-dark {
    --bs-btn-color: var(--gray-800);
    --bs-btn-border-color: var(--gray-800);
    --bs-btn-hover-bg: var(--gray-800);
    --bs-btn-hover-border-color: var(--gray-800);
    --bs-btn-active-bg: var(--gray-700);
    --bs-btn-active-border-color: var(--gray-700);
    --bs-btn-disabled-color: var(--gray-800);
    border-width: 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    transition: left var(--transition-normal);
    z-index: -1;
}

.btn-outline-dark:hover::before {
    left: 0;
}

.btn-outline-dark:hover {
    color: var(--text-white);
    border-color: var(--gray-800);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* 🌟 Special Button Effects */
.btn-lg {
    padding: 12px 24px;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-lg);
}

.btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

/* 🎯 Button Group Styles */
.btn-group .btn {
    margin: 0;
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.btn-group .btn:hover {
    z-index: 1;
}