/**
 * Treemap CSS - Cells, Hierarchy Levels, Badges, Legend
 * Handles treemap visualization styles
 * Part of SENTRY Treemap modular refactoring
 */

/* Treemap Cells */
.cell {
  cursor: pointer;
  stroke: var(--color-neutral-white);
  transition: opacity var(--transition-fast);
}

.cell:hover {
  opacity: 0.8;
}

/* Risk Band Colors */
.band-red {
  fill: var(--color-risk-red);
}

.band-amber {
  fill: var(--color-risk-amber);
}

.band-green {
  fill: var(--color-risk-green);
}

/* Hierarchy Level Borders */
.level-Refinery,
.level-Region {
  stroke: var(--stroke-refinery);
  stroke-width: var(--stroke-width-refinery);
  rx: var(--border-radius-xl);
}

.level-Plant,
.level-Facility {
  stroke: var(--stroke-plant);
  stroke-width: var(--stroke-width-plant);
  rx: var(--border-radius-lg);
}

.level-Unit {
  stroke: var(--stroke-unit);
  stroke-width: var(--stroke-width-unit);
  rx: var(--border-radius-md);
}

.level-Equipment,
.level-Asset {
  stroke: var(--stroke-equipment);
  stroke-width: var(--stroke-width-equipment);
}

/* Level Badge */
.level-badge {
  fill: rgba(0, 0, 0, 0.7);
  stroke: white;
  stroke-width: 1;
}

.level-badge-text {
  fill: white;
  font-size: var(--font-size-badge);
  font-weight: bold;
  pointer-events: none;
}

/* Bad Actor Overlay (diagonal stripes) */
.bad-actor-overlay {
  fill: url(#diagonal-stripe);
  pointer-events: none;
}

/* Cell Labels */
.cell-label {
  pointer-events: none;
  font-size: var(--font-size-small);
  fill: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Legend */
#legend {
  position: absolute;
  top: var(--spacing-xl);
  right: var(--spacing-xl);
  background-color: rgba(255, 255, 255, 0.95);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-small);
  border: 1px solid var(--color-brand-primary);
  color: var(--color-neutral-dark-text);
  z-index: var(--z-legend);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: var(--border-radius-sm);
}