:root {
    --background: 235 21% 24%;
    --foreground: 210 40% 98%;
    --card: 235 21% 28%;
    --card-foreground: 210 40% 98%;
    --popover: 235 21% 20%;
    --popover-foreground: 210 40% 98%;
    --primary: 220 70% 60%;
    --primary-foreground: 210 40% 98%;
    --secondary: 235 21% 32%;
    --secondary-foreground: 210 40% 98%;
    --muted: 235 21% 30%;
    --muted-foreground: 215 20% 65%;
    --accent: 220 70% 55%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 235 21% 35%;
    --input: 235 21% 32%;
    --ring: 220 70% 60%;
    --radius: 0.5rem;
    --sidebar-background: 235 21% 24%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 220 70% 60%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 235 21% 30%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 235 21% 35%;
    --sidebar-ring: 220 70% 60%;
    --badge-background: 0 0% 100%;
    --badge-foreground: 235 21% 24%;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.badge-notification {
    display: flex;
    height: 1.5rem;
    min-width: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: hsl(var(--badge-background));
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    color: hsl(var(--badge-foreground));
}

.sidebar {
    border-color: hsl(235 21% 35%);
    background-color: hsl(235 21% 24%);
}

.sidebar-header {
    border-color: hsl(235 21% 35%) !important;
    background-color: hsl(235 21% 20%);
}

.sidebar-title-header {
    color: hsl(210 40% 98%);
}

.sidebar-btn-close {
    color: hsl(210 40% 98%);
}

.sidebar-btn-active {
    background-color: hsl(235 21% 30%);
    color: hsl(220 70% 60%) !important;
}

    .sidebar-btn-active:hover {
        background-color: hsl(235 21% 30%);
    }

.sidebar-btn {
    color: hsl(210 40% 98%) !important;
}

    .sidebar-btn:hover {
        background-color: hsl(235 21% 30%);
    }

.sidebar-btn-menu {
    color: hsl(215 20% 65%);
}

    .sidebar-btn-menu:hover {
        color: hsl(210 40% 98%);
    }

.sidebar-btn-submenu {
    color: hsl(210 40% 98%) !important;
}

    .sidebar-btn-submenu:hover {
        background-color: hsl(235 21% 30%);
    }

.sidebar-btn-submenu-active {
    color: hsl(220 70% 60%) !important;
    background-color: hsl(235 21% 30%);
}

.sidebar-btn-manage {
    color: hsl(210 40% 98%);
}

    .sidebar-btn-manage:hover {
        background-color: hsl(235 21% 30%);
    }

.sidebar-btn-manage-active {
    background-color: hsl(235 21% 30%);
}

    .sidebar-btn-manage-active svg {
        color: hsl(220 70% 60%) !important;
    }

    .sidebar-btn-manage-active > div > div:first-child {
        color: hsl(220 70% 60%) !important;
    }

.sidebar-div-manage {
    background-color: hsl(235 21% 30%);
}

.sidebar-btn-logout {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

    .sidebar-btn-logout:hover {
        background-color: hsl(235 21% 30%);
    }

.sidebar-btn-access {
    color: hsl(210 40% 98%);
}

    .sidebar-btn-access:hover {
        background-color: hsl(235 21% 30%);
    }

.sidebar-btn-access-active {
    background-color: hsl(235 21% 30%);
    color: hsl(220 70% 60%);
}

    .sidebar-btn-access-active svg {
        color: hsl(220 70% 60%) !important;
    }

    .sidebar-btn-access-active span {
        color: hsl(220 70% 60%) !important;
    }