/* Global utility classes used across EJS views */

/* ── Mobile / iOS Safari viewport stability ─────────────────────────────────
   Use 100svh (small viewport height) so height is stable when the Safari
   toolbar collapses/expands — prevents the "shifting" layout reflow. */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: transparent; /* remove tap flash on links/buttons */
  touch-action: manipulation;               /* faster tap response, no double-tap zoom */
}

/* Always show action buttons that are hover-only on touch devices */
@media (hover: none) and (pointer: coarse) {
  .monitor-card .opacity-0 { opacity: 1; }
}

/* Minimum 44×44px touch targets for interactive elements on touch devices */
@media (pointer: coarse) {
  .btn-primary, .btn-secondary { min-height: 44px; }
}

/* Input fields */
.input-field {
  width: 100%;
  background-color: var(--bg-input, rgb(15 23 42));
  border: 1px solid rgb(71 85 105); /* slate-600 */
  color: var(--text-base, white);
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.15s;
  outline: none;
}
.input-field:focus {
  border-color: var(--accent, #22c55e);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #22c55e) 20%, transparent);
}
.input-field::placeholder {
  color: var(--text-muted, rgb(100 116 139));
}
select.input-field {
  cursor: pointer;
}
textarea.input-field {
  resize: vertical;
}

/* Form labels */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(203 213 225); /* slate-300 */
  margin-bottom: 0.375rem;
}

/* Buttons */
.btn-primary {
  padding: 0.625rem 1.25rem;
  background-color: var(--accent, #22c55e);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 0.15s;
}
.btn-primary:hover {
  background-color: var(--accent-dark, #16a34a);
}

.btn-secondary {
  padding: 0.625rem 1rem;
  background-color: rgb(51 65 85); /* slate-700 */
  color: rgb(203 213 225); /* slate-300 */
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.15s;
}
.btn-secondary:hover {
  background-color: rgb(71 85 105); /* slate-600 */
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base, rgb(15 23 42)); }
::-webkit-scrollbar-thumb { background: rgb(51 65 85); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105); }

/* Status dot pulse animations — timing matched to mobile app */
/* DOWN: fast, deep fade (650ms half-cycle → 1.3s full, min 15% opacity) */
@keyframes pulse-down {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
/* DEGRADED: medium fade (1100ms half-cycle → 2.2s full, min 30% opacity) */
@keyframes pulse-degraded {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* PAUSED/PENDING: slow fade (1400ms half-cycle → 2.8s full, min 30% opacity) */
@keyframes pulse-paused {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.animate-pulse-down     { animation: pulse-down     1.3s ease-in-out infinite; }
.animate-pulse-degraded { animation: pulse-degraded 2.2s ease-in-out infinite; }
.animate-pulse-paused   { animation: pulse-paused   2.8s ease-in-out infinite; }

/* Dashboard status orb animations */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}
@keyframes ripple-out {
  0%   { transform: scale(1);    opacity: 0.45; }
  100% { transform: scale(1.85); opacity: 0; }
}
.animate-orb-breathe { animation: orb-breathe 1.8s ease-in-out infinite; }
.animate-ripple-1    { animation: ripple-out  2.9s ease-out infinite; }
.animate-ripple-2    { animation: ripple-out  2.9s ease-out 1.45s infinite; }

/* ECG heartbeat animation */
@keyframes ecg-draw {
  0%    { stroke-dashoffset: 1882; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  48%   { stroke-dashoffset: 0; }
  68%   { stroke-dashoffset: 0; }
  68.1% { stroke-dashoffset: 1882; }
  100%  { stroke-dashoffset: 1882; }
}
@keyframes ecg-glow-pulse {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.45; }
}
/* Base — static visible line (non-up states) */
#ecg-svg polyline {
  fill: none;
  stroke: var(--ecg-color, #22c55e);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1882;
}
.ecg-draw-line  { stroke-width: 16; stroke-dashoffset: 0; }
.ecg-glow-inner { stroke-width: 40; stroke-dashoffset: 1882; opacity: 0; }
.ecg-glow-outer { stroke-width: 72; stroke-dashoffset: 1882; opacity: 0; }
/* Active — animated heartbeat (status = up) */
.ecg-active .ecg-draw-line  { stroke-dashoffset: 1882; animation: ecg-draw 2.5s linear infinite; }
.ecg-active .ecg-glow-inner { opacity: 0.18; animation: ecg-draw 2.5s linear infinite, ecg-glow-pulse 1.8s ease-in-out infinite; }
.ecg-active .ecg-glow-outer { opacity: 0.1;  animation: ecg-draw 2.5s linear infinite, ecg-glow-pulse 1.8s ease-in-out infinite; }

/* UP status dot — slow breathing */
@keyframes pulse-up {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.animate-pulse-up { animation: pulse-up 2.5s ease-in-out infinite; }

/* Status page public — mobile history bar: show only last 30 bars */
@media (max-width: 639px) {
  .history-bar > div:not(:nth-last-child(-n+30)) { display: none; }
}