/* ============================================================================
   AIRPH Plus — mobil.css
   Lapisan tablet, telefon dan app. Dimuat SELEPAS sistem.css supaya ia boleh
   menulis semula rangka desktop tanpa menyentuh fail itu.

   Peraturan daripada AIRPH-PLUS-05: saiz teks TIDAK pernah dikecilkan ikut
   skrin. Yang berubah hanya SUSUNAN. Teks badan kekal 15–16 pada telefon
   kerana pengguna sistem ini cikgu berumur 50 hingga 60 tahun — telefon
   bukan bermakna mata mereka jadi lebih muda.
   ========================================================================= */

/* Dua label untuk setiap pautan modul: penuh pada komputer, pendek pada rel
   ikon tablet. "Cakap atau taip" tidak muat dalam 96px, jadi ia jadi "Cakap"
   di sana — bukan dikecilkan sampai tak terbaca. */
.sb__pendek{display:none}
.sb__tulis-ikon{display:grid;place-items:center}

/* Kaki sidebar sekarang dua baris (akaun + pautan Laman utama), jadi ia
   ditimbun menegak. Peraturan asal dalam sistem.css menyusunnya melintang. */
.sb__kaki{flex-direction:column;align-items:stretch;gap:12px}
.sb__kaki-akaun{display:flex;align-items:center;gap:14px}
.sb__kaki-teks{display:flex;flex-direction:column;min-width:0;flex:1}
.sb__laman{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 6px;border-radius:var(--r-kecil);
  font-size:14.5px;font-weight:700;color:var(--teks2);text-decoration:none;
}
.sb__laman:hover{color:var(--aksen);background:var(--kad-dalam)}
.sb__laman svg{flex:none}

/* ------------------------------------------------------------- bar bawah */
.bar-bawah{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--kad);border-top:1.4px solid var(--sempadan);
  padding-bottom:env(safe-area-inset-bottom);
}
.bar-bawah button{
  flex:1;min-width:0;min-height:96px;padding:0 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:none;border:0;cursor:pointer;
  color:var(--teks2);font-size:11px;font-weight:700;line-height:1.1;
}
.bar-bawah button[aria-current="page"]{color:var(--aksen)}
.bar-bawah svg{flex:none}

/* -------------------------------------------------- helaian "Lagi" bawah */
.helaian-tirai{position:fixed;inset:0;z-index:98;background:rgba(21,28,39,.55)}
.helaian{
  position:fixed;left:0;right:0;bottom:0;z-index:99;
  background:var(--kad);border-radius:22px 22px 0 0;
  padding:12px 16px calc(22px + env(safe-area-inset-bottom));
  box-shadow:var(--bayang-tinggi);
  max-height:84vh;overflow:auto;
  animation:helaian-naik .2s ease-out;
}
@keyframes helaian-naik{from{transform:translateY(100%)}to{transform:none}}
.helaian__pemegang{width:52px;height:5px;border-radius:3px;background:var(--sempadan);margin:0 auto 14px}
.helaian__tajuk{font-size:19px;font-weight:700;letter-spacing:-.01em;padding:0 10px 6px}
.helaian__pautan{
  display:flex;align-items:center;gap:16px;
  width:100%;min-height:60px;padding:0 12px;
  border:0;border-radius:var(--r-kecil);background:none;cursor:pointer;
  font-size:17px;color:var(--teks);text-align:left;text-decoration:none;
}
.helaian__pautan:hover{background:var(--kad-dalam)}
.helaian__pautan svg{flex:none;color:var(--teks2)}
.helaian__pisah{height:1.2px;background:var(--sempadan);border:0;margin:10px 12px}

/* ------------------------------------------ jadual waktu: senarai hari
   Grid mingguan tidak muat pada 390px, jadi pada telefon ia jadi senarai
   berkumpulan ikut hari. Data yang sama, susunan lain. */
