/* site1.erralert.com — minimal app stylesheet
 *
 * Theme variables: dark is the default; [data-theme="light"] overrides.
 * All colour references go through the var(--*) layer so flipping themes
 * doesn't touch any selectors.
 */

:root {
  /* ---- DARK (default) ---- */
  --bg:           #0f172a;
  --bg-elevated:  #1e293b;
  --bg-card:      #1e293b;
  --bg-input:     #1e293b;
  --fg:           #e2e8f0;
  --fg-strong:    #f1f5f9;
  --muted:        #94a3b8;
  --brand:        #3b82f6;
  --brand-hover:  #60a5fa;
  --brand-fg:     #ffffff;
  --border:       #334155;
  --row-hover:    #1e293b;
  --code-bg:      #1e293b;
  --code-fg:      #e2e8f0;
  --shadow:       rgba(0,0,0,0.35);

  /* Status colours — adjusted for legibility on dark bg */
  --st-ok-bg:    #064e3b;  --st-ok-fg:    #6ee7b7;
  --st-warn-bg:  #78350f;  --st-warn-fg:  #fde68a;
  --st-crit-bg:  #7f1d1d;  --st-crit-fg:  #fecaca;
  --st-error-bg: #7f1d1d;  --st-error-fg: #fecaca;
  --st-info-bg:  #1e3a8a;  --st-info-fg:  #bfdbfe;
  --st-none-bg:  #334155;  --st-none-fg:  #94a3b8;

  --banner-ok-bg:    #064e3b;  --banner-ok-fg:    #a7f3d0;
  --banner-warn-bg:  #78350f;  --banner-warn-fg:  #fde68a;
  --banner-err-bg:   #7f1d1d;  --banner-err-fg:   #fecaca;

  --mute-global-bg:  #7f1d1d;  --mute-global-fg:  #fecaca;
  --mute-personal-bg: #312e81; --mute-personal-fg: #c4b5fd;

  --sub-on-bg:  #064e3b;  --sub-on-fg:  #a7f3d0;  --sub-on-border:  #047857;
  --sub-off-bg: #78350f;  --sub-off-fg: #fde68a;  --sub-off-border: #b45309;

  --delivery-sent-bg:            #064e3b;  --delivery-sent-fg:            #6ee7b7;
  --delivery-failed-bg:          #7f1d1d;  --delivery-failed-fg:          #fecaca;
  --delivery-queued-bg:          #1e3a8a;  --delivery-queued-fg:          #93c5fd;
  --delivery-suppressed-bg:      #334155;  --delivery-suppressed-fg:      #94a3b8;
  --delivery-muted-bg:           #312e81;  --delivery-muted-fg:           #c4b5fd;
  --delivery-blocked-bg:         #78350f;  --delivery-blocked-fg:         #fde68a;

  --terminal-bg: #020617;
}

