/* ═══════════════════════════════════════════════════════════════
   Messages for every panel (admin, center, student, login pages)
   Toasts (success / error / warning / info), confirm dialog,
   form validation messages. Used by admin_assets/js/ui-feedback.js
═══════════════════════════════════════════════════════════════ */
:root {
  --uf-success: #16a34a; --uf-success-soft: #ecfdf3; --uf-success-ink: #14532d;
  --uf-error:   #dc2626; --uf-error-soft:   #fef2f2; --uf-error-ink:   #7f1d1d;
  --uf-warning: #d97706; --uf-warning-soft: #fffbeb; --uf-warning-ink: #78350f;
  --uf-info:    #2563eb; --uf-info-soft:    #eff6ff; --uf-info-ink:    #1e3a8a;
  --uf-ink: #1f2430; --uf-ink-2: #4b5263; --uf-border: #e7e9f1; --uf-surface: #fff;
  --uf-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── toasts ── */
.uf-toasts {
  position: fixed; top: 18px; right: 18px; z-index: 100000; display: flex; flex-direction: column; gap: 10px;
  width: min(390px, calc(100vw - 32px)); pointer-events: none;
}
.uf-toast {
  --tone: var(--uf-info); --soft: var(--uf-info-soft); --ink: var(--uf-info-ink);
  pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 40px 14px 14px; border-radius: 14px; background: var(--uf-surface); color: var(--uf-ink);
  border: 1px solid var(--uf-border); border-left: 4px solid var(--tone);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
  font-family: var(--uf-font); font-size: 13.5px; line-height: 1.45;
  transform: translateX(24px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.uf-toast.show { transform: none; opacity: 1; }
.uf-toast.hide { transform: translateX(24px); opacity: 0; }
.uf-toast.success { --tone: var(--uf-success); --soft: var(--uf-success-soft); --ink: var(--uf-success-ink); }
.uf-toast.error   { --tone: var(--uf-error);   --soft: var(--uf-error-soft);   --ink: var(--uf-error-ink); }
.uf-toast.warning { --tone: var(--uf-warning); --soft: var(--uf-warning-soft); --ink: var(--uf-warning-ink); }
.uf-toast-icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--tone);
}
.uf-toast-icon svg { width: 18px; height: 18px; }
.uf-toast-body { min-width: 0; flex: 1; }
.uf-toast-title { font-weight: 700; color: var(--ink); margin: 0 0 2px; font-size: 14px; }
.uf-toast-msg { color: var(--uf-ink-2); word-wrap: break-word; }
.uf-toast-msg p { margin: 0; }
.uf-toast-msg ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.uf-toast-msg li { margin: 2px 0; }
.uf-toast-msg a { color: var(--tone); font-weight: 600; }
.uf-toast-close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent;
  color: #8a90a0; cursor: pointer; font-size: 18px; line-height: 1;
}
.uf-toast-close:hover { background: #f3f4f8; color: var(--uf-ink); }
.uf-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--tone); opacity: .35; width: 100%; transform-origin: left; }
@media (max-width: 575px) { .uf-toasts { top: auto; bottom: 14px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .uf-toast { transition: none; } }

/* ── confirm dialog ── */
.uf-overlay {
  position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .18s ease; font-family: var(--uf-font);
}
.uf-overlay.show { opacity: 1; }
.uf-dialog {
  width: min(420px, 100%); background: var(--uf-surface); border-radius: 18px; padding: 24px; text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3); transform: scale(.96); transition: transform .18s ease;
}
.uf-overlay.show .uf-dialog { transform: none; }
.uf-dialog .uf-toast-icon { margin: 0 auto 12px; width: 52px; height: 52px; border-radius: 16px; }
.uf-dialog .uf-toast-icon svg { width: 26px; height: 26px; }
.uf-dialog h5 { font-size: 17px; font-weight: 700; color: var(--uf-ink); margin: 0 0 6px; }
.uf-dialog p { font-size: 14px; color: var(--uf-ink-2); margin: 0 0 20px; }
.uf-dialog-actions { display: flex; gap: 10px; justify-content: center; }
.uf-btn { min-width: 110px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--uf-border); background: #fff; color: var(--uf-ink); font-weight: 600; cursor: pointer; font-size: 14px; }
.uf-btn:hover { background: #f7f8fc; }
.uf-btn.primary { background: #082a63; border-color: #082a63; color: #fff; }
.uf-btn.danger { background: var(--uf-error); border-color: var(--uf-error); color: #fff; }
.uf-btn.primary:hover, .uf-btn.danger:hover { filter: brightness(1.08); }

/* ── form validation (jQuery Validate + server errors) ── */
.form-control.is-invalid, .form-select.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--uf-error) !important; background-image: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}
.form-control.is-valid, .form-select.is-valid { border-color: #86efac !important; background-image: none !important; }
.uf-field-error, .invalid-feedback.uf-field-error {
  display: flex !important; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--uf-error); font-size: 12.5px; font-weight: 500; line-height: 1.35;
}
.uf-field-error::before {
  content: '!'; flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%; background: var(--uf-error); color: #fff;
  font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.uf-field-error:empty { display: none !important; }
.nav-link.uf-tab-error { color: var(--uf-error) !important; }
.nav-link.uf-tab-error::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--uf-error); margin-left: 6px; vertical-align: middle; }