/**
 * Accessible Button Styles
 * WCAG AA Compliant with 4.5:1+ contrast ratios
 * Based on #9AD9F8 primary brand color
 */

:root {
  /* Primary color scale based on #9AD9F8 */
  --primary-300: #9AD9F8; /* Light blue - for backgrounds/illustrations */
  --primary-400: #5FC0EB; /* Medium blue */
  --primary-500: #2B99CF; /* Main blue - buttons (4.63:1 with white) */
  --primary-600: #1B84B7; /* Dark blue - hover states, text (5.52:1 with white) */
  
  /* Text colors */
  --text-on-primary: #ffffff;
  --text-on-light: #003e73; /* High contrast for light backgrounds */
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.16);
  
  /* Semantic colors (WCAG AA compliant) */
  --success-500: #059669; /* 4.54:1 with white */
  --success-600: #047857; /* 5.77:1 with white */
  --danger-500: #dc2626; /* 5.03:1 with white */
  --danger-600: #b91c1c; /* 6.47:1 with white */
  --warning-500: #d97706; /* 4.54:1 with white */
  --warning-600: #b45309; /* 5.92:1 with white */
  --info-500: var(--primary-500);
  --info-600: var(--primary-600);
  
  /* Neutral colors */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  
  /* Focus ring */
  --focus-ring-color: #003e73;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

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

.btn {
  /* Typography */
  font-family: Inter, Roboto, "Open Sans", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  
  /* Spacing */
  padding: 10px 18px;
  
  /* Visual */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
  
  /* Interaction */
  cursor: pointer;
  transition: background-color 0.18s ease, 
              color 0.18s ease, 
              border-color 0.18s ease, 
              box-shadow 0.18s ease, 
              transform 0.1s ease;
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  
  /* Accessibility */
  -webkit-appearance: button;
}

.btn:focus {
  outline: none; /* We'll use :focus-visible for better UX */
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  z-index: 1;
}

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

/* ============================================
   PRIMARY BUTTONS (Filled)
   ============================================ */

.btn-primary,
.btn-primary-custom {
  background: var(--primary-500);
  color: var(--text-on-primary);
  border-color: transparent;
}

