
/* =========================================================
   CLASSIFIED SIDEBAR V2
========================================================= */

.sidebar .nav-link {
    position: relative;

    display: flex !important;
    align-items: center !important;

    min-height: 48px;

    gap: 13px;

    padding: 10px 12px !important;

    border: 1px solid transparent;
    border-radius: 11px;

    color: #9ca8b6;

    overflow: hidden;

    text-decoration: none !important;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


/* ICON */

.sidebar .nav-icon {
    width: 25px !important;
    height: 25px !important;

    min-width: 25px !important;
    min-height: 25px !important;

    max-width: 25px !important;
    max-height: 25px !important;

    flex: 0 0 25px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;

    font-size: 0 !important;

    color: #8f9aa7;

    transition:
        color .18s ease,
        transform .18s ease;
}


.sidebar .nav-icon svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    overflow: visible;
}


/* HOVER */

.sidebar .nav-link:hover {
    color: #eef2f5;

    border-color: rgba(209, 173, 104, .12);

    background:
        linear-gradient(
            90deg,
            rgba(209, 173, 104, .055),
            rgba(209, 173, 104, .012)
        );
}


.sidebar .nav-link:hover .nav-icon {
    color: #d1ad68;

    transform: scale(1.05);
}


/* ACTIVE PAGE */

.sidebar .nav-link.is-active {
    color: #f5f7f9;

    border-color: rgba(209, 173, 104, .18);

    background:
        linear-gradient(
            90deg,
            rgba(209, 173, 104, .13),
            rgba(209, 173, 104, .025)
        );
}


.sidebar .nav-link.is-active::before {
    content: "";

    position: absolute;

    top: 8px;
    bottom: 8px;

    width: 2px;

    border-radius: 3px;

    background: #d1ad68;

    box-shadow:
        0 0 12px rgba(209, 173, 104, .35);
}


html[dir="rtl"] .sidebar .nav-link.is-active::before {
    right: 0;
}


html[dir="ltr"] .sidebar .nav-link.is-active::before {
    left: 0;
}


.sidebar .nav-link.is-active .nav-icon {
    color: #d1ad68;
}


/* =========================================================
   SIDEBAR SECTION TITLES
========================================================= */

.sidebar .nav-title,
.sidebar .sidebar-section-title {
    margin-top: 18px;
    margin-bottom: 7px;

    padding-inline: 12px;

    color: #586574;

    font-size: 8px !important;
    font-weight: 650;

    letter-spacing: .08em;
}


/* =========================================================
   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;
}


/* =========================================================
   DESKTOP SMART COMPACT MODE
========================================================= */

@media (min-width: 901px) {

    body.smart-sidebar-compact .sidebar {
        width: 78px !important;
    }


    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .nav-link {

        justify-content: center !important;

        gap: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        font-size: 0 !important;
    }


    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .nav-link > span:not(.nav-icon),

    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .nav-title,

    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .sidebar-section-title,

    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .sidebar-profile-details {

        display: none !important;
    }


    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .nav-icon {

        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;
        min-height: 28px !important;

        max-width: 28px !important;
        max-height: 28px !important;

        flex: 0 0 28px !important;
    }


    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .nav-icon svg {

        width: 22px;
        height: 22px;
    }


    body.smart-sidebar-compact
    .sidebar:not(:hover):not(:focus-within)
    .nav-link.is-active::before {

        top: 10px;
        bottom: 10px;
    }

}


/* =========================================================
   MOBILE + TABLET
   NEVER USE COMPACT MODE
========================================================= */

@media (max-width: 900px) {

    body.smart-sidebar-compact .sidebar {
        width: min(285px, 86vw) !important;
    }


    body.smart-sidebar-compact
    .sidebar
    .nav-link {

        justify-content: flex-start !important;

        gap: 13px !important;

        padding: 10px 12px !important;

        font-size: inherit !important;
    }


    body.smart-sidebar-compact
    .sidebar
    .nav-link > span:not(.nav-icon),

    body.smart-sidebar-compact
    .sidebar
    .nav-title,

    body.smart-sidebar-compact
    .sidebar
    .sidebar-section-title,

    body.smart-sidebar-compact
    .sidebar
    .sidebar-profile-details {

        display: initial !important;
    }


    .sidebar .nav-icon {
        width: 26px !important;
        height: 26px !important;

        min-width: 26px !important;
        min-height: 26px !important;

        max-width: 26px !important;
        max-height: 26px !important;

        flex: 0 0 26px !important;
    }


    .sidebar .nav-icon svg {
        width: 21px;
        height: 21px;
    }

}


/* Profile avatar must stay avatar */

.sidebar .sidebar-profile-avatar {
    font-size: initial !important;
}



/* =========================================================
   CLASSIFIED SIDEBAR — ALWAYS FULL
========================================================= */

