/* ─── Flatpickr: hilangkan highlight hari ini ──────────────────────── */
.flatpickr-day.today,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

/* ─── Notification badge ────────────────────────────────────────────── */
.notif-wrap {
    position: relative;
    overflow: visible !important;
}

.notif-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    border: 2px solid #fff;
    z-index: 10;
    pointer-events: none;
}

.notif-count-badge.d-none {
    display: none !important;
}

/* ─── Settings top tabs: underline style ───────────────────────────── */
#settingsTopTabs.nav-style-5 {
    border-bottom: 1px solid var(--gray-200, #e9ecef);
}

#settingsTopTabs.nav-style-5 .nav-link {
    color: #677788;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 0.6rem 0.75rem;
    margin-bottom: -1px;
    font-size: 0.875rem;
}

#settingsTopTabs.nav-style-5 .nav-link.active {
    color: #127384;
    background: transparent !important;
    border-bottom: 2px solid #127384 !important;
    font-weight: 600;
}

#settingsTopTabs.nav-style-5 .nav-link:hover:not(.active) {
    color: #333;
    background: transparent !important;
    border-bottom: 2px solid #e9ecef !important;
}

/* ─── Mini sidebar icon-only: collapse invisible section gaps ────────── */
/* @media (min-width: 992px) {
    .expand-menu .sidebar .sidebar-menu ul > li > a {
        padding: 0px !important;
    }
} */

/* Ikon panah accordion: tema memakai glyph FontAwesome yang tidak dimuat di layout aplikasi,
   gunakan tabler-icons (chevron-down) agar ikon dropdown tampil. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    content: "\ea5f";
    font-family: "tabler-icons" !important;
    font-size: 14px;
}
.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* ─── Kolom aksi (Ubah/Hapus) sticky di tabel data ───────────────────────
   Di mobile/tablet, tabel data sering harus digeser ke samping untuk mencapai
   tombol aksi. Kolom ditandai `.sticky-action-col` oleh datatables.js
   (lihat markStickyActionColumn) dan dibuat menempel di sisi kanan saat
   tabel digulir horizontal, sehingga Ubah/Hapus selalu terlihat. */
table.dataTable > thead > tr > th.sticky-action-col,
table.dataTable > tbody > tr > td.sticky-action-col {
    /* !important wajib: datatables.js menyuntikkan `table.dataTable tbody td { position:
       relative !important }` secara global (agar dropdown aksi tidak terpotong), yang
       kalau tidak dilawan akan mematikan sticky di kolom ini. */
    position: sticky !important;
    right: 0;
    /* Latar solid + z-index di atas sel lain agar kolom di sebelahnya bergeser
       di belakang kolom aksi saat tabel digulir ke samping. */
    background-color: var(--white, #fff);
    background-clip: padding-box;
    /* Setiap mod mengatur width:150 untuk kolom ini (konvensi lama), yang membuatnya
       terlalu lebar untuk isi yang cuma tombol titik-tiga/dropdown. Batasi di sini
       secara terpusat daripada mengubah width di setiap file mod satu per satu.
       box-sizing wajib border-box: tanpa ini padding bawaan DataTables (~20px kiri-kanan)
       ditambahkan DI LUAR width, membuat kolom tetap lebar walau width sudah dibatasi. */
    box-sizing: border-box !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center;
}

table.dataTable > thead > tr > th.sticky-action-col {
    z-index: 3;
}

table.dataTable > tbody > tr > td.sticky-action-col {
    z-index: 2;
}

/* Bayangan pemisah selalu tampil di kolom aksi (tidak lagi bergantung deteksi
   scroll JS — sempat false positive/negative saat hard refresh). Efek samping:
   tabel yang muat penuh (tidak overflow) tetap menampilkan bayangan tipis ini,
   sesuai permintaan agar perilakunya konsisten dan sederhana. */
table.dataTable > thead > tr > th.sticky-action-col,
table.dataTable > tbody > tr > td.sticky-action-col {
    box-shadow: -8px 0 12px -3px rgba(0, 0, 0, 0.35);
}