/* ============================================================================
   AIRPH Plus — tambah-templat.css
   Gaya TAMBAHAN untuk Pembina Templat RPH sahaja (skrin-templat.js).

   Fail ini hanya menambah; ia tidak menulis semula satu pun peraturan dalam
   asas.css atau sistem.css. Semua kelas berawalan `tb-` supaya tidak ada
   pertembungan nama dengan modul lain.

   DIMUAT SELEPAS asas.css dan sistem.css:
     <link rel="stylesheet" href="aset/css/tambah-templat.css">

   Metrik 50–60 tahun dikekalkan: label 15 tebal, teks blok 15.5–16,
   sasaran tekan >= 44px, pemegang seret besar dan kelihatan.
   ========================================================================= */

:root{
  /* Biru "tempat jatuh". Ungu tidak boleh dipakai di sini — seluruh pembina
     sudah ungu, jadi garis sisip akan hilang dalam bingkai blok terpilih. */
  --tb-biru:#0058BE;
  --tb-biru-l:#E7F0FF;
  /* Warna kertas — TETAP terang walaupun mod gelap, kerana .kertas memang
     mensimulasi helaian A4 putih yang akan keluar dari pencetak. */
  --tb-kertas-garis:#E4E7EF;
  --tb-kertas-teks:#454C5B;
  --tb-kertas-bayang:#EEF0F6;
}
[data-tema="gelap"]{
  /* #0058BE terlalu gelap atas latar #101319 — garis sisip jadi tidak nampak. */
  --tb-biru:#7FB2FF;
  --tb-biru-l:#14233B;
}

/* ═══════════════════════════════════════════════ 01/02 · kanvas pembina */

/* .pembina (sistem.css) sudah memberi 3 lajur 288 / 1fr / 268.
   Di sini lajur tengah diberi ruang lebih kerana ia memegang kertas A4. */
.tb-pembina{grid-template-columns:300px minmax(0,1fr) 288px}

/* ------------------------------------------------------------- palet kiri */
.tb-palet-item{position:relative;cursor:grab;min-height:60px}
.tb-palet-item:active{cursor:grabbing}
.tb-pegang{color:var(--teks3)}
/* Slot yang sedang diseret: kekal di tempatnya sebagai bingkai putus-putus.
   Item itu TIDAK dibuang dari DOM — membuang nod sumber di tengah seret
   membatalkan seret itu sendiri dalam Safari dan Firefox. */
.tb-palet-item--seret{background:none;border:1.6px dashed var(--aksen)}
.tb-palet-item--seret>*{visibility:hidden}
.tb-palet-item--seret::after{
  content:"sedang diseret…";
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:13.5px;color:var(--teks3);
}

/* ------------------------------------------------- tong buang (lepas keluar) */
.tb-tong{
  display:flex;align-items:center;gap:14px;
  border-radius:var(--r-kecil);padding:18px 20px;
  border:2.2px dashed var(--sempadan);background:var(--kad-dalam);
  color:var(--teks2);font-size:14.5px;
  opacity:.55;transition:opacity .12s,border-color .12s,background .12s;
}
.tb-tong__ikon{display:grid;flex:none}
.tb-tong--sedia{opacity:1;border-color:var(--merah);color:var(--merah)}
.tb-tong--aktif{background:var(--merah-l);border-style:solid;color:var(--merah)}

/* ---------------------------------------------------------- kertas A4 kanvas */
.tb-kad-kanvas{padding:24px}
.tb-kertas-luar{
  background:var(--kad-dalam);border:1.2px solid var(--sempadan);
  border-radius:10px;padding:18px;
}
.tb-kanvas{
  background:var(--kad);border:1.2px solid var(--sempadan);border-radius:6px;
  box-shadow:0 6px 18px rgba(21,28,39,.10);
  min-height:520px;padding:16px;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px;
}
[data-tema="gelap"] .tb-kanvas{box-shadow:0 6px 18px rgba(0,0,0,.45)}
.tb-kanvas--seret{outline:2px dashed var(--tb-biru);outline-offset:4px}
.tb-kosong{width:100%;text-align:center;padding:64px 16px}

