/* Heat Map Styles for Risk Dashboard */
@layer components {

.kpi-card {
  --panel-padding: var(--block-space-half) var(--inline-space);
  --panel-bg: var(--color-ink-lightest);
  --panel-border-size: 0;

  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-inline-size: 0;
  flex: 1 1 100px;
  text-align: center;

  &:has(.kpi-card__button) {
    padding: 0;
  }
}

.kpi-card__button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  inline-size: 100%;
  padding: var(--block-space-half) var(--inline-space);
  text-align: center;

  @media (any-hover: hover) {
    &:hover {
      background: var(--color-ink-lighter);
      border-radius: var(--panel-border-radius, 1em);
    }
  }
}

.heat-map {
  display: grid;
  gap: var(--block-space-half);
  grid-template-areas:
    "y-label grid"
    ". x-label";
  grid-template-columns: auto 1fr;
}

.heat-map__y-label {
  grid-area: y-label;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-x-small);
  color: var(--color-ink-light);
}

.heat-map__x-label {
  grid-area: x-label;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-x-small);
  color: var(--color-ink-light);
}

.heat-map__grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: auto repeat(5, minmax(2.5rem, 1fr));
  gap: 2px;
}

.heat-map__row-label,
.heat-map__col-label {
  font-size: var(--text-xx-small);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em;
  color: var(--color-ink-light);
}

.heat-map__row-label {
  text-align: end;
  padding-inline-end: 0.5em;
  justify-content: flex-end;
}

.heat-map__col-label {
  padding-block-start: 0.5em;
}

.heat-map__spacer {
  /* Empty cell in grid */
}

.heat-map__cell {
  aspect-ratio: 1;
  min-inline-size: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.25em;
  cursor: default;
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}

.heat-map__cell:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.heat-map__cell--clickable {
  cursor: pointer;
  padding: 0;
}

.heat-map__button {
  appearance: none;
  background: transparent;
  border: none;
  block-size: 100%;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  inline-size: 100%;
  place-items: center;
}

.heat-map__cell--low {
  background-color: oklch(var(--lch-risk-low));
}

.heat-map__cell--medium {
  background-color: oklch(var(--lch-risk-medium));
  color: white;
}

.heat-map__cell--high {
  background-color: oklch(var(--lch-risk-high));
  color: white;
}

.heat-map__cell--critical {
  background-color: oklch(var(--lch-risk-critical));
  color: white;
}

.heat-map__count {
  font-weight: 900;
  font-size: var(--text-large);
}

.heat-map__legend {
  justify-content: center;
  flex-wrap: wrap;
}

.heat-map__legend-item {
  padding: 0.25em 0.75em;
  border-radius: 2em;
  font-size: var(--text-x-small);
  font-weight: 600;
}

.heat-map__legend-item--low {
  background-color: oklch(var(--lch-risk-low));
}

.heat-map__legend-item--medium {
  background-color: oklch(var(--lch-risk-medium));
  color: white;
}

.heat-map__legend-item--high {
  background-color: oklch(var(--lch-risk-high));
  color: white;
}

.heat-map__legend-item--critical {
  background-color: oklch(var(--lch-risk-critical));
  color: white;
}

/* Responsive adjustments - hide labels on mobile for cleaner look */
@media (max-width: 639px) {
  .heat-map {
    display: block;
  }

  .heat-map__y-label,
  .heat-map__x-label,
  .heat-map__legend,
  .heat-map__row-label,
  .heat-map__col-label,
  .heat-map__spacer {
    display: none !important;
  }

  .heat-map__grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px;
  }

  .heat-map__cell {
    aspect-ratio: auto !important;
    min-inline-size: 0 !important;
    padding-block: 50%;
  }

  .heat-map__count {
    font-size: var(--text-small);
  }
}

/* Dashboard layout - stack panels on mobile */
.dashboard-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-space);
  min-inline-size: 0;

  > * {
    min-inline-size: 0;
  }
}

@media (max-width: 700px) {
  .dashboard-panels {
    grid-template-columns: 1fr;
  }
}

} /* End @layer components */