.new-topbar-user {
    background-color: var(--vz-topbar-user-bg);
}

.new-topbar-info {
    background-color: var(--vz-info-bg-subtle);
}


/* =========================================================
   TOPBAR LIGHT
   ========================================================= */


:root[data-topbar=light] {

    /* =====================================================
       TOPBAR
       ===================================================== */

    --vz-header-bg: #6C5CE7;

    --vz-header-item-color: rgba(255, 255, 255, 0.85);

    --vz-header-item-bg: rgba(255, 255, 255, 0.10);

    --vz-header-item-sub-color: rgba(255, 255, 255, 0.70);

    --vz-topbar-user-bg: rgba(255, 255, 255, 0.10);

    --vz-topbar-search-bg: rgba(255, 255, 255, 0.10);

    --vz-topbar-search-color: #ffffff;

    --vz-header-border: rgba(255, 255, 255, 0.10);

    --vz-topnav-item-active-color: #ffffff;

}


/* =========================================================
   LIGHT THEME
   ========================================================= */

:root[data-bs-theme=light] {

    /* -----------------------------------------------------
       BASE COLORS
       ----------------------------------------------------- */

    --vz-blue: #3577f1;
    --vz-indigo: #405189;

    /* Brand Purple */
    --vz-purple: #6C5CE7;

    --vz-pink: #f672a7;

    /* Danger tetap merah */
    --vz-red: #f06548;

    --vz-orange: #f1963b;
    --vz-yellow: #f7b84b;
    --vz-green: #0ab39c;
    --vz-teal: #02a8b5;
    --vz-cyan: #299cdb;

    --vz-white: #fff;
    --vz-gray: #878a99;
    --vz-gray-dark: #343a40;

    --vz-gray-100: #f3f6f9;
    --vz-gray-200: #eff2f7;
    --vz-gray-300: #e9ebec;
    --vz-gray-400: #ced4da;
    --vz-gray-500: #adb5bd;
    --vz-gray-600: #878a99;
    --vz-gray-700: #495057;
    --vz-gray-800: #343a40;
    --vz-gray-900: #212529;


    /* -----------------------------------------------------
       THEME COLORS
       ----------------------------------------------------- */

    /* PRIMARY = PURPLE */
    --vz-primary: #6C5CE7;

    /* SECONDARY sementara tetap bawaan */
    --vz-secondary: #3577f1;

    /* SUCCESS sementara tetap bawaan */
    --vz-success: #0ab39c;

    --vz-info: #299cdb;
    --vz-warning: #f7b84b;

    /* DANGER = RED */
    --vz-danger: #f06548;

    --vz-light: #f3f6f9;
    --vz-dark: #212529;


    /* -----------------------------------------------------
       RGB
       ----------------------------------------------------- */

    --vz-primary-rgb: 108, 92, 231;
    --vz-secondary-rgb: 53, 119, 241;
    --vz-success-rgb: 10, 179, 156;
    --vz-info-rgb: 41, 156, 219;
    --vz-warning-rgb: 247, 184, 75;
    --vz-danger-rgb: 240, 101, 72;
    --vz-light-rgb: 243, 246, 249;
    --vz-dark-rgb: 33, 37, 41;


    /* -----------------------------------------------------
       TEXT EMPHASIS
       ----------------------------------------------------- */

    --vz-primary-text-emphasis: #5848D6;
    --vz-secondary-text-emphasis: #2d65cd;
    --vz-success-text-emphasis: #099885;
    --vz-info-text-emphasis: #2385ba;
    --vz-warning-text-emphasis: #d29c40;
    --vz-danger-text-emphasis: #cc563d;
    --vz-light-text-emphasis: #ced4da;
    --vz-dark-text-emphasis: #343a40;


    /* -----------------------------------------------------
       BACKGROUND SUBTLE
       ----------------------------------------------------- */

    /* Soft Purple */
    --vz-primary-bg-subtle: #EFEDFF;

    --vz-secondary-bg-subtle: #e1ebfd;
    --vz-success-bg-subtle: #daf4f0;
    --vz-info-bg-subtle: #dff0fa;
    --vz-warning-bg-subtle: #fef4e4;
    --vz-danger-bg-subtle: #fde8e4;
    --vz-light-bg-subtle: #f9fbfc;
    --vz-dark-bg-subtle: #e9ebec;


    /* -----------------------------------------------------
       BORDER SUBTLE
       ----------------------------------------------------- */

    /* Soft Purple Border */
    --vz-primary-border-subtle: #C7C1F7;

    --vz-secondary-border-subtle: #aec9f9;
    --vz-success-border-subtle: #9de1d7;
    --vz-info-border-subtle: #a9d7f1;
    --vz-warning-border-subtle: #fce3b7;
    --vz-danger-border-subtle: #f9c1b6;
    --vz-light-border-subtle: #eff2f7;
    --vz-dark-border-subtle: #adb5bd;


    /* -----------------------------------------------------
       RGB BASE
       ----------------------------------------------------- */

    --vz-white-rgb: 255, 255, 255;
    --vz-black-rgb: 0, 0, 0;


    /* -----------------------------------------------------
       FONT
       ----------------------------------------------------- */

    --vz-font-sans-serif: "Poppins", sans-serif;

    --vz-font-monospace:
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    --vz-gradient:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0)
        );


    /* -----------------------------------------------------
       BODY
       ----------------------------------------------------- */

    --vz-body-font-family: var(--vz-font-sans-serif);
    --vz-body-font-size: 0.8125rem;
    --vz-body-font-weight: 400;
    --vz-body-line-height: 1.5;

    --vz-body-color: #212529;
    --vz-body-color-rgb: 33, 37, 41;

    --vz-body-bg: #f3f3f9;
    --vz-body-bg-rgb: 243, 243, 249;


    /* -----------------------------------------------------
       EMPHASIS / SECONDARY
       ----------------------------------------------------- */

    --vz-emphasis-color: #212529;
    --vz-emphasis-color-rgb: 33, 37, 41;

    --vz-secondary-color: #878a99;
    --vz-secondary-color-rgb: 135, 138, 153;

    --vz-secondary-bg: #fff;
    --vz-secondary-bg-rgb: 255, 255, 255;

    --vz-tertiary-color: rgba(33, 37, 41, 0.5);
    --vz-tertiary-color-rgb: 33, 37, 41;

    --vz-tertiary-bg: #eff2f7;
    --vz-tertiary-bg-rgb: 239, 242, 247;


    /* -----------------------------------------------------
       HEADING
       ----------------------------------------------------- */

    --vz-heading-color: #495057;


    /* -----------------------------------------------------
       LINK
       ----------------------------------------------------- */

    --vz-link-color: #6C5CE7;
    --vz-link-color-rgb: 108, 92, 231;

    --vz-link-decoration: none;

    --vz-link-hover-color: #5848D6;
    --vz-link-hover-color-rgb: 88, 72, 214;


    /* -----------------------------------------------------
       CODE / HIGHLIGHT
       ----------------------------------------------------- */

    --vz-code-color: #f672a7;
    --vz-highlight-bg: #fcf8e3;


    /* -----------------------------------------------------
       BORDER
       ----------------------------------------------------- */

    --vz-border-width: 1px;
    --vz-border-style: solid;

    --vz-border-color: #e9ebec;
    --vz-border-color-translucent: #ced4da;


    /* -----------------------------------------------------
       BORDER RADIUS
       ----------------------------------------------------- */

    --vz-border-radius: 0.25rem;
    --vz-border-radius-sm: 0.2rem;
    --vz-border-radius-lg: 0.3rem;
    --vz-border-radius-xl: 1rem;
    --vz-border-radius-xxl: 2rem;
    --vz-border-radius-2xl: var(--vz-border-radius-xxl);
    --vz-border-radius-pill: 50rem;


    /* -----------------------------------------------------
       SHADOW
       ----------------------------------------------------- */

    --vz-box-shadow:
        0 1px 2px rgba(56, 65, 74, 0.15);

    --vz-box-shadow-sm:
        0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    --vz-box-shadow-lg:
        0 5px 10px rgba(30, 32, 37, 0.12);

    --vz-box-shadow-inset:
        inset 0 1px 2px rgba(0, 0, 0, 0.075);


    /* -----------------------------------------------------
       FOCUS
       ----------------------------------------------------- */

    --vz-focus-ring-width: 0.25rem;
    --vz-focus-ring-opacity: 0.25;

    --vz-focus-ring-color:
        rgba(var(--vz-primary-rgb), 0.25);


    /* -----------------------------------------------------
       FORM VALIDATION
       ----------------------------------------------------- */

    --vz-form-valid-color: #0ab39c;
    --vz-form-valid-border-color: #0ab39c;

    --vz-form-invalid-color: #f06548;
    --vz-form-invalid-border-color: #f06548;


    /* =====================================================
       PAGINATION
       ===================================================== */

    .pagination {

        --vz-pagination-padding-x: 0.75rem;
        --vz-pagination-padding-y: 0.375rem;
        --vz-pagination-font-size: 0.8125rem;

        /* Link sekarang Purple */
        --vz-pagination-color: var(--vz-link-color);

        --vz-pagination-bg: var(--vz-secondary-bg);

        --vz-pagination-border-width: var(--vz-border-width);
        --vz-pagination-border-color: var(--vz-border-color);
        --vz-pagination-border-radius: var(--vz-border-radius);

        --vz-pagination-hover-color: var(--vz-link-hover-color);
        --vz-pagination-hover-bg: var(--vz-tertiary-bg);
        --vz-pagination-hover-border-color: var(--vz-border-color);

        --vz-pagination-focus-color: var(--vz-link-hover-color);
        --vz-pagination-focus-bg: var(--vz-tertiary-bg);

        --vz-pagination-focus-box-shadow:
            0 0 1px 0.25rem rgba(var(--vz-primary-rgb), 0.25);

        /* Active = Purple */
        --vz-pagination-active-color: #fff;
        --vz-pagination-active-bg: #6C5CE7;
        --vz-pagination-active-border-color: #6C5CE7;

        --vz-pagination-disabled-color: var(--vz-secondary-color);
        --vz-pagination-disabled-bg: var(--vz-secondary-bg);
        --vz-pagination-disabled-border-color: var(--vz-border-color);

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        padding-left: 0;
        list-style: none;
    }


    /* =====================================================
       FORM SWITCH PRIMARY
       ===================================================== */

    .form-switch-primary .form-check-input:checked {
        background-color: #6C5CE7;
        border-color: #6C5CE7;
    }


    /* =====================================================
       CUSTOM FORM SWITCH PRIMARY
       ===================================================== */

    .form-switch-custom.form-switch-primary
    .form-check-input:checked::before {
        color: #6C5CE7;
    }


    /* =====================================================
       FORM CHECKED
       ===================================================== */

    .form-check-input:checked {
        background-color: #6C5CE7;
        border-color: #6C5CE7;
    }

}

