/* Ruhezeiten, Wartung, Benachrichtigungen im heutigen Monitoring (Redesign Phase 1).
 * Farben aus dem Designsystem (konzept-v8.html): Ruhezeit Blaugrau mit Mond,
 * Gelb = überfällig, Rot = unerwartet offline, Wartung gestrichelt.
 * Status nie nur über Farbe: immer Symbol/Punkt + Text. */

:root {
    --pr-ok: #3ddc97;
    --pr-warn: #f5c542;
    --pr-bad: #ff5f6d;
    --pr-rest: #6f93c4;
    --pr-rest-fg: #a9c3e6;
    --pr-maint: #9db1ff;
    --pr-signal: #2ecfff;
    --pr-ink-1: #0e121b;
    --pr-ink-2: #141926;
    --pr-ink-3: #1b2233;
    --pr-line: var(--mon-border, #262c3d);
    --pr-line-2: var(--mon-border-light, #38405a);
    --pr-fg: var(--mon-text, #e7ebf3);
    --pr-fg-2: #b4bccd;
    --pr-fg-3: var(--mon-text-muted, #8892a6);
}

.pr-i { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Zustands-Pille ------------------------------------------------------ */
.pstate {
    display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; line-height: 1.2;
    padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--pr-line-2);
    background: var(--pr-ink-2); color: var(--pr-fg-2); white-space: nowrap; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
}
.pstate .txt { overflow: hidden; text-overflow: ellipsis; }
.pstate .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--pr-ok); flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr-ok) 22%, transparent); }
.pstate .pdot.off { background: var(--pr-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr-bad) 22%, transparent); }
.pstate .pdot.pause { background: var(--pr-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr-warn) 22%, transparent); }
.pstate .pring { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--pr-fg-3); flex: none; }
.pstate.on { color: var(--pr-fg); }
.pstate.ruhe { color: var(--pr-rest-fg); border-color: color-mix(in srgb, var(--pr-rest) 45%, var(--pr-line)); background: color-mix(in srgb, var(--pr-rest) 10%, var(--pr-ink-2)); }
.pstate.kam { color: var(--pr-fg); border-color: color-mix(in srgb, var(--pr-rest) 35%, var(--pr-line)); }
.pstate.kam .pr-i { color: var(--pr-rest-fg); }
.pstate.ueber { color: var(--pr-warn); border-color: color-mix(in srgb, var(--pr-warn) 50%, var(--pr-line)); background: color-mix(in srgb, var(--pr-warn) 8%, var(--pr-ink-2)); }
.pstate.ueber.red { color: var(--pr-bad); border-color: color-mix(in srgb, var(--pr-bad) 55%, var(--pr-line)); }
.pstate.unerw { color: var(--pr-bad); border-color: color-mix(in srgb, var(--pr-bad) 55%, var(--pr-line)); background: color-mix(in srgb, var(--pr-bad) 9%, var(--pr-ink-2)); }
.pstate.unklar { color: var(--pr-fg-3); }
.pstate.wart { color: var(--pr-maint); border-color: color-mix(in srgb, var(--pr-maint) 50%, var(--pr-line)); border-style: dashed; background: color-mix(in srgb, var(--pr-maint) 8%, var(--pr-ink-2)); }

/* Tagesband ------------------------------------------------------------ */
.pband { position: relative; height: 24px; min-width: 160px; }
.pband .base { position: absolute; left: 0; right: 0; top: 9px; height: 12px; border-radius: 3px;
    background: repeating-linear-gradient(135deg, var(--pr-ink-3) 0 4px, var(--pr-ink-2) 4px 8px); }
