/*
  Themed confirm modal + toast notifications (see wwwroot/js/axis-ui.js). Same
  tokens/laws as site.css - loaded globally from _Layout.cshtml so both the
  player app and the Management area share one implementation.
*/
.axis-modal-overlay {
  position: fixed; inset: 0; background: rgba(32, 30, 29, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 150ms ease;
}
.axis-modal-overlay.open { opacity: 1; pointer-events: auto; }
.axis-modal-card {
  background: var(--bg); border: 2px solid var(--divider); padding: 24px;
  max-width: 360px; width: calc(100% - 48px);
  transform: translateY(8px); transition: transform 150ms ease;
}
.axis-modal-overlay.open .axis-modal-card { transform: translateY(0); }
.axis-modal-msg { margin: 0 0 18px; font-size: 15px; color: var(--text); font-family: var(--font-heading); font-weight: 600; }
.axis-modal-actions { display: flex; gap: 10px; }
.axis-modal-actions .btn { flex: 1; justify-content: center; }

.axis-toast-stack {
  position: fixed; bottom: 20px; right: 20px; z-index: 1100;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.axis-toast {
  background: var(--text); color: var(--bg); border: 2px solid var(--divider);
  padding: 13px 16px; font-family: var(--font-heading); font-weight: 700; font-size: 13.5px;
  opacity: 0; transform: translateX(12px); transition: opacity 200ms ease, transform 200ms ease;
}
.axis-toast.in { opacity: 1; transform: translateX(0); }
.axis-toast-error { background: var(--accent); color: #fff; border-color: var(--accent); }

@media (max-width: 480px) {
  .axis-toast-stack { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}