/* Custom CSS for dashboard animations and styling */

/* Fix Bootstrap row negative margin in vault cards */
#pro-vault-cards-container .row.g-0 {
  margin-top: 0 !important;
}

#pro-vault-cards-container > div > div > div > div > div.p-0.col-10 > div {
  margin-top: 0 !important;
}

/* Fix the inner card row margin */
#pro-vault-cards-container .card .row {
  margin-top: 0 !important;
}

/* Ensure all nested rows don't have negative margin */
#pro-vault-cards-container div[class*="col"] .row {
  margin-top: 0 !important;
}

/* Sticky header for vaults overview */
.vaults-sticky-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0px !important;
  z-index: 1050 !important;
  background-color: #141721 !important;
}

/* Ensure rounded corners on cards */
.vaults-filter-card,
.vaults-sticky-header .card {
  border-radius: 8px !important;
  overflow: hidden;
}

.vaults-sticky-header .card-body {
  border-radius: 8px !important;
}

/* Font imports */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap");

/* Font utility classes */
.font-primary {
  font-family: "JetBrains Mono", monospace !important;
}

.font-mono {
  font-family: "JetBrains Mono", monospace !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Specific classes for numbers and metrics */
.metric-number,
.price-value,
.percentage-value,
.tvl-value,
.volume-value,
.numeric-value,
.data-number {
  font-family: "JetBrains Mono", monospace !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 500;
}

/* Table cell numbers */
.dash-table-container .dash-cell {
  font-family: "JetBrains Mono", monospace !important;
  font-variant-numeric: tabular-nums;
}

/* Revenue Dashboard specific styles */
.revenue-metric-card h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card hover effects - disable for cleaner look */
.card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Ensure metric values don't wrap */
h3.font-mono {
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* Dash table improvements */
.dash-table-container .dash-filter input {
  background-color: #252a30 !important;
  color: #ffffff !important;
  border: 1px solid #2a2d36 !important;
}

.dash-table-container .dash-filter--case {
  display: none !important;
}

/* Input numbers */
input[type="number"],
.numeric-input {
  font-family: "JetBrains Mono", monospace !important;
}

@keyframes dots {
  0%,
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.loading-dots {
  animation: dots 1.5s infinite;
}

/* Header/Navbar styling - fix color consistency and remove blue edges */
.navbar {
  background-color: #1a1d24 !important;
  border: none !important;
  border-bottom: 1px solid #2a2d36 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.navbar-dark {
  background-color: #1a1d24 !important;
}

.custom-navbar {
  background-color: #1a1d24 !important;
  border: none !important;
  box-shadow: none !important;
}

.modern-navbar {
  background-color: #1a1d24 !important;
  border: none !important;
  padding: 12px 0 !important;
}

/* Fix navbar container styling */
.navbar .container,
.navbar .container-fluid {
  background-color: #1a1d24 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Fix any Bootstrap container styling that might cause blue edges */
.container {
  background-color: transparent !important;
}

/* Navigation link styling */
.navbar-nav .nav-link {
  color: #9ca3af !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  border: none !important;
  background-color: transparent !important;
}

.navbar-nav .nav-link:hover {
  color: #00d4aa !important;
  background-color: rgba(0, 212, 170, 0.1) !important;
}

.navbar-nav .nav-link.active {
  color: #00d4aa !important;
  background-color: rgba(0, 212, 170, 0.15) !important;
  font-weight: 500 !important;
}

/* Remove any blue borders or outlines */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Fix any Bootstrap default styling that might show blue */
.nav-link {
  border: none !important;
  outline: none !important;
}

.nav-link:focus,
.nav-link:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure full header area has consistent background */
body {
  background-color: #0f1419 !important;
}

.navbar-brand {
  background-color: transparent !important;
  border: none !important;
}

/* Remove any default Bootstrap borders */
* {
  border: none !important;
  outline: none !important;
}

/* Re-add necessary borders only where needed */
.card {
  border: 1px solid #2a2d36 !important;
}

.form-control {
  border: 1px solid #374151 !important;
}

.btn {
  border: 1px solid #374151 !important;
}

/* Navbar specific border fix */
.navbar {
  border-bottom: 1px solid #2a2d36 !important;
}

/* Fix blue section on right of navbar - comprehensive fix */
.navbar::after,
.navbar::before,
.navbar .container::after,
.navbar .container::before,
.navbar .container-fluid::after,
.navbar .container-fluid::before {
  display: none !important;
  content: none !important;
}

/* Remove any blue focus states */
.navbar *:focus,
.navbar *:active,
.navbar *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Ensure navbar cols don't have any unwanted styling */
.navbar .col,
.navbar .col-auto {
  padding: 0 !important;
  background: transparent !important;
}

/* Fix dropdown arrow styling */
.Select-control {
  background-color: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #f8fafc !important;
}

.Select-arrow-zone {
  cursor: pointer !important;
}

.Select-arrow {
  border-color: #9ca3af transparent transparent !important;
  border-style: solid !important;
  border-width: 5px 5px 0 !important;
  content: "" !important;
  display: block !important;
  height: 0 !important;
  margin-top: -ceil(2.5px) !important;
  width: 0 !important;
}

/* Fix Dash dropdown components */
.dash-dropdown .Select-control {
  background-color: #374151 !important;
  border: 1px solid #4b5563 !important;
  color: #f8fafc !important;
}

.dash-dropdown .Select-arrow {
  border-color: #9ca3af transparent transparent !important;
  border-style: solid !important;
  border-width: 5px 5px 0 !important;
}

/* Modern dropdown styling */
.dash-dropdown {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.dash-dropdown .Select-control {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  border-radius: 6px !important;
  color: #f8fafc !important;
  cursor: pointer !important;
  min-height: 38px !important;
}

.dash-dropdown .Select-arrow-zone {
  cursor: pointer !important;
  display: table-cell !important;
  position: relative !important;
  text-align: center !important;
  vertical-align: middle !important;
  width: 25px !important;
  padding-right: 5px !important;
}

.dash-dropdown .Select-arrow {
  border-color: #9ca3af transparent transparent !important;
  border-style: solid !important;
  border-width: 5px 5px 0 !important;
  content: "" !important;
  display: inline-block !important;
  height: 0 !important;
  width: 0 !important;
}

.dash-dropdown .Select-arrow:hover {
  border-top-color: #f8fafc !important;
}

/* Hide the X (clear) button in dropdowns */
.Select-clear-zone,
.Select-clear {
  display: none !important;
}

.dash-dropdown .Select-clear-zone,
.dash-dropdown .Select-clear {
  display: none !important;
}

/* Force navbar full width consistency */
.navbar {
  width: 100% !important;
  background-color: #1a1d24 !important;
  overflow: hidden !important;
}

.navbar .container {
  width: 100% !important;
  max-width: 1400px !important;
  background-color: #1a1d24 !important;
  margin: 0 auto !important;
}

/* Remove any Bootstrap default margins/padding that could cause blue edges */
.navbar .row {
  margin: 0 !important;
  background-color: #1a1d24 !important;
}

.navbar .row > * {
  background-color: #1a1d24 !important;
}

/* Ensure no viewport overflow issues */
html,
body {
  overflow-x: hidden !important;
  background-color: #0f1419 !important;
}

/* Fix for any remaining blue artifacts */
.navbar-toggler {
  border: none !important;
  background-color: transparent !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* DataTable customization - hide unwanted elements */
.dash-table-container .export {
  display: none !important;
}

.dash-table-container .column-header--hide {
  display: none !important;
}

.dash-table-container .column-header--show {
  display: none !important;
}

/* Hide the toggle columns button specifically */
.dash-table-container .show-hide {
  display: none !important;
}

/* Global hide for toggle columns button */
.show-hide {
  display: none !important;
}

/* Hide column hide/show icons in headers */
.column-header--hide {
  display: none !important;
}

/* Remove any small black rectangles or artifacts */
.dash-table-container .dash-table-tooltip {
  background-color: #2d2d2d !important;
  color: white !important;
  border: 1px solid #374151 !important;
}

/* Clean up any table artifacts */
.dash-table-container .dash-spreadsheet-inner {
  background-color: #1e1e1e !important;
}

.dash-table-container .dash-spreadsheet-container {
  background-color: #1e1e1e !important;
}

/* Ensure entire navbar is grey and full width */
.navbar {
  width: 100% !important;
  background-color: #1a1d24 !important;
}

.navbar > div {
  width: 100% !important;
  background-color: #1a1d24 !important;
}

/* Make navbar container match the page content exactly */
.navbar .container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  background-color: transparent !important;
}

/* Ensure main content matches navbar alignment */
#page-content {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* BD Tools page inner container should not add extra padding */
#page-content .container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Pool address input field - smaller text */
#pool-address-input {
  font-size: 0.85rem !important;
}

/* Network detection text alignment */
#network-selector-container {
  padding-top: 0.5rem;
}

/* Main section cards - dark background with borders */
.main-section-card .card-body {
  background-color: #0f1419 !important; /* Same as body background */
  border: 1px solid #21262d !important; /* Subtle border for separation */
}

/* Keep the headers with same background as controls card (no blue underline) */
.main-section-card .card-header {
  background-color: #161b22 !important; /* Same as controls card background */
  border-bottom: 1px solid #374151 !important; /* Subtle border instead of blue */
}

/* Pool address input field styling with Arrakis orange - cleaner design */
.arrakis-input,
#pool-address-input.arrakis-input,
.form-control.arrakis-input {
  border: 1px solid #ff8c00 !important;
  border-radius: 8px !important;
  background-color: #161b22 !important;
  color: #f8fafc !important;
  font-size: 0.95rem !important;
  padding: 12px 40px 12px 16px !important;
  height: 50px !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.arrakis-input:focus,
#pool-address-input.arrakis-input:focus,
.form-control.arrakis-input:focus {
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.1) !important;
  outline: none !important;
  background-color: #161b22 !important;
  color: #f8fafc !important;
}

.arrakis-input::placeholder,
#pool-address-input.arrakis-input::placeholder {
  color: #9ca3af !important;
  font-style: italic !important;
}

/* Info tooltip button styling - floating inside input */
#pool-info-tooltip-target {
  color: #ff8c00 !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

#pool-info-tooltip-target:hover {
  color: #ffb84d !important;
  transform: translateY(-50%) scale(1.15) !important;
}

/* Liquidity info button styling to match pool info button */
#liquidity-info-button {
  color: #ff8c00 !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

#liquidity-info-button:hover {
  color: #ffb84d !important;
  transform: scale(1.15) !important;
}

