/* Design system: only these 7 colors are used anywhere in the site chrome
   (buttons, header, popups, status). The one deliberate exception is the
   yellow search-match highlight (.log-highlight) -- a functional highlighter
   marker, not a theme/brand color. */
:root {
  --c-black: #1a1a1a;
  --c-dark-grey: #4d4d4d;
  --c-light-grey: #d9d9d9;
  --c-red: #e60000;
  --c-red-dark: #b30000;
  --c-green: #1a8a3f;
  --c-green-dark: #136b31;
  --c-green-light: #4fbf72;
  --c-orange: #d9700e;
  --c-blue: #4169e1;
  --c-white: #ffffff;

  /* Back-compat aliases used by any not-yet-migrated selectors. */
  --vc-red: var(--c-red);
  --vc-red-dark: var(--c-red-dark);
  --vc-black: var(--c-black);
  --vc-grey: var(--c-light-grey);
  --vc-white: var(--c-white);
}

* {
  box-sizing: border-box;
}

/* Author styles (even a plain type selector like `button {}`) beat the
   browser's UA stylesheet regardless of specificity -- so any `display`
   rule on `button`/`.button` would otherwise silently defeat the `hidden`
   attribute on buttons. This one rule keeps `hidden` working everywhere. */
[hidden] {
  display: none !important;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f5f5f5;
  color: var(--c-black);
}

/* ---------- Header (shared across the whole site) ---------- */

.vc-header {
  background: var(--c-black);
  color: var(--c-white);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.vc-header__row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vc-header__nav-btn {
  background: none;
  border: none;
  color: var(--c-white);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.vc-header__nav-btn:hover {
  background: var(--c-dark-grey);
}

.vc-header__brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.vc-logo {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--c-red);
}

.vc-header__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.vc-header__controls select {
  border-radius: 6px;
  border: 1px solid var(--c-dark-grey);
  padding: 0.4rem 0.6rem;
  background: var(--c-white);
  color: var(--c-black);
}

/* "My Account" dropdown in the header (public/js/tenantAccount.js). */
.account-menu {
  position: relative;
}

.account-menu__caret {
  margin-left: 0.25rem;
  font-size: 0.8em;
}

.account-menu__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 60;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.account-menu__panel[hidden],
.account-menu__panel .account-menu__item[hidden] {
  display: none;
}

.account-menu__panel .account-menu__item {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  background: var(--c-white);
  color: var(--c-black);
  border: none;
  border-radius: 6px;
}

.account-menu__panel .account-menu__item:hover,
.account-menu__panel .account-menu__item:focus-visible {
  background: var(--c-light-grey);
  color: var(--c-black);
}

.account-menu__panel .account-menu__item--logout {
  border-top: 1px solid var(--c-light-grey);
  border-radius: 0 0 6px 6px;
  margin-top: 0.15rem;
}

.vc-header__info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.35rem;
  /* Space between the info text and the full-width nav bar below it */
  margin-bottom: 0.6rem;
}

.vc-header__account-line,
.vc-header__user-email {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-light-grey);
}

.vc-nav-drawer {
  background: var(--c-dark-grey);
  color: var(--c-white);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
  /* Break out of the header's horizontal padding so the nav row spans the
     full page width and sits flush at the bottom edge of the header. */
  margin: 0 -1.5rem -0.75rem;
}

.vc-nav-drawer.is-open {
  max-height: 200px;
}

.vc-nav-drawer__inner {
  display: flex;
  gap: var(--nav-gap);
  /* Full-width grey bar (see negative margins on .vc-nav-drawer), but the
     buttons are inset by the same 1.5rem as the main header so they don't
     touch the screen edge. */
  padding: 0.5rem 1.5rem;
  /* Single line always: never wrap to a second row. When the visible links
     can't fit at full size, setupNavFit() in app.js steps `data-density` up
     so the button font/padding/gap shrink; below the smallest tier, labels
     ellipsis-truncate (see .vc-nav-drawer__label). */
  flex-wrap: nowrap;
  width: 100%;
  /* Density tier 0 (comfortable) -- overridden by the [data-density] tiers. */
  --nav-gap: 0.5rem;
  --nav-btn-font: 0.9rem;
  --nav-btn-pad-x: 1.1rem;
  --nav-btn-gap: 0.5rem;
}

.vc-nav-drawer__inner[data-density="1"] {
  --nav-gap: 0.4rem;
  --nav-btn-font: 0.8rem;
  --nav-btn-pad-x: 0.65rem;
  --nav-btn-gap: 0.4rem;
}

.vc-nav-drawer__inner[data-density="2"] {
  --nav-gap: 0.3rem;
  --nav-btn-font: 0.7rem;
  --nav-btn-pad-x: 0.4rem;
  --nav-btn-gap: 0.3rem;
}

.vc-nav-drawer a.button {
  text-decoration: none;
  background: var(--c-black);
  /* Stretch buttons so the nav row covers the full page width */
  flex: 1 1 0;
  /* Allow a button to shrink below its content width so its label can
     ellipsis-truncate instead of forcing the row to overflow/wrap. */
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--nav-btn-font);
  padding: 0.55rem var(--nav-btn-pad-x);
  gap: var(--nav-btn-gap);
}

/* The icon keeps its size; only the text label shrinks/truncates. */
.vc-nav-drawer a.button i {
  flex: 0 0 auto;
}

.vc-nav-drawer__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-nav-drawer a.button:hover {
  background: var(--c-dark-grey);
}

.vc-nav-drawer a.is-active {
  background: var(--c-red);
}

.vc-nav-drawer a.is-active:hover {
  background: var(--c-red-dark);
}

/* ---------- Layout ---------- */

.vc-main {
  flex: 1 0 auto;
  padding: 2rem 1.5rem;
  width: 100%;
  margin: 0 auto;
}

.vc-footer {
  background: var(--c-black);
  color: var(--c-light-grey);
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.vc-footer p {
  margin: 0;
}

.vc-footer__tagline {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-white);
  margin-bottom: 0.2rem;
}

.panel {
  background: var(--c-white);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.panel--warning {
  border-left: 4px solid var(--c-orange);
}

.panel h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

/* ---------- Buttons (icon-prefixed text, rounded, palette colors) ---------- */

button,
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  background: var(--c-red);
  color: var(--c-white);
  transition: background 0.15s;
}

button:hover,
.button:hover {
  background: var(--c-red-dark);
}

button:disabled {
  background: var(--c-light-grey);
  color: var(--c-dark-grey);
  cursor: not-allowed;
}

button.button--primary {
  background: var(--c-red);
}

button.button--primary:hover {
  background: var(--c-red-dark);
}

button.button--secondary {
  background: var(--c-light-grey);
  color: var(--c-black);
}

button.button--secondary:hover {
  background: #c2c2c2;
}

/* ---------- Error Demo ---------- */

.error-demo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0;
}

.error-demo-btn {
  background: var(--c-dark-grey);
  color: var(--c-white);
}

.error-demo-btn:hover {
  background: var(--c-black);
}

/* Colour the play icon by outcome: green on the always-succeeding steps
   (1, 2, 5) and red on the intentionally error-triggering steps (3, 4), so
   it's clear at a glance which ones will fail. */
.error-demo-btn[data-step="1"] .fa-play,
.error-demo-btn[data-step="2"] .fa-play,
.error-demo-btn[data-step="5"] .fa-play {
  color: var(--c-green-light);
}

.error-demo-btn[data-step="3"] .fa-play,
.error-demo-btn[data-step="4"] .fa-play {
  color: var(--c-red);
}

.error-demo-btn.is-success {
  background: var(--c-green);
}

.error-demo-btn.is-success:hover {
  background: var(--c-green-dark);
}

.error-demo-btn.is-error {
  background: var(--c-red);
}

.error-demo-btn.is-error:hover {
  background: var(--c-red-dark);
}

.error-demo-log {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.error-demo-log-entry {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.error-demo-log-entry--error {
  border-left: 4px solid var(--c-red);
}

.error-demo-log-entry--success {
  border-left: 4px solid var(--c-green);
}

.error-demo-log-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.error-demo-log-entry__badge {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

/* ---------- Health tile ---------- */

.health-window-select {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
}

.health-window-select label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  background: var(--c-light-grey);
  color: var(--c-black);
  cursor: pointer;
  font-size: 0.85rem;
}

.health-window-select input[type='radio'] {
  accent-color: var(--c-red);
  margin: 0;
}

.health-window-select label:has(input:checked) {
  background: var(--c-red);
  color: var(--c-white);
}

/* Pre-run cost heads-up shown when a wider-than-default window is selected on a
   CloudWatch-backed app. Orange = caution (palette), not an error. */
.health-window-cost-note {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--c-orange);
  background: #fdead3;
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--c-black);
}

.health-window-cost-note .fa-triangle-exclamation {
  color: var(--c-orange);
  margin-right: 0.35rem;
}

.health-tile {
  padding: 1rem;
  border-radius: 8px;
  background: var(--c-light-grey);
}

/* Post-run actual bytes-scanned + estimated cost line inside the tile. */
.health-tile__cost {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--c-dark-grey);
}

.health-tile__cost .fa-database {
  margin-right: 0.35rem;
}

.health-tile__window-note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--c-dark-grey);
}

.health-tile__window-note .fa-circle-info {
  margin-right: 0.35rem;
}

.health-tile--green {
  background: #e6f7ec;
  border-left: 4px solid var(--c-green);
}

