/* CSS Custom General Base  */
.modal-body {
    max-height: calc(100vh - 215px);
    overflow-y: auto;
}

/* sudut tombol lebih membulat */
.btn-bulat {
    border-radius: 10px;
}

/*
 * Chip pilihan (input.btn-check + label.btn-outline-*): Bootstrap 5.2 beta memberi .btn-check:focus+.btn
 * latar penuh, jadi chip yang baru di-uncheck tetap terlihat terpilih selama checkbox-nya fokus.
 * Yang belum dicentang dikembalikan ke tampilan outline; fokus keyboard cukup cincin outline.
 */
.btn-check:not(:checked):focus + .btn[class*="btn-outline-"]:not(:hover) {
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
    box-shadow: none;
}

/* Chip yang terpilih = warning (oranye) + centang, supaya tidak tertukar dengan warna hover (biru/gelap) */
.btn-check:checked + .btn[class*="btn-outline-"],
.btn-check:checked + .btn[class*="btn-outline-"]:hover,
.btn-check:checked + .btn[class*="btn-outline-"]:active {
    color: #001327;
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    box-shadow: none;
}

.btn-check:checked + .btn[class*="btn-outline-"]::before {
    content: "✓";
    margin-right: 5px;
    font-weight: 800;
}

.btn-check:focus-visible + .btn {
    outline: 2px solid #2ec4e6;
    outline-offset: 2px;
}

/* judul modal detail: judul + chip kode di sisi kanan (sebelum tombol tutup) */
.modal-title:has(.dt-kode) {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.dt-kode {
    margin-left: auto;
    margin-right: 12px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: #3c4b5f;
    background: #f3f4f7;
    padding: 4px 9px;
    border-radius: 6px;
}

/* Sembunyikan tombol gerigi & panel theme customizer Duralux (menutupi kolom aksi tabel) */
.theme-customizer {
    display: none !important;
}

/* teks di samping ikon feather dalam flex: secara optis terlihat ketinggian, turunkan 1px */
.teks-ikon {
    position: relative;
    top: 1px;
}