/*
 * Sukud design system - overlays
 * Dialog (bottom sheet on phones), drawer, dropdown menu.
 * Dialogs are native <dialog> elements opened with showModal(), so focus
 * trapping, Escape and the top layer come from the browser; everything
 * visible is drawn here.
 */

/* ======================================================================
 * Dialog
 * ====================================================================== */
.sk-dialog {
  --dw: 480px;
  padding: 0;
  border: 0;
  margin: auto;
  max-width: none;
  max-height: none;
  width: fit-content;
  height: fit-content;
  background: transparent;
  color: var(--sk-fg);
  overflow: visible;
}
.sk-dialog::backdrop {
  background: var(--sk-scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sk-fade-in var(--sk-dur-base) var(--sk-ease-out);
}
.sk-dialog[data-state="closing"]::backdrop { animation: sk-fade-out var(--sk-dur-base) var(--sk-ease-in) forwards; }
.sk-dialog--sm { --dw: 400px; }
.sk-dialog--lg { --dw: 680px; }
.sk-dialog--xl { --dw: 920px; }

.sk-dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(var(--dw), calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  border: 1px solid var(--sk-border);
  border-radius: 20px;
  background: var(--sk-surface-raised);
  box-shadow: var(--sk-shadow-xl), var(--sk-bevel);
  animation: sk-dialog-in var(--sk-dur-slow) var(--sk-ease-spring);
}
@keyframes sk-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.95); } }
.sk-dialog[data-state="closing"] .sk-dialog__panel { animation: sk-scale-out var(--sk-dur-base) var(--sk-ease-in) forwards; }

.sk-dialog__handle { display: none; }
.sk-dialog__head { display: flex; flex-direction: column; gap: 6px; padding: 20px 56px 4px 22px; }
.sk-dialog__title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-dialog__icon { display: inline-flex; flex-shrink: 0; color: var(--t-text); animation: sk-pop 0.5s var(--sk-ease-spring) 0.1s both; }
.sk-dialog__icon .sk-icon { width: 22px; height: 22px; }
.sk-dialog__title { font-family: var(--sk-font-display); font-size: var(--sk-text-2xl); line-height: 1.25; font-weight: var(--sk-weight-bold); letter-spacing: -0.02em; }
.sk-dialog__desc { color: var(--sk-fg-muted); font-size: var(--sk-text-md); line-height: 1.5; }
.sk-dialog__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px; min-height: 0; }
.sk-dialog__body:empty { display: none; }
.sk-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 20px;
}
.sk-dialog__foot--split { justify-content: space-between; }
.sk-dialog__close { position: absolute; top: 16px; right: 14px; z-index: 1; }

/* Phones: the dialog becomes a sheet that rises from the bottom and can be
 * dragged down to dismiss. */
@media (max-width: 639.98px) {
  .sk-dialog:not(.sk-dialog--keep-center) { margin: auto 0 0; width: 100%; }
  .sk-dialog:not(.sk-dialog--keep-center) .sk-dialog__panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border-width: 1px 0 0;
    padding-bottom: var(--sk-safe-bottom);
    animation: sk-sheet-in var(--sk-dur-slow) var(--sk-ease-out);
    transform: translateY(var(--drag, 0));
    transition: transform var(--sk-dur-base) var(--sk-ease-out);
  }
  .sk-dialog:not(.sk-dialog--keep-center) .sk-dialog__panel { transition: transform 380ms var(--sk-ease-spring); }
  .sk-dialog:not(.sk-dialog--keep-center).is-dragging .sk-dialog__panel { transition: none; }
  .sk-dialog:not(.sk-dialog--keep-center)[data-state="closing"] .sk-dialog__panel { animation: sk-sheet-out var(--sk-dur-base) var(--sk-ease-in) forwards; }
  .sk-dialog:not(.sk-dialog--keep-center) .sk-dialog__handle {
    display: block;
    width: 40px; height: 5px;
    margin: 8px auto 0;
    border-radius: 99px;
    background: var(--sk-border-strong);
    touch-action: none;
    cursor: grab;
    position: relative;
  }
  /* A finger-sized grab area around the little bar. */
  .sk-dialog:not(.sk-dialog--keep-center) .sk-dialog__handle::before { content: ''; position: absolute; inset: -14px -80px -10px; }
  .sk-dialog:not(.sk-dialog--keep-center) .sk-dialog__head { touch-action: none; }
  .sk-dialog:not(.sk-dialog--keep-center).is-dragging .sk-dialog__handle { background: var(--sk-fg-subtle); }
  .sk-dialog:not(.sk-dialog--keep-center) .sk-dialog__head { padding-top: 12px; }
  .sk-dialog__foot { flex-direction: column-reverse; }
  .sk-dialog__foot > .sk-btn { width: 100%; }
  .sk-dialog__foot--split { flex-direction: column-reverse; }
}

