:root {
    --classified-sidebar-width: 320px;
}

/* SIDEBAR */

.sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;

    width: var(--classified-sidebar-width) !important;
    height: 100vh !important;

    z-index: 1000 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #070b11 !important;

    border-color: rgba(209,173,104,.16) !important;

    box-sizing: border-box !important;
}


/* ENGLISH */

html[dir="ltr"] .sidebar {
    left: 0 !important;
    right: auto !important;

    border-right:
        1px solid rgba(209,173,104,.16) !important;

    border-left: none !important;
}


/* ARABIC */

html[dir="rtl"] .sidebar {
    right: 0 !important;
    left: auto !important;

    border-left:
        1px solid rgba(209,173,104,.16) !important;

    border-right: none !important;
}


/* MAIN SITE */

.main {
    position: relative !important;

    width: auto !important;
    min-height: 100vh !important;

    box-sizing: border-box !important;

    transition:
        margin .25s ease !important;
}

html[dir="ltr"] .main {
    margin-left:
        var(--classified-sidebar-width) !important;

    margin-right: 0 !important;
}

html[dir="rtl"] .main {
    margin-right:
        var(--classified-sidebar-width) !important;

    margin-left: 0 !important;
}


/* Prevent accidental collapse remnants */

body.sidebar-collapsed .sidebar {
    width:
        var(--classified-sidebar-width) !important;
}

html[dir="ltr"]
body.sidebar-collapsed
.main {
    margin-left:
        var(--classified-sidebar-width) !important;
}

html[dir="rtl"]
body.sidebar-collapsed
.main {
    margin-right:
        var(--classified-sidebar-width) !important;
}


/* Safe animation only */

.sidebar .nav-link {
    transition:
        transform .18s ease,
        background .18s ease,
        color .18s ease !important;
}

html[dir="ltr"]
.sidebar
.nav-link:hover {
    transform:
        translateX(4px);
}

html[dir="rtl"]
.sidebar
.nav-link:hover {
    transform:
        translateX(-4px);
}

.sidebar .nav-link:hover {
    background:
        rgba(209,173,104,.055) !important;
}


/* TABLET / MOBILE */

@media (max-width: 900px) {

    :root {
        --classified-sidebar-width: 285px;
    }

    .sidebar {
        transition:
            transform .25s ease !important;
    }

    html[dir="ltr"] .sidebar {
        transform:
            translateX(-105%);
    }

    html[dir="rtl"] .sidebar {
        transform:
            translateX(105%);
    }

    .sidebar.open {
        transform:
            translateX(0) !important;
    }

    html[dir="ltr"] .main,
    html[dir="rtl"] .main {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}

/* =====================================================
   CLASSIFIED SIDEBAR — SEAMLESS INTEGRATION
===================================================== */

.sidebar {
    border: none !important;
    border-left: none !important;
    border-right: none !important;

    box-shadow: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(6, 10, 16, .94),
            rgba(5, 9, 14, .94)
        ) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* remove any old separator */

html[dir="rtl"] .sidebar,
html[dir="ltr"] .sidebar {
    border: none !important;
}

/* MAIN must not draw a divider */

.main,
html[dir="rtl"] .main,
html[dir="ltr"] .main {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* subtle visual blend instead of a hard line */

.sidebar::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 45px;

    pointer-events: none;

    opacity: .32;
}

html[dir="rtl"] .sidebar::before {
    left: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(5, 9, 14, .35),
            transparent
        );
}

html[dir="ltr"] .sidebar::before {
    right: 100%;

    background:
        linear-gradient(
            270deg,
            rgba(5, 9, 14, .35),
            transparent
        );
}

/* Keep page background visually continuous */

body {
    background-color: #05090e !important;
}


/* =====================================================
   REMOVE SIDEBAR SEPARATOR COMPLETELY
===================================================== */

.sidebar,
.sidebar::before,
.sidebar::after,
.main,
.main::before,
.main::after {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;
}

/* Kill any separator pseudo-elements */

.sidebar::before,
.sidebar::after,
.main::before,
.main::after {
    display: none !important;
    content: none !important;
}

/* RTL */

html[dir="rtl"] .sidebar {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* LTR */

html[dir="ltr"] .sidebar {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Make the two areas visually meet */

html[dir="rtl"] .main {
    margin-right: var(--classified-sidebar-width) !important;
    border-right: 0 !important;
}

html[dir="ltr"] .main {
    margin-left: var(--classified-sidebar-width) !important;
    border-left: 0 !important;
}


/* =====================================================
   HIDE SIDEBAR SCROLLBAR
===================================================== */

.sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-corner {
    background: transparent !important;
    display: none !important;
}