.health-tile--amber {
  background: #fdead3;
  border-left: 4px solid var(--c-orange);
}

.health-tile--red {
  background: #fde8e8;
  border-left: 4px solid var(--c-red);
}

/* "Enter credentials" call-to-action shown in the health tile when the app has
   no working AWS key and the current user can reach System Settings. */
.health-tile__cta-wrap {
  margin-top: 0.75rem;
}

.health-tile--unknown {
  background: var(--c-light-grey);
  border-left: 4px solid var(--c-dark-grey);
}

/* "Incomplete" -- traffic was measured but the error count couldn't finish, so
   there's no green/amber/red rating yet. Grey like "unknown" (it's a no-rating
   state, not a health verdict); the note text carries the "traffic detected"
   distinction. */
.health-tile--incomplete {
  background: var(--c-light-grey);
  border-left: 4px solid var(--c-dark-grey);
}

.health-methodology {
  font-size: 0.8rem;
  color: var(--c-dark-grey);
  margin: 0.6rem 0 0;
}

.health-methodology__intro {
  margin: 0 0 0.5rem;
}

.health-methodology__columns {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.health-methodology__list {
  flex: 1 1 200px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.health-methodology__list li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.2rem 0;
}

.health-methodology__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.health-methodology__swatch--green {
  background: var(--c-green);
}

.health-methodology__swatch--orange {
  background: var(--c-orange);
}

.health-methodology__swatch--red {
  background: var(--c-red);
}

.health-methodology__swatch--grey {
  background: var(--c-dark-grey);
}

/* ---------- Log sources dashboard (Health Summary) ---------- */

.log-sources {
  margin-top: 1rem;
}

.log-sources h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.log-sources__grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.log-sources__panel {
  flex: 1 1 200px;
  min-width: 200px;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.log-sources__panel--enabled {
  background: #e6f7ec;
  border: 1px solid var(--c-green);
}

.log-sources__panel--disabled {
  background: var(--c-light-grey);
  border: 1px solid var(--c-dark-grey);
}

.log-sources__panel-icon {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.log-sources__panel--enabled .log-sources__panel-icon {
  color: var(--c-green);
}

.log-sources__panel--disabled .log-sources__panel-icon {
  color: var(--c-dark-grey);
}

.log-sources__panel-label {
  font-weight: 700;
  font-size: 0.9rem;
}

.log-sources__panel-status {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.log-sources__panel--enabled .log-sources__panel-status {
  color: var(--c-green);
}

.log-sources__panel--disabled .log-sources__panel-status {
  color: var(--c-dark-grey);
}

.log-sources__panel-description {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--c-dark-grey);
  text-align: left;
}

/* ---------- Usage dashboard (Health page) ---------- */

.usage-dashboard {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-light-grey);
}

.usage-dashboard__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.usage-dashboard__header h3 {
  margin: 0;
}

.usage-dashboard__generated {
  font-size: 0.75rem;
  color: var(--c-dark-grey);
}

.usage-dashboard__header button {
  margin-left: auto;
}

.usage-dashboard h4 {
  margin: 1rem 0 0.5rem;
  font-size: 0.9rem;
}

/* Blocks, 4 per row where the screen allows. */
.usage-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (max-width: 1200px) {
  .usage-dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .usage-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .usage-dashboard__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.usage-dashboard__tile {
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-left: 4px solid var(--c-dark-grey);
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 0;
}

.usage-dashboard__tile--green { border-left-color: var(--c-green); }
.usage-dashboard__tile--orange { border-left-color: var(--c-orange); }
.usage-dashboard__tile--red { border-left-color: var(--c-red); }

.usage-dashboard__tile-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

/* The ? on a tile label that opens its help popup -- a small icon, not a red button. */
.usage-dashboard__help {
  padding: 0 0.15rem;
  margin-left: 0.15rem;
  background: none;
  border: none;
  color: var(--c-dark-grey);
  font-size: 0.85rem;
  line-height: 1;
  vertical-align: baseline;
  cursor: pointer;
}

.usage-dashboard__help:hover,
.usage-dashboard__help:focus-visible {
  background: none;
  color: var(--c-black);
}

.user-link-help__list li {
  margin-bottom: 0.5rem;
}

.usage-dashboard__tile-value {
  margin-top: 0.35rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-black);
  overflow-wrap: anywhere;
}

.usage-dashboard__tile-value small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-dark-grey);
}

.usage-dashboard__tile-since {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-dark-grey);
}

.usage-dashboard__tile-sub {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--c-dark-grey);
  overflow-wrap: anywhere;
}

/* Folder tabs over the dashboards (one open at a time). Each tab has its own
   dashboard's colour; the line under the tabs takes the open one's border
   colour, and the open panel sits straight under it. */
.usage-dashboard__folders {
  margin-top: 1rem;
}

.usage-dashboard__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 3px solid var(--c-dark-grey);
}

.usage-dashboard__tabs--app { border-bottom-color: var(--c-green); }
.usage-dashboard__tabs--tenant { border-bottom-color: var(--c-red); }
.usage-dashboard__tabs--all { border-bottom-color: var(--c-dark-grey); }

.usage-dashboard .usage-dashboard__tab {
  border-radius: 8px 8px 0 0;
  padding: 0.45rem 1rem;
  border: none;
  color: var(--c-black);
  font-weight: 600;
  opacity: 0.75;
}

.usage-dashboard .usage-dashboard__tab.is-open {
  opacity: 1;
  font-weight: 700;
}

.usage-dashboard .usage-dashboard__tab--app { background: #e6f7ec; }
.usage-dashboard .usage-dashboard__tab--tenant { background: #fdecec; }
.usage-dashboard .usage-dashboard__tab--all { background: var(--c-light-grey); }

.usage-dashboard .usage-dashboard__tab:hover {
  opacity: 1;
}

.usage-dashboard__folders .usage-dashboard__panel {
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}

/* Titled parent panel around each dashboard. Backgrounds are light tints of
   the palette's green / red (like .log-sources__panel--enabled), so the white
   blocks inside stand out. */
.usage-dashboard__panel {
  margin-top: 1rem;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
}

.usage-dashboard__panel--app {
  background: #e6f7ec;
}

.usage-dashboard__panel--tenant {
  background: #fdecec;
}

.usage-dashboard__panel--all {
  background: var(--c-light-grey);
}

.usage-dashboard .usage-dashboard__panel-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

.usage-dashboard__panel-title small {
  font-weight: 400;
  color: var(--c-dark-grey);
}








.usage-dashboard__chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-white);
  vertical-align: middle;
}

.usage-dashboard__chip--green { background: var(--c-green); }
.usage-dashboard__chip--red { background: var(--c-red); }

.usage-dashboard__status-note {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.8rem;
  color: var(--c-red);
}

.usage-dashboard__explain {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
}

.usage-dashboard__explain p {
  margin: 0;
}

.usage-dashboard__explain ul {
  margin: 0.4rem 0;
  padding-left: 1.2rem;
}

.usage-dashboard__explain li {
  margin-bottom: 0.3rem;
}

.usage-dashboard__since {
  color: var(--c-dark-grey);
}

.usage-dashboard__settings {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.usage-dashboard__settings summary {
  cursor: pointer;
  font-weight: 600;
}

.usage-dashboard__settings-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
}

.usage-dashboard__setting input {
  width: 4.5rem;
  margin-left: 0.3rem;
}

.qa-log-types p {
  margin: 0.5rem 0;
}

.qa-log-types code {
  background: var(--c-light-grey);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  font-size: 0.9em;
}

/* ---------- Forms ---------- */

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.search-form input,
.search-form select {
  padding: 0.45rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

#tenant-admin-add-email {
  width: 30em;
}

.saved-searches {
  margin-bottom: 0.75rem;
}

/* Search Logs by identifier: the "only where it is the named field" tick-box,
   the "also seen" chips, and the whole-request button. */
.search-form .search-named-only {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.search-form .search-named-only input {
  padding: 0;
}
.search-named-only.is-disabled {
  opacity: 0.5;
  cursor: default;
}
.search-actions {
  margin-bottom: 0.5rem;
}
.search-identifiers {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--c-dark-grey);
}
.search-identifiers__label {
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.search-identifiers__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.search-status__action {
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
}
.timeline-item__match {
  flex: 0 0 auto;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-white);
}
.timeline-item__match--named {
  background: var(--c-green);
}
.timeline-item__match--text,
.timeline-item__match--related {
  background: var(--c-dark-grey);
}

.chip {
  display: inline-flex;
  align-items: center;
  background: var(--c-light-grey);
  border: 1px solid #bbb;
  color: var(--c-black);
  border-radius: 999px;
  padding: 0.15rem;
  margin: 0.15rem;
  font-size: 0.85rem;
}

.chip:hover {
  background: #c2c2c2;
}

/* Status colours for Manage Users chips (admin/super role = red; Active and
   2FA on = green). The "off" states keep the plain grey chip. */
.chip--red,
.chip--red:hover {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}

.chip--green,
.chip--green:hover {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-white);
}

.chip--black,
.chip--black:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

.chip__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.chip__label:hover {
  background: var(--c-white);
}

.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.4rem;
  padding: 0;
  border-radius: 50%;
  color: var(--c-dark-grey);
  font-size: 0.75rem;
  cursor: pointer;
}

.chip__remove:hover {
  background: var(--c-red);
  color: var(--c-white);
}