/* ======================================================================
 * Drawer (side panel; a sheet on phones)
 * ====================================================================== */
.sk-dialog--drawer { margin: 0 0 0 auto; height: 100dvh; }
.sk-dialog--drawer .sk-dialog__panel {
  width: min(var(--dw, 440px), 100vw);
  height: 100dvh;
  max-height: none;
  border-radius: 20px 0 0 20px;
  border-width: 0 0 0 1px;
  animation: sk-slide-in-right var(--sk-dur-slow) var(--sk-ease-out);
}
.sk-dialog--drawer[data-state="closing"] .sk-dialog__panel { animation: sk-slide-out-right var(--sk-dur-base) var(--sk-ease-in) forwards; }
.sk-dialog--drawer .sk-dialog__foot { border-top: 1px solid var(--sk-border-subtle); padding-top: 14px; }
.sk-dialog--drawer-left { margin: 0 auto 0 0; }
.sk-dialog--drawer-left .sk-dialog__panel { border-radius: 0 20px 20px 0; border-width: 0 1px 0 0; animation-name: sk-slide-in-left; }
.sk-dialog--drawer-left[data-state="closing"] .sk-dialog__panel { animation-name: sk-slide-out-left; }
@keyframes sk-slide-in-left { from { transform: translateX(-100%); } }
@keyframes sk-slide-out-left { to { transform: translateX(-100%); } }
@media (max-width: 639.98px) {
  .sk-dialog--drawer:not(.sk-dialog--drawer-left) { margin: auto 0 0; height: auto; }
  .sk-dialog--drawer:not(.sk-dialog--drawer-left) .sk-dialog__panel { height: auto; max-height: 92dvh; border-radius: 22px 22px 0 0; border-width: 1px 0 0; }
  .sk-dialog--drawer-left .sk-dialog__panel { width: min(320px, 86vw); }
}

/* ======================================================================
 * Dropdown menu (panel uses .sk-popover from forms.css)
 * ====================================================================== */
.sk-menu { position: relative; display: inline-flex; }
.sk-menu__panel { min-width: 200px; }
.sk-menu__item { color: var(--sk-fg); text-decoration: none; }
.sk-menu__item .sk-kbd { margin-inline-start: auto; }
.sk-menu__item--danger, .sk-menu__item--danger > .sk-icon { color: var(--sk-red-11); }
.sk-menu__item--danger.is-active { background: var(--sk-red-3); }
.sk-menu__header { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--sk-border-subtle); }
.sk-popover.is-sheet .sk-menu__header { padding: 4px 12px 14px; }
.sk-popover.is-sheet .sk-menu__item { min-height: 50px; }

/* A menu row's shortcut, at its end. */
.sk-menu__hint { margin-inline-start: auto; padding: 1px 6px; border-radius: 6px; background: var(--sk-surface-sunken); font-family: var(--sk-font-mono); font-size: var(--sk-text-2xs); color: var(--sk-fg-muted); }
.sk-menu__form { display: contents; }