.pband .exp { position: absolute; top: 2px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--pr-ok) 45%, var(--pr-ink-3)); }
.pband .act { position: absolute; top: 9px; height: 12px; }
.pband .act.on { background: color-mix(in srgb, var(--pr-ok) 72%, var(--pr-ink-3)); }
.pband .act.off { background: color-mix(in srgb, var(--pr-rest) 50%, var(--pr-ink-3)); }
.pband .act.bad { background: var(--pr-bad); }
.pband .nowm { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--pr-fg); }
.pband-ax { position: relative; height: 12px; min-width: 160px; }
.pband-ax span { position: absolute; transform: translateX(-50%); font: 0.62rem ui-monospace, Consolas, monospace; color: var(--pr-fg-3); }
.pprof { font-size: 0.74rem; color: var(--pr-fg-3); line-height: 1.4; white-space: normal; }
.pprof b { color: var(--pr-fg-2); font-weight: 500; }

/* Filter-Chips über der Standorttabelle ------------------------------- */
.pchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px 4px; }
.pchips .lbl { font: 600 0.66rem ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-fg-3); margin-right: 4px; }
.pchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--pr-line-2); background: var(--pr-ink-1); color: var(--pr-fg-2); font-size: 0.78rem; }
.pchip .n { font: 0.7rem ui-monospace, Consolas, monospace; color: var(--pr-fg-3); }
.pchip.on { border-color: color-mix(in srgb, var(--pr-signal) 70%, transparent); color: var(--pr-fg); background: color-mix(in srgb, var(--pr-signal) 12%, transparent); }
.pchip:focus-visible { outline: 2px solid var(--pr-signal); }
.pnote { font-size: 0.72rem; color: var(--pr-fg-3); padding: 0 14px 8px; }

/* Betriebsprofil im Standort-Panel ------------------------------------ */
.pprofile { display: flex; flex-direction: column; gap: 10px; }
.pheat { width: 100%; height: auto; display: block; }
.pheat text { font: 10px ui-monospace, Consolas, monospace; fill: var(--pr-fg-3); }
.plegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.72rem; color: var(--pr-fg-3); }
.plegend span { display: inline-flex; gap: 6px; align-items: center; }
.plegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pkv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; font-size: 0.8rem; }
.pkv dt { color: var(--pr-fg-3); }
.pkv dd { margin: 0; color: var(--pr-fg); text-align: right; }
.pbar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 9px; font-size: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--pr-ok) 45%, var(--pr-line)); background: color-mix(in srgb, var(--pr-ok) 8%, var(--pr-ink-1)); }
.pbar.warn { border-color: color-mix(in srgb, var(--pr-warn) 45%, var(--pr-line)); background: color-mix(in srgb, var(--pr-warn) 7%, var(--pr-ink-1)); }
.pbar.grey { border-color: var(--pr-line-2); background: var(--pr-ink-1); color: var(--pr-fg-2); }
.pbar.maint { border-color: color-mix(in srgb, var(--pr-maint) 50%, var(--pr-line)); border-style: dashed; background: color-mix(in srgb, var(--pr-maint) 7%, var(--pr-ink-1)); }
.pbar .pr-i { width: 14px; height: 14px; }
.pbar.ok .pr-i { color: var(--pr-ok); }
.prow-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pexc { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; }
.pexc div { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 7px; background: var(--pr-ink-1); border: 1px solid var(--pr-line); }
.pexc button { all: unset; cursor: pointer; color: var(--pr-fg-3); padding: 0 4px; }
.pexc button:hover { color: var(--pr-bad); }
.phint { font-size: 0.74rem; color: var(--pr-fg-3); }
.pdev { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.pdev > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 6px 8px; border-radius: 7px; background: var(--pr-ink-1); border: 1px solid var(--pr-line); }
.pdev .sub { color: var(--pr-fg-3); font-size: 0.72rem; }
.pdev .live { color: var(--pr-ok); font-size: 0.72rem; white-space: nowrap; }
.pdev .revoked { opacity: .5; text-decoration: line-through; }
.pnote-last { font-size: 0.8rem; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--pr-ink-1); border: 1px solid var(--pr-line); }
.pnote-last .facts { color: var(--pr-fg-3); font-size: 0.72rem; }
.ptag { display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--pr-ink-3); color: var(--pr-fg-2); font-size: 0.7rem; margin-right: 4px; }

