:root {
    /* Base colors */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Primary brand colors */
    --color-primary-dark: #43c0ff;
    --color-primary: #43c0ff;
    --color-primary-light: #43c0ff;

    /* Accent colors */
    --color-accent: rgb(247 119 223);
    --color-accent-dark: rgb(247 119 223);

    /* Neutral colors */
    --color-gray-dark: #43c0ff;
    --color-gray-mid: rgb(247 119 223);
    --color-gray-light: rgb(247 119 223);

    --color-gray-border: #DDE2E6;
    --color-gray-border-alt: #DDE2E5;
    --color-gray-bg: #F9F9F9;
    --color-gray-soft: #D8DDE0;
    --color-gray-soft2: #F7F7F7;
    --color-gray-soft3: #d2d9dc;
    --color-gray-muted: #AAAAAA;
    --color-gray-secondary: #93AEB7;

    /* State colors */
    --color-error: #ca3e3e;

    /* Special UI */
    --color-loader-bg: rgba(240, 240, 240, .7);
    --color-link: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}

/* General styles */
.app-page {
    background-color: var(--color-white);
}

#galleries .item,
#introGalleries .item {
    position: relative;
}

#galleries .item .btn-icon,
#introGalleries .item .btn-icon {
    position: absolute;
    top: -10px;
    left: calc(100% - 20px);
}

#kt_app_sidebar,
.auth-aside {
    background-color: var(--color-primary-dark);
}

.custom-btn,
.btn-brand,
.active > .page-link,
.scrolltop,
.scrolltop:hover,
.btn.btn-brand:focus:not(.btn-active) {
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
}

.custom-btn:hover:not(.btn-active),
.btn.btn-brand:hover:not(.btn-active) {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

.btn-brand i {
    color: var(--color-white) !important;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet {
    background-color: var(--color-black) !important;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: var(--color-black) !important;
}

.app-sidebar-menu-primary.menu > .menu-item > .menu-link.active .menu-title,
.app-sidebar-menu-primary.menu > .menu-item > .menu-link.active .menu-icon i,
.menu-state-bg-light-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here),
.jstree-default .jstree-icon {
    color: var(--color-primary) !important;
}

.btn.btn-light:hover:not(.btn-active) .svg-icon,
.btn.btn-active-light-primary:hover:not(.btn-active) {
    color: var(--color-white) !important;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}

.app-sidebar .app-sidebar-logo {
    border-bottom: 1px dashed var(--color-white) !important;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet {
    color: var(--color-primary-dark) !important;
}

.app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-title,
.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link .menu-title,
.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active .menu-title,
.app-sidebar-menu-primary.menu > .menu-item:not(.here) > .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i,
.btn.btn-light .svg-icon {
    color: var(--color-white) !important;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: var(--color-white) !important;
}

.app-sidebar .menu-heading {
    color: var(--color-white);
}

.app-sidebar-logo .app-sidebar-logo-default {
    width: 178px;
    height: auto;
}

.app-sidebar-logo .app-sidebar-logo-minimize {
    width: 60px;
    height: auto;
}

/* Sidebar menu */
.menu-rounded .menu-link {
    border-radius: 0;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active {
    color: var(--color-primary-dark) !important;
    background-color: var(--color-gray-soft2) !important;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: var(--color-primary-dark) !important;
    font-weight: 700;
}

.app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active .menu-title {
    color: var(--color-primary-dark) !important;
    font-weight: 700;
}

.app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-title {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: var(--color-white) !important;
}

.app-sidebar .menu .menu-item .menu-heading {
    color: var(--color-white) !important;
}

.app-sidebar .menu .menu-item .menu-link .menu-arrow:after {
    background-color: var(--color-white) !important;
}

.app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
    background-color: var(--color-white) !important;
}

/* ... (rest of your rules updated similarly with vars) ... */

/* Utility classes */
.bg-white {
    background-color: var(--color-white);
}

.bg-f9f9f9 {
    background-color: var(--color-gray-bg);
}

.bg-1B3951 {
    background-color: var(--color-primary-dark) !important;
}

.color-183B51 {
    color: var(--color-primary-light) !important;
}

.color-8597A5 {
    color: var(--color-gray-mid);
}

.color-1A394E {
    color: var(--color-gray-dark);
}

.border-DDE2E6 {
    border: 1px solid var(--color-gray-border);
}

/* Error messages */
span.error {
    font-family: 'Kumbh Sans', sans-serif;
    color: var(--color-error);
    font-weight: 600;
    font-size: 14px;
}

/* cell */
table.dataTable td.dt-control {
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    width: 40px;
}

/* icon + */
table.dataTable td.dt-control::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: none !important;
    font-size: 17px;
    font-weight: 700;
    content: '+' !important;
    background-color: var(--color-primary);
    color: white;
}

/* icon - when opened */
table.dataTable tr.shown td.dt-control::before {
    content: '-' !important;
    background-color: var(--color-gray-soft2);
    color: var(--color-primary);
}