/* Alarme (siebter Bereich). Alle Selektoren unter #view-alerts gescoped und
   mit al- praefixt — dieselbe Kollisions-Lehre wie bei rotation.css und
   macro.css (.controls, .legend, .wrap kollidierten dort quer durch die
   Bereiche). Tokens kommen aus base.css. Das Modal haengt am body und ist
   deshalb bewusst NICHT gescoped, aber durchgaengig al- praefixt. */

#view-alerts { max-width: var(--maxw); margin: 0 auto; padding: 16px 20px 64px; }

#view-alerts .al-intro { max-width: 780px; margin: 4px 0 20px; }
#view-alerts .al-intro h1 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.01em; }
#view-alerts .al-intro p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
#view-alerts .al-intro b { color: var(--ink); font-weight: 600; }

#view-alerts .al-status { border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
#view-alerts .al-status.ok { background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--border); }
#view-alerts .al-status.err { background: rgba(246, 53, 56, .12); color: #ff9a9c; border: 1px solid rgba(246, 53, 56, .35); }

#view-alerts .al-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 20px 22px 22px; margin-bottom: 22px;
}
#view-alerts .al-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
#view-alerts .al-panel-head h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
#view-alerts .al-sub { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; max-width: 620px; }
#view-alerts .al-stand { color: var(--muted); font-size: 12px; font-family: var(--font-num); white-space: nowrap; }
#view-alerts .al-empty { color: var(--muted); font-size: 13.5px; padding: 34px 4px; text-align: center; line-height: 1.6; }
#view-alerts .al-empty b { color: var(--ink-2); font-weight: 600; }
.al-dim { color: var(--muted); font-weight: 400; }

/* ---------------- Regelzeilen ---------------- */
#view-alerts .al-rule {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 13px 2px; border-top: 1px solid var(--border);
}
#view-alerts .al-rule:first-child { border-top: none; }
#view-alerts .al-rule.off { opacity: .5; }
#view-alerts .al-rule-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
#view-alerts .al-rule-sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
#view-alerts .al-rule-meta { color: var(--ink-2); font-size: 12px; text-align: right; font-family: var(--font-num); white-space: nowrap; }
#view-alerts .al-rule-act { display: flex; gap: 7px; }
#view-alerts .al-rule-act button {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 6px 11px;
  border-radius: var(--r-sm); cursor: pointer; transition: .15s;
}
#view-alerts .al-rule-act button:hover { color: var(--ink); border-color: var(--muted); }

.al-tag {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 2px 9px; font-size: 11.5px; color: var(--ink-2); font-weight: 500;
}
.al-tag-mode { color: var(--accent-2); background: var(--accent-soft); }
.al-tag-off { color: var(--muted); }

/* ---------------- Historie ---------------- */
#view-alerts .al-log-row {
  display: grid; grid-template-columns: 108px 62px 190px 1fr auto; gap: 12px; align-items: baseline;
  padding: 8px 2px; border-top: 1px solid var(--border); font-size: 12.5px;
}
#view-alerts .al-log-row:first-child { border-top: none; }
#view-alerts .al-log-zeit { color: var(--muted); font-family: var(--font-num); }
#view-alerts .al-log-t { color: var(--accent-2); cursor: pointer; font-family: var(--font-num); }
#view-alerts .al-log-t:hover { text-decoration: underline; }
#view-alerts .al-log-kind { color: var(--ink); }
#view-alerts .al-log-det { color: var(--ink-2); }
#view-alerts .al-log-score { color: var(--muted); font-family: var(--font-num); white-space: nowrap; }

/* ---------------- Erklaerteil ---------------- */
#view-alerts .al-notes { max-width: 820px; margin-top: 26px; }
#view-alerts .al-notes h3 { font-size: 14px; margin: 0 0 10px; }
#view-alerts .al-notes ul { margin: 0; padding-left: 18px; }
#view-alerts .al-notes li { color: var(--ink-2); font-size: 13px; line-height: 1.65; margin-bottom: 9px; }
#view-alerts .al-notes b { color: var(--ink); font-weight: 600; }

/* ---------------- Knopf + Modal ---------------- */
.al-btn-primary {
  background: var(--accent-soft); border: 1px solid var(--accent-2); color: var(--accent-2);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; padding: 9px 16px;
  border-radius: var(--r-sm); cursor: pointer; transition: .15s; white-space: nowrap;
}
.al-btn-primary:hover { background: var(--accent); color: #fff; }
.al-btn-primary:disabled { opacity: .5; cursor: default; }

#al-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
#al-modal[hidden] { display: none; }
#al-modal .al-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 18, .74); backdrop-filter: blur(2px); }
#al-modal .al-panel-modal {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2, 0 24px 60px rgba(0,0,0,.5));
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
}
#al-modal .al-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px 13px; border-bottom: 1px solid var(--border); }
#al-modal .al-modal-head h3 { margin: 0; font-size: 16px; }
#al-modal .al-modal-head button {
  background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
#al-modal .al-modal-head button:hover { color: var(--ink); }
#al-modal .al-modal-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; }
#al-modal label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
/* MUSS nach der Regel darueber stehen: Das HTML-Attribut hidden wirkt nur
   ueber display:none aus dem Browser-Stylesheet, und ein eigenes
   display:flex schlaegt das. Ohne diese Zeile blieb das Schwellenfeld bei
   JEDER Regelart sichtbar, und die Eingabe verfiel beim Speichern
   stillschweigend (2026-08-26 vom Nutzer gefunden). */
#al-modal label[hidden] { display: none; }
#al-modal input, #al-modal select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; font-weight: 400; padding: 9px 11px;
}
#al-modal input:focus, #al-modal select:focus { outline: none; border-color: var(--accent-2); }
#al-modal .al-hinweis {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; color: var(--muted); font-size: 12.5px; line-height: 1.6;
}
#al-modal .al-hinweis b { color: var(--ink-2); }
#al-modal .al-ev { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); color: var(--ink-2); }
#al-modal .al-msg { color: #ff9a9c; font-size: 12.5px; line-height: 1.5; }
#al-modal .al-modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 20px 17px; border-top: 1px solid var(--border); }
#al-modal .al-modal-foot button:not(.al-btn-primary) {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; padding: 9px 14px;
  border-radius: var(--r-sm); cursor: pointer;
}

@media (max-width: 760px) {
  #view-alerts .al-rule { grid-template-columns: 1fr; gap: 9px; }
  #view-alerts .al-rule-meta { text-align: left; }
  #view-alerts .al-log-row { grid-template-columns: 78px 56px 1fr; gap: 8px; }
  #view-alerts .al-log-det, #view-alerts .al-log-score { grid-column: 1 / -1; }
}