/* ============================================================================
   AIRPH Plus — sistem.css
   Rangka aplikasi: sidebar tetap di kiri, bar atas, kawasan kerja.
   Setiap modul membuka skrinnya dalam kawasan kerja yang sama, jadi cikgu
   sentiasa tahu dia berada di modul mana.
   ========================================================================= */

.rangka{display:flex;min-height:100vh}

/* --------------------------------------------------------------- sidebar */
.sb{
  flex:none;width:var(--sb);
  background:var(--kad);border-right:1.6px solid var(--sempadan);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  z-index:60;
}
.sb__jenama{display:flex;align-items:center;gap:12px;padding:26px 24px 0}
.sb__jenama svg{flex:none}
.wordmark{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--teks);white-space:nowrap}
/* SELA_PLUS = .20 x saiz dalam plus_papan.py — tanpa jurang ini wordmark
   terbaca "AIRPHPlus" satu perkataan. */
.wordmark span{color:var(--aksen);margin-left:.2em}
.sb__utama{margin:22px 24px 0}
.sb__menu{margin-top:26px;padding:0 16px;overflow-y:auto;flex:1}
.sb__menu li+li{margin-top:4px}
.sb__pisah{height:1.2px;background:var(--sempadan);margin:14px 12px}
.sb__pautan{
  display:flex;align-items:center;gap:16px;
  width:100%;min-height:56px;padding:0 20px;
  border:0;border-radius:var(--r-kecil);background:none;cursor:pointer;
  font-size:16px;color:var(--teks2);text-align:left;
}
.sb__pautan:hover{background:var(--kad-dalam);color:var(--teks)}
.sb__pautan[aria-current="page"]{background:var(--aksen-l);color:var(--aksen);font-weight:700}
.sb__pautan svg{flex:none}
.sb__kaki{border-top:1.2px solid var(--sempadan);margin:0 24px;padding:20px 0;
  display:flex;align-items:center;gap:14px}
