/*
 * Blivos shared UI styling: the global toast stack and the SweetAlert2 dialogs.
 *
 * Both are re-pointed at Bootstrap's CSS variables rather than carrying their
 * own palette, so they follow whatever theme AdminLTE is in without a separate
 * dark stylesheet.
 */

/* ── Toast stack ─────────────────────────────────────────────────────────── */

.blivos-toasts {
  position: fixed;
  top: 4.25rem; /* clears the fixed navbar */
  right: 1rem;
  z-index: 1090; /* above modals' backdrop, below SweetAlert2 */
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(24rem, calc(100vw - 2rem));
}

.blivos-toast {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius);
  border-left: 3px solid var(--bs-secondary) !important;
}

.blivos-toast.accent-success { border-left-color: var(--bs-success) !important; }
.blivos-toast.accent-danger  { border-left-color: var(--bs-danger) !important; }
.blivos-toast.accent-warning { border-left-color: var(--bs-warning) !important; }
.blivos-toast.accent-info    { border-left-color: var(--bs-info) !important; }

.blivos-toast .toast-body {
  font-size: .875rem;
  line-height: 1.45;
  padding: .75rem .875rem;
}

.blivos-toast-icon {
  font-size: 1rem;
  line-height: 1.35;
  flex-shrink: 0;
}

.blivos-toast .btn-close {
  --bs-btn-close-opacity: .4;
  flex-shrink: 0;
  padding: .25rem;
}

@media (max-width: 575.98px) {
  .blivos-toasts {
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

/* ── SweetAlert2 dialogs ─────────────────────────────────────────────────── */

.swal2-popup.blivos-dialog {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg, .5rem);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.swal2-popup .swal2-title,
.swal2-popup .swal2-html-container {
  color: var(--bs-body-color);
}

.swal2-popup .swal2-title {
  font-size: 1.25rem;
}

.swal2-popup .swal2-html-container {
  font-size: .9375rem;
}

.swal2-container .swal2-actions {
  gap: .5rem;
}

/*
 * SweetAlert2 colours .swal2-confirm / .swal2-cancel from its own custom
 * properties even with buttonsStyling off, which overrode the Bootstrap classes
 * and made an outline button render solid grey. Handing those properties back
 * to Bootstrap's button variables lets any .btn-* variant look right.
 */
.swal2-popup .swal2-styled.btn,
.swal2-popup .swal2-confirm.btn,
.swal2-popup .swal2-cancel.btn,
.swal2-popup .swal2-deny.btn {
  background-color: var(--bs-btn-bg);
  border: var(--bs-border-width) solid var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  box-shadow: none;
}

.swal2-popup .swal2-confirm.btn:hover,
.swal2-popup .swal2-cancel.btn:hover,
.swal2-popup .swal2-deny.btn:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.swal2-popup .btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}