@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Hebrew:wght@400;700&display=swap');

/* ====== BASE STYLES ====== */
.momentum-chart-container {
  font-family: 'Heebo', sans-serif;
  direction: rtl;
  color: #fff;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
  /* Default minimum height */
}

/* Responsive container that takes parent height */
.momentum-chart-container.momentum-responsive {
  position: relative;
  height: 100% !important;
  /* Override any inline height */
  width: 100%;
  min-height: 400px;
  /* Ensure a minimum height for very small containers */
  display: flex;
  flex-direction: column;
}

.momentum-chart-container * {
  box-sizing: border-box;
}

/* Main wrapper with green border */
.momentum-chart-wrapper {
  width: 100%;
  max-width: 1400px; /* Increased from 900px to 1400px to accommodate side-by-side layout */
  margin: 0 auto;
  background: #1A1C2E;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  min-height: 450px;
  padding-bottom: 20px; /* Add bottom padding for desktop table */
}

/* Green gradient border */
.momentum-chart-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #262626, #50ED75, #262626);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* ====== TABS CONTAINER ====== */
.momentum-tab-container {
  background: #010312;
  padding: 15px 25px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* ====== TIME FILTER TABS ====== */
.momentum-time-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  position: relative;
}

.momentum-time-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #18291C;
}

.momentum-time-tabs .tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  text-shadow: none;
}

.momentum-time-tabs .tab:hover {
  color: #00FF94;
}

.momentum-time-tabs .tab.active {
  color: #00FF94;
  border-bottom-color: #00FF94;
  background: transparent;
}

.momentum-time-tabs .tab:focus,
.momentum-time-tabs .tab:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* ====== CATEGORY FILTER RADIO TABS ====== */
.momentum-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  margin: 15px 0;
  justify-content: flex-start;
}

.momentum-category-tabs .tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  padding: 4px 20px 4px 0;
  margin: 0;
  transition: 0.3s;
  text-align: right;
  white-space: nowrap;
}

/* Radio button outer circle */
.momentum-category-tabs .tab::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: 0.3s;
  box-sizing: border-box;
}

/* Active radio button styles */
.momentum-category-tabs .tab.active::before {
  border-color: #00FF94;
}

/* Inner dot */
.momentum-category-tabs .tab.active::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #00FF94;
  border-radius: 50%;
}

.momentum-category-tabs .tab.active,
.momentum-category-tabs .tab:hover {
  color: #00FF94;
}

/* Content flex container - using proper flexbox for layout */
.momentum-content-container {
  display: flex;
  flex-direction: row; /* Changed back to row for side-by-side layout */
  min-height: 450px;
  padding: 20px;
  gap: 20px;
  align-items: stretch; /* Ensure both sections have equal height */
}

/* For responsive containers, ensure content fills height */
.momentum-responsive .momentum-content-container {
  flex: 1;
  min-height: 0;
  /* Reset min-height for flexbox to work */
}

/* Chart container with responsive sizing */
.momentum-chart-area {
  flex: 0 0 75%; /* Increased from 70% to 75% for more chart space */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 350px;
  width: auto; /* Let flex control the width */
}

/* Ensure chart area fills its container in responsive mode */
.momentum-responsive .momentum-chart-area {
  min-height: 0;
  /* Reset min-height for flex children */
  flex: 1;
  width: 100%;
  max-height: 800px; /* Add maximum height constraint for responsive mode too */
}

/* Leaderboard with responsive sizing */
.momentum-leaderboard {
  flex: 0 0 25%; /* Reduced from 30% to 25% to give more space to chart */
  max-width: none; /* Remove max-width restriction */
  background: #181A2E;
  border-radius: 8px;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.39);
  order: 2;
  height: auto;
  min-height: 400px;
}

/* Leaderboard content container */
.momentum-leaderboard-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 0;
  height: 100%;
}

