/**
 * Professional Cryptocurrency Exchange Table
 * Matching Top Performers Styling Format
 */

/* Price Change Animations - Green and Red to White Fade */
@keyframes priceFlashUp {
    0% { 
        color: #00ff00 !important; 
        background-color: rgba(0, 255, 0, 0.2) !important;
        transform: scale(1.05);
    }
    15% { 
        color: #00e676 !important; 
        background-color: rgba(0, 230, 118, 0.15) !important;
        transform: scale(1.02);
    }
    50% { 
        color: #66ff99 !important; 
        background-color: rgba(0, 230, 118, 0.08) !important;
        transform: scale(1.01);
    }
    80% { 
        color: #ccffcc !important; 
        background-color: rgba(0, 230, 118, 0.03) !important;
        transform: scale(1);
    }
    100% { 
        color: #ffffff !important; 
        background-color: transparent !important;
        transform: scale(1);
    }
}

@keyframes priceFlashDown {
    0% { 
        color: #ff0000 !important; 
        background-color: rgba(255, 0, 0, 0.2) !important;
        transform: scale(1.05);
    }
    15% { 
        color: #ff3d71 !important; 
        background-color: rgba(255, 61, 113, 0.15) !important;
        transform: scale(1.02);
    }
    50% { 
        color: #ff6699 !important; 
        background-color: rgba(255, 61, 113, 0.08) !important;
        transform: scale(1.01);
    }
    80% { 
        color: #ffcccc !important; 
        background-color: rgba(255, 61, 113, 0.03) !important;
        transform: scale(1);
    }
    100% { 
        color: #ffffff !important; 
        background-color: transparent !important;
        transform: scale(1);
    }
}

.price-flash-up {
    animation: priceFlashUp 2.5s ease-out !important;
    will-change: color, background-color, transform !important;
    position: relative !important;
    z-index: 10 !important;
}

.price-flash-down {
    animation: priceFlashDown 2.5s ease-out !important;
    will-change: color, background-color, transform !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Simple test animations that definitely work */
@keyframes simpleFlashUp {
    0% { background-color: #00ff00 !important; color: #000000 !important; }
    50% { background-color: rgba(0, 255, 0, 0.5) !important; color: #ffffff !important; }
    100% { background-color: transparent !important; color: inherit !important; }
}

@keyframes simpleFlashDown {
    0% { background-color: #ff0000 !important; color: #ffffff !important; }
    50% { background-color: rgba(255, 0, 0, 0.5) !important; color: #ffffff !important; }
    100% { background-color: transparent !important; color: inherit !important; }
}

.simple-flash-up {
    animation: simpleFlashUp 1s ease-out !important;
}

.simple-flash-down {
    animation: simpleFlashDown 1s ease-out !important;
}

:root {
  /* Professional dark theme colors - matching top performers */
  --bg-primary: #0b0e11;
  --bg-row: rgba(255, 255, 255, 0.05);
  --bg-row-hover: var(--primary-background, #1a1f27);
  --border-color: rgba(255, 255, 255, 0.1);
  --text-primary: var(--text-color, #ffffff);
  --text-secondary: #848e9c;
  --text-dim: #5e6673;
  --green: var(--success-color, #00c853);
  --red: var(--danger-color, #ff3547);
}

/* Container */
.price-feed-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Table structure */
#price-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  table-layout: fixed !important;
  margin-top: 10px !important;
}

/* Column widths - optimized for compact sentiment column */
#price-table th:nth-child(1),
#price-table td:nth-child(1) { width: 25%; } /* Name - INCREASED for better visibility */
#price-table th:nth-child(2),
#price-table td:nth-child(2) { width: 20%; } /* Price - INCREASED for readability */
#price-table th:nth-child(3),
#price-table td:nth-child(3) { width: 15%; } /* Sentiment - Let responsive strategy in index.html handle widths */
#price-table th:nth-child(4),
#price-table td:nth-child(4) { width: 25%; } /* Trade Rating - INCREASED to use freed space */
#price-table th:nth-child(5),
#price-table td:nth-child(5) { width: 15%; } /* Volatility - INCREASED to use freed space */
#price-table th:nth-child(6),
#price-table td:nth-child(6) { width: 15%; } /* Forecast Confidence - INCREASED */
#price-table th:nth-child(7),
#price-table td:nth-child(7) { width: 15%; } /* 24h % - INCREASED */

/* Header */
#price-table thead {
  border-bottom: 1px solid var(--border-color) !important;
}

#price-table thead th {
  font-family: 'Inter', sans-serif !important;
  padding: 16px 12px !important;
  background: transparent !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
}

/* GLOBAL: Always center sentiment header regardless of screen size */
#price-table th:nth-child(3) { /* Sentiment header */
  text-align: center !important;
}

#price-table th:nth-child(3) .d-flex {
  justify-content: center !important;
}

/* Rows - matching top performers styling */
#price-table tbody tr {
  border-bottom: 1px solid var(--border-color) !important;
  transition: background-color 0.15s ease !important;
  margin-bottom: 1px !important;
}

#price-table tbody tr:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#price-table tbody tr:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 0 !important;
}

#price-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Override Bootstrap table hover effects */
.table tbody tr:hover,
#price-table.table tbody tr:hover,
table#price-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Completely disable Bootstrap's default table-hover class effects */
.table-hover tbody tr:hover,
.table.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* General table cell class for consistent padding */
.table-cell-standard {
  padding: 8px !important;
  vertical-align: middle !important;
}

/* Complete Row Height Fix - UPDATED: Allow natural height for sentiment tags */
#price-table tr {
  min-height: 50px !important; /* Changed from fixed height to min-height */
}

/* Cells - UPDATED: Allow natural height for sentiment tags */
#price-table tbody td {
  padding: 8px 12px !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  background: transparent !important;
  border: none !important;
  vertical-align: middle !important;
  min-height: 50px !important; /* Changed from fixed height to min-height */
}