.hari-tajuk{
  font-family:ui-monospace,Menlo,"SF Mono",monospace;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teks2);margin:8px 0 10px;
}
.hari-senarai{display:flex;flex-direction:column;gap:12px}
.hari-kad{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--kad);border:1.6px solid var(--sempadan);border-radius:14px;
  padding:16px 18px;
}
.hari-kad[data-tanda="1"]{border:2.4px solid var(--aksen)}
.hari-kad--siap{background:var(--hijau-l);border-color:transparent}
.hari-kad--tunda{background:var(--amber-l);border-color:transparent}
.hari-kad--siap .cip,.hari-kad--tunda .cip{background:var(--kad)}
.hari-kad__badan{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hari-kad__kelas{font-size:18px;font-weight:700;letter-spacing:-.01em}
.hari-kad__masa{font-size:14.5px;color:var(--teks2)}

/* ========================================================== SKRIN PENUH
   Splash, log masuk, daftar, rakam suara, kehadiran: tiada sidebar dan
   tiada bar bawah, supaya cikgu buat satu perkara sahaja pada skrin itu. */
.penuh{min-height:100vh;display:flex;flex-direction:column;background:var(--kad)}
.penuh--ungu{background:var(--ungu);color:var(--putih);position:relative;overflow:hidden}
.penuh__isi{
  width:100%;max-width:430px;margin:0 auto;
  padding:26px 26px 40px;flex:1;
  display:flex;flex-direction:column;position:relative;
}
.penuh__tengah{justify-content:center;align-items:center;text-align:center}
.penuh--ungu .penuh__sub{font-size:15px;color:#E4DBFF}
.penuh--ungu .penuh__nota{font-size:11px;letter-spacing:.06em;color:#CBB8FF}
.penuh__kepala{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;min-height:76px;
  background:var(--kad);border-bottom:1.6px solid var(--sempadan);
}
.penuh__kepala .tajuk-skrin{font-size:19px}
.penuh__kaki{
  position:sticky;bottom:0;
  background:var(--kad);border-top:1.6px solid var(--sempadan);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;
}
.kembali{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  min-height:44px;padding:0 12px 0 6px;
  border:0;border-radius:var(--r-kecil);background:none;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--teks2);
}
.kembali:hover{color:var(--aksen);background:var(--kad-dalam)}
.kembali svg{transform:rotate(180deg)}

/* wordmark putih untuk skrin ungu (splash dan daftar berjaya) */
.wordmark--putih{font-size:34px;color:var(--putih)}
.wordmark--putih span{color:#D9C9FF}

/* bar muat splash — 120x6, 74px terisi seperti dalam papan .ai */
.muat{width:120px;height:6px;border-radius:3px;background:#8054E0;overflow:hidden}
.muat__isi{display:block;height:100%;width:74px;border-radius:3px;background:var(--putih);
  animation:muat-isi 1.6s ease-out}
@keyframes muat-isi{from{width:0}to{width:74px}}

/* bulatan tanda betul besar pada skrin daftar berjaya */
.bulat-tanda{
  width:136px;height:136px;border-radius:68px;background:var(--putih);color:var(--ungu);
  display:grid;place-items:center;margin:0 auto;
}

/* ------------------------------------------------------------ akaun/borang */
.medan-akaun+.medan-akaun{margin-top:18px}
.medan-akaun .medan{min-height:58px}
.langkah{display:flex;align-items:center;gap:0;width:130px;flex:none}
.langkah__bulat{
  flex:none;width:30px;height:30px;border-radius:15px;
  border:2px solid var(--sempadan);background:var(--kad);
  display:grid;place-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;color:var(--teks2);
}
.langkah__bulat--kini{border-color:var(--aksen);background:var(--aksen);color:var(--aksen-atas)}
.langkah__bulat--siap{border-color:var(--hijau-t);background:var(--hijau-l);color:var(--hijau-t)}
.langkah__garis{flex:1;height:1.6px;background:var(--sempadan)}
.langkah__garis--siap{background:var(--hijau-t)}
.kelas-baris{
  display:flex;align-items:center;gap:14px;
  background:var(--aksen-l);border:1.6px solid var(--aksen);border-radius:var(--r-medan);
  padding:12px 16px;min-height:52px;
}
.kelas-baris__nama{flex:1;font-size:15.5px;font-weight:700}

/* --------------------------------------------------------- rakam suara */
.rakam{
  background:var(--aksen-l);border-radius:18px;
  padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:22px;
}
.mik-besar{
  width:120px;height:120px;border-radius:60px;
  background:var(--aksen);color:var(--aksen-atas);
  display:grid;place-items:center;
  animation:denyut 1.4s ease-in-out infinite;
}
/* Lapan batang gelombang. Tinggi asas diambil daripada papan .ai supaya
   bentuknya kekal betul walaupun animasi dimatikan. */
.gelombang{display:flex;align-items:center;justify-content:center;gap:8px;height:56px}
.gelombang i{
  display:block;width:10px;border-radius:5px;background:var(--aksen);
  animation:gelombang-naik 1s ease-in-out infinite;
}
.gelombang i:nth-child(1){height:18px;animation-delay:0s}
.gelombang i:nth-child(2){height:34px;animation-delay:.09s}
.gelombang i:nth-child(3){height:52px;animation-delay:.18s}
.gelombang i:nth-child(4){height:30px;animation-delay:.27s}
.gelombang i:nth-child(5){height:44px;animation-delay:.36s}
.gelombang i:nth-child(6){height:22px;animation-delay:.45s}
.gelombang i:nth-child(7){height:38px;animation-delay:.54s}
.gelombang i:nth-child(8){height:26px;animation-delay:.63s}
@keyframes gelombang-naik{0%,100%{height:14px}50%{height:52px}}
@media (prefers-reduced-motion:reduce){
  .gelombang i,.mik-besar,.helaian,.muat__isi{animation:none}
}

/* ------------------------------------------------------------ kehadiran */
.hadir-baris{
  display:flex;align-items:center;
  background:var(--kad);border:1.4px solid var(--sempadan);border-radius:var(--r-kecil);
  padding:12px 16px;min-height:64px;
}
.hadir-baris--tidak{border:2.2px solid var(--amber)}
.hadir-baris .tanda{width:100%}
.hadir-baris .tanda__teks>span{font-size:16px}

/* ============================================================ TABLET
   760–1239: sidebar jadi rel ikon 96px. Tiada laci, tiada butang buka —
   rel sentiasa kelihatan supaya cikgu tidak perlu ingat menu itu wujud. */
@media (min-width:760px) and (max-width:1239px){
  :root{--sb:96px; --top:88px}

  .sb__jenama{justify-content:center;padding:22px 0 0}
  .sb__jenama .wordmark{display:none}

  .sb__utama{margin:16px 0 0;display:grid;place-items:center}
  /* Butang "+" 56x56 seperti dalam papan .ai, tetapi PERKATAAN dikekalkan di
     bawahnya — ikon sendirian tidak pernah dibenarkan dalam sistem ini. */
  .sb__tulis{
    flex-direction:column;gap:6px;
    background:none;border:0;min-height:0;padding:0;
    white-space:normal;
  }
  .sb__tulis:hover{filter:none}
  .sb__tulis-ikon{
    width:56px;height:56px;border-radius:16px;
    background:var(--aksen);color:var(--aksen-atas);
  }
  .sb__tulis-teks{max-width:80px;font-size:10.5px;font-weight:700;line-height:1.15;
    text-align:center;color:var(--aksen)}

  .sb__menu{margin-top:20px;padding:0 8px}
  .sb__menu li+li{margin-top:2px}
  .sb__pautan{
    flex-direction:column;gap:6px;
    min-height:60px;padding:10px 2px;
    font-size:10.5px;font-weight:700;line-height:1.15;text-align:center;
  }
  .sb__panjang{display:none}
  .sb__pendek{display:block}
  .sb__pisah{margin:10px 14px}

  .sb__kaki{margin:0 10px;padding:14px 0;align-items:center}
  .sb__kaki-akaun{flex-direction:column;gap:8px}
  .sb__kaki-teks{display:none}
  .sb__kaki .pautan{font-size:10.5px}
  .sb__laman{justify-content:center;padding:0;font-size:10.5px}
  .sb__laman svg{display:none}
}

/* ============================================================ TELEFON
   <760: sidebar hilang sepenuhnya, diganti bar bawah tetap 5 item.
   Laci lama (data-sb) dibuang — cikgu tidak perlu buka apa-apa dahulu
   untuk sampai ke lima tempat yang dia guna setiap hari. */
@media (max-width:759px){
  :root{--top:76px}
  .sb{display:none}
  .rangka{display:block}
  .bar-bawah{display:flex}
  .panduan-tirai{left:0}

  .kerja{padding:20px 16px 120px}
  .kerja__isi{gap:20px}
  .top{padding:12px 16px;min-height:auto;gap:12px;flex-wrap:wrap}
  .top .tajuk-skrin{font-size:19px}
  .top__sub{font-size:13px;margin-top:2px}
  .top__butang{width:100%;margin-left:0;justify-content:flex-start}

  .kad{padding:20px}
  .kad--rapat{padding:16px 18px}
  .jalur{padding:18px 20px}
  .modal{padding:24px}
  .chat{height:auto;min-height:520px}
  .chat__aliran{padding:18px}
  .chat__bar{padding:16px 18px}
  .gelembung{max-width:88%}
  .rphkad{padding:18px 20px;gap:14px}
  /* Butang kad RPH turun ke barisnya sendiri tetapi TIDAK diregangkan sama
     lebar — "Muat turun" jadi dua baris kalau diregangkan. */
  .rphkad__butang{margin-left:0;width:100%;gap:10px}
  .stat__angka{font-size:38px}
  .toast-tempat{bottom:120px}

  /* Baris senarai desktop mengunci lebar setiap lajur dengan min-width sebaris
     supaya lajur berbaris kemas. Pada 390px jumlah lebar itu 572 — halaman
     jadi boleh digulung ke tepi. Di sini kunci itu dilepaskan dan butang
     turun ke barisnya sendiri. */
  .senarai-baris>li{flex-wrap:wrap;gap:10px 14px;padding:16px 0}
  .senarai-baris>li>span[style]{min-width:0!important}
  .senarai-baris>li>.tolak{width:100%;margin-left:0}
  .senarai-baris>li>.tolak .btn{width:100%}

  /* Bar chat: dua butang bulat 72px + medan taip tidak muat sebaris pada
     telefon. Medan mesti dibenarkan mengecut (min-width:0) — kalau tidak
     lebar semula jadi <input> menolak butang mikrofon keluar skrin. */
  .chat__bar{gap:10px;padding:14px 16px}
  .chat__taip{min-width:0;min-height:60px;padding:0 20px}
  .bulat-btn{width:60px;height:60px;border-radius:30px}
  .chat__kaki{padding:0 18px 14px}

  /* Jadual RPT lebih lebar daripada telefon. Ia digulung dalam kadnya
     sendiri, bukan menggulung seluruh halaman ke tepi. */
  .kad:has(>.jadual){overflow-x:auto}

  /* Pada komputer .baris sengaja tidak berbalut supaya lajur berbaris kemas;
     pada 390px baris yang sama (cth senarai medan sekolah: nama + cip +
     Naik/Turun/Buang) menolak halaman ke tepi. Di telefon berbalut ialah
     kelakuan yang betul, bukan kelakuan kedua. */
  .baris{flex-wrap:wrap}

  /* Label butang panjang seperti "Perbaiki dengan AI — perlu internet, cuba
     semula nanti" tidak boleh dipotong dan tidak boleh menolak halaman;
     ia dibenarkan turun ke baris kedua. */
  .btn{white-space:normal;text-align:center;height:auto;padding-top:10px;padding-bottom:10px}

  /* Bar tindakan melekat DI ATAS bar bawah, bukan di bawahnya — kalau tidak
     butang "Tulis N RPH" tersembunyi di belakang navigasi. */
  .bar-fon{
    position:fixed;left:0;right:0;bottom:96px;z-index:45;
    background:var(--kad);border-top:1.6px solid var(--sempadan);
    padding:12px 16px;display:flex;flex-direction:column;gap:8px;
  }
  body:has(.bar-fon) .kerja{padding-bottom:206px}
}