.chart {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: flex-end;
   column-gap: clamp(8px, 1.4vw, 18px);
   width: 100%;
   height: 300px;
   margin: 30px 0;
   overflow: visible; /* let labels that sit above the bars remain visible */
   --chart-headroom: 56px; /* extra space for labels above tallest bars */
}

.y-axis {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
   height: 100%;
   width: 40px;
}

.y-axis div {
   font-weight: bold;
   color: #444;
   height: 0;
   line-height: 0;
   padding: 0;
   margin: 0;
   margin-bottom: 0;
   transform: translateY(50%);
}

.y-axis div:last-child {
   transform: translateY(0);
}

.chart table {
   width: 100%;
   height:100%;
   display: flex;
   margin-bottom: -60px;
}


.chart tbody {
   display: flex;
   flex-direction: column;
   gap: clamp(14px, 2vw, 22px);
   height: 100%;
}

.chart tbody tr:first-child {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: clamp(16px, 2.5vw, 32px);
   width: 100%;
}

.chart tbody tr:last-child {
   display: flex;
   justify-content: space-between;
   gap: clamp(16px, 2.5vw, 32px);
   height: auto !important;
}

.model-bars-container {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   height: 290px;  /* Fixed height */
   width: auto;
   flex: 1;
   min-width: 120px;
   justify-content: center;
}

.model-bar {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 35px;
   margin: 0 clamp(4px, 0.8vw, 10px);
   height: 100%;
   justify-content: flex-end;
   position: relative;
   transition: height 0.3s ease;
}

.model-bar-graphic {
   width: 35px;
   height: 0;  /* Ensure dynamic height is set */
   border-radius: 6px;
   transition: height 0.6s ease-in-out;
}

.model-bar-percentage {
   font-size: 14px;
   text-align: center;
   font-weight: bold;
   opacity: 0;
   position: relative;
   top: -30px;
   margin-bottom: -20px;
}

.model-bar-label {
   font-size: 14px;
   margin-top: 10px;
   text-align: center;
   width: auto;
   flex: 1;
   min-width: 120px;
   font-weight: bold;
   color: #333;
}
.chart-legend {
   display: flex;
   gap: 40px;
   justify-content: center;
   margin-top: 5%;
}
.legend-item {
   display: inline-flex;
   align-items: center;
   transition: transform 0.3s ease-in-out;
   cursor: pointer;
}
.legend-switch {
   width: 20px;
   height: 20px;
   margin-right: 5px;
   border-radius: 3px;
}

.chart.chart--compressed {
   grid-template-columns: 32px 1fr;
   column-gap: 8px;
   margin: 20px 0;
   height: 380px;
   overflow: visible;
   padding-bottom: 12px;
   --chart-headroom: 72px; /* extra space above bars on narrow screens */
}

.chart.chart--compressed .chart-scroll {
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 8px;
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
   margin-bottom: -60px;
}

.chart.chart--compressed table {
   min-width: 520px;
   display: block;
   height: 100%;
   margin-bottom: 0px;
}

.chart.chart--compressed tbody {
   gap: 12px;
   height: 100% !important;
}

.chart.chart--compressed tbody tr:first-child,
.chart.chart--compressed tbody tr:last-child {
   gap: 12px;
   justify-content: flex-start;
}

.chart.chart--compressed .y-axis {
   width: 32px;
   margin-right: 4px;
}

.chart.chart--compressed .y-axis div {
   font-size: 13px;
}

.chart.chart--compressed .model-bars-container {
   min-width: 90px;
   height: 320px;
   gap: 6px;
}

.chart.chart--compressed .model-bar {
   width: 26px;
   margin: 0 4px;
}

.chart.chart--compressed .model-bar-graphic {
   width: 26px;
   border-radius: 5px;
}

.chart.chart--compressed .model-bar-percentage {
   font-size: 12px;
   top: -24px;
   margin-bottom: -14px;
}

.chart.chart--compressed .model-bar-label {
   font-size: 12px;
   min-width: 90px;
}

.chart.chart--compressed + .chart-legend {
   flex-direction: column;
   align-items: center;
   gap: 12px !important;
   margin-top: 60px !important;
}

.chart.chart--compressed + .chart-legend > div {
   justify-content: center;
   width: 100%;
}

.rc_yellow {
   background-color: #fec400;
   box-shadow: 0 4px 6px rgba(254, 196, 0, 0.4);
}

.green {
   background-color: #28a745;
   box-shadow: 0 4px 6px rgba(40, 167, 69, 0.4);
}

.info-tooltip {
   color: white;
   padding: 6px 12px;
   border-radius: 20px;
   font-weight: bold;
   z-index: 1000;
   pointer-events: none;
   white-space: nowrap;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
   transform: translateY(10px);
   transform-origin: center;
   margin-left: 40px;
   margin-bottom: 5px;
}

.info-tooltip.raider {
   background: linear-gradient(135deg, #fec400, #fec400dd);
}

.info-tooltip.nvidia {
   background: linear-gradient(135deg, #28a745, #28a745dd);
}

@media (max-width: 768px) {
   /* Provide headroom above bars so percentages stay inside the scrollable area */
   .chart .chart-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      padding-top: var(--chart-headroom);
      margin-top: calc(-1 * var(--chart-headroom));
   }
}