/* XRoster overrides — loaded LAST so it wins over the vendor theme.
   Keep this file small and purposeful; it is ours, style.css is not.
   ------------------------------------------------------------------ */

/* ── Badge / pill legibility ────────────────────────────────────────
   The theme pairs pale badge backgrounds with same-hue pale text, e.g.
   `.bg-warning-subtle .text-warning` measured 1.24:1 and `.bg-light-info`
   1.98:1 — effectively unreadable (WCAG AA wants 4.5:1 for body text).

   Fix by luminance, not by one blanket colour:
     • PALE background  → deep same-hue text (white would be worse — white
       on pale amber is ~1.6:1).
     • SOLID dark background → white text.
     • Amber and cyan are light even at full saturation, so those keep
       dark text when solid.
   Uses Bootstrap's own *-text-emphasis tones, which are built for this. */

.badge.bg-warning-subtle,
.badge.bg-light-warning {
  color: #664d03 !important;
  border-color: #ffe69c !important;
}

.badge.bg-info-subtle,
.badge.bg-light-info {
  color: #055160 !important;
  border-color: #b6effb !important;
}

.badge.bg-primary-subtle,
.badge.bg-light-primary {
  color: #084298 !important;
  border-color: #b6d4fe !important;
}

.badge.bg-success-subtle,
.badge.bg-light-success {
  color: #0a3622 !important;
  border-color: #a3cfbb !important;
}

.badge.bg-danger-subtle,
.badge.bg-light-danger {
  color: #58151c !important;
  border-color: #f1aeb5 !important;
}

.badge.bg-secondary-subtle,
.badge.bg-light-secondary {
  color: #343a40 !important;
  border-color: #dee2e6 !important;
}

/* Solid, dark-enough backgrounds → white text. */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-dark,
.badge.bg-secondary {
  color: #fff !important;
}

/* Solid but LIGHT backgrounds — white would fail here, so go dark. */
.badge.bg-warning,
.badge.bg-info,
.badge.bg-light {
  color: #212529 !important;
}

/* ── Scrollable modals that wrap their body in a <form> ─────────────
   Bootstrap's `.modal-dialog-scrollable` assumes the flex chain
   .modal-content → .modal-body. Nearly every form modal here inserts a
   <form> in between, which breaks the chain: .modal-body can no longer
   resolve a bounded height, so long content overflows and .modal-content's
   `overflow:hidden` CLIPS it — the dialog simply won't scroll.

   Re-establish the chain for any element sitting between the two. */
.modal-dialog-scrollable .modal-content > form,
.modal-dialog-scrollable .modal-content > div:not(.modal-header):not(.modal-footer) {
  display: flex;
  flex-direction: column;
  min-height: 0;      /* lets the flex child actually shrink */
  overflow: hidden;
  flex: 1 1 auto;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* Tall modals that were never marked scrollable still shouldn't run off
   the screen — cap the body and let it scroll. */
.modal-dialog:not(.modal-dialog-scrollable) .modal-body {
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}

/* Same treatment for non-badge chips/pills used around the app. */
.chip.bg-warning-subtle, .chip.bg-light-warning { color: #664d03 !important; }
.chip.bg-info-subtle,    .chip.bg-light-info    { color: #055160 !important; }
.chip.bg-success-subtle, .chip.bg-light-success { color: #0a3622 !important; }
.chip.bg-danger-subtle,  .chip.bg-light-danger  { color: #58151c !important; }