/* =============================================================
   DESIGN SYSTEM · FORM VALIDATION
   -------------------------------------------------------------
   Presentation layer for static/js/ds-validate.js. It ONLY styles
   state classes that the engine adds/removes — it never hides,
   moves or resizes an existing control, so no screen can break by
   loading this file.

   State classes (all namespaced `dsv-`):
     .dsv-invalid        → on the field that failed
     .dsv-error          → the inline message element (engine-created)
     .dsv-req-mark       → the red asterisk appended to a label
     .dsv-shake          → one-shot attention animation
   ============================================================= */

/* ---------- the failing control -------------------------------------- */
.dsv-invalid,
.form-control.dsv-invalid,
select.dsv-invalid,
textarea.dsv-invalid {
  border-color: var(--danger, #dc3545) !important;
  background-color: var(--danger-soft, rgba(220, 53, 69, 0.12)) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.14) !important;
}

.dsv-invalid:focus,
.form-control.dsv-invalid:focus {
  border-color: var(--danger, #dc3545) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.26) !important;
}

/* Third-party widgets that replace the native control.
   The real <select> is hidden by the plugin, so paint the wrapper. */
.dsv-invalid + .chosen-container .chosen-single,
.dsv-invalid + .chosen-container .chosen-choices,
.dsv-invalid + .select2-container .select2-selection {
  border-color: var(--danger, #dc3545) !important;
  background-color: var(--danger-soft, rgba(220, 53, 69, 0.12)) !important;
}

/* ---------- inline message ------------------------------------------- */
.dsv-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 2px 0;
  padding: 0;
  font-family: var(--font-ui, 'Segoe UI', Tahoma, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--danger, #dc3545);
  animation: dsv-fade-in 0.18s ease both;
}

.dsv-error::before {
  content: "\26A0";           /* ⚠ — no icon-font dependency */
  font-size: 13px;
  line-height: 1;
}

/* ---------- required marker on labels -------------------------------- */
.dsv-req-mark {
  margin: 0 3px;
  color: var(--danger, #dc3545);
  font-weight: 700;
  user-select: none;
}

/* ---------- attention animation -------------------------------------- */
.dsv-shake { animation: dsv-shake 0.32s ease both; }

@keyframes dsv-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

@keyframes dsv-fade-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- toast summary -------------------------------------------- */
/* SweetAlert2 toast, themed to match the app instead of SWAL defaults. */
.dsv-toast.swal2-popup {
  font-family: var(--font-base, 'Cairo', 'Segoe UI', sans-serif);
  border-inline-start: 4px solid var(--danger, #dc3545);
  border-radius: var(--radius-medium, 10px);
  box-shadow: var(--shadow-large, 0 12px 32px rgba(16, 24, 40, 0.12));
}

.dsv-toast .swal2-title {
  font-size: 15px !important;
  font-weight: 700;
}

/* ---------- dark mode ------------------------------------------------- */
html[data-theme="dark"] .dsv-invalid,
html[data-theme="dark"] .form-control.dsv-invalid {
  background-color: rgba(220, 53, 69, 0.18) !important;
  color: var(--text-on-dark, #e9ecf1) !important;
}

html[data-theme="dark"] .dsv-error { color: #ff8a94; }
html[data-theme="dark"] .dsv-req-mark { color: #ff8a94; }

/* ---------- accessibility -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dsv-shake,
  .dsv-error { animation: none !important; }
}

/* Never let the message widen a column and break an existing layout. */
.dsv-error { max-width: 100%; overflow-wrap: anywhere; }

/* Printing a screen should not carry validation chrome onto paper. */
@media print {
  .dsv-error,
  .dsv-req-mark { display: none !important; }
  .dsv-invalid  { border-color: inherit !important;
                  background-color: transparent !important;
                  box-shadow: none !important; }
}