/* ───────────────────────────────────────────────
   Student Results Portal — styles
   Dark UI on screen, light on print
   ─────────────────────────────────────────────── */

:root {
  --bg-0: #06231a;        /* page background — bottle green */
  --bg-1: #0c3327;        /* cards */
  --bg-2: #114231;        /* inputs, tracks */
  --line: #1d5940;
  --fg-0: #eef7f2;        /* primary text */
  --fg-1: #b9d4c6;        /* secondary text */
  --fg-2: #7ea690;        /* muted text */
  --accent: #5b8cee;      /* single data hue (bars, focus) — validator-passing on the bottle-green surface */
  --accent-strong: #3d6fe0;
  --good-bg: #1f4a30;  --good-fg: #7be3a0;
  --bad-bg: #4a1f24;   --bad-fg: #ff9aa5;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

.logo {
  height: 46px; width: auto; flex-shrink: 0;
  object-fit: contain;
}

/* ── Login ─────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
}
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.school-name { font-weight: 800; font-size: 17px; }
.school-tag { font-size: 12.5px; color: var(--fg-2); }
.login-intro { color: var(--fg-1); font-size: 14px; margin: 0 0 18px; }

.field { display: block; margin-bottom: 14px; }
.field-label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); margin-bottom: 6px;
}
.field input, .field select {
  width: 100%; padding: 11px 12px;
  background: var(--bg-2); color: var(--fg-0);
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: inherit;
  color-scheme: dark;
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.login-error {
  background: var(--bad-bg); color: var(--bad-fg);
  border: 1px solid #56272e; border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px;
}

.btn-primary {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #0b1020; font-weight: 800; font-size: 15px;
  border: none; border-radius: 10px; cursor: pointer;
}
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.login-help {
  margin-top: 16px; font-size: 12.5px; color: var(--fg-2);
  border-top: 1px solid var(--line); padding-top: 14px;
}

.demo-box { margin-top: 12px; font-size: 12.5px; color: var(--fg-2); }
.demo-box summary { cursor: pointer; user-select: none; }
.demo-box table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.demo-box th, .demo-box td {
  text-align: left; padding: 4px 6px; font-size: 12px;
  border-bottom: 1px solid var(--line); color: var(--fg-1);
}
.demo-box th { color: var(--fg-2); font-weight: 600; }

/* ── Watermark ─────────────────────────────────── */
/* Foreground text color, not a background — browsers withhold
   background-image/-color from print unless the user opts into
   "print backgrounds", but plain text color always prints. This is
   what makes the watermark impossible to lose by just printing the
   page normally. */
.watermark {
  position: fixed; inset: -20% -10%; z-index: 500;
  pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(-30deg);
}
.watermark-row { display: flex; justify-content: space-between; gap: 6vw; }
.watermark span {
  font-size: 20px; font-weight: 800; letter-spacing: 0.08em;
  white-space: nowrap; color: rgba(220, 38, 38, 0.16);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ── Results layout ────────────────────────────── */
.results-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  background: var(--bg-1); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-title { font-weight: 800; font-size: 15px; }
.topbar-sub { font-size: 12px; color: var(--fg-2); }
.topbar-actions { display: flex; gap: 8px; }

.btn-ghost {
  padding: 9px 14px; background: var(--bg-2); color: var(--fg-1);
  border: 1px solid var(--line); border-radius: 9px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-ghost:hover { color: var(--fg-0); border-color: var(--fg-2); }

.content { width: 100%; max-width: 860px; margin: 0 auto; padding: 20px 16px 40px; }

.card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
}
.card-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-2); margin-bottom: 14px;
}

/* Student header card */
.student-card { display: flex; align-items: center; gap: 16px; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--accent); font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.student-name { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.student-details {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13px; color: var(--fg-2);
}
.student-details b { color: var(--fg-1); font-weight: 600; }

/* Term tabs */
.term-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.term-tab {
  padding: 9px 16px; border-radius: 999px;
  background: var(--bg-1); color: var(--fg-1);
  border: 1px solid var(--line); font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.term-tab.active {
  background: var(--accent); border-color: var(--accent); color: #0b1020;
}
.term-tab.pending { color: var(--fg-2); }
.term-tab.active.pending { color: #0b1020; }
.tab-dot { font-weight: 500; font-size: 12px; }

/* Stat tiles */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.stat-tile {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
}
.stat-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fg-2); margin-bottom: 6px;
}
.stat-value { font-size: 22px; font-weight: 800; line-height: 1.2; }
.stat-sub { font-size: 12.5px; color: var(--fg-2); margin-top: 3px; }

/* Results table */
.table-scroll { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.results-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2);
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.results-table td {
  padding: 11px 10px; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--fg-1);
}
.results-table tr:last-child td { border-bottom: none; }
.results-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.results-table .strong { color: var(--fg-0); font-weight: 700; }
.results-table .muted { color: var(--fg-2); }
.results-table .subj { color: var(--fg-0); font-weight: 600; white-space: nowrap; }

.col-bar { width: 30%; min-width: 120px; }
.bar-track {
  height: 8px; border-radius: 4px; background: var(--bg-2);
  overflow: hidden;
}
.bar-fill {
  height: 100%; border-radius: 4px 4px 4px 4px;
  background: var(--accent);
  min-width: 3px;
}

.grade-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  background: var(--good-bg); color: var(--good-fg);
}
.grade-pill.grade-fail { background: var(--bad-bg); color: var(--bad-fg); }