/* Coin cell */
.coin-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 40px !important;
  overflow: visible !important;
  vertical-align: middle !important;
}

/* Add margin to coin cell content for spacing */
.coin-cell > * {
  margin-left: 4px !important;
}

.coin-cell > *:first-child {
  margin-left: 4px !important;
}

.coin-cell > *:last-child {
  margin-right: 4px !important;
}


.coin-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  display: block !important;
  margin: 0 !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

/* Force spacing between coin icon and text */
.coin-cell img {
  margin-right: 8px !important;
}

.coin-cell > *:first-child {
  margin-right: 8px !important;
}

/* Target coin icon images specifically */
.coin-cell img,
.coin-cell .coin-icon {
  vertical-align: middle !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide letter-icon by default, only show when coin-icon fails */
.coin-icon + .letter-icon {
  display: none !important;
}

.coin-icon[style*="display: none"] + .letter-icon,
.coin-icon[style*="display:none"] + .letter-icon {
  display: flex !important;
}

/* Ensure coin icons are always visible unless explicitly hidden */
.coin-icon {
  display: block !important;
  visibility: visible !important;
}

.letter-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-color) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
  padding: 1px !important;
  position: relative !important; /* Ensure proper positioning */
  z-index: 1 !important; /* Keep within normal stacking context */
}

