/* Modal */
.ui-modal {
  @apply fixed inset-0 z-50;
}

.ui-modal__backdrop {
  @apply absolute inset-0 bg-black/50;
}

.ui-modal__positioner {
  @apply relative flex min-h-full items-center justify-center p-4;
}

.ui-modal__dialog {
  @apply relative z-10 flex max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl;
}

.ui-modal--sm .ui-modal__dialog {
  @apply max-w-[400px];
}

.ui-modal--md .ui-modal__dialog {
  @apply max-w-[672px];
}

.ui-modal__header {
  @apply flex items-start justify-between gap-4 px-6 pt-6;
}

.ui-modal__heading {
  @apply min-w-0 flex-1;
}

.ui-modal__title {
  @apply text-lg leading-7 font-semibold text-gray-900;
}

.ui-modal__description {
  @apply mt-2 text-sm leading-5 font-normal text-gray-600;
}

.ui-modal__close {
  @apply shrink-0;
}

.ui-modal__body {
  @apply min-h-0 flex-1 overflow-y-auto px-6 py-4;
}

.ui-modal__dialog:has(.ui-datepicker),
.ui-modal__body:has(.ui-datepicker) {
  @apply overflow-visible;
}

.ui-modal__body-content {
  @apply text-sm leading-5 font-normal whitespace-pre-line text-gray-600;
}

/* 本文なしの confirm（Figma の title-only ダイアログ）。本文を隠し、見出し下の余白はヘッダーで持つ。 */
.ui-modal--body-hidden .ui-modal__body {
  @apply hidden;
}

.ui-modal--body-hidden .ui-modal__header {
  @apply pb-6;
}

.ui-modal__footer {
  @apply flex items-center justify-end gap-3 rounded-b-xl border-t border-gray-200 bg-gray-50 px-6 py-4;
}

.ui-modal__footer-count {
  @apply mr-auto text-sm leading-5 font-normal text-gray-900;
}

.ui-modal__footer-actions {
  @apply flex items-center gap-3;
}