/* Bottom button container */
.momentum-leaderboard-button  {
  width: 100%;
  display: flex !important;
  justify-content: center;
  margin-top: 0;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Leaderboard elements */
.momentum-leaderboard .leader-img {
  width: 85%;
  max-height: 136px; /* Reduced by 15% from 160px */
  max-width: 136px; /* Reduced by 15% from 160px */
  margin-bottom: 25px;
  margin-top: 0;
  object-fit: contain;
  flex: 1;
  border-radius: 8px;
}

.momentum-leaderboard .first-place {
  color: #00FF94;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  text-align: center;
}

.momentum-leaderboard .company-name {
  flex:1;
  color: #FFFFFF;
  font-size: 16px;
  font-family: 'Heebo', sans-serif;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  white-space: normal; /* allow line breaks */
  word-wrap: break-word;
  overflow-wrap: break-word; /* modern syntax */
  margin-bottom: 10px;
}

.momentum-leaderboard .percentage {
  flex:1;
  color: #00FF94;
  font-size: 2rem;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 25px;
  direction: ltr;
  text-align: center;
  height: 100%;
  width: 100%;

}

/* For negative values - keep consistent color */
.momentum-leaderboard .percentage.negative {
  color: #00FF94;
}

.momentum-leaderboard button,
.momentum-leaderboard-button .momentum-popup-button {
  background: #00FF94;
  color: #025C36;
  border: none;
  border-radius: 26px;
  padding: 10px;
  font-family: 'Open Sans Hebrew', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  width: 180px;
  height: 50px;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
}

.momentum-leaderboard button:hover,
.momentum-leaderboard-button .momentum-popup-button:hover {
  background: #02d67a;
}

.momentum-chart-canvas {
  display: block;
  width: 100% !important;
  height: auto; /* allow Chart.js to control the inline height */
  background-color: transparent;
  box-shadow: none;
  min-height: 300px;
  max-width: 100%; /* Ensure canvas doesn't exceed container width */
  /* IMPORTANT: avoid forcing GPU compositing on canvas to prevent warping on scroll */
  will-change: auto;
  transform: none;
  backface-visibility: visible;
  perspective: none;
}

/* For responsive containers, the canvas should fill the available space */
.momentum-responsive .momentum-chart-canvas {
  min-height: 0;
  /* Reset min height */
  flex: 1;
  width: 100%;
}

.momentum-chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #fff;
  text-align: center;
}

.momentum-loading-spinner {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: momentum-spin 1s ease-in-out infinite;
}

@keyframes momentum-spin {
  to { transform: rotate(360deg); }
}

/* Chart title area */
.chart-title-area {
  width: 100%;
  text-align: right;
}

/* ====== MOBILE RESPONSIVE STYLES ====== */
@media (max-width: 768px) {
  .momentum-content-container {
    flex-direction: column;
    padding: 10px;
    min-height: 650px;
  }

  .momentum-responsive .momentum-content-container {
    min-height: 400px;
  }

  .momentum-chart-area {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%; /* Override the 75% max-width for mobile */
    order: 1;
    min-height: 370px;
    padding-bottom: 60px;
    margin-bottom: 15px;
  }

  .momentum-leaderboard {
    flex: 0 0 auto; /* Don't let the leaderboard grow */
    width: 100%;
    max-width: 100%;
    order: 2;
    min-height: 320px; /* Increased from 280px */
    max-height: none; /* Remove max-height restriction to allow content to fit */
    padding-bottom: 20px; /* Add padding at bottom */
  }

  .momentum-leaderboard-content {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px; /* Ensure minimum height for content */
  }

  .momentum-leaderboard-button {
    margin-top: 10px; /* Reduced from 15px */
  }

  .momentum-category-tabs {
    gap: 10px 15px;
  }

  .momentum-category-tabs .tab {
    font-size: 13px;
  }

  .momentum-chart-canvas {
    min-height: 320px;
    margin-bottom: 15px;
  }

  .momentum-responsive .momentum-chart-canvas {
    min-height: 250px;
  }

  /* Adjust company logo size on mobile */
  .momentum-leaderboard .leader-img {
    max-width: 120px; /* Smaller logo */
    margin-bottom: 15px; /* Reduced margin */
  }
  
  /* Adjust company name size */
  .momentum-leaderboard .company-name {
    margin-bottom: 15px; /* Reduced margin */
    font-size: 14px;
  }
  
  /* Adjust percentage size */
  .momentum-leaderboard .percentage {
    font-size: 40px; /* Smaller font */
    margin-bottom: 15px; /* Reduced margin */
  }
  
  /* Make button smaller */
  .momentum-leaderboard button {
    height: 40px; /* Reduced height */
    width: 160px; /* Reduced width */
  }

  .momentum-chart-loading,
  .momentum-chart-error {
    min-height: 150px;
  }

  .momentum-loading-spinner {
    width: 30px;
    height: 30px;
  }
}

