/* ============================================================
   DevPortal — Overlays, Menus, Stepper, Toasts
   ============================================================ */

/* ---------- Overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--overlay); backdrop-filter: blur(2px);
  display: flex; animation: fadeIn .18s ease both;
}
.overlay:has(.modal) { align-items: center; justify-content: center; padding: var(--space-5); }
.overlay:has(.drawer) { justify-content: flex-end; }

/* ---------- Modal ---------- */
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-hd {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-5); border-bottom: 1px solid var(--border);
}
.modal-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0; }
.modal-ico svg { width: 18px; height: 18px; }
.modal-title { font-size: var(--fs-lg); font-weight: 700; }
.modal-body { padding: var(--space-5); overflow: auto; }
.modal-ft { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-2); }

/* ---------- Drawer ---------- */
.drawer {
  background: var(--surface); height: 100%; max-width: 100vw;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: slideInRight .26s cubic-bezier(.3,.7,.4,1) both;
}
.drawer-hd { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border); }
.drawer-body { flex: 1; overflow: auto; padding: var(--space-5); }
.drawer-ft { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-2); }

/* ---------- Dropdown menu ---------- */
.menu-pop {
  position: absolute; top: calc(100% + 6px); z-index: 200;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  padding: var(--space-2); min-width: 160px;
}
.menu-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: 0; background: transparent;
  border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; text-align: left; transition: background .1s;
}
.menu-item svg { width: 15px; height: 15px; color: var(--text-3); }
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--err-fg); }
.menu-item.danger svg { color: var(--err-fg); }
.menu-item.danger:hover { background: var(--err-bg); }
.menu-sc { font-size: var(--fs-2xs); color: var(--text-3); font-family: var(--font-mono); }
.menu-sep { height: 1px; background: var(--border); margin: var(--space-2) calc(var(--space-2) * -1); }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.step { display: flex; align-items: center; gap: var(--space-3); border: 0; background: transparent; padding: 0; cursor: default; }
.step.done { cursor: pointer; }
.step-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700;
  background: var(--surface-3); color: var(--text-3);
  border: 2px solid transparent; transition: all .2s;
}
.step-dot svg { width: 14px; height: 14px; }
.step.active .step-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-ring); }
.step.done .step-dot { background: var(--accent-soft); color: var(--accent); }
.step-meta { display: flex; flex-direction: column; line-height: 1.25; }
.step-lbl { font-size: var(--fs-sm); font-weight: 700; color: var(--text-3); white-space: nowrap; }
.step-sub { font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap; }
.step.active .step-lbl, .step.done .step-lbl { color: var(--text); }
.step-line { flex: 1; height: 2px; background: var(--border-strong); border-radius: 2px; min-width: 16px; transition: background .3s; }
.step-line.done { background: var(--accent); }

/* ---------- Toasts ---------- */
.toast-wrap {
  position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  z-index: 2000; display: flex; flex-direction: column; gap: var(--space-3);
  width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}
.toast-ico { flex-shrink: 0; margin-top: 1px; }
.toast-ico svg { width: 18px; height: 18px; }
.toast-title { font-size: var(--fs-sm); font-weight: 700; }
.toast-body { font-size: var(--fs-xs); color: var(--text-2); }