/* Orange gradient border for search input field */
.arrakis-input-gradient,
#pool-address-input.arrakis-input-gradient,
.form-control.arrakis-input-gradient {
  background: #161b22 !important;
  background-clip: padding-box !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.1) !important;
  position: relative !important;
}

/* Create the animated orange gradient border effect */
.arrakis-input-gradient::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    #ff8c00,
    #ffb84d,
    #ff6b35,
    #ff8c00
  ) !important;
  background-size: 300% 300% !important;
  border-radius: 12px !important;
  z-index: -1 !important;
  animation: gradientBorder 4s ease infinite !important;
}

@keyframes gradientBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.arrakis-input-gradient:focus,
#pool-address-input.arrakis-input-gradient:focus,
.form-control.arrakis-input-gradient:focus {
  background: #161b22 !important;
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.3) !important;
  outline: none !important;
  color: #f8fafc !important;
  transform: translateY(-1px) !important;
}

.arrakis-input-gradient::placeholder,
#pool-address-input.arrakis-input-gradient::placeholder {
  color: #9ca3af !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* Orange radio buttons for TVL chart view */
.arrakis-radio-items .form-check-input[type="radio"]:checked {
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
}

.arrakis-radio-items .form-check-input[type="radio"]:focus {
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
}

.arrakis-radio-items .form-check-input[type="radio"] {
  border-color: #6c757d !important;
  transition: all 0.2s ease !important;
}

