.app-main.calendar-details-open {
  z-index: 60;
  overflow: visible;
}

.app-main.calendar-details-open .app-modal-panel {
  display: flex;
  width: min(56rem, calc(100vw - 2rem));
  max-width: 56rem;
  max-height: calc(100dvh - 2rem);
  flex-direction: column;
}

.app-main.calendar-details-open .app-modal-panel > div:first-child {
  z-index: 20;
  flex: 0 0 auto;
  background: rgba(17, 17, 17, 0.96);
}

.app-main.calendar-details-open .app-modal-panel > div:nth-child(2) {
  min-height: 0;
  max-height: none !important;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

.calendar-record-details-content dd {
  overflow-wrap: anywhere;
}

.calendar-record-details-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.calendar-record-details-actions > button {
  min-height: 2.75rem;
}

body.calendar-details-open,
body:has(.calendar-record-details-content) {
  overflow: hidden;
}

body.calendar-details-open .tsc-report-launcher,
body:has(.calendar-record-details-content) .tsc-report-launcher {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 639px) {
  .app-main.calendar-details-open .app-modal-panel {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .app-main.calendar-details-open .app-modal-panel > div:first-child {
    padding-top: calc(1rem + env(safe-area-inset-top));
  }

  .app-main.calendar-details-open .app-modal-panel > div:nth-child(2) {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}