/* The shared modal dialog (overlay + box + entry animation) and its form field styling,
   used by the new-course, new-assignment, and calendar day-event popups. */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 10, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 420px;
  padding: 22px;
}
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: modalIn 140ms ease; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 16px; }
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.field textarea { resize: vertical; min-height: 60px; }
.swatch-row { display: flex; gap: 8px; }
.swatch-pick {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch-pick.selected { border-color: var(--ink); }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;
}
.modal-actions .btn { width: auto; margin-top: 0; }
.required-note { color: var(--ink-muted); font-size: 0.72rem; margin-top: -6px; margin-bottom: 14px; }