:root {
  --alert-critical: #b42318;
  --alert-critical-surface: #fff3f2;
  --alert-warning: #9a6700;
  --alert-warning-surface: #fff8e6;
  --alert-healthy: #067647;
  --alert-healthy-surface: #ecfdf3;
}

.navigation-utilities {
  display: grid;
  gap: 2px;
}

.summary-card.visual-alert-card {
  border-left: 4px solid currentColor;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(12, 61, 57, 0.06);
}

.summary-card.visual-alert-card::after {
  right: 16px;
  bottom: 15px;
  width: 28px;
  height: 3px;
  background: currentColor;
  opacity: 0.78;
}

.summary-card.visual-alert-critical {
  color: var(--alert-critical);
  background: var(--alert-critical-surface);
}

.summary-card.visual-alert-warning {
  color: var(--alert-warning);
  background: var(--alert-warning-surface);
}

.summary-card.visual-alert-healthy {
  color: var(--alert-healthy);
  background: var(--alert-healthy-surface);
}

.summary-card.visual-alert-card > span:not(.visual-alert-badge),
.summary-card.visual-alert-card > small {
  color: #52615d;
}

.summary-card.visual-alert-card > strong {
  color: #15201d;
}

.visual-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 2px;
  color: currentColor;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.visual-alert-badge i,
.alert-legend-item > i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.alert-settings-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 28px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.alert-settings-intro h2 {
  margin: 4px 0 8px;
  font-size: 24px;
}

.alert-settings-intro p:not(.eyebrow) {
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.55;
}

.alert-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.alert-legend-item {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  border-left: 3px solid currentColor;
  border-radius: 6px;
}

.alert-legend-item.visual-alert-healthy {
  color: var(--alert-healthy);
  background: var(--alert-healthy-surface);
}

.alert-legend-item.visual-alert-warning {
  color: var(--alert-warning);
  background: var(--alert-warning-surface);
}

.alert-legend-item.visual-alert-critical {
  color: var(--alert-critical);
  background: var(--alert-critical-surface);
}

.alert-legend-item span {
  display: grid;
  gap: 3px;
}

.alert-legend-item small {
  color: #52615d;
  font-size: 10px;
  line-height: 1.25;
}

.alert-settings-form {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.alert-rule-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.alert-rule-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: #f3f8f7;
}

.alert-rule-group-heading h3 {
  font-size: 17px;
}

.alert-rule-group-heading span {
  color: var(--muted);
  font-size: 12px;
}

.alert-rule-list {
  display: grid;
}

.alert-rule-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.32fr) minmax(150px, 0.32fr);
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #e4ecea;
}

.alert-rule-row:last-child {
  border-bottom: 0;
}

.alert-rule-row > label:not(.alert-rule-toggle) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  color: #52615d;
  font-size: 11px;
  font-weight: 700;
}

.alert-rule-row input[type="number"] {
  grid-column: 1 / -1;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.alert-rule-toggle {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.alert-rule-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--teal);
}

.alert-rule-toggle span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.alert-rule-toggle strong {
  font-size: 14px;
}

.alert-rule-toggle small,
.alert-input-unit {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.alert-rule-context {
  display: inline-block;
  margin-right: 7px;
  padding-right: 7px;
  border-right: 1px solid #c7d5d2;
  color: var(--teal-dark);
  font-weight: 750;
}

.alert-settings-actions {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 101, 106, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(12, 61, 57, 0.12);
  backdrop-filter: blur(12px);
}

.alert-settings-actions p {
  color: var(--muted);
  font-size: 12px;
}

.alert-settings-actions > div {
  display: flex;
  gap: 8px;
}

@media (max-width: 980px) {
  .navigation-utilities {
    display: contents;
  }

  .alert-settings-intro {
    grid-template-columns: 1fr;
  }

  .alert-rule-row {
    grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.4fr) minmax(130px, 0.4fr);
  }
}

@media (max-width: 640px) {
  .alert-settings-intro {
    padding: 18px;
  }

  .alert-legend {
    grid-template-columns: 1fr;
  }

  .alert-rule-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .alert-rule-toggle {
    grid-column: 1 / -1;
  }

  .alert-settings-actions {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .alert-settings-actions > div {
    display: grid;
    grid-template-columns: 1fr;
  }
}