:root[data-theme="light"] {
  --bg:           #ffffff;
  --bg-elevated:  #fafbfc;
  --bg-card:      #f9fafb;
  --bg-input:     #ffffff;
  --fg:           #1f2937;
  --fg-strong:    #111827;
  --muted:        #6b7280;
  --brand:        #2563eb;
  --brand-hover:  #1d4ed8;
  --brand-fg:     #ffffff;
  --border:       #e5e7eb;
  --row-hover:    #f9fafb;
  --code-bg:      #f3f4f6;
  --code-fg:      #1f2937;
  --shadow:       rgba(0,0,0,0.1);

  --st-ok-bg:    #d1fae5;  --st-ok-fg:    #065f46;
  --st-warn-bg:  #fef3c7;  --st-warn-fg:  #92400e;
  --st-crit-bg:  #fee2e2;  --st-crit-fg:  #991b1b;
  --st-error-bg: #fee2e2;  --st-error-fg: #991b1b;
  --st-info-bg:  #dbeafe;  --st-info-fg:  #1e40af;
  --st-none-bg:  #f3f4f6;  --st-none-fg:  #6b7280;

  --banner-ok-bg:    #d1fae5;  --banner-ok-fg:    #065f46;
  --banner-warn-bg:  #fef3c7;  --banner-warn-fg:  #92400e;
  --banner-err-bg:   #fee2e2;  --banner-err-fg:   #991b1b;

  --mute-global-bg:  #fee2e2;  --mute-global-fg:  #991b1b;
  --mute-personal-bg: #e0e7ff; --mute-personal-fg: #3730a3;

  --sub-on-bg:  #ecfdf5;  --sub-on-fg:  #065f46;  --sub-on-border:  #d1fae5;
  --sub-off-bg: #fef3c7;  --sub-off-fg: #92400e;  --sub-off-border: #fde68a;

  --delivery-sent-bg:            #d1fae5;  --delivery-sent-fg:            #065f46;
  --delivery-failed-bg:          #fee2e2;  --delivery-failed-fg:          #991b1b;
  --delivery-queued-bg:          #dbeafe;  --delivery-queued-fg:          #1e40af;
  --delivery-suppressed-bg:      #f3f4f6;  --delivery-suppressed-fg:      #4b5563;
  --delivery-muted-bg:           #ede9fe;  --delivery-muted-fg:           #5b21b6;
  --delivery-blocked-bg:         #fef3c7;  --delivery-blocked-fg:         #92400e;

  --terminal-bg: #1f2937;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--brand); }

.topbar {
  display: flex; align-items: center; gap: 1.5em;
  padding: 0.6em 1.25em;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.topbar-anon .anon-spacer { flex: 1; }
.brand { font-weight: 600; color: var(--fg-strong); display: inline-flex; align-items: center; gap: 0.5em; }
.brand-logo { height: 1.8em; width: auto; display: block; }
.topbar nav { display: flex; gap: 1em; flex: 1; align-items: center; }
/* Left nav grows to fill, pushing the menu/Admin/theme/logout cluster right. */
.nav-left { flex: 1; }
.nav-right { display: flex; align-items: center; gap: 1em; margin-left: auto; }

/* Hover/focus dropdown in the top bar (Probes/Channels/Alerts/Settings). */
.menu { position: relative; display: inline-flex; align-items: center; }
.menu-trigger {
  background: transparent; border: 0; color: var(--fg); cursor: pointer;
  font: inherit; font-size: 1.15em; line-height: 1; padding: 0.1em 0.35em;
}
.menu-trigger:hover { color: var(--fg-strong); }
.menu-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 0.25em;
  display: none; min-width: 11em;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.3em 0; z-index: 50;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Open on hover (mouse) or when a child/trigger has focus (keyboard). */
.menu:hover .menu-dropdown,
.menu:focus-within .menu-dropdown { display: block; }
.menu-dropdown a { display: block; padding: 0.45em 1.1em; white-space: nowrap; color: var(--fg); }
.menu-dropdown a:hover { background: var(--row-hover); text-decoration: none; }

/* Groups tree: collapsible nodes + inline objects */
.group-tree details > summary { cursor: pointer; }
.group-tree details > summary > a { margin-left: 0.2em; }
.group-objects { list-style: none; margin: 0.2em 0 0.4em; padding-left: 1.4em; }
.group-objects li { margin: 0.15em 0; display: flex; align-items: center; gap: 0.5em; }

/* Per-check runbook disclosure on the probe page */
.runbook-details > summary { cursor: pointer; color: var(--brand); font-size: 0.85em; }
.runbook-details .prewrap { margin-top: 0.3em; font-size: 0.85em; }

/* Maintenance window banner + small inline badge */
.banner-maint {
  margin: 0.75em 0; padding: 0.6em 0.9em; border-radius: 5px;
  background: var(--st-info-bg); color: var(--st-info-fg);
  border: 1px solid var(--border);
}
.badge-maint { background: var(--st-info-bg); color: var(--st-info-fg); padding: 0.05em 0.45em; border-radius: 3px; font-size: 0.85em; white-space: nowrap; }

/* Host-metrics dashboard */
.host-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75em; margin: 1em 0; }
.host-card { padding: 0.7em 0.9em; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.host-card-label { font-size: 0.78em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.host-card-val { font-size: 1.15em; font-weight: 600; margin-top: 0.15em; }
.meter { height: 6px; border-radius: 3px; background: var(--bg-elevated); border: 1px solid var(--border); overflow: hidden; margin-top: 0.35em; }
.meter-fill { height: 100%; }
.meter-ok   { background: var(--st-ok-fg); }
.meter-warn { background: var(--st-warn-fg); }
.meter-crit { background: var(--st-crit-fg); }
.mw-add > summary { cursor: pointer; color: var(--brand); margin-top: 0.5em; }
.mw-days { display: flex; flex-wrap: wrap; gap: 0.5em; }
.mw-day { display: inline-flex; align-items: center; gap: 0.25em; }

/* Round "?" help badge in the top bar */
.help-link, a.help-link:visited {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  border: 1px solid var(--border); color: var(--fg);
  font-weight: 600; text-decoration: none; line-height: 1;
}
.help-link:hover { background: var(--row-hover); color: var(--fg-strong); text-decoration: none; }

/* Help / documentation page */
.help-page h2 { margin-top: 1.8em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.help-page h3 { margin-top: 1.2em; }
.help-page table { margin: 1em 0; }
.help-page .lede { font-size: 1.05em; }
.help-flow {
  display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center;
  margin: 1em 0; font-weight: 600;
}
.help-flow span { padding: 0.3em 0.7em; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elevated); }
.help-flow .arrow { border: 0; background: none; color: var(--muted); font-weight: 400; padding: 0; }
.logout-form, .theme-form { display: inline; margin: 0; }
.logout-form .link {
  background: none; border: 0; color: var(--brand);
  cursor: pointer; font: inherit; padding: 0;
}
.logout-form .link:hover { text-decoration: underline; }

.theme-toggle {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg); cursor: pointer;
  padding: 0.25em 0.55em; border-radius: 4px;
  font-size: 1.1em; line-height: 1;
}
.theme-toggle:hover { background: var(--row-hover); }

main { max-width: 1400px; margin: 1.5em auto; padding: 0 1.25em; }
main.wide { max-width: 1700px; }

h1, h2, h3 { color: var(--fg-strong); }
h1 { margin-top: 0; }

.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  margin-bottom: 1em;
}

.muted { color: var(--muted); }
.codey {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.9em; background: var(--code-bg); color: var(--code-fg);
  padding: 0.1em 0.35em; border-radius: 3px;
}

.btn,
a.btn:visited {
  display: inline-block; padding: 0.5em 1em; border-radius: 5px;
  background: var(--brand); color: var(--brand-fg); border: 0; cursor: pointer;
  font: inherit;
}
.btn:hover, a.btn:visited:hover { background: var(--brand-hover); color: var(--brand-fg); text-decoration: none; }
.btn.secondary,
a.btn.secondary:visited {
  background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--border);
}
.btn.secondary:hover, a.btn.secondary:visited:hover { background: var(--row-hover); color: var(--fg); }

