/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --verdant-surface: #F8FAF8;
  --water-button-fill: #3B82F6;
  --water-button-empty: var(--verdant-surface);
}

.flora-show-content {
  --water-button-empty: white;
}

.pressure-circle-use-surface {
  --water-button-empty: var(--verdant-surface);
}

/* Glow ring: --water-pressure 0 at 51, 1 at 100. No glow when value <= 50 (handled in component). */
[data-water-pressure-band] {
  --w: var(--water-pressure, 0);
  box-shadow:
    0 0 0 2px rgb(255 255 255 / calc(0.9 * var(--w))),
    0 0 calc(28px * var(--w)) calc(5px * var(--w)) rgb(59 130 246 / calc(0.75 * var(--w)));
}

[data-water-pressure-band="high"] {
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.9),
    0 0 0 5px rgb(96 165 250),
    0 0 24px 8px rgb(59 130 246 / 0.7);
}

@media (prefers-reduced-motion: no-preference) {
  [data-water-pressure-band="high"] {
    animation: water-button-pulse 2.5s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-water-pressure-band="high"] {
    animation: none;
  }
}

@keyframes water-button-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

/* Snapshot delete: loading overlay on the row while delete is in flight */
.snapshot-delete-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0.25rem;
}
.snapshot-delete-overlay__text {
  font-size: 0.875rem;
  color: rgba(44, 62, 80, 0.7);
}