[data-bs-theme="dark"] body {
    background-color: #212529;
    color: #e9ecef;
}
[data-bs-theme="dark"] .logo-icon{
    width:62px;
    height:62px;
    border-radius:20px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(12px);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    flex-shrink:0;
}
[data-bs-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #343a40 0%, #212529 35%, #000000 100%);
    color:#e9ecef;
}
[data-bs-theme="dark"] .menu-title {
    color: #e9ecef;
}
[data-bs-theme="dark"] .sidebar-menu{
    color: #343a40;
}
[data-bs-theme="dark"] .sidebar-menu a{
    color: #e9ecef;
}
[data-bs-theme="dark"] .sidebar-menu a.active{
    background: #22bab1;
}
[data-bs-theme="dark"] .sidebar-menu a.active::before{
    background: #22bab1;
}
[data-bs-theme="dark"] .top-navbar{
    background:#343a40;
}
[data-bs-theme="dark"] .menu-toggle{
    background:#343a40;
    color: #22bab1;
}
[data-bs-theme="dark"] .menu-toggle:hover{
    background:#343a40;
    color: #e9ecef;
}

[data-bs-theme="dark"] .nav-btn{
    background:#212529;
    color:#e9ecef;
}
[data-bs-theme="dark"] .nav-btn:hover{
    background:#212529;
    color:#e9ecef;
}
[data-bs-theme="dark"] .profile-btn{
    background:#212529;
    color:#e9ecef;
}
[data-bs-theme="dark"] .profile-btn:hover{
    background:#212529;
    color:#e9ecef;
}
[data-bs-theme="dark"] .profile-info span{
    color:#e9ecef;
}
[data-bs-theme="dark"] .profile-info small{
    color:#e9ecef;
}
.profile-btn>.bi{
    color:#e9ecef;
}
[data-bs-theme="dark"] .profile-menu{
    background:#343a40;
}
[data-bs-theme="dark"] .profile-menu a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 20px;
    color:#22bab1;
    transition:.25s;
    font-size:14px;
}
[data-bs-theme="dark"] .profile-menu a:hover{
    background:#212529;
    color: #e9ecef;
    padding-left:26px;
}
[data-bs-theme="dark"] .carousel-item::before{
    background: linear-gradient(90deg, rgba(17,24,39,.80) 0%, rgba(17,24,39,.55) 35%, rgba(17,24,39,.15) 70%, transparent 100%);
}

[data-bs-theme="dark"] .carousel-caption-custom p{
    color:#e9ecef;
}