.chip__window {
  color: var(--c-dark-grey);
  font-size: 0.78rem;
}

.search-hint {
  font-size: 0.8rem;
  color: var(--c-dark-grey);
  margin: 0 0 0.75rem;
}

.search-hint__highlight {
  color: var(--c-red);
}

/* The selected pre-configured search's description reads as red + bold (id-scoped
   so other .search-hint uses keep the muted dark-grey). */
#template-description {
  color: var(--c-red);
  font-weight: 700;
}

.search-status {
  font-size: 0.9rem;
  color: var(--c-dark-grey);
  margin-bottom: 0.5rem;
}

/* All loading spinners across the app render in brand red. */
.fa-spinner.fa-spin {
  color: var(--c-red);
}

.search-status__spinner {
  margin-right: 0.35rem;
}

.search-status__elapsed {
  color: var(--c-dark-grey);
  font-size: 0.85rem;
  font-style: italic;
}

/* Inline status-line colour variants (used by the System Settings credential
   panel). Same palette-derived tints as .ai-chat-status--*, kept subtle since
   these sit inline as page content, not as toast cards. */
.search-status--ok {
  color: var(--c-green);
}

.search-status--warn {
  color: var(--c-orange);
}

.search-status--error {
  color: var(--c-red);
}

/* System Settings: enter/rotate AWS access key panel (Step 1, apikey apps). */
.settings-creds {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-light-grey);
}

.settings-creds h4 {
  margin: 0 0 0.4rem;
}

.settings-creds__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.75rem 0;
}

.settings-creds__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--c-dark-grey);
}

.settings-creds__field input {
  min-width: 22rem;
}

/* System Settings: tenant-configuration wizard steps (Application limits, AI
   service, Add tenant, Add application) -- these classes style content
   *within* a .settings-pane__body, not a standalone accordion block. */
.settings-add-app__form {
  margin-top: 1rem;
}

.settings-add-app__override {
  margin: 0.5rem 0 0.75rem;
}

/* Add application: the tenant's "X of Y applications used" line. */
.app-limit-usage {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-dark-grey);
}

.app-limit-usage--blocked {
  color: var(--c-red);
  font-weight: 600;
}

/* Super-only Application limits panel. */
/* System Settings > AI service (public/js/aiService.js). */
.ai-service__status {
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--c-green);
  background: var(--c-white);
  border-radius: 8px;
}

.ai-service__status--missing {
  border-left-color: var(--c-red);
  color: var(--c-red);
}

.ai-service__key-form {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 36rem;
}

.ai-service__key-form button {
  align-self: flex-start;
}

.app-limits-table {
  width: 100%;
  border-collapse: collapse;
}

.app-limits-table th,
.app-limits-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--c-light-grey);
  text-align: left;
  vertical-align: middle;
}

.app-limits-table__sub {
  font-size: 0.8rem;
  color: var(--c-dark-grey);
}

.app-limits-table__full {
  color: var(--c-red);
  font-weight: 600;
}

.app-limits-table__input {
  width: 6rem;
}

.app-limits-audit__title {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
}

.app-limits-audit {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--c-dark-grey);
}

.settings-add-app__keys-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--c-black);
}

/* The two AWS-key choices (tenant default vs per-app override), each in its own
   bordered card so the "2 options" framing reads clearly. */
.settings-add-app__key-option {
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}

.settings-add-app__key-option > strong {
  display: block;
  margin-top: 0.15rem;
}

.settings-add-app__key-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-dark-grey);
}

.settings-add-app__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--c-dark-grey);
}

.settings-add-app__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Shown above a result count when a search couldn't scan the full requested
   window on a throughput-starved account and fell back to a shorter, more
   recent one. Orange (warning) so it's clearly a caveat on the results, not an
   error -- the results below it are real, just over a narrower window. Mirrors
   the .ai-chat-status--warning treatment. */
.search-window-fallback {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--c-orange);
  border-radius: 8px;
  background: rgba(217, 112, 14, 0.08);
  color: var(--c-orange);
  font-size: 0.85rem;
  line-height: 1.4;
}

.search-window-fallback .fa-triangle-exclamation {
  margin-top: 0.15rem;
}

/* Error-timeline template chart (public/js/searchTemplates.js renderChart).
   Palette-only: dark-grey bars, red peak bars, royal-blue deployment markers,
   light-grey gridlines. Colours come from the --c-* tokens via var() inside the
   inline SVG so the chart stays within the site's 7-colour chrome. */
.template-chart {
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  padding: 0.75rem 1rem 0.9rem;
  background: var(--c-white);
}

.template-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

.template-chart__grid {
  stroke: var(--c-light-grey);
  stroke-width: 1;
}

.template-chart__axis {
  stroke: var(--c-dark-grey);
  stroke-width: 1;
}

.template-chart__ylabel {
  fill: var(--c-dark-grey);
  font-size: 11px;
  text-anchor: end;
}

.template-chart__xlabel {
  fill: var(--c-dark-grey);
  font-size: 11px;
  text-anchor: middle;
}

.template-chart__bar {
  fill: var(--c-dark-grey);
}

.template-chart__bar--peak {
  fill: var(--c-red);
}

.template-chart__deploy {
  stroke: var(--c-blue);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.template-chart__deploy-dot {
  fill: var(--c-blue);
}

.template-chart__deploy-label {
  fill: var(--c-blue);
  font-size: 10px;
  font-weight: 600;
}

.template-chart__caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-dark-grey);
}

.template-chart__legend-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0;
  border-top: 2px dashed var(--c-blue);
  vertical-align: middle;
  margin: 0 0.15rem;
}

.template-chart__hint {
  color: var(--c-dark-grey);
  font-style: italic;
}

.tenant-login-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  position: relative; /* anchors .email-history-dropdown below the input */
}

.tenant-login-field input,
.tenant-login-field select {
  padding: 0.45rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-weight: 400;
}

/* TOTP two-factor enrolment (public/js/totpEnroll.js, #totp-enroll-modal). */
.totp-enroll-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

.totp-enroll-qr {
  width: 180px;
  height: 180px;
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  background: var(--c-white);
}

.totp-enroll-manual-key {
  display: block;
  margin: 0.25rem 0 0.75rem;
  padding: 0.4rem 0.6rem;
  background: #f2f2f2;
  border-radius: 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

.totp-backup-codes {
  list-style: none;
  margin: 0.5rem 0 0.75rem;
  padding: 0.6rem 0.8rem;
  background: #f2f2f2;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

/* Shown when enrolment setup can't start (e.g. server missing the TOTP
   encryption key) -- replaces the setup step so no broken QR is left on
   screen. public/js/totpEnroll.js. */
.totp-enroll-error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.5rem 0;
  padding: 0.8rem 1rem;
  background: rgba(230, 0, 0, 0.08);
  border: 1px solid var(--c-red);
  border-radius: 8px;
  color: var(--c-red);
}

.totp-enroll-error i {
  margin-top: 0.15rem;
  font-size: 1.1rem;
}

.totp-enroll-error p {
  margin: 0;
  color: var(--c-dark-grey);
}

/* Tenant-wide "require 2FA" toggle in Manage Users (public/js/tenantAdmin.js). */
.tenant-admin-require-2fa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

/* Remembered-email suggestions (public/js/tenantAuth.js) -- browser-local
   only (localStorage), shown under the email field on focus since the login
   modal has no real <form> for native autofill to hook into. */
.email-history-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--c-white);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  max-height: 180px;
  overflow-y: auto;
  z-index: 10;
}

.email-history-dropdown[hidden] {
  display: none;
}

.email-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-black);
}

.email-history-item:hover {
  background: var(--c-light-grey);
}

.email-history-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-history-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-dark-grey);
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  flex: 0 0 auto;
}

.email-history-item__remove:hover {
  background: none;
  color: var(--c-red);
}

.tenant-login-method-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tenant-login-method-tabs button.is-active {
  background: var(--c-red);
  color: var(--c-white);
}

.tenant-login-method-tabs button.is-active:hover {
  background: var(--c-red-dark);
}

#template-params {
  display: flex;
  gap: 0.75rem;
}

#template-params input,
#template-params select {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* ---------- Timeline / log results ---------- */

.timeline-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

.timeline-item__time {
  flex: 0 0 200px;
  color: var(--c-dark-grey);
  font-family: monospace;
}

.timeline-item__summary {
  flex: 1;
  word-break: break-word;
}

/* Endpoint + URL + HTTP status from an X-Ray-sourced item's root HTTP call,
   shown on its own line under the message (only when X-Ray recorded one). */
.timeline-item__endpoint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--c-dark-grey);
}
.timeline-item__endpoint code {
  overflow-wrap: anywhere;
}
.timeline-item__http {
  font-weight: 700;
}

.source-badge {
  flex: 0 0 auto;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-white);
  text-transform: uppercase;
}

.timeline-item--critical {
  background: var(--c-light-grey);
  border-left: 3px solid var(--c-red);
  padding-left: 0.5rem;
}

.timeline-item--warning {
  background: #fdead3;
  border-left: 3px solid var(--c-orange);
  padding-left: 0.5rem;
}

/* Briefly rings the row a Session Path error badge links to, so it's
   findable even against the existing critical/warning tint underneath. */
.timeline-item--flash {
  animation: timeline-flash 1.6s ease-out;
}

