/* ── Assets admin ────────────────────────────────────────── */
.source-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: #e2e8f0;
  color: #475569;
}

.source-tag.manual {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: var(--text-muted);
}

.asset-edit-row > td {
  background: var(--bg);
  padding: 14px;
}

.asset-edit-row .inline-form {
  flex-wrap: wrap;
  align-items: center;
}

/* Collapsible panel: summary doubles as the navy header, with a +/– affordance. */
details.panel > summary {
  list-style: none;
  cursor: pointer;
}

details.panel > summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

details.panel > summary::-webkit-details-marker {
  display: none;
}

details.panel > summary.panel-header h2::before {
  content: "＋  ";
  font-weight: 700;
}

details.panel[open] > summary.panel-header h2::before {
  content: "–  ";
}

/* ── Monitors grouped by asset (navy-header panel, collapsible) ───────────── */
.asset-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  scroll-margin-top: 20px;
}

.asset-group > summary.asset-group-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--panel-header);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  /* No overflow clip (it breaks sticky), so round the header's own top corners. */
  border-radius: 12px 12px 0 0;
  /* Sticky above the column header; line-height locks the ~49px it offsets against. */
  position: sticky;
  top: 0;
  z-index: 6;
  line-height: 1.2;
}

.asset-group > summary.asset-group-title::-webkit-details-marker {
  display: none;
}

.asset-group .findings-table-wrap {
  margin: 0;
}