.teacher-comment { margin: 0; color: var(--fg-1); font-size: 14.5px; font-style: italic; }

/* Pending term */
.pending-card { text-align: center; padding: 44px 20px; }
.pending-icon { font-size: 30px; margin-bottom: 10px; }
.pending-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.pending-sub { color: var(--fg-2); font-size: 13.5px; max-width: 420px; margin: 0 auto; }

.portal-foot {
  margin-top: 8px; font-size: 12px; color: var(--fg-2);
  text-align: center; padding: 0 12px;
}

.print-only { display: none; }
.marksheet-print { display: none; }

/* Inline official mark sheet (terms published as an uploaded file) */
.sheet-inline { width: 100%; height: auto; border-radius: 8px; display: block; background: #fff; }
.sheet-loading { color: var(--fg-2); font-size: 14px; padding: 18px 0; text-align: center; }
.sheet-pdf-box { text-align: center; padding: 20px 0; color: var(--fg-1); font-size: 14px; }
.sheet-pdf-btn { max-width: 320px; margin: 12px auto 0; display: block; }

/* ── Admin dashboard ───────────────────────────── */
.content-wide { max-width: 1000px; }
.plain-link { color: var(--accent); text-decoration: none; }
.btn-link { text-decoration: none; display: inline-flex; align-items: center; }
.btn-small { padding: 5px 10px; font-size: 12px; }
.btn-inline { width: auto; padding: 10px 16px; font-size: 13.5px; }

.setup-steps { margin: 0 0 16px; padding-left: 20px; color: var(--fg-1); font-size: 14px; }
.setup-steps li { margin-bottom: 10px; }
.setup-steps code { background: var(--bg-2); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }

.card-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}

.dropzone {
  border: 2px dashed var(--line); border-radius: 12px;
  padding: 30px 20px; text-align: center; cursor: pointer;
  color: var(--fg-1); font-size: 14px;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--bg-2); }
.dropzone-icon { font-size: 26px; margin-bottom: 8px; }
.dropzone-sub { font-size: 12.5px; color: var(--fg-2); margin-top: 6px; }

.entry-list { margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.entry-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: var(--bg-0);
}
.entry-card.saved { opacity: 0.55; }
.entry-card.error { border-color: #a2434e; }
.entry-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.entry-thumb {
  width: 46px; height: 60px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; flex-shrink: 0;
}
.entry-thumb.pdf {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--fg-1); font-size: 11px; font-weight: 800;
}
.entry-file { flex: 1; min-width: 0; }
.entry-filename {
  font-size: 13.5px; font-weight: 600; color: var(--fg-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entry-status { font-size: 12px; color: var(--fg-2); margin-top: 2px; }
.err-text { color: var(--bad-fg); }
.entry-fields {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px;
}
.entry-fields .field { margin-bottom: 10px; }
.entry-fields .field-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .entry-fields { grid-template-columns: 1fr 1fr; } }

.autofill-hint {
  grid-column: 1 / -1;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; color: var(--fg-1); margin-bottom: 10px;
}

.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .stat-grid-3 { grid-template-columns: 1fr; } }

.term-badge {
  display: inline-block; background: var(--bg-2); color: var(--fg-1);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; margin-right: 5px;
}
.empty-note { color: var(--fg-2); font-size: 13.5px; margin: 4px 0 0; }

.toast-stack {
  position: fixed; bottom: 18px; right: 18px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.toast {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-0);
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.toast-error { border-color: #a2434e; color: var(--bad-fg); }

.danger-zone { border-color: #6b2b32; }
.danger-title { color: var(--bad-fg); }
.btn-danger {
  padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: var(--bad-bg); color: var(--bad-fg); border: 1px solid #a2434e;
  cursor: pointer; font-family: inherit; margin-top: 4px;
}
.btn-danger:hover:not(:disabled) { filter: brightness(1.2); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-sub { display: none; }
  .student-card { align-items: flex-start; }
}
@media (max-width: 560px) {
  /* Drop the score-bar and remark columns so marks + grade fit without side-scrolling
     (the remark just restates the grade) */
  .col-bar, .results-table th:last-child, .results-table td:last-child { display: none; }
  .results-table { min-width: 0; }
  .results-table .subj { white-space: normal; }
  .results-table th, .results-table td { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 400px) {
  .topbar-actions { flex-direction: column; }
}

/* ── Print (mark-sheet style) ──────────────────── */
@media print {
  :root {
    --bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #eef1f6; --line: #c9cfda;
    --fg-0: #111622; --fg-1: #2c3446; --fg-2: #5a6478;
  }
  body { background: #fff; }
  .no-print { display: none !important; }
  .print-only { display: block; }
  .term-print-label {
    font-weight: 700; font-size: 14px; margin: 4px 0 14px; color: var(--fg-0);
  }
  .topbar { position: static; border-bottom: 2px solid var(--line); }
  .card, .stat-tile { border-color: var(--line); break-inside: avoid; }
  .bar-fill { background: #3d6fe0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grade-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Official mark sheet attached → print ONLY the school's file, full page */
  .has-marksheet .topbar,
  .has-marksheet .content > *:not(.marksheet-print) { display: none !important; }
  .has-marksheet { min-height: 0; display: block; }
  .has-marksheet .content { max-width: none; padding: 0; }
  .marksheet-print { display: block; margin: 0; }
  .marksheet-print img { width: 100%; max-height: 99vh; height: auto; display: block; margin: 0 auto; object-fit: contain; }
}