.arrakis-radio-items .form-check-input[type="radio"]:hover {
  border-color: #ff8c00 !important;
}

/* Orange switch for NFT positions toggle */
.arrakis-switch .form-check-input:checked {
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
}

.arrakis-switch .form-check-input:focus {
  border-color: #ff8c00 !important;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
}

.arrakis-switch .form-check-input {
  border-color: #6c757d !important;
  transition: all 0.2s ease !important;
}

.arrakis-switch .form-check-input:hover {
  border-color: #ff8c00 !important;
}

/* Card styling without hover effects */
.card {
  position: relative !important;
  background-clip: padding-box !important;
  border: 1px solid #2a2d36 !important;
  transition: none !important;
}

/* Ensure card content stays on top with proper background clipping */
.card .card-header,
.card .card-body {
  position: relative !important;
  z-index: 1 !important;
  background-clip: padding-box !important;
}

/* Fix white tooltips in charts */
.js-plotly-plot .plotly .modebar,
.js-plotly-plot .plotly .modebar-container,
.js-plotly-plot .plotly .modebar-group,
.js-plotly-plot .plotly .modebar-btn,
.js-plotly-plot .plotly .modebar-btn svg {
  background: transparent !important;
  color: #f8fafc !important;
}

/* Fix NFT positions table markdown links - remove underlines and fix alignment */
#nft-positions-table .dash-cell div.dash-cell-value a {
  text-decoration: none !important;
  color: #3b82f6 !important;
  vertical-align: middle !important;
  padding-top: 2px !important;
  display: inline-block !important;
}

