/*
 * leadity-Bibliothek · kanonische Overlays
 * Quellen: Figma 3514:5143, 2245:8697, 8750:4222 und 6260:36346.
 * Laden nach tokens, app-shell.css und actions.css.
 */

:where(.overlay-modal, .overlay-confirm, .overlay-popover, .overlay-tooltip) {
  box-sizing: border-box;
  color: var(--leadity-text-default);
  font-family: var(--leadity-font-body);
}

/* Modal */
.overlay-modal {
  --overlay-width: 800px;
  width: min(var(--overlay-width), calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: var(--leadity-space-7);
  border: 0;
  border-radius: var(--leadity-radius-lg);
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  box-shadow: var(--leadity-shadow-floating);
  overflow: hidden;
}

.overlay-modal[open] {
  display: flex;
  flex-direction: column;
  gap: var(--leadity-space-6);
}

.overlay-modal::backdrop,
.overlay-confirm::backdrop {
  /* Vorläufiger Runtime-Wert; Figma enthält keinen Backdrop-Token. */
  background: color-mix(in srgb, var(--leadity-neutral-120) 42%, transparent);
}

.overlay-modal-sm { --overlay-width: 800px; }
.overlay-modal-md { --overlay-width: 1000px; }
.overlay-modal-lg { --overlay-width: 1240px; }
.overlay-modal-xl { --overlay-width: 1600px; }
.overlay-modal-surface-grey { background: var(--leadity-neutral-10); }

.overlay-modal-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--leadity-space-6);
  flex: 0 0 auto;
}

.overlay-modal-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--leadity-space-4);
}

.overlay-modal-heading-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  margin-top: var(--leadity-space-2);
  font-size: 20px;
}

.overlay-modal-title {
  margin: 0;
  color: var(--leadity-text-dark);
  font: 700 25px/1.3 var(--leadity-font-display);
  letter-spacing: .1px;
  text-wrap: balance;
}

.overlay-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--leadity-space-5);
  flex: 0 0 auto;
}

.overlay-modal-content {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--leadity-space-6);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.overlay-modal-copy {
  max-width: 66ch;
  margin: 0;
  color: var(--leadity-text-default);
  font: 400 16px/27px var(--leadity-font-body);
}

.overlay-modal-list {
  display: grid;
  gap: var(--leadity-space-4);
  margin: 0;
  padding-left: 22px;
}

.overlay-modal-placeholder {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: var(--leadity-space-7);
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-neutral-10);
  color: var(--leadity-text-light);
  text-align: center;
}

.overlay-modal-surface-grey .overlay-modal-placeholder {
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
}

.overlay-modal-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--leadity-space-6);
  flex: 0 0 auto;
}

.overlay-modal-actions-left,
.overlay-modal-actions-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--leadity-space-4);
}

.overlay-modal-actions-right { justify-content: flex-end; margin-left: auto; }

/* Confirmdialog */
.overlay-confirm {
  width: min(640px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: var(--leadity-space-7);
  border: 0;
  border-radius: var(--leadity-radius-lg);
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  box-shadow: var(--leadity-shadow-floating);
  overflow: auto;
}

.overlay-confirm[open] {
  display: flex;
  flex-direction: column;
  gap: var(--leadity-space-7);
}

.overlay-confirm-icon {
  width: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
  padding-block: var(--leadity-space-4);
  color: var(--leadity-state-check-background);
  font-size: 48px;
}

.overlay-confirm[data-intent="success"] .overlay-confirm-icon { color: var(--leadity-state-success-background); }
.overlay-confirm[data-intent="warning"] .overlay-confirm-icon { color: var(--leadity-state-warning-background); }
.overlay-confirm[data-intent="alert"] .overlay-confirm-icon,
.overlay-confirm[data-intent="delete"] .overlay-confirm-icon { color: var(--leadity-state-error-background); }

.overlay-confirm-title {
  margin: 0;
  color: var(--leadity-text-dark);
  font: 700 21px/1.3 var(--leadity-font-display);
  letter-spacing: .1px;
}

.overlay-confirm-copy {
  margin: 0;
  color: var(--leadity-text-default);
  font: 400 16px/27px var(--leadity-font-body);
}

.overlay-confirm-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--leadity-space-4);
}

