/* =============================================================================
   assets/css/ui-tabel-filter.css
   [PATCH83] Gaya untuk filter dari kepala tabel. Lihat ui-tabel-filter.js.
   ============================================================================= */

/* ── Kepala kolom yang bisa diklik ────────────────────────────────────────── */
th.tf-kepala {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color .12s;
}
th.tf-kepala:hover { background-color: rgba(0, 123, 255, .07); }

/* Ikon corong sengaja SAMAR sampai disentuh.
   Kepala tabel adalah baris paling padat di halaman; tujuh ikon biru berjajar
   di sana membuat nama kolomnya sendiri sulit dibaca — padahal nama kolom itu
   yang dicari mata lebih dulu. */
th.tf-kepala .tf-ikon {
    opacity: .28;
    font-size: .72em;
    transition: opacity .12s;
}
th.tf-kepala:hover .tf-ikon { opacity: .75; }

/* Kolom yang filternya SEDANG aktif ditandai jelas — ini kebalikannya.
   Orang yang membuka halaman dengan filter masih menempel dari kunjungan
   sebelumnya melihat daftar pendek tanpa tahu kenapa, dan menyimpulkan datanya
   hilang. Tanda ini yang menjawabnya sebelum ia sempat bertanya. */
th.tf-kepala.tf-aktif            { background-color: rgba(0, 123, 255, .12); }
th.tf-kepala.tf-aktif .tf-ikon   { opacity: 1; color: #007bff; }

/* ── Menu ─────────────────────────────────────────────────────────────────── */
.tf-menu {
    position: absolute;
    z-index: 1080;              /* di atas modal (1050) dan dropdown Select2 (1060) */
    min-width: 210px;
    max-width: 320px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
    padding: .25rem 0;
    font-size: .875rem;
}

.tf-judul {
    padding: .25rem .75rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.tf-pisah {
    height: 1px;
    background: #e9ecef;
    margin: .25rem 0;
}

.tf-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .3rem .75rem;
    border: 0;
    background: none;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tf-item:hover { background-color: #f1f3f5; }
.tf-item.aktif { font-weight: 600; color: #007bff; }
.tf-item:focus { outline: 2px solid #80bdff; outline-offset: -2px; }

/* Ruang kosong selebar ikon centang, supaya teks pilihan yang tidak aktif tetap
   sejajar dengan yang aktif. Tanpa ini seluruh daftar bergeser satu ikon
   setiap kali pilihannya berpindah. */
.tf-kosong {
    display: inline-block;
    width: 1em;
}

.tf-cari {
    display: block;
    width: calc(100% - 1.5rem);
    margin: .25rem .75rem .4rem;
    padding: .2rem .5rem;
    font-size: .82rem;
    border: 1px solid #ced4da;
    border-radius: .2rem;
}
.tf-cari:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 .15rem rgba(0, 123, 255, .25);
    outline: 0;
}

/* Daftar panjang digulir, bukan memanjang sampai keluar layar. */
.tf-daftar {
    max-height: 260px;
    overflow-y: auto;
}

/* ═════════════════════════════════════════════════════════════════════════════
   [PATCH133] "Ada Yang Baru?" dikelompokkan per hari.
   ═════════════════════════════════════════════════════════════════════════════
   Riwayatnya singkat: sampai v130 tiap catatan sebuah kartu berdiri sendiri,
   berjajar ke bawah tanpa pembatas. v131 mengelompokkannya per hari. v132
   mengganti pengelompokan itu jadi per bagian, dan itu keputusan saya, bukan
   permintaan. Ditolak, dan v133 mengembalikannya ke per hari: terbaru di atas,
   terarsip selamanya, isi di dalam satu hari tidak perlu urut.

   Yang dipertahankan dari v132 cuma isinya yang sudah diringkas, dan label
   bagian di tiap catatan (.pbl-entri-bagian di bawah). Labelnya menolong
   memindai sekilas tanpa memaksa halaman disusun menurut label itu.

   Aturan .perubahan-kartu yang lama sudah dihapus, tidak ditinggal sebagai
   cadangan: tidak ada lagi yang menghasilkan kelas itu, jadi ia tidak menata
   apa pun, dan gaya yang tidak dipakai memberi kesan halaman ini masih punya
   bentuk tampilan lain sehingga orang mencari saklar yang tidak pernah ada.

   TIDAK ADA BLOK prefers-color-scheme DI SINI, dan itu disengaja. Portal ini
   tidak punya tema gelap. Satu komponen yang ikut setelan gelap perangkat
   sementara kerangka halamannya tetap putih menghasilkan kotak abu-abu tua
   berisi tulisan gelap, nyaris tidak terbaca, dan tidak ada satu pun cara bagi
   pemakainya untuk mematikannya. Kalau kelak tema gelap dibuat, ia masuk ke
   seluruh portal sekaligus, bukan ke satu komponen lebih dulu. */

.pbl-grup {
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: .5rem;
    margin-bottom: 1rem;
    background: #fff;
    overflow: hidden;
}

/* Kepalanya <button>, bukan <div> yang diberi onclick. Bedanya bukan gaya:
   tombol bisa dijangkau Tab, ditekan Spasi dan Enter, dan dibacakan pembaca
   layar sebagai sesuatu yang bisa ditekan. */
.pbl-grup-kepala {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .7rem .95rem;
    border: 0;
    background: #f7f8fa;
    text-align: left;
    font: inherit;
    color: #212529;
    cursor: pointer;
}
.pbl-grup-kepala:hover  { background: #eef1f5; }
.pbl-grup-kepala:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.pbl-grup-panah {
    flex: 0 0 auto;
    font-size: .8rem;
    color: #6c757d;
    transition: transform .18s;
}
.pbl-grup.pbl-tutup .pbl-grup-panah { transform: rotate(-90deg); }

.pbl-grup-judul { font-weight: 600; }

/* "Hari ini" / "Kemarin". Keterangan tambahan, bukan pengganti tanggalnya. */
.pbl-grup-ringkas {
    font-size: .78rem;
    color: #495057;
    background: rgba(0, 0, 0, .06);
    border-radius: 999px;
    padding: .1rem .55rem;
    white-space: nowrap;
}

/* Label bagian di tiap catatan: Payroll, Pengajuan, dan seterusnya. Sengaja
   lebih tenang daripada lencana kategori di sebelahnya, karena ia keterangan
   tempat, bukan tingkat kepentingan. */
.pbl-entri-bagian {
    font-size: .76rem;
    color: #495057;
    background: rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: .1rem .5rem;
    white-space: nowrap;
}

/* Hitungannya didorong ke kanan, dan tetap terlihat saat bagiannya tertutup.
   Bagian tertutup tanpa menyebut isinya tidak bisa dibedakan dari bagian yang
   memang kosong.

   Jaraknya diatur di sini, tidak diserahkan ke kelas mr-1 milik Bootstrap.
   Komponen yang jaraknya bergantung kelas dari luar akan menempel jadi
   "4 baru24 catatan" pada halaman mana pun yang berkas gayanya gagal termuat,
   dan itu terbaca sebagai angka yang salah, bukan sebagai gaya yang hilang. */
.pbl-grup-hitung {
    display: inline-flex;
    gap: .3rem;
    margin-left: auto;
    padding-left: .5rem;
    white-space: nowrap;
}

.pbl-grup-isi { padding: .25rem .95rem .35rem; }
.pbl-grup.pbl-tutup .pbl-grup-isi { display: none; }

/* Sub-bagian: satu catatan. Dipisah garis tipis, bukan kartu di dalam kartu.
   Kotak bersarang membuat mata mencari batas dua kali. */
.pbl-entri {
    padding: .85rem 0 .95rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.pbl-grup-isi > .pbl-entri:first-child { border-top: 0; }

.pbl-entri-tanda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
}
.pbl-entri-tgl     { font-size: .78rem; color: #6c757d; margin-left: auto; }
.pbl-entri-judul   { font-size: 1.03rem; margin: 0 0 .3rem; }
.pbl-entri-ringkas { margin: 0 0 .5rem; }
.pbl-entri-poin    { margin: 0; padding-left: 1.15rem; }
.pbl-entri-poin li { margin-bottom: .25rem; }

/* Garis kuning penanda belum dibaca, arti yang sama seperti sejak PATCH109:
   latarnya TIDAK ikut berubah warna, supaya lencana "Baru" tetap jadi tanda
   pembeda satu-satunya. */
.pbl-entri-baru {
    border-left: 4px solid #ffc107;
    padding-left: .75rem;
    margin-left: -.2rem;
}

/* Di layar sempit kepalanya boleh melipat, supaya hitungannya tidak terdorong
   keluar layar dan judul bagiannya tidak terpotong. Keterangan bagian
   disembunyikan: di lebar itu ia mendesak yang lebih penting. */
@media (max-width: 575.98px) {
    .pbl-grup-kepala  { flex-wrap: wrap; }
    .pbl-grup-ringkas { display: none; }
    .pbl-grup-hitung  { margin-left: 0; padding-left: 0; width: 100%; }
    .pbl-entri-tgl    { margin-left: 0; }
}