form { margin: 0; }
form.narrow { max-width: 520px; }
/* Wider check form so the JSON-path picker + textareas have room, while plain
   single-line inputs stay a sensible width. */
form.form-check { max-width: 920px; }
form.form-check .field input[type=text], form.form-check .field input[type=number],
form.form-check .field select { max-width: 34em; }

.field { display: flex; flex-direction: column; gap: 0.25em; margin-bottom: 1em; }
.field .label { font-size: 0.85em; color: var(--muted); }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=tel], .field input[type=time],
.field input[type=url], .field input[type=search],
.field select, .field textarea {
  padding: 0.55em; font-size: 1em; border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit;
  background: var(--bg-input); color: var(--fg);
}
.field input[disabled] { opacity: 0.6; }
.field .help { font-size: 0.8em; color: var(--muted); margin-top: 0.1em; }
.field.checkbox { flex-direction: row; align-items: center; gap: 0.5em; }
.field.checkbox label { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55em 0.6em; border-bottom: 1px solid var(--border); }
th { font-size: 0.85em; color: var(--muted); font-weight: 500; }
tr:hover td { background: var(--row-hover); }

.status {
  display: inline-block; padding: 0.1em 0.5em; border-radius: 3px;
  font-size: 0.85em; font-weight: 600;
}
.status-ok    { background: var(--st-ok-bg);    color: var(--st-ok-fg);    }
.status-warn  { background: var(--st-warn-bg);  color: var(--st-warn-fg);  }
.status-crit  { background: var(--st-crit-bg);  color: var(--st-crit-fg);  }
.status-error { background: var(--st-error-bg); color: var(--st-error-fg); }
.status-info  { background: var(--st-info-bg);  color: var(--st-info-fg);  }
.status-none  { background: var(--st-none-bg);  color: var(--st-none-fg);  }

