/* SmartPanel — toast notification redesign
   Overrides assets/plugins/jquery-toast/css/jquery.toast.css.
   Must load AFTER the stock jquery.toast.css. */

/* ---------- Container ---------- */
.jq-toast-wrap {
  z-index: 10050 !important;
  max-width: 380px;
  min-width: 280px;
  pointer-events: none;
  margin: 0;
  padding: 0;
  letter-spacing: normal;
  font-family: 'Poppins', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.jq-toast-wrap.top-right    { top: 20px; right: 20px; left: auto; bottom: auto; }
.jq-toast-wrap.top-left     { top: 20px; left: 20px; right: auto; bottom: auto; }
.jq-toast-wrap.bottom-right { bottom: 20px; right: 20px; top: auto; left: auto; }
.jq-toast-wrap.bottom-left  { bottom: 20px; left: 20px; top: auto; right: auto; }
.jq-toast-wrap.bottom-center,
.jq-toast-wrap.top-center {
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}
.jq-toast-wrap.bottom-center { bottom: 20px; top: auto; }
.jq-toast-wrap.top-center    { top: 20px; bottom: auto; }

@media (max-width: 600px) {
  .jq-toast-wrap {
    max-width: calc(100vw - 24px) !important;
    min-width: 0;
  }
}

/* ---------- Card ---------- */
.jq-toast-single {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 16px 40px 16px 60px;
  border: 0;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  box-shadow:
    0 20px 40px -20px rgba(0, 0, 0, 0.45),
    0 6px 16px -6px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: auto;
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  animation: sp-toast-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes sp-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Left accent stripe (colored per type) */
.jq-toast-single::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
  opacity: 0.9;
}

/* ---------- Heading + message ---------- */
.jq-toast-single h2 {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 3px;
  color: #ffffff;
  background: none;
  letter-spacing: 0;
}

.jq-toast-single {
  /* message text contrast — slightly softer than heading */
  color: rgba(255, 255, 255, 0.86);
}

.jq-toast-single a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  border-bottom: 0;
  padding: 0;
}

.jq-toast-single ul { margin: 4px 0 0 18px; padding: 0; background: none; }
.jq-toast-single ul li { list-style-type: disc; line-height: 1.5; margin: 0; padding: 0; }

/* ---------- Close button ---------- */
.close-jq-toast-single {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 6px;
  transition: color 160ms ease, background 160ms ease;
}
.close-jq-toast-single:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Loader bar ---------- */
.jq-toast-loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  border-radius: 0;
  background: currentColor;
  opacity: 0.85;
}

/* ---------- Icon column ---------- */
.jq-has-icon {
  background-repeat: no-repeat;
  background-position: 18px 16px;
  background-size: 24px 24px;
}

/* Neutralize stock base64 PNGs and per-type stock backgrounds */
.jq-icon-success,
.jq-icon-error,
.jq-icon-warning,
.jq-icon-info {
  background-color: rgba(15, 23, 42, 0.94);
  border-color: transparent;
}

/* Success — emerald */
.jq-icon-success {
  color: #10b981;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='16 9.5 10.8 15 8 12.4'/></svg>");
}
.jq-icon-success h2 { color: #ffffff; }

/* Error — red */
.jq-icon-error {
  color: #ef4444;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
}
.jq-icon-error h2 { color: #ffffff; }

/* Warning — sunrise orange (matches --sun-primary) */
.jq-icon-warning {
  color: #f59e0b;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
.jq-icon-warning h2 { color: #ffffff; }

/* Info — blue */
.jq-icon-info {
  color: #3b82f6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
.jq-icon-info h2 { color: #ffffff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .jq-toast-single {
    animation: sp-toast-fade-in 160ms ease-out both;
  }
  @keyframes sp-toast-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ---------- Light-surface stub (opt-in; not active today) ----------
   Uncomment / toggle by adding class `.theme-light` to <body>.
body.theme-light .jq-toast-single {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(15, 23, 42, 0.82);
  box-shadow:
    0 20px 40px -20px rgba(15, 23, 42, 0.18),
    0 6px 16px -6px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
body.theme-light .jq-toast-single h2 { color: #0f172a; }
body.theme-light .close-jq-toast-single { color: rgba(15, 23, 42, 0.5); }
body.theme-light .close-jq-toast-single:hover { color: #0f172a; background: rgba(15, 23, 42, 0.06); }
*/