/* ------------------------------------------------------------------- blok */
.tb-blok{
  position:relative;flex:1 1 100%;min-width:0;
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  background:var(--kad);border:1.4px solid var(--sempadan);border-radius:10px;
  padding:14px 16px;cursor:grab;
  transition:border-color .12s,background .12s;
}
.tb-blok:active{cursor:grabbing}
.tb-blok:hover{border-color:var(--aksen)}
/* Blok separuh duduk bersebelahan — 180px ialah had sebelum labelnya
   terpaksa dipotong pada telefon. */
.tb-blok--separuh{flex:1 1 calc(50% - 6px);min-width:180px}
.tb-blok--pilih{background:var(--aksen-l);border:2.6px solid var(--aksen);padding:12.6px 14.6px}
.tb-blok--seret{opacity:.45;border:2.4px dashed var(--aksen)}

.tb-blok__pegang{flex:none;display:grid;color:var(--teks3);padding-top:2px}
.tb-blok--pilih .tb-blok__pegang{color:var(--aksen)}
.tb-blok__isi{flex:1;min-width:0}
.tb-blok__label{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:15.5px;letter-spacing:-.01em;
}
.tb-blok__garis{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.tb-blok__garis i{display:block;height:6px;border-radius:3px;background:var(--kad-dalam)}
[data-tema="gelap"] .tb-blok__garis i{background:#252B38}
.tb-blok--pilih .tb-blok__garis i{background:var(--kad)}
.tb-blok__kawal{width:100%;margin-top:4px}

/* tanda "AI boleh isi" — kecil, tetapi berwarna aksen supaya terbaca sekilas */
.tb-ai{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--aksen-l);color:var(--aksen);
  border-radius:12px;padding:3px 9px;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;
}
.tb-blok--pilih .tb-ai{background:var(--kad)}

/* ---------------------------------------------------- garis sisip (jatuh)
   Bar biru tebal di tepi blok. Untuk blok PENUH ia mendatar (atas/bawah);
   untuk blok SEPARUH ia menegak (kiri/kanan) — kerana itulah arah sebenar
   blok itu akan disisip. */
.tb-blok--sisip-sebelum::before,
.tb-blok--sisip-selepas::after{
  content:"";position:absolute;z-index:2;
  background:var(--tb-biru);border-radius:3px;
  box-shadow:0 0 0 3px var(--tb-biru-l);
}
.tb-blok--sisip-sebelum::before{left:0;right:0;top:-9px;height:4px}
.tb-blok--sisip-selepas::after{left:0;right:0;bottom:-9px;height:4px}
.tb-blok--separuh.tb-blok--sisip-sebelum::before{left:-8px;right:auto;top:0;bottom:0;width:4px;height:auto}
.tb-blok--separuh.tb-blok--sisip-selepas::after{right:-8px;left:auto;top:0;bottom:0;width:4px;height:auto}

/* zon lepas di hujung borang */
.tb-hujung{
  width:100%;border-radius:10px;padding:18px;text-align:center;
  border:2px dashed var(--sempadan);color:var(--teks3);font-size:13.5px;
}
.tb-kanvas--seret .tb-hujung{border-color:var(--tb-biru);color:var(--tb-biru)}
.tb-hujung--aktif{background:var(--tb-biru-l);border-style:solid;color:var(--tb-biru);font-weight:700}

/* ═══════════════════════════════════════════ 03 · pratonton Word / PDF */
.tb-kertas-bingkai{
  background:var(--kad-dalam);border:1.6px solid var(--sempadan);
  border-radius:var(--r-kad);padding:24px;
}
.tb-kertas{box-shadow:0 10px 26px rgba(21,28,39,.14)}
.tb-kertas__sekolah{text-align:center;font-size:12.5px;color:var(--tb-kertas-teks);margin-top:4px}
.tb-kertas__isi{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tb-kertas__kaki{
  margin-top:22px;padding-top:10px;border-top:1px solid var(--tb-kertas-garis);
  text-align:center;font-size:11px;color:var(--tb-kertas-teks);
}
/* Word: garis margin putus-putus seperti sempadan halaman dalam MS Word.
   PDF: tiada panduan margin — ia sudah rata seperti keluar dari pencetak. */
.tb-kertas--word{border:1.4px solid var(--sempadan);outline:1px dashed #C9D2E4;outline-offset:-24px}
.tb-kertas--pdf{border:1.4px solid #C9D2E4}

.tb-info{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--tb-kertas-garis);border-radius:6px;overflow:hidden;margin-top:16px;
}
.tb-info__sel{
  display:flex;gap:8px;padding:8px 12px;font-size:12.5px;
  border-top:1px solid var(--tb-kertas-garis);
}
.tb-info__sel:nth-child(1),.tb-info__sel:nth-child(2){border-top:0}
.tb-info__sel:nth-child(odd){border-right:1px solid var(--tb-kertas-garis)}
.tb-info__sel b{flex:none;min-width:104px;font-size:12.5px}
.tb-info__sel span{color:var(--tb-kertas-teks)}

.tb-kotak{
  flex:1 1 100%;min-width:0;
  border:1px solid var(--tb-kertas-garis);border-radius:6px;padding:10px 12px;
}
.tb-kotak--separuh{flex:1 1 calc(50% - 5px);min-width:180px}
.tb-kotak>b{display:block;font-size:13px;margin-bottom:8px}
.tb-kotak__teks{font-size:12px;color:var(--tb-kertas-teks);line-height:1.5}
.tb-kotak__garis{height:6px;border-radius:3px;background:var(--tb-kertas-bayang);margin:8px 0}
.tb-kotak__garis--pendek{width:62%}

/* ═══════════════════════════════════════════ 04 · simpan templat sekolah */
.tb-titik{flex:none;width:9px;height:9px;border-radius:5px;background:var(--aksen)}

/* ═══════════════════════════════════════════════════ 05 · pustaka templat */
.tb-pustaka{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Panel "belum ada templat" ialah satu-satunya anak — ia mesti merentangi
   seluruh baris, bukan duduk dalam satu petak sempit di kiri. */
.tb-pustaka>.kad:only-child{grid-column:1/-1}
.tb-kad-templat{display:flex;flex-direction:column;padding:20px}
.tb-kad-templat__atas{position:relative}
.tb-lencana{position:absolute;top:10px;right:10px}
.tb-kad-templat .btn-baris{margin-top:auto}

/* pratonton kecil borang dalam kad pustaka */
.tb-mini{
  background:var(--kad-dalam);border:1.2px solid var(--sempadan);
  border-radius:8px;padding:12px;height:150px;
}
.tb-mini__kertas{
  height:100%;background:var(--kad);border:1px solid var(--sempadan);
  border-radius:4px;padding:10px;overflow:hidden;
  display:flex;flex-direction:column;gap:8px;
}
.tb-mini__kepala{height:12px;border-radius:3px;background:var(--aksen-l)}
.tb-mini__baris{height:6px;border-radius:2px;background:var(--kad-dalam)}
[data-tema="gelap"] .tb-mini__baris{background:#252B38}
.tb-mini__baris--pendek{width:64%}

/* ═════════════════════════════════════════════════════════════ responsif
   Takat henti sama dengan sistem.css: >=1240 komputer, 760–1239 tablet,
   <760 telefon. Pada tablet dan telefon HTML5 drag-and-drop langsung tidak
   berjalan — itulah sebabnya butang Naik / Turun ada pada setiap blok yang
   dipilih dan bukan hanya dalam panel kanan. */
@media (max-width:1239px){
  .tb-pembina{grid-template-columns:minmax(0,1fr)}
  .tb-pustaka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-kanvas{min-height:420px}
}
@media (max-width:759px){
  .tb-pustaka{grid-template-columns:minmax(0,1fr)}
  .tb-kertas-bingkai{padding:12px}
  .tb-kertas-luar{padding:10px}
  .tb-kanvas{padding:12px}
  /* Blok separuh jatuh jadi penuh: 50% daripada 320px tidak cukup untuk
     "Standard Pembelajaran" walaupun satu baris. Cip SEPARUH pada blok itu
     kekal, jadi cikgu masih tahu ia akan dicetak separuh lebar. */
  .tb-blok--separuh{flex:1 1 100%}
  .tb-kotak--separuh{flex:1 1 100%}
  .tb-info{grid-template-columns:minmax(0,1fr)}
  .tb-info__sel:nth-child(2){border-top:1px solid var(--tb-kertas-garis)}
  .tb-info__sel:nth-child(odd){border-right:0}
}

/* --------------------------------------------------------------- cetakan */
@media print{
  .tb-pembina,.tb-tong,.tb-hujung{display:none!important}
  .tb-kertas-bingkai{background:none;border:0;padding:0}
  .tb-kertas{box-shadow:none;outline:0;border:0}
}