/* BabyBodo — shared styles. Tailwind handles the rest from CDN. */

:root {
  color-scheme: dark;
}

body {
  -webkit-tap-highlight-color: transparent;
}

/* Ring cards (3 rolling-window dials on the dashboard) */
.ring-card {
  position: relative;
  background: #1c1c25;
  border: 1px solid #2a2a36;
  border-radius: 1rem;
  padding: 1.25rem 1rem 1rem;
  text-align: center;
}
.ring-svg {
  width: 100%;
  max-width: 130px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.ring-bg {
  fill: none;
  stroke: #2a2a36;
  stroke-width: 8;
}
.ring-fg {
  fill: none;
  stroke: #4f8bff;
  stroke-width: 8;
  stroke-dasharray: 263.89; /* 2 * pi * 42 */
  stroke-dashoffset: 263.89;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 200ms ease, stroke 200ms ease;
}
.ring-card[data-over="true"] .ring-fg {
  stroke: #ff4f6a;
}
.ring-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -10%);
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ring-label {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: #8a8a99;
}
.ring-window {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: #e7e7ee;
  font-weight: 500;
}

/* Timeline alert markers */
.timeline-marker {
  position: absolute;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 2px;
  background: #ff4f6a;
}

/* Flash animation when an alert fires (subtle red border pulse on the modal) */
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 106, 0.6); }
  50% { box-shadow: 0 0 32px 4px rgba(255, 79, 106, 0.8); }
}
.alert-pulse {
  animation: alertPulse 1s ease-in-out infinite;
}

/* 24-column grid for the timeline */
.grid-cols-24 {
  grid-template-columns: repeat(24, minmax(0, 1fr));
}

/* Receiver alarm — a gentle full-screen "breathing" glow while the baby is
   crying. Soft and calm (wakes without startling), not a hard red strobe. */
@keyframes alarmFlash {
  0%, 100% { background-color: rgba(36, 40, 74, 0.96); }
  50%      { background-color: rgba(79, 91, 150, 0.96); }
}
.alarm-on #alarm-bg {
  animation: alarmFlash 3.2s ease-in-out infinite;
}