/* Student tracker: looks like Gulasal's Word table (version E on the design canvas). */

:root {
  --accent: #2B579A;
  --accent-dark: #1E3F70;
  --accent-soft: #DEE7F5;
  --bar: #F3F2F1;
  --bar-line: #D1D1D1;
  --header: #F2F2F2;
  --grid: #BFBFBF;
  --grid-strong: #8C8C8C;
  --field-line: #C8C6C4;
  --text: #1F1F1F;
  --muted: #555555;
  --green-row: #C6EFCE;
  --green-text: #1E5631;
  --red-text: #A4262C;
  --highlight: #FFF27A;
  --wait-bg: #FFF4CE;
  --wait-text: #7A4A00;
  --wait-line: #B26A00;
  --font: Calibri, Carlito, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.35;
}
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bar);
  border-bottom: 1px solid var(--bar-line);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar-top { display: flex; align-items: center; gap: 6px; }
.bar-title { flex: 1; min-width: 0; }
.title { font-size: 19px; font-weight: 700; line-height: 22px; }
.title, .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { font-size: 13px; color: var(--muted); }
/* Shorter button words on phones, so the title still fits. */
.short-text { display: none; }
@media (max-width: 420px) {
  .long-text { display: none; }
  .short-text { display: inline; }
}
.icon-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 4px;
}
.icon-btn.back { margin-left: -8px; }
.icon-btn.boxed { width: 36px; height: 36px; border: 1px solid var(--field-line); background: #FFFFFF; }
.pill {
  flex: none;
  height: 36px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid #D9B44A;
  background: var(--wait-bg);
  color: #5C4300;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
#appr-btn:not(.waiting) { border-color: var(--field-line); background: #FFFFFF; color: var(--text); }
.bar-list { display: flex; flex-direction: column; gap: 6px; }
.search-row { display: flex; gap: 6px; }
.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  background: #FFFFFF;
  border: 1px solid var(--field-line);
  border-radius: 4px;
  color: var(--muted);
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--text);
  outline: none;
}
.search:focus-within { border-color: var(--accent); }
.hint { font-size: 12px; color: #444444; }

/* ---------- the student table ---------- */

.grid-head, .row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.wide-only { display: none; }

.grid-head {
  position: sticky;
  top: var(--bar-height, 104px);
  z-index: 2;
  background: var(--header);
  font-size: 12px;
  font-weight: 700;
}
.grid-head > div {
  padding: 6px 5px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid-strong);
}
.grid-head > div:last-child { border-right: 0; }

