/* Professional contact role badges — list + show */
.l2d-role-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.l2d-role-badges.is-compact {
  margin-left: 4px;
  gap: 3px;
}
.person-list-name .l2d-role-badges {
  display: flex;
  margin: 4px 0 0 0;
}
.l2d-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}
.l2d-role-badge-icon {
  font-size: 11px;
  line-height: 1;
}
.l2d-role-badge--appraiser {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #a78bfa 100%);
}
.l2d-role-badge--inspector {
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #fb923c 100%);
}
.l2d-role-badge--lender {
  background: linear-gradient(135deg, #047857 0%, #059669 55%, #34d399 100%);
}
.l2d-role-badge--title {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #60a5fa 100%);
}
.l2d-role-badge--agent {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 55%, #2dd4bf 100%);
}
.l2d-role-badge--cic {
  background: linear-gradient(135deg, #334155 0%, #475569 55%, #94a3b8 100%);
}
.l2d-role-show-row {
  margin: 6px 0 12px;
}

.person-list-type-cell .l2d-role-badges {
  display: inline-flex;
  margin: 0 0 2px 0;
  vertical-align: middle;
}
.person-list-type-plain {
  display: block;
  font-size: 12px;
  color: #475569;
  line-height: 1.25;
}

.l2d-role-badge--contractor {
  background: linear-gradient(135deg, #78350f 0%, #b45309 55%, #f59e0b 100%);
}

/* ===== jQuery UI datepicker prev/next arrows (Oct 1 2026) =====
   The theme icon PNGs (/assets/images/ui-icons_*.png) return 404, so the
   arrows were invisible on the gray header. Draw the chevrons in CSS.
   Scoped to .ui-datepicker prev/next only. */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 3px;
  width: 1.9em;
  height: 1.9em;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #b0bec5;
  border-radius: 4px;
}
.ui-datepicker .ui-datepicker-prev { left: 3px; }
.ui-datepicker .ui-datepicker-next { right: 3px; }
.ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover { top: 3px; }
.ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover { left: 3px; }
.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover { right: 3px; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { background-image: none !important; }
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid #1f2a37;
  border-left: 2.5px solid #1f2a37;
}
.ui-datepicker .ui-datepicker-prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.ui-datepicker .ui-datepicker-next::before { transform: translate(-70%, -50%) rotate(135deg); }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  background: #ffffff;
  border-color: #00a9f5;
  box-shadow: 0 0 0 2px rgba(0, 169, 245, 0.18);
}
.ui-datepicker .ui-datepicker-prev:hover::before,
.ui-datepicker .ui-datepicker-next:hover::before,
.ui-datepicker .ui-datepicker-prev-hover::before,
.ui-datepicker .ui-datepicker-next-hover::before { border-color: #00a9f5; }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled { cursor: default; opacity: 0.35; }