/* ═══════════════════════════════════════════════════════════
   alert.css — KyivAlert Widget
   Стани: loading | no-alarm | attention | alarm | no-signal
═══════════════════════════════════════════════════════════ */

/* ── CSS ЗМІННІ ──────────────────────────────────────────── */
:root {
  --alarm-poll-sec:  10s;
  --alarm-size:      65.2px;   /* розмір у верхньому рядку */
  --alarm-icon-size: 40%;

  --clr-no-alarm:   #22c55e;
  --clr-attention:  #f59e0b;
  --clr-alarm:      #ef4444;
  --clr-no-signal:  #6b7280;
  --clr-loading:    #334155;

  --fill-no-alarm:  #052e16;
  --fill-attention: #052e16;
  --fill-alarm:     #420808;
  --fill-no-signal: #111827;
  --fill-loading:   #1e293b;
}



/* ════════════════════════════════════════════════════════════
   ALARM WIDGET
════════════════════════════════════════════════════════════ */

#alarm-widget {
  position:    relative;
  width:       var(--alarm-size);
  height:      var(--alarm-size);
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  justify-content: center;
}

#alarm-bg-svg {
  width:   100%;
  height:  100%;
  display: block;
}

#alarm-icon {
  position:  absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:  var(--alarm-icon-size);
  height: var(--alarm-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

#alarm-icon svg {
  width:    100%;
  height:   100%;
  overflow: visible;
}

/* ── СПІНЕР ──────────────────────────────────────────────── */
#alm-spinner {
  transform-box:    fill-box;
  transform-origin: center;
  animation: alm-spin var(--alarm-poll-sec) linear infinite;
}

@keyframes alm-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

/* ════════════════════════════════════════════════════════════
   СТАНИ — кольори кіл
════════════════════════════════════════════════════════════ */

.alarm-state-loading #alm-outer   { stroke: var(--clr-loading); }
.alarm-state-loading #alm-spinner { stroke: var(--clr-loading); }
.alarm-state-loading #alm-inner   { fill: var(--fill-loading); stroke: var(--clr-loading); }
.alarm-state-loading #alarm-icon  { color: var(--clr-loading); }

.alarm-state-no-alarm #alm-outer   { stroke: var(--clr-no-alarm); transition: stroke .6s; }
.alarm-state-no-alarm #alm-spinner { stroke: var(--clr-no-alarm); transition: stroke .6s; }
.alarm-state-no-alarm #alm-inner   { fill: var(--fill-no-alarm); stroke: var(--clr-no-alarm); transition: fill .6s, stroke .6s; }
.alarm-state-no-alarm #alarm-icon  { color: var(--clr-no-alarm); }

/* ATTENTION: зовнішнє=жовте, внутрішнє=зелене */
.alarm-state-attention #alm-outer   { stroke: var(--clr-attention); transition: stroke .6s; }
.alarm-state-attention #alm-spinner { stroke: var(--clr-attention); transition: stroke .6s; }
.alarm-state-attention #alm-inner   { fill: var(--fill-attention); stroke: var(--clr-no-alarm); transition: fill .6s, stroke .6s; }
.alarm-state-attention #alarm-icon  { color: var(--clr-attention); }

.alarm-state-alarm #alm-outer   { stroke: var(--clr-alarm); transition: stroke .6s; }
.alarm-state-alarm #alm-spinner { stroke: var(--clr-alarm); transition: stroke .6s; }
.alarm-state-alarm #alm-inner   { fill: var(--fill-alarm); stroke: var(--clr-alarm); transition: fill .6s, stroke .6s; }
.alarm-state-alarm #alarm-icon  { color: var(--clr-alarm); }

.alarm-state-no-signal #alm-outer   { stroke: var(--clr-no-signal); transition: stroke .6s; }
.alarm-state-no-signal #alm-spinner { stroke: var(--clr-no-signal); transition: stroke .6s; }
.alarm-state-no-signal #alm-inner   { fill: var(--fill-no-signal); stroke: var(--clr-no-signal); transition: fill .6s, stroke .6s; }
.alarm-state-no-signal #alarm-icon  { color: var(--clr-no-signal); }

/* ALARM: пульсація зовнішнього кільця */
.alarm-state-alarm #alm-outer {
  animation: alm-outer-pulse 0.9s ease-in-out infinite;
}
@keyframes alm-outer-pulse {
  0%,100% { opacity: 1;    }
  50%     { opacity: 0.35; }
}

/* NO_SIGNAL: мигання */
.alarm-state-no-signal #alarm-bg-svg {
  animation: alm-blink 1.8s ease-in-out infinite;
}
@keyframes alm-blink {
  0%,100% { opacity: 1;    }
  50%     { opacity: 0.35; }
}

/* ════════════════════════════════════════════════════════════
   АНІМАЦІЇ ІКОНОК (.go на #anim-root)
════════════════════════════════════════════════════════════ */

/* NO_ALARM — zoom */
.alarm-state-no-alarm #alarm-icon #anim-root.go {
  animation: alm-icon-zoom 1.6s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes alm-icon-zoom {
  0%   { transform: scale(0);    opacity: 0; }
  35%  { transform: scale(1.18); opacity: 1; }
  55%  { transform: scale(0.9);              }
  75%  { transform: scale(1.06);             }
  90%  { transform: scale(0.97);             }
  100% { transform: scale(1);    opacity: 1; }
}

/* ATTENTION — slide up → хитання → slide up exit */
.alarm-state-attention #alarm-icon #anim-root.go {
  animation: alm-icon-attention 2.4s ease-in-out both;
}
@keyframes alm-icon-attention {
  0%   { transform: translateY(30px);  opacity: 0; }
  18%  { transform: translateY(0);     opacity: 1; }
  32%  { transform: rotate(-14deg);               }
  46%  { transform: rotate(14deg);                }
  58%  { transform: rotate(-9deg);                }
  68%  { transform: rotate(8deg);                 }
  76%  { transform: rotate(0deg);                 }
  87%  { transform: translateY(-4px);  opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}

/* ALARM — трясучка */
.alarm-state-alarm #alarm-icon #anim-root.go {
  animation: alm-icon-alarm 2s ease-in-out both;
}
@keyframes alm-icon-alarm {
  0%   { transform: rotate(0deg);   }
  4%   { transform: rotate(-2deg);  }
  8%   { transform: rotate(3deg);   }
  12%  { transform: rotate(-4deg);  }
  16%  { transform: rotate(5deg);   }
  20%  { transform: rotate(-7deg);  }
  24%  { transform: rotate(7deg);   }
  28%  { transform: rotate(-9deg);  }
  32%  { transform: rotate(9deg);   }
  38%  { transform: rotate(0deg);   }
  50%  { transform: rotate(0deg);   }
  55%  { transform: rotate(-4deg);  }
  60%  { transform: rotate(5deg);   }
  65%  { transform: rotate(-7deg);  }
  70%  { transform: rotate(8deg);   }
  75%  { transform: rotate(-9deg);  }
  80%  { transform: rotate(10deg);  }
  86%  { transform: rotate(-10deg); }
  92%  { transform: rotate(10deg);  }
  100% { transform: rotate(0deg);   }
}

/* ════════════════════════════════════════════════════════════
   MOBILE (≤768px)
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --alarm-size: 24px;
  }

  .header-top-strip {
    /*padding:    3px 10px;*/
    min-height: 36px;
    /*gap:        6px;*/
  }

  .header-body {
    padding: 10px;
  }
}