/* =========================================================
   App Toast (ALWAYS ON TOP)
========================================================= */

/* ===============================
   Variables
   =============================== */
:root{
  --toast-top: 8px;
  --toast-right: 8px;

  /* 🔥 สูงกว่า modal/backdrop ของ Bootstrap */
  --toast-z: 11000;
}

/* ===============================
   Container (KEY PART)
   =============================== */
.toast-container{
  position: fixed !important;
  top: var(--toast-top);
  right: var(--toast-right);
  left: auto;
  bottom: auto;

  z-index: var(--toast-z) !important;

  width: min(360px, 100vw);
  padding: 0;
  margin: 0;

  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;

  /* 🔥 กัน stacking context จาก parent */
  isolation: isolate;
}

/* ให้ toast คลิกได้ */
.toast-container .toast{
  pointer-events: auto;
  margin: 0;
  position: relative;
  z-index: var(--toast-z);
}

/* ===============================
   Toast Card
   =============================== */
.toast{
  border-radius: 14px;
  border: 0;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* ===============================
   Header
   =============================== */
.toast-header{
  border: 0;
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
}

/* ===============================
   Body
   =============================== */
.toast-body{
  background: #ffffff;
  padding: 12px 14px;
}

.toast-body .fw-bold{
  font-size: 0.95rem;
}

.toast-body .text-secondary{
  font-size: 0.85rem;
}

/* ===============================
   Themes
   =============================== */
.toast-success .toast-header{ background:#198754; }
.toast-error   .toast-header{ background:#dc3545; }
.toast-info    .toast-header{ background:#0d6efd; }

/* ===============================
   Dark Mode
   =============================== */
html[data-theme="dark"] .toast-body{
  background: rgba(17,25,40,.95);
  color: #e5e7eb;
}

html[data-theme="dark"] .toast-body .text-secondary{
  color: #9ca3af !important;
}

/* ===============================
   Mobile / Safe-area
   =============================== */
@supports (padding: max(0px)) {
  .toast-container{
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}