/* Keuangan & Tagihan 1.7.0: daftar harga, rekening, tagihan massal */
.harga-form { margin-top: 18px; padding: 16px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; background: var(--card-bg, #fff); }
.harga-aturan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; padding: 12px 40px 12px 12px; margin-bottom: 10px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; position: relative; }
.harga-aturan label { display: block; font-size: 12px; margin-bottom: 4px; opacity: .8; }
.harga-aturan input, .harga-aturan select { width: 100%; box-sizing: border-box; }
.harga-aturan .hg-nama, .harga-aturan .rk-atas { grid-column: 1 / -1; }
.harga-hapus { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; }
.harga-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.honor-ringkas { margin: 0; padding-left: 18px; }
.honor-ringkas li { margin-bottom: 4px; }
@media (max-width: 600px) { .harga-aturan { grid-template-columns: 1fr 1fr; } }
.tm-content { max-width: 960px; width: 96vw; max-height: 92vh; overflow-y: auto; }
.tm-kontrol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; margin-bottom: 10px; }
.tm-kontrol > div, .tm-rentang > div { min-width: 0; }
.tm-kontrol label { display: block; font-size: 12px; margin-bottom: 4px; opacity: .8; }
.tm-kontrol input, .tm-kontrol select { width: 100%; box-sizing: border-box; }
.tm-daftar { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.tm-baris { display: grid; grid-template-columns: 28px minmax(140px, 1.4fr) repeat(3, minmax(90px, 1fr)) minmax(100px, 1fr); gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; }
.tm-baris.tm-ada { opacity: .6; }
.tm-baris label { display: block; font-size: 11px; opacity: .7; }
.tm-baris input[type=number] { width: 100%; box-sizing: border-box; }
.tm-nama small { display: block; opacity: .7; }
.tm-catatan { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.tm-catatan .badge-saas { font-size: 11px; }
.tm-content { padding-bottom: 0; }
.tm-footer { border-top: 1px solid var(--border-color, #e2e8f0); position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 18px; margin-top: 8px; background: var(--card-bg, #fff); }
@media (max-width: 700px) {
  .tm-baris { grid-template-columns: 28px repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tm-nama { grid-column: 2 / -1; }
  .tm-baris > :nth-child(3) { grid-column: 2; }
  .tm-baris > :nth-child(6) { grid-column: 2 / -1; }
  .tm-baris > :nth-child(6):empty { display: none; }
  .tm-catatan { grid-column: 1 / -1; }
  .tm-baris input[type=number] { padding: 8px; min-width: 0; }
}
.tm-catatan .badge-saas { white-space: normal; text-align: left; }
.rek-kartu { margin-bottom: 12px; }
.rek-baris { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-color, #e2e8f0); }
.rek-nomor { font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.bukti-img { display: block; max-width: 100%; max-height: 60vh; margin: 8px auto; border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0); }
/* Kuitansi */
.kw-kertas { border: 2px solid #334155; border-radius: 10px; padding: 20px; background: #fff; color: #0f172a; position: relative; }
.kw-kepala { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #334155; padding-bottom: 10px; margin-bottom: 12px; }
.kw-kepala h2 { margin: 0; font-size: 18px; } .kw-kepala p { margin: 2px 0 0; font-size: 12px; letter-spacing: 1px; }
.kw-logo { width: 48px; height: 48px; object-fit: contain; }
.kw-baris { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #cbd5e1; font-size: 14px; }
.kw-baris strong { text-align: right; }
.kw-total { display: flex; justify-content: space-between; margin-top: 12px; padding: 10px; background: #f1f5f9; font-size: 16px; }
.kw-cap { position: absolute; right: 20px; bottom: 50px; transform: rotate(-12deg); border: 3px solid #16a34a; color: #16a34a; padding: 2px 12px; font-weight: 800; letter-spacing: 3px; opacity: .8; }
.kw-kecil { font-size: 11px; color: #64748b; margin: 18px 0 0; }
@media print {
    body * { visibility: hidden; }
    #modal-kuitansi, #modal-kuitansi * { visibility: visible; }
    #modal-kuitansi { position: absolute; inset: 0; background: #fff; }
    .kw-nonprint { display: none !important; }
}

/* v1.27.0: tab Otomatis (kartu, saklar, formulir satu kolom di HP) */
.oto-status { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--border-color, #e2e8f0); background: var(--card-bg, #fff); font-size: 14px; line-height: 1.45; }
.oto-status strong { display: block; font-size: 15px; margin-bottom: 2px; }
.oto-titik { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: #94a3b8; }
.oto-aktif { border-color: #86efac; background: #f0fdf4; } .oto-aktif .oto-titik { background: #16a34a; }
.oto-jeda { border-color: #fcd34d; background: #fffbeb; } .oto-jeda .oto-titik { background: #d97706; }
.oto-kartu { border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: var(--card-bg, #fff); font-size: 14px; }
.oto-peringatan { border-color: #fcd34d; background: #fffbeb; }
.oto-judul { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.oto-ket { margin: 0 0 8px; opacity: .8; line-height: 1.45; }
.oto-daftar { list-style: none; margin: 0 0 10px; padding: 0; }
.oto-daftar li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-top: 1px dashed rgba(0,0,0,.12); }
.oto-daftar li span { opacity: .75; }
.oto-baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px dashed rgba(0,0,0,.12); }
.oto-baris span { flex: 1 1 100%; font-weight: 600; }
.oto-baris .jd-btn, .oto-tombol { width: auto; }
.oto-form { border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 16px; background: var(--card-bg, #fff); margin-bottom: 14px; }
.oto-saklar { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; cursor: pointer; font-weight: 600; font-size: 15px; }
.oto-saklar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oto-geser { flex: 0 0 44px; width: 44px; height: 26px; border-radius: 13px; background: #cbd5e1; position: relative; transition: background .15s; }
.oto-geser::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.oto-saklar input:checked + .oto-geser { background: #16a34a; }
.oto-saklar input:checked + .oto-geser::after { transform: translateX(18px); }
.oto-saklar input:focus-visible + .oto-geser { outline: 2px solid #2563eb; outline-offset: 2px; }
.oto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 14px; }
.oto-lebar { grid-column: 1 / -1; }
.oto-kolom { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.oto-grid .oto-kolom { margin-bottom: 0; }
.oto-kolom label { font-size: 13px; font-weight: 600; margin: 0; }
.oto-kolom input, .oto-kolom select { width: 100%; box-sizing: border-box; margin: 0; }
.oto-kolom small { opacity: .7; }
.oto-kecuali { max-height: 220px; overflow-y: auto; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 4px 12px; }
.oto-siswa { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,.06); margin: 0; font-weight: 400; cursor: pointer; }
.oto-siswa:last-child { border-bottom: 0; }
.oto-siswa input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.oto-siswa span { flex: 1; }
.oto-cara { margin: 4px 0 14px; font-size: 13px; }
.oto-cara summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.oto-cara ul { margin: 6px 0 0 18px; padding: 0; line-height: 1.5; }
.oto-aksi { display: flex; justify-content: flex-end; }
.oto-aksi .btn-primary { width: auto; }
@media (max-width: 600px) { .oto-grid { grid-template-columns: 1fr; } .oto-aksi .btn-primary, .oto-tombol { width: 100%; } }
/* v1.27.0: Tagihan Massal mode per pertemuan */
.tm-rentang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-cek { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin: 6px 0; font-weight: 400; cursor: pointer; }
.tm-cek input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; }
.tm-cek span { flex: 1; min-width: 0; line-height: 1.4; }
.tm-sesi { display: block; font-size: 11px; opacity: .75; margin-top: 2px; }
.tm-kontrol input, .tm-kontrol select { min-width: 0; }
@media (max-width: 600px) { .tm-kontrol { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tm-penuh { grid-column: 1 / -1; } }
@media (min-width: 601px) { .tm-rentang { grid-column: span 2; } }
/* v1.27.0: form Buat / Edit Tagihan */
.tg-form { display: flex; flex-direction: column; gap: 14px; }
.tg-baris { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tg-baris label { font-size: 13px; font-weight: 600; margin: 0; }
.tg-baris input, .tg-baris select { width: 100%; box-sizing: border-box; margin: 0; min-width: 0; }
.tg-baris small { opacity: .7; }
.tg-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tg-info { padding: 10px 12px; border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe; font-size: 13px; line-height: 1.45; }
.tg-info.tg-bahaya { background: #fffbeb; border-color: #fcd34d; }
.tg-form .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.tm-kontrol select { padding-left: 10px; padding-right: 22px; text-overflow: ellipsis; }
@media (max-width: 480px) { .tg-dua { grid-template-columns: 1fr; } }
.hg-status { margin-top: 6px; }
@media (max-width: 600px) { .harga-aturan { padding-right: 40px; } .harga-aturan .hg-lebar { grid-column: 1 / -1; } }

/* ---------- Salin pola jadwal (1.28.0) ---------- */
.sj-content small { display: block; opacity: .7; font-size: 11px; margin-top: 2px; }
.sj-libur { margin: 8px 0; }
.sj-libur > label { display: block; font-size: 12px; opacity: .8; margin-bottom: 4px; }
.sj-libur-isi { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.sj-libur-isi input { min-width: 0; width: 100%; box-sizing: border-box; }
.sj-libur-isi .jd-btn { width: auto; white-space: nowrap; }
.sj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sj-chip { display: inline-flex; align-items: center; gap: 6px; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; }
.sj-chip button { border: 0; background: transparent; cursor: pointer; color: inherit; padding: 0 6px; font-size: 12px; }
.sj-baris { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; }
.sj-baris.sj-mati { opacity: .6; }
.sj-baris.sj-masalah { border-color: #ef4444; }
.sj-cek input { width: 20px; height: 20px; margin: 2px 0 0; }
.sj-isi { min-width: 0; }
.sj-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sj-judul small { flex-basis: 100%; margin: 0; }
.sj-prog { font-size: 11px; opacity: .75; }
.sj-edit { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 8px; margin-top: 8px; }
.sj-edit > div { min-width: 0; }
.sj-edit label { display: block; font-size: 11px; opacity: .7; margin-bottom: 2px; }
.sj-edit input, .sj-edit select { width: 100%; box-sizing: border-box; min-width: 0; }
.sj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; }
.sj-meta .jd-btn { width: auto; }
.sj-peserta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(100,116,139,.08); }
.sj-peserta small { grid-column: 1 / -1; }
.sj-p { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; font-weight: 400; cursor: pointer; }
.sj-p input { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; }
.sj-catatan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sj-catatan .badge-saas { font-size: 11px; white-space: normal; text-align: left; }
.sj-lewat { font-size: 12px; margin: 4px 0; }
.sj-lewat ul { margin: 6px 0 0 18px; padding: 0; }
.sj-total-masalah { color: #ef4444; font-size: 13px; }
@media (max-width: 700px) {
  .sj-edit { grid-template-columns: 1fr 1fr; }
  .sj-edit .sj-tgl, .sj-edit .sj-tutor { grid-column: 1 / -1; }
  .sj-libur-isi { grid-template-columns: 1fr 1fr; }
  .sj-libur-isi .jd-btn { grid-column: 1 / -1; }
  .sj-baris { grid-template-columns: 24px 1fr; gap: 8px; padding: 8px; }
}
.sj-libur { margin: 6px 0; font-size: 13px; }
.sj-libur > summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
.sj-libur .sj-libur-isi { margin-top: 6px; }
.sj-chip button { all: unset; cursor: pointer; padding: 0 8px; font-size: 12px; line-height: 1; }
.sj-chip { white-space: nowrap; }
@media (max-width: 600px) { .sj-kontrol { grid-template-columns: 1fr 1fr; } .sj-kontrol .tm-penuh { grid-column: 1 / -1; } }
@media (max-width: 600px) { .sj-kontrol input, .sj-libur-isi input { padding: 10px 8px; font-size: 14px; } .sj-edit input, .sj-edit select { padding: 9px 8px; font-size: 14px; } }

/* ---- 1.29.0: peringatan tanggal berlaku (Daftar Harga) ---- */
.hg-peringatan { margin-top: 6px; display: grid; gap: 6px; }
.hg-p { font-size: 12.5px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; }
.hg-p-bahaya { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.hg-p-info { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* ---- 1.29.0: pengingat sesi (WA) ---- */
.pg-cepat { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-cepat .jd-btn { width: auto; }
.pg-sesi { border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.pg-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.pg-info { font-size: 12px; opacity: .75; margin: 2px 0 6px; display: block; }
.pg-peserta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(100,116,139,.15); }
.pg-nama { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.pg-ok { color: #059669; font-weight: 700; margin-left: 4px; }
.pg-peserta .wa-link-btn { flex: 0 0 auto; white-space: nowrap; }

/* ---- 1.29.0: kartu pemakaian ---- */
.pk-kartu { border-radius: 14px; padding: 16px; border: 1px solid var(--border-color, #e2e8f0); background: var(--card-bg, #fff); margin-bottom: 12px; }
.pk-atas { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pk-atas small { display: block; font-size: 12px; opacity: .7; }
.pk-atas strong { font-size: 28px; line-height: 1.1; }
.pk-atas span { font-size: 12px; opacity: .7; margin-left: 4px; }
.pk-atas b { font-size: 18px; }
.pk-meter { height: 10px; border-radius: 999px; background: rgba(100,116,139,.2); overflow: hidden; margin: 10px 0 8px; }
.pk-meter i { display: block; height: 100%; border-radius: 999px; background: #10b981; min-width: 2px; }
.pk-sedang .pk-meter i { background: #f59e0b; }
.pk-tinggi .pk-meter i { background: #ef4444; }
.pk-kartu p { margin: 0; font-size: 13px; }
.pk-catatan { font-size: 12.5px; line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: rgba(100,116,139,.1); margin-bottom: 14px; }
.pk-sumber { display: grid; gap: 6px; margin-bottom: 12px; }
.pk-baris { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(60px, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.pk-nama { overflow-wrap: anywhere; }
.pk-angka { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.pk-bar { height: 8px; border-radius: 999px; background: rgba(100,116,139,.15); overflow: hidden; }
.pk-bar i { display: block; height: 100%; background: var(--primary, #4f46e5); }
@media (max-width: 480px) { .pk-baris { grid-template-columns: minmax(0, 1fr) auto; } .pk-bar { grid-column: 1 / -1; } }