/* ============================================================
   TEMA iOS 26 – Sistem Rekod Perkembangan Murid (PBD PI Tahun 6)
   Font sistem, Liquid Glass blur, spring animation, dark mode,
   responsif.
   ============================================================ */

:root {
  --tint: #0a84ff;
  --tint-gelap: #0071e3;
  --hijau: #34c759;
  --hijau-gelap: #28a745;
  --merah: #ff3b30;
  --jingga: #ff9500;
  --ungu: #af52de;
  --teks: #1d1d1f;
  --teks-ringan: #8e8e93;
  --latar: #f2f2f7;
  --kad: #ffffff;
  --garis: rgba(60, 60, 67, 0.12);
  --radius: 18px;
  --radius-kecil: 12px;
  --teduh: 0 8px 30px rgba(0, 0, 0, 0.08);
  --teduh-besar: 0 20px 60px rgba(0, 0, 0, 0.25);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--latar);
  color: var(--teks);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scrollbar halus */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   TRANSISI SKRIN (login -> utama)
   ============================================================ */
.skrin { display: none; }
.skrin.aktif {
  display: block;
  animation: skrinMasuk 0.45s var(--ease) both;
}
#skrin-login.aktif { animation: skrinLogin 0.6s var(--spring) both; }

@keyframes skrinMasuk {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes skrinLogin {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================================
   BUTANG
   ============================================================ */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  transition: transform 0.18s var(--spring), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), opacity 0.25s var(--ease);
}
button:active { transform: scale(0.96); }

.btn-utama {
  background: var(--tint);
  color: #fff;
  padding: 13px 20px;
  font-weight: 600;
  width: 100%;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-utama:hover { background: var(--tint-gelap); box-shadow: 0 6px 20px rgba(10,132,255,0.35); }

.btn-kecil {
  background: #fff;
  color: var(--tint);
  border: 1px solid var(--garis);
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
}
.btn-kecil:hover { background: #f0f6ff; }

.btn-tutup {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(120,120,128,0.12);
  color: var(--teks);
  font-size: 18px;
  line-height: 1;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-tutup:hover { background: rgba(120,120,128,0.25); }

.btn-hapus {
  background: rgba(255,59,48,0.1);
  color: var(--merah);
  font-size: 13px;
  padding: 5px 12px;
  font-weight: 600;
  border-radius: 20px;
}

/* ============================================================
   LOGIN SCREEN (iOS)
   ============================================================ */
#skrin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(10,132,255,0.35), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(175,82,222,0.3), transparent 55%),
    radial-gradient(1000px 700px at 50% 110%, rgba(52,199,89,0.3), transparent 60%),
    linear-gradient(160deg, #0b2a4a 0%, #12355f 45%, #0f2744 100%);
  position: relative;
  overflow: hidden;
}
#skrin-login::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.kad-login {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 28px;
  box-shadow: var(--teduh-besar);
  padding: 40px 32px 32px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.5);
  animation: kadMasuk 0.7s var(--spring) both;
  z-index: 1;
}
@keyframes kadMasuk {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.logo {
  width: 74px; height: 74px;
  margin: 0 auto 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--tint), var(--ungu));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  box-shadow: 0 10px 25px rgba(10,132,255,0.4);
}
.kad-login h1 { font-size: 24px; font-weight: 700; margin: 4px 0 2px; letter-spacing: -0.02em; }
.sub { color: var(--teks-ringan); margin: 0 0 22px; font-size: 15px; }

.kad-login form { text-align: left; }
.kad-login label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--teks-ringan);
  letter-spacing: 0.02em;
}
.kad-login input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--garis);
  border-radius: 14px;
  font-size: 16px;
  background: rgba(255,255,255,0.9);
  transition: border-color 0.25s, box-shadow 0.25s;
  font-family: inherit;
}
.kad-login input:focus {
  outline: none;
  border-color: var(--tint);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.2);
}
.kad-login .btn-utama { margin-top: 22px; font-size: 17px; padding: 15px; border-radius: 15px; }
.kad-login .btn-utama:hover { transform: translateY(-1px); }

.nota { color: var(--teks-ringan); font-size: 13px; }
.mesej { min-height: 22px; font-size: 14px; color: var(--merah); margin: 12px 0 0; }
.mesej.ok { color: var(--hijau); }

/* ============================================================
   HEADER (iOS – blur)
   ============================================================ */
