@use "@/common/styles/colors" as *

.chart-container
  display: flex
  flex-direction: column
  min-width: 16rem
  max-width: 100%
  border: 1px solid $light-gray
  background-color: var(--glass-bg)
  backdrop-filter: blur(8px)
  -webkit-backdrop-filter: blur(8px)
  border-radius: 1rem
  cursor: pointer
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease
  animation: 0.25s fadeIn ease-out
  flex: 1 1 30%
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
  contain: layout style
  overflow: hidden

  &:hover
    border-color: $accent-primary
    transform: translateY(-4px)
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15)

.chart-header
  display: flex
  justify-content: space-between
  align-items: center
  padding: 1rem 1.25rem 0.75rem 1.25rem
  flex-shrink: 0

.chart-title
  color: $white
  font-size: 15pt
  font-weight: 600
  margin: 0
  letter-spacing: -0.01em

.chart-body
  flex: 1 1 auto
  min-height: 14rem
  max-height: 20rem
  padding: 0 1.25rem 1.25rem 1.25rem
  position: relative
  overflow: hidden

  canvas
    max-width: 100% !important
    max-height: 100% !important

@media screen and (max-width: 900px)
  .chart-container
    min-width: 100%
    max-width: 100%
    flex: 1 1 100%

  .chart-body
    min-height: 12rem
    max-height: 16rem

@media screen and (max-width: 500px)
  .chart-container
    padding: 0.5rem
    border-radius: 0.75rem

  .chart-body
    min-height: 10rem
    max-height: 14rem