.avatar{
  flex:none;width:44px;height:44px;border-radius:22px;background:var(--aksen-l);
  display:grid;place-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:var(--aksen);
}
.sb__kaki>span:nth-child(2){min-width:0;flex:1}
.sb__nama{font-size:15px;font-weight:700;line-height:1.25}
.sb__sekolah{font-size:12.5px;color:var(--teks2);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -------------------------------------------------------------- bar atas */
.isi{flex:1;min-width:0;display:flex;flex-direction:column}
.top{
  position:sticky;top:0;z-index:50;
  min-height:var(--top);
  background:var(--kad);border-bottom:1.6px solid var(--sempadan);
  display:flex;align-items:center;gap:20px;
  padding:16px 36px;
}
.top__teks{min-width:0}
.top__sub{font-size:14px;color:var(--teks2);margin-top:4px}
.top__butang{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* jalur amber "tiada internet" menggantikan bar atas biasa */
.top--luring{background:var(--amber-l);border-bottom-color:var(--amber)}
.top--luring .tajuk-skrin,.top--luring .top__sub{color:var(--amber)}

/* ---------------------------------------------------------- kawasan kerja */
.kerja{padding:36px;flex:1}
.kerja__isi{max-width:var(--lebar-isi);margin:0 auto;display:flex;flex-direction:column;gap:28px}

/* --------------------------------------------------------- kad statistik */
.stat{background:var(--kad);border:1.6px solid var(--sempadan);border-radius:var(--r-kad);
  padding:22px 26px}
.stat__angka{font-size:48px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat__label{font-size:15px;color:var(--teks2);margin-top:10px}

/* --------------------------------------------------- dua laluan besar */
.laluan{border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:18px}
.laluan--biasa{background:var(--kad);border:1.8px solid var(--sempadan)}
.laluan--ungu{background:var(--aksen-l);border:2px solid var(--aksen)}
.laluan h3{font-size:24px;font-weight:700;letter-spacing:-.02em}
.laluan p{font-size:16px;color:var(--teks2)}
.laluan--ungu p{color:var(--aksen-g)}
.laluan__contoh{background:var(--kad);border:1.6px solid var(--aksen);
  border-radius:var(--r-kecil);padding:16px 20px;font-size:16px}

/* ------------------------------------------------------ grid jadual waktu */
.jw{overflow-x:auto;padding-bottom:6px}
.jw__grid{
  display:grid;
  grid-template-columns:96px repeat(var(--kol,5),minmax(178px,1fr));
  gap:10px;min-width:940px;
}
.jw__masa{
  font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;
  letter-spacing:.04em;color:var(--teks2);text-align:center;padding-bottom:6px;
}
.jw__hari{
  font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;
  letter-spacing:.06em;color:var(--teks);display:flex;align-items:center;
}
.jw__sel{
  min-height:116px;border-radius:var(--r-kecil);
  background:var(--kad);border:1.6px solid var(--sempadan);
  padding:16px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .12s,box-shadow .12s;
}
.jw__sel:hover{border-color:var(--aksen)}
.jw__sel[data-tanda="1"]{border:2.6px solid var(--aksen)}
.jw__sel--kosong{background:#EDEFF5;border:0;cursor:default;min-height:116px;border-radius:var(--r-kecil)}
[data-tema="gelap"] .jw__sel--kosong{background:#171B23}
.jw__sel--siap{background:var(--hijau-l);border-color:transparent}
.jw__sel--tunda{background:var(--amber-l);border-color:transparent}
.jw__sel--semak{background:var(--amber-l);border:2.6px solid var(--amber)}
/* Cip atas sel berwarna: latar cip sama warna dengan sel, jadi ia hilang.
   Beri cip permukaan kad supaya status kekal terbaca. */
.jw__sel--siap .cip,.jw__sel--tunda .cip{background:var(--kad)}
.jw__sel .halus{color:var(--teks2)}
.jw__kelas{font-size:18px;font-weight:700;letter-spacing:-.01em}
.jw__atas{display:flex;align-items:flex-start;gap:12px}

/* bar tindakan melekat di bawah grid */
.bar-tindak{
  position:sticky;bottom:0;z-index:40;
  background:var(--kad);border:2px solid var(--aksen);border-radius:var(--r-kad);
  padding:22px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  box-shadow:var(--bayang-tinggi);
}

/* -------------------------------------------------------- kad senarai RPH */
.rphkad{
  background:var(--kad);border:1.6px solid var(--sempadan);border-radius:var(--r-kad);
  padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.rphkad__tarikh{min-width:190px}
.rphkad__tajuk{flex:1;min-width:220px}
.rphkad__butang{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}

/* penapis segmen */
.segmen{display:flex;gap:14px;flex-wrap:wrap}
.segmen button{
  min-height:48px;padding:0 26px;border-radius:var(--r-kecil);
  border:1.4px solid var(--sempadan);background:var(--kad-dalam);
  font-size:15px;cursor:pointer;color:var(--teks);
}
.segmen button[aria-pressed="true"]{
  background:var(--aksen-l);border:2.4px solid var(--aksen);
  color:var(--aksen);font-weight:700;
}

/* ------------------------------------------------------------ medan RPH */
.medan-kad{background:var(--kad);border:1.6px solid var(--sempadan);
  border-radius:14px;padding:22px 24px}
.medan-kad__label{font-size:17px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:12px;margin-bottom:12px}
.arahan-ai{
  margin-top:16px;background:var(--aksen-l);border-radius:var(--r-medan);
  padding:12px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.arahan-ai input{
  flex:1;min-width:200px;background:transparent;border:0;outline:none;
  font-size:14.5px;color:var(--aksen-g);
}
.arahan-ai input::placeholder{color:var(--aksen-g);opacity:.72}

/* --------------------------------------------------------- kawasan lepas */
.lepas{
  border:2.4px dashed var(--aksen);background:var(--aksen-l);
  border-radius:14px;padding:44px 24px;text-align:center;
}
.lepas--aktif{background:var(--aksen);color:#fff}

/* ------------------------------------------------------------------ chat */
.chat{display:flex;flex-direction:column;height:calc(100vh - var(--top) - 72px);min-height:560px}
.chat__aliran{flex:1;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:18px}
.gelembung{max-width:74%;border-radius:14px;padding:18px 22px;font-size:16px;line-height:1.5}
.gelembung--ai{background:var(--kad-dalam);color:var(--teks);align-self:flex-start}
.gelembung--saya{background:var(--aksen);color:#fff;align-self:flex-end}
.gelembung--saya .lampiran{background:#8054E0;color:#fff}
.lampiran{display:inline-flex;align-items:center;gap:10px;margin-top:12px;margin-right:8px;
  border-radius:var(--r-medan);padding:10px 14px;font-size:14px}
.chat__bar{
  border-top:1.6px solid var(--sempadan);padding:20px 28px;
  display:flex;align-items:center;gap:14px;
}
.bulat-btn{
  flex:none;width:72px;height:72px;border-radius:36px;
  border:1.6px solid var(--sempadan);background:var(--kad-dalam);
  display:grid;place-items:center;cursor:pointer;
}
.bulat-btn--ungu{background:var(--aksen);border-color:var(--aksen)}
.bulat-btn--rakam{animation:denyut 1.1s ease-in-out infinite}
@keyframes denyut{0%,100%{box-shadow:0 0 0 0 rgba(107,56,212,.45)}50%{box-shadow:0 0 0 14px rgba(107,56,212,0)}}
.chat__taip{
  flex:1;min-height:72px;border-radius:36px;
  border:1.6px solid var(--sempadan);background:var(--kad-dalam);
  padding:0 30px;font-size:16px;outline:none;
}
.chat__taip:focus{border-color:var(--aksen)}
.chat__kaki{display:flex;justify-content:space-between;padding:0 30px 16px;font-size:13px;
  font-weight:700;color:var(--teks2)}

/* --------------------------------------------------------------- flatplan */
.flatplan{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:10px 0 20px}
.fp-kad{
  flex:none;width:136px;min-height:222px;border-radius:var(--r-kecil);
  background:var(--kad);border:1.6px solid var(--sempadan);
  padding:12px;display:flex;flex-direction:column;cursor:grab;
}
.fp-kad--seret{border:2.4px solid var(--aksen);opacity:.5}
.fp-kad--sendiri .fp-kad__badan{background:var(--aksen-l)}
.fp-kad__pegang{display:grid;grid-template-columns:repeat(3,4px);gap:4px;
  justify-content:center;margin-bottom:8px}
.fp-kad__pegang i{width:3.2px;height:3.2px;border-radius:50%;background:var(--teks3)}
.fp-kad__badan{flex:1;border:1px solid var(--sempadan);border-radius:6px;
  background:var(--kad);padding:10px;display:flex;flex-direction:column;gap:7px}
.fp-kad__baris{height:1.4px;background:#D8DDE9;border-radius:1px}
[data-tema="gelap"] .fp-kad__baris{background:#2C3342}
.fp-kad__baris--pendek{width:60%}
.fp-kad__baris--tebal{height:10px;background:var(--aksen);border-radius:2px}
.fp-kad__kaki{display:flex;align-items:center;gap:8px;margin-top:10px}
.fp-no{flex:none;width:26px;height:26px;border-radius:13px;background:var(--dakwat);
  color:#fff;display:grid;place-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700}
[data-tema="gelap"] .fp-no{background:var(--aksen);color:var(--aksen-atas)}
.fp-kad__tajuk{font-size:12.5px;font-weight:700;line-height:1.2}
.fp-kad__sub{font-size:10.5px;color:var(--teks2)}
.fp-celah{
  flex:none;width:24px;display:grid;place-items:center;position:relative;
}
.fp-celah button{
  width:26px;height:26px;border-radius:13px;
  border:2px solid var(--aksen);background:var(--kad);
  display:grid;place-items:center;cursor:pointer;
  opacity:.35;transition:opacity .12s,transform .12s;
}
.fp-celah button:hover{opacity:1;transform:scale(1.12)}
.fp-celah--buka{width:56px}
.fp-celah--buka::before{content:"";position:absolute;inset:0 24px;
  border-radius:3px;background:var(--aksen)}
.fp-tambah{
  flex:none;width:136px;min-height:222px;border-radius:var(--r-kecil);
  border:2.4px dashed var(--aksen);background:var(--aksen-l);
  display:grid;place-content:center;justify-items:center;gap:6px;cursor:pointer;
}

/* -------------------------------------------------------- pembina halaman */
.pembina{display:grid;grid-template-columns:288px minmax(0,1fr) 268px;gap:28px;align-items:start}
.palet-blok{
  width:100%;display:flex;align-items:center;gap:16px;text-align:left;
  background:var(--kad-dalam);border:1.4px solid var(--sempadan);
  border-radius:var(--r-kecil);padding:16px;cursor:pointer;
}
.palet-blok:hover{border-color:var(--aksen)}
.palet-blok__ikon{flex:none;width:44px;height:44px;border-radius:8px;background:var(--kad);
  border:1.2px solid var(--sempadan);display:grid;place-items:center}
.kanvas-a4{
  background:var(--kad-dalam);border:1.2px solid var(--sempadan);border-radius:6px;
  padding:20px;display:flex;flex-direction:column;gap:12px;min-height:560px;
}
.blok{
  background:var(--kad);border:1.2px solid var(--sempadan);border-radius:8px;padding:16px 20px;
  cursor:pointer;
}
.blok--pilih{border:2.4px solid var(--aksen)}
.blok__kawal{display:flex;gap:8px;margin-top:12px}
.blok__kawal button{
  min-height:30px;padding:0 14px;border-radius:8px;border:0;cursor:pointer;
  background:var(--aksen-l);color:var(--aksen);font-size:12px;font-weight:700;
}
.blok__kawal button.buang{background:var(--merah-l);color:var(--merah)}

/* ------------------------------------------------------ pratonton cetakan */
.kertas{
  background:#fff;color:#151C27;
  border:1.4px solid var(--sempadan);border-radius:8px;
  padding:38px 42px;font-size:14px;line-height:1.6;
}
[data-tema="gelap"] .kertas{background:#F7F8FB}
.kertas h4{text-align:center;font-size:17px;font-weight:700;letter-spacing:.03em}
.kertas__baris{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid #E4E7EF}
.kertas__baris b{min-width:160px;font-size:13px;color:#454C5B}
.kertas__kotak{margin-top:18px}
.kertas__kotak b{font-size:13px;display:block;margin-bottom:8px}
.kertas__garis{height:1px;background:#D8DDE9;margin-bottom:14px}

/* ------------------------------------------------------------ harga/pakej */
.pakej{
  position:relative;border-radius:18px;padding:30px;
  background:var(--kad);border:1.6px solid var(--sempadan);
  display:flex;flex-direction:column;gap:16px;
}
.pakej--popular{background:var(--ungu);border:0;color:#fff}
.pakej--popular .pakej__ket,.pakej--popular .pakej__nota{color:#D9C9FF}
.pakej--popular .pakej__ciri{color:#fff}
/* Lapisan corak mesti KELUAR daripada aliran flex — kalau tidak ia mengambil
   ruang dan menolak seluruh kandungan kad ke bawah. Kekalkan `!important`
   supaya peraturan `.pakej>*` di bawah tidak mengembalikannya jadi relatif. */
.pakej__corak{position:absolute!important;inset:0;width:100%;height:100%;
  opacity:.14;pointer-events:none;border-radius:18px;overflow:hidden}
.pakej>*{position:relative}
.pakej__lencana{
  position:absolute;top:-15px;left:16px;z-index:2;background:var(--hijau-t);color:#fff;
  border-radius:15px;padding:6px 14px;
  font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;letter-spacing:.06em;
}
.pakej__nama{font-size:24px;font-weight:700;letter-spacing:-.02em}
.pakej__ket{font-size:14px;color:var(--teks2)}
.pakej__asal{font-size:15px;color:var(--teks2);text-decoration:line-through
  var(--merah)}
.pakej--popular .pakej__asal{color:#E7DBFF;text-decoration-color:#FFB4B4}
.pakej__harga{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pakej__ciri{display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.pakej__ciri li{display:flex;align-items:flex-start;gap:12px}
.pakej__nota{font-size:12px;color:var(--teks2)}

/* -------------------------------------------------------- panduan berpandu */
.panduan-tirai{position:fixed;inset:0 0 0 var(--sb);z-index:90;
  background:rgba(21,28,39,.55)}
.panduan{
  position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,calc(100vw - 48px));
  background:var(--kad);border-radius:18px;padding:34px;box-shadow:var(--bayang-tinggi);
}
.panduan__titik{display:flex;gap:10px;margin:22px 0}
.panduan__titik i{width:18px;height:8px;border-radius:4px;background:#D8DDE9}
.panduan__titik i.on{background:var(--aksen)}

/* ------------------------------------------------------------- dwibahasa */
.dwi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
/* lajur kiri tetap (senarai bidang DSKP, pilihan cetak) */
.grid-sisi-kiri{display:grid;gap:18px;grid-template-columns:340px minmax(0,1fr)}
.grid-sisi-kiri--lebar{grid-template-columns:396px minmax(0,1fr)}

.dwi__bi .medan{background:#F4F7FC}
[data-tema="gelap"] .dwi__bi .medan{background:#141A24}

/* ------------------------------------------------------------- responsif
   Tiga takat henti: >=1240 komputer, 760–1239 tablet, <760 telefon.
   Rangka navigasi (rel ikon tablet, bar bawah telefon) ada dalam mobil.css;
   di sini hanya susunan kandungan yang dirapatkan.

   Laci sidebar lama sudah DIBUANG. Pada tablet rel ikon sentiasa kelihatan
   dan pada telefon ada bar bawah, jadi tiada lagi menu yang perlu dibuka
   dahulu sebelum cikgu boleh sampai ke mana-mana. */
@media (max-width:1239px){
  .kerja{padding:28px 24px}
  .kerja__isi{gap:24px}
  .grid{gap:16px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pembina{grid-template-columns:minmax(0,1fr)}
  /* Lajur sisi dikecilkan, bukan dijatuhkan — pada tablet melintang borang
     dan panel "Waktu ini" masih muat sebelah-menyebelah seperti dalam .ai. */
  .grid-sisi-kiri{grid-template-columns:288px minmax(0,1fr)}
  .grid-sisi-kiri--lebar{grid-template-columns:330px minmax(0,1fr)}
}
@media (max-width:1000px){
  .grid-utama-sisi,.grid-sama,.dwi,
  .grid-sisi-kiri,.grid-sisi-kiri--lebar{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:759px){
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  /* Kad statistik kekal DUA lajur pada telefon seperti dalam papan .ai —
     empat kad penuh lebar menolak dua butang besar keluar dari skrin
     pertama, dan butang itulah tujuan halaman ini. */
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:16px 18px}
  /* Bar atas mesti boleh berbalut — kalau tidak butang tindakan tersorok
     keluar tepi kanan pada telefon dan cikgu tidak nampak "Simpan". */
  .top{flex-wrap:wrap}
  .bar-tindak{padding:18px 20px}
}

/* --------------------------------------------------------------- cetakan */
@media print{
  .sb,.top__butang,.bar-tindak,.bar-bawah,.bar-fon{display:none!important}
  .top{position:static;border:0}
  body{background:#fff}
  .kertas{border:0;padding:0}
}