/* ── Shared variables ──────────────────────────────────────────── */

:root {
  --alert-color:      #ef4444;
  --alert-color-dark: #b91c1c;
  --sensor-teal:      #00C59E;
}

/* ── Sensor Sliders ────────────────────────────────────────────── */

.param-sensor-sliders {
  --slider-color:      #00C59E;
  --slider-track-bg:   #e2e2e2;
  --slider-thumb-size: 18px;

  display: flex;
  flex-direction: column;
  gap: .25rem;

  & .param-sensor-sliders__label {
    color: #fff;
    margin: 1rem 0 .25rem;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;

    &:first-child { margin-top: 0; }
  }
}

.param-slider {
  max-width: 480px;

  & .param-slider__labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
    font-size: .85rem;
    color: #fff;

    & .param-slider__val { color: var(--slider-color); }
  }

  & .param-slider__track {
    position: relative;
    height: 2.25rem;

    &::before {
      content: ""; position: absolute; inset: 0; margin: auto;
      height: 6px; background: var(--slider-track-bg); border-radius: 999px;
    }
  }

  & .param-slider__fill {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 6px; left: 0; width: 0;
    background: var(--slider-color); border-radius: 999px;
  }

  & .param-slider__input {
    position: absolute; left: 0; right: 0; width: 100%;
    margin: 0; background: transparent; pointer-events: none;
    -webkit-appearance: none; appearance: none;

    &::-webkit-slider-thumb {
      pointer-events: all; -webkit-appearance: none; appearance: none;
      width: var(--slider-thumb-size); height: var(--slider-thumb-size);
      border-radius: 50%; background: var(--slider-color);
      border: 2px solid white; box-shadow: 0 0 0 1px #222;
    }
    &::-moz-range-thumb {
      pointer-events: all;
      width: var(--slider-thumb-size); height: var(--slider-thumb-size);
      border-radius: 50%; background: var(--slider-color); border: 2px solid white;
    }
    &::-webkit-slider-runnable-track,
    &::-moz-range-track { height: 6px; background: transparent; }
  }
}

/* ── Custom tooltip sizing ─────────────────────────────────────── */

.param-tooltip-custom {
  width: 500px;
  border-radius: 14px;
  padding: 14px 16px;
  align-items: flex-start !important;
}

/* ── Sensor tooltip layout ─────────────────────────────────────── */

.param-sensor-tooltip {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.param-sensor-tooltip__array {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sensor-teal);
}

.param-sensor-tooltip__room {
  font-size: 1.56rem;
  font-weight: 700;
  opacity: .75;
}

.param-sensor-tooltip__divider {
  border: none;
  border-top: 2px solid var(--color-primary, #00c59e);
  margin: 2px 0 4px;
}

.param-sensor-tooltip__columns {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.param-sensor-tooltip__readings {
  flex: 1 1 auto;
  min-width: 0;
}

.param-sensor-tooltip__chart {
  flex: 0 0 160px;

  & img { width: 100%; height: auto; border-radius: 4px; display: block; }
}

.param-sensor-tooltip__col-label {
  margin: 0 0 4px;
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .8;
}

.sensor-readout {
  display: flex;
  flex-direction: column;
  padding: .15rem 0;

  & .sensor-readout__label { font-size: .9rem; opacity: .7; }
  & .sensor-readout__value {
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--sensor-teal);
    text-shadow: 0.04em 0.04em 0em rgba(0, 0, 0, 0.75);
  }
  &.sensor-readout--empty { display: none; }
}

.sensor-readout.is-alert .sensor-readout__value {
  color: var(--alert-color) !important;
  text-shadow: 0.04em 0.04em 0em rgba(0, 0, 0, 0.75) !important;
}

/* Leak row — full width, slight top separation */
.sensor-readout--leak {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

/* ── Alert states ──────────────────────────────────────────────── */

@keyframes param-hotspot-pulse-alert {
  0%   { box-shadow: 0 0 0 0    rgba(239, 68, 68, 0.4), 0 0 0 0    rgba(239, 68, 68, 0.4); }
  33%  { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0),   0 0 0 0    rgba(239, 68, 68, 0.6); }
  66%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0),   0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0    rgba(239, 68, 68, 0),   0 0 0 15px rgba(239, 68, 68, 0); }
}

.param-hotspot-item.sensor--alert .param-hotspot-dot {
  background-color: var(--alert-color) !important;
  border-color:     var(--alert-color) !important;
  animation-name:   param-hotspot-pulse-alert !important;
}

/* Circle/sonar variant: keep frosted background, rings go red — they're behind the dot so no flash */
.param-icon-circle .param-hotspot-item.sensor--alert .param-hotspot-dot {
  background-color: rgba(255, 255, 255, 0.28) !important;
  animation-name:   none !important;
}

.param-hotspot-item.sensor--alert .param-sonar-ring {
  border-color: var(--alert-color);
}

.param-hotspot-tooltip.sensor-tooltip--alert {
  border-color: var(--alert-color) !important;
}