/* ==========================================================================
   ASEEE error messages - "diagnostic console": dark circuit-grid panels,
   JetBrains Mono, an "ERR::" status code and a red signal trace, like a
   fault read-out on an instrument.
   Loaded last on the dashboard (layouts/sections/css), the login pages,
   the website (front/layout) and the user portal (user/layout).
   Covers: toastr error/warning toasts, SweetAlert2 error popups (and warning
   popups without a Cancel button), field errors and .alert-danger boxes.
   ========================================================================== */
:root {
  --axe-red: #ff4d57;
  --axe-red-deep: #c8262d;
  --axe-amber: #ffb547;
  --axe-panel: #071230;
  --axe-panel-2: #0b1838;
  --axe-line: rgba(120, 170, 255, .16);
  --axe-text: #c9d6f2;
  --axe-white: #e9efff;
  --axe-field: #d0212a;
  --axe-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --axe-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --axe-grid: linear-gradient(rgba(120, 170, 255, .06) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(120, 170, 255, .06) 1px, transparent 1px) 0 0 / 16px 16px;
}
body.dark-only, body.ax-body { --axe-field: #ff6b73; }
@keyframes axe-blink { 50% { opacity: 0; } }
@keyframes axe-scan { from { background-position: -120px 0; } to { background-position: 360px 0; } }

/* ---------- toasts ---------- */
#toast-container > .toast.toast-error,
#toast-container > .toast.toast-warning {
  position: relative; width: 360px; max-width: calc(100vw - 24px); overflow: hidden;
  padding: 14px 40px 16px 20px !important; padding-inline-start: 20px !important; padding-inline-end: 40px !important; opacity: 1 !important;
  color: var(--axe-text) !important; background: var(--axe-grid), linear-gradient(160deg, var(--axe-panel-2), var(--axe-panel)) !important;
  border: 1px solid var(--axe-line) !important; border-inline-start: 3px solid var(--axe-red) !important; border-radius: 10px !important;
  box-shadow: 0 0 0 1px rgba(255, 77, 87, .12), 0 24px 54px -22px rgba(0, 0, 0, .8), -6px 0 24px -14px var(--axe-red) !important;
  font-family: var(--axe-mono);
}
#toast-container > .toast.toast-warning { border-inline-start-color: var(--axe-amber) !important; box-shadow: 0 0 0 1px rgba(255, 181, 71, .14), 0 24px 54px -22px rgba(0, 0, 0, .8), -6px 0 24px -14px var(--axe-amber) !important; }
#toast-container > .toast.toast-error::before,
#toast-container > .toast.toast-warning::before {
  content: "ERR::0x1F  FAULT"; display: block; margin-bottom: 8px; white-space: pre;
  font: 600 10.5px/1 var(--axe-mono); letter-spacing: .16em; color: var(--axe-red);
}
#toast-container > .toast.toast-warning::before { content: "WRN::0x0C  CHECK"; color: var(--axe-amber); }
#toast-container > .toast.toast-error::after,
#toast-container > .toast.toast-warning::after {
  content: ""; position: absolute; top: 15px; inset-inline-end: 38px; width: 7px; height: 11px; background: var(--axe-red); animation: axe-blink 1s steps(1) infinite;
}
#toast-container > .toast.toast-warning::after { background: var(--axe-amber); }
#toast-container > .toast-error .toast-title,
#toast-container > .toast-warning .toast-title { font: 700 16px/1.25 var(--axe-display); color: var(--axe-white); margin-bottom: 4px; }
#toast-container > .toast-error .toast-message,
#toast-container > .toast-warning .toast-message { font-size: 12.5px; line-height: 1.6; color: var(--axe-text); }
#toast-container > .toast-error .toast-message::before,
#toast-container > .toast-warning .toast-message::before { content: "> "; color: var(--axe-red); }
#toast-container > .toast-warning .toast-message::before { color: var(--axe-amber); }
#toast-container > .toast-error .toast-close-button,
#toast-container > .toast-warning .toast-close-button { position: absolute; top: 9px; inset-inline-end: 12px; color: var(--axe-white); opacity: .55; text-shadow: none; font-family: var(--axe-mono); }
#toast-container > .toast-error .toast-progress {
  height: 2px; opacity: 1; background: linear-gradient(90deg, transparent, var(--axe-red) 40%, #fff 50%, var(--axe-red) 60%, transparent) no-repeat, var(--axe-red-deep);
  background-size: 120px 100%, auto; animation: axe-scan 1.4s linear infinite;
}
#toast-container > .toast-warning .toast-progress { height: 2px; opacity: 1; background: var(--axe-amber); }

