/* ==========================================================================
   Button Design System - Premium & Elegant
   ========================================================================== */

/* Base Button Variables */
:root {
  /* Button Colors */
  --btn-primary-start: #007F81;
  --btn-primary-end: #004f51;
  --btn-primary-hover-start: #004f51;
  --btn-primary-hover-end: #003a3c;

  --btn-secondary-start: #e2e8f0;
  --btn-secondary-end: #cbd5e1;
  --btn-secondary-hover-start: #cbd5e1;
  --btn-secondary-hover-end: #94a3b8;

  --btn-outline-color: #007F81;
  --btn-outline-hover-bg: #007F81;

  /* Button Spacing */
  --btn-padding-sm: 0.5rem 1.25rem;
  --btn-padding-md: 0.75rem 1.5rem;
  --btn-padding-lg: 1rem 2rem;

  /* Button Border Radius */
  --btn-border-radius: 12px;
  --btn-border-radius-sm: 8px;
  --btn-border-radius-lg: 16px;

  /* Button Shadows */
  --btn-shadow: 0 4px 16px rgba(0, 127, 129, 0.25);
  --btn-shadow-hover: 0 6px 20px rgba(0, 127, 129, 0.35);
  --btn-shadow-active: 0 2px 8px rgba(0, 127, 129, 0.4);
}

/* ==========================================================================
   Base Button Styles
   ========================================================================== */

.btn {
  /* Reset default styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-md);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--btn-border-radius);

  /* Typography */
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  /* Visual */
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  position: relative;

  /* Animations */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);

  /* Disable default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

.btn:focus {
  outline: none;
  box-shadow: var(--btn-shadow), 0 0 0 3px rgba(0, 127, 129, 0.2);
}

/* ==========================================================================
   Primary Button - Elegant Gradient
   ========================================================================== */

.btn-primary {
  background: linear-gradient(145deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%);
  border-color: var(--btn-primary-start);
  color: #ffffff;
  box-shadow: var(--btn-shadow);
}

.btn-primary:hover {
  background: linear-gradient(145deg, var(--btn-primary-hover-start) 0%, var(--btn-primary-hover-end) 100%);
  border-color: var(--btn-primary-hover-start);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 127, 129, 0.4);
}

/* ==========================================================================
   Secondary Button - Elegant Light
   ========================================================================== */

.btn-secondary {
  background: linear-gradient(145deg, var(--btn-secondary-start) 0%, var(--btn-secondary-end) 100%);
  border-color: var(--btn-secondary-start);
  color: #475569;
  box-shadow: 0 4px 16px rgba(148, 163, 184, 0.25);
  font-weight: var(--fw-semibold);
  color: var(--button-secondary-text);
}

.btn-secondary:hover {
  background: linear-gradient(145deg, var(--btn-secondary-hover-start) 0%, var(--btn-secondary-hover-end) 100%);
  border-color: var(--btn-secondary-hover-start);
  color: #334155;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(148, 163, 184, 0.35);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.4);
}

/* ==========================================================================
   Outline Button - Modern Border
   ========================================================================== */

.btn-outline-primary {
  background: transparent;
  border-color: var(--btn-outline-color);
  color: var(--btn-outline-color);
  box-shadow: 0 2px 8px rgba(0, 127, 129, 0.15);
}

.btn-outline-primary:hover {
  background: var(--btn-outline-hover-bg);
  border-color: var(--btn-outline-hover-bg);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

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

.btn-outline-secondary {
  background: transparent;
  border-color: #94a3b8;
  color: #64748b;
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.15);
}

.btn-outline-secondary:hover {
  background: #94a3b8;
  border-color: #94a3b8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(148, 163, 184, 0.35);
}

/* ==========================================================================
   Button Sizes
   ========================================================================== */

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

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

/* ==========================================================================
   Button Special States
   ========================================================================== */

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   Link Buttons - Elegant Text Links
   ========================================================================== */

.btn-link {
  background: transparent;
  border: none;
  color: var(--btn-outline-color);
  text-transform: none;
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-medium);
  padding: 0.5rem 1rem;
  box-shadow: none;
}

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

/* ==========================================================================
   Dark Theme Button Styles
   ========================================================================== */

[data-theme="dark"] .btn-primary {
  color: var(--text-white);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 16px rgba(77, 182, 172, 0.25);
  font-weight: var(--fw-bold);
}

