/* Base */
        html, body {
        height: auto !important;
        min-height: 100%;
        overflow-x: auto;
        margin: 0;
        padding: 0;
    }
    /* Ganti font khusus untuk brand */
.navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* bold */
    font-size: 1.4rem;
    color: #0d6efd !important; /* warna biru Bootstrap */
    letter-spacing: 1px; /* jarak antar huruf */
}

.navbar-brand:hover {
    color: #0a58ca !important; /* warna lebih gelap saat hover */
}
    /* default sidebar hidden */
    #sidebarMenu {
        display: none;
    }

    /* kalau active -> tampil */
    #sidebarMenu.active {
        display: block;
    }
    @media (max-width: 767.98px) {
    #sidebarOpen {
        display: none !important;
    }
    }
        /* Sidebar */
        #sidebarMenu {
            width: 260px;
            background-color: #ffffff;
            box-shadow: 2px 0 12px rgb(0 0 0 / 0.05);
            transition: transform 0.3s ease;
        }

        @media (max-width: 768px) {
            #sidebarMenu {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                transform: translateX(-100%);
                z-index: 1040;
                border-right: 1px solid #e0e6ed;
            }

            #sidebarMenu.active {
                transform: translateX(0);
            }

            .sidebar-close-btn {
                display: block;
                padding: 1rem 1.5rem;
                border-bottom: 1px solid #e0e6ed;
            }
        }

        .sidebar-close-btn {
            font-weight: 600;
            color: #495057;
        }
        .sidebar-close-btn button {
            border-radius: 0.375rem;
            border: 1px solid #adb5bd;
            color: #495057;
            background-color: #f8f9fa;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .sidebar-close-btn button:hover {
            background-color: #e9ecef;
            border-color: #868e96;
            color: #212529;
        }

        /* Hamburger button in navbar */
        .hamburger-btn {
            border: none;
            background: transparent;
            font-size: 1.6rem;
            margin-right: 1rem;
            color: #0d6efd; /* Bootstrap primary blue */
            transition: color 0.3s ease;
        }
        .hamburger-btn:hover {
            color: #0b5ed7;
            cursor: pointer;
        }

        /* Navbar */
        .navbar {
            background-color: #ffffff;
            box-shadow: 0 2px 6px rgb(13 110 253 / 0.1);
        }
        .navbar-brand {
            color: #0d6efd;
            font-weight: 700;
            font-size: 1.3rem;
            letter-spacing: 1px;
        }
        .navbar-brand:hover {
            color: #0b5ed7;
            text-decoration: none;
        }

        /* Sidebar menu links */
        .list-group-item {
            border: none;
            color: #495057;
            font-weight: 500;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .list-group-item i {
            color: #0d6efd;
            font-size: 1.2rem;
            margin-right: 0.75rem;
            vertical-align: middle;
        }
        .list-group-item:hover {
            background-color: #e7f1ff;
            color: #0d6efd;
        }
        .list-group-item.active {
            background-color: #0d6efd;
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0 2px 8px rgb(13 110 253 / 0.3);
        }

        /* Main content */
        main {
            min-height: auto !important;
            background-color: #f5f7fa;
            padding: 2rem;
        }
        .table th, .table td {
    padding: 0.55rem 0.65rem;
    vertical-align: middle;
}
        /* Table styling */
        .table {
            background-color: #fff;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 2px 6px rgb(0 0 0 / 0.05);

        }
        .table thead {
            background-color: #e9f0ff;
            color: #0d6efd;
            font-weight: 700;
            border-bottom: 2px solid #0d6efd;
        }
        .table-mutasi-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
        }

        .table tbody tr:hover {
            background-color: #f1f5ff;
            cursor: pointer;
        }
        .table th, .table td {
            vertical-align: middle;
            padding: 1rem 1.2rem;
        }

        /* Buttons */
        .btn {
            border-radius: 0.375rem;
            font-weight: 600;
            padding: 0.5rem 1.2rem;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        .btn-primary {
            background-color: #0d6efd;
            border: none;
            box-shadow: 0 2px 8px rgb(13 110 253 / 0.3);
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            box-shadow: 0 4px 14px rgb(11 94 215 / 0.5);
        }
        .btn-outline-secondary {
            color: #495057;
            border-color: #adb5bd;
        }
        .btn-outline-secondary:hover {
            background-color: #e2e6ea;
            border-color: #868e96;
            color: #212529;
        }
@media (min-width: 992px) {
    .custom-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed; /* supaya semua kolom proporsional */
    }

    .custom-table th:nth-child(1) { width: 16%; } /* Nama */
    .custom-table th:nth-child(2) { width: 15%; } /* Golongan */
    .custom-table th:nth-child(3) { width: 15%; } /* Ruangan */
    .custom-table th:nth-child(4) { width: 12%; } /* Kondisi */
    .custom-table th:nth-child(5) { width: 14%; } /* Tanggal */
    .custom-table th:nth-child(6) { width: 18%; } /* Aksi */

    /* Sel tabel agar teks turun ke bawah jika panjang */
    .custom-table td {
        white-space: normal !important; /* biar teks bisa wrap */
        word-wrap: break-word;
        word-break: break-word;
        text-overflow: unset !important;
        overflow: visible !important;
        vertical-align: middle;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    .custom-table td {
        white-space: normal !important;
        word-break: break-word;
        text-overflow: unset !important;
        overflow: visible !important;
    }
}
/* ==================================================
   Perbaikan: Bootstrap Select Styling
   (Mempertahankan Hover Hitam pada Tombol Utama)
================================================== */

/* 1. Toggle Button (Saat tertutup) */
.bootstrap-select .dropdown-toggle {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ced4da !important;
}

/* 2. Toggle Button (Saat di-hover - Sesuai Permintaan Anda) */
.bootstrap-select .dropdown-toggle:hover {
    background-color: #000000 !important; /* TETAP HITAM */
    color: #ffffff !important; /* Teks putih */
    border-color: #000000 !important;
}

/* 3. Toggle Button (Saat dibuka/aktif) */
.bootstrap-select.show .dropdown-toggle {
    background-color: #f8f9fa !important; /* Sedikit abu-abu saat terbuka */
    color: #0d6efd !important; /* Warna teks biru */
    border-color: #0d6efd !important;
}

/* 4. Item Dropdown Default (di dalam dropdown menu) */
.bootstrap-select .dropdown-menu.inner li a {
    color: #212529 !important;
    background-color: #ffffff !important;
    padding: 10px 15px;
}

/* 5. Item Dropdown saat di-HOVER atau di-FOKUS (dengan tombol panah) */
/* Menggunakan warna Biru Primer untuk tampilan profesional pada LIST ITEM */
.bootstrap-select .dropdown-menu.inner li a:hover,
.bootstrap-select .dropdown-menu.inner li a:focus,
.bootstrap-select .dropdown-menu.inner li.active a {
    color: #ffffff !important; /* Teks putih */
    background-color: #0d6efd !important; /* Background biru primer */
    outline: none !important;
}

/* 6. Item yang dipilih (sudah dipilih sebelumnya) */
.bootstrap-select .dropdown-menu.inner li.selected a {
    color: #ffffff !important;
    background-color: #0d6efd !important;
}