/* Tooltip */
.info-tooltip-trigger {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  display: inline-grid;
  place-items: center;
  position: relative;
  flex: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--leadity-neutral-80);
  font: inherit;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

/* Die sichtbare Figma-Instanz bleibt 16 px; nur die wirksame Trefferfläche wächst. */
.info-tooltip-trigger::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: var(--leadity-radius-sm);
  transform: translate(-50%, -50%);
}

.info-tooltip-trigger:hover { color: var(--leadity-text-dark); }
.info-tooltip-trigger:focus-visible { outline: 0; }
.info-tooltip-trigger:focus-visible::after {
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: var(--leadity-focus-offset);
}

.info-tooltip-trigger i {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.overlay-tooltip {
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  position: fixed;
  inset: auto;
  z-index: 140;
  padding: var(--leadity-space-2) var(--leadity-space-3);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-100);
  color: var(--leadity-neutral-10);
  font: 400 14px/21px var(--leadity-font-body);
  letter-spacing: .014px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.overlay-tooltip[data-size="small"] { width: max-content; }
.overlay-tooltip[data-size="medium"],
.overlay-tooltip-md { width: 240px; }
.overlay-tooltip[data-size="large"],
.overlay-tooltip-lg { width: 360px; }
.overlay-tooltip[data-visible="true"] { opacity: 1; visibility: visible; }

.overlay-tooltip::before {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  background: var(--leadity-neutral-100);
  transform: rotate(45deg);
}

.overlay-tooltip[data-position="top"]::before {
  left: calc(50% - 6px);
  bottom: -5px;
}

.overlay-tooltip[data-position="bottom"]::before {
  left: calc(50% - 6px);
  top: -5px;
}

.overlay-tooltip[data-position="left"]::before {
  top: calc(50% - 6px);
  right: -5px;
}

.overlay-tooltip[data-position="right"]::before {
  top: calc(50% - 6px);
  left: -5px;
}

/* Popover */
.overlay-popover {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  position: fixed;
  inset: auto;
  margin: 0;
  padding: var(--leadity-space-5);
  border: 0;
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  box-shadow: var(--leadity-shadow-floating);
  overflow: visible;
}

.overlay-popover:popover-open,
.overlay-popover[data-open="true"] {
  display: flex;
  flex-direction: column;
  gap: var(--leadity-space-5);
}

.overlay-popover::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  left: var(--overlay-tip-left, 20px);
  background: var(--leadity-white);
  transform: rotate(45deg);
}

.overlay-popover[data-placement="bottom"]::before { top: -8px; }
.overlay-popover[data-placement="top"]::before { bottom: -8px; }

.overlay-popover-header {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--leadity-space-3);
}

.overlay-popover-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--leadity-space-3);
}

.overlay-popover-title {
  margin: 0;
  color: var(--leadity-text-dark);
  font: 700 25px/1.3 var(--leadity-font-display);
  letter-spacing: .1px;
}

.overlay-popover-content { min-width: 0; font: 400 16px/24px var(--leadity-font-body); }
.overlay-popover-content > :first-child { margin-top: 0; }
.overlay-popover-content > :last-child { margin-bottom: 0; }

.overlay-popover-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--leadity-space-3);
}

@media (max-width: 639px) {
  .overlay-modal,
  .overlay-confirm {
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    padding: var(--leadity-space-6);
  }

  .overlay-modal-footer { align-items: stretch; flex-direction: column; }
  .overlay-modal-actions-left,
  .overlay-modal-actions-right { width: 100%; }
  .overlay-modal-actions-right { margin-left: 0; }
  .overlay-modal-actions-left .btn,
  .overlay-modal-actions-right .btn,
  .overlay-confirm-footer .btn { width: 100%; }
  .overlay-confirm-footer { flex-direction: column; }
  .overlay-popover-title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay-tooltip { transition: none; }
}

