/* Scoped to the event detail; other dialogs retain their existing layout. */
.modal-back:has([data-close-detail]) .modal {
  width: calc(100vw - 32px);
  max-width: 1200px;
  max-height: 94dvh;
  padding: 24px;
  overflow: auto;
}
.modal-back:has([data-close-detail]) table {
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.4;
}
.modal-back:has([data-close-detail]) th,
.modal-back:has([data-close-detail]) td {
  white-space: nowrap;
  padding: 10px 14px;
  border-bottom: 1px solid #dce6ed;
  text-align: center;
  vertical-align: middle;
}
.modal-back:has([data-close-detail]) th:nth-child(2),
.modal-back:has([data-close-detail]) td:nth-child(2) { text-align: left; }
.modal-back:has([data-close-detail]) thead { background: #153b5c; color: white; }
.modal-back:has([data-close-detail]) tbody tr:nth-child(even) { background: #f2f6f9; }
.modal-back:has([data-close-detail]) section { margin-top: 24px; }
@media (max-width: 680px) {
  .modal-back:has([data-close-detail]) .modal { width: calc(100vw - 16px); padding: 14px; }
  .modal-back:has([data-close-detail]) th,
  .modal-back:has([data-close-detail]) td { padding: 9px 10px; }
}