.kepala {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242,242,247,0.8);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--garis);
  color: var(--teks);
  padding: 14px 0;
}
.kepala-dalam {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kepala h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.info-pengguna { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.lencana {
  background: linear-gradient(135deg, var(--tint), var(--ungu));
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(10,132,255,0.3);
}
.lencana.parent { background: linear-gradient(135deg, var(--hijau), #63e6be); box-shadow: 0 4px 12px rgba(52,199,89,0.3); }

/* ============================================================
   NAV TAB (segmen iOS)
   ============================================================ */
.nav-tab {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 18px 0;
  display: flex;
  gap: 6px;
}
.nav-tab .tab {
  background: transparent;
  color: var(--tint);
  padding: 9px 18px;
  font-weight: 600;
  border-radius: 20px;
  position: relative;
  font-size: 15px;
}
.nav-tab .tab.aktif {
  background: #fff;
  color: var(--teks);
  box-shadow: var(--teduh);
}
.nav-tab .tab:not(.aktif):hover { background: rgba(10,132,255,0.08); }

.tab-panel { display: none; max-width: 1000px; margin: 0 auto; padding: 20px 18px 60px; }
.tab-panel.aktif { display: block; animation: skrinMasuk 0.35s var(--ease) both; }

/* ============================================================
   BAR ALAT / CARI
   ============================================================ */
.bar-alat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#cari-murid {
  flex: 1;
  min-width: 200px;
  padding: 13px 16px 13px 42px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  background: rgba(255,255,255,0.85);
  box-shadow: var(--teduh);
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}
#cari-murid:focus { outline: 3px solid rgba(10,132,255,0.25); }
#btn-tambah-murid { width: auto; }

/* ============================================================
   GRID MURID (iOS cards + fade-up)
   ============================================================ */
.grid-murid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.kad-murid {
  background: var(--kad);
  border-radius: 20px;
  box-shadow: var(--teduh);
  overflow: hidden;
  border: 1px solid var(--garis);
  transition: transform 0.25s var(--spring), box-shadow 0.3s var(--ease);
  cursor: pointer;
  animation: kadFadeUp 0.5s var(--spring) both;
}
@keyframes kadFadeUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.kad-murid:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.14); }
.kad-murid:active { transform: scale(0.98); }
.kad-murid .foto {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: #eef0f3;
}
.kad-murid .foto-penuh { height: 170px; }
.kad-murid .info { padding: 13px 15px; }
.kad-murid .nama { font-weight: 700; font-size: 16px; margin: 0; letter-spacing: -0.01em; }
.kad-murid .meta { color: var(--teks-ringan); font-size: 13px; margin-top: 2px; }
.kad-murid .ciri {
  font-size: 12px;
  color: var(--ungu);
  margin-top: 6px;
  background: rgba(175,82,222,0.08);
  padding: 5px 9px;
  border-radius: 10px;
  display: inline-block;
}
.avatar-huruf {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ============================================================
   MODAL (iOS sheet)
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 50;
  animation: overlayMasuk 0.3s var(--ease) both;
}
@keyframes overlayMasuk { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 60;
  background: var(--latar);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--teduh-besar);
  animation: sheetMasuk 0.45s var(--spring) both;
}
@keyframes sheetMasuk {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-kandungan { padding: 26px 24px 34px; position: relative; }

.muka-murid { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.muka-murid img {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  background: #eee;
}
.avatar-bulat {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.muka-murid h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.butang-potong { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.butang-potong .btn-utama { width: auto; padding: 11px 18px; }

/* ============================================================
   GRAF & SENARAI TP
   ============================================================ */
.graf-tp { margin: 14px 0; }
.graf-tp .graf-bar { color: var(--teks-ringan); font-size: 13px; margin-bottom: 8px; }
.baris { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; }
.baris .label-bidang { width: 74px; text-align: right; color: var(--teks); font-weight: 700; }
.batang {
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  min-width: 24px;
  animation: batangMasuk 0.7s var(--spring) both;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
@keyframes batangMasuk { from { width: 0; } }

.senarai-tp-item {
  border: 1px solid var(--garis);
  border-radius: 16px;
  padding: 13px 15px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: var(--teduh);
  animation: kadFadeUp 0.4s var(--spring) both;
}
.senarai-tp-item .atas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.senarai-tp-item .bidang-tajuk { font-weight: 700; }
.lencana-tp {
  color: #fff;
  padding: 4px 13px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.senarai-tp-item .catatan { font-size: 14px; color: var(--teks); margin-top: 8px; }
.senarai-tp-item .tarikh { font-size: 12px; color: var(--teks-ringan); }

/* ============================================================
   JADUAL
   ============================================================ */
.jadual { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 16px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--teduh); }
.jadual th, .jadual td { border-bottom: 1px solid var(--garis); padding: 12px 14px; text-align: left; font-size: 14px; }
.jadual th { background: #f7f7fa; color: var(--teks-ringan); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.jadual tr:last-child td { border-bottom: none; }

/* ============================================================
   BORANG
   ============================================================ */
.grid-borang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 10px; }
.grid-borang label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 6px; }
.grid-borang label.penuh { grid-column: 1 / -1; }
.grid-borang input,
.grid-borang select,
.grid-borang textarea {
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: rgba(255,255,255,0.9);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.grid-borang input:focus,
.grid-borang select:focus,
.grid-borang textarea:focus {
  outline: none;
  border-color: var(--tint);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.18);
}

/* ============================================================
   PANDUAN TP
   ============================================================ */
.kad-panduan { background: #fff; border-radius: 20px; padding: 22px; box-shadow: var(--teduh); }
.kad-bidang { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--garis); }
#senarai-bidang h3 { margin: 16px 0 4px; color: var(--tint); }
#senarai-bidang ul { margin: 4px 0; padding-left: 20px; }

/* ============================================================
   LOADING SHIMMER
   ============================================================ */
.shimmer {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 40%, #eee 55%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   MODUL PENTAKSIRAN / SAHSIAH / BUKTI
   ============================================================ */
.ringkasan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.kad-ringkasan {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--teduh);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rk-label {
  font-size: 12px;
  color: var(--teks-ringan);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rk-nilai { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.rk-nota { font-size: 12px; color: var(--teks-ringan); }
.pilih-kecil,
.bar-alat input[type="text"] {
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 14px;
  color: var(--teks);
  min-width: 150px;
}
.pilih-kecil:focus,
.bar-alat input[type="text"]:focus {
  outline: none;
  border-color: var(--tint);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.18);
}
.jadual-bungkus { overflow-x: auto; margin-top: 16px; border-radius: 16px; }
.jadual-bungkus .jadual { margin-top: 0; min-width: 640px; }
.lencana-gred,
.lencana-jenis {
  display: inline-block;
  color: #fff;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.lencana-jenis.positif { background: #1b7f5c; }
.lencana-jenis.negatif { background: #c0392b; }
.lencana-jenis.lewati { background: #b26a00; }
.pautan-bukti { color: var(--tint); font-weight: 600; text-decoration: none; }
.pautan-bukti:hover { text-decoration: underline; }
.senarai-bukti { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.senarai-bukti .tarikh-bukti { color: var(--teks-ringan); font-size: 12px; }
#tab-pentaksiran h2,
#tab-sahsiah h2,
#tab-bukti h2 { margin-top: 0; letter-spacing: -0.02em; }

/* ============================================================
   DARK MODE (iOS dinamik) – ikut tetapan sistem
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --teks: #f5f5f7;
    --teks-ringan: #98989d;
    --latar: #000000;
    --kad: #1c1c1e;
    --garis: rgba(255,255,255,0.12);
    --teduh: 0 8px 30px rgba(0,0,0,0.6);
    --teduh-besar: 0 20px 60px rgba(0,0,0,0.8);
  }
  .kepala {
    background: rgba(0,0,0,0.72);
    border-bottom-color: rgba(255,255,255,0.1);
  }
  .kad-login {
    background: rgba(28,28,30,0.85);
    border-color: rgba(255,255,255,0.12);
  }
  .kad-login input { background: rgba(44,44,46,0.9); color: #fff; }
  .nav-tab .tab.aktif { background: #2c2c2e; color: #fff; }
  #cari-murid,
  .grid-borang input,
  .grid-borang select,
  .grid-borang textarea,
  .pilih-kecil,
  .bar-alat input[type="text"] {
    background: #2c2c2e;
    color: #fff;
    box-shadow: none;
  }
  .kad-murid, .senarai-tp-item, .jadual, .kad-panduan, .kad-ringkasan { background: #1c1c1e; }
  .jadual th { background: #2c2c2e; color: #98989d; }
  .btn-kecil { background: #2c2c2e; color: #0a84ff; }
  .modal { background: #000; }
  .senarai-tp-item, .jadual, .kad-panduan { border-color: var(--garis); }
}

/* ============================================================
   RESPONSIF
   ============================================================ */
@media (max-width: 600px) {
  .grid-borang { grid-template-columns: 1fr; }
  .kepala-dalam { flex-direction: column; align-items: flex-start; }
  .nav-tab { overflow-x: auto; flex-wrap: nowrap; }
  .muka-murid { flex-direction: column; text-align: center; }
  .grid-murid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .modal { border-radius: 22px 22px 0 0; }
  .modal-kandungan { padding: 22px 18px 30px; }
  .kad-login { padding: 32px 22px 24px; }
}

/* ============================================================
   MUAT NAIK FOTO MURID
   ============================================================ */
.foto-pratonton {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
}
.foto-pratonton img {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--garis);
  display: none;
}
.foto-pratonton img.tunjuk { display: block; }
.foto-pratonton .mesej { margin: 0; }