/* Per-object rollup pill — same colour palette as .status, but inline-
   blocked with extra breathing room since it carries the (X/Y/Z)
   breakdown on the same line. */
.status-rollup {
  display: inline-block; padding: 0.15em 0.6em; border-radius: 4px;
  font-size: 0.9em; font-weight: 600;
}
.status-rollup-ok      { background: var(--st-ok-bg);    color: var(--st-ok-fg);    }
.status-rollup-warn    { background: var(--st-warn-bg);  color: var(--st-warn-fg);  }
.status-rollup-crit    { background: var(--st-crit-bg);  color: var(--st-crit-fg);  }
.status-rollup-unknown { background: var(--st-none-bg);  color: var(--st-none-fg);  }
.status-rollup .muted-badge { margin-left: 0.4em; opacity: 0.85; }
.object-rollup { margin: 0.5em 0 1em; }

.errors {
  background: var(--banner-err-bg); color: var(--banner-err-fg);
  padding: 0.75em 1em; border-radius: 4px; margin: 1em 0;
}
.errors ul { margin: 0; padding-left: 1.25em; }
.ok-banner {
  background: var(--banner-ok-bg); color: var(--banner-ok-fg);
  padding: 0.75em 1em; border-radius: 4px; margin: 1em 0;
}

.module-list { list-style: none; padding: 0; margin: 1em 0; }
.module-list li {
  padding: 0.6em 0.8em; border: 1px solid var(--border); border-radius: 4px;
  margin-bottom: 0.5em;
  background: var(--bg-elevated);
}
.module-desc { margin-top: 0.35em; font-size: 0.9em; line-height: 1.4; }

/* JSON-path picker chips (capture.value) */
.path-picker { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; margin-top: 0.5em; max-height: 16em; overflow: auto; }
.path-picker-hint { font-size: 0.8em; width: 100%; }
.path-chip {
  display: inline-flex; gap: 0.5em; align-items: baseline; max-width: 26em;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--fg);
  border-radius: 5px; padding: 0.3em 0.6em; cursor: pointer; font: inherit; text-align: left;
}
.path-chip:hover { background: var(--row-hover); }
.path-chip.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.path-chip-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; font-size: 0.85em; }
.path-chip-val { color: var(--muted); font-size: 0.85em; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Generic small-text utility (font only — distinct from .btn.small sizing). */
.small { font-size: 0.85em; }

.auth-card { max-width: 380px; margin: 4em auto 1em; padding: 0 1em; }

/* Help block under the login form — wider than the card so prose breathes. */
.auth-help {
  max-width: 640px; margin: 0 auto 4em; padding: 0 1em;
  font-size: 0.95em; line-height: 1.55;
}
.auth-help h2 { font-size: 1.15em; margin: 1.5em 0 0.4em; color: var(--fg-strong); }
.auth-help h3 { font-size: 1em;    margin: 1.4em 0 0.3em; color: var(--fg-strong); }
.auth-help ul { padding-left: 1.2em; margin: 0.5em 0; }
.auth-help li { margin: 0.35em 0; }
.auth-help-beta {
  background: var(--banner-warn-bg); color: var(--banner-warn-fg);
  border-radius: 6px; padding: 0.7em 1em; margin-bottom: 1em;
  font-weight: 500;
}
/* Honeypot — visually hidden, kept in DOM so bots see it. */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* Inline actions */
.actions { display: flex; gap: 0.5em; align-items: center; }
form.inline { display: inline; margin: 0; }
.btn.small { padding: 0.3em 0.6em; font-size: 0.85em; }
.row-actions { display: flex; gap: 0.3em; align-items: center; flex-wrap: wrap; }

/* Field rows and checkbox lists */
.field-row { display: flex; gap: 1em; }
.field-row .field { flex: 1; }
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5em 1em; padding: 0.25em 0; }
.checkline { display: flex; align-items: center; gap: 0.3em; cursor: pointer; }
.checkline input { margin: 0; }

/* Subscribe / unsubscribe banner */
.sub-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 0.7em 1em; border-radius: 5px; margin: 1em 0;
  border: 1px solid;
}
.sub-banner.sub-on  { background: var(--sub-on-bg);  color: var(--sub-on-fg);  border-color: var(--sub-on-border);  }
.sub-banner.sub-off { background: var(--sub-off-bg); color: var(--sub-off-fg); border-color: var(--sub-off-border); }

