/* ——— Reset warna link di navbar backend ——— */
.backend-nav .navbar-brand,
.backend-nav .navbar-nav .nav-link,
.backend-nav .nav-link,
.backend-nav a:not(.btn),
.backend-nav .dropdown-item,
.backend-nav .fa,
.backend-nav .navbar-globe {
    color: #111 !important;
    /* hitam */
}

/* aktif/hover tetap hitam (tanpa teal) */
.backend-nav .navbar-nav .nav-link:hover,
.backend-nav .navbar-nav .nav-link:focus,
.backend-nav .navbar-nav .nav-link.active,
.backend-nav .navbar-nav .show>.nav-link,
.backend-nav .dropdown-item:hover,
.backend-nav .dropdown-item:focus {
    color: #111 !important;
    background: rgba(0, 0, 0, .04) !important;
}

/* kalau ada utility .text-primary yang kebawa */
.backend-nav .text-primary {
    color: #111 !important;
}

/* ===== Sidebar backend: paksa teks menu hitam ===== */
.sidebarNavigation .navbar-brand,
.sidebarNavigation .nav-left-sidebar .nav-link,
.sidebarNavigation .nav-left-sidebar .nav-link i,
.sidebarNavigation .dropdown-item,
.sidebarNavigation .nav-divider,
.sidebarNavigation .fa,
.sidebarNavigation .fas {
    color: #111 !important;
    /* hitam */
}

/* hover/active tetap gelap, bukan teal */
.sidebarNavigation .nav-left-sidebar .nav-link:hover,
.sidebarNavigation .nav-left-sidebar .nav-link:focus,
.sidebarNavigation .nav-left-sidebar .nav-link.active,
.sidebarNavigation .nav-left-sidebar .show>.nav-link,
.sidebarNavigation .dropdown-item:hover,
.sidebarNavigation .dropdown-item:focus {
    color: #111 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: .35rem;
}

/* kalau ada utility yang kebawa dari tema teal */
.sidebarNavigation .text-primary {
    color: #111 !important;
}

/* kalau judul/label pakai .bg-primary di sidebar, netralkan di sini saja */
.sidebarNavigation .bg-primary {
    background-color: #111 !important;
    color: #fff !important;
}

/* ===== Vars */
:root {
    --teal: #5cb8b2;
    --teal-dark: #4aa19c;
}

/* ====== TOP NAV (backend) ====== */
.backend-nav .navbar-brand,
.backend-nav .navbar-nav .nav-link,
.backend-nav a:not(.btn),
.backend-nav .dropdown-item,
.backend-nav .fa,
.backend-nav .fas {
    color: #111 !important;
}

.backend-nav .navbar-nav .nav-link,
.backend-nav .dropdown-item {
    transition: background-color .15s ease, color .15s ease;
}

/* hover/active -> teal bg + white text */
.backend-nav .navbar-nav .nav-link:hover,
.backend-nav .navbar-nav .nav-link:focus,
.backend-nav .navbar-nav .nav-link.active,
.backend-nav .navbar-nav .show>.nav-link {
    background: var(--teal) !important;
    color: #fff !important;
    border-radius: .35rem;
}

.backend-nav .navbar-nav .nav-link:hover i,
.backend-nav .navbar-nav .nav-link:focus i,
.backend-nav .navbar-nav .nav-link.active i,
.backend-nav .dropdown-item:hover i {
    color: #fff !important;
}

/* dropdowns (profile/notification/lang) */
.backend-nav .dropdown-menu {
    background: #fff !important;
    border-color: #e5e7eb !important;
}

.backend-nav .dropdown-item {
    background: transparent !important;
    color: #111 !important;
}

.backend-nav .dropdown-item:hover,
.backend-nav .dropdown-item:focus {
    background: var(--teal) !important;
    color: #fff !important;
}

/* ====== SIDEBAR ====== */
.sidebarNavigation .nav-left-sidebar .nav-link,
.sidebarNavigation .nav-left-sidebar .nav-link i,
.sidebarNavigation .nav-divider {
    color: #111 !important;
}