/* Extra adjustments for very small screens */
@media (max-width: 500px) {
  .momentum-chart-area {
    padding-bottom: 60px;
    min-height: 350px;
  }

  .momentum-leaderboard {
    min-height: 300px; /* Increased from 250px */
    max-height: none; /* Remove max-height restriction */
  }

  .momentum-leaderboard-content {
    min-height: 200px; /* Ensure minimum height for content */
  }

  .momentum-chart-canvas {
    min-height: 280px;
    margin-bottom: 10px;
  }

  .momentum-responsive .momentum-chart-canvas {
    min-height: 220px;
  }
  
  /* Further reduce sizes on very small screens */
  .momentum-leaderboard .leader-img {
    max-width: 100px;
    margin-bottom: 10px;
  }
  
  .momentum-leaderboard .company-name {
    margin-bottom: 10px;
    font-size: 13px;
  }
  
  .momentum-leaderboard .percentage {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .momentum-chart-loading,
  .momentum-chart-error {
    min-height: 150px;
  }

  .momentum-loading-spinner {
    width: 30px;
    height: 30px;
  }
}

/* Error states */
.momentum-chart-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #fff;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.momentum-chart-error p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* === MOBILE TABLE STYLES (UPDATED) === */
.momentum-mobile-table-wrapper {
  display: none;
  width: 100%;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-out;
}

.momentum-mobile-table-wrapper.show {
  opacity: 1;
  transform: translateY(0);
}

/* Alternative slide effect - uncomment to use instead of fade */
/*
.momentum-mobile-table-wrapper {
  display: none;
  width: 100%;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-in-out, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.momentum-mobile-table-wrapper.show {
  opacity: 1;
  transform: translateY(0);
}
*/

.momentum-mobile-table {
  width: 100%;
  border-collapse: collapse;
  background: #010312;
  color: #fff;
  font-size: 14px;
  direction: rtl;
}

.momentum-mobile-table th, .momentum-mobile-table td {
  border: 1px solid #23243a;
  padding: 8px 4px;
  text-align: center;
}

.momentum-mobile-table th {
  background: #181A2E;
  font-weight: bold;
  color: #fff;
}

/* Top 3 Ranking Styles */
.momentum-mobile-table tr.rank-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05)) !important;
  border: 2px solid #C0C0C0;
  border-left: 2px solid #C0C0C0;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.momentum-mobile-table tr.rank-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.05)) !important;
  border: 2px solid #C0C0C0;
  border-left: 2px solid #C0C0C0;
  box-shadow: inset 0 0 10px rgba(192, 192, 192, 0.1);
}

.momentum-mobile-table tr.rank-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.05)) !important;
  border: 2px solid #C0C0C0;
  border-left: 2px solid #C0C0C0;
  box-shadow: inset 0 0 10px rgba(205, 127, 50, 0.1);
}

/* Ranking icons */
.momentum-mobile-table .rank-icon {
  width: 18px;
  height: 18px;
}

.momentum-mobile-table .company-name-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  direction: rtl;
  position: relative;
}

.momentum-mobile-table .rank-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.momentum-mobile-table .company-name-with-icon .company-text {
  flex: 1;
  text-align: center;
}

/* Enhanced styling for ranking rows */
.momentum-mobile-table tr.rank-1 td,
.momentum-mobile-table tr.rank-2 td,
.momentum-mobile-table tr.rank-3 td {
  position: relative;
  font-weight: 800;
}

/* Subtle glow effect for top 3 */
.momentum-mobile-table tr.rank-1 td {
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
}

.momentum-mobile-table tr.rank-2 td {
  text-shadow: 0 0 3px rgba(192, 192, 192, 0.3);
}

.momentum-mobile-table tr.rank-3 td {
  text-shadow: 0 0 3px rgba(205, 127, 50, 0.3);
}

.momentum-mobile-table td.positive {
  color: #00FF94;
}

.momentum-mobile-table td.negative {
  color: #FF3B3B;
}

.momentum-mobile-table .mobile-company-name {
  font-size: 1.15em;
  font-weight: 700;
  white-space: nowrap;
}
.momentum-mobile-table .mobile-percent {
  font-size: 1.25em;
  font-weight: 700;
}
.momentum-mobile-table .mobile-company-header,
.momentum-mobile-table .mobile-percent-header {
  font-size: 1.1em;
  font-weight: 700;
}

