@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

// PageShell 已接管：min-height, background, safe-bottom
// ContentCard 已接管：alert-card 背景/圆角/阴影

.alerts-tabs {
  display: flex;
  background: $card;
  padding: 20px 16px;
  gap: 16px;
  border-bottom: 1px solid $bd;
}

.alerts-tab {
  padding: 8px 20px;
  border-radius: $r-pill;
  background: $surface-alt;
}

.alerts-tab.active {
  background: $pri;
}

.alerts-tab-text {
  font-size: var(--tk-font-h1);
  color: $tx2;
}

.alerts-tab-text.active {
  color: $card;
}

.alerts-list {
  padding: 16px;
}

.alert-card {
  margin-bottom: 16px;
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.alert-badge {
  padding: 4px 16px;
  border-radius: $r-sm;
}

.alert-badge.sev-info {
  background: $bd-l;
}

.alert-badge.sev-warning {
  background: $wrn-l;
}

.alert-badge.sev-critical {
  background: $dan-l;
}

.alert-badge.sev-urgent {
  background: $dan;
}

.alert-badge-text {
  font-size: var(--tk-font-body);
  font-weight: 600;
}

.alert-badge.sev-info .alert-badge-text {
  color: var(--tk-text-secondary);
}

.alert-badge.sev-warning .alert-badge-text {
  color: $wrn;
}

.alert-badge.sev-critical .alert-badge-text {
  color: $dan;
}

.alert-badge.sev-urgent .alert-badge-text {
  color: $card;
}

.alert-time {
  font-size: var(--tk-font-h2);
  color: var(--tk-text-secondary);
}

.alert-title {
  font-size: var(--tk-font-body-lg);
  color: $tx;
  line-height: 1.5;
}