.sidebarNavigation .nav-left-sidebar .nav-link {
    transition: background-color .15s ease, color .15s ease;
    border-radius: .35rem;
}

/* hover/active -> teal bg + white text */
.sidebarNavigation .nav-left-sidebar .nav-link:hover,
.sidebarNavigation .nav-left-sidebar .nav-link:focus,
.sidebarNavigation .nav-left-sidebar .nav-link.active,
.sidebarNavigation .nav-left-sidebar .show>.nav-link {
    background: var(--teal) !important;
    color: #fff !important;
}

.sidebarNavigation .nav-left-sidebar .nav-link:hover i,
.sidebarNavigation .nav-left-sidebar .nav-link.active i {
    color: #fff !important;
}

/* submenu item hover */
.sidebarNavigation .submenu .nav-link:hover,
.sidebarNavigation .submenu .nav-link:focus {
    background: var(--teal) !important;
    color: #fff !important;
}

/* state :active sedikit lebih gelap */
.backend-nav .navbar-nav .nav-link:active,
.sidebarNavigation .nav-left-sidebar .nav-link:active {
    background: var(--teal-dark) !important;
}

/* netralisir utilitas teal yg mungkin kebawa */
.backend-nav .text-primary,
.sidebarNavigation .text-primary {
    color: #111 !important;
}

/* biarkan btn-primary (To Do) tetap pakai tema */

/* === Cancel buttons: force white text for .btn-secondary (all states) === */

/* Bootstrap 5 variables (kalau BS5 aktif) */
.btn-secondary {
    --bs-btn-color: #fff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-disabled-color: #fff !important;
}

/* High-specificity untuk button/anchor + class .btn-space */
.btn.btn-secondary,
a.btn.btn-secondary,
.btn.btn-space.btn-secondary,
a.btn.btn-space.btn-secondary {
    color: #fff !important;
    text-decoration: none !important;
}

/* Pastikan isi di dalam tombol juga putih (ikon/span/strong) */
.btn-secondary *,
.btn-space.btn-secondary *,
.btn-secondary i,
.btn-secondary span,
.btn-secondary strong {
    color: #fff !important;
}

/* Saat hover/focus/active tetap putih */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn.btn-space.btn-secondary:hover,
.btn.btn-space.btn-secondary:focus,
.btn.btn-space.btn-secondary:active {
    color: #fff !important;
}

/* Kalau ada class ‘text-primary’ nempel, tetap putih */
.btn-secondary.text-primary,
.btn-secondary .text-primary {
    color: #fff !important;
}

/* —— ukuran header backend yang wajar */
/* :root {
    --admin-nav-h: 0px;
} */

/* ubah ke 72/80 kalau diperlukan */

/* kompres padding header (override p-3) */
.backend-nav {
    padding-top: .15rem !important;
    padding-bottom: .15rem !important;
}

/* samakan tinggi minimal dan center align */
.backend-nav>.container,
.backend-nav .dashboard-header,
.backend-nav .navbar {
    min-height: var(--admin-nav-h);
    align-items: center !important;
}

/* kecilkan logo agar tidak mendorong tinggi nav */
.backend-nav .navbar-brand img.logo {
    max-height: 38px;
    height: auto;
}

/* Sembunyikan bar .navbar-other di layar besar (itu untuk mobile) */
@media (min-width: 992px) {
    .backend-nav .navbar-other {
        display: none !important;
    }
}

/* Dorong konten turun supaya tidak “ketiban” header */
.container-fluid.dashboard-content,
.dashboard-content,
.page-header,
.page-breadcrumb {
    margin-top: calc(var(--admin-nav-h) + 8px) !important;
}

/* jaga layer di atas */
.backend-nav {
    z-index: 1030;
}

/* ==== BTN SUCCESS: teks putih + bold di semua state ==== */
/* Bootstrap 5 vars (jika BS5) */
.btn-success {
    --bs-btn-color: #fff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-disabled-color: #fff !important;
}

