/* ===== Widget Wrapper (layout-agnostic) ===== */
.widget-performance-history {
  /* Card visuals */
  background-color: var(--color-gray-200);
  border: 1px solid var(--color-darkslategray-100);
  border-radius: var(--br-4xs);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

  /* Content layout */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px 20px 20px;

  /* Let page/grid control placement & size */
  width: auto;
  /* was fixed */
  height: auto;
  /* was fixed */
  min-height: var(--chart-min-height, 400px);
  box-sizing: border-box;
}

/* ===== Header Controls (unchanged) ===== */
.chart-header-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
}

.widget-title {
  font-size: 16px;
  font-weight: 600;
}

.title-and-filter {
  display: flex;
  gap: 16px;
  align-items: center;
}

.select-wrapper {
  position: relative;
  display: inline-block;
  width: max-content;
}

/* Metric Filter (unchanged) */
.performance-filter {
  width: 160px;
  height: 32px;
  background-color: #1c1c24;
  color: white;
  border: 1px solid #454756;
  border-radius: 4px;
  padding: 0 8px;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  appearance: none;
}

.performance-filter:hover {
  background-color: #272730;
}


.performance-filter:focus,
.performance-filter:active {
  border: 1px solid white;
  outline: none !important;
  box-shadow: none !important;
}

.performance-filter:focus-visible {
  border: 1px solid #3CB4CC;
  outline: none !important;
  box-shadow: none !important;
}

.select-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: auto;
  pointer-events: none;
  filter: brightness(0) invert(1);
}

/* Date Range / Time Period (unchanged) */
.date-range-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ccc;
}

.date-range-label {
  font-weight: 500;
}

.chevron-left,
.chevron-right {
  background: none;
  border: 0;
  padding: 0;
  width: 11.5px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chevron-right {
  transform: rotate(-180deg);
}

.chevron-left img,
.chevron-right img {
  width: 5px;
  height: 9px;
}

.time-period-control {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.time-period-control button {
  cursor: pointer;
  border: none;
  padding: 5px 10px;
  background: transparent;
  color: #aaa;
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  transition: color .2s, background .2s;
  border-radius: 4px;
}

.time-period-control button.selected {
  background-color: #454857;
  color: #fff;
}

.time-period-control button:not(.selected):hover {
  background-color: #272730;
}

/* ===== Chart & Tooltip (unchanged) ===== */
.chart-container {
  position: relative;
  width: 100%;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ChartingEngine {
  height: 260px !important;
  width: 100% !important;
}


.chart-tooltip {
  position: absolute;
  background: #1c1c24;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
  border: 1px solid #444;
  display: none;
  width: 197px;
  height: auto;
  z-index: 9999;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  flex-direction: column;
  gap: 4px;
}

.tooltip-title {
  font-size: 16px;
  color: white;
  font-weight: 500;
}

.tooltip-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #a8aaaf;
  line-height: 1.4;

}

.tooltip-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.tooltip-value {
  font-size: 20px;
  font-weight: 500;
}

.kda-details {
  font-size: 14px;
  font-weight: 500;
  color: #ffb400;
}

.tooltip-date {
  font-size: 12px;
  color: #a8aaaf;
  margin-top: 4px;
}

.progress-bar-container {
  width: 100%;
  background: #454857;
  height: 6px;
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: #ffb400;
  border-radius: 3px;
  transition: width .3s ease-in-out;
  width: 0%;
}

@media screen and (max-width: 550px) {

  .widget-performance-history {
    gap: 0px;
  }

}

@media screen and (max-width: 390px) {

  .title-and-filter {
    display: flex;
    gap: 8px;
    align-items: start;
    flex-direction: column;
  }

  .widget-performance-history {
    height: 422px;
  }
}