/*
 * Modal — visual tokens & components.
 * Soft SaaS surfaces, one radius/shadow scale, *-fg accent variants reserved
 * for colored text — the same design language as the Notify sibling package
 * (github.com/salioudiabate/notify), so the two read as one system.
 */

:root {
  /* Any dropdown/popover teleported out of a modal (e.g. to <body>) should
     use a z-index >= this to render above it — see the README's "Working
     with custom dropdowns" section. */
  --modal-z: 9999;

  --modal-canvas: #F6F6F8;
  --modal-surface: #FFFFFF;
  --modal-surface-2: #FAFAFA;
  --modal-border: #ECECF0;
  --modal-border-2: #E3E3E9;
  --modal-text-1: #131316;
  --modal-text-2: #6B6B76;
  --modal-text-3: #9A9AA5;

  --modal-danger: #E5544E;
  --modal-danger-bg: #FEF3F2;
  --modal-danger-fg: #B42318;

  --modal-r-sm: 8px;
  --modal-r-md: 12px;
  --modal-r-lg: 16px;
  --modal-r-xl: 20px;

  --modal-shadow-dialog: 0 24px 48px -12px rgba(11, 11, 20, .18), 0 4px 12px -4px rgba(11, 11, 20, .08);
  --modal-backdrop-bg: rgba(19, 19, 22, .35);
  --modal-backdrop-blur: 4px;

  --modal-btn-primary-bg: var(--modal-text-1);
  --modal-btn-primary-fg: var(--modal-canvas);
  --modal-btn-secondary-bg: var(--modal-surface);
  --modal-btn-secondary-fg: var(--modal-text-1);
  --modal-btn-secondary-border: var(--modal-border-2);
  --modal-btn-danger-bg: var(--modal-danger);
  --modal-btn-danger-fg: #ffffff;
  --modal-btn-ghost-bg: transparent;
  --modal-btn-ghost-fg: var(--modal-text-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-modal-theme="light"]) {
    --modal-canvas: #0A0A0C;
    --modal-surface: #161619;
    --modal-surface-2: #1E1E22;
    --modal-border: #2A2A31;
    --modal-border-2: #35353D;
    --modal-text-1: #F4F4F5;
    --modal-text-2: #9E9EA8;
    --modal-text-3: #6C6C76;
    --modal-danger: #F27A72;
    --modal-danger-bg: #2C1817;
    --modal-danger-fg: #F27A72;
    --modal-shadow-dialog: 0 24px 56px -12px rgba(0, 0, 0, .6);
    --modal-backdrop-bg: rgba(0, 0, 0, .55);
  }
}

:root[data-modal-theme="dark"] {
  --modal-canvas: #0A0A0C;
  --modal-surface: #161619;
  --modal-surface-2: #1E1E22;
  --modal-border: #2A2A31;
  --modal-border-2: #35353D;
  --modal-text-1: #F4F4F5;
  --modal-text-2: #9E9EA8;
  --modal-text-3: #6C6C76;
  --modal-danger: #F27A72;
  --modal-danger-bg: #2C1817;
  --modal-danger-fg: #F27A72;
  --modal-shadow-dialog: 0 24px 56px -12px rgba(0, 0, 0, .6);
  --modal-backdrop-bg: rgba(0, 0, 0, .55);
}

:root[data-modal-theme="light"] {
  --modal-canvas: #F6F6F8;
  --modal-surface: #FFFFFF;
  --modal-surface-2: #FAFAFA;
  --modal-border: #ECECF0;
  --modal-border-2: #E3E3E9;
  --modal-text-1: #131316;
  --modal-text-2: #6B6B76;
  --modal-text-3: #9A9AA5;
  --modal-danger: #E5544E;
  --modal-danger-bg: #FEF3F2;
  --modal-danger-fg: #B42318;
  --modal-shadow-dialog: 0 24px 48px -12px rgba(11, 11, 20, .18), 0 4px 12px -4px rgba(11, 11, 20, .08);
  --modal-backdrop-bg: rgba(19, 19, 22, .35);
}

.modal-root, .modal-root * { box-sizing: border-box; }

.modal-root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--modal-text-1);
  position: fixed;
  inset: 0;
  z-index: var(--modal-z, 9999);
}

body.modal-scroll-lock { overflow: hidden; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop-bg);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
}