#nft-positions-table .dash-cell div.dash-cell-value a:hover {
  text-decoration: none !important;
  color: #60a5fa !important;
}

/* NFT Positions checkboxes - orange styling */
#nft-positions-filter .form-check-input[type="checkbox"],
#nft-select-all-checkbox .form-check-input[type="checkbox"] {
  background-color: transparent !important;
  border: 2px solid #6b7280 !important;
  border-radius: 4px !important;
  width: 18px !important;
  height: 18px !important;
}

#nft-positions-filter .form-check-input[type="checkbox"]:checked,
#nft-select-all-checkbox .form-check-input[type="checkbox"]:checked {
  background-color: #f97316 !important;
  border-color: #f97316 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#nft-positions-filter .form-check-input[type="checkbox"]:focus,
#nft-select-all-checkbox .form-check-input[type="checkbox"]:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
  outline: none !important;
}

#nft-positions-filter .form-check-input[type="checkbox"]:hover,
#nft-select-all-checkbox .form-check-input[type="checkbox"]:hover {
  border-color: #f97316 !important;
}

/* Ensure Select All checkbox label is visible */
#nft-select-all-checkbox {
  display: inline-block !important;
}

#nft-select-all-checkbox .form-check-label {
  color: #ffffff !important;
  margin-left: 5px !important;
}

/* Fix vault button layout - ensure proper wrapping behavior */
#quant-pool-buttons-palm,
#quant-pool-buttons-pro {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  width: 100% !important;
  /* Force immediate layout */
  visibility: visible !important;
}

/* Override Bootstrap's gap-2 class for consistent spacing */
#quant-pool-buttons-palm.gap-2,
#quant-pool-buttons-pro.gap-2 {
  gap: 8px !important;
}

/* Ensure individual vault buttons display properly with proper spacing */
#quant-pool-buttons-palm .btn,
#quant-pool-buttons-pro .btn,
#quant-pool-buttons-palm button,
#quant-pool-buttons-pro button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: 180px !important;
  max-width: 280px !important;
  margin-bottom: 8px !important;
  margin-right: 0px !important;
  /* Use flex display for proper alignment */
  display: flex !important;
}

/* Override any excessive margin-bottom that might cause stacking issues */
#quant-pool-buttons-palm .btn.mb-2,
#quant-pool-buttons-pro .btn.mb-2,
#quant-pool-buttons-palm button.mb-2,
#quant-pool-buttons-pro button.mb-2 {
  margin-bottom: 8px !important;
}

/* For larger screens, allow flex-wrap */
@media (min-width: 1200px) {
  #quant-pool-buttons-palm,
  #quant-pool-buttons-pro {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

/* Arrakis gradient button styling - matches the input field gradient */
.arrakis-button-gradient {
  background: #161b22 !important;
  background-clip: padding-box !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Create the animated orange gradient border effect for button */
.arrakis-button-gradient::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    #ff8c00,
    #ffb84d,
    #ff6b35,
    #ff8c00
  ) !important;
  background-size: 300% 300% !important;
  border-radius: 12px !important;
  z-index: -1 !important;
  animation: gradientBorder 4s ease infinite !important;
}

