/* Global modal contract: shared close control and narrow-viewport fullscreen mode. */
.ui-modal-close{
  flex: 0 0 auto;
  position: relative;
  isolation: isolate;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--text));
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  appearance: none;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.ui-modal-close::before,
.ui-modal-close::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.ui-modal-close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.ui-modal-close::after{ transform: translate(-50%, -50%) rotate(-45deg); }

.ui-modal-close:hover{
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--accent);
  transform: translateY(-1px);
}

.ui-modal-close:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ui-focus-ring);
}

.ui-modal-close:active{ transform: scale(.96); }

.analytics-confirm-head,
.map-confirm-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-stack, 12px);
}

.map-confirm-head h2{ margin: 0; }

@media (max-width: 760px){
  :is(
    .app-modal,
    .ks-modal-backdrop,
    .modal-backdrop,
    .analytics-entity-modal,
    .analytics-chart-preview-modal,
    .analytics-table-preview-modal,
    .lageplan-report-modal
  ){
    position: fixed !important;
    inset: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    padding: 0 !important;
    place-items: stretch !important;
  }

  :is(
    dialog.ui-modal:not(.project-logbook-withdraw),
    .app-modal > .modal-card,
    .ks-modal-backdrop > .ks-modal-card,
    .modal-backdrop > .modal-card,
    .analytics-entity-modal > .analytics-entity-card,
    .analytics-chart-preview-modal > .analytics-chart-preview-card,
    .analytics-table-preview-modal > .analytics-table-preview-card,
    .lageplan-report-modal > .lageplan-report-dialog,
    .page.page--project .lageplan-settings .map-setting
  ){
    inset: 0 !important;
    width: 100dvw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overscroll-behavior: contain;
  }

  dialog.ui-modal{
    position: fixed !important;
    padding: 0 !important;
  }

  dialog.ui-modal:not(.project-logbook-withdraw) > :is(form, div){
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .page.page--project .lageplan-settings .map-setting{
    position: fixed !important;
    overflow-y: auto;
    transform: translateY(100%) !important;
  }

  .page.page--project .lageplan-settings.is-open .map-setting{
    transform: translateY(0) !important;
  }

  .lageplan-report-dialog{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px !important;
  }

  .lageplan-report-actions{
    margin-top: auto;
    padding-top: 18px;
  }

  /* Short decisions stay compact instead of becoming fullscreen forms. */
  :is(.analytics-table-type-modal, .analytics-confirm-modal, .map-confirm-backdrop){
    padding: 16px !important;
    place-items: center !important;
  }

  :is(
    .analytics-table-type-modal > .analytics-table-type-card,
    .analytics-confirm-modal > .analytics-confirm-card,
    .map-confirm-backdrop > .map-confirm-dialog
  ){
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 !important;
    overflow-y: auto;
  }

  :is(.ui-modal-header, .ks-modal-header, .modal-header){
    align-items: center;
    padding-inline: 16px !important;
  }

  :is(
    dialog.ui-modal,
    .app-modal > .modal-card,
    .ks-modal-backdrop > .ks-modal-card,
    .modal-backdrop > .modal-card
  ) :is(form, .ui-modal-body, .ks-form){
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (prefers-reduced-motion: reduce){
  .ui-modal-close{ transition: none; }
}