/* Mute badges */
.mute-badge {
  display: inline-block; padding: 0.2em 0.55em; border-radius: 3px;
  font-size: 0.8em; line-height: 1.35;
}
.mute-badge.global   { background: var(--mute-global-bg);   color: var(--mute-global-fg);   }
.mute-badge.personal { background: var(--mute-personal-bg); color: var(--mute-personal-fg); margin-top: 0.3em; }

/* Inline <details>/<summary> mute forms */
.inline-details { display: inline-block; }
.inline-details summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-block;
}
.inline-details summary::-webkit-details-marker { display: none; }
.inline-details[open] summary { background: var(--brand); color: var(--brand-fg); }
.mute-form {
  display: flex; gap: 0.3em; align-items: center; margin-top: 0.3em;
  padding: 0.4em; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px;
}
.mute-form input[type=text] { padding: 0.3em 0.5em; font-size: 0.85em; flex: 1; min-width: 8em; }

/* Alerts summary header */
.alert-summary {
  display: flex; align-items: center; gap: 1em; flex-wrap: wrap;
  margin: 1em 0;
  font-size: 0.9em;
}
.alert-summary .status { font-weight: 500; }

/* Delivery status pills */
.delivery-sent              { background: var(--delivery-sent-bg);       color: var(--delivery-sent-fg);       }
.delivery-failed            { background: var(--delivery-failed-bg);     color: var(--delivery-failed-fg);     }
.delivery-queued            { background: var(--delivery-queued-bg);     color: var(--delivery-queued-fg);     }
.delivery-suppressed_quiet  { background: var(--delivery-suppressed-bg); color: var(--delivery-suppressed-fg); }
.delivery-suppressed_flapping { background: var(--delivery-suppressed-bg); color: var(--delivery-suppressed-fg); }
.delivery-muted_personal    { background: var(--delivery-muted-bg);      color: var(--delivery-muted-fg);      }
.delivery-muted_optout      { background: var(--delivery-muted-bg);      color: var(--delivery-muted-fg);      }
.delivery-channel_unverified{ background: var(--delivery-blocked-bg);    color: var(--delivery-blocked-fg);    }
.delivery-blocked_no_credit { background: var(--delivery-blocked-bg);    color: var(--delivery-blocked-fg);    }

td.notes { max-width: 32em; word-break: break-word; font-size: 0.85em; }

/* Capture endpoint section */
.capture-config {
  display: grid; gap: 0.5em; margin: 1em 0;
  padding: 0.75em; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 5px;
}
.capture-row { display: grid; grid-template-columns: 180px 1fr; gap: 0.75em; align-items: baseline; }
.capture-label { font-size: 0.85em; color: var(--muted); }
.capture-url {
  font-size: 0.85em; word-break: break-all;
  background: var(--bg); padding: 0.3em 0.5em; border-radius: 3px; border: 1px solid var(--border);
}
/* URL + Copy-button row. The <code> grows to fill so every field's right
   edge lines up at the copy button, regardless of badge or URL length. */
.copy-field { display: flex; align-items: center; gap: 0.4em; }
.copy-field .capture-url { flex: 1 1 auto; min-width: 0; }
.copy-field .copy-btn { flex: 0 0 auto; white-space: nowrap; }
.severity-urls { display: grid; gap: 0.3em; }
.severity-urls .sev-badge { flex: 0 0 auto; min-width: 3.4em; text-align: center; }
.capture-actions { display: flex; gap: 0.5em; flex-wrap: wrap; margin: 1em 0; }
.capture-howto { margin: 1em 0; }
.capture-howto summary { cursor: pointer; padding: 0.4em 0; color: var(--brand); }
.capture-howto pre,
details pre {
  background: var(--terminal-bg); color: #e5e7eb;
  padding: 1em; border-radius: 5px; overflow-x: auto; font-size: 0.82em; line-height: 1.4;
}
.body-excerpt { max-width: 24em; word-break: break-all; }

