/* ==========================================================================
   SFR Group — shared UI-kit overlays (toasts.css)
   Toasts · confirm dialog · password show/hide. Used by the staff layout, the auth layout and, optionally, the public
   layout (the only dependency besides tokens.css is Bootstrap's .btn and Bootstrap Icons). Every value falls back to a
   literal so the file also works before tokens.css has loaded.
   CSP note: nothing here is injected at runtime — JS only toggles classes and sets CSS custom properties through CSSOM.
   ========================================================================== */

/* ---------- Toasts ---------- */
.srf-toasts {
  position: fixed;
  z-index: 2000;
  top: calc(var(--srf-topbar-h, 64px) + 12px);
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
.srf-toasts:empty { display: none; }

.srf-toast {
  --_c: var(--srf-info, #175CD3);
  --_bg: var(--srf-info-bg, #EAF1FD);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 6px 14px 14px;
  background: var(--srf-paper, #fff);
  color: var(--srf-ink, #14181F);
  border: 1px solid var(--srf-line-cool, #E3E8F0);
  border-left: 4px solid var(--_c);
  border-radius: var(--srf-radius-md, 12px);
  box-shadow: var(--srf-shadow-3, 0 12px 32px rgba(11, 32, 66, .14));
  font-size: .9375rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--srf-dur-2, 280ms) var(--srf-ease, ease), transform var(--srf-dur-2, 280ms) var(--srf-ease, ease);
}
.srf-toast.is-in { opacity: 1; transform: none; }
.srf-toast.is-leaving { opacity: 0; transform: translateX(24px); }

.srf-toast--success { --_c: var(--srf-success, #12693F); --_bg: var(--srf-success-bg, #EAF6EF); }
.srf-toast--error   { --_c: var(--srf-danger, #B42318);  --_bg: var(--srf-danger-bg, #FDECEA); }
.srf-toast--warning { --_c: var(--srf-warning, #A15C07); --_bg: var(--srf-warning-bg, #FEF3E2); }

.srf-toast__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--_bg);
  color: var(--_c);
  font-size: 1rem;
}
.srf-toast__msg { padding-top: 5px; min-width: 0; overflow-wrap: anywhere; }
.srf-toast__close {
  width: 44px;
  height: 44px;
  margin: -8px 0 -8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--srf-muted, #667085);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--srf-dur-1, 160ms) ease, color var(--srf-dur-1, 160ms) ease;
}
.srf-toast__close:hover { background: var(--srf-navy-50, #F3F6FB); color: var(--srf-ink, #14181F); }
.srf-toast__close:focus-visible { outline: 2px solid var(--srf-navy-700, #1B4180); outline-offset: -2px; }

/* Remaining-time bar; JS sets --srf-toast-ms and toggles .is-paused on hover/focus. */
.srf-toast__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--_c);
  opacity: .35;
  transform-origin: left center;
  animation: srf-toast-bar var(--srf-toast-ms, 5000ms) linear forwards;
}
.srf-toast.is-paused .srf-toast__bar { animation-play-state: paused; }
@keyframes srf-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 575.98px) {
  .srf-toasts {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
  .srf-toast { transform: translateY(16px); }
  .srf-toast.is-leaving { transform: translateY(16px); }
}

/* ---------- Confirm dialog (window.SRF.confirm / data-confirm) ---------- */
.srf-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 19, 39, .58);
  opacity: 0;
  transition: opacity var(--srf-dur-1, 160ms) ease;
}
.srf-dialog-backdrop[hidden] { display: none; }
.srf-dialog-backdrop.is-open { opacity: 1; }

.srf-dialog {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 28px 24px 20px;
  text-align: center;
  background: var(--srf-paper, #fff);
  color: var(--srf-ink, #14181F);
  border-radius: var(--srf-radius-lg, 18px);
  box-shadow: var(--srf-shadow-3, 0 12px 32px rgba(11, 32, 66, .14));
  outline: 0;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity var(--srf-dur-2, 280ms) var(--srf-ease, ease), transform var(--srf-dur-2, 280ms) var(--srf-ease, ease);
}
.srf-dialog-backdrop.is-open .srf-dialog { opacity: 1; transform: none; }

.srf-dialog__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: var(--srf-navy-100, #E6ECF6);
  color: var(--srf-navy-800, #12305F);
}
.srf-dialog--danger .srf-dialog__icon { background: var(--srf-danger-bg, #FDECEA); color: var(--srf-danger, #B42318); }
.srf-dialog__title {
  margin: 0 0 6px;
  font-family: var(--srf-font-heading, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--srf-navy-900, #0B2042);
}
.srf-dialog__msg { margin: 0; color: var(--srf-ink-2, #2B3340); line-height: 1.55; overflow-wrap: anywhere; }
.srf-dialog__actions { display: flex; gap: 10px; margin-top: 22px; }
.srf-dialog__actions .btn { flex: 1 1 0; min-height: 44px; }

/* ---------- Password show/hide ---------- */
.srf-pw { position: relative; display: block; }
.srf-pw > input { padding-right: 48px; }
.srf-pw__btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: transparent;
  color: var(--srf-muted, #667085);
  font-size: 1.05rem;
  cursor: pointer;
  transition: color var(--srf-dur-1, 160ms) ease;
}
.srf-pw__btn:hover { color: var(--srf-navy-800, #12305F); }
.srf-pw__btn:focus-visible { outline: 2px solid var(--srf-navy-700, #1B4180); outline-offset: -4px; }

/* Scroll lock shared by dialogs and the off-canvas menu. */
html.srf-no-scroll, html.srf-no-scroll body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .srf-toast, .srf-toast.is-leaving { transform: none; }
  .srf-dialog { transform: none; }
}