/* ========================================
   UNIFIED BUTTON SYSTEM FOR YSLEP
   Consistent button styles across all pages
   ======================================== */

/* CSS Variables for Unified Buttons */
:root {
  /* Button Colors */
  --btn-primary: #8B0000;
  --btn-primary-hover: #A52A2A;
  --btn-secondary: #6c757d;
  --btn-secondary-hover: #5a6268;
  --btn-success: #059669;
  --btn-success-hover: #047857;
  --btn-danger: #dc3545;
  --btn-danger-hover: #c82333;
  --btn-warning: #ffc107;
  --btn-warning-hover: #e0a800;
  --btn-info: #17a2b8;
  --btn-info-hover: #138496;
  --btn-light: #f8f9fa;
  --btn-light-hover: #e2e6ea;
  --btn-dark: #343a40;
  --btn-dark-hover: #23272b;
  
  /* Button Spacing */
  --btn-padding-sm: 0.375rem 0.75rem;
  --btn-padding-md: 0.5rem 1rem;
  --btn-padding-lg: 0.75rem 1.5rem;
  --btn-padding-xl: 1rem 2rem;
  
  /* Button Border Radius */
  --btn-radius: 0.5rem;
  --btn-radius-sm: 0.375rem;
  --btn-radius-lg: 0.75rem;
  
  /* Button Shadows */
  --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --btn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
  --btn-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --btn-transition: all 0.2s ease-in-out;
}

/* ========================================
   BASE BUTTON STYLES
   ======================================== */

.unified-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-padding-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  transition: var(--btn-transition);
  box-shadow: var(--btn-shadow);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.unified-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
  text-decoration: none;
}

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

.unified-btn:focus {
  outline: 0;
  box-shadow: var(--btn-shadow), 0 0 0 0.2rem rgba(139, 0, 0, 0.25);
}

.unified-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--btn-shadow);
}

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

.unified-btn-sm {
  padding: var(--btn-padding-sm);
  font-size: 0.75rem;
  border-radius: var(--btn-radius-sm);
}

.unified-btn-lg {
  padding: var(--btn-padding-lg);
  font-size: 1rem;
  border-radius: var(--btn-radius-lg);
}

