/* ============================================================
   URBINO · DIALOG
   Molecule. Blocking, focused, decision-required surface.

   Use a Dialog when the user must choose or confirm something
   before continuing. For non-blocking notifications use Toast.

   Composition:
     .u-overlay              — scrim/backdrop behind the dialog
       └─ .u-dialog          — the panel
            ├─ .u-dialog__header
            │    ├─ .u-dialog__title
            │    └─ .u-dialog__close       — × button
            ├─ .u-dialog__body             — scrollable
            └─ .u-dialog__footer
                 ├─ .u-dialog__destructive — left-aligned (e.g. "Törlés")
                 └─ buttons                — right-aligned (Mégse + primary)

   Sizes: --sm (480) / --md (640, default) / --lg (800).
   Variants: --confirm (compact, no scroll) / --danger (red primary).
   ============================================================ */


/* ============================================================
   OVERLAY — scrim behind any blocking surface
   Centers its child by default; modifiers anchor edges.
   ============================================================ */

.u-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--u-overlay-z);
  background: var(--u-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--u-overlay-py) var(--u-overlay-px);
  box-sizing: border-box;
  overflow: auto;
  transition: opacity var(--u-dur-base) var(--u-ease-out);
}
.u-overlay--blur {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Optional anchoring — for bottom-sheet style or top-banner mounts */
.u-overlay--bottom { align-items: flex-end; }
.u-overlay--top    { align-items: flex-start; }
.u-overlay--right  { justify-content: flex-end; padding: 0; }
.u-overlay--left   { justify-content: flex-start; padding: 0; }

/* Animation hooks (apply from JS) */
.u-overlay--enter { opacity: 0; }
.u-overlay--leave { opacity: 0; }


/* ============================================================
   THE DIALOG PANEL
   ============================================================ */

.u-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--u-dialog-bg);
  color: var(--u-dialog-fg);
  border-radius: var(--u-dialog-radius);
  box-shadow: var(--u-dialog-shadow);
  width: var(--u-dialog-width-md);
  max-width: 100%;
  max-height: var(--u-dialog-max-h);
  font-family: var(--u-font-sans);
  outline: none;
  overflow: hidden;                /* corners stay rounded over inner scroll */
  box-sizing: border-box;
  transition:
    opacity var(--u-dur-base) var(--u-ease-out),
    transform var(--u-dur-base) var(--u-ease-out);
}


/* ============================================================
   WORLD SHORTCUT
   ============================================================ */

.u-dialog--mgr {
  /* :root defaults */
}

.u-dialog--cit {
  --u-dialog-radius:          var(--u-radius-2xl);
  --u-dialog-header-py:       var(--u-space-5);
  --u-dialog-header-px:       var(--u-space-6);
  --u-dialog-body-py:         var(--u-space-5);
  --u-dialog-body-px:         var(--u-space-6);
  --u-dialog-footer-py:       var(--u-space-4);
  --u-dialog-footer-px:       var(--u-space-6);
  --u-dialog-footer-gap:      var(--u-space-3);
  --u-dialog-title-font-size: 20px;
  --u-dialog-close-size:      40px;
}


/* ============================================================
   SIZES
   ============================================================ */

.u-dialog--sm { width: var(--u-dialog-width-sm); }
.u-dialog--md { width: var(--u-dialog-width-md); }
.u-dialog--lg { width: var(--u-dialog-width-lg); }


/* ============================================================
   VARIANT — CONFIRM
   Compact dialog with a single title + body line + action buttons.
   No scroll. Use for "Biztosan törli?" style decisions.
   ============================================================ */

.u-dialog--confirm {
  width: var(--u-dialog-width-sm);
}
.u-dialog--confirm .u-dialog__body { padding-top: 0; }
.u-dialog--confirm .u-dialog__header { border-bottom: 0; padding-bottom: var(--u-space-2); }


/* ============================================================
   VARIANT — DANGER
   Sets the destructive intent for confirmation. The primary
   button in the footer should use `.u-btn--danger`.
   The title gets a leading icon recommendation (handled in markup).
   ============================================================ */

.u-dialog--danger {
  /* No surface change — keep neutral. The danger lives in copy + button. */
}


/* ============================================================
   HEADER
   ============================================================ */

.u-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-3);
  padding: var(--u-dialog-header-py) var(--u-dialog-header-px);
  border-bottom: 1px solid var(--u-divider);
  flex-shrink: 0;
}
.u-dialog__title {
  font-family: var(--u-font-display);
  font-size: var(--u-dialog-title-font-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--u-fg-1);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.u-dialog__subtitle {
  font-size: 13px;
  color: var(--u-fg-3);
  margin: var(--u-space-1) 0 0;
  line-height: 1.5;
}
.u-dialog--cit .u-dialog__subtitle { font-size: 14px; }

.u-dialog__close {
  flex-shrink: 0;
  width: var(--u-dialog-close-size);
  height: var(--u-dialog-close-size);
  border-radius: var(--u-radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--u-fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: calc(var(--u-space-1) * -1);     /* slight expansion into the padding */
  transition: background var(--u-dur-fast) var(--u-ease-out), color var(--u-dur-fast) var(--u-ease-out);
}
.u-dialog__close:hover { background: var(--u-surface-sunk); color: var(--u-fg-1); }
.u-dialog__close:focus-visible {
  outline: none;
  box-shadow: var(--u-focus-ring);
}
.u-dialog__close img,
.u-dialog__close svg { width: 18px; height: 18px; display: block; }


/* ============================================================
   BODY — scrollable region
   ============================================================ */

.u-dialog__body {
  padding: var(--u-dialog-body-py) var(--u-dialog-body-px);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--u-fg-1);
}
.u-dialog--cit .u-dialog__body { font-size: 16px; }

.u-dialog__body > * + * { margin-top: var(--u-space-3); }
.u-dialog__body p { margin: 0; line-height: 1.55; color: var(--u-fg-2); }


/* ============================================================
   FOOTER — action row
   Right-aligned buttons. Destructive on the far left.
   ============================================================ */

.u-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-dialog-footer-gap);
  padding: var(--u-dialog-footer-py) var(--u-dialog-footer-px);
  border-top: 1px solid var(--u-divider);
  background: var(--u-surface-alt);
  flex-shrink: 0;
}
.u-dialog--cit .u-dialog__footer { background: transparent; }

.u-dialog__destructive { margin-right: auto; }


/* ============================================================
   ENTRY / EXIT ANIMATION HOOKS
   Apply via JS — the overlay handles its own opacity, the
   dialog scales + opacity in.
   ============================================================ */

.u-dialog--enter {
  opacity: 0;
  transform: scale(0.96);
}
.u-dialog--leave {
  opacity: 0;
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .u-overlay, .u-dialog { transition: opacity var(--u-dur-fast); }
  .u-dialog--enter, .u-dialog--leave { transform: none; }
}


/* ============================================================
   BOTTOM-SHEET (preview) — citizen mobile pattern
   Mount the overlay as `.u-overlay--bottom`, the dialog as
   `.u-dialog--cit .u-dialog--sheet`. Rounded top corners only;
   the bottom adopts the safe-area inset.
   ============================================================ */

.u-dialog--sheet {
  width: 100%;
  max-width: 100%;
  border-radius: var(--u-dialog-radius) var(--u-dialog-radius) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}