/* ==========================================================================
   iLearn Centers — Grading & Report Cards

   Loaded after styles.css, which is the shared iLearn design system copied
   unchanged from the LMS so the two applications feel like one product. Keeping
   the grading styles in their own file means the shared base can be refreshed
   from the LMS without losing anything here.

   Only CSS variables from styles.css are used for colour, so a theme change
   propagates to both applications.
   ========================================================================== */

/* ---------- Shell ---------- */
.topbar .brand span small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; margin-top: -2px; }
.year-picker {
  display: flex; align-items: center; gap: 8px; color: var(--muted);
  padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--border);
}
.year-picker .input { padding: 7px 10px; font-size: 13px; min-width: 116px; }

.mainnav {
  position: sticky; top: 64px; z-index: 30;
  display: flex; gap: 4px; padding: 0 24px; overflow-x: auto;
  background: rgba(10, 14, 26, 0.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.mainnav button {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: none; border: none; color: var(--muted);
  padding: 13px 14px; font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mainnav button:hover { color: var(--text); }
.mainnav button.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.auth-note { margin-top: 14px; text-align: center; color: var(--muted-2); font-size: 12px; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.filters .search-field { min-width: 240px; flex: 1 1 240px; }
.filters > .input { max-width: 240px; }
.date-field { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.date-field .input { padding: 9px 10px; }

.student-filter { position: relative; flex: 1 1 220px; min-width: 200px; }
.typeahead {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  overflow: hidden auto; max-height: 320px;
}
.typeahead button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 14px; color: var(--text); border-bottom: 1px solid var(--border);
}
.typeahead button:last-child { border-bottom: none; }
.typeahead button:hover { background: var(--surface-3); }
.typeahead button b { display: block; font-size: 14px; }
.typeahead button small { color: var(--muted); font-size: 12px; }
.ta-empty { padding: 12px 14px; color: var(--muted); font-size: 13px; }

.chosen { margin-top: 12px; }
.chosen-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--accent-soft); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
}
.chosen-card .ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent-2); }
.chosen-card b { display: block; font-size: 15px; }
.chosen-card small { color: var(--muted); font-size: 12px; }

/* ---------- Tables ---------- */
table.tbl th.c, table.tbl td.c { text-align: center; }
table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl td small.sub { display: block; color: var(--muted-2); font-size: 11.5px; font-weight: 500; margin-top: 2px; }
table.tbl td.nowrap { white-space: nowrap; }
table.tbl.sm { font-size: 13px; }
table.tbl.sm th, table.tbl.sm td { padding: 8px 12px; }
table.tbl tr.total td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border-2); }
.muted { color: var(--muted-2); }
.count {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 600;
}

/* ---------- Result pills and tags ----------
   A pill always shows the percentage the SERVER calculated, plus the indicator
   or letter it classified. The colour band is presentation only and carries no
   meaning the backend has not already decided. */