[data-bs-theme="dark"] .card-qr{
    background:#212529;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}
[data-bs-theme="dark"] .card-qr:hover{
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}
/* Container QR Code */
[data-bs-theme="dark"] .qr-wrapper {
    background-color: #212529;
    border: 1px dashed #212529;
}
/* Custom Option Card di dalam Modal */
[data-bs-theme="dark"] .download-option-card {
    background-color: #212529;
}

[data-bs-theme="dark"] .download-option-card:hover {
    border-color: #e9ecef !important;
    background-color: #212529;
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}
[data-bs-theme="dark"] .judulqr{
    color:#e9ecef;
}

[data-bs-theme="dark"] .info-card{
    background:#212529;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}
[data-bs-theme="dark"] .info-card:hover{
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}
[data-bs-theme="dark"] .info-title{
    color: #e9ecef;
}
[data-bs-theme="dark"] .info-content h5{
    margin:0;
    color:#e9ecef;
}

[data-bs-theme="dark"] .dashboard-card{
    background:#212529;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
}
[data-bs-theme="dark"] .dashboard-card:hover{
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}


[data-bs-theme="dark"] .favorite-btn{
    background:#212529;
    color: #e9ecef;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}
[data-bs-theme="dark"] .favorite-btn:hover{
    color:#ffc107;
    transform:rotate(15deg);
}
[data-bs-theme="dark"] .btn-dashboard:hover{
    transform:translateY(-3px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}
[data-bs-theme="dark"]  .footer-content{
    background-color: #343a40;
    text-decoration: none;
}
/* =====================================================
   BAGIAN PORTAL
===================================================== */

[data-bs-theme="dark"] .search-box{
    background:#212529;
}
/* Focus */
[data-bs-theme="dark"] .search-box:focus-within{
    background:#343a40;
    border-color:rgba(255,255,255,.35);
    box-shadow:
            0 0 0 4px rgba(255,255,255,.12);
}
/* Icon */
[data-bs-theme="dark"] .search-box i{
    color:#e9ecef;
}
/* Input */
[data-bs-theme="dark"] .search-box input{
    color:#e9ecef;
}
[data-bs-theme="dark"] .search-box input::placeholder{
    color:#aaaaaa;
}
[data-bs-theme="dark"] .view-toggle{
    background:#343a40;
}
[data-bs-theme="dark"] .view-toggle button{
    width:40px;
    height:36px;
    border:none;
    background:transparent;
    color:#e9ecef;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s ease;
}
[data-bs-theme="dark"] .view-toggle button:hover{
    color:#22bab0;
}
[data-bs-theme="dark"] .view-toggle button.active{
    background:#22bab0;
    color:#e9ecef;
    box-shadow: 0 4px 12px rgba(34,186,176,.25);
}
/* ========== CARD KONTEN ========== */
[data-bs-theme="dark"] .card-content{
    background:#212529;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Border putih tipis transparan */
    box-shadow: 0 5px 18px rgba(255, 255, 255, 0.04); /* Shadow putih halus */
}



/*[data-bs-theme="dark"] .table-action-btn {
    background: #2b3035;
    border-color: #495057;
    color: #fff;
}
**/

[data-bs-theme="dark"] .table-action-menu {
    background: #2b3035;

    border-color: #495057;

}
[data-bs-theme="dark"] .table-action-item:hover {
    background: #495057;
    border-radius: 12px;
}

[data-bs-theme="dark"] .portal-link-card {
    background: #212529;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 5px 20px rgba(255, 255, 255, .05);
}
[data-bs-theme="dark"] .portal-link-card:hover {
    box-shadow: 0 5px 20px rgba(255, 255, 255, .25);
}

/* =====================================================
   WARNA SUBTLE DARK CAROUSAL
===================================================== */

[data-bs-theme="dark"] .bg-purple-soft {
    background-color: #1e1b29 !important;
    color: #d6bcfa !important; /* Ungu pastel cerah */
}
[data-bs-theme="dark"] .bg-safir-soft {
    background-color: #171d2c !important;
    color: #93c5fd !important; /* Biru safir cerah */
}
[data-bs-theme="dark"] .bg-zamrud-soft {
    background-color: #122019 !important;
    color: #6ee7b7 !important; /* Hijau zamrud cerah */
}
[data-bs-theme="dark"] .bg-ruby-soft {
    background-color: #241414 !important;
    color: #fca5a5 !important; /* Merah ruby cerah */
}
[data-bs-theme="dark"] .bg-amber-soft {
    background-color: #241d11 !important;
    color: #fcd34d !important; /* Kuning amber cerah */
}
[data-bs-theme="dark"] .bg-sian-soft {
    background-color: #11211f !important;
    color: #67e8f9 !important; /* Sian cerah */
}
[data-bs-theme="dark"] .bg-arang-soft {
    background-color: #1e293b !important;
    color: #cbd5e1 !important; /* Abu-abu arang cerah */
}
[data-bs-theme="dark"] .bg-salmon-soft {
    background-color: #261517 !important;
    color: #fda4af !important; /* Salmon cerah */
}
[data-bs-theme="dark"] .bg-violet-soft {
    background-color: #1b182b !important;
    color: #c084fc !important; /* Violet cerah */
}
[data-bs-theme="dark"] .bg-jingga-soft {
    background-color: #241912 !important;
    color: #fed7aa !important; /* Oranye jingga cerah */
}
[data-bs-theme="dark"] .bg-zaitun-soft {
    background-color: #192011 !important;
    color: #d9f99d !important; /* Hijau zaitun cerah */
}
[data-bs-theme="dark"] .bg-sakura-soft {
    background-color: #24131b !important;
    color: #fbcfe8 !important; /* Pink sakura cerah */
}
[data-bs-theme="dark"] .bg-kopi-soft {
    background-color: #1f1813 !important;
    color: #ddbfab !important; /* Cokelat kopi cerah */
}
[data-bs-theme="dark"] .bg-perak-soft {
    background-color: #334155 !important;
    color: #f1f5f9 !important; /* Perak/putih abu cerah */
}
[data-bs-theme="dark"] .bg-flaminggo-soft {
    background-color: #261416 !important;
    color: #fecdd3 !important; /* Flamingo cerah */
}