.stats-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  min-height: calc(100vh - 140px);
  background: var(--luncher-bg);

  h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--luncher-text);
    margin-bottom: 24px;
  }

  .week-navigator {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;

    svg {
      font-size: 1.5rem;
      color: var(--luncher-text-secondary);
      cursor: pointer;
      padding: 12px;
      border-radius: 50%;
      background: var(--luncher-bg-card);
      box-shadow: var(--luncher-shadow-sm);
      transition: var(--luncher-transition);

      &:hover {
        color: var(--luncher-primary);
        background: var(--luncher-primary-light);
        transform: scale(1.05);
      }
    }

    .date-range {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--luncher-text);
      min-width: 280px;
      text-align: center;
    }
  }

  // Chart container
  .recharts-wrapper {
    background: var(--luncher-bg-card);
    border-radius: var(--luncher-radius-lg);
    box-shadow: var(--luncher-shadow);
    padding: 24px;
    border: 1px solid var(--luncher-border-light);
  }

  // Chart text styling
  .recharts-cartesian-axis-tick-value {
    fill: var(--luncher-text-secondary);
    font-size: 0.85rem;
  }

  .recharts-legend-item-text {
    color: var(--luncher-text) !important;
    font-weight: 500;
  }

  .recharts-tooltip-wrapper {
    .recharts-default-tooltip {
      background: var(--luncher-bg-card) !important;
      border: 1px solid var(--luncher-border) !important;
      border-radius: var(--luncher-radius-sm) !important;
      box-shadow: var(--luncher-shadow-lg) !important;

      .recharts-tooltip-label {
        color: var(--luncher-text) !important;
        font-weight: 600;
        margin-bottom: 8px;
      }

      .recharts-tooltip-item {
        color: var(--luncher-text-secondary) !important;
      }
    }
  }

  .recharts-cartesian-grid-horizontal line,
  .recharts-cartesian-grid-vertical line {
    stroke: var(--luncher-border);
  }

  .voting-stats-section {
    margin-top: 48px;
    width: 100%;
    max-width: 800px;

    h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--luncher-text);
      margin-bottom: 16px;
      text-align: center;
    }
  }

  .voting-stats-table {
    width: 100%;
    background: var(--luncher-bg-card);
    border-radius: var(--luncher-radius-lg);
    box-shadow: var(--luncher-shadow);
    border: 1px solid var(--luncher-border-light);
    overflow: hidden;
    border-collapse: collapse;

    th {
      background: var(--luncher-primary);
      color: #ffffff;
      padding: 12px 20px;
      text-align: left;
      font-weight: 600;
      font-size: 0.9rem;

      &:last-child {
        text-align: center;
        width: 120px;
      }
    }

    td {
      padding: 12px 20px;
      border-bottom: 1px solid var(--luncher-border-light);
      color: var(--luncher-text);
      font-size: 0.9rem;

      &:last-child {
        text-align: center;
        font-weight: 600;
        color: var(--luncher-primary);
      }
    }

    tbody tr {
      transition: var(--luncher-transition);

      &:hover {
        background: var(--luncher-bg-hover);
      }

      &:last-child td {
        border-bottom: none;
      }
    }
  }
}
