:root {
    --accent: #c9a329;
    --bg: #000000; /* page background */
    --panel: #161616; /* lighter black for header/sidebar */
    --panel2: #1f1f1f; /* hover/active slightly lighter */
    --text: #f2f2f2;
}

/* Page base */
body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* =========================
   TOP HEADER BAR
   ========================= */
#page-topbar,
#page-topbar .navbar-header,
.header-item,
.navbar-brand-box {
    background: var(--panel) !important;
}

#page-topbar {
    border-bottom: 1px solid var(--accent) !important;
}

    /* header icons + user name */
    #page-topbar .header-item,
    #page-topbar .header-item i,
    #page-topbar .noti-icon i,
    #page-topbar .settings-icon,
    #page-topbar .fw-medium {
        color: var(--accent) !important;
    }

    /* dropdown menu in header (Sign out menu) */
    #page-topbar .dropdown-menu {
        background: var(--bg) !important;
        border: 1px solid var(--accent) !important;
        border-radius: 0 !important;
    }

        #page-topbar .dropdown-menu .dropdown-item {
            color: var(--accent) !important;
            background: var(--bg) !important;
        }

            #page-topbar .dropdown-menu .dropdown-item:hover {
                background: var(--panel2) !important;
            }

/* =========================
   LEFT SIDEBAR
   ========================= */
.vertical-menu,
.vertical-menu .navbar-brand-box {
    background: var(--panel) !important;
    border-right: 1px solid var(--accent) !important;
}

/* “Menu” title */
#sidebar-menu .menu-title {
    color: var(--accent) !important;
    letter-spacing: .05em;
}

/* All links + icons in sidebar */
#sidebar-menu ul li a,
#sidebar-menu ul li a span,
#sidebar-menu ul li a i {
    color: var(--accent) !important;
}

    /* Hover state */
    #sidebar-menu ul li a:hover,
    #sidebar-menu ul li a:hover i {
        background: var(--panel2) !important;
        color: var(--accent) !important;
    }

/* Active state (MetisMenu uses .mm-active) */
#sidebar-menu .mm-active > a,
#sidebar-menu .mm-active > a i,
#sidebar-menu .mm-active > a span {
    background: var(--panel2) !important;
    color: var(--accent) !important;
}

/* Remove any “blue badge” visuals if you don’t want them */
#sidebar-menu .badge.bg-primary {
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    color: var(--accent) !important;
}

/* =========================
   MAIN CONTENT BACKDROP
   ========================= */
.main-content,
.page-content,
.container-fluid {
    background: var(--bg) !important;
}
/* Gold buttons inside tables should use black text */
.table .btn,
.table .badge,
.table .pill,
.table button {
    color: #000 !important;
}
/* ===============================
   BOOTSTRAP-SELECT (top dropdown)
   =============================== */

/* Closed select button */
.bootstrap-select .dropdown-toggle {
    background-color: #000 !important;
    color: #c9a329 !important;
    border: 1px solid #c9a329 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    /* Arrow */
    .bootstrap-select .dropdown-toggle::after {
        border-top-color: #c9a329 !important;
    }

    /* Hover / focus / open */
    .bootstrap-select .dropdown-toggle:hover,
    .bootstrap-select .dropdown-toggle:focus,
    .bootstrap-select.show > .dropdown-toggle {
        background-color: #000 !important;
        color: #c9a329 !important;
        border-color: #c9a329 !important;
        box-shadow: none !important;
    }

/* Dropdown menu container */
.bootstrap-select .dropdown-menu {
    background-color: #000 !important;
    border: 1px solid #c9a329 !important;
    border-radius: 0 !important;
}

    /* Dropdown items */
    .bootstrap-select .dropdown-menu .dropdown-item {
        background-color: #000 !important;
        color: #c9a329 !important;
    }

        /* Hover item */
        .bootstrap-select .dropdown-menu .dropdown-item:hover,
        .bootstrap-select .dropdown-menu .dropdown-item:focus {
            background-color: #161616 !important;
            color: #c9a329 !important;
        }

        /* Selected item */
        .bootstrap-select .dropdown-menu .dropdown-item.active,
        .bootstrap-select .dropdown-menu .dropdown-item.selected {
            background-color: #c9a329 !important;
            color: #000 !important;
        }

/* Search box inside bootstrap-select (if enabled) */
.bootstrap-select .bs-searchbox input {
    background-color: #000 !important;
    color: #c9a329 !important;
    border: 1px solid #c9a329 !important;
    box-shadow: none !important;
}

    /* Placeholder text */
    .bootstrap-select .bs-searchbox input::placeholder {
        color: #f2f2f2 !important;
        opacity: 0.7;
    }
.vertical-menu .navbar-brand-box {
    border-right: 0 !important;
}
:root {
    --accent: #c9a329;
    --bg: #000;
}

/* ===============================
   SELECT2 MULTI-SELECTION CHIPS
   =============================== */

/* The container holding selected items */
.select2-container--default .select2-selection--multiple {
    background-color: var(--bg) !important;
    border: 1px solid var(--accent) !important;
}

    /* Each selected item (the “pill”) */
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
        background-color: var(--accent) !important; /* gold background */
        border: 1px solid var(--accent) !important;
        color: var(--accent) !important; /* gold text */
        font-weight: 600;
        border-radius: 0 !important;
    }

    /* Remove (x) button */
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
        color: var(--accent) !important;
        margin-right: 6px;
        font-weight: 700;
    }

        /* Hover on remove (x) */
        .select2-container--default
        .select2-selection--multiple
        .select2-selection__choice__remove:hover {
            color: #000 !important;
            background: transparent !important;
        }

:root {
    --accent: #c9a329;
    --bg: #000;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--bg) !important; /* black chip */
    border: 1px solid var(--accent) !important;
    color: var(--accent) !important; /* gold text */
    font-weight: 600;
    border-radius: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--accent) !important;
}

:root {
    --accent: #c9a329;
    --bg: #000;
    --panel: #161616;
    --text: #f2f2f2;
}

/* =========================
   BOOTSTRAP MODALS (GLOBAL)
   ========================= */
.modal-content {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
}

/* Header / footer separators */
.modal-header,
.modal-footer {
    border-color: rgba(201,163,41,.35) !important;
}

/* Titles + labels */
.modal-title,
.modal label {
    color: var(--accent) !important;
}

/* Close (X) button */
.modal .btn-close {
    filter: invert(1) !important;
    opacity: .85;
}

/* =========================
   MODAL INPUTS
   ========================= */
.modal .form-control {
    background: var(--bg) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: none !important;
    outline: none !important;
}

    .modal .form-control::placeholder {
        color: var(--accent) !important;
        opacity: .7;
    }

    .modal .form-control:focus {
        border-color: var(--accent) !important;
        box-shadow: none !important;
    }

/* Chrome / Edge autofill inside modals */
.modal input.form-control:-webkit-autofill,
.modal input.form-control:-webkit-autofill:hover,
.modal input.form-control:-webkit-autofill:focus,
.modal input.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--accent) !important;
    caret-color: var(--accent) !important;
    -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
    box-shadow: 0 0 0 1000px #000 inset !important;
    border: 1px solid var(--accent) !important;
    transition: background-color 999999s ease-in-out 0s !important;
}

/* =========================
   MODAL BUTTONS
   ========================= */
.modal .btn.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000 !important;
}

    .modal .btn.btn-primary:hover {
        filter: brightness(1.05);
    }