/* ============================================================
   fix-classes.css — task 2-c (screens/classes.js fidelity fixes)
   Loaded AFTER style.css by the build step (same-specificity
   rules here intentionally override style.css defaults).
   ============================================================ */

/* BUG 3 — Assign Teachers / Assign Students modals:
   original uses Modal className="sm:max-w-xl" = 576px
   (not the 672px .modal-wide variant). The box gets the
   'modal-assign' class from classes.js via modal.box. */
.modal-assign { max-width: 576px; }
@media (max-width: 640px) {
  /* keep the stock bottom-sheet behaviour of style.css on phones */
  .modal-assign { max-width: none; }
}

/* BUG 2 — crown ("Make class teacher") button:
   original: text-amber-600 hover:bg-amber-500/10 */
.crown-btn:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.1); /* amber-500 @ 10% */
  color: #d97706; /* keep amber on hover (.btn-ghost:hover would grey it) */
}

/* row remove (X) button in Assign Teachers:
   original: text-destructive hover:bg-destructive/10 */
.row-x:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
  color: var(--destructive);
}

/* Class Subjects — chip remove (X) button:
   original: hover:bg-destructive/15 hover:text-destructive */
.chip-x:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--destructive);
}

/* Class Subjects — quick-add suggestion pills:
   original: hover:border-emerald-600 hover:text-emerald-700 */
.quick-add:hover {
  border-color: #059669;
  color: #047857;
}