/* =========================================================
   Portal kemaskini penerima — sekolah / PT / admin.
   Bahasa reka bentuk majlis: plum malam, nila, benang emas.
   ========================================================= */

:root {
  --plum:   #180A2B;
  --nila:   #0B1538;
  --emas:   #D8A657;
  --gading: #F4EDE0;
  --kabur:  rgba(244, 237, 224, 0.55);
  --garis:  rgba(216, 166, 87, 0.22);
  --panel:  rgba(255, 255, 255, 0.035);
  --go:     #3FB98C;
  --amaran: #E0483A;
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  color: var(--gading);
  font: 400 15px/1.55 "Instrument Sans", system-ui, sans-serif;
  background:
    radial-gradient(120% 90% at 12% 0%, #2B1042 0%, transparent 55%),
    radial-gradient(90% 80% at 95% 100%, #0E2A4A 0%, transparent 60%),
    linear-gradient(160deg, var(--plum) 0%, var(--nila) 100%);
  background-attachment: fixed;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kabur);
}

a { color: var(--emas); }
code { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--emas); }

/* ---- Borang asas ---- */
input, select, textarea {
  width: 100%;
  background: rgba(5, 6, 11, 0.55);
  border: 1px solid var(--garis);
  border-radius: 6px;
  color: var(--gading);
  font: inherit;
  padding: 11px 13px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

input::placeholder, textarea::placeholder { color: rgba(244, 237, 224, 0.28); }
input:hover, select:hover, textarea:hover { border-color: rgba(216, 166, 87, 0.45); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--emas); background: rgba(5, 6, 11, 0.75); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.45; }

button:focus-visible { outline: 2px solid var(--emas); outline-offset: 2px; }

.btn {
  font: 500 14px "Instrument Sans", sans-serif;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gading);
  border: 1px solid var(--garis);
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease);
}

.btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(216, 166, 87, 0.5); }
.btn:active { transform: translateY(1px); }

.btn--go {
  background: var(--emas);
  border-color: var(--emas);
  color: #16091F;
  font-weight: 600;
}
.btn--go:hover { background: #E7BA71; border-color: #E7BA71; }
.btn--kecil { padding: 6px 12px; font-size: 12.5px; border-radius: 5px; }

.btn--ikon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  color: var(--emas);
}

.btn--ikon:hover { background: rgba(216, 166, 87, 0.16); }

/* ---- Bar atas ---- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2.5%;
  border-bottom: 1px solid var(--garis);
  flex-wrap: wrap;
  backdrop-filter: blur(6px);
}

.bar h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

.bar .tag { color: var(--emas); }
.bar__right { display: flex; align-items: center; gap: 18px; }
.bar__right a { color: var(--kabur); text-decoration: none; transition: color 140ms; }
.bar__right a:hover { color: var(--gading); }

/* ---- Tab admin ---- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 2.5%;
  border-bottom: 1px solid var(--garis);
  overflow-x: auto;
}

.tabs a {
  font: 500 13.5px "Instrument Sans", sans-serif;
  color: var(--kabur);
  text-decoration: none;
  padding: 13px 18px 11px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.tabs a:hover { color: var(--gading); }
.tabs a.is-on { color: var(--emas); border-bottom-color: var(--emas); }

/* Pautan halaman tanpa log masuk — dibuka dalam tab baharu */
.tabs__luar { margin-left: auto; display: flex; gap: 2px; }
.tabs__luar a { font-size: 12px; color: var(--kabur); padding: 13px 10px 11px; }
.tabs__luar a:hover { color: var(--emas); }