@media (min-width: 901px) {

    body.smart-sidebar-compact .sidebar,
    .sidebar {
        width: var(--sidebar-width, 295px) !important;
    }

    body.smart-sidebar-compact .sidebar .nav-link,
    body.smart-sidebar-compact .sidebar:not(:hover) .nav-link {
        justify-content: flex-start !important;

        gap: 13px !important;

        padding: 10px 12px !important;

        font-size: inherit !important;
    }

    body.smart-sidebar-compact
    .sidebar
    .nav-link > span:not(.nav-icon),

    body.smart-sidebar-compact
    .sidebar
    .nav-title,

    body.smart-sidebar-compact
    .sidebar
    .sidebar-section-title,

    body.smart-sidebar-compact
    .sidebar
    .sidebar-profile-details {
        display: initial !important;

        opacity: 1 !important;
        visibility: visible !important;

        width: auto !important;
        max-width: none !important;
    }

    body.smart-sidebar-compact
    .sidebar
    .sidebar-profile-details {
        display: flex !important;
    }

    body.smart-sidebar-compact
    .sidebar
    .nav-icon {
        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;
        min-height: 25px !important;

        max-width: 25px !important;
        max-height: 25px !important;

        flex: 0 0 25px !important;
    }

}


/* =========================================================
   CLASSIFIED SIDEBAR — SPECIAL ACTIONS
========================================================= */

/* OWNER */

.sidebar a[href^="/owner/"] .nav-icon {
    color: #d1ad68;
}

.sidebar a[href^="/owner/"]:hover {
    border-color: rgba(209, 173, 104, .25);

    background:
        linear-gradient(
            90deg,
            rgba(209, 173, 104, .11),
            rgba(209, 173, 104, .025)
        );
}


/* LOGOUT */

.sidebar a[href*="/logout"] {
    margin-top: 4px;
}

.sidebar a[href*="/logout"]:hover {
    color: #e4a2a2;

    border-color: rgba(199, 91, 91, .16);

    background: rgba(174, 66, 66, .045);
}

.sidebar a[href*="/logout"]:hover .nav-icon {
    color: #d58c8c;
}


/* LANGUAGE */

.sidebar [class*="language"] .nav-icon {
    color: #8f9aa7;
}

.sidebar [class*="language"]:hover .nav-icon {
    color: #d1ad68;
}



/* =========================================================
   CLASSIFIED ACCOUNT NAVIGATION
========================================================= */

.sidebar-account-divider {
    height: 1px;

    margin: 14px 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(209, 173, 104, .18),
            transparent
        );
}


/* OWNER */

.sidebar-owner-link {
    color: #bda677 !important;
}

.sidebar-owner-link .nav-icon {
    color: #d1ad68 !important;
}

.sidebar-owner-link:hover {
    color: #f0d69a !important;

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

    background:
        linear-gradient(
            90deg,
            rgba(209, 173, 104, .10),
            rgba(209, 173, 104, .018)
        ) !important;
}


/* LOGOUT */

.sidebar-logout-link:hover {
    color: #e2a2a2 !important;

    border-color: rgba(205, 91, 91, .16) !important;

    background: rgba(180, 65, 65, .045) !important;
}

.sidebar-logout-link:hover .nav-icon {
    color: #d88e8e !important;
}


/* PROFILE CARD */

.sidebar-profile-link {
    margin-top: 3px !important;

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

    background:
        linear-gradient(
            135deg,
            rgba(209, 173, 104, .035),
            rgba(255, 255, 255, .008)
        ) !important;
}

.sidebar-profile-link:hover {
    border-color:
        rgba(209, 173, 104, .24) !important;
}


/* =========================================================
   CLASSIFIED MAIN ICONS V2
========================================================= */

.sidebar .nav-icon svg {
    width: 22px !important;
    height: 22px !important;

    stroke-width: 1.9 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    transition:
        transform .18s ease,
        filter .18s ease;
}

.sidebar .nav-link:hover .nav-icon svg {
    transform: scale(1.07);
}

.sidebar .nav-link.is-active .nav-icon svg {
    filter:
        drop-shadow(
            0 0 5px rgba(209, 173, 104, .25)
        );
}



/* =========================================================
   CLASSIFIED MAIN NAV — PREMIUM ICON CHIPS
========================================================= */

.sidebar .main-nav-link .nav-icon {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    min-height: 32px !important;

    max-width: 32px !important;
    max-height: 32px !important;

    flex: 0 0 32px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(151, 164, 179, .11);
    border-radius: 9px;

    color: #909cab;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.sidebar .main-nav-link .nav-icon svg {
    width: 19px !important;
    height: 19px !important;

    fill: none !important;

    stroke: currentColor !important;
    stroke-width: 2 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* HOVER */

.sidebar .main-nav-link:hover .nav-icon {
    color: #d8ba7c;

    border-color:
        rgba(209,173,104,.30);

    background:
        linear-gradient(
            145deg,
            rgba(209,173,104,.10),
            rgba(209,173,104,.025)
        );

    transform: translateY(-1px);

    box-shadow:
        0 5px 18px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.04);
}