@keyframes timeline-flash {
  0% {
    box-shadow: 0 0 0 3px var(--c-red) inset;
  }
  100% {
    box-shadow: 0 0 0 0 transparent inset;
  }
}

.log-legend {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--c-dark-grey);
  margin-bottom: 0.6rem;
}

/* Shared source-selector checkbox group (Search Logs, Pre-configured
   Searches, AI Insights) -- each checkbox's accent-color is set inline per
   source (Cloudwatch green, RUM orange, X-Ray dark grey, LogFolder blue),
   staying within the site's existing --c-* palette. */
.source-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.source-selector__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.source-selector__item--disabled {
  color: var(--c-dark-grey);
  cursor: not-allowed;
}

.source-selector__item input[type='checkbox'] {
  width: 1.05rem;
  height: 1.05rem;
}

.log-legend__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.log-legend__swatch--critical {
  background: var(--c-red);
}

.log-legend__swatch--warning {
  background: var(--c-orange);
}

.log-legend__swatch--normal {
  background: var(--c-light-grey);
  border: 1px solid #bbb;
}

/* Deliberate exception to the 6-color rule -- a functional highlighter
   marker for search matches, not a theme color. */
.log-highlight {
  background: #fff9c4;
  color: inherit;
  border-radius: 2px;
  padding: 0 0.15em;
}

/* ---------- Session path diagram ---------- */

.session-path-panel {
  margin-bottom: 1rem;
}

.session-path-panel h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.session-path-group {
  border-top: 1px solid #eee;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.session-path-group:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.session-path-group__header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-dark-grey);
  margin-bottom: 0.15rem;
}

.session-path {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem 1rem;
}

.session-path__node {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  text-align: center;
}

.session-path__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.session-path__icon-glyph {
  width: 24px;
  height: 24px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Small clickable warning badge overlaid on a node's icon when an error was
   found among that node's log lines -- links back to the matching row in
   the results list below via Timeline.highlightRecord(). */
.session-path__error-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  padding: 0;
  min-width: 0;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  background: var(--c-red);
  color: var(--c-white);
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.session-path__error-badge:hover {
  background: var(--c-red-dark);
}

.session-path__label {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  word-break: break-word;
}

.session-path__node--error .session-path__label {
  color: var(--c-red);
}

.session-path__count {
  margin-left: 0.25rem;
  color: var(--c-red);
  font-weight: 700;
}

.session-path__time {
  font-size: 0.7rem;
  color: var(--c-dark-grey);
  font-family: monospace;
}

.session-path__response-time {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--c-dark-grey);
}

.session-path__response-time--slow {
  color: var(--c-red);
}

.session-path__arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--c-light-grey);
  margin-top: 18px;
}

/* ---------- Misc ---------- */

button i,
.button i,
h2 i,
h3 i,
label i,
strong i {
  margin-right: 0.15rem;
}

/* ---------- Error cards (pre-configured searches) ---------- */

.error-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.error-card {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.error-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.error-card__main {
  flex: 1;
  min-width: 0;
}

.error-card__source-badges {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

/* AI-generated plain-English headline sitting above the raw signature title.
   Deliberately bold red to read as the at-a-glance summary of the issue; filled
   in progressively after the cards render (hidden until then). */
.error-card__friendly {
  font-weight: 700;
  color: var(--c-red);
  margin-bottom: 0.2rem;
  word-break: break-word;
}

.error-card__title {
  font-weight: 600;
  color: var(--c-black);
  word-break: break-word;
}

.error-card__count-badge {
  flex: 0 0 auto;
  align-self: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-red);
}

.error-card__stats {
  font-size: 0.85rem;
  color: var(--c-dark-grey);
  margin-top: 0.25rem;
}

/* Endpoint + URL + HTTP status of an X-Ray-sourced error card, mirroring the
   Service Map "related errors" popup. Only rendered when the result carries
   endpoints (X-Ray); log-only results have no such line. */
.error-card__endpoints {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--c-dark-grey);
}
.error-card__endpoints-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.error-card__endpoints code {
  overflow-wrap: anywhere;
}
.error-card__endpoints-more {
  font-style: italic;
  margin-top: 0.1rem;
}
.error-card__http {
  font-weight: 700;
}

.error-card__info-btn,
.error-card__ai-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  flex: 0 0 auto;
  padding: 0.25rem;
}

.error-card__info-btn {
  color: var(--c-red);
}

.error-card__info-btn:hover {
  color: var(--c-red-dark);
  background: none;
}

.error-card__ai-btn {
  color: var(--c-green);
}

.error-card__ai-btn:hover {
  color: var(--c-green-dark);
  background: none;
}

.error-card__detail {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #ddd;
  font-size: 0.9rem;
}

.error-card__detail dt {
  font-weight: 600;
  margin-top: 1.25rem;
}

.error-card__detail dt:first-child {
  margin-top: 0;
}

.error-card__detail dd {
  margin: 0.35rem 0 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* "How to resolve it" steps: a vertical, numbered list rather than a run-on
   paragraph. list-style needs re-asserting because the dd sets pre-wrap. */
.error-card__step-list {
  margin: 0.35rem 0 0;
  padding-left: 1.4rem;
  list-style: decimal;
  white-space: normal;
}

.error-card__step-list li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

.error-card__step-list li:last-child {
  margin-bottom: 0;
}

.error-card__detail-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-black);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.error-card__detail-title {
  margin: 0 0 1rem;
  font-weight: 700;
  color: var(--c-red);
}

.error-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.ai-generated-note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--c-dark-grey);
  font-style: italic;
}

.error-card__raw-log-wrapper {
  margin-top: 1.25rem;
}

.error-card__raw-log-wrapper summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-red);
}

.error-card__raw-log-wrapper summary:hover {
  color: var(--c-red-dark);
}

.error-card__raw-log {
  margin: 0.5rem 0 0;
  background: var(--c-black);
  color: #d4d4d4;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0.75rem;
  border-radius: 6px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- AI Insights chat ---------- */

.ai-insights-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.ai-insights-controls select,
.ai-insights-controls input {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.ai-chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 480px;
  overflow-y: auto;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: #f5f5f5;
  border-radius: 8px;
}

.ai-chat-placeholder {
  color: var(--c-dark-grey);
  font-size: 0.9rem;
  margin: 0;
}

.ai-chat-thinking {
  color: var(--c-dark-grey);
  font-style: italic;
  margin: 0;
}

.ai-chat-thinking i {
  margin-right: 0.4rem;
}

.ai-chat-usage {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--c-dark-grey);
  font-style: italic;
}

.ai-chat-message {
  max-width: 85%;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ai-chat-message--user {
  align-self: flex-end;
  background: var(--c-black);
  color: var(--c-white);
}

.ai-chat-message--assistant {
  align-self: flex-start;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
}

/* Rendered-Markdown content styling, shared by the AI Insights chat bubble
   and the Fix Code prompt preview (both set innerHTML from Markdown.render).
   Applied via the .md-content class so either container gets the same
   headings / lists / code / table formatting. */
.md-content p {
  margin: 0 0 0.5rem;
}

.md-content p:last-child {
  margin-bottom: 0;
}

.md-content h4,
.md-content h5,
.md-content h6 {
  margin: 0.75rem 0 0.35rem;
  font-weight: 700;
  color: var(--c-black);
}

.md-content h4 {
  font-size: 1.15rem;
}

.md-content h5 {
  font-size: 1.05rem;
}

.md-content h6 {
  font-size: 0.95rem;
}

.md-content h4:first-child,
.md-content h5:first-child,
.md-content h6:first-child {
  margin-top: 0;
}

/* Semantic heading coloring -- classified by keyword in markdown.js since
   model-generated heading text has no fixed vocabulary ("Likely Trigger",
   "What the logs show", "Sources", ...). Anything not clearly one or the
   other stays the default black above. */
.md-content .md-heading--info {
  color: var(--c-green);
}

.md-content .md-heading--issue {
  color: var(--c-red);
}

.md-content ul,
.md-content ol {
  margin: 0 0 0.5rem;
  padding-left: 1.4rem;
}

.md-content code {
  background: var(--c-light-grey);
  border-radius: 4px;
  padding: 0.1em 0.3em;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.85em;
}

.md-content pre {
  background: var(--c-black);
  color: var(--c-white);
  border-radius: 6px;
  padding: 0.75rem;
  overflow-x: auto;
  margin: 0 0 0.5rem;
}

.md-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.md-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 0.5rem;
  font-size: 0.85em;
}

.md-content th,
.md-content td {
  border: 1px solid var(--c-light-grey);
  padding: 0.35rem 0.5rem;
  text-align: left;
}

.md-content th {
  background: #f0f0f0;
}

.ai-chat-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.ai-chat-form textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 8rem;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: inherit;
  resize: vertical;
}

.ai-chat-progress {
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: var(--c-light-grey);
  overflow: hidden;
}

.ai-chat-progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--c-green);
  transition: width 0.4s ease-out;
}

/* Feedback/errors for the AI Insights chat render here instead of the usual
   toast (see notify.js) -- this panel already tracks its own persistent
   request state (progress bar, cancel button), so its status belongs with
   that state rather than as a fire-and-forget popup. Tints are derived from
   the same --c-red/--c-orange/--c-dark-grey used elsewhere, just lightened
   for use as a background fill. */
