/* ============================================================
   Kontrol isian jurnal — gaya bersama
   ------------------------------------------------------------
   Dipakai /ajukan, /admin/jurnal, dan /admin/jurnal-update.
   Sebelumnya semua aturan ini tertanam di dalam jurnal-update.php,
   jadi dua form lainnya tidak bisa memakainya.

   Awalan kelasnya masih "ju-" (lahir di halaman Jurnal Update).
   Dibiarkan apa adanya supaya markah dan JS halaman itu tidak
   perlu disentuh — mengganti nama kelas di tiga tempat sekaligus
   hanya menambah peluang ada yang terlewat.

   Semua warna lewat token, jadi ikut menyesuaikan mode gelap di
   sisi publik maupun mode terang di admin.
   ============================================================ */

/* ---------- APC ---------- */
.ju-apc { display: flex; gap: 5px; margin-top: 3px; align-items: stretch; }
.ju-apc__lambang {
    display: flex; align-items: center; padding: 0 10px;
    border: 1px solid var(--cj-line); border-right: 0;
    border-radius: var(--cj-r-sm) 0 0 var(--cj-r-sm);
    background: var(--cj-surface-alt); color: var(--cj-muted);
    font-size: 0.85rem; font-weight: 600; min-width: 34px; justify-content: center;
}
.ju-apc__n { flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ju-apc__lambang + .ju-apc__n { border-radius: 0 var(--cj-r-sm) var(--cj-r-sm) 0; }
.ju-apc__m { flex: 0 0 auto; width: auto !important; }
.ju-apc__na {
    display: flex; align-items: center; gap: 6px; margin-top: 5px;
    font-size: 0.74rem; color: var(--cj-muted); cursor: pointer;
}
.ju-apc__na input { width: 14px; height: 14px; accent-color: var(--cj-navy); }
.ju-apc.is-mati { opacity: 0.4; pointer-events: none; }

/* Terbilang. Inilah yang membedakan 150.000 dari 1.500.000 — angka
   yang mirip sekilas, tapi "seratus lima puluh ribu" dan "satu juta
   lima ratus ribu" tidak mungkin tertukar. */
.ju-apc__baca {
    display: block; margin-top: 4px;
    font-size: 0.74rem; line-height: 1.45; color: var(--cj-blue);
    font-weight: 600;
}
.ju-apc__baca.is-kosong { color: var(--cj-muted); font-weight: 400; font-style: italic; }
.ju-apc__baca.is-rusak  { color: var(--cj-danger); font-weight: 600; }

/* ---------- Bulan terbit ---------- */
.ju-isian__frek { position: relative; }
.ju-frek__baca {
    display: block; margin-top: 3px; font-size: 0.72rem; color: var(--cj-muted);
}
.ju-frek__baca.is-ragu { color: var(--cj-warning); }

.ju-bulan { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; align-items: center; }
.ju-bulan__c {
    padding: 3px 9px; border: 1px solid var(--cj-line); border-radius: var(--cj-r-pill);
    background: var(--cj-surface); color: var(--cj-muted);
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.ju-bulan__c:hover { border-color: var(--cj-navy); color: var(--cj-navy); }
.ju-bulan__c.is-pilih {
    background: var(--cj-navy); border-color: var(--cj-navy); color: #fff;
}
.ju-bulan__c--lain { font-size: 0.7rem; }
.ju-bulan__x {
    padding: 2px 8px; border: 0; background: none; color: var(--cj-muted);
    font-size: 1rem; line-height: 1; cursor: pointer;
}
.ju-bulan__x:hover { color: var(--cj-danger); }

/* Mode gelap: --cj-navy tidak berubah (tetap #003366), jadi chip
   terpilih akan jadi biru tua di atas latar gelap. Dipakai --cj-blue
   yang memang menyesuaikan. */
:root[data-theme="dark"] .ju-bulan__c.is-pilih,
:root[data-theme="dark"] .ju-bulan__c:hover {
    background: var(--cj-blue); border-color: var(--cj-blue); color: #0D1520;
}
:root[data-theme="dark"] .ju-bulan__c:hover { background: transparent; color: var(--cj-blue); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ju-bulan__c.is-pilih {
        background: var(--cj-blue); border-color: var(--cj-blue); color: #0D1520;
    }
    :root:not([data-theme="light"]) .ju-bulan__c:hover {
        background: transparent; border-color: var(--cj-blue); color: var(--cj-blue);
    }
}

/* ---------- Kategori ---------- */
.ju-tax { margin-bottom: 12px; }
.ju-tax__kepala { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.ju-tax__judul {
    color: var(--cj-muted); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.ju-tax__buka {
    padding: 2px 10px; border: 1px solid var(--cj-line); border-radius: var(--cj-r-pill);
    background: var(--cj-surface); color: var(--cj-blue);
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.ju-tax__buka:hover { background: var(--cj-line-soft); }

.ju-tax__tag { display: flex; flex-wrap: wrap; gap: 5px; }
.ju-tax__kosong { color: var(--cj-muted); font-size: 0.8rem; font-style: italic; }
.ju-tax__cip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 10px; border-radius: var(--cj-r-pill);
    background: var(--cj-line-soft); color: var(--cj-ink); font-size: 0.76rem;
}
.ju-tax__cip small { color: var(--cj-muted); }
.ju-tax__x {
    border: 0; background: none; padding: 0 3px; cursor: pointer;
    color: var(--cj-muted); font-size: 0.9rem; line-height: 1;
}
.ju-tax__x:hover { color: var(--cj-danger); }

.ju-tax__panel { margin-top: 9px; }
.ju-tax__teks {
    width: 100%; padding: 8px 11px; border: 1px solid var(--cj-line);
    border-radius: var(--cj-r-sm); font-size: 0.82rem; font-family: inherit;
    background: var(--cj-surface); color: var(--cj-ink);
    resize: vertical;
}
.ju-tax__aksi { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.ju-tax__hitung { color: var(--cj-muted); font-size: 0.74rem; }
.ju-tax__beda {
    margin: 8px 0 0; padding: 8px 11px; border-radius: var(--cj-r-sm);
    background: var(--cj-warning-bg); color: var(--cj-warning-text); font-size: 0.76rem;
    line-height: 1.55;
}

.ju-tax__manual { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.ju-tax__manual input {
    flex: 1 1 150px; min-width: 0; padding: 6px 10px;
    border: 1px solid var(--cj-line); border-radius: var(--cj-r-sm);
    background: var(--cj-surface); color: var(--cj-ink); font-size: 0.8rem;
}
.ju-tax__manual .ju-tax__buka { flex: 0 0 auto; padding: 6px 14px; }