/* =========================================================
   SIDEBAR - PURPLE + WARM CREAM
   ========================================================= */

:root[data-sidebar="light"] {
    --vz-vertical-menu-bg: #FFFBEA;
    --vz-vertical-menu-border: #F3EFCF;

    --vz-vertical-menu-item-color: #5F5B72;
    --vz-vertical-menu-item-hover-color: #6C5CE7;
    --vz-vertical-menu-item-active-color: #6C5CE7;

    --vz-vertical-menu-sub-item-color: #6F6B7D;
    --vz-vertical-menu-sub-item-hover-color: #6C5CE7;
    --vz-vertical-menu-sub-item-active-color: #6C5CE7;

    --vz-vertical-menu-title-color: #8B8798;
}


/* =========================================================
   SIDEBAR BACKGROUND
   ========================================================= */

[data-sidebar="light"] .navbar-menu,
[data-sidebar="light"] .vertical-menu {
    background: #faf8ee !important;
}


/* =========================================================
   MENU NORMAL
   ========================================================= */

[data-sidebar="light"] .navbar-nav .nav-link {
    color: #5F5B72;
    border-radius: 6px;
    margin: 2px 12px;
    transition: all 0.2s ease;
}


/* =========================================================
   ICON NORMAL
   ========================================================= */