.arrakis-button-gradient:hover {
  background: #1a1f26 !important;
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.3) !important;
  color: #ffffff !important;
}

.arrakis-button-gradient:active {
  box-shadow: 0 2px 10px rgba(255, 140, 0, 0.2) !important;
}

/* Advanced parameters toggle button */
#advanced-parameters-toggle {
  transition: all 0.3s ease !important;
}

#advanced-parameters-toggle:hover {
  color: #ffffff !important;
  background-color: #ff8c00 !important;
  border-color: #ff8c00 !important;
  transform: translateY(-1px) !important;
}

#advanced-parameters-toggle:focus {
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25) !important;
  outline: none !important;
}

/* Advanced parameters collapse card */
#advanced-parameters-collapse .card {
  transition: all 0.3s ease !important;
}

/* Removed dropdown fixes - using radio buttons instead */

/* Ensure all containers in the chain allow overflow */
.main-section-card,
.main-section-card .card-body,
.bg-dark.border-secondary,
.card,
.card-body,
.row,
.col,
.container,
.container-fluid,
#pool-overview-section,
#pool-overview-section .card,
#pool-overview-section .card-body,
#pool-overview-section .row,
#pool-overview-section .col {
  overflow: visible !important;
}

/* Specific fix for the Analysis Period card */
.main-section-card .card-body .row:last-child .card {
  overflow: visible !important;
}

.main-section-card .card-body .row:last-child .card-body {
  overflow: visible !important;
}

/* Reset all potential stacking contexts to zero */
#price-impact-section,
#liquidity-distribution-section,
#tvl-history-section,
#pool-overview-section,
.main-section-card,
.card,
.card-body,
.card-header,
.row,
.col {
  z-index: 0 !important;
}

/* Ensure dropdown portal is above everything */
.Select-menu-outer {
  z-index: 2147483647 !important;
  position: fixed !important;
}

/* Force all dash components to lower z-index */
.dash-table-container,
.dash-graph,
.dash-spinner-container,
.dash-loading,
.plotly,
.js-plotly-plot {
  z-index: 0 !important;
}

