/* Toast notifications.

   iziToast ships a plain white card with a default icon and library
   type sizes. Next to the rest of the dashboard -- layered depth, Onest,
   themed surfaces -- it read as a component from a different product.

   Loaded from partials/notify.blade.php, which every layout includes,
   so this governs auth pages and the legacy frontend as well as the
   dashboard. That is deliberate: a toast is the same object wherever it
   appears, and the old one clashed on those pages too.

   Self-contained tokens rather than a dependency on dashboard-chrome.css,
   because that file only loads on the dashboard shell -- referencing its
   variables here would leave the toast unstyled on /user/login. */

:root {
  --toast-surface: 0 0% 100%;
  --toast-ink: 220 22% 10%;
  --toast-ink-muted: 220 12% 42%;
  --toast-line: 220 20% 12%;
  --toast-line-alpha: 0.1;
  --toast-shadow:
    0 1px 2px hsl(220 22% 10% / 0.06),
    0 8px 20px -12px hsl(220 22% 10% / 0.2),
    0 28px 56px -32px hsl(220 22% 10% / 0.3);
}

/* Scoped the same way the rest of the dark palette is: to the restyled
   shell. A dark toast floating over a page that is still light-only
   would be the same bleed problem the theme tokens already avoid. */
html[data-theme="dark"] body.kt-dash {
  --toast-surface: 222 20% 13%;
  --toast-ink: 210 30% 96%;
  --toast-ink-muted: 215 15% 68%;
  --toast-line: 210 30% 96%;
  --toast-line-alpha: 0.13;
  --toast-shadow:
    0 1px 2px hsl(0 0% 0% / 0.45),
    0 8px 20px -12px hsl(0 0% 0% / 0.6),
    0 28px 56px -30px hsl(0 0% 0% / 0.75);
}

/* ================= The card ================= */

.iziToast {
  background: hsl(var(--toast-surface) / 0.92) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid hsl(var(--toast-line) / var(--toast-line-alpha)) !important;
  border-radius: 14px;
  box-shadow: var(--toast-shadow);
  padding: 14px 44px 14px 0;
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.iziToast > .iziToast-body {
  gap: 13px;
  padding-left: 14px !important;
}

/* ================= Type ================= */

.iziToast > .iziToast-body .iziToast-texts {
  gap: 2px;
}

.iziToast > .iziToast-body .iziToast-title {
  color: hsl(var(--toast-ink));
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.iziToast > .iziToast-body .iziToast-message {
  color: hsl(var(--toast-ink-muted));
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

/* ================= Icon chip =================
   The semantic colours stay -- green/red/amber/blue carry meaning, and
   flattening them to the brand palette would cost the user the fastest
   signal the toast has. What changes is the chip around them: a squarer
   radius matching the rest of the system, and tints that hold up on a
   dark surface as well as a light one. */

.iziToast .iziToast-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px;
  padding: 0;
  font-size: 16px;
  flex: none;
}

.iziToast.iziToast-color-green .iziToast-icon {
  background: hsl(152 60% 45% / 0.16);
}

.iziToast.iziToast-color-red .iziToast-icon {
  background: hsl(0 82% 53% / 0.16);
}

.iziToast.iziToast-color-blue .iziToast-icon {
  background: hsl(205 88% 53% / 0.16);
}

.iziToast.iziToast-color-orange .iziToast-icon {
  background: hsl(30 100% 63% / 0.18);
}

/* ================= Close + progress ================= */

.iziToast > .iziToast-close {
  width: 38px;
  opacity: 1;
  color: hsl(var(--toast-ink-muted));
  transition: color 0.18s ease;
}

.iziToast > .iziToast-close:hover,
.iziToast > .iziToast-close:focus-visible {
  color: hsl(var(--toast-ink));
}

.iziToast > .iziToast-progressbar {
  background: transparent;
}

.iziToast > .iziToast-progressbar > div {
  height: 3px;
  border-radius: 0 0 14px 14px;
  opacity: 0.85;
}

/* The library paints a hairline across the top of the card; with a real
   border and shadow now doing that job it just reads as a seam. */
.iziToast::after {
  display: none !important;
}

/* ================= Placement ================= */

.iziToast-wrapper {
  gap: 8px;
  padding: 14px;
}

/* Below the bottom-nav breakpoint a top-right toast is fine, but the
   card should not run edge to edge on a narrow screen. */
@media screen and (max-width: 575px) {
  .iziToast-wrapper {
    padding: 10px;
  }

  .iziToast {
    padding-right: 38px;
  }

  .iziToast > .iziToast-body .iziToast-title,
  .iziToast > .iziToast-body .iziToast-message {
    font-size: 12.5px;
  }
}

/* Blur is the most expensive thing the toast does, and on small screens
   it buys least -- same call already made for the header and the
   content surfaces. */
@media screen and (max-width: 767px) {
  .iziToast {
    background: hsl(var(--toast-surface)) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iziToast > .iziToast-close {
    transition: none;
  }
}