/* ==========================================================================
   Boomi Insights — Overlays (2a)
   Alert bands · Modal · Drawer
   ========================================================================== */

/* ---------- Alert band --------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: 11px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  font-size: var(--fs-base);
}
.alert__icon {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--bg-muted);
  color: var(--fg-secondary);
}
.alert__icon svg { width: 15px; height: 15px; }
.alert__body { min-width: 0; flex: 1 1 auto; }
.alert__title { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.alert__text { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 1px; line-height: 1.5; }
.alert__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }

.alert--crit { background: var(--crit-bg); border-color: var(--crit-bd); }
.alert--crit .alert__icon { background: rgba(199, 54, 66, 0.14); color: var(--crit-fg); }
.alert--crit .alert__title { color: var(--crit-fg); }
.alert--warn { background: var(--warn-bg); border-color: var(--warn-bd); }
.alert--warn .alert__icon { background: rgba(176, 112, 12, 0.16); color: var(--warn-fg); }
.alert--warn .alert__title { color: var(--warn-fg); }
.alert--ok { background: var(--ok-bg); border-color: var(--ok-bd); }
.alert--ok .alert__icon { background: rgba(21, 128, 94, 0.14); color: var(--ok-fg); }
.alert--ok .alert__title { color: var(--ok-fg); }
.alert--info { background: var(--info-bg); border-color: var(--info-bd); }
.alert--info .alert__icon { background: rgba(34, 102, 196, 0.14); color: var(--info-fg); }
.alert--info .alert__title { color: var(--info-fg); }

/* ---------- Overlay + Modal --------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-9);
  background: rgba(11, 23, 38, 0.48);
  backdrop-filter: blur(1.5px);
  animation: fade-in var(--dur-2) var(--ease);
  overflow-y: auto;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.modal {
  width: 100%;
  max-width: 560px;
  background: var(--bg-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  animation: rise-in var(--dur-3) var(--ease-out);
  margin: auto;
}
.modal--sm { max-width: 420px; }
.modal--lg { max-width: 780px; }
.modal--xl { max-width: 1040px; }

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--bd-soft);
}
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.modal__sub { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; }
.modal__head .icon-btn { margin-left: auto; }
.modal__body { padding: 18px; max-height: min(66vh, 640px); overflow-y: auto; }
.modal__body--flush { padding: 0; }
.modal__foot {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 13px 18px;
  border-top: 1px solid var(--bd-soft);
  background: var(--bg-subtle);
}

/* ---------- Drawer ------------------------------------------------------- */
.drawer-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  justify-content: flex-end;
  background: rgba(11, 23, 38, 0.44);
  animation: fade-in var(--dur-2) var(--ease);
}
.drawer {
  width: min(620px, 100%);
  height: 100%;
  background: var(--bg-surface);
  border-left: 1px solid var(--bd);
  box-shadow: var(--sh-xl);
  display: flex;
  flex-direction: column;
  animation: slide-in var(--dur-3) var(--ease-out);
}
.drawer--wide { width: min(880px, 100%); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }

.drawer__head {
  flex: 0 0 auto;
  padding: 15px 18px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  background: var(--bg-subtle);
}
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.drawer__foot {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-top: 1px solid var(--bd);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}


/* ==========================================================================
   Boomi Insights — Toast · States · Progress · Tooltip
   ========================================================================== */