.ai-chat-status {
  margin-top: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ai-chat-status--error {
  background: rgba(230, 0, 0, 0.08);
  border: 1px solid var(--c-red);
  color: var(--c-red);
}

.ai-chat-status--warning {
  background: rgba(217, 112, 14, 0.08);
  border: 1px solid var(--c-orange);
  color: var(--c-orange);
}

.ai-chat-status--info {
  background: var(--c-light-grey);
  border: 1px solid var(--c-dark-grey);
  color: var(--c-dark-grey);
}

/* ---------- Step report (which steps of a multi-step request passed/failed) ----------
   public/js/stepReport.js -- AI Insights status, Fix Code + Create Report popups. */
.step-report {
  flex-basis: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  color: var(--c-black);
  font-size: 0.82rem;
}

.step-report__title {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.step-report__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-report__step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.step-report__label {
  flex: 1;
  white-space: pre;
}

.step-report__time {
  color: var(--c-dark-grey);
  font-variant-numeric: tabular-nums;
}

.step-report__reason {
  flex-basis: 100%;
  padding-left: 1.5rem;
  color: var(--c-dark-grey);
}

.step-report__step--passed .fa-solid {
  color: var(--c-green);
}

.step-report__step--failed .fa-solid,
.step-report__step--failed .step-report__reason {
  color: var(--c-red);
}

.step-report__step--failed-continued .fa-solid,
.step-report__step--failed-continued .step-report__reason {
  color: var(--c-orange);
}

.step-report__step--not-run {
  color: var(--c-dark-grey);
}

/* ---------- Q & A ---------- */

.qa-list details {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
}

.qa-list summary {
  cursor: pointer;
  font-weight: 600;
}

.qa-list p {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--c-dark-grey);
  line-height: 1.5;
}

/* ---------- Standard popup/notification system ---------- */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.popup-overlay[hidden] {
  display: none;
}

.popup {
  background: var(--c-white);
  color: var(--c-black);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.popup__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.popup__header i {
  font-size: 1.2rem;
}

.popup--info .popup__header i {
  color: var(--c-dark-grey);
}

.popup--warning .popup__header i {
  color: var(--c-orange);
}

.popup--error .popup__header i {
  color: var(--c-red);
}

.popup__body {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

.popup__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.fix-code-modal {
  max-width: 760px;
}

.fix-code-progress-desc {
  margin: 0 0 0.75rem;
  color: var(--c-black);
}

.fix-code-progress-spinner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-dark-grey);
}

.fix-code-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--c-red);
}

/* Create Report modal (shares the .fix-code-* progress/error chrome). */
.findings-report-ready {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--c-green);
  margin: 0 0 0.5rem;
}

.findings-report-hint {
  margin: 0;
  color: var(--c-dark-grey);
  font-size: 0.9rem;
}

.fix-code-kind-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}

.fix-code-kind-banner--internal {
  background: rgba(26, 138, 63, 0.08);
  border: 1px solid var(--c-green);
  color: var(--c-green);
}

.fix-code-kind-banner--external {
  background: rgba(26, 138, 63, 0.08);
  border: 1px solid var(--c-green);
  color: var(--c-green);
}

/* The internal fix prompt used to render as raw Markdown on a dark terminal
   background, which was hard to read. It's now rendered to formatted HTML via
   Markdown.render() (headings, lists, code blocks) in a white card -- the raw
   Markdown is still what Copy/Save hand back, so it pastes cleanly into an AI
   assistant. Shares the .md-content typography with the AI Insights chat. */
.fix-code-output {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 1rem;
  border: 1px solid var(--c-light-grey);
  border-radius: 6px;
  max-height: 55vh;
  overflow: auto;
}

/* Renders the actual buildExternalEmailHtml() markup as a WYSIWYG preview of
   what gets pasted into an email client -- white background rather than the
   dark .fix-code-output terminal look, since that's what it'll look like
   once pasted. */
.fix-code-email-preview {
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 6px;
  padding: 1rem;
  max-height: 55vh;
  overflow: auto;
}

.savings-report-modal {
  max-width: 780px;
}

.invite-email-modal {
  max-width: 680px;
}

.invite-email-intro {
  margin: 0 0 0.75rem;
  color: var(--c-dark-grey);
}

/* WYSIWYG preview of the invitation email exactly as it lands in the
   recipient's inbox -- white card, same rationale as .fix-code-email-preview.
   The email's own inline styles handle its internal typography/colours. */
.invite-email-preview {
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 6px;
  padding: 1rem;
  max-height: 55vh;
  overflow: auto;
}

.savings-report-context {
  margin: 0 0 0.75rem;
  color: var(--c-dark-grey);
}

.savings-report-tier-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.savings-report-tier-btn.is-active {
  background: var(--c-red);
  color: var(--c-white);
}

.savings-report-tier-auto {
  font-weight: 400;
  opacity: 0.8;
}

.savings-report-tier-note {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--c-dark-grey);
}

.savings-report-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.savings-report-table th,
.savings-report-table td {
  border: 1px solid var(--c-light-grey);
  padding: 0.5rem 0.6rem;
  text-align: left;
}

.savings-report-table th {
  background: #f0f0f0;
}

/* Colour-code the comparison columns by background only -- manual effort red,
   LogWizard green -- keeping the heading text black. */
.savings-report-table th.savings-report-col--manual {
  background: rgba(230, 0, 0, 0.12);
}

.savings-report-table th.savings-report-col--lw {
  background: rgba(26, 138, 63, 0.12);
}

.savings-report-table td:not(:first-child) {
  text-align: right;
}

.savings-report-table__total td {
  font-weight: 700;
}

.savings-report-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(26, 138, 63, 0.08);
  border: 1px solid var(--c-green);
  color: var(--c-green);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.savings-report-assumptions ul {
  margin: 0.5rem 0 0;
  padding-left: 1.4rem;
}

.savings-report-assumptions li {
  margin-bottom: 0.4rem;
}

/* The Manual vs. LogWizard halves of each phase rationale, each on its own
   row: manual in red, LogWizard in green, with a bold lead-in label. */
.savings-report-rationale__manual,
.savings-report-rationale__lw {
  margin-top: 0.2rem;
}

.savings-report-rationale__manual {
  color: var(--c-red);
}

.savings-report-rationale__lw {
  color: var(--c-green);
}

.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 90%;
  max-width: 420px;
  pointer-events: none;
}

.toast-container .toast {
  pointer-events: auto;
}

.toast {
  background: var(--c-dark-grey);
  color: var(--c-white);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  border-left: 4px solid var(--c-light-grey);
}

.toast--info {
  border-left-color: var(--c-light-grey);
}

.toast--warning {
  border-left-color: var(--c-orange);
}

.toast--error {
  border-left-color: var(--c-red);
}

.toast i.toast__icon {
  margin-top: 0.1rem;
}

.toast--info .toast__icon {
  color: var(--c-light-grey);
}

.toast--warning .toast__icon {
  color: var(--c-orange);
}

.toast--error .toast__icon {
  color: var(--c-red);
}

.toast__message {
  flex: 1;
}

.toast__close,
.toast__lock {
  background: none;
  border: none;
  color: var(--c-white);
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
}

.toast__close:hover,
.toast__lock:hover {
  background: none;
  color: var(--c-light-grey);
}

.toast--locked .toast__lock {
  color: var(--c-blue);
}

/* ---------- System Settings ---------- */

.settings-block {
  margin-bottom: 2.5rem;
}

.settings-block:last-child {
  margin-bottom: 0;
}

.settings-block + .settings-block {
  padding-top: 2rem;
  border-top: 1px solid var(--c-light-grey);
}

/* System Settings heading shown above each of the two wizards (tenant
   configuration, application configuration) -- see .settings-wizard below. */
.settings-section-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 1rem;
  color: var(--c-dark-grey);
}

.settings-section-title:first-of-type {
  margin-top: 0.5rem;
}

/* System Settings wizard: a left step-rail + a single content pane that shows
   one step at a time. There are two independent instances on the page --
   #settings-tenant-wizard (tenant-level config: application limits, AI
   service, add tenant, add application) and #settings-app-wizard
   (per-application config: verify credentials, integrations, CloudWatch,
   X-Ray, RUM) -- each with its own rail/pane/forward-chevron, wired up
   independently in systemSettings.js's createStepWizard(). The rail doubles
   as a status overview (per-integration dots on the app wizard); the pane
   advances via a small forward chevron pinned top-right. */
.settings-wizard {
  display: grid;
  grid-template-columns: 250px 1fr;
  border: 1px solid var(--c-light-grey);
  border-radius: 12px;
  overflow: hidden;
}

.settings-rail {
  background: #fafafa;
  border-right: 1px solid var(--c-light-grey);
  padding: 0.5rem 0;
}

/* Rail entries are <button>s, not the site's red action buttons -- reset the
   base button styling back to a flat, left-aligned nav row. */
.settings-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--c-black);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-step:hover {
  background: #f0f0f0;
}

.settings-step.is-active {
  background: var(--c-white);
  border-left-color: var(--c-red);
  font-weight: 700;
}

.settings-step > i:first-child {
  width: 1.2rem;
  text-align: center;
  color: var(--c-dark-grey);
}

.settings-step.is-active > i:first-child {
  color: var(--c-red);
}

.settings-step__label {
  flex: 1;
}

.settings-step__dot {
  font-size: 0.7rem;
}

.settings-step__dot--on {
  color: var(--c-green);
}

.settings-step__dot--off {
  color: var(--c-light-grey);
}

