/* ============================================================================
   AIRPH Plus — tambah-peranan.css
   Gaya TAMBAHAN untuk empat skrin dalam skrin-peranan.js:
   Affiliate, Guru ICT, Kawalan admin sekolah, Peranan dan kebenaran.

   Dimuat SELEPAS asas.css dan sistem.css. Fail ini hanya menambah kelas
   berawalan `prn-`; tiada satu pun peraturan di sini menulis semula kelas
   sedia ada, supaya skrin lain tidak berubah bentuk kerana fail ini wujud.

   Metrik kekal metrik cikgu 50–60 tahun (bukan metrik padat admin.css):
   teks jadual 16, baris jadual tinggi 64+, sasaran tekan 44+, suis 56x32.
   Kelas `adm-*` daripada admin.css SENGAJA tidak dipinjam — fail itu tidak
   dimuat oleh index.html, dan metriknya memang direka untuk mata lain.
   ========================================================================= */

/* ═══════════════════════════════════════════ kad kod rujukan (affiliate) */
.prn-kod{
  background:var(--aksen-l);border-radius:var(--r-kad);
  padding:28px 32px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.prn-kod__teks{flex:1;min-width:240px}
/* Kod ialah perkara yang cikgu baca kuat kepada rakan di bilik guru —
   ia sengaja sebesar tajuk, bukan sebesar teks medan. */
.prn-kod__kod{
  display:block;margin-top:10px;
  font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1.05;
  color:var(--teks);word-break:break-word;
}
.prn-kod__pautan{display:block;margin-top:8px;font-size:15px;color:var(--teks2);
  word-break:break-all}
.prn-kod__butang{display:flex;gap:14px;flex-wrap:wrap}

/* Hijau WhatsApp ditulis dua kali kerana --hijau-t bertukar jadi hijau muda
   pada mod gelap; teks putih di atasnya akan hilang. */
.prn-wasap{background:#0B6B40;color:#fff;border-color:transparent}
.prn-wasap:hover{filter:brightness(1.12)}
[data-tema="gelap"] .prn-wasap{background:#4ADE8A;color:#101319}

/* ══════════════════════════════════════════════════════ kad statistik */
/* "RM 84.00" pada 48px melimpah keluar kad 340px pada telefon. */
.prn-stat__angka--panjang{font-size:34px}
.prn-stat__nota{display:block;margin-top:8px;font-size:13.5px;color:var(--teks3)}

/* ══════════════════════════════════════════════ jalur komisen & tindakan */
.prn-jalur{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.prn-jalur__ikon{flex:none;display:grid;place-items:center;
  width:52px;height:52px;border-radius:14px;background:var(--kad)}
.prn-jalur__teks{flex:1;min-width:260px;display:grid;gap:6px}
.prn-jalur__butang{flex:none;margin-left:auto}

/* ═════════════════════════════════════════════════════════════ jadual
   Satu jadual, satu skrol mendatar sendiri. Lajur "Tindakan" tidak boleh
   hilang senyap di luar tepi kanan telefon. */
.prn-skrol{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prn-jadual{width:100%;border-collapse:collapse}
.prn-jadual th{
  text-align:left;padding:0 16px 14px;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--teks2);white-space:nowrap;
}
.prn-jadual td{
  padding:16px;border-top:1.2px solid var(--sempadan);
  font-size:16px;color:var(--teks2);vertical-align:middle;
}
.prn-jadual tbody tr:first-child td,
.prn-jadual tbody tr:first-child th{border-top:1.6px solid var(--sempadan)}
.prn-jadual .nama{display:block;font-size:16px;font-weight:700;color:var(--teks)}
.prn-jadual .mono{font-size:14px;color:var(--teks2);letter-spacing:.02em}
.prn-jadual th.kanan,.prn-jadual td.kanan{text-align:right}

.prn-kaki-jadual{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prn-kira{font-size:14px;color:var(--teks2)}

.prn-orang{display:flex;align-items:center;gap:14px}
.prn-orang__bulat{
  flex:none;width:40px;height:40px;border-radius:20px;background:var(--aksen-l);
  display:grid;place-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:700;color:var(--aksen);
}
.prn-orang__teks{min-width:0}
.prn-orang__emel{display:block;margin-top:3px;font-size:13.5px;color:var(--teks3)}

/* Dua tindakan bertindan, bukan bersebelahan: "Reset kata laluan" dan
   "Nyahaktif" bersebelahan pada 15px terlalu mudah tersalah tekan. */
.prn-tindak{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.prn-tindak .pautan{min-height:24px}

/* ═══════════════════════════════════════════════════════════════ suis */
.prn-suis{
  display:inline-flex;align-items:center;gap:14px;
  min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--teks);font-size:16px;text-align:left;
}
.prn-suis__rel{
  flex:none;width:56px;height:32px;border-radius:16px;
  background:var(--sempadan);position:relative;transition:background .14s;
}
.prn-suis__rel::after{
  content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:12px;
  background:var(--putih);transition:transform .14s;
  box-shadow:0 1px 2px rgba(21,28,39,.28);
}
.prn-suis[aria-pressed="true"] .prn-suis__rel{background:var(--aksen)}
.prn-suis[aria-pressed="true"] .prn-suis__rel::after{transform:translateX(24px)}
.prn-suis__teks{font-weight:700}
.prn-suis:focus-visible{outline:3px solid var(--aksen);outline-offset:3px;border-radius:10px}

/* ═════════════════════════════════════════════════════════ had akses */
.prn-had{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--kad-dalam);border:1.4px solid var(--sempadan);
  border-radius:var(--r-kecil);padding:18px 20px;
}
.prn-had__teks{flex:1;min-width:180px}
.prn-had__nama{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.prn-had__ket{display:block;margin-top:4px;font-size:14px;color:var(--teks2)}

/* ═══════════════════════════════════════════════ pantau penggunaan guru */
.prn-guna{display:flex;align-items:center;gap:14px;min-width:170px}
.prn-guna__rel{flex:1;min-width:90px}
.prn-guna__nilai{flex:none;width:34px;text-align:right;
  font-size:16px;font-weight:700;color:var(--teks)}

/* ═════════════════════════════════════════════════ kawasan muat naik CSV */
.prn-lepas{padding:28px 20px}

/* ═════════════════════════════════════════════════ matriks kebenaran */
/* `separate` (bukan `collapse`) supaya hujung baris berjalur benar-benar
   membulat — dengan `collapse` pelayar mengabaikan border-radius sel. */
.prn-matriks{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
/* Padding diberi pada kelas setiap sel, BUKAN pada `.prn-matriks th,td` —
   pemilih itu (kelas + jenis) menang atas kelas sel dan mengempiskan
   semula setiap baris kepada sifar. */
.prn-matriks thead th{
  padding:16px 14px;background:var(--kad-dalam);
  border-bottom:1.6px solid var(--sempadan);
  vertical-align:middle;
}
.prn-matriks thead th:first-child{border-top-left-radius:var(--r-kecil);
  border-bottom-left-radius:var(--r-kecil)}
.prn-matriks thead th:last-child{border-top-right-radius:var(--r-kecil);
  border-bottom-right-radius:var(--r-kecil)}
.prn-matriks__kepala{
  text-align:left;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--teks2);
}
.prn-matriks__peranan{
  width:132px;text-align:center;
  font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--teks);
}
.prn-matriks__peranan--utama{color:var(--aksen)}
.prn-matriks__nama{
  text-align:left;padding:18px 14px;
  font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--teks);
}
.prn-matriks__sel{padding:18px 14px;text-align:center}
/* Jalur baris berselang: dengan tujuh baris x empat lajur bulatan, mata
   mudah tergelincir satu baris tanpa jalur ini. */
.prn-matriks tbody tr:nth-child(odd) th,
.prn-matriks tbody tr:nth-child(odd) td{background:var(--kad-dalam)}
.prn-matriks tbody tr:nth-child(odd) th:first-child{
  border-top-left-radius:var(--r-kecil);border-bottom-left-radius:var(--r-kecil)}
.prn-matriks tbody tr:nth-child(odd) td:last-child{
  border-top-right-radius:var(--r-kecil);border-bottom-right-radius:var(--r-kecil)}

.prn-bulat{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:18px;
}
.prn-bulat--ya{background:var(--hijau-l);color:var(--hijau-t)}
.prn-bulat--tidak{background:var(--kad-dalam);color:var(--teks3);
  box-shadow:inset 0 0 0 1.2px var(--sempadan)}
/* Di dalam baris berjalur, bulatan "tak boleh" sewarna dengan jalur dan
   hilang — beri ia permukaan kad semula. */
.prn-matriks tbody tr:nth-child(odd) .prn-bulat--tidak{background:var(--kad)}

.prn-legenda{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.prn-legenda__item{display:inline-flex;align-items:center;gap:12px}
.prn-legenda__nota{margin-left:auto;font-size:16px}

/* ═══════════════════════════════════════════════════ tiga pintu (kad butang) */
.prn-pintu{
  display:grid;justify-items:start;gap:10px;
  text-align:left;cursor:pointer;
}
.prn-pintu:hover{border-color:var(--aksen)}
.prn-pintu__ikon{
  display:grid;place-items:center;margin-bottom:4px;
  width:48px;height:48px;border-radius:12px;
  background:var(--aksen-l);color:var(--aksen);
}

/* ═════════════════════════════════════════════════════════════ responsif */
@media (max-width:1239px){
  .prn-kod{padding:24px}
  .prn-kod__kod{font-size:38px}
  .prn-matriks__peranan{width:116px;font-size:15px}
}
@media (max-width:1000px){
  /* Butang pengeluaran turun ke baris sendiri, penuh lebar — pada tablet ia
     sudah tidak muat di sebelah ayat komisen tanpa mengecilkan ayat itu. */
  .prn-jalur__butang{margin-left:0;width:100%}
  .prn-jalur__butang .btn{width:100%}
  .prn-legenda__nota{margin-left:0;width:100%}
}
@media (max-width:759px){
  .prn-kod{padding:20px;gap:18px}
  .prn-kod__kod{font-size:32px}
  .prn-kod__butang{width:100%}
  .prn-kod__butang .btn{flex:1;min-width:150px}
  .prn-stat__angka--panjang{font-size:26px}
  .prn-jadual td{padding:14px 12px;font-size:15px}
  .prn-jadual th{padding:0 12px 12px}
  .prn-had{gap:14px}
  .prn-pintu{padding:20px}
}

/* ═════════════════════════════════════════════════════════════ cetakan
   Matriks kebenaran ialah satu-satunya skrin di sini yang dicetak dan
   ditampal di bilik guru, jadi skrol mendatar mesti dibuka penuh. */
@media print{
  .prn-skrol{overflow:visible}
  .prn-matriks{min-width:0}
  .prn-jalur__butang,.prn-pintu{display:none!important}
  .prn-bulat--tidak{box-shadow:inset 0 0 0 1px #A8AEBC}
}