/* =====================================================================
   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 button[data-t="s1"] span{font-size:0!important}.tabs button[data-t="s1"] span::after{content:"Hadir";font-size:10.5px}}
#profilCard .fld input{width:100%;min-width:0}#profilCard .fld label{min-height:0}