/* ============================================
   BUTTONS - Comprehensive Button System
   ============================================ */

/* Base Button */
.btn { 
  background: transparent; 
  border: none; 
  color: var(--muted); 
  font-weight: 600; 
  display: inline-flex; 
  gap: 8px; 
  align-items: center; 
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  text-decoration: none;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.05);
  color: var(--primary);
}

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

/* Primary Buttons */
.btn-primary { 
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white; 
  padding: 12px 18px; 
  border-radius: 10px;
  border: none;
}

.btn-primary:hover {
  box-shadow: 0 8px 20px rgba(31,182,255,0.3);
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: white;
  text-decoration: none;
}

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

/* Outline Buttons */
.btn-outline {
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent) !important;
  padding: 12px 18px;
  border-radius: 10px;
}

.btn-outline:hover {
  box-shadow: 0 8px 20px rgba(31,182,255,0.3);
  background: rgba(31,182,255,0.05);
  color: var(--accent-dark) !important;
  text-decoration: none;
}

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

/* Color Variants - Solid */
.btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-info { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-dark { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-pink { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }
.btn-indigo { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; padding: 12px 18px; border-radius: 10px; border: none; }

.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, 
.btn-secondary:hover, .btn-dark:hover, .btn-purple:hover, .btn-pink:hover, .btn-indigo:hover {
  color: white;
  text-decoration: none;
}

.btn-success:hover { box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.btn-danger:hover { box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.btn-warning:hover { box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3); background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.btn-info:hover { box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); }
.btn-secondary:hover { box-shadow: 0 8px 20px rgba(107, 114, 128, 0.3); background: linear-gradient(135deg, #4b5563 0%, #374151 100%); }
.btn-dark:hover { box-shadow: 0 8px 20px rgba(31, 41, 55, 0.4); background: linear-gradient(135deg, #111827 0%, #030712 100%); }
.btn-purple:hover { box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); }
.btn-pink:hover { box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3); background: linear-gradient(135deg, #db2777 0%, #be185d 100%); }
.btn-indigo:hover { box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3); background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); }

.btn-success:active, .btn-danger:active, .btn-warning:active, .btn-info:active,
.btn-secondary:active, .btn-dark:active, .btn-purple:active, .btn-pink:active, .btn-indigo:active {
  transform: translateY(0);
}

/* Color Variants - Outline */
.btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info,
.btn-outline-secondary, .btn-outline-dark, .btn-outline-purple, .btn-outline-pink, .btn-outline-indigo, .btn-outline-white {
  background: transparent;
  padding: 12px 18px;
  border-radius: 10px;
  border: 2px solid;
}

.btn-outline-success { border-color: #10b981; color: #10b981; }
.btn-outline-danger { border-color: #ef4444; color: #ef4444; }
.btn-outline-warning { border-color: #f59e0b; color: #f59e0b; }
.btn-outline-info { border-color: #06b6d4; color: #06b6d4; }
.btn-outline-secondary { border-color: #6b7280; color: #6b7280; }
.btn-outline-dark { border-color: #1f2937; color: #1f2937; }
.btn-outline-purple { border-color: #8b5cf6; color: #8b5cf6; }
.btn-outline-pink { border-color: #ec4899; color: #ec4899; }
.btn-outline-indigo { border-color: #6366f1; color: #6366f1; }
.btn-outline-white { border-color: white; color: white; }

.btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover,
.btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-purple:hover, .btn-outline-pink:hover, .btn-outline-indigo:hover, .btn-outline-white:hover {
  text-decoration: none;
}

.btn-outline-success:hover { box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.05); color: #059669; }
.btn-outline-danger:hover { box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); color: #dc2626; }
.btn-outline-warning:hover {
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
    color: #d97706;
}
.btn-outline-info:hover { box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3); background: rgba(6, 182, 212, 0.05); color: #0891b2; }
.btn-outline-secondary:hover { box-shadow: 0 8px 20px rgba(107, 114, 128, 0.3); background: rgba(107, 114, 128, 0.05); color: #4b5563; }
.btn-outline-dark:hover { box-shadow: 0 8px 20px rgba(31, 41, 55, 0.3); background: rgba(31, 41, 55, 0.05); color: #111827; }
.btn-outline-purple:hover { box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.05); color: #7c3aed; }
.btn-outline-pink:hover { box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3); background: rgba(236, 72, 153, 0.05); color: #db2777; }
.btn-outline-indigo:hover { box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3); background: rgba(99, 102, 241, 0.05); color: #4f46e5; }
.btn-outline-white:hover { box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.15); color: white; }

.btn-outline-success:active, .btn-outline-danger:active, .btn-outline-warning:active, .btn-outline-info:active,
.btn-outline-secondary:active, .btn-outline-dark:active, .btn-outline-purple:active, .btn-outline-pink:active, .btn-outline-indigo:active, .btn-outline-white:active {
  transform: translateY(0);
}

/* Light Button */
.btn-light {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #374151;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
}

.btn-light:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  color: #1f2937;
  text-decoration: none;
}

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

/* Ghost Buttons - Minimal */
.btn-ghost { background: transparent; color: var(--text-secondary); padding: 10px 14px; border-radius: 8px; border: none; }
.btn-ghost-primary { background: transparent; color: var(--accent); padding: 10px 14px; border-radius: 8px; border: none; }
.btn-ghost-success { background: transparent; color: #10b981; padding: 10px 14px; border-radius: 8px; border: none; }
.btn-ghost-danger { background: transparent; color: #ef4444; padding: 10px 14px; border-radius: 8px; border: none; }
.btn-ghost-warning { background: transparent; color: #f59e0b; padding: 10px 14px; border-radius: 8px; border: none; }

.btn-ghost:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.05); color: var(--primary); text-decoration: none; }
.btn-ghost-primary:hover { box-shadow: 0 8px 20px rgba(31, 182, 255, 0.2); background: rgba(31, 182, 255, 0.1); color: var(--accent-dark); text-decoration: none; }
.btn-ghost-success:hover { box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.1); color: #059669; text-decoration: none; }
.btn-ghost-danger:hover { box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.1); color: #dc2626; text-decoration: none; }
.btn-ghost-warning:hover { box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.1); color: #d97706; text-decoration: none; }

.btn-ghost:active, .btn-ghost-primary:active, .btn-ghost-success:active, .btn-ghost-danger:active, .btn-ghost-warning:active {
  transform: translateY(0);
}

/* Soft Buttons - Light background */
.btn-soft-primary, .btn-soft-success, .btn-soft-danger, .btn-soft-warning {
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
}

.btn-soft-primary { background: rgba(31, 182, 255, 0.1); color: var(--accent); }
.btn-soft-success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.btn-soft-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.btn-soft-warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.btn-soft-primary:hover, .btn-soft-success:hover, .btn-soft-danger:hover, .btn-soft-warning:hover {
  text-decoration: none;
}

.btn-soft-primary:hover { box-shadow: 0 8px 20px rgba(31, 182, 255, 0.2); background: rgba(31, 182, 255, 0.15); color: var(--accent-dark); }
.btn-soft-success:hover { box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.15); color: #059669; }
.btn-soft-danger:hover { box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.btn-soft-warning:hover { box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.15); color: #d97706; }

.btn-soft-primary:active, .btn-soft-success:active, .btn-soft-danger:active, .btn-soft-warning:active {
  transform: translateY(0);
}

/* Button Sizes */
.btn-sm { padding: 8px 12px; font-size: 0.85rem; min-height: 36px; }
.btn-lg { padding: 14px 24px; font-size: 1rem; min-height: 52px; }
.btn-xl { padding: 16px 32px; font-size: 1.1rem; min-height: 56px; }

/* Button Modifiers */
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-icon { padding: 10px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.btn-icon i { margin: 0; }
.btn-rounded { border-radius: 50px; }
.btn-square { border-radius: 0; }

/* Button States */
.btn:disabled, .btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.btn-loading { position: relative; color: transparent; pointer-events: none; }
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* Button Group */
.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; margin-left: 0; }
.btn-group .btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.btn-group .btn:hover { z-index: 1; }

/* Close Button */
.btn-close {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: transparent;
    color: var(--text-secondary);
    border: none;
}

.btn-close:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary);
    text-decoration: none;
}

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

/* Responsive */
@media (max-width: 768px) {
  .btn { padding: 10px 14px; font-size: 0.9rem; min-height: 44px; }
  .btn-primary, .btn-outline, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary { padding: 10px 14px; }
  .btn-lg { padding: 12px 20px; font-size: 0.95rem; min-height: 48px; }
  .btn-close { width: 36px; height: 36px; font-size: 1.15rem; }
}

@media (max-width: 576px) {
  .btn { padding: 12px 16px; font-size: 0.95rem; min-height: 48px; border-radius: 10px; }
  .btn-primary, .btn-outline, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary { padding: 12px 16px; font-size: 0.95rem; min-height: 48px; }
  .btn-lg { padding: 14px 20px; font-size: 1rem; min-height: 52px; }
  .btn-close { width: 40px; height: 40px; font-size: 1.25rem; right: 8px; top: 8px; }
}