/* Dialog (Anpassen, Ausnahme, Wartung bis, Notiz) ---------------------- */
.pform { display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem; }
.pform label { display: flex; flex-direction: column; gap: 4px; color: var(--pr-fg-2); }
.pform input, .pform select, .pform textarea {
    background: var(--mon-bg-deep, #05060a); color: var(--pr-fg); border: 1px solid var(--pr-line-2);
    border-radius: 8px; padding: 7px 9px; font: inherit; }
.pform textarea { min-height: 80px; resize: vertical; }
.pform .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pform .row > label { flex: 1 1 140px; }
.pform .grp { border: 1px solid var(--pr-line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pform .grp h4 { font-size: 0.8rem; color: var(--pr-fg); font-weight: 600; }
.pform .ivl { display: flex; gap: 8px; align-items: center; }
.pform .ivl input { width: 110px; }
.pform .cats { display: flex; gap: 6px; flex-wrap: wrap; }
.pform .cats label { flex-direction: row; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--pr-line-2); border-radius: 999px; cursor: pointer; }
.pform .cats input { accent-color: var(--pr-signal); }
.pform .facts { font-size: 0.78rem; color: var(--pr-fg-3); line-height: 1.5; }
.pform .err { color: var(--pr-bad); font-size: 0.8rem; min-height: 1em; }

/* Glocke ---------------------------------------------------------------- */
.vas-bell { position: relative; }
.vas-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 10px; border: 1px solid var(--pr-line); background: transparent; color: var(--pr-fg-2); cursor: pointer; }
.vas-bell-btn:hover, .vas-bell-btn[aria-expanded="true"] { color: var(--pr-fg); border-color: var(--pr-line-2); }
.vas-bell-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vas-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--pr-bad); color: #fff; font: 600 0.68rem/18px ui-monospace, Consolas, monospace; text-align: center; }
.vas-bell-badge.yellow { background: var(--pr-warn); color: #231a00; }
.vas-bell-badge.grey { background: var(--pr-ink-3); color: var(--pr-fg-2); border: 1px solid var(--pr-line-2); }
.vas-bell-panel { position: absolute; right: 0; top: 46px; width: min(460px, calc(100vw - 24px)); max-height: min(70vh, 640px); overflow: auto;
    background: #0f131d; border: 1px solid var(--pr-line-2); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); z-index: 1200; padding: 4px 14px 10px; }
.vas-bell-panel[hidden] { display: none; }
.vas-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; position: sticky; top: 0; background: #0f131d; }
.vas-bell-head h3 { font-size: 0.95rem; display: flex; gap: 8px; align-items: center; color: var(--pr-fg); }
.vas-bell-head .cnt { font: 600 0.72rem ui-monospace, Consolas, monospace; color: var(--pr-bad); }
.vas-bell-head .cnt.none { color: var(--pr-fg-3); }
.vas-bell-sub { font: 600 0.62rem ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-fg-3); padding: 10px 0 2px; }
.vas-nt { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--pr-line); font-size: 0.82rem; }
.vas-nt .sv { align-self: stretch; border-radius: 2px; background: var(--pr-fg-3); }
.vas-nt.red .sv { background: var(--pr-bad); }
.vas-nt.yellow .sv { background: var(--pr-warn); }
.vas-nt.grey .sv { background: var(--pr-maint); }
.vas-nt .tx b { font-weight: 600; color: var(--pr-fg); }
.vas-nt .tx .d { color: var(--pr-fg-3); font-size: 0.76rem; margin-top: 2px; }
.vas-nt .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vas-nt .acts button, .vas-nt .mute button, .vas-bell-head button, .vas-bell-foot button {
    all: unset; cursor: pointer; font-size: 0.74rem; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--pr-line-2); color: var(--pr-fg-2); }
