/* ── SIEM feed: tabs, checkbox lines, payload previews ──────────────────────
 *
 * A globally loaded component rather than a page stylesheet. Form control classes
 * in css/pages/* are loaded only on the page that happens to need them, which is
 * how a control ends up unstyled the first time it is reused somewhere else - the
 * tenant SIEM pane and the staff console both use everything here.
 *
 * All three blocks are built from the existing --cs-* tokens, so they move with
 * the theme rather than pinning their own colours.
 */

/* ── Tabs ──
 * One row of panes inside a settings surface. Deliberately NOT a nav: the four
 * panes are one page's sections, so switching them must not change the URL or
 * cost a request - the settings column is the navigation.
 */
.cs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-1);
  margin: var(--cs-space-6) 0 var(--cs-space-4);
  padding: var(--cs-space-1);
  background: var(--cs-neutral-100);
  border: 1px solid var(--cs-neutral-200);
  border-radius: var(--cs-radius-lg);
}

.cs-tabs__tab {
  appearance: none;
  flex: 1 1 auto;
  min-width: 7rem;
  padding: var(--cs-space-2) var(--cs-space-4);
  font-size: var(--cs-text-sm);
  font-weight: var(--cs-weight-medium);
  color: var(--cs-neutral-600);
  background: transparent;
  border: 0;
  border-radius: var(--cs-radius-md);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.cs-tabs__tab:hover { color: var(--cs-neutral-900); }

.cs-tabs__tab.is-active {
  color: var(--cs-blue-700);
  background: var(--cs-white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cs-tabs__tab:focus-visible {
  outline: 2px solid var(--cs-blue-500);
  outline-offset: 2px;
}

/* ── Checkbox lines ──
 * A long list of event types inside a settings row. Wrapped rather than scrolled:
 * a scrollable list inside a scrollable pane hides its own overflow, and the
 * question the customer is answering ("which of these?") needs all of them in
 * view at once.
 */
.cs-checkline {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  margin: 0 var(--cs-space-4) var(--cs-space-2) 0;
  font-size: var(--cs-text-sm);
  color: var(--cs-neutral-700);
  cursor: pointer;
}

.cs-checkline code {
  font-size: var(--cs-text-xs);
  color: var(--cs-neutral-800);
}

.cs-checkline input { accent-color: var(--cs-blue-500); }

/* ── Payload preview ──
 * A rendered event document. `overflow-x: auto` on the block and `white-space:
 * pre` inside it, so a long command line scrolls the preview rather than widening
 * the page - which on a settings pane means breaking the layout for every other
 * row on it.
 */
.cs-pre {
  margin: var(--cs-space-2) 0 0;
  padding: var(--cs-space-3);
  max-height: 22rem;
  overflow: auto;
  font-size: var(--cs-text-xs);
  line-height: var(--cs-leading-normal);
  color: var(--cs-neutral-800);
  background: var(--cs-neutral-50);
  border: 1px solid var(--cs-neutral-200);
  border-radius: var(--cs-radius-md);
}

.cs-pre code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  white-space: pre;
}

/* ── Numbers that mean something is wrong ──
 * The time-to-gap figure and the backlog depth. Used in both the tenant pane and
 * the staff console, which is the reason this lives here.
 */
.cs-metric {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cs-space-1);
  font-variant-numeric: tabular-nums;
}

.cs-metric__value {
  font-size: var(--cs-text-lg);
  font-weight: var(--cs-weight-semibold);
  color: var(--cs-neutral-900);
}

.cs-metric__unit {
  font-size: var(--cs-text-xs);
  color: var(--cs-neutral-500);
}

/* Amber for "about to lose events", red for "has lost events". The distinction is
 * the whole point of the early warning: one is still actionable. */
.cs-metric--warn .cs-metric__value { color: #b45309; }
.cs-metric--danger .cs-metric__value { color: #b91c1c; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-tabs {
    background: var(--cs-neutral-800);
    border-color: var(--cs-neutral-700);
  }
  :root:not([data-theme="light"]) .cs-tabs__tab.is-active {
    background: var(--cs-neutral-900);
    color: var(--cs-cyan-300);
  }
  :root:not([data-theme="light"]) .cs-pre {
    background: var(--cs-neutral-900);
    border-color: var(--cs-neutral-700);
    color: var(--cs-neutral-200);
  }
}

:root[data-theme="dark"] .cs-tabs {
  background: var(--cs-neutral-800);
  border-color: var(--cs-neutral-700);
}
:root[data-theme="dark"] .cs-tabs__tab.is-active {
  background: var(--cs-neutral-900);
  color: var(--cs-cyan-300);
}
:root[data-theme="dark"] .cs-pre {
  background: var(--cs-neutral-900);
  border-color: var(--cs-neutral-700);
  color: var(--cs-neutral-200);
}