[data-sidebar="light"] .navbar-nav .nav-link i {
    color: #6F6B7D;
    transition: color 0.2s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

[data-sidebar="light"] .navbar-nav .nav-link:hover {
    color: #6C5CE7 !important;
    background-color: #F8F5FF !important;
}

[data-sidebar="light"] .navbar-nav .nav-link:hover i {
    color: #6C5CE7 !important;
}


/* =========================================================
   ACTIVE
   ========================================================= */

[data-sidebar="light"] .navbar-nav .nav-link.active {
    color: #6C5CE7 !important;
    background-color: #F3EFFF !important;
    font-weight: 600;
}


/* =========================================================
   ACTIVE ICON
   ========================================================= */

[data-sidebar="light"] .navbar-nav .nav-link.active i {
    color: #6C5CE7 !important;
}


/* =========================================================
   MENU TITLE
   ========================================================= */

[data-sidebar="light"] .navbar-nav .menu-title {
    color: #8B8798 !important;
}


/* =========================================================
   SUB MENU
   ========================================================= */

[data-sidebar="light"] .navbar-nav .sub-menu .nav-link.active {
    background-color: transparent !important;
    color: #6C5CE7 !important;
}

[data-sidebar="light"] .navbar-nav .sub-menu .nav-link.active i {
    color: #6C5CE7 !important;
}

/* buat collapsing */

.card-body[class~="collapsing"] {
    padding: 0 var(--vz-card-spacer-x);
}

.dropdown-menu-xxl {
    width: 600px
}

.select2-results__option[aria-selected=true] {
    background-color: #b9d5df !important;
}