/* ═══ Platform UI — shared replacements for native browser popups
   (confirm() dialogs, "Заполните это поле" validation balloons), so every
   page across the site uses the same dark/purple design instead of default
   OS chrome. Included site-wide via base.html (admin) and base_student.html
   (everything else). Paired with /static/js/platform-ui.js. (20.08.2026) ═══ */

/* ─── confirm dialog (replaces confirm()) ─── */
.pf-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8, 8, 10, 0.7); backdrop-filter: blur(4px);
}
.pf-confirm-overlay.open { display: flex; }
.pf-confirm-box {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  font-family: var(--font-body);
}
.pf-confirm-icon {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: rgba(248,113,113,0.12); color: var(--red);
}
.pf-confirm-icon svg { width: 22px; height: 22px; }
.pf-confirm-title { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.45; margin-bottom: 22px; }
.pf-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.pf-confirm-cancel, .pf-confirm-ok {
  border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body);
}
.pf-confirm-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 600; }
.pf-confirm-cancel:hover { color: var(--text); border-color: var(--text-dim); }
.pf-confirm-ok { background: var(--red); border: none; color: #200; }
.pf-confirm-ok:hover { opacity: 0.9; }

/* ─── field-validation hint (replaces the native required-field balloon) ─── */
.pf-field-err {
  position: fixed; z-index: 320; display: none; margin-top: 6px; padding: 8px 12px; max-width: 260px;
  background: var(--surface3, var(--surface2)); border: 1px solid rgba(251,191,36,0.35); color: var(--yellow);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; line-height: 1.45; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35); animation: pf-err-in 0.15s ease;
}
.pf-field-err::before {
  content: ''; position: absolute; top: -5px; left: 14px; width: 9px; height: 9px;
  background: inherit; border-left: 1px solid rgba(251,191,36,0.35); border-top: 1px solid rgba(251,191,36,0.35);
  transform: rotate(45deg);
}
@keyframes pf-err-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.pf-field-invalid { outline: 2px solid rgba(251,191,36,0.55) !important; outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .pf-field-err { animation: none; } }