/* Paket 7 · Messages */
.leadity-message { width: min(100%, 1000px); position: relative; display: flex; align-items: flex-start; gap: var(--leadity-space-5); color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); }
.leadity-message[data-severity="success"], .leadity-message[data-severity="party"] { background: var(--leadity-state-success-background-light); }
.leadity-message[data-severity="info"] { background: var(--leadity-state-check-background-light); }
.leadity-message[data-severity="warn"] { background: var(--leadity-state-warning-background-light); }
.leadity-message[data-severity="error"] { background: var(--leadity-state-error-background-light); }
.leadity-message-lg { min-height: 80px; padding: var(--leadity-space-6) var(--leadity-space-7) var(--leadity-space-6) var(--leadity-space-6); border-radius: var(--leadity-radius-lg); }
.leadity-message-sm { width: min(550px, 100%); min-height: 56px; padding: var(--leadity-space-4) var(--leadity-space-4) var(--leadity-space-4) var(--leadity-space-5); border-radius: var(--leadity-radius-md); }
.leadity-message-icon { width: 24px; height: 24px; display: inline-grid; place-items: center; flex: 0 0 24px; margin-top: 4px; font-size: 24px; }
.leadity-message[data-severity="success"] .leadity-message-icon,
.leadity-message[data-severity="party"] .leadity-message-icon { color: var(--leadity-state-success-text); }
.leadity-message[data-severity="info"] .leadity-message-icon { color: var(--leadity-state-check-text); }
.leadity-message[data-severity="warn"] .leadity-message-icon { color: var(--leadity-state-warning-text); }
.leadity-message[data-severity="error"] .leadity-message-icon { color: var(--leadity-state-error-text); }
.leadity-message-content { min-width: 0; flex: 1 1 auto; padding-block: 4px; }
.leadity-message-close { width: 32px; height: 32px; position: relative; display: inline-grid; place-items: center; flex: 0 0 32px; margin: -4px -4px -4px 0; border: 0; border-radius: var(--leadity-radius-full); background: transparent; color: var(--leadity-text-default); cursor: pointer; }
.leadity-message-close::before { content: ""; position: absolute; inset: -4px; }
.leadity-message-close:hover { background: color-mix(in srgb, var(--leadity-neutral-100) 5%, transparent); }

