/* Professors explorer. Borrows the retro table look from the WebReg emulator's
   prof panel so the two surfaces read as the same feature, but this page is
   wider and scrolls, so the table gets its own container rather than the
   drawer's cramped 11px. */

/* ---- the rating and grade cells ---------------------------------------- */

.pf-rating { font-weight: bold; color: #4a555c; }
.pf-star { color: #c99a06; font-weight: normal; padding-right: 2px; }
/* Under the floor the number still shows — with its count right beside it,
   which is the honest way to present "4.9, from four people" — but it is greyed
   so it never reads with the same weight as a rating built from hundreds. */
.pf-lown { color: #98a0a6; font-weight: normal; }
.pf-n { display: block; font-size: 10px; color: #98a0a6; }
.pf-na { color: #98a0a6; }

/* Same colour language as the WebReg emulator's per-instructor grade badge
   (app/webreg/css/webreg.css .pg-badge). A letter grade must not mean one
   thing there and another thing here. */
.pg-badge {
  display: inline-block;
  min-width: 22px;
  padding: 0 5px;
  border: 1px solid #c9d2d8;
  border-radius: 9px;
  background: #f4f6f8;
  font-size: 11px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
  vertical-align: baseline;
  cursor: help;
}
.gr-a.pg-badge { background: #eaf6ec; border-color: #bcdcc3; color: #1c6b32; }
.gr-b.pg-badge { background: #eaf1f7; border-color: #bfd3e4; color: #0A4A65; }
.gr-c.pg-badge { background: #fdf4e3; border-color: #e6d2a8; color: #8a5d09; }
.gr-d.pg-badge { background: #fbeceb; border-color: #e5c0bd; color: #96261d; }
.gr-na.pg-badge { color: #98a0a6; font-weight: normal; }

/* ---- the explorer page itself ------------------------------------------ */

.pf-wrap { max-width: 1240px; }

.pf-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 0 0 12px;
}
.pf-search { flex: 1 1 320px; min-width: 220px; }
.pf-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #b9c6cd;
  border-radius: 3px;
  font-size: 13px;
}
.pf-deptwrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #606060;
}
.pf-deptwrap select {
  padding: 5px 6px;
  border: 1px solid #b9c6cd;
  border-radius: 3px;
  font-size: 12px;
  max-width: 220px;
}

.pf-status { color: #606060; font-size: 12px; margin: 0 0 8px; }

/* The table is seven columns wide and does not usefully reflow on a phone;
   scrolling it inside its own box beats squeezing the numbers into three
   characters each. The page body must never scroll sideways. */
.pf-tablewrap { overflow-x: auto; }

table.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border: 1px solid #c9dde2;
}
.pf-table th {
  background: #ddeef1;
  border-bottom: 1px solid #c9dde2;
  padding: 5px 8px;
  text-align: left;
  font-size: 11px;
  white-space: nowrap;
}
.pf-table td { padding: 5px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.pf-table tr:last-child td { border-bottom: none; }
.pf-table tbody tr:hover { background: #f6fafb; }
.pf-table th:nth-child(n+3):nth-child(-n+6),
.pf-table td:nth-child(n+3):nth-child(-n+6) { text-align: center; white-space: nowrap; width: 1%; }

.pf-name a { font-weight: bold; white-space: nowrap; }

.pf-tags { max-width: 300px; }
.pf-tag {
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 1px 6px;
  border: 1px solid #d9e2e6;
  border-radius: 9px;
  background: #f6f8f9;
  color: #56626a;
  font-size: 10px;
  white-space: nowrap;
}

.pf-more { color: #606060; font-size: 11px; margin: 10px 0 0; text-align: center; }
.pf-foot { margin-top: 14px; color: #808080; font-size: 11px; line-height: 1.5; }

@media (max-width: 640px) {
  .pf-tags { display: none; }
  .pf-table th:nth-child(7), .pf-table td:nth-child(7) { display: none; }
}