.unified-btn-xl {
  padding: var(--btn-padding-xl);
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: var(--btn-radius-lg);
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */

/* Primary Buttons */
.unified-btn-primary {
  background: linear-gradient(135deg, var(--btn-primary) 0%, var(--btn-primary-hover) 100%);
  color: #ffffff;
  border-color: var(--btn-primary);
}

.unified-btn-primary:hover {
  background: linear-gradient(135deg, var(--btn-primary-hover) 0%, var(--btn-primary) 100%);
  color: #ffffff;
  border-color: var(--btn-primary-hover);
}

/* Secondary Buttons */
.unified-btn-secondary {
  background: linear-gradient(135deg, var(--btn-secondary) 0%, var(--btn-secondary-hover) 100%);
  color: #ffffff;
  border-color: var(--btn-secondary);
}

.unified-btn-secondary:hover {
  background: linear-gradient(135deg, var(--btn-secondary-hover) 0%, var(--btn-secondary) 100%);
  color: #ffffff;
  border-color: var(--btn-secondary-hover);
}

/* Success Buttons */
.unified-btn-success {
  background: linear-gradient(135deg, var(--btn-success) 0%, var(--btn-success-hover) 100%);
  color: #ffffff;
  border-color: var(--btn-success);
}

.unified-btn-success:hover {
  background: linear-gradient(135deg, var(--btn-success-hover) 0%, var(--btn-success) 100%);
  color: #ffffff;
  border-color: var(--btn-success-hover);
}

/* Danger Buttons */
.unified-btn-danger {
  background: linear-gradient(135deg, var(--btn-danger) 0%, var(--btn-danger-hover) 100%);
  color: #ffffff;
  border-color: var(--btn-danger);
}

.unified-btn-danger:hover {
  background: linear-gradient(135deg, var(--btn-danger-hover) 0%, var(--btn-danger) 100%);
  color: #ffffff;
  border-color: var(--btn-danger-hover);
}

/* Warning Buttons */
.unified-btn-warning {
  background: linear-gradient(135deg, var(--btn-warning) 0%, var(--btn-warning-hover) 100%);
  color: #000000;
  border-color: var(--btn-warning);
}

.unified-btn-warning:hover {
  background: linear-gradient(135deg, var(--btn-warning-hover) 0%, var(--btn-warning) 100%);
  color: #000000;
  border-color: var(--btn-warning-hover);
}

/* Info Buttons */
.unified-btn-info {
  background: linear-gradient(135deg, var(--btn-info) 0%, var(--btn-info-hover) 100%);
  color: #ffffff;
  border-color: var(--btn-info);
}

.unified-btn-info:hover {
  background: linear-gradient(135deg, var(--btn-info-hover) 0%, var(--btn-info) 100%);
  color: #ffffff;
  border-color: var(--btn-info-hover);
}

/* Light Buttons */
.unified-btn-light {
  background: var(--btn-light);
  color: #000000;
  border-color: var(--btn-light);
}

.unified-btn-light:hover {
  background: var(--btn-light-hover);
  color: #000000;
  border-color: var(--btn-light-hover);
}

/* Dark Buttons */
.unified-btn-dark {
  background: linear-gradient(135deg, var(--btn-dark) 0%, var(--btn-dark-hover) 100%);
  color: #ffffff;
  border-color: var(--btn-dark);
}

.unified-btn-dark:hover {
  background: linear-gradient(135deg, var(--btn-dark-hover) 0%, var(--btn-dark) 100%);
  color: #ffffff;
  border-color: var(--btn-dark-hover);
}

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

.unified-btn-outline-primary {
  background: transparent;
  color: var(--btn-primary);
  border-color: var(--btn-primary);
}

.unified-btn-outline-primary:hover {
  background: var(--btn-primary);
  color: #ffffff;
  border-color: var(--btn-primary);
}

.unified-btn-outline-secondary {
  background: transparent;
  color: var(--btn-secondary);
  border-color: var(--btn-secondary);
}

.unified-btn-outline-secondary:hover {
  background: var(--btn-secondary);
  color: #ffffff;
  border-color: var(--btn-secondary);
}

.unified-btn-outline-success {
  background: transparent;
  color: var(--btn-success);
  border-color: var(--btn-success);
}

.unified-btn-outline-success:hover {
  background: var(--btn-success);
  color: #ffffff;
  border-color: var(--btn-success);
}

.unified-btn-outline-danger {
  background: transparent;
  color: var(--btn-danger);
  border-color: var(--btn-danger);
}

.unified-btn-outline-danger:hover {
  background: var(--btn-danger);
  color: #ffffff;
  border-color: var(--btn-danger);
}

.unified-btn-outline-warning {
  background: transparent;
  color: var(--btn-warning);
  border-color: var(--btn-warning);
}

.unified-btn-outline-warning:hover {
  background: var(--btn-warning);
  color: #000000;
  border-color: var(--btn-warning);
}

.unified-btn-outline-info {
  background: transparent;
  color: var(--btn-info);
  border-color: var(--btn-info);
}

.unified-btn-outline-info:hover {
  background: var(--btn-info);
  color: #ffffff;
  border-color: var(--btn-info);
}

.unified-btn-outline-light {
  background: transparent;
  color: var(--btn-light);
  border-color: var(--btn-light);
}

.unified-btn-outline-light:hover {
  background: var(--btn-light);
  color: #000000;
  border-color: var(--btn-light);
}

.unified-btn-outline-dark {
  background: transparent;
  color: var(--btn-dark);
  border-color: var(--btn-dark);
}

.unified-btn-outline-dark:hover {
  background: var(--btn-dark);
  color: #ffffff;
  border-color: var(--btn-dark);
}

/* ========================================
   BUTTON GROUPS
   ======================================== */

.unified-btn-group {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.unified-btn-group .unified-btn {
  margin: 0;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 768px) {
  .unified-btn {
    padding: var(--btn-padding-sm);
    font-size: 0.75rem;
  }
  
  .unified-btn-lg {
    padding: var(--btn-padding-md);
    font-size: 0.875rem;
  }
  
  .unified-btn-xl {
    padding: var(--btn-padding-lg);
    font-size: 1rem;
  }
  
  .unified-btn-group {
    gap: 0.25rem;
  }
}

/* ========================================
   COMPATIBILITY WITH EXISTING CLASSES
   ======================================== */

/* Override existing Bootstrap and custom button styles */
.btn.unified-btn,
.admin-btn.unified-btn,
.vicariate-btn.unified-btn,
.scholar-btn.unified-btn {
  /* Reset any conflicting styles */
  background: inherit !important;
  border: inherit !important;
  color: inherit !important;
  padding: inherit !important;
  border-radius: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  transition: inherit !important;
  box-shadow: inherit !important;
}