/* ---------- popups ---------- */
.swal2-popup.swal2-icon-error,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) {
  color: var(--axe-text) !important; background: var(--axe-grid), radial-gradient(420px 220px at 50% 0%, rgba(255, 77, 87, .2), transparent 70%), linear-gradient(170deg, var(--axe-panel-2), var(--axe-panel)) !important;
  border: 1px solid var(--axe-line) !important; border-top: 3px solid var(--axe-red) !important; border-radius: 14px !important;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 50px -20px rgba(255, 77, 87, .5) !important; font-family: var(--axe-mono);
}
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) { border-top-color: var(--axe-amber) !important; }
.swal2-popup.swal2-icon-error .swal2-title::before,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-title::before {
  content: "ERR::0x1F"; display: block; margin-bottom: 8px; font: 600 11px/1 var(--axe-mono); letter-spacing: .24em; color: var(--axe-red);
}
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-title::before { content: "WRN::0x0C"; color: var(--axe-amber); }
.swal2-popup.swal2-icon-error .swal2-title,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-title { font: 700 24px/1.25 var(--axe-display) !important; color: var(--axe-white) !important; }
.swal2-popup.swal2-icon-error .swal2-html-container,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-html-container { font: 400 13.5px/1.65 var(--axe-mono) !important; color: var(--axe-text) !important; }
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error {
  border-radius: 12px; border: 1px solid rgba(255, 77, 87, .55) !important; background: rgba(255, 77, 87, .08);
  box-shadow: 0 0 30px -6px rgba(255, 77, 87, .7), inset 0 0 0 4px var(--axe-panel), inset 0 0 0 5px rgba(255, 77, 87, .3);
}
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--axe-red) !important; box-shadow: 0 0 10px var(--axe-red); }
.swal2-popup.swal2-icon-error .swal2-confirm,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-confirm {
  background: transparent !important; color: var(--axe-white) !important; border: 1px solid var(--axe-red) !important; border-radius: 8px !important;
  padding: 11px 26px !important; font: 600 12.5px/1 var(--axe-mono) !important; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 0 18px -6px rgba(255, 77, 87, .8), 0 0 18px -8px var(--axe-red) !important;
}
.swal2-popup.swal2-icon-error .swal2-confirm::before { content: "[ "; color: var(--axe-red); }
.swal2-popup.swal2-icon-error .swal2-confirm::after { content: " ]"; color: var(--axe-red); }

/* ---------- field errors ---------- */
.invalid-feedback, p.text-danger:not(:empty), small.text-danger:not(:empty), label.error {
  margin-top: 6px; color: var(--axe-field) !important; font: 500 12px/1.5 var(--axe-mono); letter-spacing: .01em;
}
.invalid-feedback::before, p.text-danger:not(:empty)::before, small.text-danger:not(:empty)::before, label.error::before {
  content: "\2715 ERR "; margin-inline-end: 4px; padding: 1px 5px; border-radius: 3px;
  background: var(--axe-red-deep); color: #fff; font-size: 10px; letter-spacing: .1em;
}
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--axe-red) !important; background-image: none !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 87, .15), 0 0 18px -6px rgba(255, 77, 87, .7) !important;
}

/* ---------- boxed alerts ---------- */
.alert.alert-danger {
  position: relative; padding: 14px 18px; color: var(--axe-text) !important; font: 400 13px/1.6 var(--axe-mono);
  background: var(--axe-grid), linear-gradient(160deg, var(--axe-panel-2), var(--axe-panel)) !important;
  border: 1px solid var(--axe-line) !important; border-inline-start: 3px solid var(--axe-red) !important; border-radius: 10px !important;
  box-shadow: -6px 0 24px -16px var(--axe-red);
}
.alert.alert-danger::before { content: "ERR::FAULT"; display: block; margin-bottom: 6px; font: 600 10.5px/1 var(--axe-mono); letter-spacing: .2em; color: var(--axe-red); }
.alert.alert-danger strong, .alert.alert-danger a, .alert.alert-danger .alert-link { color: var(--axe-white) !important; }