/* ============================================================================
 * Modal / Drawer / Dropdown primitives — lightweight, JS-controlled visibility.
 *
 *   .wb-modal              → overlay container (fixed inset)
 *   .wb-modal__backdrop    → dim layer
 *   .wb-modal__dialog      → card surface, ARIA dialog
 *   .wb-modal__header/body/footer
 *   .wb-modal--lg          → wider size
 *
 *   .wb-drawer             → side panel (left/right via modifier)
 *   .wb-drawer--right (default) | .wb-drawer--left
 *
 *   .wb-dropdown           → inline popover (positioned via JS or
 *                            absolute children inside a relative parent)
 *
 * Activation: JS toggles `.is-open` on the outer element.
 * ========================================================================== */

/* Modal -------------------------------------------------------------------- */
.wb-modal {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wb-space-4);
  visibility: hidden;
  pointer-events: none;
}
.wb-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.wb-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 23, 0.5);
  opacity: 0;
  transition: opacity var(--wb-duration-base) var(--wb-ease);
}
.wb-modal.is-open .wb-modal__backdrop { opacity: 1; }

.wb-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border-soft);
  border-radius: var(--wb-radius-xl);
  box-shadow: var(--wb-shadow-xl);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition:
    opacity var(--wb-duration-base) var(--wb-ease),
    transform var(--wb-duration-base) var(--wb-ease);
}
.wb-modal.is-open .wb-modal__dialog {
  opacity: 1;
  transform: none;
}
.wb-modal--lg .wb-modal__dialog { max-width: 800px; }
.wb-modal--sm .wb-modal__dialog { max-width: 400px; }

.wb-modal__header,
.wb-modal__body,
.wb-modal__footer {
  padding: var(--wb-space-6);
}
.wb-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wb-space-4);
  border-bottom: var(--wb-border-width) solid var(--wb-color-border-soft);
}
.wb-modal__title {
  margin: 0;
  font-size: var(--wb-text-xl);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: var(--wb-ls-tight);
}
.wb-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: var(--wb-radius-md);
  color: var(--wb-color-text-muted);
  cursor: pointer;
}
.wb-modal__close:hover {
  background: var(--wb-color-bg-soft);
  color: var(--wb-color-ink);
}

.wb-modal__footer {
  border-top: var(--wb-border-width) solid var(--wb-color-border-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wb-space-3);
}

/* Drawer ------------------------------------------------------------------- */
.wb-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  visibility: hidden;
  pointer-events: none;
}
.wb-drawer.is-open { visibility: visible; pointer-events: auto; }

.wb-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 23, 0.45);
  opacity: 0;
  transition: opacity var(--wb-duration-base) var(--wb-ease);
}
.wb-drawer.is-open .wb-drawer__backdrop { opacity: 1; }

.wb-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--wb-color-surface);
  display: flex;
  flex-direction: column;
  transition: transform var(--wb-duration-slow) var(--wb-ease-out);
}
.wb-drawer--right .wb-drawer__panel { right: 0; transform: translateX(100%); border-left: var(--wb-border-width) solid var(--wb-color-border-soft); }
.wb-drawer--left  .wb-drawer__panel { left: 0;  transform: translateX(-100%); border-right: var(--wb-border-width) solid var(--wb-color-border-soft); }
.wb-drawer.is-open .wb-drawer__panel { transform: translateX(0); }

/* Dropdown ----------------------------------------------------------------- */
.wb-dropdown {
  position: relative;
  display: inline-block;
}
.wb-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  padding: var(--wb-space-2);
  list-style: none;
  margin: 0;
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border-soft);
  border-radius: var(--wb-radius-md);
  box-shadow: var(--wb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity var(--wb-duration-base) var(--wb-ease),
    transform var(--wb-duration-base) var(--wb-ease),
    visibility 0s linear var(--wb-duration-base);
  z-index: var(--wb-z-dropdown);
}
.wb-dropdown.is-open .wb-dropdown__menu,
.wb-dropdown:focus-within .wb-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.wb-dropdown__menu--right { left: auto; right: 0; }

.wb-dropdown__item {
  display: block;
  padding: var(--wb-space-2) var(--wb-space-3);
  font-size: var(--wb-text-sm);
  color: var(--wb-color-text);
  text-decoration: none;
  border-radius: var(--wb-radius-sm);
}
.wb-dropdown__item:hover {
  background: var(--wb-color-bg-soft);
  color: var(--wb-color-ink);
}

.wb-reduce-motion .wb-modal__backdrop,
.wb-reduce-motion .wb-modal__dialog,
.wb-reduce-motion .wb-drawer__backdrop,
.wb-reduce-motion .wb-drawer__panel,
.wb-reduce-motion .wb-dropdown__menu {
  transition: none;
}