/* History chart + range tabs */
.range-tabs { display: flex; gap: 0.4em; margin: 1em 0; }
.range-tab,
a.range-tab:visited {
  padding: 0.4em 0.9em; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--fg); text-decoration: none; font-size: 0.9em;
}
.range-tab:hover { text-decoration: none; background: var(--row-hover); }
.range-tab.active,
a.range-tab.active:visited { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.chart-wrap {
  border: 1px solid var(--border); border-radius: 5px;
  padding: 0.5em; background: var(--bg-card); margin: 1em 0;
}
.stat-chart { width: 100%; height: auto; display: block; }
table.dense th, table.dense td { padding: 0.35em 0.55em; font-size: 0.9em; }

/* Plan summary card on settings */
.plan-card {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 1em 1.25em; background: var(--bg-card); margin: 1em 0 1.5em;
}
.plan-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1em; margin-top: 0.75em;
}
.stat-big { font-size: 1.6em; font-weight: 600; line-height: 1.2; color: var(--fg-strong); }

/* Admin */
.admin-link,
a.admin-link:visited {
  background: var(--banner-warn-bg); color: var(--banner-warn-fg);
  padding: 0.1em 0.5em; border-radius: 3px;
}
.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75em; margin: 1em 0;
}
.admin-tile-alert { border-color: var(--st-crit-fg); background: var(--st-crit-bg); }

/* Activity filter bar */
.activity-filters { display: flex; flex-wrap: wrap; gap: 0.75em; align-items: flex-end; margin: 1em 0; }
.activity-filters .field { margin: 0; }
.activity-filters .field input, .activity-filters .field select { min-width: 9em; }
.activity-filter-actions { display: flex; gap: 0.5em; align-items: flex-end; }
.admin-tile {
  padding: 1em; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); text-decoration: none; color: var(--fg);
  display: flex; flex-direction: column; align-items: center; gap: 0.5em;
}
.admin-tile:hover { background: var(--row-hover); text-decoration: none; }
.admin-tile-num { font-size: 2em; font-weight: 600; color: var(--brand); }
form.search { display: flex; gap: 0.5em; margin: 1em 0; max-width: 480px; }
form.search input {
  flex: 1; padding: 0.55em; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; background: var(--bg-input); color: var(--fg);
}

/* Error page */
.error-page { max-width: 480px; margin: 4em auto; }

