:root {
  --tdp-navy: #04276d;
  --tdp-navy-dark: #021a4a;
  --tdp-green: #7cc240;
  --tdp-green-dark: #6fae37;
  --tdp-coral: #ff5757;
  --tdp-coral-dark: #e04c4c;
  --tdp-yellow: #e3ac48;
  --tdp-teal: #009698;

  --bs-primary: var(--tdp-navy);
  --bs-primary-rgb: 4, 39, 109;
  --bs-primary-text-emphasis: #02102c;
  --bs-primary-bg-subtle: #d4e0fb;
  --bs-primary-border-subtle: #a9c0f2;

  --bs-success: var(--tdp-green);
  --bs-success-rgb: 124, 194, 64;
  --bs-success-text-emphasis: #324e1a;
  --bs-success-bg-subtle: #e5f3d9;
  --bs-success-border-subtle: #cbe7b3;

  --bs-danger: var(--tdp-coral);
  --bs-danger-rgb: 255, 87, 87;
  --bs-danger-text-emphasis: #662323;
  --bs-danger-bg-subtle: #ffdddd;
  --bs-danger-border-subtle: #ffbcbc;

  --bs-warning: var(--tdp-yellow);
  --bs-warning-rgb: 227, 172, 72;
  --bs-warning-text-emphasis: #5b451d;
  --bs-warning-bg-subtle: #fde6b3;
  --bs-warning-border-subtle: #f7d38f;

  --bs-info: var(--tdp-teal);
  --bs-info-rgb: 0, 150, 152;
  --bs-info-text-emphasis: #003c3d;
  --bs-info-bg-subtle: #cceaea;
  --bs-info-border-subtle: #99d5d6;

  --bs-link-color: var(--tdp-navy);
  --bs-link-color-rgb: 4, 39, 109;
  --bs-link-hover-color: var(--tdp-navy-dark);
  --bs-link-hover-color-rgb: 2, 26, 74;
}

.btn-primary {
  --bs-btn-bg: var(--tdp-navy);
  --bs-btn-border-color: var(--tdp-navy);
  --bs-btn-hover-bg: var(--tdp-navy-dark);
  --bs-btn-hover-border-color: var(--tdp-navy-dark);
  --bs-btn-active-bg: var(--tdp-navy-dark);
  --bs-btn-active-border-color: var(--tdp-navy-dark);
  --bs-btn-disabled-bg: var(--tdp-navy);
  --bs-btn-disabled-border-color: var(--tdp-navy);
  --bs-btn-focus-shadow-rgb: 4, 39, 109;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tdp-green);
  --bs-btn-border-color: var(--tdp-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tdp-green-dark);
  --bs-btn-hover-border-color: var(--tdp-green-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tdp-green-dark);
  --bs-btn-active-border-color: var(--tdp-green-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--tdp-green);
  --bs-btn-disabled-border-color: var(--tdp-green);
  --bs-btn-focus-shadow-rgb: 124, 194, 64;
}

.btn-outline-danger {
  --bs-btn-color: var(--tdp-coral);
  --bs-btn-border-color: var(--tdp-coral);
  --bs-btn-hover-bg: var(--tdp-coral);
  --bs-btn-hover-border-color: var(--tdp-coral);
  --bs-btn-active-bg: var(--tdp-coral-dark);
  --bs-btn-active-border-color: var(--tdp-coral-dark);
  --bs-btn-disabled-color: var(--tdp-coral);
  --bs-btn-disabled-border-color: var(--tdp-coral);
  --bs-btn-focus-shadow-rgb: 255, 87, 87;
}

.badge[class*="text-bg-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff !important;
  color: var(--bs-body-color) !important;
  border: 2px solid var(--badge-border, var(--bs-secondary));
}

.badge.text-bg-success { --badge-border: var(--tdp-green); }
.badge.text-bg-warning { --badge-border: var(--tdp-yellow); }
.badge.text-bg-info { --badge-border: var(--tdp-teal); }
.badge.text-bg-primary { --badge-border: var(--tdp-navy); }
.badge.text-bg-danger { --badge-border: var(--tdp-coral); }

/* Hang-up red, as on a mobile's end-call button */
.btn.end-call {
  --bs-btn-bg: #ff3b30;
  --bs-btn-border-color: #ff3b30;
  --bs-btn-hover-bg: #e0342a;
  --bs-btn-hover-border-color: #e0342a;
  --bs-btn-active-bg: #c62d24;
  --bs-btn-active-border-color: #c62d24;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

summary.end-call { list-style: none; }
summary.end-call::-webkit-details-marker { display: none; }

.indicator-box {
  max-height: 10rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.badge-award {
  background: linear-gradient(135deg, var(--bs-warning-bg-subtle), var(--bs-success-bg-subtle));
  box-shadow: 0 0.5rem 1.5rem rgba(4, 39, 109, 0.15);
}

.badge-award-kicker {
  color: var(--tdp-navy);
  letter-spacing: 0.15em;
}

.badge-award-medal {
  animation: badge-award-pop 0.8s ease-out;
}

@keyframes badge-award-pop {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  70% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .badge-award-medal { animation: none; }
}