/* Paket 7 · Toast */
.leadity-toast-region { width: min(350px, calc(100vw - 32px)); position: fixed; right: var(--leadity-space-6); bottom: calc(var(--leadity-shell-footer-height, 50px) + var(--leadity-space-6)); z-index: 180; display: grid; gap: var(--leadity-space-3); pointer-events: none; }
.leadity-toast { width: 350px; max-width: 100%; display: flex; align-items: flex-start; gap: var(--leadity-space-4); padding: var(--leadity-space-4); border-radius: var(--leadity-radius-md); box-shadow: 0 4px 7.5px rgba(60, 75, 81, .08); color: var(--leadity-text-default); opacity: 0; transform: translateY(8px); pointer-events: auto; transition: opacity 160ms ease, transform 160ms ease; }
.leadity-toast[data-visible="true"] { opacity: 1; transform: translateY(0); }
.leadity-toast[data-severity="success"] { background: var(--leadity-state-success-background-light); }
.leadity-toast[data-severity="info"] { background: var(--leadity-state-check-background-light); }
.leadity-toast[data-severity="warn"] { background: var(--leadity-state-warning-background-light); }
.leadity-toast[data-severity="error"] { background: var(--leadity-state-error-background-light); }
.leadity-toast[data-severity="secondary"] { background: var(--leadity-state-open-background-light); }
.leadity-toast[data-severity="contrast"] { background: var(--leadity-neutral-80); color: var(--leadity-state-open-background-light); }
.leadity-toast-icon { width: 16px; height: 16px; display: inline-grid; place-items: center; flex: 0 0 16px; font-size: 16px; }
.leadity-toast-text { min-width: 0; display: grid; flex: 1 1 auto; gap: var(--leadity-space-3); font-size: 14px; line-height: normal; }
.leadity-toast-summary { overflow: hidden; color: var(--toast-accent, var(--leadity-text-default)); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.leadity-toast-detail { color: inherit; font-weight: 400; }
.leadity-toast[data-severity="success"] { --toast-accent: var(--leadity-state-success-text); }
.leadity-toast[data-severity="info"] { --toast-accent: var(--leadity-state-check-text); }
.leadity-toast[data-severity="warn"] { --toast-accent: var(--leadity-state-warning-text); }
.leadity-toast[data-severity="error"] { --toast-accent: var(--leadity-state-error-text); }
.leadity-toast-close { width: 24.5px; height: 24.5px; position: relative; display: inline-grid; place-items: center; flex: 0 0 24.5px; padding: 0; border: 0; border-radius: var(--leadity-radius-full); background: transparent; color: inherit; cursor: pointer; }
.leadity-toast-close::before { content: ""; position: absolute; inset: -7.75px; border-radius: var(--leadity-radius-full); }
.leadity-toast-close i { width: 14px; height: 14px; display: inline-grid; place-items: center; font-size: 14px; line-height: 1; pointer-events: none; }
.leadity-toast[data-severity="success"] .leadity-toast-close { color: var(--leadity-state-success-text); }
.leadity-toast[data-severity="info"] .leadity-toast-close { color: var(--leadity-state-check-text); }
.leadity-toast[data-severity="warn"] .leadity-toast-close { color: var(--leadity-state-warning-text); }
.leadity-toast[data-severity="error"] .leadity-toast-close { color: var(--leadity-state-error-text); }
.leadity-toast[data-severity="secondary"] .leadity-toast-close { color: var(--leadity-state-open-text); }
.leadity-toast[data-severity="contrast"] .leadity-toast-close { color: var(--leadity-state-open-background-light); }
.leadity-toast[data-severity="success"] .leadity-toast-close:hover { background: var(--leadity-state-success-background-light-hover); }
.leadity-toast[data-severity="info"] .leadity-toast-close:hover { background: var(--leadity-state-check-background-light-hover); }
.leadity-toast[data-severity="warn"] .leadity-toast-close:hover { background: var(--leadity-state-warning-background-light-hover); }
.leadity-toast[data-severity="error"] .leadity-toast-close:hover { background: var(--leadity-state-error-background-light-hover); }
.leadity-toast[data-severity="secondary"] .leadity-toast-close:hover { background: var(--leadity-state-open-background-light); }
.leadity-toast[data-severity="contrast"] .leadity-toast-close:hover { background: var(--leadity-state-open-text); }
.leadity-toast-close:focus-visible { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: var(--leadity-focus-offset); }
.leadity-toast[data-severity="contrast"] .leadity-toast-close:focus-visible { outline-color: var(--leadity-white); }

/* Paket 7 · Loading */
.leadity-spinner { width: var(--spinner-size, 16px); height: var(--spinner-size, 16px); display: inline-block; border: max(2px, calc(var(--spinner-size) / 10)) solid var(--leadity-neutral-40); border-top-color: var(--leadity-neutral-80); border-radius: var(--leadity-radius-full); animation: leadity-spin 900ms linear infinite; }
.leadity-spinner-sm { --spinner-size: 16px; }
.leadity-spinner-md { --spinner-size: 40px; }
.leadity-spinner-lg { --spinner-size: 72px; }
.leadity-loading { display: inline-flex; align-items: center; gap: var(--leadity-space-3); color: var(--leadity-text-default); font: 400 14px/20px var(--leadity-font-body); }
.leadity-skeleton { display: block; border-radius: 6px; background: var(--leadity-neutral-20); background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--leadity-white) 55%, transparent), transparent); background-size: 220% 100%; animation: leadity-skeleton-wave 1.4s ease-in-out infinite; }
@keyframes leadity-spin { to { transform: rotate(360deg); } }
@keyframes leadity-skeleton-wave { to { background-position: -220% 0; } }

@media (max-width: 639px) { .leadity-toast-region { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .leadity-toast { transition: none; }
  .leadity-spinner { animation-duration: 2.4s; }
  .leadity-skeleton { background-image: none; animation: none; }
}