/* High specificity utk anchor/button + isi di dalamnya */
.btn.btn-success,
a.btn.btn-success,
button.btn.btn-success {
    color: #fff !important;
    font-weight: 600 !important;
    /* semi-bold; ganti 700 jika mau lebih tebal */
    text-decoration: none !important;
}

.btn-success *,
.btn-success i,
.btn-success span,
.btn-success strong {
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: #fff !important;
}

/* outline success saat hover juga putih */
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    color: #fff !important;
}

/* === Dashboard summary: ganti ungu → teal === */
:root {
    --teal: #5cb8b2;
    --teal-dark: #4aa19c;
}

/* warna ikon default */
.header-summery .card .icon i,
.header-summery .card .icon .fa,
.header-summery .card .icon .fas,
.header-summery .total-card-color .icon i {
    color: var(--teal) !important;
}

/* garis atas card (class: border-top-primary) ikut teal */
.header-summery .border-top-primary {
    border-top-color: var(--teal) !important;
}

/* HOVER: bayangan & warna ikon sedikit lebih gelap */
.header-summery .card:hover {
    border-color: var(--teal) !important;
    box-shadow: 0 8px 20px rgba(92, 184, 178, .15);
}

.header-summery .card:hover .icon i,
.header-summery .card:hover .icon .fa,
.header-summery .card:hover .icon .fas {
    color: var(--teal-dark) !important;
}

/* kalau ada text-primary yang masih ungu di dalam card, paksa jadi teal */
.header-summery .text-primary {
    color: var(--teal) !important;
}

/* === BACKEND SIDEBAR – DARK + TEAL, NO PURPLE === */
/* scope: hanya berlaku ketika <body class="backend"> */

.backend .offcanvas,
.backend .sidebar,
.backend .sidebar-nav {
    background: #0f1620 !important;
    /* hitam kebiruan */
    color: #fff !important;
}

/* link/menu item */
.backend .sidebar a,
.backend .sidebar .nav-link,
.backend .offcanvas .nav-link,
.backend .metismenu a,
.backend .sidebar .list-group-item {
    color: #eaf5f4 !important;
    background: transparent !important;
    border: 0 !important;
    padding: .7rem 1rem;
    border-radius: .6rem;
    transition: background .15s ease, color .15s ease;
}

/* ikon ikut warna teks */
.backend .sidebar i,
.backend .sidebar svg {
    color: currentColor !important;
    opacity: .92;
}

/* hover/focus: TEAL lembut (bukan ungu) */
.backend .sidebar a:hover,
.backend .sidebar .nav-link:hover,
.backend .offcanvas .nav-link:hover,
.backend .metismenu a:hover,
.backend .metismenu .mm-collapse a:hover {
    background: rgba(87, 183, 176, .18) !important;
    /* #57b7b0 @ 18% */
    color: #fff !important;
}

/* ACTIVE state (MetisMenu/Bootstrap) */
.backend .sidebar .active,
.backend .offcanvas .nav-link.active,
.backend .metismenu .mm-active>a,
.backend .metismenu .mm-active>a:focus,
.backend .metismenu .mm-active>a:hover {
    background: rgba(87, 183, 176, .26) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #57b7b0;
    /* aksen kiri */
    border-radius: .6rem;
}

/* hapus tema ungu bawaan jika ada */
.backend .bg-purple,
.backend .bg-violet,
.backend .nav-link.bg-primary,
.backend .list-group-item.active.bg-primary {
    background: transparent !important;
}

/* pembatas & tombol close */
.backend .offcanvas hr {
    border-color: rgba(255, 255, 255, .14) !important;
}

.backend .offcanvas .btn-close {
    filter: invert(1) opacity(.9);
}

/* sub-menu (metismenu) garis penghubung lebih halus */
.backend .metismenu .mm-collapse {
    border-left: 2px solid rgba(87, 183, 176, .25);
    margin-left: .6rem;
    padding-left: .4rem;
}

