/* ===========================================================================
   Halaman resit — /resit/MJ-0001
   Fail berasingan daripada styles.css supaya halaman tempahan yang sedang
   digunakan murid tidak perlu disentuh langsung. Semua token warna dan huruf
   diwarisi daripada styles.css yang dimuatkan dahulu.
   =========================================================================== */

/* Jalur status ialah perkara pertama yang dicari murid: "dah masuk ke belum?".
   Warna sahaja tidak memadai (buta warna, tangkap layar hitam putih), jadi
   setiap keadaan turut membawa ikon dan ayat penuh. */
.jalur-status {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: var(--bulat-besar);
  border: 1px solid var(--garis);
  background: var(--kertas);
  line-height: 1.5;
}
.jalur-tajuk {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .005em;
}
.jalur-nota {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--dakwat-lembut);
}
.jalur-ikon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--dakwat-lembut);
}

.jalur-status.sah { border-color: var(--daun); background: var(--daun-samar); }
.jalur-status.sah .jalur-ikon { background: var(--daun); }
.jalur-status.sah .jalur-nota { color: #2a5a46; }

.jalur-status.belum { border-color: #e6c98c; background: #fdf6e6; }
.jalur-status.belum .jalur-ikon { background: var(--tanah); }
.jalur-status.belum .jalur-nota { color: #6b4a13; }

.jalur-status.masalah { border-color: var(--merah); background: var(--merah-samar); }
.jalur-status.masalah .jalur-ikon { background: var(--merah); }
.jalur-status.masalah .jalur-nota { color: #7c1e17; }

/* Baris butiran teks. Ia mengulangi apa yang sudah ada pada imej, dan itu
   memang sengaja — inilah satu-satunya salinan yang kekal terbaca kalau canvas
   disekat pelayar. Garis di atas menjadikannya nota kaki, bukan ayat terapung. */
.resit-kaki {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--garis);
}

/* No. Tempahan yang datang daripada alamat URL dipapar sebagai teks tetap,
   bukan medan boleh taip — menukarnya di sini tidak akan menukar alamat, dan
   medan yang "boleh diedit tetapi diabaikan" itu mengelirukan. */
input[readonly] {
  background: var(--kertas-tua);
  color: var(--dakwat);
  font-family: var(--huruf-nombor);
  font-weight: 700;
  letter-spacing: .04em;
}
input[readonly]:focus { border-color: var(--garis-pekat); box-shadow: none; }