.coin-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.coin-name {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.coin-symbol {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Price Column (2nd column) - Ensure Inter font for all price content */
#price-table td:nth-child(2),
#price-table td:nth-child(2) *,
#price-table td:nth-child(2) div,
#price-table td:nth-child(2) span {
  font-family: 'Inter', sans-serif !important;
}

/* Price */
.price-value,
#price-table .price-value,
#price-table td .price-value,
table .price-value {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* Sentiment Container */
.sentiment-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  height: 100% !important;
}

/* Sentiment Cell - PERFECT CENTERING CONTAINER */
.sentiment-cell {
  /* height: 50px !important; - REMOVED: This was constraining sentiment tags */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important; /* Add padding instead of fixed height */
  position: relative !important; /* Enable positioning context for child elements */
  width: 100% !important; /* Ensure full cell width */
  text-align: center !important; /* Fallback centering */
}

/* ========================================
   CLEAN SENTIMENT TAG SYSTEM - UNIFIED
   ======================================== */

/* ULTIMATE NUCLEAR OPTION: Override ALL responsive sizing */
.sentiment-tag-clean,
.sentiment-tag,
span.sentiment-tag,
.sentiment-cell .sentiment-tag,
.sentiment-cell span,
html body table#price-table td.sentiment-cell .sentiment-tag,
html body table#price-table .sentiment-tag,
td.sentiment-cell .sentiment-tag {
  /* Fixed dimensions - NUCLEAR OVERRIDE */
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  
  /* FILL AVAILABLE SPACE - Use full width of sentiment column */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  
  /* Layout */
  display: block !important; /* BLOCK to take full width */
  padding: 0 6px !important;
  margin: 0 !important; /* No margin - fill full width */
  box-sizing: border-box !important;
  
  /* Typography */
  font-size: clamp(9px, 1.5vw, 12px) !important;
  line-height: 35px !important;
  text-align: center !important;
  
  /* NO TEXT TRUNCATION - Allow full text display */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  
  /* Reset transforms */
  transform: none !important;
}

/* High specificity override for any existing CSS conflicts */
html body table#price-table td.sentiment-cell .sentiment-tag-clean,
html body table#price-table td.sentiment-cell .sentiment-tag,
html body table#price-table .sentiment-tag-clean,
html body table#price-table .sentiment-tag,
.sentiment-cell .sentiment-tag-clean,
.sentiment-cell .sentiment-tag {
  display: block !important; /* BLOCK to take full width */
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 6px !important;
  margin: 0 !important;
  font-size: clamp(9px, 1.5vw, 12px) !important;
  line-height: 35px !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* NUCLEAR OPTION: Override any lingering percentage-based sizing */
html body table#price-table td.sentiment-cell span.sentiment-tag[style],
html body table#price-table td.sentiment-cell span.sentiment-tag-clean[style],
span.sentiment-tag[style*="height"],
span.sentiment-tag[style*="width"] {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* REMOVED: Old nuclear override - now handled by unified .sentiment-height-width class above */

/* FIXED: The real issue was sentiment-cell height constraint, not the tag rules */

/* UNIFIED SENTIMENT TAG SIZING - FULL WIDTH FOR ALL SCREEN SIZES */
.sentiment-height-width,
.sentiment-tag-clean,
.sentiment-tag,
span.sentiment-tag,
.sentiment-cell .sentiment-tag,
html body table#price-table td.sentiment-cell .sentiment-tag,
html body table#price-table .sentiment-tag {
  /* Fixed dimensions - NO responsive breakpoints */
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  line-height: 35px !important;
  
  /* FULL WIDTH - Fill the entire sentiment column */
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  
  /* Consistent sizing across all devices */
  padding: 0 8px !important;
  font-size: 11px !important;
  
  /* SIMPLE BLOCK LAYOUT - No centering transforms */
  margin: 0 !important;
  display: block !important;
  text-align: center !important;
  box-sizing: border-box !important;
  
  /* NO TEXT TRUNCATION - Allow full text display */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.sentiment-badge {
  padding: 3px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

/* Sentiment Tag - Override JS height with fixed height and reduce width by 20% */
.sentiment-tag {
  height: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  width: 60% !important;
  max-width: 60% !important;
  min-width: 60% !important;
}

/* More specific selector to override inline styles */
td.sentiment-cell .sentiment-tag,
.sentiment-cell .sentiment-tag,
span.sentiment-tag {
  height: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  width: 60% !important;
  max-width: 60% !important;
  min-width: 60% !important;
}

/* Nuclear option - override any inline style */
td.sentiment-cell span.sentiment-tag[style] {
  height: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  width: 60% !important;
  max-width: 60% !important;
  min-width: 60% !important;
}

/* Target by class combination */
span.sentiment-tag.sentiment-score-72,
span.sentiment-tag[class*="sentiment-score-"] {
  height: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  width: 60% !important;
  max-width: 60% !important;
  min-width: 60% !important;
}

.sentiment-score {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin-top: 1px !important;
}

/* Enhanced Crypto-Specific Sentiment Colors */
.sentiment-very-bullish {
  background: rgba(0, 230, 118, 0.25) !important;
  border-color: rgba(0, 230, 118, 0.5) !important;
  color: rgb(0, 255, 127) !important;
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.3) !important;
}

.sentiment-bullish {
  background: rgba(46, 204, 113, 0.2) !important;
  border-color: rgba(46, 204, 113, 0.4) !important;
  color: rgb(46, 204, 113) !important;
}

.sentiment-slightly-bullish {
  background: rgba(125, 206, 160, 0.18) !important;
  border-color: rgba(125, 206, 160, 0.35) !important;
  color: rgb(125, 206, 160) !important;
}

.sentiment-neutral {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.sentiment-slightly-bearish {
  background: rgba(255, 138, 101, 0.18) !important;
  border-color: rgba(255, 138, 101, 0.35) !important;
  color: rgb(255, 138, 101) !important;
}

.sentiment-bearish {
  background: rgba(231, 76, 60, 0.2) !important;
  border-color: rgba(231, 76, 60, 0.4) !important;
  color: rgb(231, 76, 60) !important;
}

.sentiment-very-bearish {
  background: rgba(220, 20, 60, 0.25) !important;
  border-color: rgba(220, 20, 60, 0.5) !important;
  color: rgb(255, 69, 0) !important;
  box-shadow: 0 0 8px rgba(220, 20, 60, 0.3) !important;
}

/* Sentiment hover effects */
.sentiment-badge:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.no-sentiment {
  color: var(--text-dim) !important;
}

/* Forecast Confidence Container */
.forecast-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.forecast-badge {
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  min-width: 80px !important;
  text-align: center !important;
}

.forecast-confidence {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin-top: 1px !important;
}

/* Forecast Direction Colors */
.forecast-likely-up {
  background: rgba(14, 203, 129, 0.2) !important;
  border-color: rgba(14, 203, 129, 0.4) !important;
  color: rgb(14, 203, 129) !important;
}

.forecast-likely-down {
  background: rgba(246, 70, 93, 0.2) !important;
  border-color: rgba(246, 70, 93, 0.4) !important;
  color: rgb(246, 70, 93) !important;
}

.forecast-uncertain {
  background: rgba(255, 193, 7, 0.2) !important;
  border-color: rgba(255, 193, 7, 0.4) !important;
  color: rgb(255, 193, 7) !important;
}

.forecast-loading {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Forecast hover effects */
.forecast-badge:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Percentage changes - matching top performers styling */
.price-change-container {
  text-align: right !important;
}

.price-change-container span:last-child {
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.9rem !important;
}

.positive { 
  background-color: rgba(0, 200, 83, 0.15) !important;
  color: var(--green) !important; 
}

.negative { 
  background-color: rgba(255, 53, 71, 0.15) !important;
  color: var(--red) !important; 
}

/* Trade Rating (4th column) */
#price-table td:nth-child(4) {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-primary) !important;
}

/* Volume & Market Cap */
#price-table td:nth-child(6) {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-primary) !important;
}

/* Sort indicators */
.sort-icon {
  opacity: 0.5 !important;
  transition: opacity 0.2s !important;
}

.sort-icon:hover {
  opacity: 1 !important;
}

.sort-active {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* Animation and transition styles */
.new-row-fade-in {
  animation: fadeInUp 0.5s ease-out !important;
}

.price-up {
  animation: priceFlashGreen 2s ease-out !important;
}

.price-down {
  animation: priceFlashRed 2s ease-out !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes priceFlashGreen {
  0% { 
    background-color: rgba(0, 200, 83, 0.3);
    color: var(--green);
  }
  100% { 
    background-color: transparent;
    color: var(--text-primary);
  }
}

@keyframes priceFlashRed {
  0% { 
    background-color: rgba(255, 53, 71, 0.3);
    color: var(--red);
  }
  100% { 
    background-color: transparent;
    color: var(--text-primary);
  }
}

/* Remove all unnecessary styling */
#price-table * {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Responsive */
/* REMOVED: 870px-701px media query - conflicts with index.html responsive strategy */

/* REMOVED: 1200px-871px media query - conflicts with index.html responsive strategy */

/* REMOVED: 850px-950px override - conflicts with index.html clean responsive strategy */

/* Additional styling for screens below 870px */
@media (max-width: 870px) {
  /* Optimize coin cell layout for smaller name column */
  .coin-cell {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Maintain adequate spacing */
    width: 100% !important;
    overflow: visible !important; /* Allow content to be visible */
  }
  
  .coin-cell::before {
    min-width: 20px !important; /* Keep rank number readable */
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
  
  .coin-icon,
  .letter-icon {
    width: 20px !important; /* Keep icons at readable size */
    height: 20px !important;
    flex-shrink: 0 !important;
    display: block !important; /* Ensure icons show */
  }
  
  /* Create a text container for name and symbol */
  .coin-name,
  .coin-symbol {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* Remove restrictive max-width to prevent cutting off */
    max-width: none !important;
    width: auto !important;
  }
  
  .coin-symbol {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 768px) {
  #price-table thead th,
  #price-table tbody td {
    padding: 12px 8px !important; /* Keep reasonable padding */
    font-size: 13px !important;
  }
  
  #price-table thead th {
    font-family: 'Inter', sans-serif !important;
  }
  
  /* Maintain good layout for mobile */
  .coin-cell {
    gap: 6px !important; /* Keep adequate spacing */
    width: 100% !important;
  }
  
  .coin-icon,
  .letter-icon {
    width: 18px !important; /* Slightly smaller for mobile */
    height: 18px !important;
    flex-shrink: 0 !important;
    display: block !important; /* Ensure visibility */
  }
  
  .coin-name {
    font-size: 12px !important;
    max-width: none !important; /* Let name use available space */
  }
  
  .coin-symbol {
    font-size: 10px !important;
    max-width: none !important; /* Let symbol use available space */
  }
}

/* Fix text orientation issues under 769px */
@media (max-width: 769px) {
  /* Ensure name column content displays properly */
  .coin-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .coin-name,
  .coin-symbol {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Ensure table cells don't have vertical text */
  #price-table td,
  #price-table th {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
  }
}

/* Hide 24h % column below 760px */
@media (max-width: 760px) {
  #price-table th:nth-child(7),
  #price-table td:nth-child(7) {
    display: none !important;
  }
}

/* 760px-701px: Hide 24h % but keep forecast */
@media (max-width: 760px) and (min-width: 701px) {
  /* Adjust column widths without 24h % column - keep forecast */
  #price-table th:nth-child(1),
  #price-table td:nth-child(1) { width: 25%; } /* Name */
  #price-table th:nth-child(2),
  #price-table td:nth-child(2) { width: 15%; } /* Price */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) { width: 25%; } /* Sentiment - INCREASED from 15% to 25% */
  #price-table th:nth-child(4),
  #price-table td:nth-child(4) { width: 15%; } /* Trade Rating - REDUCED from 17% to 15% */
  #price-table th:nth-child(6),
  #price-table td:nth-child(6) { width: 20%; } /* Forecast - REDUCED from 28% to 20% */
}

/* 700px-601px: Hide forecast, show volatility, 24h % already hidden */
@media (max-width: 700px) and (min-width: 601px) {
  /* Hide forecast column */
  #price-table th:nth-child(6),
  #price-table td:nth-child(6) {
    display: none !important;
  }
  
  /* Adjust column widths for 5-column layout - compact sentiment */
  #price-table th:nth-child(1),
  #price-table td:nth-child(1) { width: 35%; } /* Name - maximum space for visibility */
  #price-table th:nth-child(2),
  #price-table td:nth-child(2) { width: 20%; } /* Price - adequate space */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) { width: 18%; min-width: 110px; max-width: 130px; } /* Sentiment - BALANCED TO PREVENT OVERFLOW */
  #price-table th:nth-child(4),
  #price-table td:nth-child(4) { width: 20%; } /* Trade Rating - increased space */
  #price-table th:nth-child(5),
  #price-table td:nth-child(5) { width: 10%; } /* Volatility - minimal space */
}

/* Small mobile devices (600px and below) - Hide Trade Rating, optimize for mobile */
@media (max-width: 600px) {
  /* Hide Trade Rating and Volatility columns for smallest screens */
  #price-table th:nth-child(4),
  #price-table td:nth-child(4),
  #price-table th:nth-child(5),
  #price-table td:nth-child(5) {
    display: none !important;
  }
  
  /* MOBILE: Compact sentiment, maximum name space */
  #price-table th:nth-child(1),
  #price-table td:nth-child(1) { width: 60% !important; } /* Name - maximum mobile visibility */
  #price-table th:nth-child(2),
  #price-table td:nth-child(2) { width: 25% !important; } /* Price - adequate mobile space */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) { width: 18% !important; min-width: 110px !important; max-width: 130px !important; } /* Sentiment - BALANCED TO PREVENT OVERFLOW */
  
  /* HEADER ALIGNMENT: Price and Sentiment headers left-justified on mobile */
  #price-table th:nth-child(2), /* Price header */
  #price-table th:nth-child(3) { /* Sentiment header */
    text-align: left !important;
  }
  
  /* Override the justify-content classes for headers */
  #price-table th:nth-child(2) .d-flex,
  #price-table th:nth-child(3) .d-flex {
    justify-content: flex-start !important;
  }
  
  /* NUCLEAR: Force sentiment TAG (not badge) width to fill column - FULL WIDTH */
  html body table#price-table td .sentiment-tag,
  html body table#price-table .sentiment-tag,
  html body .sentiment-tag,
  html .sentiment-tag,
  .sentiment-tag,
  /* Also target sentiment-badge in case both exist */
  html body table#price-table td .sentiment-container .sentiment-badge,
  html body table#price-table .sentiment-badge,
  html body .sentiment-badge,
  html .sentiment-badge,
  .sentiment-badge {
    width: 100% !important; /* Full column width - changed from 100px to 100% */
    max-width: 100% !important; /* Allow full column width */
    min-width: 0 !important; /* Using responsive percentage system */
    flex: 1 1 auto !important; /* Allow flexible sizing within column */
    flex-shrink: 0 !important; /* Prevent shrinking */
    flex-grow: 1 !important; /* Allow growing to fill column */
    padding: 4px 6px !important; /* Increased padding for better height and readability */
    font-size: 11px !important; /* Increased from 8px to 11px for better readability */
    border-radius: 6px !important; /* Slightly larger border radius */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    line-height: 1.2 !important; /* Better line height for text */
  }
  
  /* ABSOLUTE OVERRIDE: Handle any programmatically set widths */
  .sentiment-tag[style*="width"],
  .sentiment-badge[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* NUCLEAR: Override min-width specifically */
  .sentiment-tag[style*="min-width"],
  .sentiment-badge[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* CATCH-ALL: Override percentage widths specifically */
  .sentiment-tag[style*="%"],
  .sentiment-badge[style*="%"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* FORCE: Multiple fallback attempts */
  .sentiment-tag,
  .sentiment-badge {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* TARGET: Specific class combinations - REMOVED conflicting width rules */
  .sentiment-container .sentiment-badge,
  td .sentiment-badge,
  table .sentiment-badge {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* PRESERVE: sentiment-tag should use nuclear 95% rules, not 100% override */
  
  .sentiment-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 1px !important;
    justify-content: center !important;
  }
  
  .sentiment-score {
    font-size: 6px !important; /* Even smaller for mobile */
    margin-top: 0px !important;
    max-width: 100% !important; /* Full width to match sentiment tag */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Ensure sentiment column doesn't overflow */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) {
    overflow: hidden !important;
    word-wrap: break-word !important;
  }
  
  /* Enhanced mobile row spacing and styling */
  #price-table thead th {
    font-family: 'Inter', sans-serif !important;
    padding: 14px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  
  #price-table tbody td {
    padding: 16px 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  
  /* Mobile-optimized row styling */
  #price-table tbody tr {
    margin-bottom: 2px !important;
    border-radius: 6px !important;
  }
  
  /* Enhanced coin cell for small mobile */
  .coin-cell {
    gap: 6px !important;
    padding: 2px 0 !important;
  }
  
  .coin-cell::before {
    min-width: 18px !important;
    font-size: 11px !important;
  }
  
  .coin-icon,
  .letter-icon {
    width: 16px !important;
    height: 16px !important;
  }
  
  .coin-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  
  .coin-symbol {
    font-size: 10px !important;
    font-weight: 500 !important;
    margin-top: 1px !important;
  }
  
  /* Mobile-optimized sentiment badges - compact but readable */
  .sentiment-badge {
    padding: 2px 4px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .sentiment-score {
    font-size: 8px !important;
    margin-top: 1px !important;
  }
  
  /* Sentiment container optimization */
  .sentiment-container {
    align-items: center !important;
    gap: 1px !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Mobile price styling */
  .price-value,
  #price-table td:nth-child(2),
  #price-table td:nth-child(2) * {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
}

/* Small mobile adjustment (530px and below) - Reduce price column to prevent sentiment cutoff */
@media (max-width: 530px) {
  /* MOBILE 530px: Compact sentiment, maximum name space */
  #price-table th:nth-child(1),
  #price-table td:nth-child(1) { width: 60% !important; } /* Name - maximum mobile visibility */
  #price-table th:nth-child(2),
  #price-table td:nth-child(2) { width: 25% !important; } /* Price - adequate mobile space */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) { width: 18% !important; min-width: 110px !important; max-width: 130px !important; } /* Sentiment - BALANCED TO PREVENT OVERFLOW */
  
  /* DISABLED: These rules target sentiment-badge, not sentiment-tag which is what JS generates */
  /*
  #price-table .sentiment-badge,
  #price-table td .sentiment-badge,
  #price-table .sentiment-container .sentiment-badge,
  table#price-table .sentiment-badge,
  .sentiment-badge {
    padding: 1px 2px !important;
    font-size: 7px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 70px !important;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: inline-block !important;
  }
  */
  
  .sentiment-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  .sentiment-score {
    font-size: 5px !important; /* Tiny score text for 530px */
    margin-top: 0px !important;
    max-width: 70px !important; /* Fixed pixel width to match badge width */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Mid-range small mobile (460px and below) - Balanced layout for common small phones */
@media (max-width: 460px) {
  /* MOBILE 460px: Compact sentiment, maximum name space */
  #price-table th:nth-child(1),
  #price-table td:nth-child(1) { width: 60%; } /* Name - maximum mobile visibility */
  #price-table th:nth-child(2),
  #price-table td:nth-child(2) { width: 25%; } /* Price - adequate mobile space */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) { width: 18%; min-width: 110px; max-width: 130px; } /* Sentiment - BALANCED TO PREVENT OVERFLOW */
  
  /* DISABLED: These rules target sentiment-badge, not sentiment-tag which is what JS generates */
  /*
  #price-table .sentiment-badge,
  #price-table td .sentiment-badge,
  #price-table .sentiment-container .sentiment-badge,
  table#price-table .sentiment-badge,
  body #price-table .sentiment-badge,
  .sentiment-badge {
    padding: 0px 1px !important;
    font-size: 5px !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 60px !important;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: inline-block !important;
  }
  */
  
  .sentiment-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  .sentiment-score {
    font-size: 3px !important; /* Ultra-tiny score text for 460px */
    margin-top: 0px !important;
    max-width: 60px !important; /* Fixed pixel width to match badge width */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Extra small mobile devices (500px and below) - Optimized layout for tiny screens */
@media (max-width: 500px) {
  /* MOBILE 500px: Compact sentiment, maximum name space */
  #price-table th:nth-child(1),
  #price-table td:nth-child(1) { width: 60%; } /* Name - maximum mobile visibility */
  #price-table th:nth-child(2),
  #price-table td:nth-child(2) { width: 25%; } /* Price - adequate mobile space */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) { width: 18%; min-width: 110px; max-width: 130px; } /* Sentiment - BALANCED TO PREVENT OVERFLOW */
  
  /* DISABLED: These rules target sentiment-badge, not sentiment-tag which is what JS generates */
  /*
  #price-table .sentiment-badge,
  #price-table td .sentiment-badge,
  #price-table .sentiment-container .sentiment-badge,
  table#price-table .sentiment-badge,
  body #price-table .sentiment-badge,
  .sentiment-badge {
    padding: 0px 2px !important;
    font-size: 6px !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 65px !important;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: inline-block !important;
  }
  */
  
  .sentiment-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 1px !important;
  }
  
  .sentiment-score {
    font-size: 4px !important; /* Ultra-tiny score text for 500px */
    margin-top: 0px !important;
    max-width: 65px !important; /* Fixed pixel width to match badge width */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Ensure sentiment cell doesn't overflow */
  #price-table th:nth-child(3),
  #price-table td:nth-child(3) {
    overflow: hidden !important;
    padding: 14px 4px !important; /* Reduced horizontal padding */
  }
  
  /* Extra compact styling for very small screens */
  #price-table thead th {
    font-family: 'Inter', sans-serif !important;
    padding: 12px 6px !important;
    font-size: 11px !important;
  }
  
  #price-table tbody td {
    padding: 14px 6px !important;
    font-size: 13px !important;
  }
  
  /* Ultra-compact coin cell */
  .coin-cell {
    gap: 4px !important;
  }
  
  .coin-cell::before {
    min-width: 16px !important;
    font-size: 10px !important;
  }
  
  .coin-icon,
  .letter-icon {
    width: 14px !important;
    height: 14px !important;
  }
  
  .coin-name {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }
  
  .coin-symbol {
    font-size: 9px !important;
  }
  
  /* Ultra-compact sentiment styling */
  .sentiment-badge {
    padding: 1px 3px !important;
    font-size: 8px !important;
    border-radius: 6px !important;
  }
  
  .sentiment-score {
    font-size: 7px !important;
  }
  
  /* Ultra-compact price styling */
  .price-value,
  #price-table td:nth-child(2),
  #price-table td:nth-child(2) * {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
  }
}

/* Override Bootstrap */
.table {
  --bs-table-bg: transparent !important;
  --bs-table-hover-bg: var(--bg-row-hover) !important;
  margin: 0 !important;
}

.table > :not(caption) > * > * {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* REMOVED: Earlier 850px-950px override - conflicts with index.html clean responsive strategy */

/* NUCLEAR OPTION: Force Inter font on all price elements */
html body #price-table td:nth-child(2),
html body #price-table td:nth-child(2) *,
html body #price-table td:nth-child(2) div,
html body #price-table td:nth-child(2) span,
html body table#price-table td:nth-child(2),
html body table#price-table td:nth-child(2) *,
html body .price-value,
html .price-value,
.price-value {
  font-family: 'Inter', sans-serif !important;
}

/* =================================================================
   ULTRA-HIGH SPECIFICITY SENTIMENT TAG OVERRIDE
   Must load AFTER modular-crypto-table.css to override ALL constraints
   ================================================================= */

/* Override ALL media query constraints from modular-crypto-table.css */
html body table#price-table tbody tr td.sentiment-cell .sentiment-tag,
html body table#price-table tbody tr td.sentiment-cell span.sentiment-tag,
html body div table#price-table tbody tr td.sentiment-cell .sentiment-tag,
html body div table#price-table tbody tr td.sentiment-cell span.sentiment-tag {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Media query overrides to match modular-crypto-table.css breakpoints */
@media (max-width: 768px) {
  html body table#price-table tbody tr td.sentiment-cell .sentiment-tag,
  html body table#price-table tbody tr td.sentiment-cell span.sentiment-tag {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: 0 !important;
  }
}

@media (max-width: 599px) {
  html body table#price-table tbody tr td.sentiment-cell .sentiment-tag,
  html body table#price-table tbody tr td.sentiment-cell span.sentiment-tag {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: 0 !important;
  }
}

@media (min-width: 600px) and (max-width: 700px) {
  html body table#price-table tbody tr td.sentiment-cell .sentiment-tag,
  html body table#price-table tbody tr td.sentiment-cell span.sentiment-tag {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  html body table#price-table tbody tr td.sentiment-cell .sentiment-tag,
  html body table#price-table tbody tr td.sentiment-cell span.sentiment-tag {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: 0 !important;
  }
}