.pill {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pill b { font-size: 12.5px; font-weight: 800; }
.pill.good { background: var(--success-soft); color: #6ee7b7; }
.pill.ok   { background: rgba(255, 167, 79, 0.14); color: var(--accent-2); }
.pill.low  { background: rgba(251, 191, 36, 0.14); color: var(--warning); }
.pill.bad  { background: var(--danger-soft); color: #fca5a5; }
/* "Not graded" is drawn as an outline, so an empty result never reads as a score. */
.pill.none { background: transparent; color: var(--muted-2); border: 1px dashed var(--border-2); }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-3); color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.tag.ok   { background: var(--success-soft); color: #6ee7b7; }
.tag.warn { background: rgba(251, 191, 36, 0.16); color: var(--warning); }
.tag.bad  { background: var(--danger-soft); color: #fca5a5; }
.tag.alt  { background: rgba(111, 161, 255, 0.14); color: #9ec1ff; }

/* ---------- Notes and hints ---------- */
.hint { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 12px; }
.help { display: block; color: var(--muted-2); font-size: 12px; margin-top: 5px; line-height: 1.5; }
.note {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; margin-bottom: 16px; line-height: 1.6;
}
.note b { color: var(--text); }
.note code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.note.warn { background: rgba(251, 191, 36, 0.09); border-color: rgba(251, 191, 36, 0.3); }
.note.ok { background: var(--success-soft); border-color: rgba(52, 211, 153, 0.3); }
.note ul { margin: 8px 0 0 18px; }
.note li { margin-bottom: 3px; }
.note svg { vertical-align: -3px; margin-right: 4px; }

/* ---------- Quarter progress ---------- */
.qprogress { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.qcard { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.qcard.done { border-color: rgba(52, 211, 153, 0.35); }
.qcard h4 { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.qcard .bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.qcard .bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }
.qcard.done .bar span { background: var(--success); }
.qcard p { margin-top: 8px; font-size: 12px; color: var(--muted-2); }

/* ---------- Grading setup ---------- */
.setup-table { margin-top: 14px; }
.setup-head, .setup-row { display: grid; grid-template-columns: 32px 1fr 190px 92px; gap: 10px; align-items: center; }
.setup-head { padding: 0 4px 8px; color: var(--muted-2); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.setup-row { padding: 6px 4px; border-radius: var(--radius-sm); }
.setup-row.dragging { opacity: 0.45; }
.setup-row.dragover { background: var(--accent-soft); outline: 1px dashed var(--accent); }
.setup-row .handle { display: grid; place-items: center; color: var(--muted-2); cursor: grab; }
.setup-row .handle:active { cursor: grabbing; }
.max-field { display: flex; align-items: center; gap: 8px; }
.max-field > span { color: var(--muted-2); font-size: 16px; font-weight: 600; }
.max-field .input { font-variant-numeric: tabular-nums; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.setup-empty {
  padding: 26px; text-align: center; color: var(--muted); font-size: 13.5px;
  border: 1px dashed var(--border-2); border-radius: var(--radius-sm);
}
.setup-empty svg { vertical-align: -4px; margin-right: 6px; }
.setup-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12.5px; gap: 12px; }
.dirty-note { color: var(--warning); font-weight: 600; }
.dirty-note svg { vertical-align: -3px; margin-right: 4px; }

/* ---------- Gradebook grid ---------- */
.gradebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gradebar .spacer { flex: 1; }
.gradebar-right { display: flex; gap: 10px; align-items: center; }
.gradebar-right .input { width: 190px; padding: 8px 12px; }
.qtabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.qtabs button { background: none; border: none; color: var(--muted); padding: 8px 15px; font-size: 13.5px; font-weight: 600; border-radius: 8px; }
.qtabs button:hover { color: var(--text); }
.qtabs button.active { background: var(--accent); color: #201200; }
.btn.pulse { box-shadow: var(--ring); }

/* Always visible while grades are being entered, so the quarter being edited
   can never be mistaken. */
.editing-banner {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid rgba(255, 167, 79, 0.28);
  color: var(--muted); font-size: 13px; margin-bottom: 16px;
}
.editing-banner b { color: var(--accent-2); }
.editing-banner svg { vertical-align: -3px; margin-right: 5px; color: var(--accent-2); }

table.gradebook th .subj { display: block; text-transform: none; font-size: 12.5px; letter-spacing: 0; color: var(--text); }
table.gradebook th small { display: block; color: var(--muted-2); font-size: 11px; font-weight: 600; margin-top: 2px; }
table.gradebook th, table.gradebook td { padding: 8px 10px; }
table.gradebook .sticky-col { position: sticky; left: 0; z-index: 2; background: var(--bg-2); }
table.gradebook thead .sticky-col { z-index: 3; }
table.gradebook tr:hover .sticky-col { background: var(--surface); }
table.gradebook td.res, table.gradebook th.res { border-left: 1px solid var(--border); }

.cell {
  width: 68px; padding: 7px 8px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cell:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.cell.changed { border-color: var(--accent); background: var(--accent-soft); }
.cell.invalid { border-color: var(--danger); background: var(--danger-soft); color: #fca5a5; }
.cell::placeholder { color: var(--muted-2); font-weight: 400; }
.cell-pct {
  display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted-2);
  font-variant-numeric: tabular-nums; min-height: 13px;
}

/* ---------- Report cards ---------- */
.split { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.split-left .panel { margin-bottom: 18px; }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.rc-head h3 { font-size: 19px; letter-spacing: -0.02em; }
.rc-head p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.gpa-chip { text-align: right; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-2); }
.gpa-chip small { display: block; color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.gpa-chip b { font-size: 21px; font-variant-numeric: tabular-nums; }
.gpa-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.gpa-row > div { text-align: center; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.gpa-row > div.cum { background: var(--accent-soft); border-color: rgba(255, 167, 79, 0.3); }
.gpa-row small { display: block; color: var(--muted-2); font-size: 11px; }
.gpa-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.breakdown { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.breakdown summary { cursor: pointer; color: var(--accent-2); font-size: 13.5px; font-weight: 600; }
.bd-class { margin-top: 16px; }
.bd-class h4 { font-size: 14px; margin-bottom: 8px; }
.item.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }

/* ---------- Sharing ---------- */
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.share-url { display: flex; gap: 8px; margin: 10px 0 6px; }
.share-url .input { font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.note.ok small { display: block; color: var(--muted-2); font-size: 11.5px; }
.share-h { margin: 20px 0 10px; font-size: 13px; color: var(--muted); }
.share-list { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.share-row {
  display: grid; grid-template-columns: 110px 1fr 120px 1fr 90px; gap: 10px;
  align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.share-row:last-child { border-bottom: none; }
.share-row.dead { opacity: 0.5; }

/* ---------- Settings ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qweights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 6px; }
.sub-h { margin: 20px 0 10px; font-size: 13.5px; color: var(--muted); }
.inline-form { display: flex; gap: 10px; }
.inline-form .input { max-width: 180px; }
.scale-editor { margin-bottom: 16px; }
.scale-head, .scale-row { display: grid; grid-template-columns: 90px 110px 90px 44px; gap: 10px; align-items: center; margin-bottom: 8px; }
.scale-editor.letters .scale-head, .scale-editor.letters .scale-row { grid-template-columns: 90px 110px 90px 110px 44px; }
.scale-head { color: var(--muted-2); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.scale-row .upto { color: var(--muted-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.scale-row .input { font-variant-numeric: tabular-nums; }

/* ---------- Audit ---------- */
table.audit .change { font-size: 12.5px; }
table.audit .was { color: var(--muted-2); text-decoration: line-through; }
table.audit .now { color: var(--text); font-weight: 600; }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 0 4px; flex-wrap: wrap; }
.pager-info { color: var(--muted-2); font-size: 12.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .gpa-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .mainnav { top: 56px; padding: 0 12px; }
  .year-picker { border-right: none; padding-right: 0; }
  .year-picker .input { min-width: 100px; }
  .grid2, .share-grid, .qweights { grid-template-columns: 1fr; }
  .setup-head { display: none; }
  .setup-row { grid-template-columns: 24px 1fr 130px 44px; gap: 6px; }
  .share-row { grid-template-columns: 1fr 1fr; }
  .gpa-row { grid-template-columns: repeat(2, 1fr); }
  .filters > .input, .filters .search-field { max-width: none; width: 100%; }
  .userbox .who { display: none; }
}