.settings-rail__legend {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem 0.25rem;
  border-top: 1px solid var(--c-light-grey);
  font-size: 0.72rem;
  color: var(--c-dark-grey);
}

.settings-pane {
  position: relative;
  padding: 1.5rem;
}

.settings-pane__body {
  display: none;
}

.settings-pane__body.is-active {
  display: block;
}

/* Small, unobtrusive light-grey forward affordance, top-right of the pane. */
.settings-fwd {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  background: #f5f5f5;
  color: var(--c-dark-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
}

.settings-fwd:hover {
  background: #ececec;
  color: var(--c-black);
}

@media (max-width: 760px) {
  .settings-wizard {
    grid-template-columns: 1fr;
  }
  .settings-rail {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--c-light-grey);
    padding: 0.25rem;
  }
  .settings-step {
    width: auto;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .settings-step.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--c-red);
  }
  .settings-rail__legend {
    display: none;
  }
}

/* Required/optional marker shown beside a settings panel's heading, so a
   human editing config/apps.yaml can see at a glance which fields they must
   set versus which they can skip. Colours stay within the 6-colour chrome
   palette: red = required, orange = conditionally required, grey = optional. */
.settings-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--c-white);
}

.settings-badge--required {
  background: var(--c-red);
}

.settings-badge--conditional {
  background: var(--c-orange);
}

.settings-badge--optional {
  background: var(--c-white);
  color: var(--c-dark-grey);
  border: 1px solid var(--c-light-grey);
}

.settings-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* Full-width, zero-height spacer that forces the flex row to wrap here, so the
   controls after it start on their own line. */
.settings-toggles__break {
  flex-basis: 100%;
  height: 0;
}

.tenant-admin-app-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0.75rem;
}

.tenant-admin-app-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 400;
}

.tenant-admin-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tenant-admin-user {
  border: 1px solid var(--c-light-grey);
  border-radius: 10px;
  padding: 1rem;
}

.tenant-admin-user__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

/* Wrapper that lets one row's chips be redrawn after "Save access"; it adds
   no box of its own, so the chips keep the row's spacing. */
.tenant-admin-user__row [data-role="chips"] {
  display: contents;
}

button.button--toggle-on {
  background: var(--c-green);
}

button.button--toggle-on:hover {
  background: var(--c-green-dark);
}

button.button--toggle-off {
  background: var(--c-dark-grey);
}

button.button--toggle-off:hover {
  background: #3a3a3a;
}

button.button--toggle-on:disabled,
button.button--toggle-off:disabled {
  background: var(--c-light-grey);
  color: var(--c-dark-grey);
}

/* Test Mode: the switch + its status sit inline, to the left of the user
   email, on the header's second row. */
.vc-header__info-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Small, pill-shaped switch sized to match the status text beside it. Red
   when on (doubling as the "test mode active" warning colour), grey when off. */
.test-mode-switch {
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.test-mode-switch--on {
  background: var(--c-red);
}

.test-mode-switch--on:hover {
  background: var(--c-red-dark);
}

.test-mode-switch--off {
  background: var(--c-dark-grey);
}

.test-mode-switch--off:hover {
  background: #3a3a3a;
}

/* Test Mode: session-start status line under the header switch. Matches the
   small uppercase style of the account/user lines it sits beside. */
.vc-header__test-mode-status {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.vc-header__test-mode-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
  flex: 0 0 auto;
}

/* Red warning dot placed next to a date selector while Test Mode is on. */
.test-mode-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: var(--c-red);
  vertical-align: middle;
}

.settings-banner {
  background: #fdead3;
  border-left: 4px solid var(--c-orange);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.settings-yaml-preview {
  width: 100%;
  min-height: 100px;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.8rem;
  resize: vertical;
}

.log-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.log-group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

/* Per-row selection checkbox for the discovery panels' "Save selected"
   actions. Sits at the left of the row, ahead of __main. */
.log-group-row__select {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--c-red);
  cursor: pointer;
}

.log-group-row__main {
  flex: 1;
  min-width: 0;
}

.log-group-row__name {
  font-weight: 600;
  color: var(--c-black);
  word-break: break-word;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.85rem;
}

.log-group-row__stats {
  font-size: 0.8rem;
  color: var(--c-dark-grey);
  margin-top: 0.25rem;
}

.log-group-row__badges {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.log-group-row__badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.log-group-row__badge--in-config {
  background: #e6f7ec;
  color: var(--c-green-dark);
}

.log-group-row__badge--journey {
  background: var(--c-light-grey);
  color: var(--c-black);
}

.log-group-row__badge--not-in-config {
  background: #fdead3;
  color: var(--c-orange);
}

/* High-ingest warning: filled orange (the palette's warning colour) with white
   text so it reads as a stronger caution than the pale "Not in config" badge.
   Advisory mark -- see renderRow() in systemSettings.js. */
.log-group-row__badge--high-volume {
  background: var(--c-orange);
  color: var(--c-white);
}

.log-group-row__badge--high-volume .fa-triangle-exclamation {
  margin-right: 0.25rem;
}

/* Configured but absent from AWS -- breaks the query batches it's in. */
.log-group-row__badge--missing {
  background: var(--c-red);
  color: var(--c-white);
}

.log-group-row__badge--missing .fa-circle-exclamation {
  margin-right: 0.25rem;
}

.log-group-row__copy-btn {
  background: none;
  border: none;
  color: var(--c-dark-grey);
  cursor: pointer;
  font-size: 1.1rem;
  flex: 0 0 auto;
  padding: 0.25rem;
}

.log-group-row__copy-btn:hover {
  color: var(--c-black);
  background: none;
}

.settings-suggested-journeys {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #ddd;
}

.journey-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.journey-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.journey-card__main {
  flex: 1;
  min-width: 0;
}

.journey-card__name {
  font-weight: 700;
  color: var(--c-black);
}

.journey-card__count {
  font-size: 0.8rem;
  color: var(--c-dark-grey);
  margin: 0.15rem 0 0.4rem;
}

.journey-card__loggroups {
  margin: 0;
  padding-left: 1.1rem;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--c-dark-grey);
}

.journey-card__copy-btn {
  background: none;
  border: none;
  color: var(--c-dark-grey);
  cursor: pointer;
  font-size: 1.1rem;
  flex: 0 0 auto;
  padding: 0.25rem;
}

.journey-card__copy-btn:hover {
  color: var(--c-black);
  background: none;
}

/* ---------- User Settings ---------- */

.user-settings-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-settings-card {
  border: 1px solid var(--c-light-grey);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

.user-settings-card h3 {
  margin: 0 0 0.75rem;
  color: var(--c-black);
}

.user-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.user-settings-row label {
  flex: 0 0 auto;
  min-width: 140px;
  font-weight: 600;
  color: var(--c-black);
  font-size: 0.85rem;
}

.user-settings-row input[type='text'] {
  flex: 1 1 220px;
  min-width: 0;
}

.user-settings-row button {
  flex: 0 0 130px;
  justify-content: center;
}

#user-settings-limits .user-settings-row label {
  min-width: 200px;
}

#user-settings-limits input[type='number'] {
  flex: 0 0 110px;
}

#user-settings-limits .user-settings-row button {
  flex: 0 0 auto;
}

.user-settings-card .search-hint {
  margin: 0 0 1rem;
}

.user-settings-card .user-settings-status {
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--c-dark-grey);
  margin-bottom: 0.5rem;
}

/* PC-folder row + browser notice (public/js/userSettings.js) */

.user-settings-card .user-settings-notice {
  border-left: 4px solid var(--c-orange);
  background: var(--c-white);
  padding: 0.4rem 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--c-black);
}

.user-settings-value {
  flex: 1 1 220px;
  font-size: 0.85rem;
  color: var(--c-dark-grey);
  overflow-wrap: anywhere;
}

.settings-source__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---------- Service Map (X-Ray topology diagram) ---------- */

/* Legend dots in the panel hint. Same 4 health states as the nodes, drawn as
   small filled circles that inherit the exact node colours below. */
.service-map-legend__dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 0.15rem;
}
.service-map-legend__dot--red {
  background: var(--c-red);
}
.service-map-legend__dot--orange {
  background: var(--c-orange);
}
.service-map-legend__dot--green {
  background: var(--c-green);
}
.service-map-legend__dot--unknown {
  background: var(--c-light-grey);
}

/* The diagram can be wider/taller than the viewport (many branching services),
   so the canvas scrolls in both directions rather than squashing the layout. */
.service-map-viewport {
  position: relative;
  margin-top: 1rem;
}
.service-map-canvas {
  overflow: auto;
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  background: var(--c-white);
  max-height: 75vh;
}

/* Full-screen / minimise toggle (icon-only, per the design rule's icon-only
   exception). Black on white for the in-page expand button that floats over
   the canvas; a lighter on-dark variant for the button in the full-screen
   bar. */
.service-map-toggle-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--c-black);
  color: var(--c-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.service-map-toggle-btn:hover {
  background: var(--c-dark-grey);
}
.service-map-viewport .service-map-toggle-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.service-map-toggle-btn--on-dark {
  background: transparent;
}
.service-map-toggle-btn--on-dark:hover {
  background: var(--c-dark-grey);
}

/* Full-screen overlay: above the header (z 50), below popups (z 200) so the
   trace drill-down opens on top when a node is clicked here. */
.service-map-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
}
.service-map-fullscreen[hidden] {
  display: none;
}
.service-map-fullscreen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  background: var(--c-black);
  color: var(--c-white);
  flex: 0 0 auto;
}
.service-map-fullscreen__title {
  font-weight: 700;
  font-size: 1rem;
}
.service-map-fullscreen__title i {
  margin-right: 0.45rem;
}
.service-map-fullscreen__body {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--c-white);
}
/* Stop the page behind the full-screen overlay from scrolling. */
body.service-map-fs-lock {
  overflow: hidden;
}