/* ACTIVE */

.sidebar .main-nav-link.is-active .nav-icon {
    color: #e2be72 !important;

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

    background:
        linear-gradient(
            145deg,
            rgba(209,173,104,.17),
            rgba(209,173,104,.045)
        ) !important;

    box-shadow:
        0 0 18px rgba(209,173,104,.08),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* Keep main navigation spacing elegant */

.sidebar .main-nav-link {
    gap: 12px !important;

    min-height: 52px !important;
}



/* =========================================================
   CLASSIFIED CORE NAV FINAL
   Same design language as ACCOUNT
========================================================= */

.sidebar .sidebar-core-link {
    position: relative;

    display: flex !important;
    align-items: center !important;

    gap: 13px !important;

    min-height: 48px !important;

    padding: 10px 12px !important;

    border: 1px solid transparent !important;
    border-radius: 11px !important;

    color: #a0acba;

    background: transparent !important;

    text-decoration: none !important;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}


/* ICON — exactly like account navigation */

.sidebar .sidebar-core-link .nav-icon {
    width: 25px !important;
    height: 25px !important;

    min-width: 25px !important;
    min-height: 25px !important;

    max-width: 25px !important;
    max-height: 25px !important;

    flex: 0 0 25px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #8f9baa !important;

    font-size: 0 !important;
}


.sidebar .sidebar-core-link .nav-icon svg {
    width: 21px !important;
    height: 21px !important;

    display: block !important;

    fill: none !important;

    stroke: currentColor !important;
    stroke-width: 1.75 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    filter: none !important;

    transform: none !important;
}


/* Hover */

.sidebar .sidebar-core-link:hover {
    color: #edf1f4 !important;

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

    background:
        rgba(255,255,255,.018) !important;
}

.sidebar .sidebar-core-link:hover .nav-icon {
    color: #c4a664 !important;
}


/* Active — same feeling as Account Security */

.sidebar .sidebar-core-link.is-active {
    color: #f5f6f7 !important;

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

    background:
        linear-gradient(
            90deg,
            rgba(209,173,104,.115),
            rgba(209,173,104,.025)
        ) !important;
}


.sidebar .sidebar-core-link.is-active .nav-icon {
    color: #d8b45f !important;
}


.sidebar .sidebar-core-link.is-active::before {
    content: "";

    position: absolute;

    top: 7px;
    bottom: 7px;

    width: 2px;

    border-radius: 10px;

    background: #d1ad68;

    box-shadow:
        0 0 10px
        rgba(209,173,104,.28);
}


html[dir="rtl"]
.sidebar .sidebar-core-link.is-active::before {
    right: 0;
}


html[dir="ltr"]
.sidebar .sidebar-core-link.is-active::before {
    left: 0;
}


/* Category labels:
   SYSTEM + LEGAL + ACCOUNT all identical
*/

.sidebar .sidebar-section-title {
    margin-top: 19px !important;
    margin-bottom: 7px !important;

    padding-inline: 12px !important;

    color: #596574 !important;

    font-size: 8px !important;
    font-weight: 650 !important;

    letter-spacing: .07em !important;
}


/* Mobile */

@media (max-width: 900px) {

    .sidebar .sidebar-core-link {
        min-height: 48px !important;

        gap: 13px !important;

        padding: 10px 12px !important;
    }

    .sidebar .sidebar-core-link .nav-icon {
        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;
        min-height: 25px !important;

        max-width: 25px !important;
        max-height: 25px !important;

        flex: 0 0 25px !important;
    }

}


/* =========================================================
   CLASSIFIED SIDEBAR SECTION HEADINGS
========================================================= */

.sidebar .sidebar-section-title[data-en="SYSTEM"],
.sidebar .sidebar-section-title[data-en="ACCOUNT"],
.sidebar .sidebar-section-title[data-en="LEGAL"] {

    margin-top: 22px !important;
    margin-bottom: 9px !important;

    padding-inline: 12px !important;

    color: #748191 !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    letter-spacing: .09em !important;
}


/* Arabic */

html[dir="rtl"]
.sidebar .sidebar-section-title[data-en="SYSTEM"],

html[dir="rtl"]
.sidebar .sidebar-section-title[data-en="ACCOUNT"],

html[dir="rtl"]
.sidebar .sidebar-section-title[data-en="LEGAL"] {

    letter-spacing: 0 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}