@media (max-width: 768px) {
  .momentum-mobile-table-wrapper {
    display: block;
  }
  .momentum-chart-area {
    display: none !important;
  }
  .momentum-leaderboard {
    display: none !important;
  }
  .momentum-mobile-table th, .momentum-mobile-table td {
    font-size: 13px;
    padding: 6px 2px;
  }
  .momentum-mobile-table th {
    font-size: 14px;
  }
  .momentum-mobile-table .mobile-company-name {
    font-size: 1.2em;
    font-weight: 700;
  }
  .momentum-mobile-table .mobile-percent {
    font-size: 1.35em;
    font-weight: 700;
  }
  .momentum-mobile-table .mobile-company-header,
  .momentum-mobile-table .mobile-percent-header {
    font-size: 1.15em;
    font-weight: 700;
  }
}

@media (min-width: 769px) {
  .momentum-mobile-table-wrapper {
    display: none !important;
  }
}

/* ====== DESKTOP TABLE STYLES ====== */
.momentum-desktop-table-wrapper {
  width: calc(100% - 40px); /* Account for 20px margins on each side */
  margin: 20px 20px 0 20px; /* Add horizontal margins to match content container */
  background: #181A2E;
  border-radius: 8px;
  padding: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-out;
}

.momentum-desktop-table-wrapper.show {
  opacity: 1;
  transform: translateY(0);
}

.momentum-desktop-table {
  width: 100%;
  border-collapse: collapse;
  background: #010312;
  color: #fff;
  font-size: 14px;
  direction: rtl;
  border-radius: 8px;
  overflow: hidden;
}

.momentum-desktop-table th, .momentum-desktop-table td {
  border: 1px solid #23243a;
  padding: 12px 8px;
  text-align: center;
}

.momentum-desktop-table th {
  background: #181A2E;
  font-weight: bold;
  color: #fff;
  font-size: 16px;
}

/* Top 3 Ranking Styles for Desktop */
.momentum-desktop-table tr.rank-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05)) !important;
  border: 2px solid #FFD700;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.momentum-desktop-table tr.rank-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.05)) !important;
  border: 2px solid #C0C0C0;
  box-shadow: inset 0 0 10px rgba(192, 192, 192, 0.1);
}

.momentum-desktop-table tr.rank-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.05)) !important;
  border: 2px solid #CD7F32;
  box-shadow: inset 0 0 10px rgba(205, 127, 50, 0.1);
}

.momentum-desktop-table .rank-icon {
  width: 20px;
  height: 20px;
}

.momentum-desktop-table .company-name-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: rtl;
}

.momentum-desktop-table .company-name-with-icon .company-text {
  flex: 1;
  text-align: center;
}

/* Ensure consistent alignment for all company name cells */
.momentum-desktop-table .desktop-company-name {
  position: relative;
}


.momentum-desktop-table tr.rank-1 td,
.momentum-desktop-table tr.rank-2 td,
.momentum-desktop-table tr.rank-3 td {
  font-weight: 700;
}

.momentum-desktop-table tr.rank-1 td {
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
}

.momentum-desktop-table tr.rank-2 td {
  text-shadow: 0 0 3px rgba(192, 192, 192, 0.3);
}

.momentum-desktop-table tr.rank-3 td {
  text-shadow: 0 0 3px rgba(205, 127, 50, 0.3);
}

.momentum-desktop-table td.positive {
  color: #00FF94;
}

.momentum-desktop-table td.negative {
  color: #FF3B3B;
}

.momentum-desktop-table .desktop-company-name {
  font-size: 1.1em;
  font-weight: 600;
}

.momentum-desktop-table .desktop-percent {
  font-size: 1.2em;
  font-weight: 700;
}

.momentum-desktop-table .desktop-company-header,
.momentum-desktop-table .desktop-percent-header {
  font-size: 1.1em;
  font-weight: 700;
}

/* Hide desktop table on mobile */
@media (max-width: 768px) {
  .momentum-desktop-table-wrapper {
    display: none !important;
  }
}

/* ====== CHART HEIGHT CONTROL ====== */
.momentum-chart-wrapper.height-small {
    max-width: 800px; /* Smaller max width = smaller square chart */
}

.momentum-chart-wrapper.height-medium {
    max-width: 900px; /* Medium max width = medium square chart */
}

.momentum-chart-wrapper.height-large {
    max-width: 1200px; /* Large max width = large square chart */
}

.momentum-chart-wrapper.height-compact {
    max-width: 700px; /* Very compact chart */
    min-height: 400px;
}

.momentum-chart-wrapper.height-compact .momentum-content-container {
    min-height: 400px;
    padding: 15px;
}

.momentum-chart-wrapper.height-compact .momentum-chart-area {
    min-height: 300px;
}