/* ============================================
   UNIFIED BUTTON STYLES - Professional 3D Effect
   ============================================
   Color Scheme:
   - Blue: Edit/Update/Submit/Create (Primary Actions)
   - Pink/Red: Delete/Remove (Destructive Actions)
   - Golden: Coins/Money (Financial Actions)
   - Green: Activate/Validate/Enable (Positive Actions)
   - Orange: Warning/Invite (Attention Actions)
   - Gray: Cancel/Secondary (Neutral Actions)
   - Purple: View/Preview (Informational Actions)
   ============================================ */

/* Base Button Styles - 3D Effect - Applied to all button classes */
button[class*="btn-"],
.btn-primary,
.btn-edit,
.btn-update,
.btn-submit,
.btn-create,
.btn-danger,
.btn-delete,
.btn-remove,
.btn-coin,
.btn-money,
.btn-financial,
.btn-success,
.btn-activate,
.btn-validate,
.btn-enable,
.btn-warning,
.btn-invite,
.btn-secondary,
.btn-cancel,
.btn-view,
.btn-preview,
.btn-inactivate,
.btn-disable,
.btn-invalidate,
.btn-export,
.btn-download {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}

button[class*="btn-"]:not(:disabled),
.btn-primary:not(:disabled),
.btn-edit:not(:disabled),
.btn-update:not(:disabled),
.btn-submit:not(:disabled),
.btn-create:not(:disabled),
.btn-danger:not(:disabled),
.btn-delete:not(:disabled),
.btn-remove:not(:disabled),
.btn-coin:not(:disabled),
.btn-money:not(:disabled),
.btn-financial:not(:disabled),
.btn-success:not(:disabled),
.btn-activate:not(:disabled),
.btn-validate:not(:disabled),
.btn-enable:not(:disabled),
.btn-warning:not(:disabled),
.btn-invite:not(:disabled),
.btn-secondary:not(:disabled),
.btn-cancel:not(:disabled),
.btn-view:not(:disabled),
.btn-preview:not(:disabled),
.btn-inactivate:not(:disabled),
.btn-disable:not(:disabled),
.btn-invalidate:not(:disabled),
.btn-export:not(:disabled),
.btn-download:not(:disabled) {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

button[class*="btn-"]:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-edit:hover:not(:disabled),
.btn-update:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-create:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-delete:hover:not(:disabled),
.btn-remove:hover:not(:disabled),
.btn-coin:hover:not(:disabled),
.btn-money:hover:not(:disabled),
.btn-financial:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-activate:hover:not(:disabled),
.btn-validate:hover:not(:disabled),
.btn-enable:hover:not(:disabled),
.btn-warning:hover:not(:disabled),
.btn-invite:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-cancel:hover:not(:disabled),
.btn-view:hover:not(:disabled),
.btn-preview:hover:not(:disabled),
.btn-inactivate:hover:not(:disabled),
.btn-disable:hover:not(:disabled),
.btn-invalidate:hover:not(:disabled),
.btn-export:hover:not(:disabled),
.btn-download:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

button[class*="btn-"]:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-edit:active:not(:disabled),
.btn-update:active:not(:disabled),
.btn-submit:active:not(:disabled),
.btn-create:active:not(:disabled),
.btn-danger:active:not(:disabled),
.btn-delete:active:not(:disabled),
.btn-remove:active:not(:disabled),
.btn-coin:active:not(:disabled),
.btn-money:active:not(:disabled),
.btn-financial:active:not(:disabled),
.btn-success:active:not(:disabled),
.btn-activate:active:not(:disabled),
.btn-validate:active:not(:disabled),
.btn-enable:active:not(:disabled),
.btn-warning:active:not(:disabled),
.btn-invite:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-cancel:active:not(:disabled),
.btn-view:active:not(:disabled),
.btn-preview:active:not(:disabled),
.btn-inactivate:active:not(:disabled),
.btn-disable:active:not(:disabled),
.btn-invalidate:active:not(:disabled),
.btn-export:active:not(:disabled),
.btn-download:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 
    inset 0 3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

button[class*="btn-"]:disabled,
.btn-primary:disabled,
.btn-edit:disabled,
.btn-update:disabled,
.btn-submit:disabled,
.btn-create:disabled,
.btn-danger:disabled,
.btn-delete:disabled,
.btn-remove:disabled,
.btn-coin:disabled,
.btn-money:disabled,
.btn-financial:disabled,
.btn-success:disabled,
.btn-activate:disabled,
.btn-validate:disabled,
.btn-enable:disabled,
.btn-warning:disabled,
.btn-invite:disabled,
.btn-secondary:disabled,
.btn-cancel:disabled,
.btn-view:disabled,
.btn-preview:disabled,
.btn-inactivate:disabled,
.btn-disable:disabled,
.btn-invalidate:disabled,
.btn-export:disabled,
.btn-download:disabled {
  background: #d3d3d3 !important;
  color: #888 !important;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================
   BLUE - Edit/Update/Submit/Create (Primary)
   ============================================ */
.btn-primary,
.btn-edit,
.btn-update,
.btn-submit,
.btn-create {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-primary:hover:not(:disabled),
.btn-edit:hover:not(:disabled),
.btn-update:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-create:hover:not(:disabled) {
  background: linear-gradient(135deg, #357abd 0%, #2a5f8f 100%);
}

.btn-primary:active:not(:disabled),
.btn-edit:active:not(:disabled),
.btn-update:active:not(:disabled),
.btn-submit:active:not(:disabled),
.btn-create:active:not(:disabled) {
  background: linear-gradient(135deg, #2a5f8f 0%, #1e4a6b 100%);
}

/* Large Primary Buttons */
.btn-primary.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* ============================================
   PINK/RED - Delete/Remove (Destructive)
   ============================================ */
.btn-danger,
.btn-delete,
.btn-remove {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-danger:hover:not(:disabled),
.btn-delete:hover:not(:disabled),
.btn-remove:hover:not(:disabled) {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
}

.btn-danger:active:not(:disabled),
.btn-delete:active:not(:disabled),
.btn-remove:active:not(:disabled) {
  background: linear-gradient(135deg, #a93226 0%, #922b21 100%);
}

/* ============================================
   GOLDEN - Coins/Money (Financial)
   ============================================ */
.btn-coin,
.btn-money,
.btn-financial {
  background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-coin:hover:not(:disabled),
.btn-money:hover:not(:disabled),
.btn-financial:hover:not(:disabled) {
  background: linear-gradient(135deg, #d68910 0%, #b9770e 100%);
}

.btn-coin:active:not(:disabled),
.btn-money:active:not(:disabled),
.btn-financial:active:not(:disabled) {
  background: linear-gradient(135deg, #b9770e 0%, #9c640c 100%);
}

/* ============================================
   GREEN - Activate/Validate/Enable (Positive)
   ============================================ */
.btn-success,
.btn-activate,
.btn-validate,
.btn-enable {
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-success:hover:not(:disabled),
.btn-activate:hover:not(:disabled),
.btn-validate:hover:not(:disabled),
.btn-enable:hover:not(:disabled) {
  background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
}

.btn-success:active:not(:disabled),
.btn-activate:active:not(:disabled),
.btn-validate:active:not(:disabled),
.btn-enable:active:not(:disabled) {
  background: linear-gradient(135deg, #1e8449 0%, #196f3d 100%);
}

/* ============================================
   ORANGE - Warning/Invite (Attention)
   ============================================ */
.btn-warning,
.btn-invite {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-warning:hover:not(:disabled),
.btn-invite:hover:not(:disabled) {
  background: linear-gradient(135deg, #d35400 0%, #ba4a00 100%);
}

.btn-warning:active:not(:disabled),
.btn-invite:active:not(:disabled) {
  background: linear-gradient(135deg, #ba4a00 0%, #a04000 100%);
}

/* ============================================
   GRAY - Cancel/Secondary (Neutral)
   ============================================ */
.btn-secondary,
.btn-cancel {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-secondary:hover:not(:disabled),
.btn-cancel:hover:not(:disabled) {
  background: linear-gradient(135deg, #7f8c8d 0%, #6c757d 100%);
}

.btn-secondary:active:not(:disabled),
.btn-cancel:active:not(:disabled) {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

/* ============================================
   PURPLE - View/Preview (Informational)
   ============================================ */
.btn-view,
.btn-preview {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-view:hover:not(:disabled),
.btn-preview:hover:not(:disabled) {
  background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
}

.btn-view:active:not(:disabled),
.btn-preview:active:not(:disabled) {
  background: linear-gradient(135deg, #7d3c98 0%, #6c3483 100%);
}

/* ============================================
   RED-ORANGE - Inactivate/Disable (Negative)
   ============================================ */
.btn-inactivate,
.btn-disable,
.btn-invalidate {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-inactivate:hover:not(:disabled),
.btn-disable:hover:not(:disabled),
.btn-invalidate:hover:not(:disabled) {
  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

.btn-inactivate:active:not(:disabled),
.btn-disable:active:not(:disabled),
.btn-invalidate:active:not(:disabled) {
  background: linear-gradient(135deg, #bd2130 0%, #a71e2a 100%);
}

/* ============================================
   TEAL - Export/Download (Data Actions)
   ============================================ */
.btn-export,
.btn-download {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-export:hover:not(:disabled),
.btn-download:hover:not(:disabled) {
  background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
}

.btn-export:active:not(:disabled),
.btn-download:active:not(:disabled) {
  background: linear-gradient(135deg, #117a8b 0%, #0f6674 100%);
}

/* ============================================
   Size Variants
   ============================================ */
.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.btn-xl {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* ============================================
   Full Width
   ============================================ */
.btn-full-width {
  width: 100%;
}

/* ============================================
   Icon Spacing
   ============================================ */
.btn-base > span,
.btn-base > svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure icons are visible on all button colors */
.btn-base {
  filter: contrast(1.05);
}