/* ============================================================
   Architecture Guidelines — Custom Styles
   ============================================================ */

/* Badges for rule classification ----------------------------- */
.badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 4px;
  margin-right: 0.4em;
  vertical-align: middle;
  white-space: nowrap;
  font-family: var(--md-code-font);
}

.badge-mandatory {
  background-color: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #90caf9;
}

.badge-optional {
  background-color: #f5f5f5;
  color: #424242;
  border: 1px solid #bdbdbd;
}

/* Dark mode variants ---------------------------------------- */
[data-md-color-scheme="slate"] .badge-mandatory {
  background-color: rgba(33, 150, 243, 0.15);
  color: #90caf9;
  border-color: #1976d2;
}

[data-md-color-scheme="slate"] .badge-optional {
  background-color: rgba(255, 255, 255, 0.08);
  color: #bdbdbd;
  border-color: #616161;
}

/* Bilingual heading helper ---------------------------------- */
.bi-lang {
  display: block;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
  margin-top: 0.15em;
}

/* Use Case callout ------------------------------------------ */
.usecase {
  background: linear-gradient(90deg, rgba(63, 81, 181, 0.06), transparent);
  border-left: 4px solid #3f51b5;
  padding: 0.8em 1em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
}

.usecase strong:first-child {
  color: #3f51b5;
}

[data-md-color-scheme="slate"] .usecase {
  background: linear-gradient(90deg, rgba(121, 134, 203, 0.12), transparent);
  border-left-color: #7986cb;
}

[data-md-color-scheme="slate"] .usecase strong:first-child {
  color: #9fa8da;
}

/* Glossary term styling ------------------------------------- */
.glossary dt {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-top: 0.6em;
}

/* Anti-pattern warning -------------------------------------- */
.antipattern {
  border-left: 4px solid #d32f2f;
  background: rgba(211, 47, 47, 0.05);
  padding: 0.8em 1em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
}

[data-md-color-scheme="slate"] .antipattern {
  background: rgba(239, 83, 80, 0.1);
  border-left-color: #ef5350;
}