/* =========================================================
   ControlIO — Overlay Primitives
   Handle: wb-overlays · depends on wb-tokens · Step 3 Pass C

   Modal dialog, drawer/sheet, toast.

   Built on the native <dialog> element. `showModal()` provides
   focus trapping, Escape-to-close, inertness of the background
   and a real ::backdrop with no JavaScript. The audit found
   ZERO native <dialog> usage, one hand-rolled focus trap and
   twelve separate Escape handlers — this replaces that.

   One element, three presentations:
     .wbc-dialog                centred modal
     .wbc-dialog--sheet         bottom sheet (mobile default)
     .wbc-dialog--drawer        edge drawer (cart, filters, nav)
   ========================================================= */

/* ---------------------------------------------------------
   Shared dialog base
   --------------------------------------------------------- */

.wbc-dialog{
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elevation-overlay);
  overscroll-behavior: contain;
}

.wbc-dialog::backdrop{
  background: var(--overlay-bg);
  /* backdrop-filter is progressive: no support simply means a plain scrim. */
  backdrop-filter: blur(2px);
}

/* Animate only when open. Using [open] rather than a JS class keeps the
   state in one place — the element's own. */
.wbc-dialog:not([open]){ display: none; }

/* ----- Centred modal (default) ----- */
.wbc-dialog{
  width: min(100% - var(--space-5) * 2, 34rem);
  margin: auto;
  border-radius: var(--radius-xl);
  animation: wbc-dialog-in var(--duration-normal) var(--ease-out);
}
.wbc-dialog::backdrop{ animation: wbc-fade-in var(--duration-normal) var(--ease-out); }

/* ----- Bottom sheet -----
   For task-light interactions on small screens. A centred box on a phone
   wastes the reachable area and fights the on-screen keyboard. */
.wbc-dialog--sheet{
  width: 100%;
  max-width: none;
  margin: auto auto 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: min(88vh, 44rem);
  animation: wbc-sheet-up var(--duration-slow) var(--ease-out);
}

/* ----- Edge drawer ----- */
.wbc-dialog--drawer{
  width: min(100%, var(--drawer-max));
  max-height: none;
  height: 100%;
  margin: 0 0 0 auto;          /* inline-end */
  border-radius: 0;
  animation: wbc-drawer-in var(--duration-slow) var(--ease-out);
}
.wbc-dialog--drawer.wbc-dialog--start{ margin: 0 auto 0 0; }

@media (min-width: 1512px){
  .wbc-dialog--drawer{ width: min(100%, var(--drawer-max-wide)); }
}
@media (min-width: 2560px){
  .wbc-dialog--drawer{ width: min(100%, var(--drawer-max-ultra)); }
}

/* On phones a side drawer is just a full-height sheet. */
@media (max-width: 767px){
  .wbc-dialog--drawer{ width: 100%; }
  /* A centred modal becomes a bottom sheet unless it opts out. */
  .wbc-dialog:not(.wbc-dialog--drawer):not(.wbc-dialog--keep-centred){
    width: 100%;
    margin: auto auto 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: min(88vh, 44rem);
    animation: wbc-sheet-up var(--duration-slow) var(--ease-out);
  }
}

/* Mobile landscape: 390px of height with browser chrome means a sheet capped at
   88vh still leaves nothing usable. Go full-height instead. */
@media (max-height: 460px) and (orientation: landscape){
  .wbc-dialog{ max-height: 100%; height: 100%; border-radius: 0; margin: 0 auto; }
}

/* ---------------------------------------------------------
   Dialog internals
   --------------------------------------------------------- */

.wbc-dialog__inner{
  display: flex;
  flex-direction: column;
  max-height: inherit;
  height: 100%;
  min-height: 0;
}

.wbc-dialog__header{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.wbc-dialog__title{
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  flex: 1 1 auto;
  min-width: 0;
}

.wbc-dialog__close{ flex: none; margin-inline-start: auto; }

.wbc-dialog__body{
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

.wbc-dialog__footer{
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  flex: none;
  /* Keep the primary action clear of the iOS home indicator. */
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}
.wbc-dialog__footer > .wbc-btn{ flex: 1 1 auto; }

/* Scroll lock. Applied to <html> by the behaviour script; the scrollbar-gutter
   reservation stops the page shifting sideways as the bar disappears. */
html.wbc-scroll-locked{
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ---------------------------------------------------------
   Toast
   Lightweight confirmations only. Never the sole carrier of
   information the customer needs (brief 3.34).
   --------------------------------------------------------- */

.wbc-toaster{
  position: fixed;
  z-index: var(--z-toast);
  inset: auto var(--space-4) var(--space-4) auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(100% - var(--space-4) * 2, 24rem);
  pointer-events: none;
}
@media (max-width: 767px){
  /* Above the bottom tab bar, not under it. */
  .wbc-toaster{
    inset: auto var(--space-3) calc(var(--space-3) + var(--wbc-tabbar-height, 0px)) var(--space-3);
    width: auto;
  }
}

.wbc-toast{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--elevation-overlay);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  pointer-events: auto;
  animation: wbc-toast-in var(--duration-normal) var(--ease-out);
}
.wbc-toast__body{ flex: 1 1 auto; min-width: 0; }
.wbc-toast__title{ font-weight: 700; }
.wbc-toast__meta{ color: var(--toast-muted); }
.wbc-toast__action{
  flex: none;
  background: var(--toast-action-bg);
  color: inherit;
  border: 0;
  border-radius: var(--radius-sm);
  min-height: var(--control-height-sm);
  padding-inline: var(--space-3);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wbc-toast__action:hover{ background: var(--toast-action-bg-hover); }
.wbc-toast__close{
  flex: none;
  background: var(--toast-close-bg);
  color: inherit;
  border: 0;
  border-radius: var(--radius-sm);
  min-width: var(--control-height-sm);
  min-height: var(--control-height-sm);
  cursor: pointer;
}
.wbc-toast__action:focus-visible,
.wbc-toast__close:focus-visible{
  outline: var(--focus-width) solid var(--toast-text);
  outline-offset: var(--focus-offset);
}

.wbc-toast--success{ border-inline-start: 4px solid var(--status-success); }
.wbc-toast--warning{ border-inline-start: 4px solid var(--status-warning); }
.wbc-toast--error{ border-inline-start: 4px solid var(--status-error); }

.wbc-toast.is-leaving{
  animation: wbc-toast-out var(--duration-normal) var(--ease-in) forwards;
}

/* ---------------------------------------------------------
   Motion
   Every animation here is decorative — the interface is fully
   usable with all of them switched off.
   --------------------------------------------------------- */

@keyframes wbc-fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes wbc-dialog-in{
  from{ opacity: 0; transform: translateY(8px) scale(.98) }
  to{ opacity: 1; transform: none }
}
@keyframes wbc-sheet-up{
  from{ transform: translateY(100%) }
  to{ transform: none }
}
@keyframes wbc-drawer-in{
  from{ transform: translateX(100%) }
  to{ transform: none }
}
@keyframes wbc-toast-in{
  from{ opacity: 0; transform: translateY(8px) }
  to{ opacity: 1; transform: none }
}
@keyframes wbc-toast-out{
  from{ opacity: 1 }
  to{ opacity: 0; transform: translateY(4px) }
}

@media (prefers-reduced-motion: reduce){
  .wbc-dialog,
  .wbc-dialog::backdrop,
  .wbc-toast,
  .wbc-toast.is-leaving{ animation: none; }
}