/* Fix for all dropdowns */
.dash-dropdown .Select-menu-outer {
  z-index: 9999 !important;
  position: absolute !important;
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* Ensure dropdown containers allow proper overflow */
.dash-dropdown {
  position: relative !important;
}

/* Fix dropdown menu positioning */
.dash-dropdown .Select-menu {
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* Ensure dropdown options are clickable */
.dash-dropdown .Select-option {
  cursor: pointer !important;
  padding: 8px 12px !important;
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

.dash-dropdown .Select-option:hover {
  background-color: #374151 !important;
}

.dash-dropdown .Select-option.is-selected {
  background-color: #4b5563 !important;
}

.dash-dropdown .Select-option.is-focused {
  background-color: #374151 !important;
}

/* Make sure the dropdown control itself is clickable */
.dash-dropdown .Select-control {
  cursor: pointer !important;
}

/* Additional fixes for dropdown functionality */
.Select.is-open > .Select-control {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

.Select-menu-outer {
  margin-top: 2px !important;
}

/* Ensure parent containers don't clip dropdowns */
.controls-card,
.controls-card .card-body,
.modern-dropdown {
  overflow: visible !important;
}

/* Fix for dropdown arrow functionality */
.dash-dropdown .Select-arrow-zone {
  pointer-events: all !important;
}

/* Ensure dropdown is interactive */
.dash-dropdown.is-disabled .Select-control {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Fix dropdown value display */
.dash-dropdown .Select-value-label {
  color: #e5e7eb !important;
}

/* Specific fix for date range dropdowns */
#quant-date-range-palm,
#quant-date-range-pro {
  z-index: 10 !important;
  position: relative !important;
}

/* Ensure dropdown menu appears on top */
.Select-menu-outer {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Critical fix - remove pointer-events blocking */
.dash-dropdown .Select-value,
.dash-dropdown .Select-placeholder,
.dash-dropdown .Select-input {
  pointer-events: auto !important;
}

/* ULTIMATE FIX - Force dropdown menu to show above everything */
.Select-menu-outer {
  position: fixed !important;
  z-index: 2147483647 !important;
}

/* Removed global overflow fix - no longer needed with radio buttons */

/* Removed tvl-time-period dropdown styles - using radio buttons instead */

/* Fix for modern-dropdown class */
.modern-dropdown .Select-control {
  background-color: #252A30 !important;
  opacity: 1 !important;
}

.modern-dropdown.is-open .Select-control {
  background-color: #252A30 !important;
}

/* Custom radio button styling */
.custom-radio-group .form-check {
  display: inline-block !important;
  margin-right: 15px !important;
}

.custom-radio-group .form-check-input {
  background-color: #252A30 !important;
  border: 1px solid #374151 !important;
  margin-right: 5px !important;
}

.custom-radio-group .form-check-input:checked {
  background-color: #00d4aa !important;
  border-color: #00d4aa !important;
}

.custom-radio-group .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 212, 170, 0.25) !important;
  border-color: #00d4aa !important;
}

.custom-radio-group .form-check-label {
  color: #e5e7eb !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
}

.custom-radio-group .form-check-label:hover {
  color: #00d4aa !important;
}

/* Vaults Overview Specific Styles */
.vault-row {
    transition: all 0.2s ease;
}

.vault-row:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
    border-color: #007bff !important;
}

.hover-row:hover {
    background-color: rgba(0, 123, 255, 0.05) !important;
}

.vault-link:hover {
    color: #007bff !important;
}

.vaults-list {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Token links styling */
.text-info:hover, .text-warning:hover {
    text-decoration: underline !important;
    filter: brightness(1.2);
}

/* Fix dropdown issues for Vaults Overview page */
/* Ensure dropdowns have proper stacking context */
.dash-dropdown {
    position: relative !important;
}

/* Fix dropdown menu visibility and z-index - HIGHEST priority */
.Select-menu-outer {
    z-index: 999999 !important;
    position: absolute !important;
}

/* Ensure the dropdown menu shows when open */
.Select.is-open .Select-menu-outer {
    z-index: 999999 !important;
    position: absolute !important;
}

/* Ensure filter card allows overflow */
.vaults-filter-card {
    overflow: visible !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Lower z-index for content below dropdowns */
#vaults-list-container {
    position: relative !important;
    z-index: 1 !important;
}

/* Make sure dropdown options are visible */
.VirtualizedSelectOption {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.VirtualizedSelectFocusedOption {
    background-color: #374151 !important;
}

/* Additional fix for filter card container */
.card-body {
    overflow: visible !important;
}

/* Ensure dropdown container doesn't clip */
.Select {
    overflow: visible !important;
}

/* Progress bars */
.progress {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Vault row hover effect */
.vault-row.hover-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-color: #4a5568 !important;
}

/* PRO Analytics Sidebar Styles */
.pro-sidebar {
    transition: width 0.3s ease !important;
    min-height: 100vh !important;
}

.pro-sidebar.collapsed {
    width: 80px !important;
}

.pro-sidebar.collapsed .sidebar-vault-item {
    display: none !important;
}

.pro-sidebar.collapsed h5 {
    display: none !important;
}

.pro-sidebar.collapsed #sidebar-collapse-icon {
    transform: rotate(180deg);
}

.sidebar-vault-item:hover {
    background-color: #374151 !important;
}

.sidebar-vault-item.active {
    background-color: #374151 !important;
    border-left: 3px solid #00d4aa !important;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: #1a1d24;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* PRO Vault Card Styles */
.hover-bg:hover {
    background-color: rgba(0, 217, 170, 0.05) !important;
}

/* Modern button hover effects for vault cards */
a[id*="copy-vault-btn"]:hover {
    background-color: #374151 !important;
    color: #00d4aa !important;
    transform: scale(1.05);
}

/* Fix button colors in vault summary - override global orange styles by targeting specific button IDs */
[id*='vault-summary-btn'] {
  background-color: transparent !important;
}

[id*='vault-summary-btn'].btn-outline-primary {
  border-color: #0d6efd !important;
  color: #0d6efd !important;
}

[id*='vault-summary-btn'].btn-outline-primary:hover {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

[id*='vault-summary-btn'].btn-outline-secondary {
  border-color: #6c757d !important;
  color: #6c757d !important;
}

[id*='vault-summary-btn'].btn-outline-secondary:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

[id*='vault-summary-btn'].btn-outline-success {
  border-color: #198754 !important;
  color: #198754 !important;
}

[id*='vault-summary-btn'].btn-outline-success:hover {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

/* Override global orange button styles for outline buttons */
.btn.btn-outline-primary {
  background-color: transparent !important;
  border-color: #0d6efd !important;
  color: #0d6efd !important;
}

.btn.btn-outline-primary:hover {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

.btn.btn-outline-secondary {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
}

.btn.btn-outline-secondary:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

.btn.btn-outline-success {
  background-color: transparent !important;
  border-color: #198754 !important;
  color: #198754 !important;
}

.btn.btn-outline-success:hover {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

.btn.btn-outline-info {
  background-color: transparent !important;
  border-color: #0dcaf0 !important;
  color: #0dcaf0 !important;
}

.btn.btn-outline-info:hover {
  background-color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
  color: #fff !important;
}

.btn.btn-outline-warning {
  background-color: transparent !important;
  border-color: #ffc107 !important;
  color: #ffc107 !important;
}

.btn.btn-outline-warning:hover {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #000 !important;
}

/* Strategy Config Modal Styles */
.strategy-config-modal .modal-header {
  background-color: #1a1d24 !important;
  border-bottom: 1px solid #2a2d36 !important;
}

.strategy-config-modal .modal-body {
  background-color: #0d1117 !important;
}

.strategy-config-modal .modal-content {
  background-color: #0d1117 !important;
  border: 1px solid #2a2d36 !important;
}

/* Force table styling in modal */
.strategy-config-modal table {
  background-color: #0d1117 !important;
}

.strategy-config-modal tbody {
  background-color: #0d1117 !important;
}

.strategy-config-modal td {
  background-color: inherit !important;
}

/* Orange close button for strategy config modal */
.strategy-config-modal .btn-close {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  font-size: 1.5rem !important;
  color: #EC9117 !important;
}

.strategy-config-modal .btn-close::before {
  content: "×" !important;
  color: #EC9117 !important;
  font-weight: bold !important;
}

.strategy-config-modal .btn-close:hover {
  color: #ffa500 !important;
  opacity: 1 !important;
}

.strategy-config-modal .btn-close:hover::before {
  color: #ffa500 !important;
}

/* Vault Notes Modal Styles */
.vault-notes-modal .modal-header {
  background-color: #1a1d24 !important;
  border-bottom: 1px solid #2a2d36 !important;
}

.vault-notes-modal .modal-body {
  background-color: #0d1117 !important;
  padding: 25px !important;
}

.vault-notes-modal .modal-content {
  background-color: #0d1117 !important;
  border: 1px solid #2a2d36 !important;
}

/* Orange close button for vault notes modal */
.vault-notes-modal .btn-close {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  color: #EC9117 !important;
}

.vault-notes-modal .btn-close::before {
  content: "×" !important;
  color: #EC9117 !important;
  font-weight: bold !important;
}

.vault-notes-modal .btn-close:hover {
  color: #ffa500 !important;
  opacity: 1 !important;
}

.vault-notes-modal .btn-close:hover::before {
  color: #ffa500 !important;
}

/* Textarea focus styling */
.vault-notes-modal textarea:focus {
  border-color: #00d4aa !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 212, 170, 0.25) !important;
  outline: none !important;
}

/* PRO Filter Dropdowns - ensure they appear above vault cards */
#pro-network-filter,
#pro-protocol-filter,
#pro-strategy-filter {
  z-index: 1000 !important;
  position: relative !important;
}

#pro-network-filter .Select-menu-outer,
#pro-protocol-filter .Select-menu-outer,
#pro-strategy-filter .Select-menu-outer {
  z-index: 999999 !important;
  position: absolute !important;
}

/* Ensure PRO controls card allows overflow */
.controls-card {
  overflow: visible !important;
  position: relative !important;
  z-index: 500 !important;
}

.controls-card .card-body {
  overflow: visible !important;
}

/* Lower z-index for PRO vault cards */
#pro-vault-cards-container {
  position: relative !important;
  z-index: 1 !important;
}

#pro-vault-cards-container .card {
  position: relative !important;
  z-index: 1 !important;
}