/* calendar.css — fragmen khusus tampilan Kalender (js/views/calendar.js).
   Sengaja terpisah dari app.css: beberapa agen lain sedang menyentuh
   app.css/index.html bersamaan. File ini disuntik lewat JS (lihat
   suntikCss() di calendar.js), bukan lewat <link> di index.html.

   Kelas dasar grid waktu (.jadwal .jgrid .jkol .jkh .jkb .jg .jb .jbar
   .jmode .jlabel dst.) TETAP dipakai apa adanya dari app.css — di sini
   cuma menambah yang benar-benar baru untuk kalender ini. Semua selector
   baru DISKOP di bawah .cal-page supaya tidak menyentuh tampilan lain
   (mis. diary.js, yang masih ada di disk dan juga memakai .jbar/.jb). */

/* toolbar: jangan sampai wrap jadi 2 baris di HP (aturan wajib project) —
   kalau kepepet sempit, geser horizontal DI DALAM baris toolbar sendiri,
   jangan biarkan kontrolnya turun baris */
.cal-page .jbar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cal-page .jbar::-webkit-scrollbar{display:none}
.cal-page .jmode{flex:0 0 auto}

/* -------------------------------------------- penanda acara multi-ruang -- */
/* border kiri lebih tebal & diwarnai per-acara (lihat warnaAcara() di JS)
   supaya balok yang sama-sama satu acara tapi ada di beberapa kolom
   ruangan/hari langsung kelihatan sepasang tanpa harus klik masuk */
.cal-page .jb.multi{border-left-width:4px}
.cal-page .jb .jm{position:absolute;top:2px;right:3px;font-size:10px;font-weight:900;line-height:1}
.cal-page .jb .jr{line-height:1;margin-top:1px}
.cal-page .jb .jr .rm{font-size:9.5px;gap:3px}

/* sorot: semua balok acara yang sama menyala bareng saat salah satunya
   di-hover/disentuh — begitu cara "satu acara, beberapa ruangan" kelihatan
   nyambung meski letaknya berjauhan di grid */
.cal-page .jb.sorot,.cal-page .cbevt.sorot{outline:2px solid var(--brand);outline-offset:-2px;
  z-index:6;box-shadow:0 2px 10px rgba(0,0,0,.2)}

/* ------------------------------------------------------- tampilan Bulan -- */
.cal-page .cbwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cal-page .cbhead{display:grid;grid-template-columns:repeat(7,1fr);background:var(--card2);
  border-bottom:1px solid var(--line);min-width:520px}
.cal-page .cbhead div{padding:6px 4px;font-size:11px;font-weight:700;color:var(--ink2);text-align:center}
.cal-page .cbgrid{display:grid;grid-template-columns:repeat(7,1fr);min-width:520px}
.cal-page .cbcell{border-left:1px solid var(--line);border-top:1px solid var(--line);
  min-height:76px;padding:3px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-page .cbcell:nth-child(7n+1){border-left:none}
.cal-page .cbcell.luar{background:var(--card2);opacity:.55}
.cal-page .cbcell.hariIni{background:var(--brand-l)}
.cal-page .cbtgl{font-size:11px;font-weight:700;color:var(--ink2);text-decoration:none;
  align-self:flex-start;padding:1px 3px;border-radius:5px}
.cal-page .cbcell.hariIni .cbtgl{color:var(--brand);background:#fff}
.cal-page .cbevs{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-page .cbevt{display:block;border-left:3px solid var(--line2);border-radius:4px;padding:1px 4px;
  font-size:10.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--card);color:inherit}
.cal-page .cbevt b{font-weight:700}
.cal-page .cbevt .cbm{opacity:.75;margin-left:3px}
.cal-page .cbevt.s-tentative{border-left-color:var(--tent)}
.cal-page .cbevt.s-definite{border-left-color:var(--def)}
.cal-page .cbevt.s-prospect{border-left-color:var(--pros)}
.cal-page .cbevt.s-completed{border-left-color:#1a49b8}
.cal-page .cbevt.s-cancelled,.cal-page .cbevt.s-lost{opacity:.55;text-decoration:line-through}
.cal-page .cbevt.konflik{outline:1.5px solid var(--bad);outline-offset:-1.5px}
.cal-page .cbevt .jk{color:var(--bad)}

@media(max-width:700px){
  .cal-page .cbcell{min-height:64px}
  .cal-page .cbevt{font-size:10px}
  .cal-page .cbhead,.cal-page .cbgrid{min-width:0}
}

/* Baris kedua header kolom SELALU memakan tinggi, walau isinya kosong.
   Tanpa ini, kolom tanpa keterangan (mis. ruangan yang belum diisi luasnya)
   punya header lebih pendek, sehingga seluruh garis jam di kolom itu bergeser
   dan gridnya terlihat miring. */
.jkh small{display:block;min-height:1.15em}
.jkh small:empty::before{content:"\00a0"}