/* =====================================================================
   Rekaan "Ceria Lembut" — latar gradien lembut, kad bulat, jubin berwarna.
   Dimuat PALING AKHIR. Hanya penampilan.
   Untuk kembali ke rekaan lama: padam baris <link ... rekaan-baru.css> dalam index.html.
   ===================================================================== */
:root{
  --bg:#EEF4FF;--line:#E4EAF6;--r:20px;
  --sh:0 2px 4px rgba(60,80,140,.04),0 10px 28px -12px rgba(60,80,140,.18);
  --g-hijau:linear-gradient(135deg,#34D399,#10B981);
  --g-biru:linear-gradient(135deg,#60A5FA,#3B82F6);
  --g-oren:linear-gradient(135deg,#FBBF24,#F59E0B);
  --g-ungu:linear-gradient(135deg,#A78BFA,#7C6CF0);
  --g-hero:linear-gradient(135deg,#6D7CF5 0%,#8B7CF6 50%,#5AA7F7 100%);
}
body{background:linear-gradient(180deg,#DDF1FF 0%,#EEF0FF 45%,#E8F8F1 100%) fixed!important;min-height:100vh}

/* ---------- Log masuk ---------- */
.authScreen{background:linear-gradient(170deg,#CDEBFF 0%,#E7E5FF 50%,#D9F7E8 100%)!important}
.authCard{border-radius:28px!important;box-shadow:0 20px 50px -20px rgba(70,90,170,.35)!important;border:1px solid rgba(255,255,255,.8)!important}
.authLogo{background:var(--g-hijau)!important;border-radius:26px!important;box-shadow:0 10px 24px -10px rgba(16,185,129,.7)}
.authTitle{font-weight:800!important}
.authCard input{border-radius:16px!important;background:#F7FAFF!important;border:1px solid var(--line)!important}
.authBtn{background:var(--g-hijau)!important;border:0!important;border-radius:999px!important;box-shadow:0 10px 22px -10px rgba(16,185,129,.8);font-weight:700!important}

/* ---------- Kad & butang ---------- */
.card,.importBox,.backupBox,.historyBox,.rptBox{border-radius:var(--r)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:var(--sh)!important;background:rgba(255,255,255,.92)}
button.p{background:var(--g-biru)!important;border:0!important;border-radius:14px!important;box-shadow:0 8px 18px -10px rgba(59,130,246,.9);font-weight:700}
button.p:hover:not(:disabled){filter:brightness(.96)}
input,select,textarea{border-radius:14px!important}
.modeBtns button{border-radius:14px!important}
.modeBtns button.on{background:var(--g-ungu)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px -10px rgba(124,108,240,.9)}
.pageTitle::before{background:var(--g-ungu)!important;width:7px!important}

/* ---------- Halaman Utama ---------- */
.hero{background:var(--g-hero)!important;border-radius:26px!important;box-shadow:0 16px 36px -16px rgba(109,124,245,.75)}
.hero:after{background:rgba(255,255,255,.14)!important}

.pintas{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;background:transparent!important;box-shadow:none!important;padding:0!important;border:0!important}
.pintas .pt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:18px 10px;border:0!important;border-radius:22px;color:#fff!important;font-weight:700;box-shadow:0 12px 24px -14px rgba(40,60,120,.55)}
.pintas{margin:16px 0 0!important}
.pintas .pt:nth-child(1){background:var(--g-hijau)!important}
.pintas .pt:nth-child(2){background:var(--g-biru)!important}
.pintas .pt:nth-child(3){background:var(--g-oren)!important}
.pintas .pt:nth-child(4){background:var(--g-ungu)!important}
.pintas .pt{box-shadow:0 12px 24px -14px rgba(40,60,120,.55)!important}
.pintas .pt:nth-child(5){background:linear-gradient(135deg,#F472B6,#EC4899)!important;grid-column:1/-1;min-height:84px;flex-direction:row;gap:14px}
.pintas .pt i{background:transparent!important;width:auto!important;height:auto!important}
.pintas .pt i svg{stroke:#fff!important;width:36px!important;height:36px!important}
.pintas .pt span{color:#fff!important;font-size:14px}

#homeKpi .kpi{border-top:0!important}
#homeKpi .kpi .kpiBar>i{background:var(--g-hijau)!important}
#homeKpi .kpi:nth-child(2) .kpiBar>i{background:var(--g-biru)!important}

/* ---------- Kehadiran: kad statistik bertona warna ---------- */
.stCard{border-radius:18px!important;border:0!important;text-align:center}
.stCard .stLbl{font-weight:600;font-size:13px}
.stCard .stVal{font-weight:800}
.stCard.accG{background:linear-gradient(160deg,#E3FAEE,#CDF5E0)!important}
.stCard.accG .stVal{color:#0E9F6E}
.stCard.accP{background:linear-gradient(160deg,#FFE9E9,#FFD6D6)!important}
.stCard.accP .stVal{color:#E02424}
.stCard.accB{background:linear-gradient(160deg,#E6EFFF,#D3E3FF)!important}
.stCard.accB .stVal{color:#2F63E0}
.stCard:not(.accG):not(.accP):not(.accB){background:#F1F3F8!important}
.hKira{border-radius:999px!important}
.hKira .hkH,.hKira .hkT,.hKira .hkB{border-radius:999px}

/* Kad murid (telefon) */
.hMobileCard{border-radius:20px!important;box-shadow:var(--sh)!important;border:0!important}
.hMobileName{font-weight:700}
.hMobileStatus{border-radius:14px!important;font-weight:700;border-width:0!important}
.hMobileStatus.present{background:linear-gradient(135deg,#D8F8E7,#BFF1D6)!important;color:#0B7A52!important}
.hMobileStatus.absent{background:linear-gradient(135deg,#FFE4E4,#FFCFCF)!important;color:#C81E1E!important}

/* ---------- Kelas Mengaji: senarai pemantauan ---------- */
.mgGroup{border:0!important;border-radius:20px!important;background:#fff;box-shadow:var(--sh);overflow:hidden;margin-bottom:12px}
.mgGroup>summary{padding:14px 16px!important;background:linear-gradient(135deg,#EEF2FF,#E6F7F1);font-weight:700}
.mgRow{margin:8px 10px!important;padding:12px 14px!important;border:0!important;border-radius:16px!important;background:#F6F9FF;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.mgRow.late{background:linear-gradient(135deg,#FFEFEF,#FFE3E3)!important}
.mgRow .mgName{grid-column:1;font-weight:700;text-align:left}
.mgRow .mgLast{grid-column:1;font-size:13px}
.mgRow .mgSince{grid-column:2;grid-row:1/3;padding:5px 12px;border-radius:999px;background:#D8F8E7;color:#0B7A52;font-weight:700;font-size:12px;white-space:nowrap}
.mgRow.late .mgSince{background:#FFD0D0;color:#C81E1E}

/* ---------- Senarai Murid ---------- */
.slTab button{border-radius:999px!important}
.slTab button .slKira{border-radius:999px}
.dirClass{border:0!important;border-radius:18px!important;background:linear-gradient(135deg,#EEF2FF,#E6F7F1)!important;box-shadow:var(--sh)}
.dirClass .dirClassName{color:#3B5BDB!important}
table.dirTable{border-collapse:separate!important;border-spacing:0 8px!important;background:transparent!important}
.dirTable,.dirTable tbody,.dirTable thead,.dirList .wrap{border:0!important;box-shadow:none!important}
#dirList{border:0!important}
table.dirTable tbody td.dirAct{padding-right:14px!important}
table.dirTable thead th{background:transparent!important;border:0!important;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
table.dirTable tbody tr{box-shadow:0 4px 14px -8px rgba(60,80,140,.3)}
table.dirTable tbody td{background:#fff!important;border:0!important;padding:12px 10px!important}
table.dirTable tbody td:first-child{border-radius:16px 0 0 16px}
table.dirTable tbody td:last-child{border-radius:0 16px 16px 0}
table.dirTable .payTdNo{width:34px;text-align:center;font-weight:700;color:#3B5BDB}
table.dirTable .payTdName{font-weight:700}
.dirAct button{border-radius:999px!important;border:0!important;background:#EAF0FF!important;color:#3B5BDB!important;font-weight:700;padding:6px 12px}
.dirAct button.dirPindah{background:#E3FAEE!important;color:#0B7A52!important}

/* ---------- Laporan (skrin sahaja; cetakan tak berubah) ---------- */
@media screen{
  .rptBox{padding:0!important;overflow:hidden;margin-bottom:14px}
  .rptBox .rptTitle{padding:14px 16px;margin:0!important;background:var(--g-hero);color:#fff!important;font-weight:800;font-size:14px;letter-spacing:.02em;border:0!important}
  .rptBox .rptNote{padding:10px 16px 14px;color:var(--mut)}
  .rptTbl{border-collapse:separate!important;border-spacing:0 6px!important;width:100%;padding:0 10px;box-sizing:border-box;border:0!important;background:transparent!important}
  .rptTbl th{background:transparent!important;border:0!important;color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
  .rptTbl td{background:#F6F9FF!important;border:0!important;padding:10px 12px!important}
  .rptTbl td:first-child{border-radius:14px 0 0 14px}
  .rptTbl td:last-child{border-radius:0 14px 14px 0;font-weight:700}
  .rptKv td:last-child{text-align:right;color:#3B5BDB;font-size:15px}
  .rptStu td:nth-child(3){color:#0E9F6E;font-weight:700}
  .rptStu td:nth-child(4){color:#E02424;font-weight:700}
  .rptStu td:nth-child(2){font-weight:700}
  #ctrlCard #ex,#ctrlCard #exs{background:var(--g-hijau)!important;color:#fff!important;border:0!important;border-radius:14px!important;font-weight:700}
}

/* ---------- Tetapan / Profil ---------- */
.pfAv{border:3px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,var(--g-hero) border-box!important;box-shadow:0 10px 22px -10px rgba(109,124,245,.8)}
.cardTitle{font-weight:800}
.card label{font-weight:600}

/* ---------- Graf (belum dilihat dengan data sebenar) ---------- */
.ppBars{border-bottom-color:#DDE5F5!important}
.ppBar div{background:var(--g-biru)!important;border-radius:10px 10px 0 0!important}
.ppBar.kini div{background:var(--g-hijau)!important}
.ppBar em{color:#3B5BDB!important}
.mgChartWrap{padding:12px;border-radius:18px;background:#F6F9FF}

/* ---------- Sijil: pilih tarikh (Hari · Bulan · Tahun) ---------- */
.sjTkhBaris{display:grid;grid-template-columns:.8fr 1.5fr 1fr;gap:8px}
.sjTkhBaris select{width:100%}

/* ---------- Sijil: amaran nama, tampal nama, kedudukan ---------- */
.sjAmaranNama{margin:8px 0;padding:10px 12px;border-radius:14px;background:#FFF6DB;color:#8A5A00;font-weight:600;font-size:13px}
.sjAmaranNama .sjAmaranTeks{margin-bottom:6px}
.sjAmaranNama button{margin:2px 6px 2px 0}
.sjBaris.ulang{background:#FFF6DB!important;border-radius:14px;box-shadow:inset 0 0 0 2px #F5C451}
#sjTampal{width:100%;margin:8px 0;box-sizing:border-box}
.sjKedDt{margin-top:10px}
.sjKedDt summary{cursor:pointer;font-weight:700;color:#3B5BDB}
.sjKedDt textarea{width:100%;box-sizing:border-box;margin-top:6px}

/* ---------- Sijil: susun atur 3 langkah ---------- */
.sjTabs button{font-weight:700}
.sjLayout{display:block}
.sjKolKiri{min-width:0}
.sjPanelPk{display:none}
.sjFab{position:fixed;right:14px;bottom:88px;z-index:120;min-height:46px;padding:0 18px!important;border:0!important;border-radius:999px!important;background:var(--g-ungu)!important;color:#fff!important;font-weight:800;box-shadow:0 12px 26px -10px rgba(124,108,240,.9)}
.sjPanelPk.buka{display:block;position:fixed;inset:0;z-index:300;background:#EEF2FF;padding:14px 14px 90px;overflow:auto}
.sjPkHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sjPkHead button{min-height:36px;padding:0 14px!important;border-radius:999px!important}
@media(min-width:1000px){
  .sjLayout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:start}
  .sjPanelPk{display:block;position:sticky;top:72px;background:rgba(255,255,255,.92);border-radius:var(--r);box-shadow:var(--sh);padding:14px}
  .sjFab,.sjPkHead button{display:none}
}
.sjLangkahNav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.sjLangkahNav button{margin-top:0!important}
.sjLangkahNav button:only-child{grid-column:1/-1}
.sjLipat>summary{cursor:pointer;font-weight:800;color:#3B5BDB;padding:6px 0;min-height:32px}
.sjLipat[open]>summary{margin-bottom:8px}
.sjBaris{grid-template-columns:24px minmax(0,1fr) auto 32px!important}
.sjBaris .sjKiri{display:flex;flex-direction:column;gap:6px;min-width:0}
.sjBaris .sjButiran{display:none;grid-template-columns:1fr;gap:6px}
.sjBaris.bukaButiran .sjButiran{display:grid}
.sjBaris .sjSubIn{margin-top:0}
.sjLebih{min-height:32px!important;width:36px;padding:0!important;border-radius:50%!important;font-weight:900}
.sjBaris .sjIC{grid-column:auto!important;grid-row:auto!important}

/* ---------- Peringatan backup (Utama): paparkan kad bila backup tertunggak; sembunyi bila tak perlu ---------- */
#s0 #backupRemind:not([style*="display:none"]):not([style*="display: none"]):not(:empty){display:block!important;background:linear-gradient(135deg,#FFF7E0,#FFECC2)!important;border:0!important;border-left:6px solid #F59E0B!important}
#s0 #backupRemind .cardTitle{color:#8A5A00}

/* ---------- Bar kemas kini & versi aplikasi ---------- */
.barKemas{position:fixed;left:12px;right:12px;bottom:92px;z-index:400;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:18px;background:#1F2A44;color:#fff;font-weight:600;box-shadow:0 14px 30px -12px rgba(15,23,42,.6)}
.barKemas span{flex:1 1 160px}
.barKemas button{min-height:38px;padding:0 14px!important;border-radius:999px!important;border:0!important}
.barKemas button:not(.p){background:rgba(255,255,255,.16)!important;color:#fff!important}
.verApp{font-weight:700}
.verBtn{background:none;border:0;padding:4px 6px;color:#3B5BDB;font-weight:700;text-decoration:underline;cursor:pointer}

/* ---------- Dashboard Sijil ---------- */
.sjKeUtama{background:none!important;border:0!important;box-shadow:none!important;color:#3B5BDB!important;font-weight:800;padding:6px 2px!important;min-height:34px;margin:0 0 4px}
.sjStat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.sjStatT{border-radius:18px;padding:12px 8px;text-align:center;background:linear-gradient(160deg,#E6EFFF,#D3E3FF)}
.sjStatT:nth-child(2){background:linear-gradient(160deg,#E3FAEE,#CDF5E0)}
.sjStatT:nth-child(3){background:linear-gradient(160deg,#F1E9FF,#E3D6FF)}
.sjStatT b{display:block;font-size:24px;font-weight:800;color:#2F3B64}
.sjStatT small{font-weight:600;color:var(--mut)}
.sjBarR{display:grid;grid-template-columns:110px 1fr 36px;gap:8px;align-items:center;margin:6px 0;font-size:13px}
.sjBarW{height:10px;border-radius:999px;background:#E9EEFA;overflow:hidden}
.sjBarW i{display:block;height:100%;border-radius:999px;background:var(--g-ungu)}
.sjBarR b{text-align:right}
.sjRekaItem{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px;margin:8px 0;border-radius:16px;background:#F6F9FF}
.sjRekaItem.semasa{box-shadow:inset 0 0 0 2px #7C6CF0;background:#F3F0FF}
.sjRekaInfo{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 180px}
.sjRekaInfo small{color:var(--mut)}
.sjRekaInfo .sjSemasa{color:#5B48D6;font-weight:700}
.sjRekaBtn{display:flex;gap:6px;flex-wrap:wrap}
.sjRekaBtn button{min-height:36px;padding:0 14px!important;border-radius:999px!important}
.sjPadam{color:#C81E1E!important}
.sjSejItem{display:flex;justify-content:space-between;gap:10px;padding:10px 4px;border-top:1px solid var(--line)}
.sjSejItem small{display:block;color:var(--mut)}
.sjSejMasa{white-space:nowrap;text-align:right}
#sjCari{width:100%;box-sizing:border-box;margin-bottom:6px}

/* ---------- Menu bawah (telefon) / sisi (komputer) ---------- */
.tabs button.on{background:#EAF0FF!important;color:#3B5BDB!important}
.tabs button.on svg{stroke:#3B5BDB!important}
@media(max-width:800px){
  .tabs{border-radius:26px 26px 0 0!important;box-shadow:0 -10px 30px -12px rgba(60,80,140,.3)!important;border-top:0!important}
}