/* Scripts catalog */
.scripts-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1em; margin-top: 1.5em;
}
.scripts-cat-card {
  display: block; padding: 1em 1.25em;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); text-decoration: none; color: inherit;
}
.scripts-cat-card:hover { background: var(--row-hover); text-decoration: none; }
.scripts-cat-card h2 { margin: 0 0 0.4em; font-size: 1.1em; color: var(--fg-strong); }
.scripts-cat-card p  { margin: 0.4em 0; font-size: 0.9em; }
.scripts-cat-count   { font-size: 0.85em; color: var(--muted); margin-top: 0.8em; }
.scripts-list { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1em; }
.scripts-list-card {
  display: block; padding: 0.8em 1em;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); text-decoration: none; color: inherit;
}
.scripts-list-card:hover { background: var(--row-hover); text-decoration: none; }
.scripts-list-head { display: flex; align-items: baseline; gap: 0.6em; }
.scripts-list-head h2 { margin: 0; font-size: 1em; color: var(--fg-strong); }
.scripts-lang {
  display: inline-block; font-size: 0.7em; font-weight: 600;
  padding: 0.15em 0.5em; border-radius: 3px;
  background: var(--bg-elevated); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.scripts-lang-powershell { background: #0078d7; color: #fff; }
.scripts-lang-bash       { background: #4caf50; color: #fff; }
.scripts-lang-batch      { background: #6c6c6c; color: #fff; }
.scripts-lang-xml        { background: #d97706; color: #fff; }

/* Per-status run breakdown: stacked ok/warn/crit badges inside a cell */
.runs-breakdown { white-space: nowrap; vertical-align: middle; }
/* General-purpose: force a cell or span onto a single line. CSP blocks
   inline style="white-space:nowrap" so we expose this as a class. */
.nowrap { white-space: nowrap; }
/* Preserve user-entered linebreaks (notes, multi-line metadata) — CSP
   blocks inline white-space styling, same reason as .nowrap above. */
.prewrap { white-space: pre-wrap; }
/* Compact metadata summary for an object's detail page — definition
   list with right-aligned terms. */
.object-summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; margin: 0.5em 0 1em; }
.object-summary dt { color: var(--muted); font-weight: 500; }
.object-summary dd { margin: 0; }

/* Loud "alerts are disabled" banner for the probe detail page while
   any of the probe's checks are in their post-creation warmup window.
   Red background + light text so it's unmissable; matches the .status-crit
   palette via the same CSS vars. */
.banner-warmup {
  background: var(--st-crit-bg);
  color: var(--st-crit-fg);
  padding: 0.9em 1.1em;
  border-radius: 6px;
  margin: 0.5em 0 1.25em;
  line-height: 1.45;
}
.banner-warmup code {
  background: rgba(255,255,255,0.18);
  padding: 0 0.3em;
  border-radius: 3px;
}

/* Softer "checks haven't run yet" banner — informational, not alarm.
   Uses the warn palette so it stands out without screaming. */
.banner-pending {
  background: var(--st-warn-bg);
  color: var(--st-warn-fg);
  padding: 0.7em 1em;
  border-radius: 6px;
  margin: 0.5em 0 1.25em;
  line-height: 1.45;
}

/* Inline probes row on the /objects list (Show probes toggle) — visually
   nested under its parent object row via:
   - a tinted background (--bg-elevated; clearly different in dark mode,
     subtle but present in light mode)
   - a thick brand-coloured left accent stripe so the nesting reads even
     when the bg-tint is subtle
   - inset padding so the inner table feels like a child block, not a
     sibling row. We pin the :hover background to the same tint so a
     mouseover doesn't make the row blend back into the parent's. */
tr.probes-inline > td {
  background: var(--bg-elevated);
  border-left: 4px solid var(--brand);
  padding: 0.7em 1em 0.9em 1.5em;
}
tr.probes-inline:hover > td { background: var(--bg-elevated); }
tr.probes-inline table.dense {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 0.25em !important;
}
tr.probes-inline table.dense th,
tr.probes-inline table.dense td { background: transparent; }
tr.probes-inline table.dense tr:hover td { background: var(--row-hover); }
.runs-breakdown > div { line-height: 1.15; margin: 0.1em 0; }
.runs-breakdown .status {
  display: inline-block; min-width: 2.5em; text-align: right;
  padding: 0.05em 0.45em; font-variant-numeric: tabular-nums;
}

/* Object list with inline checks */
.object-list { display: flex; flex-direction: column; gap: 1.25em; }
.object-card {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); padding: 0.75em 1em;
}
.object-card-head { display: flex; align-items: baseline; gap: 0.75em; flex-wrap: wrap; margin-bottom: 0.4em; }
.object-card-head h2 { margin: 0; font-size: 1.15em; }
.object-checks-table { width: 100%; margin: 0.25em 0 0; }

/* Check-runs stat tiles */
.run-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75em; margin: 1em 0 1.5em;
}
.run-stat {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); padding: 0.75em 1em;
}
.run-stat-num { font-size: 1.4em; font-weight: 600; color: var(--fg-strong); line-height: 1.2; }
.run-stat-when { font-size: 0.95em; }
.run-stat-label { font-size: 0.85em; color: var(--muted); margin-top: 0.2em; }

/* Check-runs drilldown */
.runs-table .run-detail-row td { background: var(--bg-elevated); padding: 0; }
.runs-table details { padding: 0.5em 0.75em; }
.runs-table details summary { cursor: pointer; color: var(--muted); font-size: 0.85em; }
.run-detail {
  background: var(--bg-input); color: var(--fg);
  padding: 0.75em; border-radius: 4px;
  font-size: 0.8em; line-height: 1.4;
  max-height: 24em; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.status-row-crit  { background: color-mix(in srgb, var(--banner-crit-bg, transparent) 30%, transparent); }
.status-row-warn  { background: color-mix(in srgb, var(--banner-warn-bg, transparent) 25%, transparent); }
.status-row-error { background: color-mix(in srgb, var(--banner-crit-bg, transparent) 20%, transparent); }

/* Site footer (Terms / Help links) */
.site-footer { text-align:center; padding:1.6em 1em 2em; margin-top:2em; font-size:.85em; color:#888; border-top:1px solid rgba(127,127,127,.15); }
.site-footer a { color:inherit; }
.site-footer a:hover { text-decoration:underline; }