/* ==========================================================================
   ASOSH error messages - "official notice": ivory paper notices with a red
   double rule, a brass hairline, Libre Caslon headings and a "Notice" stamp,
   like a printed safety bulletin.
   Loaded last on the dashboard (layouts/sections/css), the login pages and
   the website (front/logistic/layout, front/applications/layout).
   Covers: toastr error/warning toasts, SweetAlert2 error popups (and warning
   popups without a Cancel button), field errors and .alert-danger boxes.
   ========================================================================== */
:root {
  --ase-red: #c8202a;
  --ase-red-700: #a3161f;
  --ase-ivory: #fbfaf6;
  --ase-paper: #f7f4ed;
  --ase-brass: #b08d57;
  --ase-ink: #0b1626;
  --ase-text: #2b3443;
  --ase-line: #e6e0d3;
  --ase-serif: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --ase-serif-text: "Libre Caslon Text", Georgia, serif;
  --ase-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- toasts ---------- */
#toast-container > .toast.toast-error,
#toast-container > .toast.toast-warning {
  position: relative; width: 340px; max-width: calc(100vw - 24px);
  padding: 22px 22px 18px !important; opacity: 1 !important;
  color: var(--ase-text) !important; background: var(--ase-ivory) !important; background-image: none !important;
  border: 1px solid var(--ase-line) !important; border-radius: 2px !important;
  box-shadow: inset 0 4px 0 var(--ase-red), inset 0 7px 0 var(--ase-ivory), inset 0 8px 0 var(--ase-red), 0 22px 44px -22px rgba(11, 22, 38, .4) !important;
  font-family: var(--ase-sans);
}
#toast-container > .toast.toast-warning { box-shadow: inset 0 4px 0 var(--ase-brass), inset 0 7px 0 var(--ase-ivory), inset 0 8px 0 var(--ase-brass), 0 22px 44px -22px rgba(11, 22, 38, .4) !important; }
#toast-container > .toast-error .toast-title,
#toast-container > .toast-warning .toast-title {
  margin: 4px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ase-brass);
  font: 400 20px/1.15 var(--ase-serif); color: var(--ase-ink);
}
#toast-container > .toast-error .toast-title::before,
#toast-container > .toast-warning .toast-title::before {
  content: "Notice \2014"; display: block; margin-bottom: 4px;
  font: 700 10px/1 var(--ase-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ase-red);
}
#toast-container > .toast-warning .toast-title::before { color: var(--ase-brass); }
#toast-container > .toast-error .toast-message,
#toast-container > .toast-warning .toast-message { font: 400 14px/1.6 var(--ase-serif-text); color: var(--ase-text); }
#toast-container > .toast-error .toast-close-button,
#toast-container > .toast-warning .toast-close-button { position: absolute; top: 16px; inset-inline-end: 14px; color: var(--ase-ink); opacity: .45; text-shadow: none; font-family: var(--ase-serif); }
#toast-container > .toast-error .toast-progress { height: 2px; opacity: 1; background: var(--ase-red); }
#toast-container > .toast-warning .toast-progress { height: 2px; opacity: 1; background: var(--ase-brass); }

/* ---------- popups ---------- */
.swal2-popup.swal2-icon-error,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) {
  background: var(--ase-ivory) !important; color: var(--ase-text) !important; font-family: var(--ase-sans);
  border: 1px solid var(--ase-line) !important; border-radius: 2px !important; padding-top: 30px !important;
  box-shadow: inset 0 6px 0 var(--ase-red), inset 0 10px 0 var(--ase-ivory), inset 0 11px 0 var(--ase-red), 0 50px 90px -40px rgba(11, 22, 38, .55) !important;
}
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) { box-shadow: inset 0 6px 0 var(--ase-brass), inset 0 10px 0 var(--ase-ivory), inset 0 11px 0 var(--ase-brass), 0 50px 90px -40px rgba(11, 22, 38, .55) !important; }
.swal2-popup.swal2-icon-error .swal2-title,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-title { font: 400 30px/1.15 var(--ase-serif) !important; color: var(--ase-ink) !important; }
.swal2-popup.swal2-icon-error .swal2-html-container,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-html-container { font: 400 15px/1.6 var(--ase-serif-text) !important; color: var(--ase-text) !important; }
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error {
  border: 3px double var(--ase-red) !important; border-radius: 50%; transform: rotate(-10deg);
  box-shadow: 0 0 0 5px var(--ase-ivory), 0 0 0 6px rgba(200, 32, 42, .35);
}
.swal2-popup.swal2-icon-error .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--ase-red) !important; height: 4px; }
.swal2-popup.swal2-icon-error .swal2-confirm,
.swal2-popup.swal2-icon-warning:has(.swal2-cancel[style*="none"]) .swal2-confirm {
  background: var(--ase-ink) !important; color: var(--ase-ivory) !important; border: 0 !important; border-radius: 2px !important;
  padding: 12px 30px !important; font: 600 12px/1 var(--ase-sans) !important; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--ase-ivory), 0 0 0 2px var(--ase-ink) !important;
}

/* ---------- field errors ---------- */
.invalid-feedback, p.text-danger:not(:empty), small.text-danger:not(:empty), label.error {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(200, 32, 42, .35);
  color: var(--ase-red) !important; font: italic 400 13.5px/1.45 var(--ase-serif-text);
}
.invalid-feedback::before, p.text-danger:not(:empty)::before, small.text-danger:not(:empty)::before, label.error::before {
  content: "\2014\00a0"; font-style: normal; color: var(--ase-red);
}
body.dark-only .invalid-feedback, body.dark-only p.text-danger:not(:empty) { color: #ff8f95 !important; }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--ase-red) !important; background-image: none !important;
  box-shadow: 0 3px 0 -1px var(--ase-ivory), 0 4px 0 -1px var(--ase-red) !important;
}

/* ---------- boxed alerts ---------- */
.alert.alert-danger {
  position: relative; padding: 16px 20px; padding-inline-start: 26px;
  color: var(--ase-text) !important; background: var(--ase-ivory) !important; font: 400 14.5px/1.6 var(--ase-serif-text);
  border: 1px solid var(--ase-line) !important; border-radius: 2px !important;
  box-shadow: inset 4px 0 0 var(--ase-red), inset 7px 0 0 var(--ase-ivory), inset 8px 0 0 var(--ase-red);
}
[dir="rtl"] .alert.alert-danger { box-shadow: inset -4px 0 0 var(--ase-red), inset -7px 0 0 var(--ase-ivory), inset -8px 0 0 var(--ase-red); }
.alert.alert-danger::before {
  content: "Notice"; display: block; margin-bottom: 4px;
  font: 700 10px/1 var(--ase-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ase-red);
}
.alert.alert-danger strong { font-family: var(--ase-serif); font-weight: 400; color: var(--ase-ink); }