/* Positioning context for the absolutely-placed node cards and the SVG edge
   layer; its explicit px width/height are set inline by serviceMap.js from the
   computed layout so the scroll area matches the actual diagram bounds. */
.service-map-graph {
  position: relative;
}

/* Edges sit behind the node cards. pointer-events:none on the <svg> lets node
   hovers/tooltips work; each <path> re-enables its own pointer-events so edge
   tooltips still fire. */
.service-map-edges {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.service-map-edge {
  fill: none;
  stroke-width: 1.25;
  pointer-events: stroke;
}
/* Connectors are hidden by default -- only the selected node's route is shown
   (see serviceMap.js applyEdgeVisibility). */
.service-map-edge.is-hidden {
  display: none;
}
.service-map-edge--red {
  stroke: var(--c-red);
}
.service-map-edge--orange {
  stroke: var(--c-orange);
}
.service-map-edge--green {
  stroke: var(--c-green);
}
.service-map-edge--unknown {
  stroke: var(--c-light-grey);
}

.service-map-arrow--red {
  fill: var(--c-red);
}
.service-map-arrow--orange {
  fill: var(--c-orange);
}
.service-map-arrow--green {
  fill: var(--c-green);
}
.service-map-arrow--unknown {
  fill: var(--c-light-grey);
}

.service-map-node {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-left-width: 4px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
/* Clickable affordance -- nodes open the trace drill-down on click. */
.service-map-node:hover,
.service-map-node:focus-visible {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
  outline: none;
}
/* Health drives the left border + the icon disc colour (glyph stays white). */
.service-map-node--red {
  border-left-color: var(--c-red);
}
.service-map-node--orange {
  border-left-color: var(--c-orange);
}
.service-map-node--green {
  border-left-color: var(--c-green);
}
.service-map-node--unknown {
  border-left-color: var(--c-light-grey);
}
/* The node whose route is currently revealed by a single click. */
.service-map-node.is-selected {
  box-shadow: 0 0 0 2px var(--c-black), 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Per-type node backgrounds (trial). Only Lambda is tinted for now -- light
   grey -- to see whether type-coloured panels read better than health-only. */
.service-map-node--type-lambda {
  background: var(--c-light-grey);
}

/* Top-right drill-down link: opens this service's errors in Search Logs. Dark
   circular icon that turns red on hover. Lambda nodes scope to their own log
   group; other types open an app-wide errors search (see serviceMap.js). */
.service-map-node__logs {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  background: var(--c-dark-grey);
  color: var(--c-white);
  font-size: 0.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.service-map-node__logs:hover,
.service-map-node__logs:focus-visible {
  background: var(--c-red);
}

/* Second top-right control, only on unhealthy nodes: opens the "related errors"
   popup (serviceErrors.js). Sits just below the logs link; same circular
   affordance, distinguished by its warning glyph and red fill (an alert badge,
   like the red node icons), dark-grey on hover for feedback. */
.service-map-node__errors {
  position: absolute;
  top: 18px;
  right: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  background: var(--c-red);
  color: var(--c-white);
  font-size: 0.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.service-map-node__errors:hover,
.service-map-node__errors:focus-visible {
  background: var(--c-dark-grey);
}

/* --- "Related errors" popup (serviceErrors.js) ------------------------- */
.service-errors-modal {
  max-width: 760px;
  width: 92vw;
}
.service-errors__subtitle {
  margin: 0 0 0.5rem;
  color: var(--c-dark-grey);
  font-size: 0.85rem;
}
.service-errors__list {
  margin-top: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.service-errors__item {
  border: 1px solid var(--c-light-grey);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}
.service-errors__item--red {
  border-left-color: var(--c-red);
}
.service-errors__item--orange {
  border-left-color: var(--c-orange);
}
.service-errors__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.service-errors__badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  color: var(--c-white);
}
.service-errors__badge--red {
  background: var(--c-red);
}
.service-errors__badge--orange {
  background: var(--c-orange);
}
.service-errors__count {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--c-dark-grey);
  font-size: 0.8rem;
}
.service-errors__sig {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.85rem;
  word-break: break-word;
}
.service-errors__section {
  margin-top: 0.5rem;
}
.service-errors__section--muted {
  color: var(--c-dark-grey);
  font-size: 0.8rem;
}
.service-errors__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-dark-grey);
  margin-bottom: 0.2rem;
}
.service-errors__endpoints,
.service-errors__exceptions {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.service-errors__endpoints code {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.service-errors__http {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--c-dark-grey);
}
.service-errors__exceptions li {
  font-size: 0.8rem;
  word-break: break-word;
}
.service-errors__meta {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--c-dark-grey);
}
.service-errors__trace {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--c-dark-grey);
}
.service-errors__trace code {
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}
/* Per-error "AI Analysis" button: red (inherits the base button colour), just
   smaller/tighter than a full-size button. Hands one error to AI Insights. The
   node-wide "Let's ask AI" button in the footer is black -- a different action
   (analyse ALL the errors together), so a different colour. */
.service-errors__ai-btn {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
}

/* ---- Node-wide "Let's ask AI" analysis panel (serviceErrors.js) ----
   Mirrors the trace-drill AI panel: collapsed, the popup shows only the grouped
   error list; when the analysis is revealed the popup widens (.is-expanded) and
   the body becomes two columns -- errors on the left, the AI read on the right. */
.service-errors__ask-ai {
  margin-right: auto; /* push the CTA to the left, Close stays on the right */
  background: var(--c-black);
  color: var(--c-white);
}
.service-errors__ask-ai:hover,
.service-errors__ask-ai:focus-visible {
  background: var(--c-dark-grey);
}
.service-errors__cols {
  margin-top: 0.5rem;
}
.service-errors-modal.is-expanded {
  max-width: 1180px;
  width: 96vw;
}
.service-errors-modal.is-expanded .service-errors__cols {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.service-errors-modal.is-expanded .service-errors__list {
  flex: 1 1 50%;
  min-width: 0;
  margin-top: 0;
}
.service-errors__ai {
  flex: 1 1 50%;
  min-width: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding-left: 1rem;
  border-left: 1px solid var(--c-light-grey);
}
.service-errors__ai-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-black);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.service-errors__ai-sev {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  color: var(--c-white);
}
.service-errors__ai-sev--red {
  background: var(--c-red);
}
.service-errors__ai-sev--orange {
  background: var(--c-orange);
}
.service-errors__ai-sev--green {
  background: var(--c-green);
}
.service-errors__ai-q {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-dark-grey);
}
.service-errors__ai-a {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-black);
}
.service-errors__ai-a p {
  margin: 0 0 0.4rem;
}
.service-errors__ai-list {
  margin: 0;
  padding-left: 1.1rem;
}
.service-errors__ai-list li {
  margin-bottom: 0.3rem;
}
.service-errors__ai-loading,
.service-errors__ai-empty {
  margin: 0.3rem 0;
  font-size: 0.82rem;
  color: var(--c-dark-grey);
}

.service-map-node__icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-dark-grey);
}
.service-map-node--red .service-map-node__icon {
  background: var(--c-red);
}
.service-map-node--orange .service-map-node__icon {
  background: var(--c-orange);
}
.service-map-node--green .service-map-node__icon {
  background: var(--c-green);
}

.service-map-node__glyph {
  width: 20px;
  height: 20px;
  background-color: var(--c-white);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.service-map-node__body {
  min-width: 0;
  flex: 1;
}
.service-map-node__name {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  /* Wrap the (prefix-stripped) name to at most two lines, then ellipsis, so a
     still-long name doesn't blow out the node height. Full name is in the
     tooltip and the drill-down title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.service-map-node__type {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-dark-grey);
  margin-top: 0.12rem;
}
.service-map-node__meta {
  font-size: 0.7rem;
  color: var(--c-dark-grey);
  margin-top: 0.1rem;
}

/* Small flag pinned to a root (trace entry-point) node. */
.service-map-node__root {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  background: var(--c-dark-grey);
  color: var(--c-white);
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Service Map trace drill-down popup (traceDrill.js) ---- */
.trace-drill-modal {
  max-width: 820px;
  width: 92vw;
}
.trace-drill__subtitle {
  margin: 0 0 0.5rem;
  color: var(--c-dark-grey);
  font-size: 0.85rem;
}
.trace-drill__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.trace-drill__toggle input {
  accent-color: var(--c-red);
}
.trace-drill__list {
  margin-top: 0.5rem;
  max-height: 55vh;
  overflow-y: auto;
}
.trace-drill__trace {
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  overflow: hidden;
}
.trace-drill__trace-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: var(--c-white);
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font-size: 0.82rem;
}
.trace-drill__trace-head:hover {
  background: #f5f5f5;
}
.trace-drill__chevron {
  color: var(--c-dark-grey);
  transition: transform 0.12s ease;
  flex: 0 0 auto;
}
.trace-drill__trace-head.is-open .trace-drill__chevron {
  transform: rotate(90deg);
}
.trace-drill__trace-time {
  color: var(--c-dark-grey);
  white-space: nowrap;
  flex: 0 0 auto;
}
.trace-drill__trace-msg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-drill__trace-id {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--c-dark-grey);
  padding: 0 0.6rem 0.4rem 2rem;
  overflow-wrap: anywhere;
}
.trace-drill__trace-detail {
  border-top: 1px solid var(--c-light-grey);
  padding: 0.5rem 0.6rem;
  background: #fafafa;
}
.trace-drill__seg-total {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  color: var(--c-dark-grey);
}
.trace-drill__seg {
  padding: 0.25rem 0.4rem;
  border-left: 2px solid var(--c-light-grey);
  margin-bottom: 0.15rem;
}
.trace-drill__seg-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.trace-drill__seg-name {
  font-weight: 600;
}
.trace-drill__seg-meta {
  color: var(--c-dark-grey);
  font-size: 0.72rem;
}
.trace-drill__exceptions {
  margin-top: 0.2rem;
}
.trace-drill__exception {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--c-red);
  padding: 0.15rem 0;
  word-break: break-word;
}
.trace-drill__badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  color: var(--c-white);
}
.trace-drill__badge--red {
  background: var(--c-red);
}
.trace-drill__badge--orange {
  background: var(--c-orange);
}
.trace-drill__badge--green {
  background: var(--c-green);
}
.trace-drill__loading,
.trace-drill__empty {
  margin: 0.3rem 0;
  font-size: 0.8rem;
  color: var(--c-dark-grey);
}