.toast-host {
  position: fixed;
  right: var(--s-9);
  bottom: var(--s-9);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  min-width: 300px;
  max-width: 420px;
  padding: 11px 13px;
  border: 1px solid var(--bd);
  border-left: 3px solid var(--n-400);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--sh-lg);
  animation: rise-in var(--dur-3) var(--ease-out);
  font-size: var(--fs-base);
}
.toast--ok { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
.toast--crit { border-left-color: var(--crit); }
.toast--info { border-left-color: var(--brand-500); }
.toast__icon { flex: 0 0 auto; color: var(--fg-muted); margin-top: 1px; }
.toast__icon svg { width: 16px; height: 16px; }
.toast--ok .toast__icon { color: var(--ok); }
.toast--warn .toast__icon { color: var(--warn); }
.toast--crit .toast__icon { color: var(--crit); }
.toast--info .toast__icon { color: var(--brand-500); }
.toast__body { min-width: 0; flex: 1 1 auto; }
.toast__title { font-weight: var(--fw-bold); }
.toast__text { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 1px; }

/* ---------- States ------------------------------------------------------- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-12) var(--s-9);
  text-align: center;
}
.state__icon {
  width: 46px; height: 46px;
  border-radius: var(--r-xl);
  display: grid; place-items: center;
  background: var(--bg-muted);
  color: var(--fg-muted);
  margin-bottom: var(--s-2);
}
.state__icon svg { width: 22px; height: 22px; }
.state__title { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.state__text { font-size: var(--fs-base); color: var(--fg-muted); max-width: 52ch; line-height: var(--lh-relaxed); }
.state__actions { display: flex; gap: var(--s-4); margin-top: var(--s-2); }
.state--error .state__icon { background: var(--crit-bg); color: var(--crit-fg); }
.state--error .state__title { color: var(--crit-fg); }
.state--compact { padding: var(--s-9) var(--s-7); }

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-muted);
  border-radius: var(--r-md);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton--text { height: 11px; margin: 5px 0; }
.skeleton--title { height: 16px; margin: 6px 0; width: 42%; }
.skeleton--card { height: 92px; border-radius: var(--r-xl); }
.skeleton--row { height: 38px; border-radius: 0; }
.skeleton--chart { height: 220px; border-radius: var(--r-lg); }

.spinner {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--brand-200);
  border-top-color: var(--brand-600);
  animation: spin 0.7s linear infinite;
}
.spinner--lg { width: 26px; height: 26px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Progress ----------------------------------------------------- */
.progress {
  position: relative;
  height: 6px;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--bg-muted);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--brand-500);
  transition: width var(--dur-3) var(--ease);
}
.progress__bar.is-ok { background: var(--ok); }
.progress__bar.is-warn { background: var(--warn); }
.progress__bar.is-crit { background: var(--crit); }
.progress--sm { height: 4px; }
.progress--lg { height: 9px; }

.meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-4); }
.meter__label { font-size: var(--fs-sm); color: var(--fg-secondary); font-weight: var(--fw-medium); min-width: 0; }
.meter__value { font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.meter .progress { grid-column: 1 / -1; }


/* ---------- Tooltip ------------------------------------------------------ */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: var(--r-md);
  background: #16202b;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
  z-index: var(--z-dropdown);
  box-shadow: var(--sh-lg);
}
.tip:hover::after { opacity: 1; }

/* ---------- Chart frame -------------------------------------------------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid-line { stroke: var(--c-grid); stroke-width: 1; }
.chart__axis-line { stroke: var(--bd); stroke-width: 1; }
.chart__axis-label { fill: var(--c-axis); font-size: 10px; font-family: var(--font-sans); }
.chart__value-label { fill: var(--fg-secondary); font-size: 10px; font-weight: 600; font-family: var(--font-sans); }
.chart-legend { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--fg-secondary); }
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.chart-legend__swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.chart-legend__swatch--line { width: 12px; height: 3px; border-radius: 2px; }
.chart-tip {
  position: absolute;
  z-index: 8;
  min-width: 132px;
  padding: 7px 9px;
  border-radius: var(--r-md);
  background: rgba(16, 32, 51, 0.95);
  color: #fff;
  box-shadow: var(--sh-lg);
  font-size: var(--fs-xs);
  line-height: 1.55;
  white-space: pre-line;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.chart-empty { font-size: var(--fs-sm); color: var(--fg-muted); text-align: center; padding: var(--s-9) 0; }