/* ============================================================
   Pemesanan Ruang (index.php?p=pesan-ruang) & bagian di Area Anggota
   Memakai token warna tema (sitaka-base.css / sitaka-dark.css).
   ============================================================ */
.pr { display: grid; gap: 18px; }
.pr-kartu { margin: 0; }

.pr-aturan { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pr-aturan > div {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--cj-r-lg);
  background: var(--cj-surface); border: 1px solid var(--cj-line); font-size: 13.5px; color: var(--cj-muted); line-height: 1.5;
}
.pr-aturan b { color: var(--cj-ink-strong); }
.pr-aturan i { font-size: 18px; color: #C68A00; margin-top: 3px; }

/* ---------- kalender ---------- */
.pr-kal-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-kal-nav { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--cj-ink-strong); }
.pr-kal { overflow-x: auto; margin-top: 6px; -webkit-overflow-scrolling: touch; }
.pr-tabel { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.pr-tabel th { font-size: 12.5px; font-weight: 700; color: var(--cj-muted); text-align: center; padding: 4px; }
.pr-tabel thead th:first-child, .pr-nama-ruang { width: 170px; }
.pr-nama-ruang { text-align: left !important; color: var(--cj-ink-strong) !important; font-size: 13px !important; line-height: 1.3; }
.pr-nama-ruang small { display: block; font-weight: 400; color: var(--cj-muted); font-size: 11.5px; }
.pr-warna { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.pr-tabel td {
  vertical-align: top; height: 64px; padding: 6px; border-radius: 10px; background: var(--cj-surface-alt);
  border: 1px solid var(--cj-line-soft); font-size: 12px;
}
.pr-tabel td.pr-bisa { cursor: pointer; background: var(--cj-surface); border-color: var(--cj-line); transition: border-color .15s, box-shadow .15s; }
.pr-tabel td.pr-bisa:hover, .pr-tabel td.pr-bisa:focus-visible { border-color: var(--cj-gold); box-shadow: 0 0 0 2px rgba(var(--cj-gold-rgb), .25); outline: none; }
.pr-tabel td.pr-tutup, .pr-tabel td.pr-luar { background: repeating-linear-gradient(-45deg, var(--cj-surface-alt), var(--cj-surface-alt) 6px, var(--cj-line-soft) 6px, var(--cj-line-soft) 12px); color: var(--cj-muted); }
.pr-tutup span { font-weight: 700; }
.pr-kosong { color: var(--cj-muted-soft); }
.pr-blok { display: block; margin-bottom: 3px; padding: 2px 6px; border-radius: 6px; font-weight: 700; font-size: 11.5px; }
.pr-blok--ok { background: rgba(28, 92, 171, .14); color: #1c4f94; }
.pr-blok--tunggu { background: rgba(217, 119, 6, .16); color: #92400e; }
.pr-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--cj-muted); }
.pr-lg { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.pr-lg--ok { background: rgba(28, 92, 171, .35); }
.pr-lg--tunggu { background: rgba(217, 119, 6, .4); }
.pr-lg--tutup { background: repeating-linear-gradient(-45deg, #e2e8f0, #e2e8f0 3px, #cbd5e1 3px, #cbd5e1 6px); }
.pr-muat { color: var(--cj-muted); font-size: 13px; }

/* ---------- formulir ---------- */
.pr-form { display: grid; gap: 12px; margin-top: 6px; }
.pr-baris { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 16px; align-items: start; }
.pr-baris > .cj-label { padding-top: 10px; margin: 0; }
.pr-info { margin: 4px 0 0; font-size: 12.5px; color: var(--cj-muted); }
.pr-info--ok { color: var(--cj-success); font-weight: 600; }
.pr-info--galat, .pr-galat-teks { color: var(--cj-danger); font-weight: 600; font-size: 13px; }
.pr-pendek { max-width: 140px; }
.pr-pilih { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-pilih label, .pr-opsi {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--cj-line); background: var(--cj-surface); font-size: 13.5px; color: var(--cj-ink);
}
.pr-pilih #prLain { flex: 1 1 220px; }
.pr-waktu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-waktu select { width: auto; min-width: 120px; }
.pr-waktu #prTanggal { min-width: 220px; }
.pr-ruang { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pr-opsi { align-items: flex-start; }
.pr-opsi input { margin-top: 3px; }
.pr-opsi span { display: flex; flex-direction: column; gap: 2px; }
.pr-opsi small { color: var(--cj-muted); font-size: 12px; }
.pr-opsi:has(input:checked) { border-color: var(--cj-gold); box-shadow: 0 0 0 2px rgba(var(--cj-gold-rgb), .25); }
.pr-opsi--mati { opacity: .55; cursor: not-allowed; }
.pr-tag { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 9999px; background: var(--cj-line-soft); color: var(--cj-muted); }
.pr-tag--saran { background: rgba(5, 150, 105, .14); color: #047857; }
.pr-tag--isi { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.pr-galat { border-radius: 10px; padding: 10px 14px; background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .3); color: var(--cj-danger); font-size: 13.5px; }
.pr-galat ul { margin: 0; padding-left: 18px; }
.pr-sukses { text-align: center; padding: 18px 10px 6px; }
.pr-sukses > i { font-size: 40px; color: var(--cj-success); }
.pr-sukses h3 { margin: 8px 0 6px; font-size: 20px; color: var(--cj-ink-strong); }
.pr-kode { font-size: 20px; letter-spacing: 1px; color: var(--cj-navy); }

/* ---------- status ---------- */
.pr-cek { flex-wrap: wrap; }
.pr-cek .cj-input { flex: 1 1 180px; }
.pr-status { margin-top: 12px; border: 1px solid var(--cj-line); border-radius: 12px; padding: 14px 16px; background: var(--cj-surface); }
.pr-status__kepala { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pr-status__baris { display: grid; grid-template-columns: 130px 1fr; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.pr-status__baris span { color: var(--cj-muted); }
.pr-pil { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 9999px; }
.pr-pil--menunggu { background: rgba(217, 119, 6, .15); color: #92400e; }
.pr-pil--disetujui { background: rgba(5, 150, 105, .15); color: #047857; }
.pr-pil--ditolak, .pr-pil--dibatalkan { background: rgba(100, 116, 139, .15); color: #475569; }
.pr-batal { margin-top: 10px; }

/* ---------- Area Anggota ---------- */
.pr-anggota { margin-top: 18px; }
.pr-anggota table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pr-anggota th, .pr-anggota td { padding: 9px 8px; border-bottom: 1px solid var(--cj-line-soft); text-align: left; vertical-align: top; }
.pr-anggota th { font-size: 12px; color: var(--cj-muted); }

@media (max-width: 640px) {
  .pr-baris { grid-template-columns: 1fr; }
  .pr-baris > .cj-label { padding-top: 0; }
  .pr-status__baris { grid-template-columns: 1fr; gap: 0; }
}

/* mode gelap */
:root[data-theme="dark"] .pr-blok--ok { background: rgba(127, 178, 232, .2); color: #CFE2F7; }
:root[data-theme="dark"] .pr-blok--tunggu { background: rgba(251, 191, 36, .18); color: #FCD34D; }
:root[data-theme="dark"] .pr-tag--saran, :root[data-theme="dark"] .pr-pil--disetujui { color: #6EE7B7; }
:root[data-theme="dark"] .pr-pil--menunggu { color: #FCD34D; }
:root[data-theme="dark"] .pr-kode { color: var(--cj-gold); }