/* ===========================================================================
   DTS Lux Transport — unified alert system.

   The custom admin alert (.dash-alert) is the design reference; this file
   makes that same look available on every page (public, customer portal,
   driver portal, admin dashboard) and re-styles the Bootstrap `.alert`
   classes so legacy in-page banners visually match without rewriting
   every template.

   Loaded by:
     core/templates/core/base.html         (public site + customer/driver portal)
     core/templates/core/dashboard/base.html (admin dashboard)

   SweetAlert2 confirmations / toasts are handled site-wide by
   core/static/core/js/dash-confirm.js (loaded in the same base templates).
   =========================================================================== */


/* ---- Canonical .dash-alert (the admin style) -------------------------- */
.dash-alert {
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.87rem;
  line-height: 1.5;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.dash-alert-success {
  background: #dcfce7; color: #15803d; border-color: #16a34a;
}
.dash-alert-danger,
.dash-alert-error {
  background: #fee2e2; color: #b91c1c; border-color: #ef4444;
}
.dash-alert-info {
  background: #dbeafe; color: #1d4ed8; border-color: #3b82f6;
}
.dash-alert-warning {
  background: #fef3c7; color: #b45309; border-color: #f59e0b;
}
.dash-alert-secondary,
.dash-alert-debug {
  background: #f3f4f6; color: #374151; border-color: #9ca3af;
}


/* ---- Bootstrap .alert override — match the admin look ----------------- */
/* Many in-page banners (booking, payments, auth, portal) already use the
   Bootstrap `alert alert-{level}` classes. Re-style them to look identical
   to the .dash-alert variants above so the whole site is visually unified
   without rewriting every template. */
.alert {
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.87rem;
  line-height: 1.5;
  margin-bottom: 16px;
  border: none;
  border-left: 4px solid #9ca3af;
  background: #f3f4f6;
  color: #374151;
}
.alert-success {
  background: #dcfce7 !important; color: #15803d !important;
  border-left-color: #16a34a !important;
}
.alert-danger,
.alert-error {
  background: #fee2e2 !important; color: #b91c1c !important;
  border-left-color: #ef4444 !important;
}
.alert-info {
  background: #dbeafe !important; color: #1d4ed8 !important;
  border-left-color: #3b82f6 !important;
}
.alert-warning {
  background: #fef3c7 !important; color: #b45309 !important;
  border-left-color: #f59e0b !important;
}
.alert-secondary {
  background: #f3f4f6 !important; color: #6b7280 !important;
  border-left-color: #9ca3af !important;
}
/* Keep close-button positioning intact for any inline banner that has one. */
.alert .alert-close, .alert .btn-close { margin-left: auto; }


/* ---- Flash-message stack (Django messages) ---------------------------- */
/* .toast-stack is the fixed flash-message container in base.html.
   dash-confirm.js converts any .dash-alert[data-toast] inside it to a
   SweetAlert2 toast, so this animation only ever shows for the brief
   moment before SweetAlert takes over (and as a fail-safe fallback). */
.toast-stack .dash-alert,
.toast-stack .alert {
  box-shadow: 0 12px 30px rgba(14, 15, 18, 0.18);
  animation: dts-alert-in 0.35s ease both;
}
@keyframes dts-alert-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---- SweetAlert2 polish — brand-consistent shadow + radius ----------- */
.swal2-popup { border-radius: 14px !important; }
.swal2-toast { box-shadow: 0 12px 30px rgba(14, 15, 18, 0.22) !important; }
.swal2-toast .swal2-title { font-weight: 600 !important; }


/* ---- Field error / help text (public/portal forms) -------------------- */
/* style.css already defines these for public pages and dashboard.css for
   the admin dashboard form. The rules below are defensive defaults — they
   are a no-op when the page-specific rules win, and keep field errors
   visible when an unusual template renders without those stylesheets. */
.field-error { color: #c0392b; font-size: 0.8rem; margin-top: 4px; }
.help-text   { color: #6b7280; font-size: 0.78rem; margin-top: 4px; }