.row {
  width: 100%;
  padding: 0;
  border: 0;
  background: #FFFFFF;
  text-align: left;
  font-size: 13px;
  line-height: 17px;
  cursor: pointer;
}
.row.done { background: var(--green-row); }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .row:hover { filter: brightness(0.97); } }
.row > span {
  padding: 6px 5px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  white-space: pre-line;
  overflow-wrap: anywhere;
  min-width: 0;
}
.row > span:last-child { border-right: 0; }
.row .num { padding-left: 3px; padding-right: 3px; color: var(--muted); }
.row .name-cell { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.row .name { font-weight: 700; }
.row .batch { font-size: 12px; color: var(--muted); }
.row.done .batch, .row.done .num { color: #3D3D3D; }
.docs-count { font-size: 12px; font-weight: 700; color: var(--red-text); }
.docs-count.all { color: var(--green-text); }
.given { font-size: 12px; font-weight: 700; color: var(--green-text); }

.divider {
  height: 28px;
  padding: 0 8px;
  border-bottom: 1px solid var(--grid);
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.empty { text-align: center; color: var(--muted); font-size: 14px; margin: 28px 16px; }
.table-end { height: 40px; }
/* No connection: the list is the copy kept on this phone */
.offline-bar { padding: 8px 12px; font-size: 14px; line-height: 1.35; background: #FFF4CE; border-top: 1px solid #E8D48A; color: #1F1F1F; }
/* No login and no view-only link */
.locked { max-width: 440px; margin: 48px auto; padding: 0 16px; text-align: center; }
.locked h2 { font-size: 22px; margin: 0 0 10px; }
.locked p { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.locked .primary { min-width: 160px; min-height: 48px; font-size: 17px; }

/* Document words, like Gulasal's highlighting in Word */
.doc-words { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.doc {
  border: 1px solid #E1E1E1;
  background: transparent;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 18px;
}
.doc.received { background: var(--highlight); border-color: var(--highlight); }
.doc.waiting { border-style: dashed; border-color: var(--wait-line); color: var(--wait-text); }
.row .doc-words { gap: 3px; }
.row .doc { font-size: 12px; line-height: 15px; padding: 1px 3px; }
.doc-words.wide-only { display: none; }

/* ---------- wide screens (office PC): every Word column ---------- */

@media (min-width: 900px) {
  .bar { padding: 10px 16px; }
  .bar-list { flex-direction: row; align-items: center; }
  .search { flex: none; width: 320px; }
  .narrow-only { display: none; }
  .wide-only { display: block; }
  .grid-head, .row {
    grid-template-columns:
      36px minmax(150px, 1.3fr) minmax(95px, 0.8fr) minmax(160px, 1.6fr) minmax(130px, 1.2fr)
      minmax(120px, 1fr) minmax(110px, 1fr) minmax(190px, 1.5fr);
  }
  .grid-head { font-size: 13px; }
  .grid-head > div { padding: 6px 8px; }
  .row { font-size: 14px; line-height: 18px; }
  .row > span { padding: 6px 8px; }
  .row .num { padding-left: 6px; padding-right: 6px; }
  .row .wide-only { display: block; }
  .row .doc-words.wide-only { display: flex; }
}

/* ---------- student panel and dialogs ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.sheet {
  position: relative;
  max-height: 92vh;
  max-height: 92dvh;
  background: #FFFFFF;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sheet-head {
  flex: none;
  padding: 10px 8px 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bar);
  border-bottom: 1px solid var(--bar-line);
}
.sheet-title { flex: 1; min-width: 0; }
.sheet-title .name { font-size: 18px; font-weight: 700; line-height: 22px; }
.sheet-title .sub { font-size: 13px; color: var(--muted); }
.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px calc(26px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 900px) {
  .overlay { flex-direction: row; justify-content: flex-end; }
  .sheet { width: 480px; max-height: none; height: 100%; border-radius: 0; }
  .sheet.small { width: 420px; height: auto; max-height: 100%; margin: auto; border-radius: 8px; }
}

/* Two-column Word-style table inside the panel */
.kv { border: 1px solid var(--grid); font-size: 14px; line-height: 18px; }
.kv > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); border-bottom: 1px solid var(--grid); }
.kv > div:last-child { border-bottom: 0; }
.kv .k { padding: 6px 8px; background: var(--header); font-weight: 700; border-right: 1px solid var(--grid); }
.kv .k small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.kv .v { padding: 6px 8px; white-space: pre-line; overflow-wrap: anywhere; }
.kv .v.doc-words { white-space: normal; }

.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #444444; }
.legend .doc { font-size: 12px; line-height: 16px; padding: 0 3px; }

.section-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.line-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; color: #444444; }
.chip {
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--field-line);
  background: #FFFFFF;
  color: #444444;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.muted { color: var(--muted); font-size: 14px; }
.private { padding: 8px 10px; background: var(--bar); }
.private .label { font-size: 13px; font-weight: 700; color: #444444; }
.private .text { font-size: 14px; line-height: 19px; white-space: pre-line; }
.given-box { padding: 8px 10px; background: var(--green-row); color: var(--green-text); font-size: 14px; font-weight: 700; }

/* ---------- Waqas's waiting changes ---------- */

.wait-tag {
  align-self: flex-start;
  padding: 0 3px;
  background: var(--wait-bg);
  color: var(--wait-text);
  font-size: 11px;
  font-weight: 700;
}
.file-row .wait-tag { flex: none; font-size: 12px; }
.waiting-value {
  display: block;
  margin-top: 4px;
  padding: 2px 5px;
  border: 1px dashed var(--wait-line);
  color: var(--wait-text);
  white-space: pre-line;
}
.waiting-value small { display: block; font-size: 11px; font-weight: 700; }
.waiting-box { padding: 8px 10px; background: var(--wait-bg); color: #5C4300; font-size: 14px; }
.waiting-box .label { font-weight: 700; }
.waiting-box .hint-text { font-size: 13px; }
.waiting-item {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid #E8D9A8;
  line-height: 18px;
}
.waiting-item:first-of-type { margin-top: 4px; }
.waiting-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.waiting-item .who { display: block; font-size: 12px; color: var(--muted); }
.waiting-item .change, .appr-what .change { display: block; color: var(--muted); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.waiting-actions, .appr-actions { flex: none; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.waiting-actions { width: 96px; }
.approve-btn {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: #1E7B3A;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.waiting-actions .danger, .appr-actions .danger { min-height: 34px; font-size: 14px; }
.waiting-actions .link-btn, .appr-actions .link-btn { padding: 4px; }
.pick-name .approve-btn { min-height: 52px; font-size: 17px; }
.wait-text { font-size: 12px; font-weight: 700; color: var(--wait-text); }
.status-pending { color: var(--wait-text); font-weight: 700; }
.status-rejected { color: var(--red-text); font-weight: 700; }
.status-withdrawn { color: var(--muted); }

.appr-head, .appr-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; }
.appr-head { background: var(--header); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--grid-strong); }
.appr-head > div { padding: 6px 10px; }
.appr-head > div:first-child { border-right: 1px solid var(--grid); }
.appr-row { border-bottom: 1px solid var(--grid); font-size: 14px; line-height: 18px; }
.appr-what {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border: 0;
  border-right: 1px solid var(--grid);
  background: #FFFFFF;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}
.appr-what .meta, .rejected-row .meta { font-size: 12px; color: var(--muted); }
.appr-actions { padding: 8px; }
.appr-sub { padding: 14px 10px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.rejected-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 8px 10px;
  border-top: 1px solid var(--grid);
  background: #FDE7E9;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.rejected-row .link-btn { padding: 4px 0; }
@media (hover: hover) { .appr-what:hover { background: var(--accent-soft); } }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.section-head .section-title { margin-bottom: 0; }
.section-head .secondary { min-height: 34px; padding: 0 10px; font-size: 14px; }

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #E1E1E1;
  font-size: 14px;
}
.file-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--field-line);
  background: var(--header);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-text { flex: 1; min-width: 0; }
.file-name { display: block; color: var(--accent-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.file-name { text-decoration: underline; }
.file-meta { display: block; font-size: 12px; color: var(--muted); }
.file-row .link-btn { padding: 10px 4px; }
.field input[type=file] { padding: 8px; }

.history-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #E1E1E1;
  font-size: 13px;
  line-height: 17px;
}
.history-item .when, .history-item .who { color: var(--muted); }
.history-item .who { display: block; }

/* ---------- import check screen ---------- */

.intro { margin: 0; padding: 10px 12px; font-size: 14px; line-height: 18px; color: #444444; border-bottom: 1px solid var(--bar-line); }
.review-head, .review-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); }
.review-head { background: var(--header); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--grid-strong); }
.review-head > div { padding: 6px 8px; border-right: 1px solid var(--grid); }
.review-head > div:last-child { border-right: 0; }
.review-row { border-bottom: 1px solid var(--grid); font-size: 14px; line-height: 18px; }
.review-row > * { padding: 8px; min-width: 0; overflow-wrap: anywhere; }
.review-row .student {
  border: 0;
  border-right: 1px solid var(--grid);
  background: #FFFFFF;
  text-align: left;
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: underline;
  cursor: pointer;
}
.review-row .original { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); white-space: pre-line; }

/* ---------- open on phone ---------- */

.qr { width: 220px; max-width: 70vw; border: 1px solid var(--grid); }
.qr svg { display: block; width: 100%; height: auto; }
#form .qr { margin: 0 auto; }
/* Says who a QR code is for, so the login code and the view-only link are not mixed up */
.for-whom { margin: 0; padding: 10px 12px; font-size: 16px; background: #FFF4CE; border: 1px solid #E8D48A; }
.other-people { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--grid); }
.other-people p { margin: 0; font-size: 15px; line-height: 1.4; }
.other-people .primary { min-height: 48px; font-size: 17px; }
#view-link { font-size: 14px; }
.address { font-size: 20px; font-weight: 700; color: var(--accent); word-break: break-all; margin: 0; }
.steps { margin: 0; padding-left: 20px; font-size: 15px; }
.steps li { margin-bottom: 4px; }

/* ---------- buttons ---------- */

.primary, .secondary, .danger {
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.primary { border: 0; background: var(--accent); color: #FFFFFF; }
.primary:disabled { opacity: 0.6; cursor: default; }
.secondary { border: 1px solid var(--accent); background: #FFFFFF; color: var(--accent); }
.danger { border: 1px solid #C4403A; background: #FFFFFF; color: var(--red-text); }
.green-btn { border-color: #1E7B3A; color: #1E7B3A; }
.link-btn {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  padding: 10px 4px;
  cursor: pointer;
}
.link-btn.red { color: var(--red-text); }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-row > * { flex: 1 1 140px; min-height: 44px; }

/* ---------- editing inside the student panel (Gulasal) ---------- */

.kv .v.editable {
  border: 0;
  background: #FFFFFF;
  text-align: left;
  font: inherit;
  cursor: pointer;
  position: relative;
  padding-right: 26px;
}
.kv .v.editable::after, .entry::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 8px;
  width: 13px;
  height: 13px;
  background: currentColor;
  opacity: 0.35;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) { .kv .v.editable:hover, .entry:hover { background: var(--accent-soft); } }
.entries { display: flex; flex-direction: column; gap: 2px; }
.entry {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  padding: 2px 22px 2px 0;
  cursor: pointer;
}
.add-entry { align-self: flex-start; padding: 4px 0; font-size: 13px; }
button.doc { cursor: pointer; font-family: inherit; color: inherit; }
button.chip { cursor: pointer; }
.history-item .change, .log-row .change { display: block; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- forms ---------- */

.overlay.top { z-index: 30; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; }
.field input, .field textarea, .field select {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--field-line);
  border-radius: 4px;
  background: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.35; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field .hint-text { font-weight: 400; font-size: 13px; color: var(--muted); }
.form-error { padding: 8px 10px; background: #FDE7E9; color: var(--red-text); font-size: 14px; }
.form-note { margin: 0; font-size: 14px; color: #444444; line-height: 1.4; }
.pick-name { display: flex; flex-direction: column; gap: 8px; }
.pick-name button { min-height: 52px; font-size: 17px; }

/* ---------- import check: ticked items ---------- */

.review-row.done { background: #F7F7F7; color: var(--muted); }
.review-row .tick { margin-top: 6px; }
.review-row .checked { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--green-text); }

/* ---------- change log ---------- */

.log-head, .log-row { display: grid; grid-template-columns: 82px 64px minmax(0, 1fr); }
.log-head { position: sticky; top: var(--bar-height, 60px); background: var(--header); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--grid-strong); }
.log-head > div { padding: 6px 8px; border-right: 1px solid var(--grid); }
.log-head > div:last-child { border-right: 0; }
.log-row { border-bottom: 1px solid var(--grid); font-size: 13px; line-height: 17px; }
.log-row > * { padding: 6px 8px; min-width: 0; overflow-wrap: anywhere; border-right: 1px solid var(--grid); }
.log-row > *:last-child { border-right: 0; }
.log-row .when { color: #444444; }
.log-row .student-link { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--accent-dark); text-decoration: underline; cursor: pointer; text-align: left; }
@media (min-width: 900px) {
  .log-head, .log-row { grid-template-columns: 140px 90px minmax(0, 1fr); }
  .log-row { font-size: 14px; }
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 4px;
  background: #252423;
  color: #FFFFFF;
  font-size: 15px;
  text-align: center;
}
.toast.bad { background: #8A1C1C; }

button.private { display: block; width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.private .label, button.private .text { display: block; }
@media (hover: hover) { button.private:hover { background: var(--accent-soft); } }