.btn-primary:hover,
.btn-primary-custom:hover {
  background: var(--primary-600);
  color: var(--text-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.btn-primary:active,
.btn-primary-custom:active {
  background: var(--primary-600);
  color: var(--text-on-primary);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary-custom:disabled,
.btn-primary-custom[disabled] {
  background: #d6eaf7;
  color: #7a8a96;
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

/* ============================================
   SECONDARY BUTTONS (Outline)
   ============================================ */

.btn-secondary,
.btn-outline-secondary,
.btn-outline-custom {
  background: #ffffff;
  color: var(--primary-600);
  border-color: var(--primary-400);
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-custom:hover {
  background: #f4fbff;
  color: var(--primary-600);
  border-color: var(--primary-500);
  transform: translateY(-1px);
}

.btn-secondary:active,
.btn-outline-secondary:active,
.btn-outline-custom:active {
  background: #eef7ff;
  color: var(--primary-600);
  border-color: var(--primary-500);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-outline-secondary:disabled,
.btn-outline-secondary[disabled],
.btn-outline-custom:disabled,
.btn-outline-custom[disabled] {
  color: #9aa7b1;
  border-color: #e1e8ef;
  background: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

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

.btn-success {
  background: var(--success-500);
  color: var(--text-on-primary);
  border-color: transparent;
}

.btn-success:hover {
  background: var(--success-600);
  color: var(--text-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.btn-success:active {
  background: var(--success-600);
  color: var(--text-on-primary);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-success:disabled,
.btn-success[disabled] {
  background: #d1fae5;
  color: #6b7280;
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

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

.btn-outline-success:hover {
  background: #f0fdf4;
  color: var(--success-600);
  border-color: var(--success-600);
  transform: translateY(-1px);
}

.btn-outline-success:active {
  background: #dcfce7;
  color: var(--success-600);
  border-color: var(--success-600);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-outline-success:disabled,
.btn-outline-success[disabled] {
  color: #9aa7b1;
  border-color: #e1e8ef;
  background: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

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

.btn-danger {
  background: var(--danger-500);
  color: var(--text-on-primary);
  border-color: transparent;
}

.btn-danger:hover {
  background: var(--danger-600);
  color: var(--text-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.btn-danger:active {
  background: var(--danger-600);
  color: var(--text-on-primary);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-danger:disabled,
.btn-danger[disabled] {
  background: #fee2e2;
  color: #6b7280;
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

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

.btn-outline-danger:hover {
  background: #fef2f2;
  color: var(--danger-600);
  border-color: var(--danger-600);
  transform: translateY(-1px);
}

.btn-outline-danger:active {
  background: #fee2e2;
  color: var(--danger-600);
  border-color: var(--danger-600);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-outline-danger:disabled,
.btn-outline-danger[disabled] {
  color: #9aa7b1;
  border-color: #e1e8ef;
  background: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

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

.btn-warning {
  background: var(--warning-500);
  color: var(--text-on-primary);
  border-color: transparent;
}

.btn-warning:hover {
  background: var(--warning-600);
  color: var(--text-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.btn-warning:active {
  background: var(--warning-600);
  color: var(--text-on-primary);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-warning:disabled,
.btn-warning[disabled] {
  background: #fef3c7;
  color: #6b7280;
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.btn-outline-warning {
  background: #ffffff;
  color: var(--warning-600);
  border-color: var(--warning-500);
}

.btn-outline-warning:hover {
  background: #fffbeb;
  color: var(--warning-600);
  border-color: var(--warning-600);
  transform: translateY(-1px);
}

.btn-outline-warning:active {
  background: #fef3c7;
  color: var(--warning-600);
  border-color: var(--warning-600);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-outline-warning:disabled,
.btn-outline-warning[disabled] {
  color: #9aa7b1;
  border-color: #e1e8ef;
  background: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

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

.btn-info {
  background: var(--info-500);
  color: var(--text-on-primary);
  border-color: transparent;
}

.btn-info:hover {
  background: var(--info-600);
  color: var(--text-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.btn-info:active {
  background: var(--info-600);
  color: var(--text-on-primary);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-info:disabled,
.btn-info[disabled] {
  background: #d6eaf7;
  color: #6b7280;
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

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

.btn-outline-info:hover {
  background: #f4fbff;
  color: var(--info-600);
  border-color: var(--info-500);
  transform: translateY(-1px);
}

.btn-outline-info:active {
  background: #eef7ff;
  color: var(--info-600);
  border-color: var(--info-500);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-outline-info:disabled,
.btn-outline-info[disabled] {
  color: #9aa7b1;
  border-color: #e1e8ef;
  background: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

/* ============================================
   OUTLINE PRIMARY BUTTONS
   ============================================ */

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

.btn-outline-primary:hover {
  background: #f4fbff;
  color: var(--primary-600);
  border-color: var(--primary-500);
  transform: translateY(-1px);
}

.btn-outline-primary:active {
  background: #eef7ff;
  color: var(--primary-600);
  border-color: var(--primary-500);
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-outline-primary:disabled,
.btn-outline-primary[disabled] {
  color: #9aa7b1;
  border-color: #e1e8ef;
  background: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

/* ============================================
   LINK BUTTONS
   ============================================ */

.btn-link {
  background: transparent;
  color: var(--primary-600);
  border: none;
  box-shadow: none;
  padding: 10px 18px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link:hover {
  color: var(--primary-500);
  text-decoration: underline;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.btn-link:active {
  color: var(--primary-600);
  transform: none;
  box-shadow: none;
}

.btn-link:disabled,
.btn-link[disabled] {
  color: #9aa7b1;
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.6;
}

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

.btn-sm {
  font-size: 14px;
  padding: 8px 14px;
}

.btn-lg {
  font-size: 16px;
  padding: 12px 24px;
}

/* ============================================
   BUTTON WIDTHS
   ============================================ */

.btn.w-100 {
  width: 100%;
}

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

.btn-group .btn {
  margin-left: -1px;
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-left: 0;
}

.btn-group .btn:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* ============================================
   BOOTSTRAP CLOSE BUTTON (Preserve default)
   ============================================ */

.btn-close {
  /* Keep Bootstrap's default close button styles */
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: opacity 0.15s ease;
}

.btn-close:hover {
  transform: none;
  box-shadow: none;
}

.btn-close:focus,
.btn-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================
   NAVBAR TOGGLER (Preserve default)
   ============================================ */

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  transition: box-shadow 0.15s ease-in-out;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: none;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  
  .btn:hover,
  .btn:active,
  .btn:focus {
    transform: none;
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: high) {
  .btn {
    border-width: 2px;
  }
  
  .btn:focus-visible {
    outline-width: 4px;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .btn {
    font-size: 14px;
    padding: 9px 16px;
  }
  
  .btn-lg {
    font-size: 15px;
    padding: 11px 20px;
  }
  
  .btn-sm {
    font-size: 13px;
    padding: 7px 12px;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .btn {
    border: 1px solid #000;
    box-shadow: none;
  }
}