/* assets/sensor_alerts.css
   Meldingen bij sensorwaarden buiten het streefbereik.
   Volgt de editorial stijl van graphs.css: harde 1px randen, Fraunces voor de
   kop, mono voor codes en waarden, geen schaduw/gradient/blur. */

.sa-dock {
  position: fixed;
  right: 20px;
  /* Boven de chatbubbel uit (#chatBubble: bottom 28px + 58px hoog). */
  bottom: 100px;
  width: min(384px, calc(100vw - 32px));
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 1080; /* boven Bootstrap-modals' backdrop (1050) uit */
  pointer-events: none;
}

.sa-toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--yuv-donkerblauw, #000644);
  border-left: 4px solid var(--yuv-rood, #FF2F00);
  animation: sa-slip .34s cubic-bezier(.22, .61, .36, 1);
}

.sa-toast--ok { border-left-color: #3f6100; }

.sa-toast.sa-leaving { animation: sa-slipout .26s ease-in forwards; }

@keyframes sa-slip    { from { opacity: 0; transform: translateX(22px); } }
@keyframes sa-slipout { to   { opacity: 0; transform: translateX(22px); } }

.sa-body {
  padding: 13px 15px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sa-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b31f00;
}
.sa-toast--ok .sa-top { color: #3f6100; }

.sa-kar {
  color: #6b6e85;
  letter-spacing: .06em;
  text-transform: none;
  white-space: nowrap;
}

.sa-head {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.15;
  color: var(--yuv-donkerblauw, #000644);
}

.sa-fig {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: #3a3f6b;
}
.sa-fig b {
  color: var(--yuv-donkerblauw, #000644);
  font-size: 14px;
}

.sa-do {
  font-size: 13.5px;
  line-height: 1.5;
  color: #3a3f6b;
}

.sa-acts {
  display: flex;
  gap: 7px;
  margin-top: 3px;
}

.sa-acts button,
.sa-acts a {
  font: inherit;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .04em;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid rgba(0, 6, 68, .16);
  border-radius: 0;
  background: transparent;
  color: var(--yuv-donkerblauw, #000644);
  text-decoration: none;
  transition: background .14s, color .14s, border-color .14s;
}
.sa-acts .sa-go {
  background: var(--yuv-donkerblauw, #000644);
  color: #fff;
  border-color: var(--yuv-donkerblauw, #000644);
}
.sa-acts button:hover,
.sa-acts a:hover {
  background: var(--yuv-donkerblauw, #000644);
  color: #fff;
  border-color: var(--yuv-donkerblauw, #000644);
}
.sa-acts .sa-go:hover {
  background: transparent;
  color: var(--yuv-donkerblauw, #000644);
}
.sa-acts button:focus-visible,
.sa-acts a:focus-visible {
  outline: 2px solid #4b3a8f;
  outline-offset: 2px;
}

/* Aflopende balk = resterende leestijd. Pauzeert bij hover. */
.sa-life {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--yuv-rood, #FF2F00);
  transform-origin: left;
  animation: sa-drain linear forwards;
}
.sa-toast--ok .sa-life { background: #3f6100; }
@keyframes sa-drain { to { transform: scaleX(0); } }

.sa-more {
  pointer-events: auto;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: #6b6e85;
  background: #fff;
  border: 1px solid rgba(0, 6, 68, .16);
  padding: 7px 12px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .sa-toast,
  .sa-toast.sa-leaving { animation: none; }
  .sa-life { display: none; }
}

@media (max-width: 575px) {
  .sa-dock {
    left: 16px;
    right: 16px;
    bottom: 96px;
    width: auto;
  }
}

/* Defecte sensor: technisch probleem, geen teeltprobleem. Lila i.p.v. rood,
   zodat een losse kabel niet als "de kas loopt uit de hand" leest. */
.sa-toast--defect { border-left-color: var(--yuv-lila, #B8A1FF); }
.sa-toast--defect .sa-top { color: #4b3a8f; }
.sa-toast--defect .sa-life { background: #4b3a8f; }

/* Stilgelegde meldingen blijven als balkje staan: het dashboard mag er nooit
   schoon uitzien terwijl een sensor buiten bereik staat. */
.sa-pil {
  pointer-events: auto;
  display: block;
  width: 100%;
  font: inherit;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
  cursor: pointer;
  padding: 7px 12px;
  border: 1px solid var(--yuv-rood, #FF2F00);
  border-radius: 0;
  background: #fff;
  color: #b31f00;
  transition: background .14s, color .14s;
}
.sa-pil:hover { background: var(--yuv-rood, #FF2F00); color: #fff; }
.sa-pil:focus-visible { outline: 2px solid #4b3a8f; outline-offset: 2px; }