/**
 * Standardized responsive styles for indicators
 * Following a mobile-first approach with defined breakpoints:
 * - Mobile: 320px - 480px
 * - Tablets: 481px - 768px
 * - Small laptops: 769px - 1024px
 * - Desktops: 1025px - 1200px
 */

/* Base styling for all screen sizes */
.indicators-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  width: 100%;
}

.indicator-box {
  flex: 1;
  min-width: 200px;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

/* Fix for Market Stats Container to ensure proper scrolling */
.market-stats-container {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  padding: 10px;
  gap: 10px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.market-stats-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Ensure stat cards have proper sizing */
.stat-card {
  padding: 5px;
  margin-bottom: 10px;
}

/* Fix for tooltip overflow on small devices */
.info-tooltip::after {
  max-width: 80vw !important;
  width: auto !important;
  min-width: 150px !important;
  font-size: 10px !important;
  white-space: normal !important;
  text-align: center !important;
}

/* Mobile devices (320px - 480px) */
@media (max-width: 735px) {
  /* Fix for the market stats container on mobile and small tablets */
  .market-stats-container {
    flex-direction: column;
    padding: 8px 20px !important; /* Increased horizontal padding */
    width: 100% !important; /* Use full width */
    align-items: center !important; /* Center items */
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  
  .stat-card {
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    margin: 4px 5px 4px 5px !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    /* Remove any height restrictions that could limit performers display */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Specific styling for each card type */
  .market-insights-card,
  .top-performers-card,
  .bot-controller-card {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important; /* Use full width on mobile */
    max-width: 100% !important; /* Ensure no max-width restriction */
  }
  
  /* Ensure top performers has bottom spacing on mobile */
  .top-performers-card {
    margin-bottom: 25px !important; /* Prevent overlap with price table */
  }
  
  /* Ensure top performers card has sufficient height to show all 7 items */
  .top-performers-card {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .top-performers-card .performers-container {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex: none !important;
  }
  
  .top-performers-card .performers-section {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex: none !important;
  }
  
  .top-performers-card .performers-list {
    max-height: none !important;
    overflow-y: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Force all 7 performers to be visible */
  .top-performers-card .performer-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 28px !important;
  }
  
  /* Ensure no items are hidden beyond the 7th */
  .top-performers-card .performer-item:nth-child(-n+7) {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* No need for individual margins since we're handling it at the container level */
  
  /* GRID LAYOUT for indicators */
  .combined-indicators-container {
    display: grid !important; /* Ensure grid display */
    grid-template-columns: 1fr 1fr !important; /* 2 columns */
    grid-template-rows: auto auto !important; /* 2 rows */
    gap: 8px !important;
    width: 100% !important;
    padding: 5px 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure market insights container uses full width */
  .market-insights-card .combined-indicators-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Style each indicator box in the grid */
  .combined-indicators-container .indicator-box {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important; /* Increased padding */
    box-sizing: border-box !important;
  }
}

/* Additional mobile adjustments for indicator components */
@media (max-width: 480px) {
  /* Ensure market insights and all cards use 100% width on mobile */
  .market-stats-container .stat-card,
  .market-insights-card,
  .top-performers-card,
  .bot-controller-card {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 5px 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure proper display of market insights in the container */
  .market-insights-card .combined-indicators-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure indicator boxes use full width of container */
  .market-insights-card .indicator-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Change grid layout to single column for market insights on smallest screens */
  .market-insights-card .combined-indicators-container {
    display: grid !important;
    grid-template-columns: 1fr !important; /* 1 column */
    grid-template-rows: auto auto auto auto !important; /* 4 rows */
  }
  /* Adjust sizing of indicator components */
  /* Specific sizing adjustments for very small screens only */
  .gauge-wrapper,
  .crypto-pulse-container,
  .fear-greed-container,
  .volume-trend-container,
  .volatility-container,
  .market-momentum-container {
    height: auto !important;
  }
  
  .gauge-container,
  .crypto-pulse-container .gauge-container,
  .fear-greed-container .gauge-container,
  .volume-trend-container .gauge-container,
  .volatility-container .gauge-container,
  .market-momentum-container .gauge-container {
    height: auto !important;
  }
  
  /* Very small indicator titles on mobile */
  .indicator-title {
    font-size: 10px !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }
  
  /* Make progress bars thinner on mobile */
  .crypto-pulse-progress-container,
  .fear-greed-progress-container,
  .volume-trend-progress-container,
  .volatility-progress-container {
    height: 6px !important;
    margin-bottom: 8px !important;
  }
  
  .score-card,
  .crypto-pulse-container .score-card,
  .fear-greed-container .score-card,
  .volume-trend-container .score-card,
  .volatility-container .score-card,
  .market-momentum-container .score-card {
    padding: 3px 5px !important;
    min-width: 36px !important;
  }
}
  
@media (max-width: 480px) {
  /* Adjust titles and values in stat cards for mobile */
  .stat-title {
    font-size: 0.75rem !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .stat-value {
    font-size: 0.85rem !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  
  /* Adjust Top Performers card on mobile - ensure all 7 performers visible */
  .performers-container {
    padding: 6px 0; /* Slightly more padding for better spacing */
    min-height: auto;
    max-height: none; /* Remove height restrictions */
  }
  
  .performers-section {
    margin-bottom: 6px; /* Compact spacing between gainers and losers */
  }
  
  .performers-list {
    max-height: none !important; /* Allow all performers to show */
    overflow-y: visible !important;
    gap: 1px !important; /* Minimal gap */
  }
  
  .performer-item {
    padding: 5px 8px; /* Adequate touch target */
    margin-bottom: 1px;
    min-height: 28px; /* Ensure good touch target size */
  }
  
  .performer-symbol {
    font-size: 0.75rem;
  }
  
  .performer-change {
    font-size: 0.75rem;
    padding: 2px 4px;
  }
}

/* Remove redundant breakpoint as it's now covered by max-width: 735px */

/* Tablets (736px - 768px) - adjusted to prevent overlap with new max-width:735px breakpoint */
@media (min-width: 736px) and (max-width: 768px) {
  /* Improve market stats layout for tablets */
  .market-stats-container {
    flex-wrap: wrap;
  }
  
  .stat-card {
    flex: 1 0 45% !important;
    margin: 5px !important;
    min-width: 45% !important;
  }
  
  /* Ensure indicators display in a 2x2 grid */
  .indicators-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .indicator-box {
    flex: 1 0 45%;
    min-width: 45%;
    margin-bottom: 10px;
  }
}
  
  /* Adjust sizing of indicator components */
  .gauge-wrapper,
  .crypto-pulse-container,
  .fear-greed-container,
  .volume-trend-container,
  .volatility-container,
  .market-momentum-container {
    height: 80px !important;
  }
  
  .gauge-container,
  .crypto-pulse-container .gauge-container,
  .fear-greed-container .gauge-container,
  .volume-trend-container .gauge-container,
  .volatility-container .gauge-container,
  .market-momentum-container .gauge-container {
    height: 60px !important;
  }
  
  .score,
  .crypto-pulse-container .score,
  .fear-greed-container .score,
  .volume-trend-container .score,
  .volatility-container .score,
  .market-momentum-container .score {
    font-size: 17px !important;
  }
  
  .gauge-label,
  .crypto-pulse-label,
  .market-momentum-label,
  .fear-greed-label,
  .volume-trend-label,
  .volatility-label {
    bottom: -24px;
    font-size: 12px;
  }
  
  /* Ensure headers are properly sized */
  .crypto-pulse-header,
  .fear-greed-header,
  .volume-trend-header,
  .volatility-header {
    margin-bottom: 5px;
    font-size: 12px;
  }
  
  /* Progress bars for tablets */
  .crypto-pulse-progress-container,
  .fear-greed-progress-container,
  .volume-trend-progress-container,
  .volatility-progress-container {
    height: 8px;
    margin-top: 4px;
  }
  
  .score-card,
  .crypto-pulse-container .score-card,
  .fear-greed-container .score-card,
  .volume-trend-container .score-card,
  .volatility-container .score-card,
  .market-momentum-container .score-card {
    padding: 4px 7px !important;
    min-width: 40px !important;
  }
  
  /* Adjust titles and values in stat cards */
  .stat-title {
    font-size: 0.8rem !important;
    margin-bottom: 7px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .stat-value {
    font-size: 0.95rem !important;
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* Small laptops (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Three-column layout for market stats on small laptops */
  .market-stats-container {
    flex-wrap: wrap;
  }
  
  .stat-card {
    flex: 1 0 30% !important;
    margin: 5px !important;
    min-width: 30% !important;
  }
  
  /* 2x2 grid for indicators */
  .indicators-row {
    flex-wrap: wrap;
  }
  
  .indicator-box {
    flex: 1 0 45%;
    min-width: 45%;
    margin-bottom: 12px;
  }
  
  /* Adjust sizing of indicator components */
  .gauge-wrapper,
  .crypto-pulse-container,
  .fear-greed-container,
  .volume-trend-container,
  .volatility-container,
  .market-momentum-container {
    height: 85px !important;
  }
  
  .gauge-container,
  .crypto-pulse-container .gauge-container,
  .fear-greed-container .gauge-container,
  .volume-trend-container .gauge-container,
  .volatility-container .gauge-container,
  .market-momentum-container .gauge-container {
    height: 65px !important;
  }
  
  .score,
  .crypto-pulse-container .score,
  .fear-greed-container .score,
  .volume-trend-container .score,
  .volatility-container .score,
  .market-momentum-container .score {
    font-size: 18px !important;
  }
  
  .gauge-label,
  .crypto-pulse-label,
  .market-momentum-label,
  .fear-greed-label,
  .volume-trend-label,
  .volatility-label {
    bottom: -24px;
    font-size: 12px;
  }
}

/* Large Desktops (1201px and up) */
@media (min-width: 1201px) {
  /* Three-column layout for market stats on large desktops */
  .market-stats-container {
    flex-wrap: nowrap;
    max-width: 1280px;
    margin: 0 auto;
    justify-content: space-between;
    gap: 12px;
    width: calc(100% - 50px) !important; /* Adjust width to account for padding */
    padding: 0 25px !important; /* Increased padding */
  }
  
  .fixed-market-stats-bar {
    overflow-x: hidden;
  }
  
  .stat-card {
    flex: 1;
    margin: 0 4px !important;
    padding: 10px;
  }
  
  /* Balanced column layout for all three cards */
  .market-insights-card {
    max-width: 32% !important;
    flex: 0 1 32% !important;
    padding: 10px !important;
    margin-right: 0.5% !important;
  }
  
  .top-performers-card {
    max-width: 33% !important;
    flex: 0 1 33% !important;
    padding: 10px !important;
    margin-left: 0.5% !important;
    margin-right: 0.5% !important;
  }
  
  .bot-controller-card {
    padding: 10px !important;
    margin-left: 0.5% !important;
  }
  
  /* Fallback for browsers that don't support specific targeting */
  .stat-card:has(.combined-indicators-container) {
    max-width: 32% !important;
    flex: 0 1 32% !important;
  }
  
  /* Single row for indicators */
  .indicators-row {
    flex-wrap: nowrap;
    gap: 10px;
  }
  
  .indicator-box {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin-bottom: 0;
    padding: 8px;
  }
  
  .combined-indicators-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 0;
  }
  
  /* Adjust sizing of indicator components */
  .gauge-wrapper,
  .crypto-pulse-container,
  .fear-greed-container,
  .volume-trend-container,
  .volatility-container,
  .market-momentum-container {
    height: 90px !important;
  }
  
  .gauge-container,
  .crypto-pulse-container .gauge-container,
  .fear-greed-container .gauge-container,
  .volume-trend-container .gauge-container,
  .volatility-container .gauge-container,
  .market-momentum-container .gauge-container {
    height: 70px !important;
  }
  
  .score,
  .crypto-pulse-container .score,
  .fear-greed-container .score,
  .volume-trend-container .score,
  .volatility-container .score,
  .market-momentum-container .score {
    font-size: 19px !important;
  }
}

/* Extra Large Desktops (1441px and up) */
@media (min-width: 1441px) {
  .market-stats-container {
    max-width: 1440px;
    padding: 0 30px;
  }
  
  .market-insights-card,
  .top-performers-card,
  .bot-controller-card {
    padding: 12px !important;
  }
  
  .indicator-box {
    padding: 10px;
  }
}

/* Desktops (1025px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  /* Four-column layout for market stats on standard desktops */
  .market-stats-container {
    flex-wrap: nowrap;
    max-width: 100%;
    width: calc(100% - 40px) !important; /* Adjust width to account for padding */
    padding: 0 20px !important; /* Increased padding */
    overflow-x: visible;
    justify-content: space-between;
    gap: 10px;
  }
  
  /* No need for individual margin since we're handling it at the container level */
  
  .fixed-market-stats-bar {
    overflow-x: hidden;
  }
  
  .stat-card {
    flex: 1;
    margin: 0 3px !important;
    min-width: 115px;
    padding: 10px 8px;
  }
  
  /* Balanced column layout for all three cards */
  .market-insights-card {
    max-width: 32% !important; /* Slightly smaller to prevent overlap */
    flex: 0 1 32% !important;
    padding: 8px !important;
    margin-right: 0.5% !important;
  }
  
  .top-performers-card {
    max-width: 33% !important;
    flex: 0 1 33% !important;
    padding: 8px !important;
    margin-left: 0.5% !important;
    margin-right: 0.5% !important;
  }
  
  .bot-controller-card {
    max-width: 32% !important;
    flex: 0 1 32% !important;
    padding: 8px !important;
    margin-left: 0.5% !important;
  }
  
  /* Fallback for browsers that don't support specific targeting */
  .stat-card:has(.combined-indicators-container) {
    max-width: 32% !important;
    flex: 0 1 32% !important;
    padding: 8px !important;
  }
  
  /* Single row for indicators with adjusted spacing */
  .indicators-row {
    flex-wrap: nowrap;
    gap: 8px !important; /* Reduced gap */
  }
  
  .indicator-box {
    flex: 1;
    min-width: 0 !important; /* Allow further shrinking */
    max-width: 25% !important; /* Force even distribution */
    margin-bottom: 0;
    padding: 6px !important;
  }
  
  /* Constraint combined container */
  .combined-indicators-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px !important;
  }
  
  /* Slightly reduced sizes for the 1025-1200px range */
  .gauge-wrapper,
  .crypto-pulse-container,
  .fear-greed-container,
  .volume-trend-container,
  .volatility-container,
  .market-momentum-container {
    height: 75px !important;
  }
  
  .gauge-container,
  .crypto-pulse-container .gauge-container,
  .fear-greed-container .gauge-container,
  .volume-trend-container .gauge-container,
  .volatility-container .gauge-container,
  .market-momentum-container .gauge-container {
    height: 55px !important;
  }
  
  .score,
  .crypto-pulse-container .score,
  .fear-greed-container .score,
  .volume-trend-container .score,
  .volatility-container .score,
  .market-momentum-container .score {
    font-size: 16px !important;
  }
  
  /* Ensure text doesn't cause overflow */
  .stat-title {
    font-size: 0.85rem !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .stat-value {
    font-size: 1.1rem !important;
    white-space: normal !important;
  }
  
  /* Gauge labels */
  .gauge-label,
  .crypto-pulse-label,
  .market-momentum-label,
  .fear-greed-label,
  .volume-trend-label,
  .volatility-label {
    bottom: -22px !important;
    font-size: 11px !important;
  }
  
  /* Headers need to be smaller */
  .crypto-pulse-header,
  .fear-greed-header,
  .volume-trend-header,
  .volatility-header {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  
  /* Adjust tooltip positioning */
  .info-tooltip::after {
    max-width: 200px !important;
    font-size: 10px !important;
  }
}

/* Very small screens extra adjustments */
@media (max-width: 350px) {
  /* Ensure market insights card uses full width */
  .market-insights-card,
  .top-performers-card,
  .bot-controller-card {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .indicators-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .indicator-box {
    flex: 1 0 100%;
    min-width: 100%;
    margin-bottom: 10px;
    padding: 6px;
  }
  
  /* Make everything smaller on very small screens */
  .crypto-pulse-header,
  .fear-greed-header,
  .volume-trend-header,
  .volatility-header {
    font-size: 11px;
    margin-bottom: 3px;
    /* Prevent text from breaking layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .crypto-pulse-btc, .crypto-pulse-alt,
  .fear-greed-fear, .fear-greed-greed,
  .volume-trend-low, .volume-trend-high,
  .volatility-low, .volatility-high {
    font-size: 10px;
  }
  
  .crypto-pulse-value, 
  .fear-greed-value,
  .volume-trend-value,
  .volatility-value {
    font-size: 11px;
  }
  
  .score,
  .crypto-pulse-container .score,
  .fear-greed-container .score,
  .volume-trend-container .score,
  .volatility-container .score,
  .market-momentum-container .score {
    font-size: 14px !important;
  }
  
  .score-card,
  .crypto-pulse-container .score-card,
  .fear-greed-container .score-card,
  .volume-trend-container .score-card,
  .volatility-container .score-card,
  .market-momentum-container .score-card {
    padding: 2px 4px !important;
    min-width: 30px !important;
  }
  
  .gauge-label {
    font-size: 10px;
    bottom: -20px;
  }
  
  /* Adjust the bot controller for very small screens */
  .control-row {
    flex-direction: column;
    gap: 5px;
  }
  
  .badge-custom {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
  }
  
  /* Adjust top performers for very small screens */
  .performer-symbol {
    font-size: 0.7rem;
  }
  
  .performer-change {
    font-size: 0.7rem;
    padding: 1px 2px;
  }
}