/* ---- Tab bilik kawalan (iframe) ---- */
.kawalan-bekas { display: grid; grid-template-rows: auto 1fr; height: calc(100vh - 125px); }
.kawalan-nota { padding: 10px 28px; font-size: 10.5px; }
.kawalan-nota a { text-decoration: none; }
.kawalan-bingkai { width: 100%; height: 100%; border: 0; background: #0C0E15; }

/* ---- Tab nama & bacaan ---- */
.bekas--luas { width: 95%; max-width: 95%; }

.carian {
  margin-top: 18px;
  max-width: 420px;
  background: rgba(12, 8, 26, 0.55);
}

.jadual--nama td input {
  padding: 8px 10px;
  font-size: 13.5px;
  background: rgba(5, 6, 11, 0.4);
}

.jadual--nama .n-sekolah { display: block; font-size: 11px; color: var(--kabur); margin-top: 4px; padding-left: 2px; }
.jadual--nama td:nth-child(2), .jadual--nama td:nth-child(3) { min-width: 240px; }

.pil--ai { color: #C9B8F5; border-color: rgba(150, 120, 230, 0.5); background: rgba(150, 120, 230, 0.12); }

/* ---- Tab kehadiran ---- */
.tempoh {
  margin-top: 18px;
  background: rgba(12, 8, 26, 0.55);
  border: 1px solid var(--garis);
  border-radius: 12px;
  padding: 20px 22px;
  display: grid;
  gap: 12px;
}

.tempoh__borang { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.tempoh__borang label { display: grid; gap: 6px; font-size: 12.5px; color: var(--kabur); }
.tempoh__borang input { width: 220px; }
.tempoh__status--buka { color: var(--go); }
.tempoh__status--tutup { color: var(--amaran); }
.tempoh__status--belum { color: var(--emas); }

/* ---- Suis induk (tetapan) ---- */
.suis-baris { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.suis-besar {
  font: 700 16px "Instrument Sans", sans-serif;
  letter-spacing: 0.08em;
  padding: 20px 32px;
  border-radius: 12px;
  border: 2px solid var(--go);
  color: #9FE8CD;
  background: rgba(63, 185, 140, 0.12);
  white-space: nowrap;
}

.suis-besar:hover { background: rgba(63, 185, 140, 0.2); border-color: var(--go); }
.suis-besar.is-mati { border-color: var(--amaran); color: #FFD7D1; background: rgba(224, 72, 58, 0.14); }
.suis-besar.is-mati:hover { background: rgba(224, 72, 58, 0.24); border-color: var(--amaran); }

/* ---- Log masuk ---- */
.tengah { display: grid; place-items: center; min-height: calc(100vh - 90px); padding: 28px; }

.login {
  width: min(430px, 94vw);
  background: rgba(12, 8, 26, 0.72);
  border: 1px solid var(--garis);
  border-top: 3px solid var(--emas);
  border-radius: 10px;
  padding: 38px 34px 30px;
  display: grid;
  gap: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.login__jenama { display: grid; gap: 8px; margin-bottom: 10px; text-align: center; }
.login__jenama .mono { font-size: 10.5px; color: var(--emas); }

.login__jenama h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.login__jenama h2 em { font-style: normal; font-weight: 700; color: var(--emas); }
.login__sub { font-size: 13.5px; color: var(--kabur); }

.login label { display: grid; gap: 7px; font-size: 13px; color: var(--kabur); }
.login .btn--go { margin-top: 6px; padding: 13px; font-size: 15px; }
.err {
  color: #FFD7D1;
  font-size: 13px;
  background: rgba(224, 72, 58, 0.14);
  border: 1px solid rgba(224, 72, 58, 0.4);
  border-radius: 6px;
  padding: 9px 12px;
}
.hint { font-size: 13px; color: var(--kabur); line-height: 1.6; }

/* ---- Papan pemuka ---- */
/* Kandungan menggunakan 95% lebar skrin (2.5% ruang di kiri & kanan) */
.bekas { width: 95%; max-width: 95%; margin: 0 auto; padding: 30px 0 80px; }

.ringkasan { display: flex; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }

.stat {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 16px 26px;
  display: grid;
  gap: 2px;
  min-width: 140px;
}

.stat strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  color: var(--gading);
}

/* KPI boleh klik — buka modal drill-down */
button.stat--klik {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

button.stat--klik:hover { border-color: var(--emas); background: rgba(216, 166, 87, 0.08); }
button.stat--klik .mono { color: var(--emas); }

/* Senarai dalam modal KPI */
.kpi-senarai { list-style: none; display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; margin-top: 6px; }

.kpi-senarai li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 10px 14px;
}

.kpi-senarai strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.kpi-senarai small { display: block; font-size: 12px; color: var(--kabur); margin-top: 1px; }
.kpi-senarai a { text-decoration: none; white-space: nowrap; }

.jadual-bekas {
  margin-top: 22px;
  background: rgba(12, 8, 26, 0.55);          /* sedikit lebih gelap daripada latar halaman */
  border: 1px solid var(--garis);
  border-radius: 12px;
  padding: 8px 22px 14px;
  overflow-x: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.jadual-bekas .jadual { margin-top: 0; }

.jadual { width: 100%; border-collapse: collapse; }

.jadual th {
  text-align: left;
  font: 500 10.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emas);
  padding: 12px 14px;
  border-bottom: 1px solid var(--garis);
}

.jadual td { padding: 13px 14px; border-bottom: 1px solid rgba(216, 166, 87, 0.1); font-size: 14px; vertical-align: middle; }
.jadual td .mono { font-size: 12px; }
.jadual .ok { color: var(--go); }
.jadual a { text-decoration: none; font-weight: 500; color: var(--gading); transition: color 140ms; }
.jadual a:hover { color: var(--emas); }
.jadual tr:hover td { background: rgba(255, 255, 255, 0.03); }

.bar-mini {
  display: block;
  width: 120px;
  height: 4px;
  margin-top: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.bar-mini i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--emas);
  transition: width 400ms var(--ease);
}

.bar-mini--sah i { background: var(--go); }

/* Bar analisis kehadiran keseluruhan */
.bar-besar {
  height: 12px;
  border-radius: 99px;
  background: rgba(224, 72, 58, 0.25);   /* baki merah = tidak hadir */
  overflow: hidden;
}

.bar-besar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--go), #6FDDB4);
  transition: width 500ms var(--ease);
}

.analisis__bar { display: grid; gap: 8px; }

.bar-besar--emas { background: rgba(255, 255, 255, 0.08); }
.bar-besar--emas i { background: linear-gradient(90deg, var(--emas), #E7BA71); }

/* ---- Jadual penerima ---- */
.jadual--penerima tr { cursor: pointer; }
.jadual--penerima .t-nama strong { display: block; font-weight: 500; }
.jadual--penerima .t-nama small { display: block; font-size: 12px; color: var(--kabur); margin-top: 1px; }

.tanda {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  color: rgba(244, 237, 224, 0.3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 166, 87, 0.14);
}

.tanda--ok {
  color: #06180F;
  background: var(--go);
  border-color: var(--go);
  font-weight: 700;
}

.pil {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(216, 166, 87, 0.2);
  color: var(--kabur);
}

.pil--hadir { color: #9FE8CD; border-color: rgba(63, 185, 140, 0.5); background: rgba(63, 185, 140, 0.12); }
.pil--tidak { color: #FFD7D1; border-color: rgba(224, 72, 58, 0.5); background: rgba(224, 72, 58, 0.12); }

/* ---- Modal ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 4, 12, 0.72);
  backdrop-filter: blur(6px);
}

.modal[hidden] { display: none; }

.modal__kotak {
  position: relative;
  width: min(680px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(170deg, #1A0E30 0%, #0E1936 100%);
  border: 1px solid var(--garis);
  border-top: 3px solid var(--emas);
  border-radius: 12px;
  padding: 30px 32px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.modal__tutup {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--garis);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--gading);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.modal__tutup:hover { border-color: var(--emas); }

.modal__kotak > .mono { color: var(--emas); font-size: 10.5px; }

.modal__nama {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

.modal__jawatan { font-size: 13.5px; color: var(--kabur); margin: 2px 0 20px; }

.modal__grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: start;
}

.modal__foto { display: grid; gap: 10px; }

.modal__foto img {
  width: 210px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px 4px 28px 4px;
  background: #1B2030;
  outline: 1px solid var(--garis);
  outline-offset: 3px;
}

.modal__foto .hint { font-size: 11.5px; }

/* Peringatan foto gaya pasport */
.notis-pasport {
  font-size: 11.5px;
  line-height: 1.5;
  color: #F0D9A9;
  background: rgba(216, 166, 87, 0.12);
  border: 1px solid rgba(216, 166, 87, 0.45);
  border-radius: 8px;
  padding: 9px 11px;
}

.notis-pasport strong { display: block; margin-bottom: 2px; font-size: 12px; color: var(--emas); }

/* ---- Pelaras gambar (krop) ---- */
.krop { display: grid; gap: 10px; }
.krop[hidden] { display: none; }

.krop__tetingkap {
  position: relative;
  width: 210px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px 4px 28px 4px;
  outline: 2px solid var(--emas);
  outline-offset: 3px;
  background: #000;
  cursor: grab;
  touch-action: none;   /* seret sentuhan dikendalikan sendiri */
}

.krop__tetingkap:active { cursor: grabbing; }

.krop__tetingkap img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.krop input[type="range"] { width: 100%; accent-color: var(--emas); }
.krop__butang { display: flex; gap: 6px; }

.modal__borang { display: grid; gap: 16px; }
.modal__borang label { display: grid; gap: 7px; font-size: 13.5px; color: var(--kabur); }

.modal__borang input, .modal__borang select {
  padding: 14px 16px;
  font-size: 16px;
}

/* Mutiara kata — medan utama, paling besar; 3 baris cukup untuk 120 aksara */
#mMutiara {
  font-size: 17.5px;
  padding: 16px 18px;
  line-height: 1.5;
  min-height: 118px;
  resize: vertical;
}
.modal__butang { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 560px) {
  .modal__grid { grid-template-columns: 1fr; }
  .modal__foto { justify-items: center; }
  .modal__kotak { padding: 24px 20px; }
}

/* ---- Kad penerima ---- */
.sekolah-tajuk {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 14px 0 6px;
}
.sekolah-tajuk .mono { font-size: 12px; }

.muatnaik { text-align: center; }
.foto-butang { display: flex; gap: 6px; flex-wrap: wrap; }
.foto-butang .muatnaik { flex: 1 1 100%; }
.foto-butang .btn { flex: 1; white-space: nowrap; }
.kira { float: right; font-size: 10px; }

/* ---- Toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: rgba(12, 8, 26, 0.92);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--go);
  border-radius: 8px;
  padding: 13px 20px;
  font-size: 14px;
  max-width: 90vw;
  z-index: 30;
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

.toast[hidden] { display: none; }
.toast.is-err { border-left-color: var(--amaran); }

/* ---- Mudah alih ---- */
@media (max-width: 720px) {
  /* Telefon: guna hampir seluruh lebar, dengan ruang tepi yang selesa */
  .bekas, .bekas--luas { width: 100%; max-width: 100%; padding: 20px 16px 60px; }
  .bar { padding: 14px 16px; }
  .tabs { padding: 0 8px; }
  .jadual:not(.jadual--penerima) th:nth-child(2), .jadual:not(.jadual--penerima) td:nth-child(2) { display: none; }
  /* Jadual penerima di telefon: kekalkan cue, nama, kehadiran, butang */
  .jadual--penerima th:nth-child(3), .jadual--penerima td:nth-child(3),
  .jadual--penerima th:nth-child(4), .jadual--penerima td:nth-child(4),
  .jadual--penerima th:nth-child(6), .jadual--penerima td:nth-child(6) { display: none; }
  .bar-mini { width: 80px; }
  .bar { padding: 14px 16px; }
}