/* ============== RESPONSIVE FIX: sidebar backend ============== */
/* Mobile (≤ 991.98px): offcanvas gelap, teks putih */
@media (max-width: 991.98px) {

    .sidebarNavigation .offcanvas,
    .sidebarNavigation .navbar-collapse,
    .sidebarNavigation .nav-left-sidebar {
        background: #0f1620 !important;
        color: #fff !important;
    }

    .sidebarNavigation .nav-left-sidebar .nav-link,
    .sidebarNavigation .nav-left-sidebar .dropdown-item,
    .sidebarNavigation .nav-left-sidebar .nav-link i {
        color: #fff !important;
    }

    .sidebarNavigation .nav-left-sidebar .nav-link:hover,
    .sidebarNavigation .nav-left-sidebar .nav-link:focus,
    .sidebarNavigation .nav-left-sidebar .nav-link.active,
    .sidebarNavigation .submenu .nav-link:hover {
        background: rgba(87, 183, 176, .22) !important;
        color: #fff !important;
        border-radius: .5rem;
    }

    .sidebarNavigation .nav-left-sidebar .nav-link.active {
        box-shadow: inset 3px 0 0 #57b7b0;
    }
}

/* Desktop (≥ 992px): sidebar normal putih, teks hitam */
@media (min-width: 992px) {

    .sidebarNavigation .navbar-collapse,
    .sidebarNavigation .nav-left-sidebar {
        background: #fff !important;
        color: #111 !important;
    }

    .sidebarNavigation .nav-left-sidebar .nav-link,
    .sidebarNavigation .nav-left-sidebar .dropdown-item,
    .sidebarNavigation .nav-left-sidebar .nav-link i,
    .sidebarNavigation .nav-divider {
        color: #111 !important;
        background: transparent !important;
    }

    /* hover/active tetap teal lembut di atas putih */
    .sidebarNavigation .nav-left-sidebar .nav-link:hover,
    .sidebarNavigation .nav-left-sidebar .nav-link:focus,
    .sidebarNavigation .nav-left-sidebar .nav-link.active,
    .sidebarNavigation .nav-left-sidebar .show>.nav-link {
        background: rgba(87, 183, 176, .14) !important;
        color: #0f1620 !important;
        border-radius: .5rem;
    }

    .sidebarNavigation .nav-left-sidebar .nav-link.active {
        box-shadow: inset 3px 0 0 #57b7b0;
    }
}

/* ===== Language label di sidebar (MOBILE) -> putih ===== */
@media (max-width: 991.98px) {

    /* tombol/label "English" (dropdown toggle) */
    .sidebarNavigation .lang-dropdown .dropdown-toggle,
    .sidebarNavigation .lang-dropdown .nav-link {
        color: #fff !important;
    }

    /* ikon/caret ikut putih */
    .sidebarNavigation .lang-dropdown .dropdown-toggle i,
    .sidebarNavigation .lang-dropdown .dropdown-toggle svg {
        color: #fff !important;
    }

    .sidebarNavigation .lang-dropdown .dropdown-toggle::after {
        /* caret bawaan bootstrap pakai currentColor */
        color: #fff !important;
        border-top-color: currentColor !important;
    }
}

/* ===== DESKTOP: ikon sidebar harus gelap (bukan putih) ===== */
@media (min-width: 992px) {

    /* default: ikon hitam di sidebar */
    .sidebarNavigation .nav-left-sidebar .nav-link i,
    .sidebarNavigation .nav-left-sidebar .submenu .nav-link i,
    .sidebarNavigation .fa,
    .sidebarNavigation .fas {
        color: #111 !important;
        opacity: .9;
        transition: color .15s ease;
    }

    /* saat hover/active: samakan dengan warna teks hover (gelap) */
    .sidebarNavigation .nav-left-sidebar .nav-link:hover i,
    .sidebarNavigation .nav-left-sidebar .nav-link.active i,
    .sidebarNavigation .submenu .nav-link:hover i {
        color: #0f1620 !important;
        /* atau #57b7b0 kalau mau ikut teal */
    }
}