/* ---- "Let's ask AI" trace explanation panel (traceDrill.js) ----
   Collapsed, the popup shows only the segment list. When the AI panel is
   revealed the popup widens (.is-expanded) and the body becomes two columns:
   segments on the left, the plain-English explanation on the right. */
.trace-drill-modal.is-expanded {
  max-width: 1180px;
  width: 96vw;
}
.trace-drill__cols {
  margin-top: 0.5rem;
}
.trace-drill-modal.is-expanded .trace-drill__cols {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.trace-drill-modal.is-expanded .trace-drill__list {
  flex: 1 1 50%;
  min-width: 0;
  margin-top: 0;
}
.trace-drill__ai {
  flex: 1 1 50%;
  min-width: 0;
  max-height: 55vh;
  overflow-y: auto;
  padding-left: 1rem;
  border-left: 1px solid var(--c-light-grey);
}
.trace-drill__ai-btn {
  margin-right: auto; /* push the CTA to the left, Close stays on the right */
  background: var(--c-black);
}
.trace-drill__ai-btn:hover {
  background: var(--c-dark-grey);
}
.trace-drill__ai-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-black);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.trace-drill__ai-sev {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  color: var(--c-white);
}
.trace-drill__ai-sev--red {
  background: var(--c-red);
}
.trace-drill__ai-sev--orange {
  background: var(--c-orange);
}
.trace-drill__ai-sev--green {
  background: var(--c-green);
}
.trace-drill__ai-q {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-dark-grey);
}
.trace-drill__ai-a {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-black);
}
.trace-drill__ai-a p {
  margin: 0 0 0.4rem;
}
.trace-drill__ai-seglist {
  margin: 0;
  padding-left: 1.1rem;
}
.trace-drill__ai-seglist li {
  margin-bottom: 0.3rem;
}
.trace-drill__ai-loading,
.trace-drill__ai-empty {
  margin: 0.3rem 0;
  font-size: 0.82rem;
  color: var(--c-dark-grey);
}

/* ---- Reusable "Let's ask AI" slide-in panel (askAiPanel.js) ---- */

/* Section header row: title on the left, the "Let's ask AI" trigger pinned
   right (Quick Search is the first consumer). */
.panel__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.panel__header-row h2 {
  margin: 0;
}

/* Black CTA (hover dark-grey), matching the .trace-drill__ai-btn precedent
   (inherits the base button rule for radius/padding/icon). */
.ask-ai-btn {
  background: var(--c-black);
  color: var(--c-white);
}
.ask-ai-btn:hover {
  background: var(--c-dark-grey);
}
.ask-ai-btn:disabled {
  background: var(--c-light-grey);
  color: var(--c-dark-grey);
  cursor: not-allowed;
}

/* Backdrop sits above the header (50) but below popups (200) so a confirm
   dialog could still layer over the panel. */
.ask-ai-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  z-index: 170;
}
.ask-ai-backdrop[hidden] {
  display: none;
}

.ask-ai-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: clamp(320px, 32vw, 480px);
  max-width: 100vw;
  background: var(--c-white);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
  z-index: 180;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.ask-ai-panel.is-open {
  transform: translateX(0);
}

.ask-ai-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--c-red);
  color: var(--c-white);
}
.ask-ai-panel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
}
.ask-ai-panel__close {
  background: transparent;
  color: var(--c-white);
  border: none;
  padding: 0.2rem 0.4rem;
  min-width: 0;
  cursor: pointer;
}
.ask-ai-panel__close:hover {
  background: var(--c-red-dark);
}

.ask-ai-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1.2rem 1.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.ask-ai-panel__heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.ask-ai-panel__q {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-dark-grey);
}
.ask-ai-panel__a {
  color: var(--c-black);
}
.ask-ai-panel__a ul,
.ask-ai-panel__a ol {
  margin: 0;
  padding-left: 1.2rem;
}
.ask-ai-panel__a li {
  margin-bottom: 0.3rem;
}
.ask-ai-panel__empty,
.ask-ai-panel__loading {
  margin: 0.3rem 0;
  color: var(--c-dark-grey);
}
.ask-ai-panel__error {
  margin: 0.3rem 0;
  color: var(--c-red);
}

/* Severity chip: red for critical/high, orange medium, green low/none. */
.ask-ai-sev {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  color: var(--c-white);
}
.ask-ai-sev--red {
  background: var(--c-red);
}
.ask-ai-sev--orange {
  background: var(--c-orange);
}
.ask-ai-sev--green {
  background: var(--c-green);
}

/* On a narrow viewport the panel takes the full width. */
@media (max-width: 600px) {
  .ask-ai-panel {
    width: 100vw;
  }
}

/* On a narrow viewport the two columns would be too cramped side by side, so
   stack them: segments first, explanation beneath. */
@media (max-width: 760px) {
  .trace-drill-modal.is-expanded .trace-drill__cols {
    flex-direction: column;
  }
  .trace-drill__ai {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--c-light-grey);
    padding-top: 0.75rem;
  }
  .service-errors-modal.is-expanded .service-errors__cols {
    flex-direction: column;
  }
  .service-errors__ai {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--c-light-grey);
    padding-top: 0.75rem;
  }
}

/* User Journeys tab -- one card per correlation value (session/msisdn/etc.),
   each holding its chronological trace steps. */
.journeys-errors-only {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.journeys-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.journey-card {
  border: 1px solid var(--c-light-grey);
  border-left: 4px solid var(--c-light-grey);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-white);
}
.journey-card--has-error {
  border-left-color: var(--c-red);
}
.journey-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--c-light-grey);
}
.journey-card__value {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.journey-card__key {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: var(--c-dark-grey);
  color: var(--c-white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.journey-card__meta {
  font-size: 0.78rem;
  color: var(--c-dark-grey);
}
.journey-card__errors {
  color: var(--c-red);
  font-weight: 700;
}
.journey-card__ok {
  color: var(--c-green);
  font-weight: 700;
}
.journey-card__steps {
  display: flex;
  flex-direction: column;
}
.journey-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--c-light-grey);
  border-radius: 0;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.journey-step:first-child {
  border-top: none;
}
.journey-step:hover,
.journey-step:focus-visible {
  background: var(--c-light-grey);
}
.journey-step__badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  color: var(--c-white);
}
.journey-step__badge--red {
  background: var(--c-red);
}
.journey-step__badge--orange {
  background: var(--c-orange);
}
.journey-step__badge--green {
  background: var(--c-green);
}
.journey-step__time {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--c-dark-grey);
}
.journey-step__msg {
  flex: 1 1 auto;
  font-size: 0.82rem;
  word-break: break-word;
}
.journey-step__go {
  flex: 0 0 auto;
  color: var(--c-dark-grey);
  font-size: 0.75rem;
}

/* ---------- First-time setup (public/js/setupRequired.js) ---------- */
body.is-setup-required .vc-main > section,
body.is-setup-required .vc-header__controls,
body.is-setup-required #nav-toggle,
body.is-setup-required #nav-drawer,
body.is-setup-required .vc-header__info-row {
  display: none !important;
}

.setup-required {
  max-width: 820px;
  margin: 2rem auto;
  border-left: 4px solid var(--c-orange);
}

.setup-required__steps li {
  margin-bottom: 0.9rem;
}

.setup-required__cmd {
  background: var(--c-black);
  color: var(--c-white);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.setup-required__foot {
  color: var(--c-dark-grey);
  font-size: 0.9rem;
}

/* ---------- System Settings > Tenant access (super only) ---------- */

.tenant-access__chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-white);
}

.tenant-access__chip--green { background: var(--c-green); }
.tenant-access__chip--red { background: var(--c-red); }

.tenant-access__reason {
  min-width: 200px;
  margin-right: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
}

.tenant-access__enable {
  background: var(--c-green);
}

.tenant-access__enable:hover {
  background: var(--c-green-dark);
}