[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(145deg, #26a69a 0%, #00897b 100%);
  border-color: #26a69a;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 20px rgba(77, 182, 172, 0.35);
}

[data-theme="dark"] .btn-secondary {
  background: linear-gradient(145deg, #4a5568 0%, #2d3748 100%);
  border-color: #4a5568;
  color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(74, 85, 104, 0.25);
}

[data-theme="dark"] .btn-secondary:hover {
  background: linear-gradient(145deg, #2d3748 0%, #1a202c 100%);
  border-color: #2d3748;
  color: #f7fafc;
  box-shadow: 0 6px 20px rgba(74, 85, 104, 0.35);
}

[data-theme="dark"] .btn-outline-primary {
  border-color: #4db6ac;
  color: #4db6ac;
  box-shadow: 0 2px 8px rgba(77, 182, 172, 0.15);
}

[data-theme="dark"] .btn-outline-primary:hover {
  background: #4db6ac;
  border-color: #4db6ac;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 6px 20px rgba(77, 182, 172, 0.35);
}

[data-theme="dark"] .btn-outline-secondary {
  border-color: #718096;
  color: #a0aec0;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background: #718096;
  border-color: #718096;
  color: #f7fafc;
}

[data-theme="dark"] .btn-link {
  color: #4db6ac;
}

[data-theme="dark"] .btn-link:hover {
  color: #26a69a;
}

/* ==========================================================================
   Success, Warning, Danger Buttons (Outline Style)
   ========================================================================== */

/* Success Button */
.btn-success {
  background: transparent;
  color: var(--success-color, #059669);
  border-color: var(--success-color, #059669);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}

.btn-success:hover {
  background: var(--success-color, #059669);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35);
  transform: translateY(-2px);
  border-color: var(--success-color, #059669);
}

/* Warning Button */
.btn-warning {
  background: transparent;
  color: var(--warning-color, #f59e0b);
  border-color: var(--warning-color, #f59e0b);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.btn-warning:hover {
  background: var(--warning-color, #f59e0b);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
  transform: translateY(-2px);
  border-color: var(--warning-color, #f59e0b);
}

/* Danger Button */
.btn-danger {
  background: transparent;
  color: var(--danger-color, #dc2626);
  border-color: var(--danger-color, #dc2626);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.btn-danger:hover {
  background: var(--danger-color, #dc2626);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
  transform: translateY(-2px);
  border-color: var(--danger-color, #dc2626);
}

/* Dark Theme Success, Warning, Danger */
[data-theme="dark"] .btn-success {
  color: var(--success-color-dark, #4ade80);
  border-color: var(--success-color-dark, #4ade80);
  background: transparent;
}

[data-theme="dark"] .btn-success:hover {
  background: var(--success-color-dark, #4ade80);
  color: #1e293b;
  border-color: var(--success-color-dark, #4ade80);
}

[data-theme="dark"] .btn-warning {
  color: var(--warning-color-dark, #fbbf24);
  border-color: var(--warning-color-dark, #fbbf24);
  background: transparent;
}

[data-theme="dark"] .btn-warning:hover {
  background: var(--warning-color-dark, #fbbf24);
  color: #1e293b;
  border-color: var(--warning-color-dark, #fbbf24);
}

[data-theme="dark"] .btn-danger {
  color: var(--danger-color-dark, #f87171);
  border-color: var(--danger-color-dark, #f87171);
  background: transparent;
}

[data-theme="dark"] .btn-danger:hover {
  background: var(--danger-color-dark, #f87171);
  color: #1e293b;
  border-color: var(--danger-color-dark, #f87171);
}

/* ==========================================================================
   Form Submit Buttons - Special Styling
   ========================================================================== */

input[type="submit"].btn,
button[type="submit"].btn {
  border: none;
  cursor: pointer;
}

input[type="submit"].btn-primary,
button[type="submit"].btn-primary {
  background: linear-gradient(145deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%);
  color: #ffffff;
  font-weight: var(--fw-bold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

input[type="submit"].btn-primary:hover,
button[type="submit"].btn-primary:hover {
  background: linear-gradient(145deg, var(--btn-primary-hover-start) 0%, var(--btn-primary-hover-end) 100%);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Dark Theme Submit Buttons */
[data-theme="dark"] input[type="submit"].btn-primary,
[data-theme="dark"] button[type="submit"].btn-primary {
  background: linear-gradient(145deg, #4db6ac 0%, #26a69a 100%);
  border-color: #4db6ac;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 16px rgba(77, 182, 172, 0.25);
}

[data-theme="dark"] input[type="submit"].btn-primary:hover,
[data-theme="dark"] button[type="submit"].btn-primary:hover {
  background: linear-gradient(145deg, #26a69a 0%, #00897b 100%);
  border-color: #26a69a;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 6px 20px rgba(77, 182, 172, 0.35);
}

/* ==========================================================================
   Dropdown Menu Z-Index Fix
   ========================================================================== */

.dropdown-menu,
.dropdown-menu.show {
  z-index: 9999 !important;
}

/* Bootstrap Dropdown Menu Override */
.dropdown-menu[data-bs-popper] {
  z-index: 9999 !important;
}

/* Ensure dropdown parent has proper stacking context */
.dropdown,
.nav-item.dropdown {
  position: relative;
}

/* ==========================================================================
   Responsive Button Styles
   ========================================================================== */

@media (max-width: 768px) {
  .btn {
    font-size: 0.9rem;
    padding: 0.625rem 1.25rem;
  }

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

  .btn-sm {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }
}

@media (max-width: 576px) {
  .btn {
    font-size: 0.875rem;
    letter-spacing: var(--ls-normal);
  }

  .btn-block {
    margin-bottom: 0.75rem;
  }
}

/* ==========================================================================
   Premium Gradient Button (универсальный)
   ========================================================================== */

.btn-primary-gradient {
  background: linear-gradient(145deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%);
  border: none;
  color: #fff;
  box-shadow: var(--btn-shadow);
  font-weight: var(--fw-bold);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary-gradient:hover, .btn-primary-gradient:focus {
  background: linear-gradient(145deg, var(--btn-primary-hover-start) 0%, var(--btn-primary-hover-end) 100%);
  color: #fff;
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.btn-primary-gradient:active {
  background: var(--btn-primary-hover-end);
  color: #fff;
  box-shadow: var(--btn-shadow-active);
  transform: none;
}

[data-theme="dark"] .btn-primary-gradient {
  background: linear-gradient(145deg, #26a69a 0%, #00897b 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(77, 182, 172, 0.25);
}

[data-theme="dark"] .btn-primary-gradient:hover, [data-theme="dark"] .btn-primary-gradient:focus {
  background: linear-gradient(145deg, #00897b 0%, #004f51 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(77, 182, 172, 0.35);
}