.asset-group-meta,
.panel-header .panel-hint {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

/* Flush under the navy header; overflow:visible frees the sticky column header from the base wrap's scroll box. */
.check-categories {
  margin-top: 0;
  overflow: visible;
}

/* Collapsible check category (asset detail): Mute-all floats on the summary's right; table flows below. */
.check-category {
  position: relative;
  border-bottom: 1px solid var(--border);
}

.check-category:last-child {
  border-bottom: none;
}

.category-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 6px 6px;
  background: var(--bg);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.check-category > summary.category-head::-webkit-details-marker {
  display: none;
}

/* Collapse toggle: a chevron in a rounded button — points right when collapsed, down when open. */
.check-category > summary.category-head::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.check-category[open] > summary.category-head::before {
  transform: rotate(0deg);
}

.category-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.check-category .asset-pills {
  margin-left: auto;
}

/* Category-header count pills: soft-tinted with a colour dot + title-case (the header's own summary look). */
.check-category .asset-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  color: #475569;
  background: #f1f5f9;
}
.check-category .asset-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.check-category .asset-pill.status-pass { background: #dcfce7; color: #166534; }
.check-category .asset-pill.status-pass::before { background: var(--ok); }
.check-category .asset-pill.status-warn { background: #fef3c7; color: #92400e; }
.check-category .asset-pill.status-warn::before { background: #f59e0b; }
.check-category .asset-pill.status-fail { background: #fee2e2; color: #991b1b; }
.check-category .asset-pill.status-fail::before { background: var(--bad); }
.check-category .asset-pill.status-error { background: #fee2e2; color: #7f1d1d; }
.check-category .asset-pill.status-error::before { background: #7f1d1d; }
.check-category .asset-pill.status-na,
.check-category .asset-pill.status-nodata { background: #f1f5f9; color: #475569; }
.check-category .asset-pill.status-na::before,
.check-category .asset-pill.status-nodata::before { background: #94a3b8; }
.check-category .asset-pill.status-pending { background: #e0e7ff; color: #3730a3; }
.check-category .asset-pill.status-pending::before { background: #6366f1; }

/* Worst-status accent bar on the collapsed category header — scan the left edge for what needs attention. */
.check-category > summary.category-head { box-shadow: inset 4px 0 var(--border); }
.check-category > summary.category-head.status-pass { box-shadow: inset 4px 0 var(--ok); }
.check-category > summary.category-head.status-warn { box-shadow: inset 4px 0 #f59e0b; }
.check-category > summary.category-head.status-fail,
.check-category > summary.category-head.status-error { box-shadow: inset 4px 0 var(--bad); }
.check-category > summary.category-head.status-na,
.check-category > summary.category-head.status-nodata { box-shadow: inset 4px 0 #94a3b8; }

/* Reserve room on the header's right for the floating Mute-all, only when it's rendered. */
.check-category:has(.category-actions) > summary.category-head {
  padding-right: 150px;
}

.category-actions {
  position: absolute;
  top: 6px;
  right: 22px;
}

.category-actions .btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* Fixed columns so every category's table lines up without a repeated header. */
.check-category .monitors-table {
  table-layout: fixed;
}

.check-category .monitors-table td:nth-child(2) {
  width: 120px;
}

.check-category .monitors-table td:nth-child(3) {
  width: 190px;
}

.check-category .monitors-table td:nth-child(4) {
  width: 90px;
}

.check-category .monitors-table td:nth-child(5) {
  width: 210px;
}

/* One header per asset — fixed widths match the category tables so it aligns; sticky keeps labels in view. */
.monitors-colhead {
  table-layout: fixed;
  margin: 0;
  position: sticky;
  top: 49px; /* sits directly under the sticky navy asset bar */
  z-index: 5;
  background: #eef2f6;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.monitors-colhead th {
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.monitors-colhead th:nth-child(2) { width: 120px; }
.monitors-colhead th:nth-child(3) { width: 190px; }
.monitors-colhead th:nth-child(4) { width: 90px; }
.monitors-colhead th:nth-child(5) { width: 210px; }

.monitors-table tr.row-disabled td,
.monitors-table tr.row-muted td {
  color: var(--text-muted);
}

.asset-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  align-self: center;
  flex: 0 0 auto;
  background: #94a3b8;
}
.asset-status-dot.status-pass { background: var(--ok); }
.asset-status-dot.status-warn { background: #f59e0b; }
.asset-status-dot.status-fail { background: var(--bad); }
.asset-status-dot.status-error { background: #7f1d1d; }
.asset-status-dot.status-na,
.asset-status-dot.status-nodata { background: #94a3b8; }

.asset-pills {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.asset-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
}
.asset-pill.status-pass { background: var(--ok); }
.asset-pill.status-warn { background: #f59e0b; }
.asset-pill.status-fail { background: var(--bad); }
.asset-pill.status-error { background: #7f1d1d; }
.asset-pill.status-na,
.asset-pill.status-nodata { background: #64748b; }
.asset-pill.status-pending { background: #6366f1; }
.asset-pill.pill-stale {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
}
.asset-pill.severity-info { background: #64748b; }
.asset-pill.severity-low { background: #3b82f6; }
.asset-pill.severity-medium { background: #f59e0b; }
.asset-pill.severity-high { background: #ef4444; }
.asset-pill.severity-critical { background: #b91c1c; }

.monitor-why,
.event-detail {
  margin-top: 3px;
  font-size: 12.5px;
  color: #475569;
}

.monitor-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}

.obs-summary {
  margin: 0 0 14px;
  font-size: 13px;
}

.monitor-config-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.monitor-config-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.monitor-config-form input[type="text"] {
  min-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  background: var(--card);
}
.monitor-config-form input[type="text"]:focus,
.monitor-config-form input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 63, 143, 0.15);
}
.monitor-config-form .monitor-config-hint {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.asset-search {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.asset-search input[type="search"] {
  flex: 1;
  max-width: 380px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.asset-search input[type="search"]:focus,
.asset-search input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 63, 143, 0.15);
}

a.asset-pill {
  text-decoration: none;
}
.check-code {
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #f1f5f9;
  color: #475569;
}

.filters .filter-count {
  opacity: 0.6;
  font-weight: 600;
}

.badge.fstatus-open { background: #fef3c7; color: #92400e; }
.badge.fstatus-acknowledged { background: #dbeafe; color: #1e40af; }
.badge.fstatus-resolved { background: #dcfce7; color: #166534; }

/* Events table: fix the narrow columns so Title takes the slack — the shared findings-table splits 8 columns evenly otherwise, squeezing titles onto 3 lines. */
.events-table th:nth-child(1) { width: 100px; } /* Severity */
.events-table th:nth-child(3) { width: 130px; } /* Target */
.events-table th:nth-child(4) { width: 150px; } /* Check */
.events-table th:nth-child(5) { width: 92px; }  /* Last seen */
.events-table th:nth-child(6) { width: 76px; }  /* Age */
.events-table th:nth-child(7) { width: 132px; } /* Status */
.events-table th:nth-child(8) { width: 128px; } /* Actions */

/* Standard-result table: pin Code/Verification/Status so the run's own evidence takes the slack. */
.standard-result-table th:nth-child(1) { width: 64px; }  /* Code */
.standard-result-table th:nth-child(2) { width: 240px; } /* Verification */
.standard-result-table th:nth-child(3) { width: 96px; }  /* Status */

/* What the code verifies is the same sentence on every run, so it hangs off the code instead of taking a column. */
.assertion-code {
  border-bottom: 1px dotted var(--border);
  cursor: help;
}

/* A status/severity pill is one token — never let a narrow column break it mid-word ("Hi gh"). */
.badge {
  white-space: nowrap;
}

.monitors-table .badge.badge-muted {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: #e2e8f0;
  color: #475569;
}

/* Toolbar above the asset list: status legend on the left, density toggle on the right. */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.status-legend {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 2;
}

.status-legend .legend-chip {
  display: inline-block;
  margin: 0 4px 0 12px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
}

.status-legend .legend-chip:first-child {
  margin-left: 0;
}

.legend-chip.legend-pass { background: var(--ok); }
.legend-chip.legend-warn { background: #f59e0b; }
.legend-chip.legend-fail { background: var(--bad); }
.legend-chip.legend-na { background: #94a3b8; }

/* Compact density (opt-in, persisted): tighter rows fit a whole asset on one screen. */
body.compact .findings-table td {
  padding-top: 5px;
  padding-bottom: 5px;
}

body.compact .assertion-row td {
  padding-top: 3px;
  padding-bottom: 3px;
}

body.compact .monitor-why,
body.compact .assertion-why {
  margin-top: 1px;
}

.freshness-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #fef3c7;
  color: #b45309;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .crumb-sep {
  color: var(--border);
}

.breadcrumb .crumb-current {
  color: var(--text);
  font-weight: 600;
}

/* ── Shared page-section vocabulary (used across every admin page) ─────────── */
.page-title {
  margin: 4px 0 6px;
  font-size: 24px;
  font-weight: 700;
}

.page-intro {
  margin: 0 0 24px;
  max-width: 760px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Help sits on the control it describes: an info dot beside the button opens a bubble above it. */
.action-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The glyph draws its own ring, so no chip behind it — that would read as a circle inside a circle. */
.hint-dot {
  padding: 0;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 17px;
  line-height: 1;
  cursor: help;
}

.hint-dot:hover,
.hint-dot:focus-visible {
  color: var(--panel-header);
}

.hint-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: 300px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--panel-header);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: var(--shadow);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s;
}

.action-hint:hover .hint-bubble,
.action-hint:focus-within .hint-bubble {
  visibility: visible;
  opacity: 1;
}

/* Below the control, for a hint that sits in a panel header — above would open off the top of the page. */
.hint-bubble-below {
  top: calc(100% + 8px);
  bottom: auto;
}

/* The header is dark, so the dot's default slate grey would all but disappear against it. */
.panel-header .hint-dot {
  color: rgb(255 255 255 / 65%);
}

.panel-header .hint-dot:hover,
.panel-header .hint-dot:focus-visible {
  color: #fff;
}

/* Direct children only, so panel-header h2 (nested) keeps its inherited white text. */
.dashboard > h2 {
  margin: 30px 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

/* White card wrapping an action form (add asset / create plan), matching the runner form. */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 8px;
}

.form-card .inline-form {
  flex-wrap: wrap;
  margin: 0;
}

/* Management tables size columns to content so the actions column never wraps its buttons. */
.findings-table.layout-auto {
  table-layout: auto;
}

.findings-table.layout-auto td .row-actions {
  flex-wrap: nowrap;
}

/* Events-page disclosure explaining what Acknowledge/Resolve/Ignore-always do (native <details>, no JS). */
.actions-legend {
  margin: -6px 0 20px;
  max-width: 760px;
}

.actions-legend > summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.actions-legend > summary::-webkit-details-marker {
  display: none;
}

.actions-legend > summary:hover {
  color: var(--panel-header);
}

.actions-legend dl {
  margin: 10px 0 0;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.actions-legend dt {
  font-weight: 600;
  color: var(--text);
}

.actions-legend dd {
  margin: 2px 0 10px;
  color: var(--text-muted);
  line-height: 1.5;
}

.actions-legend dd:last-child {
  margin-bottom: 0;
}

/* Source provenance: synced mirrors the platform (view/deactivate), manual is owned here (full CRUD). */
.source-tag.synced {
  background: #e0e7ff;
  color: #3730a3;
}

/* Alert-rule builder — a two-column form grouped into fieldsets, closing with the composed-rule preview. */
.rule-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; align-items: start; }
.rule-form-full { grid-column: 1 / -1; }
.rule-form-field { display: flex; flex-direction: column; gap: .3rem; }
/* An author-origin display wins over the UA's [hidden] rule, so hiding a field needs saying explicitly. */
.rule-form-field[hidden], .scope-config[hidden] { display: none; }
.rule-form-field label, .field-label {
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
}
.rule-form-field input, .rule-form-field select, .rule-form-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px; color: var(--text); background: var(--card); font-family: inherit;
}
/* One height for both control kinds, so a select and an input in the same row line up. */
.rule-form-field input, .rule-form-field select { min-height: 38px; }
.rule-form-field input:focus, .rule-form-field select:focus, .rule-form-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43, 63, 143, .12);
}
.input-short { max-width: 200px; }
.input-with-unit { display: flex; align-items: center; gap: .45rem; }
.input-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.field-static { margin: 0; padding: 8px 0; font-size: 14px; }
.field-hint { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.req { color: var(--bad); text-decoration: none; }

.rule-fieldset {
  grid-column: 1 / -1; margin: .5rem 0 0; padding: .7rem 0 0; border: 0; border-top: 1px solid var(--border);
}
.rule-fieldset > legend { padding: 0; font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.rule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; align-items: start; margin-top: .6rem; }
.rule-fields-three { grid-template-columns: 1fr 1fr 1fr; }

/* Segmented radios: the grading picks are one click and readable at a glance, unlike two identical dropdowns. */
.rule-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.rule-pill { position: relative; display: inline-flex; }
.rule-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rule-pill span {
  display: inline-block; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--card); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rule-pill:hover span { border-color: var(--panel-header); color: var(--panel-header); }
.rule-pill input:checked + span { background: var(--panel-header); border-color: var(--panel-header); color: #fff; }
.rule-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(43, 63, 143, .35); }
/* Severity carries its own colour scale (same tints as the badges) so it never reads as the impact row. */
.rule-pills-severity .rule-pill input:checked + .severity-info { background: var(--sev-info-bg); border-color: var(--sev-info-bg); color: var(--sev-info-fg); }
.rule-pills-severity .rule-pill input:checked + .severity-low { background: var(--sev-low-bg); border-color: var(--sev-low-bg); color: var(--sev-low-fg); }
.rule-pills-severity .rule-pill input:checked + .severity-medium { background: var(--sev-medium-bg); border-color: var(--sev-medium-bg); color: var(--sev-medium-fg); }
.rule-pills-severity .rule-pill input:checked + .severity-high { background: var(--sev-high-bg); border-color: var(--sev-high-bg); color: var(--sev-high-fg); }
.rule-pills-severity .rule-pill input:checked + .severity-critical { background: var(--sev-critical-bg); border-color: var(--sev-critical-bg); color: var(--sev-critical-fg); }

/* The rule as one sentence — replaces the footnote that used to explain what each condition expects. */
.rule-preview {
  grid-column: 1 / -1; margin: .9rem 0 0; padding: 11px 15px; border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; background: var(--bg); font-size: .9rem; line-height: 1.5; color: var(--text-muted);
}
.rule-preview:empty { display: none; }
.rule-preview strong { color: var(--text); }
/* Still being composed: the sentence reads as a draft, not as a finished rule. */
.rule-preview.is-incomplete { border-left-style: dashed; border-left-color: var(--border); }
.rule-preview-slot {
  display: inline-block; min-width: 2.2em; padding: 0 .3em; border-bottom: 1px dashed var(--text-muted);
  color: var(--text-muted); text-align: center;
}
.rule-form-actions { grid-column: 1 / -1; display: flex; gap: .5rem; margin-top: .6rem; }

/* A scope's dependent sub-field, indented under the select that reveals it. */
.scope-config {
  display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem;
  padding-left: .7rem; border-left: 2px solid var(--border);
}

/* Inline edit row: the same form body, opened under the rule it edits. */
.rule-edit-row > td { padding: 18px 22px; background: var(--bg); }
.rule-edit-row .rule-form-field input, .rule-edit-row .rule-form-field select { background: var(--card); }

@media (max-width: 720px) {
  .rule-form, .rule-fields, .rule-fields-three { grid-template-columns: 1fr; }
}

/* System health: dispatch-queue cards sit above the failures panel. */
.queue-health { margin-bottom: 24px; }
.card-sub.negative { color: var(--bad); }