.modal-viewport {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-viewport-slide-over {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: var(--modal-w, 32rem);
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-r-xl);
  box-shadow: var(--modal-shadow-dialog);
  overflow: hidden;
  margin: auto;
}

.modal-dialog-slide-over {
  max-width: var(--modal-w, 28rem);
  height: 100%;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  margin: 0;
}

/* ------------------------------------------------------------- panel ---- */

.modal-panel { display: flex; flex-direction: column; max-height: 100%; }

.modal-panel__header {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--modal-border);
}

.modal-panel__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--modal-text-1);
  margin: 0;
}

.modal-panel__description {
  margin: .375rem 0 0;
  font-size: .8125rem;
  color: var(--modal-text-2);
}

.modal-panel__body {
  padding: 1.5rem;
  overflow-y: auto;
  color: var(--modal-text-1);
}

.modal-panel__footer {
  padding: 1.125rem 1.5rem;
  border-top: 1px solid var(--modal-border);
  display: flex;
  flex-direction: column-reverse;
  gap: .625rem;
  background: var(--modal-surface-2);
}

@media (min-width: 640px) {
  .modal-panel__footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--modal-r-sm);
  border: none;
  background: transparent;
  color: var(--modal-text-3);
  cursor: pointer;
  line-height: 1;
}

.modal-close-btn:hover { background: var(--modal-surface-2); color: var(--modal-text-1); }
.modal-close-btn:focus-visible { outline: 2px solid var(--modal-text-2); outline-offset: 2px; }

/* ------------------------------------------------------------- buttons -- */

.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .5rem .875rem;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: var(--modal-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.modal-btn:disabled { opacity: .5; cursor: not-allowed; }
.modal-btn:focus-visible { outline: 2px solid var(--modal-text-2); outline-offset: 2px; }

.modal-btn-primary { background: var(--modal-btn-primary-bg); color: var(--modal-btn-primary-fg); }
.modal-btn-primary:hover:not(:disabled) { opacity: .9; }

.modal-btn-secondary {
  background: var(--modal-btn-secondary-bg);
  color: var(--modal-btn-secondary-fg);
  border-color: var(--modal-btn-secondary-border);
}
.modal-btn-secondary:hover:not(:disabled) { background: var(--modal-surface-2); }

.modal-btn-danger { background: var(--modal-btn-danger-bg); color: var(--modal-btn-danger-fg); }
.modal-btn-danger:hover:not(:disabled) { opacity: .9; }

.modal-btn-ghost { background: var(--modal-btn-ghost-bg); color: var(--modal-btn-ghost-fg); }
.modal-btn-ghost:hover:not(:disabled) { background: var(--modal-surface-2); color: var(--modal-text-1); }

/* ---------------------------------------------------------- transitions -- */

.modal-transition-backdrop-enter, .modal-transition-backdrop-leave { transition: opacity .25s ease; }
.modal-transition-backdrop-enter-start, .modal-transition-backdrop-leave-end { opacity: 0; }
.modal-transition-backdrop-enter-end, .modal-transition-backdrop-leave-start { opacity: 1; }

.modal-transition-dialog-enter { transition: opacity .25s ease, transform .25s ease; }
.modal-transition-dialog-leave { transition: opacity .18s ease, transform .18s ease; }
.modal-transition-dialog-enter-start { opacity: 0; transform: scale(.96) translateY(-8px); }
.modal-transition-dialog-enter-end { opacity: 1; transform: scale(1) translateY(0); }
.modal-transition-dialog-leave-start { opacity: 1; transform: scale(1) translateY(0); }
.modal-transition-dialog-leave-end { opacity: 0; transform: scale(.97) translateY(6px); }

.modal-transition-panel-enter { transition: transform .3s ease; }
.modal-transition-panel-leave { transition: transform .22s ease; }
.modal-transition-panel-enter-start, .modal-transition-panel-leave-end { transform: translateX(100%); }
.modal-transition-panel-enter-end, .modal-transition-panel-leave-start { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .modal-transition-backdrop-enter, .modal-transition-backdrop-leave,
  .modal-transition-dialog-enter, .modal-transition-dialog-leave,
  .modal-transition-panel-enter, .modal-transition-panel-leave {
    transition-duration: .001ms !important;
  }
}