/* Small site-specific responsive helpers to improve mobile layout
   These complement the Tailwind build and provide fallbacks for elements
   that need quick, global responsive tweaks. This file is safe to keep
   alongside generated `styles/tailwind.css` and will not be overwritten.
*/

html,
body {
  min-height: 100%;
  margin: 0;
  overflow-y: scroll;
}

body {
  padding: 0;
  background: #111827;
}

/* ========== DESIGN SYSTEM ========== */

/* Glassmorphism Cards */
.glass-card {
  background: rgba(31, 41, 55, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Cards with accent border */
.glass-card-accent {
  background: rgba(31, 41, 55, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid #3b82f6;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Glass Navigation */
.glass-nav {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Gradient Text */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #6EE7B7, #3B82F6);
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #e5e7eb;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Pulse dot for live indicators */
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: pulse-animation 2s ease-in-out infinite;
}

.pulse-dot-success {
  background: #34d399;
}

.pulse-dot-danger {
  background: #f87171;
}

@keyframes pulse-animation {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* Modern Buttons */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(239, 68, 68, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.btn-ghost {
  background: transparent;
  color: #9ca3af;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Modern Form Inputs */
.input-modern {
  width: 100%;
  background: rgba(31, 41, 55, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: white;
  transition: all 0.2s ease;
}

.input-modern:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-modern::placeholder {
  color: #6b7280;
}

/* Form Labels */
.label-uppercase {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.375rem;
}

/* Stat Cards */
.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

/* ========== END DESIGN SYSTEM ========== */

/* Make images responsive */
img {
  max-width: 100%;
  height: auto;
  display: block
}

/* Mobile navigation styles */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.25rem;
}

.mobile-nav {
  /* default: present but hidden via the `hidden` utility; visible state uses transform for smooth reveal */
  display: block;
  position: fixed;
  top: 64px;
  /* below the fixed nav */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(3, 7, 18, 0.98);
  z-index: 9998;
  padding: 1rem;
  overflow-y: auto;
  transform: translateY(-8px);
  transition: transform 220ms ease, opacity 180ms ease;
  opacity: 0;
}

.mobile-nav .mobile-item {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

@media (max-width: 640px) {

  /* show hamburger, hide inline nav items */
  .nav-toggle {
    display: inline-flex !important;
  }

  .site-nav-items {
    display: none !important;
  }

  /* mobile-nav remains present; visibility controlled via `.hidden` class and transform for animation */
  .mobile-nav {
    display: block;
  }
}

/* When a fixed nav is present, avoid it covering page content by adding top padding
     to the document body. The actual height is set via the CSS variable --site-nav-height
     by JavaScript at runtime so it matches the real nav height across pages. */
@media (max-width: 640px) {
  .has-fixed-nav {
    padding-top: var(--site-nav-height, 64px);
  }
}

/* Ensure the hidden state reliably hides the mobile menu even if media queries set display:block */
.mobile-nav.hidden {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(-12px) !important;
}

/* When visible (not hidden) make the menu fully opaque and reset transform */
.mobile-nav:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

/* Password toggle UI: position toggle inside input containers and style as gray */
.password-wrapper {
  position: relative;
  display: block;
}

/* Keep the input full width and reserve space via padding so the toggle does not change its width */
.password-wrapper input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
}

.show-password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #9CA3AF;
  /* gray-400 */
  cursor: pointer;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
}

/* On small screens there's a broad rule that forces all buttons to full width.
   Override that for password toggles so they stay small and absolutely positioned. */
.password-wrapper .show-password-toggle {
  width: auto !important;
  display: inline-flex !important;
  position: absolute !important;
  right: 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 36px !important;
  height: 36px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.25rem !important;
}

.show-password-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

.show-password-toggle:active,
.show-password-toggle.active {
  color: #6B7280;
}

/* End of site.css */

/* Navigation Formatting Fixes for TradeAlgos Pages */
/* Using !important to ensure override of legacy tailwind defaults or missing JIT classes */
.nav-fix-row {
  display: flex !important;
  flex-direction: row !important;
}

.nav-fix-col {
  display: flex !important;
  flex-direction: column !important;
}

.nav-fix-center {
  align-items: center !important;
}

.nav-fix-between {
  justify-content: space-between !important;
}

.nav-fix-gap-2 {
  gap: 0.5rem !important;
}

.nav-fix-gap-3 {
  gap: 0.75rem !important;
}

.nav-fix-gap-4 {
  gap: 1rem !important;
}

.nav-fix-gap-8 {
  gap: 2rem !important;
}

.nav-fix-border-r {
  border-right: 1px solid rgba(75, 85, 99, 0.5) !important;
}

.nav-fix-border-l {
  border-left: 1px solid rgba(75, 85, 99, 0.5) !important;
}

.nav-fix-pr-4 {
  padding-right: 1rem !important;
}

.nav-fix-pl-4 {
  padding-left: 1rem !important;
}

.nav-fix-text-xs {
  font-size: 10px !important;
}

/* Admin Visibility Logic - Explicit Overrides */
#nav-admin {
  display: flex !important;
  align-items: center !important;
}

#nav-admin.hidden {
  display: none !important;
}

/* Auth loading overlay - positioning only, Tailwind handles background */
#auth-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-out;
}

#auth-loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Modern Gradient Spinner */
#auth-loading-overlay .spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  animation: modern-spin 1.2s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite;
}

#auth-loading-overlay .spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #3b82f6, #6366f1, #a855f7, #ec4899);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

#auth-loading-overlay .spinner::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.2));
  filter: blur(12px);
  opacity: 0.8;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes modern-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes glow-pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

#auth-loading-overlay .loading-text {
  margin-top: 24px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

/* ========== MOBILE NAVIGATION ========== */

/* Hamburger Menu Button */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 28px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 60;
}

.hamburger-btn span {
  width: 100%;
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* Desktop nav sections - hide on mobile */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 55;
  padding: 1.5rem;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

.mobile-nav-drawer .nav-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-drawer .nav-section:last-child {
  border-bottom: none;
}

.mobile-nav-drawer .nav-section-title {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.mobile-nav-drawer .nav-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #e5e7eb;
  font-size: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.25rem;
  transition: background-color 0.2s;
}

.mobile-nav-drawer .nav-link:hover,
.mobile-nav-drawer .nav-link:active {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}

/* Mobile breakpoint */
@media (max-width: 1023px) {
  .hamburger-btn {
    display: flex;
  }

  .nav-desktop {
    display: none;
  }
}

/* ========== MOBILE RESPONSIVE HELPERS ========== */

/* Tables responsive wrapper */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .table-responsive table {
    min-width: 600px;
  }

  /* Stack buttons on mobile */
  .btn-stack-mobile {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .btn-stack-mobile button,
  .btn-stack-mobile a {
    width: 100% !important;
  }

  /* Full width cards on mobile */
  .card-mobile-full {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    border-radius: 0 !important;
  }

  /* Smaller padding on mobile */
  .p-mobile-sm {
    padding: 1rem !important;
  }

  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }

  /* Text smaller on mobile */
  .text-mobile-sm {
    font-size: 0.875rem !important;
  }

  /* Grid single column on mobile */
  .grid-mobile-1 {
    grid-template-columns: 1fr !important;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .text-mobile-xs {
    font-size: 0.75rem !important;
  }

  .hide-mobile-xs {
    display: none !important;
  }

  /* Smaller gaps */
  .gap-mobile-xs {
    gap: 0.5rem !important;
  }
}