/* =====================================================================
   Tema korporat (Fasa 6) — dimuat SELEPAS app.css. Hanya penampilan;
   tiada perubahan struktur data. Padam fail ini untuk kembali ke rupa asal.
   ===================================================================== */
:root{
  --bg:#F5F6F8;--card:#fff;--tx:#101828;--mut:#667085;--line:#E4E7EC;
  --blue:#EEF2FB;--blueT:#1E3A8A;--pri:#1E3A8A;--pri-d:#172E6E;--pt:#fff;--ring:#9DB1E6;
  --ok:#ECFDF3;--okT:#067647;--no:#FEF3F2;--noT:#B42318;
  --sh:0 1px 2px rgba(16,24,40,.05);--r:12px;--nav:248px;
}
body{background:var(--bg);color:var(--tx);font-size:14px;letter-spacing:0}
h1{font-size:16px;letter-spacing:.01em;color:var(--tx)}
.sub{letter-spacing:.02em;font-size:12px;font-weight:500;text-transform:none}

/* Kepala: bar putih rata */
.appHeader{background:#fff;border-radius:0;border-bottom:1px solid var(--line);box-shadow:none;margin:0 -16px;padding:14px 20px}
.appHeader h1{color:var(--tx)}
.appHeader .sub{color:var(--mut);opacity:1}
.appHeader .adminUser{color:var(--mut)}
.appHeader .logoutBtn{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:var(--sh)}
.appHeader .logoutBtn:hover:not(:disabled){background:#F9FAFB}
.statusLine{color:var(--mut)}
#langgananLine{background:var(--blue);border:1px solid #DCE4F5;color:var(--blueT);border-radius:10px;padding:8px 12px}
#langgananLine.offline{background:#FFFAEB;border-color:#FEDF89;color:#B54708}

/* Tajuk halaman */
.pageTitle{font-size:20px;font-weight:600;letter-spacing:0;color:var(--tx);text-transform:none}
.pageTitle::before{display:none}
.cardTitle{color:var(--tx);font-size:15px;font-weight:600}

/* Butang & input */
button{border-radius:8px;border-color:#D0D5DD;color:#344054;box-shadow:var(--sh)}
button:hover:not(:disabled){background:#F9FAFB}
button.p,.authBtn{background:var(--pri)!important;border-color:var(--pri);color:#fff;box-shadow:var(--sh)}
button.p:hover:not(:disabled){background:var(--pri-d)!important}
input,select,textarea{border-radius:8px;border-color:#D0D5DD}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(30,58,138,.15)}
input[type=checkbox]{accent-color:var(--pri)}

/* Kad & statistik */
.card,.importBox,.backupBox,.historyBox,.rptBox{border-radius:var(--r);border-color:var(--line);box-shadow:var(--sh)}
.stCard{border-top:1px solid var(--line)!important;border-radius:var(--r)}
.stLbl{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;color:var(--mut)}
.stVal{color:var(--tx);font-weight:600;letter-spacing:-.01em}
.payCard{border-top:1px solid var(--line)}
.payCard b{color:var(--tx)}

/* Sub-tab */
.modeBtns{background:#F2F4F7}
.modeBtns button{box-shadow:none}
.modeBtns button.on{color:var(--pri)}

/* Jadual */
th{background:#F9FAFB;color:var(--mut);text-transform:none;font-size:12px;letter-spacing:0;font-weight:600}
th.h:hover{background:#F2F4F7}
tbody tr:nth-child(even) td{background:#fff}
tbody tr:hover td{background:#F9FAFB}
.c.H{background:var(--ok);color:var(--okT);border-color:#ABEFC6}
.c.T{background:var(--no);color:var(--noT);border-color:#FECDCA}
.hMobileStatus.present{border-color:#ABEFC6}.hMobileStatus.absent{border-color:#FECDCA}

/* Warna aksen lama (hijau) → biru tua */
.studentLink,.studentNameBtn,.dirClassName,.payGroup td,.guruMgHead,.slipSaved{color:var(--pri)!important}
.admCard:hover,.dirClass:hover,.dirClass.open,.dirTable{border-color:var(--pri)!important}
.admCard.sel,.payChip.cur{box-shadow:0 0 0 2px var(--pri) inset!important}
.payMonth.cur{border-color:var(--pri);box-shadow:0 0 0 2px rgba(30,58,138,.15)}
.payRowBtn:hover{border-color:var(--pri)}
.mgLine{stroke:var(--pri)}.mgDot{fill:var(--pri)}
.rpHead{border-bottom-color:var(--pri)}.rpTitle{color:var(--pri)}.rp h2{color:var(--tx)}

/* Log masuk */
.authScreen{background:var(--bg)}
.authCard{box-shadow:0 12px 32px -8px rgba(16,24,40,.18);border:1px solid var(--line)}
.authLogo{background:var(--pri);color:#fff;font-size:22px;border-radius:12px}
.authTitle{color:var(--tx)}

/* ---------------- Navigasi ---------------- */
.tabs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.tabs button i{display:inline-flex}
.navBrand,.navGrp,.navFoot{display:none}
.tabs button{box-shadow:none}
.tabs button.on{background:var(--blue);color:var(--pri);border-color:transparent;box-shadow:none}

/* Desktop: bar sisi */
@media(min-width:1024px){
  main{max-width:none;margin:0 0 0 var(--nav);padding:0 28px 40px}
  .appHeader{margin:0 -28px;padding:14px 28px}
  .tabs{position:fixed;top:0;left:0;bottom:0;width:var(--nav);margin:0;padding:18px 14px;display:flex;flex-direction:column;gap:2px;
        background:#fff;border-right:1px solid var(--line);border-bottom:0;backdrop-filter:none;z-index:60;overflow-y:auto}
  .tabs button{flex:0 0 auto;display:flex;align-items:center;gap:10px;justify-content:flex-start;padding:8px 10px;border-radius:8px;
               color:#344054;font-weight:500;font-size:13.5px;min-height:36px;text-align:left}
  .tabs button i{margin:0}
  .tabs button:hover:not(:disabled){background:#F9FAFB}
  .tabs button.on{background:var(--blue);color:var(--pri);font-weight:600}
  .navBrand{display:flex;align-items:center;gap:10px;padding:2px 6px 18px}
  .navMk{width:34px;height:34px;border-radius:9px;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto}
  .navBrand b{display:block;font-size:14px;line-height:1.2;color:var(--tx)}
  .navBrand small{color:var(--mut);font-size:11.5px}
  .navGrp{display:block;font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;padding:14px 10px 6px}
  .navFoot{display:flex;gap:10px;align-items:center;margin-top:auto;border-top:1px solid var(--line);padding:14px 6px 2px}
  .navFoot .av{width:34px;height:34px;border-radius:50%;background:#DCE4F5;color:var(--pri);display:grid;place-items:center;font-weight:600;font-size:13px;flex:0 0 auto}
  .navFoot b{display:block;font-size:13px;color:var(--tx)}
  .navFoot small{color:var(--mut);font-size:11.5px;line-height:1.35;display:block}
}
/* Telefon: bar bawah (ikon SVG) */
@media(max-width:800px){
  .tabs button{color:var(--mut);font-weight:600}
  .tabs button.on{background:transparent;color:var(--pri)}
  .tabs button i{font-size:0}
  .tabs button span{font-size:10.5px}
}

/* ---------------- Reka resit ---------------- */
.rekaGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.rekaPratonton{position:sticky;top:16px}
.rekaPratonton img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;display:block;background:#fff}
@media(max-width:900px){.rekaGrid{grid-template-columns:1fr}.rekaPratonton{position:static}}
.rkTpl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rkTpl button{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border:1.5px solid var(--line);border-radius:10px;box-shadow:none;font-size:12.5px}
.rkTpl button.on{border-color:var(--pri);box-shadow:0 0 0 3px var(--blue)}
.rkTpl canvas{width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.rkWarna{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rkWarna button{width:28px;height:28px;min-height:0;border-radius:50%;padding:0;border:2px solid #fff;box-shadow:0 0 0 1px #D0D5DD}
.rkWarna button.on{box-shadow:0 0 0 2px var(--tx)}
.rkWarna input[type=color]{width:36px;height:30px;padding:2px;min-height:0}
.rkFld{margin-top:12px}
.rkFld>label{display:block;font-size:12.5px;font-weight:500;color:#344054;margin-bottom:6px}
.rkFld input[type=text]{width:100%}
.rkImg{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rkImg img{height:40px;max-width:120px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:#fff;padding:2px}
.rkNota{font-size:12px;color:var(--mut);margin-top:4px}

/* Lebar telefon: tiada skrol mendatar */
@media(max-width:1023px){main{padding-left:16px;padding-right:16px}.appHeader{margin:0 -16px}}
#profilCard .ctrl{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:600px){#profilCard .ctrl{grid-template-columns:1fr}}
@media(max-width:800px){.tabs span[data-pendek]{font-size:0!important}.tabs span[data-pendek]::after{content:attr(data-pendek);font-size:10px;letter-spacing:-.2px}.tabs button{padding-left:0!important;padding-right:0!important}.tabs button span{overflow:visible!important;text-overflow:clip!important}}
#tbSub{margin-bottom:12px}
#profilCard .fld input{width:100%;min-width:0}#profilCard .fld label{min-height:0}

.tmModul{display:flex;flex-direction:column;gap:8px}
.tmRow{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px;align-items:center}
.tmRow select{width:100%}
.tmNota{font-size:11.5px;color:var(--mut)}
@media(max-width:600px){.tmRow{grid-template-columns:1fr}}

.setujuTerma{display:flex;gap:8px;align-items:flex-start;margin:14px 0 4px;font-size:13px;line-height:1.45;text-align:left}
.setujuTerma input{margin-top:2px;flex:0 0 auto}
.authHint a,.note a{color:var(--pri)}
.rpNota{font-size:9.5pt;color:#555}

/* Halaman Utama (Fasa 7) */
.homeDate{color:var(--mut);font-size:13px;margin:18px 0 0}
#homeSalam{margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 14px}
.kpi{padding:14px 16px!important;margin:0!important}
.kpiL{font-size:12.5px;color:var(--mut);font-weight:500}
.kpiV{font-size:26px;font-weight:600;letter-spacing:-.01em;margin-top:2px;color:var(--tx)}
.kpiS{font-size:12px;color:var(--mut);margin-top:2px}
.kpiBar{height:6px;border-radius:99px;background:var(--line);margin-top:10px;overflow:hidden}
.kpiBar>i{display:block;height:100%;background:var(--pri);border-radius:99px}
.homeGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.homeGrid .card{margin:0;padding:0;overflow:hidden}
.homeGrid .cardHead{padding:14px 16px;border-bottom:1px solid var(--line);margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.homeGrid .cardTitle{margin:0}
.tugasRow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:11px 16px;background:#fff;min-height:0}
.tugasRow:last-child{border-bottom:0}
.tugasRow:hover{background:#F9FAFB}
.tugasRow b{display:block;font-size:13.5px;color:var(--tx);font-weight:600}
.tugasRow small{display:block;font-size:12px;color:var(--mut);font-weight:400}
.tunggakRM{font-size:13px;color:#344054;white-space:nowrap}
.lencana{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid var(--line);background:#F9FAFB;color:#344054;white-space:nowrap}
.lencana.ok{background:#ECFDF3;border-color:#ABEFC6;color:#067647}
.lencana.warn{background:#FFFAEB;border-color:#FEDF89;color:#B54708}
.homeKosong{padding:14px 16px;color:var(--mut);font-size:13px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.homeGrid{grid-template-columns:1fr}.kpiV{font-size:22px}}
#s0 #backupRemind{display:none!important}

#s0 .backupBox{margin-top:14px}
.backupLewat{color:#B54708!important;font-weight:600}
.tmCipta{justify-self:start;border-style:dashed!important;color:var(--pri)!important;background:#fff}

/* ===== Gaya e-wallet (Fasa 7b): hero, pintasan, karusel, menu bawah ===== */
.hero{background:linear-gradient(135deg,#1E3A8A 0%,#2563EB 72%,#3B82F6 100%);color:#fff;border-radius:18px;padding:18px 20px 64px;margin:16px 0 0;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-70px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.heroR1{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.heroPill{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.35)!important;color:#fff!important;border-radius:99px!important;padding:5px 12px!important;font-size:12px!important;font-weight:600;min-height:0!important;box-shadow:none!important}
.heroAv{width:36px;height:36px;border-radius:50%;background:#fff;color:#1E3A8A;display:grid;place-items:center;font-weight:700;font-size:13px}
.heroTkh{font-size:13px;opacity:.85;margin-top:14px;position:relative;z-index:1}
.heroSalam{font-size:20px;font-weight:700;line-height:1.25;position:relative;z-index:1}
.heroAngka{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:14px;position:relative;z-index:1}
.heroAngka small{display:block;font-size:12.5px;opacity:.88}
.heroAngka b{display:block;font-size:32px;letter-spacing:-.02em;line-height:1.15}
.heroSub{opacity:.8!important;margin-top:2px}
.heroBtn{background:transparent!important;border:1.5px solid rgba(255,255,255,.75)!important;color:#fff!important;border-radius:99px!important;font-weight:600;white-space:nowrap;box-shadow:none!important}
.heroBtn:hover{background:rgba(255,255,255,.12)!important}
.pintas{margin:-48px 14px 0;background:#fff;border-radius:18px;box-shadow:0 10px 26px -10px rgba(16,24,40,.22);display:grid;grid-template-columns:repeat(4,1fr);padding:14px 6px;position:relative;z-index:2}
.pintas .pt{display:flex;flex-direction:column;align-items:center;gap:6px;background:none!important;border:0!important;box-shadow:none!important;font-size:12px;font-weight:600;color:#344054;padding:4px 2px;min-height:0}
.pintas .pt i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center}
.pintas .pt svg{width:24px;height:24px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pintas .p1{background:#EEF2FB}.pintas .p1 svg{stroke:#1E3A8A}
.pintas .p2{background:#ECFDF3}.pintas .p2 svg{stroke:#067647}
.pintas .p3{background:#FFF4E5}.pintas .p3 svg{stroke:#B54708}
.pintas .p4{background:#F4EBFF}.pintas .p4 svg{stroke:#6941C6}
.kpis.kpi2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.karusel{margin:14px 0}
.karTrek{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.karTrek::-webkit-scrollbar{display:none}
.ban{flex:0 0 calc(100% - 34px);max-width:520px;min-height:112px;border-radius:16px;padding:14px 16px;color:#fff;position:relative;overflow:hidden;scroll-snap-align:start;display:flex;align-items:center}
.ban:only-child{flex-basis:100%;max-width:none}
.banIsi{position:relative;z-index:1;max-width:75%}
.banIsi b{display:block;font-size:15.5px}
.banIsi span{display:block;font-size:12.5px;opacity:.92;margin-top:2px}
.banCta{margin-top:9px;background:#fff!important;color:#1E3A8A!important;border:0!important;font-weight:700;font-size:12px!important;border-radius:99px!important;padding:5px 13px!important;min-height:0!important}
.banIkon{position:absolute;right:16px;bottom:10px;font-style:normal;font-size:38px;opacity:.95}
.karDots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.karDots button{width:7px;height:7px;min-height:0;padding:0;border-radius:99px;border:0;background:#D0D5DD;box-shadow:none;transition:width .2s}
.karDots button.on{width:20px;background:var(--pri)}
.banSw{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:middle}
.bnForm input[type=text],.bnForm select{width:100%}
.bnForm .rkWarna button{width:26px;height:26px}
.navBawah{display:none}
.helaian{position:fixed;inset:0;background:rgba(16,24,40,0);z-index:300;transition:background .18s}
.helaian.buka{background:rgba(16,24,40,.45)}
.helaianIsi{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .18s ease-out;max-height:80vh;overflow:auto}
.helaian.buka .helaianIsi{transform:none}
.helaianPemegang{width:40px;height:4px;border-radius:99px;background:#D0D5DD;margin:4px auto 10px}
.helaianTajuk{font-size:16px;margin:0 0 10px}
.helaianGrid{display:flex;flex-direction:column;gap:2px}
.helaianItem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0!important;box-shadow:none!important;background:#fff;border-radius:12px!important;padding:10px 6px!important;min-height:0}
.helaianItem:hover{background:#F9FAFB}
.helaianItem i{width:40px;height:40px;border-radius:12px;background:#EEF2FB;display:grid;place-items:center;flex:0 0 auto}
.helaianItem svg{width:22px;height:22px;fill:none;stroke:#1E3A8A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.helaianItem b{display:block;font-size:14px;color:var(--tx)}
.helaianItem small{display:block;font-size:12px;color:var(--mut);font-weight:400}
@media(max-width:800px){
  .tabs{display:none!important}
  .appHeader{display:none!important}
  #mode:not(.offline){display:none}
  main{padding-bottom:96px!important}
  .hero{margin:0 -16px;border-radius:0 0 22px 22px;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .pintas{margin:-48px 0 0}
  .navBawah{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:200;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px rgba(16,24,40,.06)}
  .navBawah button{display:flex;flex-direction:column;align-items:center;gap:2px;background:none!important;border:0!important;box-shadow:none!important;color:var(--mut);font-size:11px;font-weight:600;padding:4px 0!important;min-height:0}
  .navBawah button.on{color:var(--pri)}
  .navBawah svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
  .navBawah .nbFab b{width:56px;height:56px;margin-top:-30px;border-radius:50%;background:linear-gradient(135deg,#1E3A8A,#3B82F6);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:400;line-height:1;border:4px solid #fff;box-shadow:0 8px 18px -6px rgba(30,58,138,.6)}
  .pageTitle{margin-top:18px}
}
@media(min-width:801px){.helaian .helaianIsi{max-width:480px;margin:0 auto}}
@media(max-width:800px){body.diUtama #langgananLine{display:none!important}}
/* Senarai murid ikut modul & kelas tidak aktif */
.slTab{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
.slTab button{border:1px solid var(--line,#EAECF0);background:#fff;border-radius:99px;padding:7px 14px;font-weight:600;font-size:13px;color:#344054;cursor:pointer}
.slTab button.on{background:#1E3A8A;border-color:#1E3A8A;color:#fff}
.slTab .slKira{display:inline-block;min-width:20px;padding:0 6px;margin-left:2px;border-radius:99px;background:#F2F4F7;color:#344054;font-size:11.5px}
.slTab button.on .slKira{background:rgba(255,255,255,.22);color:#fff}
.subTajuk{margin:18px 0 4px;font-size:14px;color:#B54708}
#classListOff td{color:#667085}
@media (min-width:801px){.helaianIsi{max-width:460px;margin:0 auto;bottom:32px;border-radius:20px}}
.gMobileKomen{margin-top:8px}
#gt th.hMinggu{background:#F2F4F7;color:#667085}