.vas-nt .acts button:hover, .vas-nt .mute button:hover, .vas-bell-head button:hover, .vas-bell-foot button:hover { color: var(--pr-fg); border-color: var(--pr-signal); }
.vas-nt .acts button:focus-visible, .vas-bell-btn:focus-visible { outline: 2px solid var(--pr-signal); }
.vas-nt.done { opacity: .55; }
.vas-nt.acked .tx b::after { content: " · quittiert"; color: var(--pr-fg-3); font-weight: 400; }
.vas-nt .mute { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.vas-nt .mute[hidden] { display: none; }
.vas-nt .mute input { background: #05060a; color: var(--pr-fg); border: 1px solid var(--pr-line-2); border-radius: 6px; padding: 3px 6px; font-size: 0.74rem; }
.vas-bell-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--pr-line); font-size: 0.72rem; color: var(--pr-fg-3); }
.vas-bell-foot > span { display: inline-flex; gap: 6px; }
.vas-bell-empty { padding: 14px 0; color: var(--pr-fg-3); font-size: 0.82rem; }

@media (max-width: 720px) {
    .pband, .pband-ax { min-width: 120px; }
    .vas-bell-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* Standorttabelle: Profilspalte nicht zu schmal werden lassen */
.mon-table td .pprof { min-width: 230px; }
.mon-table td .pband { min-width: 180px; }

/* Config-Sicherheitsnetz (Phase 2): Vorschau, Verlauf, Zustände ------------ */
.mon-config-review { display: flex; flex-direction: column; gap: 12px; }
.mon-config-review.hidden { display: none; }
.cfg-review-title { font-size: 0.95rem; color: var(--pr-fg); }
.cfg-diff { display: flex; flex-direction: column; border: 1px solid var(--pr-line); border-radius: 10px; overflow: hidden; }
.cfg-diff-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 7px 10px; font-size: 0.8rem; border-top: 1px solid var(--pr-line); }
.cfg-diff-row:first-child { border-top: 0; }
.cfg-diff-row code { color: var(--pr-fg-2); word-break: break-all; font-size: 0.76rem; }
.cfg-diff-row span { word-break: break-word; }
.cfg-diff del { color: var(--pr-bad); text-decoration: line-through; opacity: .85; }
.cfg-diff ins { color: var(--pr-ok); text-decoration: none; }
.cfg-diff-secret { color: var(--pr-warn); font-style: italic; }
.cfg-hb { display: inline-flex; align-items: center; gap: 6px; font: 600 0.7rem ui-monospace, Consolas, monospace; padding: 1px 8px;
    border-radius: 999px; border: 1px solid var(--pr-line-2); color: var(--pr-fg-2); margin-left: 6px; }
.cfg-hb.ok { color: var(--pr-ok); border-color: color-mix(in srgb, var(--pr-ok) 45%, var(--pr-line)); }
.cfg-hb.probe { color: var(--pr-signal); border-color: color-mix(in srgb, var(--pr-signal) 50%, var(--pr-line)); }
.cfg-hb.wait { color: var(--pr-warn); border-color: color-mix(in srgb, var(--pr-warn) 45%, var(--pr-line)); }
.cfg-hb.rb { color: var(--pr-bad); border-color: color-mix(in srgb, var(--pr-bad) 50%, var(--pr-line)); }
.cfg-versions { display: flex; flex-direction: column; gap: 8px; }
.cfg-version { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px;
    border: 1px solid var(--pr-line); border-radius: 10px; background: var(--pr-ink-1); font-size: 0.82rem; }
.cfg-version.active { border-color: color-mix(in srgb, var(--pr-signal) 45%, var(--pr-line)); }
.cfg-version details { margin-top: 6px; }
.cfg-version summary { cursor: pointer; color: var(--pr-fg-2); font-size: 0.78rem; }
.mon-modal-actions .mon-btn.hidden { display: none; }