/* ==========================================================================
   overlays.css — modals, anchored menus, popovers, toasts
   MEASURED off `Rackman - Modals`: sheet r12 · header pad 18/20 ·
   body pad 20 · footer pad 14/20 above a 1px rule · menu r10 pad 6, item 34 r8
   ========================================================================== */

/* NOT position:relative — this element sits after the app content, so making it a
   containing block pushes every absolutely-positioned overlay down by its own
   offsetTop. Overlays anchor to the viewport with position: fixed instead. */
#overlay-root { position: static; }

/* ---------- scrim + sheet ------------------------------------------------ */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 40, .38);
  display: grid; place-items: center; padding: 24px;
  animation: ov-fade .12s ease-out;
}
.sheet {
  background: var(--white); border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .22);
  max-width: calc(100vw - 48px); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: ov-rise .14s cubic-bezier(.2, .8, .3, 1);
}
.sheet__hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--black-7);
}
.sheet__hd h3 { font-size: 16px; font-weight: 600; color: var(--text-dark); }
.sheet__hd p  { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }
.sheet__hd .col { flex: 1 1 auto; }
.sheet__x {
  width: 28px; height: 28px; flex: none; border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--text-light);
}
.sheet__x:hover { background: var(--grey-light); color: var(--text-dark); }
.sheet__body { padding: 20px; overflow: auto; }
.sheet__ft {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--black-7); background: var(--grey-light);
}

@keyframes ov-fade { from { opacity: 0 } }
@keyframes ov-rise { from { opacity: 0; transform: translateY(8px) scale(.99) } }

/* ---------- anchored menu ------------------------------------------------ */
.menu {
  position: fixed; z-index: 70; min-width: 200px;
  background: var(--white); border: 1px solid var(--black-15);
  border-radius: var(--radius-lg); padding: 6px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
  animation: ov-rise .1s ease-out;
}
.menu__head {
  padding: 6px 10px 4px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--text-light);
}
.menu__item {
  width: 100%; height: 34px; display: flex; align-items: center; gap: 9px;
  padding: 0 10px; border-radius: var(--radius-md); text-align: left;
  font-size: 12.5px; color: var(--text-medium);
}
.menu__item svg { flex: none; color: var(--text-light); }
.menu__item:hover { background: var(--grey-light); color: var(--text-dark); }
.menu__item.is-danger { color: var(--status-red); }
.menu__item.is-danger svg { color: var(--status-red); }
.menu__item.is-danger:hover { background: var(--status-red-tint); }
.menu__gap { width: 15px; flex: none; }
.menu__tick { margin-left: auto; color: var(--wrc-rackman) !important; }
.menu__sep { height: 1px; background: var(--black-7); margin: 5px 4px; }

/* ---------- popover (Data/Info Hover) ------------------------------------ */
.pop {
  position: fixed; z-index: 70; width: 268px;
  background: var(--white); border: 1px solid var(--black-15);
  border-radius: var(--radius-lg); padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
  animation: ov-rise .1s ease-out;
}
.pop__hd {
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-light); padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid var(--black-7);
}
.pop__row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.pop__k { flex: 0 0 104px; font-size: 11px; color: var(--text-light); }
.pop__v { flex: 1 1 auto; font-size: 11.5px; font-weight: 600; color: var(--text-dark);
          text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- toasts ------------------------------------------------------- */
.toasts {
  position: fixed; z-index: 80; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: var(--radius-lg);
  background: var(--text-dark); color: #fff;
  font-size: 12.5px; font-weight: 500;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .28);
  animation: ov-slide .16s cubic-bezier(.2, .8, .3, 1);
  transition: opacity .3s, transform .3s;
}
.toast svg { color: var(--wrc-green-light); }
.toast--info svg { color: var(--wrc-rackman-light); }
.toast.is-out { opacity: 0; transform: translateY(6px); }
@keyframes ov-slide { from { opacity: 0; transform: translateX(12px) } }

/* ---------- form bits the overlays lean on ------------------------------- */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld__k {
  font-size: 9.5px; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-light);
}
.check--row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-medium); }
.searchbar--sm { height: 38px; }
.pad-24 { padding: 24px; }
.mt-16 { margin-top: 16px; }