/* Dashboard CSS */


/* Inter font now loaded via local fonts.css */

body {
    font-family: "Inter", sans-serif;
    padding-top: 70px;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: hidden;
}

:root {
    --color-body-bg: #f3f6f9;
    --color-nav-bg: #ffffff;
    --color-nav-border: #c4cbd8;
    --color-nav-icons: #434857;
    --color-nav-icons-hover: #000000;
    --color-profile-bg: #443876;
    --color-profile-btn-hover: #edf0f5;
    --color-profile-text-dark: #202020;
    --color-profile-text-light: #7a7a7a;
    --color-sidebar-bg: #ffffff;
    --color-sidebar-border: #d3dae7;
    --color-sidebar-buttons: #2e2d2d;
    --color-sidebar-buttons-hover: #2e2d2d;
    --color-sidebar-buttons-hover-bg: #f5f4f4;
    --color-sidebar-buttons-active: #713780;
    --color-sidebar-buttons-active_left_border: #713780;
    --color-sidebar-vertical-text: #7a7d85;
    --color-sidebar-divider: #818da3;
    --color-tooltip-bg: #713780;
    --color-links-light: #1f70f9;
    --color-white: #fff;
    --color-black: #000;
    --color-light-gray: #5a616e;
    --color-dark-gray: #1b1e22;
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 70px;
    --content-min-width: 800px;
    --size-nav-height: 73px;
    --size-side-left: 240px;
    --size-side-collapsed: 70px;
}

:root {
    --scale-factor: 1;
}

@media (min-width: 2500px) {
     :root {
        --scale-factor: 1.2;
    }
}

@media (max-width: 1920px) and (min-width: 1746px) {
     :root {
        --scale-factor: 1;
    }
}

@media (max-width: 1745px) and (min-width: 1535px) {
     :root {
        --scale-factor: 0.85;
    }
}

@media (max-width: 1535px) and (min-width: 1281px) {
     :root {
        --scale-factor: 0.75;
    }
}

@media (max-width: 1280px) {
     :root {
        --scale-factor: 0.65;
    }
}

@media (max-width: 1100px) {
     :root {
        --scale-factor: 0.571;
    }
}

:root {
    /* Fractional pixel values */
    --scaled-p2: calc(0.25px * var(--scale-factor));
    --scaled-p5: calc(0.5px * var(--scale-factor));
    /* 1px - 20px (small increments) */
    --scaled-n31: calc(-32px * var(--scale-factor));
    --scaled-n30: calc(-30px * var(--scale-factor));
    --scaled-n45: calc(-45px * var(--scale-factor));
    --scaled-n75: calc(-75px * var(--scale-factor));
    --scaled-n88: calc(-89px * var(--scale-factor));
    --scaled-n100: calc(-100px * var(--scale-factor));
    --scaled-0: calc(0px * var(--scale-factor));
    --scaled-1: calc(1px * var(--scale-factor));
    --scaled-2: calc(2px * var(--scale-factor));
    --scaled-3: calc(3px * var(--scale-factor));
    --scaled-4: calc(4px * var(--scale-factor));
    --scaled-5: calc(5px * var(--scale-factor));
    --scaled-6: calc(6px * var(--scale-factor));
    --scaled-7: calc(7px * var(--scale-factor));
    --scaled-8: calc(8px * var(--scale-factor));
    --scaled-9: calc(9px * var(--scale-factor));
    --scaled-10: calc(10px * var(--scale-factor));
    --scaled-11: calc(11px * var(--scale-factor));
    --scaled-12: calc(12px * var(--scale-factor));
    --scaled-13: calc(13px * var(--scale-factor));
    --scaled-14: calc(14px * var(--scale-factor));
    --scaled-15: calc(15px * var(--scale-factor));
    --scaled-16: calc(16px * var(--scale-factor));
    --scaled-17: calc(17px * var(--scale-factor));
    --scaled-18: calc(18px * var(--scale-factor));
    --scaled-19: calc(19px * var(--scale-factor));
    --scaled-20: calc(20px * var(--scale-factor));
    --scaled-21: calc(21px * var(--scale-factor));
    --scaled-22: calc(22px * var(--scale-factor));
    --scaled-24: calc(24px * var(--scale-factor));
    --scaled-25: calc(25px * var(--scale-factor));
    --scaled-26: calc(26px * var(--scale-factor));
    --scaled-27: calc(27px * var(--scale-factor));
    --scaled-28: calc(28px * var(--scale-factor));
    --scaled-29: calc(29px * var(--scale-factor));
    --scaled-30: calc(30px * var(--scale-factor));
    --scaled-31: calc(31px * var(--scale-factor));
    --scaled-33: calc(33px * var(--scale-factor));
    --scaled-35: calc(35px * var(--scale-factor));
    /* 30px - 100px */
    --scaled-38: calc(38px * var(--scale-factor));
    --scaled-40: calc(40px * var(--scale-factor));
    --scaled-49: calc(49px * var(--scale-factor));
    --scaled-50: calc(50px * var(--scale-factor));
    --scaled-53: calc(53px * var(--scale-factor));
    --scaled-56: calc(56px * var(--scale-factor));
    --scaled-60: calc(60px * var(--scale-factor));
    --scaled-62: calc(62px * var(--scale-factor));
    --scaled-65: calc(65px * var(--scale-factor));
    --scaled-70: calc(70px * var(--scale-factor));
    --scaled-72: calc(72px * var(--scale-factor));
    --scaled-74: calc(74px * var(--scale-factor));
    --scaled-75: calc(75px * var(--scale-factor));
    --scaled-80: calc(80px * var(--scale-factor));
    --scaled-83: calc(83px * var(--scale-factor));
    --scaled-85: calc(85px * var(--scale-factor));
    --scaled-88: calc(88px * var(--scale-factor));
    --scaled-90: calc(90px * var(--scale-factor));
    --scaled-91: calc(91px * var(--scale-factor));
    --scaled-95: calc(95px * var(--scale-factor));
    --scaled-100: calc(100px * var(--scale-factor));
    /* 100px - 200px */
    --scaled-105: calc(105px * var(--scale-factor));
    --scaled-115: calc(115px * var(--scale-factor));
    --scaled-118: calc(118px * var(--scale-factor));
    --scaled-124: calc(124px * var(--scale-factor));
    --scaled-132: calc(132px * var(--scale-factor));
    --scaled-136: calc(136px * var(--scale-factor));
    --scaled-139: calc(139px * var(--scale-factor));
    --scaled-145: calc(145px * var(--scale-factor));
    --scaled-150: calc(150px * var(--scale-factor));
    --scaled-155: calc(155px * var(--scale-factor));
    --scaled-159: calc(159px * var(--scale-factor));
    --scaled-162: calc(162px * var(--scale-factor));
    --scaled-170: calc(170px * var(--scale-factor));
    --scaled-175: calc(175px * var(--scale-factor));
    --scaled-180: calc(180px * var(--scale-factor));
    /* 200px+ */
    --scaled-193: calc(193px * var(--scale-factor));
    --scaled-200: calc(200px * var(--scale-factor));
    --scaled-205: calc(205px * var(--scale-factor));
    --scaled-217: calc(217px * var(--scale-factor));
    --scaled-230: calc(230px * var(--scale-factor));
    --scaled-235: calc(235px * var(--scale-factor));
    --scaled-238: calc(238px * var(--scale-factor));
    --scaled-240: calc(240px * var(--scale-factor));
    --scaled-243: calc(243px * var(--scale-factor));
    --scaled-248: calc(248px * var(--scale-factor));
    --scaled-250: calc(250px * var(--scale-factor));
    --scaled-256: calc(256px * var(--scale-factor));
    --scaled-260: calc(260px * var(--scale-factor));
    --scaled-275: calc(275px * var(--scale-factor));
    --scaled-279: calc(279px * var(--scale-factor));
    --scaled-280: calc(280px * var(--scale-factor));
    --scaled-283: calc(283px * var(--scale-factor));
    --scaled-297: calc(297px * var(--scale-factor));
    --scaled-305: calc(305px * var(--scale-factor));
    --scaled-310: calc(310px * var(--scale-factor));
    --scaled-315: calc(315px * var(--scale-factor));
    --scaled-330: calc(330px * var(--scale-factor));
    --scaled-340: calc(340px * var(--scale-factor));
    --scaled-345: calc(345px * var(--scale-factor));
    --scaled-353: calc(353px * var(--scale-factor));
    --scaled-360: calc(360px * var(--scale-factor));
    --scaled-383: calc(383px * var(--scale-factor));
    --scaled-475: calc(475px * var(--scale-factor));
    --scaled-500: calc(500px * var(--scale-factor));
    --scaled-510: calc(510px * var(--scale-factor));
    --scaled-541: calc(541px * var(--scale-factor));
    --scaled-525: calc(525px * var(--scale-factor));
    --scaled-581: calc(581px * var(--scale-factor));
    --scaled-600: calc(600px * var(--scale-factor));
    --scaled-668: calc(668px * var(--scale-factor));
    --scaled-723: calc(723px * var(--scale-factor));
    --scaled-938: calc(938px * var(--scale-factor));
    --scaled-1549: calc(1549px * var(--scale-factor));
    --scaled-1573: calc(1573px * var(--scale-factor));
    --scaled-1580: calc(1580px * var(--scale-factor));
}


/* ------------------------ */


/*  Dark theme Variables    */


/* ------------------------ */

.dark-theme {
    transition: 0.3s;
    /* Use consistent dark mode colors matching dark-mode.css variables */
    /* Primary background (darkest) */
    --color-body-bg: #111827;
    /* Secondary background (medium dark) */
    --color-nav-bg: #1f2937;
    --color-nav-border: #374151;
    /* Text colors */
    --color-nav-icons: #e5e7eb;
    --color-nav-icons-hover: #ffffff;
    --color-profile-bg: #1f2937;
    --color-profile-btn-hover: #374151;
    --color-profile-text-dark: #e5e7eb;
    --color-profile-text-light: #9ca3af;
    /* Sidebar colors */
    --color-sidebar-bg: #1f2937;
    --color-sidebar-border: #374151;
    --color-sidebar-buttons: #e5e7eb;
    --color-sidebar-buttons-hover: #ffffff;
    --color-sidebar-buttons-hover-bg: #374151;
    --color-sidebar-buttons-active: #ffffff;
    --color-sidebar-buttons-active_left_border: #6E4FA2;
    --color-sidebar-vertical-text: #9ca3af;
    --color-sidebar-divider: #9ca3af;
    /* Other colors */
    --color-tooltip-bg: #374151;
    --color-links-light: #a855f7;
    --color-white: #ffffff;
    --color-black: #000;
    --color-light-gray: #9ca3af;
    --color-dark-gray: #374151;
}

body {
    font-family: Inter;
    background-color: var(--color-body-bg);
}

.tooltip-custom {
    background-color: var(--color-tooltip-bg);
    font-size: 12px;
}

.tooltip-custom .tooltip-inner {
    padding-left: 12px !important;
}

.logo {
    padding-left: 12px;
    color: var(--color-nav-icons);
}


/* For WebKit-based browsers */

::-webkit-scrollbar {
    width: 6px;
    /* Set the width of the scrollbar */
}


/* For the track (the background of the scrollbar) */

::-webkit-scrollbar-track {
    background-color: transparent;
    /* Set the background color of the track */
}


/* For the scrollbar thumb (the draggable handle) */

::-webkit-scrollbar-thumb {
    background-color: #5c6474;
    /* Set the color of the thumb */
    border-radius: 4px;
    /* Apply a border radius to the thumb */
}


/* ------------------------ */


/*        Navbar            */


/* ------------------------ */


/* Update navbar height to match new structure */

nav.fixed {
    position: fixed;
    top: 0;
    left: var(--size-side-left, 250px);
    right: 0;
    z-index: 500;
    background: var(--color-nav-bg);
    border-bottom: 1px solid var(--color-nav-border);
    transition: left 0.3s ease, width 0.3s ease;
    width: calc(100% - var(--size-side-left, 250px));
    padding: 0 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-color: #ffffff;
}


/* When sidebar is collapsed */

.collapsed~nav.fixed {
    left: var(--size-side-collapsed, 80px);
    width: calc(100% - var(--size-side-collapsed, 80px));
    /* Adjust width */
    background-color: #ffffff;
}


/* RTL support for navbar padding */

[dir="rtl"] nav.fixed {
    left: 0;
    right: var(--size-side-left, 250px);
    ;
    width: calc(100% - var(--size-side-left, 250px));
    padding: 0 var(--scaled-20);
    /* Add horizontal padding for RTL */
    background-color: #ffffff;
    z-index: 500;
}

[dir="rtl"].collapsed~nav.fixed {
    right: var(--size-side-collapsed, 80px);
    left: 0;
    width: calc(100% - var(--size-side-collapsed, 80px));
}

nav.fixed.dashboard-nav {
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff;
}

[dir="rtl"] nav.fixed.dashboard-nav {
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff;
}


/* Dashboard-specific content styling */

.dashboard-content {
    flex: 1;
    color: #ffffff;
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}

[dir="rtl"].dashboard-content {
    flex: 1;
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
    margin-left: 0;
}


/* Dashboard-specific footer styling */

.dashboard-footer {
    left: 0 !important;
    width: 100% !important;
}

.navbar-toggler {
    color: var(--color-nav-icons);
    border: none;
    outline: none;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.nav-icons-container {
    margin-right: var(--scaled-8);
    margin-top: var(--scaled-4);
}


/* Ensure navbar content stays properly aligned */

.navbar-content {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    z-index: 500;
}


/* Left section takes available space */

.navbar-left {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    /* Allows shrinking below content size */
}


/* Right section stays fixed width */

.navbar-right {
    display: flex;
    align-items: center;
}

.nav-icon {
    cursor: pointer;
    user-select: none;
    color: var(--color-nav-icons);
    padding: var(--scaled-4);
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
}

.nav-icon:hover {
    color: var(--color-nav-icons-hover);
}


/* ------------------------ */


/*      Profile Menu        */


/* ------------------------ */

.profile {
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: var(--scaled-30);
    height: var(--scaled-30);
    border-radius: 50%;
    margin-right: var(--scaled-10);
    margin-left: var(--scaled-5);
    user-select: none;
    background: var(--color-profile-bg);
}

.profile span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--scaled-15);
    font-weight: 300;
    color: var(--color-white);
}

.profile-menu {
    position: absolute;
    visibility: hidden;
    cursor: auto;
    top: var(--scaled-56);
    right: var(--scaled-11);
    padding: var(--scaled-10) var(--scaled-20);
    width: var(--scaled-250);
    border-radius: var(--scaled-7);
    background: var(--color-nav-bg);
    border: 0.5px solid var(--color-nav-border);
}

.profile-menu.active {
    visibility: visible;
}

.profile-menu::before {
    position: absolute;
    content: "";
    top: -10px;
    right: var(--scaled-18);
    width: var(--scaled-20);
    height: var(--scaled-20);
    transform: rotate(45deg);
    border-top: 0.5px solid var(--color-nav-border);
    background: var(--color-nav-bg);
}

.profile-menu h3 {
    text-align: center;
    font-size: var(--scaled-16);
    font-weight: 400;
    width: 100%;
    margin-top: var(--scaled-5);
    margin-bottom: -5px;
    user-select: none;
    color: var(--color-profile-text-dark);
}

.profile-menu h3 span {
    font-size: var(--scaled-15);
    font-weight: 400;
    user-select: none;
    color: var(--color-profile-text-light);
}

.profile-menu .button {
    user-select: none;
    display: inline-flex;
    cursor: pointer;
    width: var(--scaled-248);
    height: var(--scaled-30);
    padding: var(--scaled-4);
    margin-left: -20px;
    padding-left: var(--scaled-25);
    font-size: var(--scaled-14);
    color: var(--color-profile-text-dark);
}

.profile-menu .button:hover {
    background-color: var(--color-profile-btn-hover);
}

.profile-menu .list {
    display: flex;
    user-select: none;
    padding: var(--scaled-4);
    margin-left: -20px;
    padding-left: var(--scaled-25);
    font-size: var(--scaled-14);
    color: var(--color-profile-text-dark);
}

.profile-menu .icons {
    justify-content: center;
    padding-right: var(--scaled-7);
    font-size: var(--scaled-18);
    color: var(--color-profile-text-dark);
    padding-top: var(--scaled-2);
    user-select: none;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.profile-menu .signout-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--scaled-35);
    border-radius: var(--scaled-3);
    font-family: inherit;
    font-size: var(--scaled-14);
    border: 0.25px solid var(--color-nav-border);
    color: var(--color-profile-text-dark);
    background-color: var(--color-body-bg);
}

.profile-menu .signout-btn:hover {
    background-color: var(--color-profile-btn-hover);
}

.profile-menu .footer {
    user-select: none;
    margin-top: var(--scaled-7);
    text-align: center;
    font-family: inherit;
    font-size: x-small;
}

.profile-menu .footer a {
    text-decoration: none;
    color: var(--color-profile-text-dark);
}

.profile-menu .footer a:hover {
    text-decoration: underline;
}


/* ------------------------ */


/* Select language dropdown */


/* ------------------------ */

.dropdown-container {
    display: inline-flex;
    padding-left: var(--scaled-60);
    text-align: center;
}

.arabic-lang-option {
    font-family: "El Messiri", sans-serif;
}

.dropdown-toggle-custom::after {
    margin-left: 3px;
    vertical-align: middle;
    color: #0f7dac;
}

.dropdown-item-custom {
    font-size: 13px;
}

.dropdown-item-custom .text {
    padding-left: 10px;
    vertical-align: middle;
}

.flag-icon {
    width: 16px;
    height: 16px;
}

.selected-lang-checked {
    vertical-align: middle;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #219653;
}


/* ------------------------ */


/*  quick access menu       */


/* ------------------------ */

.quick-access-menu {
    position: absolute;
    cursor: auto;
    visibility: hidden;
    top: var(--scaled-50);
    right: var(--scaled-124);
    padding: var(--scaled-10) var(--scaled-20);
    width: var(--scaled-200);
    border-radius: var(--scaled-7);
    border: 0.5px solid var(--color-nav-border);
    background: var(--color-nav-bg);
}

.quick-access-menu.active {
    visibility: visible;
}

.quick-access-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 18px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background: var(--color-nav-bg);
    border-top: 0.5px solid var(--color-nav-border);
    border-left: 0.5px solid var(--color-nav-border);
}

.quick-access-menu .header {
    display: flex;
    margin-top: -5px;
    color: var(--color-nav-icons-hover);
}

.quick-access-menu .header span {
    text-align: center;
    font-size: var(--scaled-13);
    font-weight: 400;
    flex: 1;
}

.quick-access-menu .container {
    height: var(--scaled-193);
    width: auto;
    margin-top: -15px;
    margin-bottom: -5px;
    margin-left: -20px;
    margin-right: -20px;
    overflow-y: auto;
    overflow-y: scroll;
    /* or auto */
    scrollbar-width: none;
    /* Firefox */
}


/* ------------------------ */


/*  notifications menu      */


/* ------------------------ */

.notification-menu {
    position: absolute;
    cursor: auto;
    top: var(--scaled-56);
    right: var(--scaled-170);
    padding: 10px 20px;
    width: var(--scaled-275);
    border-radius: 7px;
    border: 0.5px solid var(--color-nav-border);
    visibility: hidden;
    background: var(--color-nav-bg);
}

.notification-menu.active {
    visibility: visible;
}

.notification-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 18px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    border-top: 0.5px solid var(--color-nav-border);
    border-left: 0.5px solid var(--color-nav-border);
    background: var(--color-nav-bg);
}

.notification-menu .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -5px;
    color: var(--color-nav-icons-hover);
}

.notification-menu .header span {
    font-size: var(--scaled-13);
    font-weight: 400;
    flex: 1;
}

.notification-menu .header a {
    z-index: 20;
    font-size: var(--scaled-13);
    text-decoration: none;
    color: var(--color-links-light);
}

.notification-menu .header a:hover {
    text-decoration: underline;
}

.notification-menu .container {
    width: auto;
    overflow-y: auto;
    overflow-y: scroll;
    /* or auto */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    margin-top: -15px;
    margin-left: -20px;
    margin-right: -20px;
    height: 250px;
}

.notification-menu .footer {
    margin-top: -15px;
    margin-bottom: -5px;
    text-align: center;
}

.notification-menu .footer a {
    font-size: var(--scaled-13);
    text-decoration: none;
    color: var(--color-links-light);
}

.notification-menu .footer a:hover {
    text-decoration: underline;
}

.hr-divider {
    border: none;
    height: var(--scaled-1);
    opacity: 100%;
    background-color: var(--color-nav-border);
}

.notification-item {
    transition: background-color 0.3s, color 0.3s;
}

.notification-item:hover {
    background-color: #e9ecef;
    cursor: pointer;
}

.notification-item a {
    color: inherit;
}

.notification-item:hover a {
    text-decoration: underline;
    color: #0056b3;
}


/* ------------------------ */


/*   full-content section   */


/* ------------------------ */

.full-content-container {
    min-height: calc(100vh - var(--scaled-40));
    margin-top: var(--scaled-50);
}

.upper-text {
    margin-top: var(--scaled-27);
    margin-left: var(--scaled-40);
}

.upperDesc-text {
    margin-top: var(--scaled-5);
    margin-left: var(--scaled-50);
}


/* Modify the sidebar and content positioning */


/* RTL Layout Overrides */

html[dir="rtl"] .sidebar-container {
    top: 0;
    left: auto;
    right: 0;
    border-right: none;
    border-left: 0.5px solid var(--color-sidebar-border);
}


/* Move the pseudo-element border to the left side in RTL */

html[dir="rtl"] .sidebar-container::after {
    right: auto;
    left: 0;
}


/* Adjust  content positioning for RTL */

html[dir="rtl"] .page-content {
    margin-left: 0;
    margin-right: var(--size-side-left, 250px);
    padding-bottom: 20px;
}


/* Adjust navbar search positioning for RTL */

html[dir="rtl"] .search-nav-bar {
    margin-right: auto;
    margin-left: var(--scaled-260);
}


/* Fix dropdown menu positioning in RTL */

html[dir="rtl"] .dropdown-menu {
    right: auto;
    left: 0;
}

.scrollable-section {
    padding-top: var(--scaled-10);
    /* Match navbar height */
    padding-bottom: var(--scaled-15);
    min-height: 100vh;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: flex-start;
}

.sidebar-button {
    padding-left: 5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    display: inline-flex;
    cursor: pointer;
    box-sizing: border-box;
    width: 200px;
    height: 30px;
    font-family: inherit;
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 10px;
    user-select: none;
    color: var(--color-sidebar-buttons);
    white-space: nowrap;
}

[dir="rtl"] .sidebar-button {
    margin-left: 0;
    margin-right: 20px;
    padding-left: 15px;
    padding-right: 10px;
}

.sidebar-button i {
    display: inline-flex;
    font-size: 14px;
    font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40;
}

.sidebar-button span {
    font-size: 13px;
    padding-left: 5px;
    padding-right: 8px;
    font-weight: 400;
    white-space: nowrap;
}

[dir="rtl"] .sidebar-button span {
    padding-left: 8px;
    padding-right: 12px;
}

.sidebar-button:hover {
    color: var(--color-sidebar-buttons-hover);
    border-radius: 5px;
    background: var(--color-sidebar-buttons-hover-bg);
}

.sidebar-button.active {
    color: #822c95 !important;
    border-radius: 5px;
    background: var(--color-sidebar-buttons-hover-bg);
    border-left: 2px solid var(--color-sidebar-buttons-active_left_border);
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    /* Keep existing properties */
    border-radius: 5px;
}

.sidebar-button.active i,
.sidebar-button.active i.material-symbols-outlined {
    color: #822c95 !important;
}

.sidebar-button.active span {
    color: #822c95 !important;
}

[dir="rtl"] .sidebar-button.active {
    border-left: none;
    /* remove LTR left border */
    border-right: 2px solid var(--color-sidebar-buttons-active_left_border);
}

.sidebar-vertical-text {
    user-select: none;
    padding-top: 15px;
    padding-bottom: 2px;
    padding-left: 19px;
    font-size: 13px;
    color: var(--color-sidebar-vertical-text);
    white-space: nowrap;
}

.sidebar-divider {
    display: none;
    width: 55%;
    margin-left: 15px;
    margin-top: 17px;
    margin-bottom: 10px;
    color: var(--color-sidebar-divider);
}

.community-text {
    font-size: 12px;
    color: #2c2b2b;
    font-weight: 700;
    margin-bottom: 0px;
}

.community-desc {
    font-size: 12px;
    color: #2c2b2b;
    font-weight: 400;
}

.fixed-section {
    display: flex;
    position: fixed;
    bottom: 0;
    height: 60px;
}

.content {
    flex: 1;
    color: #ffffff;
}

html[dir="rtl"] .content {
    flex: 1;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0;
}


/* Hide all footer elements in page content */

.page-content .footer,
.page-content footer,
.content .footer,
.content footer,
#content .footer,
#content footer,
.page-content>.footer,
.content>.footer {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
}

.page-content .footer {
    background-color: white;
    color: #000000;
    position: absolute;
    bottom: 0;
    height: 60px;
    align-items: center;
    border-top: 0.5px solid var(--color-nav-border);
    background-color: white;
    transition: width 0.3s ease, left 0.3s ease, right 0.3s ease;
    width: calc(100% - var(--size-side-left, 250px));
    padding: 0 20px;
}


/* LTR - Footer positioning when sidebar is expanded */

[dir="ltr"] .page-content .footer {
    display: none;
    right: 0;
    width: calc(100% - var(--size-side-left, 250px));
    padding: 0 20px;
    /* Add horizontal padding */
}


/* LTR - Footer positioning when sidebar is collapsed */

[dir="ltr"] .sidebar-container.collapsed~.page-content .footer {
    display: none;
    left: var(--size-side-collapsed, 80px);
    width: calc(100% - var(--size-side-collapsed, 80px));
    padding: 0 20px;
    /* Add horizontal padding */
}


/* RTL - Footer positioning when sidebar is expanded */

[dir="rtl"] .page-content .footer {
    display: none;
    left: 0;
    width: calc(100% - var(--size-side-left, 250px));
    padding: 0 20px;
    /* Add horizontal padding */
}


/* RTL - Footer positioning when sidebar is collapsed */

[dir="rtl"] .sidebar-container.collapsed~.page-content .footer {
    display: none;
    right: var(--size-side-collapsed, 80px);
    width: calc(100% - var(--size-side-collapsed, 80px));
    padding: 0 20px;
    /* Add horizontal padding */
}


/* Remove the old collapsed footer rule */

.collapsed~.page-content .footer {
    display: none;
    width: calc(100% - 70px);
}


/* Add padding to the main content area */

.page-content>.content {
    padding-left: 20px;
    padding-bottom: 50px;
    margin-bottom: 0 !important;
}

.main-content {
    margin-top: 70px;
    /* Match navbar height */
    position: relative;
    z-index: 1;
    /* Lower than navbar */
}


/* If you have a specific container for your main content, add padding there too */

.main-content-container {
    padding-left: 20px;
    padding-right: 20px;
}


/* For the header area if needed */

.page-header .header-container {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
}

.main-logo {
    margin-left: 8px;
}

.sidebar-top-section {
    height: var(--size-nav-height);
    margin-bottom: 6px;
}


/*------------------------------------*/


/* when the left sidebar is collapsed */


/*------------------------------------*/


/* Sidebar positioning */

.sidebar-container {
    position: fixed;
    bottom: 0;
    top: 0;
    height: 100vh;
    width: var(--size-side-left, 250px);
    transition: all 0.3s ease;
    z-index: 900;
    background: white;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    border-right: 1px solid var(--color-sidebar-border);
    padding: 0 0 0 0;
    overflow: visible;
}


/* LTR sidebar positioning */

[dir="ltr"] .sidebar-container {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    height: 100vh;
}

[dir="rtl"] .sidebar-container {
    position: fixed;
    bottom: 0;
    top: 0;
    height: 100vh;
    width: var(--size-side-left, 250px);
    transition: all 0.3s ease;
    z-index: 900;
    background: white;
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1);
    border-left: 1px solid var(--color-sidebar-border);
    border-right: none;
    padding: 0;
    overflow: visible;
    right: 0;
    left: auto;
}


/* Collapsed state for RTL */

[dir="rtl"] .sidebar-container.collapsed {
    width: var(--size-side-collapsed, 80px) !important;
}


/* Page content adjustment for RTL */

[dir="rtl"] .page-content {
    margin-left: 0;
    margin-right: var(--size-side-left, 250px);
    transition: margin-right 0.3s ease;
}

[dir="rtl"] .sidebar-container.collapsed~.page-content {
    margin-right: var(--size-side-collapsed, 80px);
}

[dir="rtl"] .sidebar-container.collapsed~nav.fixed {
    background-color: #ffffff;
    right: var(--size-side-collapsed, 80px);
    width: calc(100% - var(--size-side-collapsed, 80px));
}

.collapsed .sidebar-container {
    top: 2px;
    width: var(--scaled-70);
    overflow-y: visible;
}


/* Sidebar toggle button styling */

.sidebar-toggle-btn {
    position: absolute;
    top: 10px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .sidebar-toggle-btn {
    right: auto;
    left: -15px;
}

.sidebar-toggle-btn .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.sidebar-container.collapsed .sidebar-toggle-btn .material-symbols-outlined {
    transform: rotate(180deg);
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--scaled-56));
    max-height: 100vh;
    overflow-y: auto;
    transition: margin-left 0.3s ease;
    margin-left: var(--size-side-left, 250px);
    width: calc(100vw - var(--size-side-left, 250px));
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.collapsed~.page-content {
    width: calc(100vw - var(--scaled-80));
}

.collapsed .scrollable-section {
    padding-top: var(--scaled-15);
    height: calc(100vh - var(--scaled-49) - var(--scaled-60));
}

.collapsed .sidebar-button {
    display: inline-flex;
    width: auto;
    height: 30px;
    box-sizing: border-box;
}

.collapsed .sidebar-button span:not(.material-symbols-outlined) {
    display: none;
}

.collapsed .sidebar-button i,
.collapsed .sidebar-button i.material-symbols-outlined,
.collapsed .sidebar-button span.material-symbols-outlined,
.sidebar-container.collapsed .sidebar-button i,
.sidebar-container.collapsed .sidebar-button i.material-symbols-outlined,
.sidebar-container.collapsed .sidebar-button span.material-symbols-outlined,
#sidebar.collapsed .sidebar-button i,
#sidebar.collapsed .sidebar-button i.material-symbols-outlined,
#sidebar.collapsed .sidebar-button span.material-symbols-outlined {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px;
    font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40;
}

.collapsed .sidebar-button:hover {
    width: 50px;
}


/* Ensure icons are always visible in collapsed state - override any conflicting rules */

.collapsed .sidebar-button i.material-symbols-outlined,
.sidebar-container.collapsed .sidebar-button i.material-symbols-outlined,
#sidebar.collapsed .sidebar-button i.material-symbols-outlined {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40 !important;
}

.collapsed .sidebar-button.active {
    background: var(--color-sidebar-buttons-hover-bg);
    border-left: 2.4px solid #822c95;
    padding-left: 5px;
    /* for left border spacing */
    border-radius: 5px;
}

.collapsed .sidebar-button.active i.material-symbols-outlined,
.sidebar-container.collapsed .sidebar-button.active i.material-symbols-outlined,
#sidebar.collapsed .sidebar-button.active i.material-symbols-outlined {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40 !important;
}

.collapsed .sidebar-vertical-text {
    visibility: hidden;
    height: 1px;
    /* whatever space you want */
    line-height: 1px;
    overflow: hidden;
}

.collapsed .community-text {
    display: none;
}

.collapsed .community-desc {
    display: none;
}

.collapsed .collapse-view-button span {
    display: none;
}

.collapsed .collapse-view-button i {
    font-size: 24px;
    transform: rotate(360deg);
}

.collapsed .sidebar-divider {
    display: flex;
}

.collapsed .main-logo {
    margin-bottom: 11px;
}

.collapsed .sidebar-icon {
    display: none;
}

.collapsed .pro-badge {
    display: none;
}

.collapse-view-button {
    display: flex;
    align-items: center;
    border: none;
    border-top: 0.5px solid var(--color-nav-border);
    height: 60px;
    padding: 1px;
    white-space: nowrap;
    text-align: left;
    background-color: transparent;
    color: var(--color-sidebar-buttons);
}

.collapse-view-button i {
    margin-left: 20px;
    font-size: 16px;
    transform: scaleX(-1);
    font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40;
}

.collapse-view-button span {
    font-size: 14px;
    padding-left: 10px;
    white-space: nowrap;
}

.collapse-view-button:hover {
    color: var(--color-sidebar-buttons-hover);
}

@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@media (max-width: var(--scaled-250)) {
    .sidebar-container {
        width: 12%;
        height: 100%;
        animation: slide-in 0.3s forwards;
    }
    .scrollable-section {
        max-height: calc(100vh - var(--size-nav-height));
    }
    .fixed-section {
        display: none;
    }
    .collapsed .sidebar-button {
        height: var(--scaled-35);
        width: 20%;
    }
    .collapsed .sidebar-button span:not(.material-symbols-outlined) {
        display: flex;
    }
    .collapsed .sidebar-button i,
    .collapsed .sidebar-button i.material-symbols-outlined,
    .collapsed .sidebar-button span.material-symbols-outlined {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 14px;
        font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40;
        padding-left: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .collapsed .sidebar-button:hover {
        width: 200px;
    }
    .collapsed .collapse-view-button {
        display: none;
        visibility: hidden;
    }
    .collapsed .sidebar-vertical-text {
        display: flex;
    }
    .collapsed .sidebar-divider {
        display: none;
    }
    .custom-tooltip {
        display: none;
    }
}


/* Active icon purple only in collapsed sidebar */

#sidebar.collapsed .sidebar-button.active i,
#sidebar.collapsed .sidebar-button.active i.material-symbols-outlined,
#sidebar.collapsed .sidebar-button.active span.material-symbols-outlined {
    color: purple !important;
    display: block !important;
    visibility: visible !important;
}


/* Active SVG icon purple only in collapsed sidebar */

#sidebar.collapsed .sidebar-button.active img {
    filter: brightness(0) saturate(100%) hue-rotate(270deg) !important;
}


/* Ensure active icons are NOT purple when sidebar is expanded */

#sidebar .sidebar-button.active i,
#sidebar .sidebar-button.active img {
    color: var(--color-sidebar-buttons-active) !important;
    filter: none !important;
}

.invert-icon {
    color: white;
    background-color: black;
    mix-blend-mode: difference;
    padding: 4px;
    border-radius: 50%;
}


/* Video container styling */

.video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 8px 0;
}

.video-container iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 250px;
    border-radius: 6px;
}

@media (min-width: 768px) {
    .video-container iframe {
        max-height: 300px;
    }
}

.resource-item .video-container {
    width: 100%;
    max-width: 100%;
}


/* Base button styles */


/* Base button styles */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    transition: background-color .2s, transform .05s, box-shadow .2s;
    white-space: nowrap;
    padding: 3px 8px;
    min-height: 36px;
    box-sizing: border-box;
}

.btn-big{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    font-size: 18px;
    text-decoration: none;
    color: #fff !important;
    transition: background-color .2s, transform .05s, box-shadow .2s;
    white-space: nowrap;
    padding: 15px 15px;
    min-height: 36px;
    box-sizing: border-box;
}

.btn:active {
    transform: translateY(1px);
}


/* Primary */

.btn-primary {
    background-color: #6E4FA2;
}
.btn-primary-big:hover {
    background-color: #5a3f85;
}
.btn-primary:hover {
    background-color: #5a3f85;
}


/* Secondary */

.btn-secondary {
    background-color: #717171;
}

.btn-secondary:hover {
    background-color: #4f4f4f;
}


/* Tertiary */

.btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    color: #141524;
    background-color: #ffffff;
    border: 0.5px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    white-space: nowrap;
    min-height: 10px;
    box-sizing: border-box;
}

.btn-tertiary:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.btn-tertiary i {
    font-size: 15px;
    color: #666666;
}


/* -------------------------------------------------------
   RESPONSIVE (Mobile-first)
------------------------------------------------------- */


/* <= 640px */

@media (max-width: 640px) {
    .btn {
        padding: 6px 12px;
        font-size: 12px;
        min-height: 36px;
        gap: 5px;
    }
    .btn .material-symbols-outlined {
        font-size: 16px;
    }
    .btn-tertiary {
        font-size: 12px;
        padding: 6px 12px;
        min-height: 36px;
    }
    .btn-tertiary i {
        font-size: 14px;
    }
}


/* <= 480px */

@media (max-width: 480px) {
    /* Tertiary becomes icon-only */
    .btn-tertiary {
        padding: 6px;
        min-width: 36px;
    }
    .btn-tertiary span {
        display: none;
    }
    /* Primary & Secondary stay text but shrink more */
    .btn-primary,
    .btn-secondary {
        font-size: 12px;
    }
}


/* <= 380px */

@media (max-width: 380px) {
    .btn {
        padding: 4px 8px;
        font-size: 11px;
        min-height: 32px;
    }
    .btn-tertiary {
        padding: 4px 8px;
        font-size: 11px;
        min-height: 32px;
    }
}


/* Dark mode support for btn-tertiary */

.dark .btn-tertiary,
.dark a.btn-tertiary,
.dark button.btn-tertiary,
.dark-theme .btn-tertiary,
.dark-theme a.btn-tertiary,
.dark-theme button.btn-tertiary {
    color: white !important;
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark .btn-tertiary:hover,
.dark a.btn-tertiary:hover,
.dark button.btn-tertiary:hover,
.dark-theme .btn-tertiary:hover,
.dark-theme a.btn-tertiary:hover,
.dark-theme button.btn-tertiary:hover {
    background-color: var(--dark-bg-secondary) !important;
}

.dark .btn-tertiary i,
.dark a.btn-tertiary i,
.dark button.btn-tertiary i,
.dark-theme .btn-tertiary i,
.dark-theme a.btn-tertiary i,
.dark-theme button.btn-tertiary i {
    color: white !important;
}


/* Unified header styling */

.page-header {
    position: relative;
    background-color: #fff;
    /* bg-white */
    border-bottom: 1px solid #e5e7eb;
    /* border-b */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    /* shadow-sm */
}


/* RTL support for page header */

.page-header .header-container {
    margin: 0 auto;
    padding: 24px 16px;
}


/* RTL support for header container */

[dir="rtl"] .page-header .header-container {
    margin: 0 auto;
    padding: 24px 16px;
}

.page-header h1 {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
}

[dir="rtl"] .page-header h1 {
    text-align: right;
}

.page-header p {
    margin-top: 8px;
    color: #4b5563;
    /* text-gray-600 */
}


/* RTL support for header paragraph */

[dir="rtl"] .page-header p {
    text-align: right;
    margin-top: 8px;
}


/* Base nav tab */

.nav-tab {
    color: #3f454c;
    transition: all 0.2s ease;
}

.nav-tab:hover {
    color: #ffffff;
    background-color: #6E4FA2;
}

.nav-tab.activenav {
    background-color: #6E4FA2;
    color: white;
}


/* Active tab */

.active-tab2 {
    background-color: #111827;
    color: #fff;
}

[dir="rtl"] .page-content.collapsed {
    margin-left: 0;
    margin-right: var(--scaled-80);
}

[dir="rtl"] .search-nav-bar {
    margin-left: 0;
    margin-right: var(--size-side-left, 250px);
}

[dir="rtl"] .search-nav-bar.collapsed {
    margin-left: 0;
    margin-right: var(--scaled-80);
}


/* Collapsed state */

.sidebar-container.collapsed {
    width: var(--size-side-collapsed, 80px) !important;
}

[dir="rtl"] .sidebar-container {
    left: auto;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}
html[dir="rtl"] .arrow-icon {
    transform: rotate(180deg);
}

.sidebar-container .scrollable-section {
    margin-top: 0;
}

.collapse-view-button {
    position: absolute;
    right: var(--scaled-20);
    z-index: 2;
    color: #BDC5D3;
    transition: all 0.3s ease;
}

[dir="rtl"] .collapse-view-button {
    right: auto;
    left: var(--scaled-20);
}

.flex.items-center {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.space-x-4>*+* {
    margin-left: 16px;
}

[dir="rtl"] .space-x-4>*+* {
    margin-left: 0;
    margin-right: 1px;
}

.relative {
    position: relative;
}

.search-nav-bar {
    margin-left: 0;
}

[dir="rtl"] .search-nav-bar {
    margin-right: 0;
}

[dir="rtl"] .flex.ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] #language-dropdown {
    right: auto;
    left: 0;
}

[dir="rtl"] .mr-5:not(:first-child) {
    margin-right: 0 !important;
    margin-left: 20px !important;
}

[dir="rtl"] .notification-menu,
[dir="rtl"] .quick-access-menu,
[dir="rtl"] .profile-menu {
    right: auto;
    left: 16px;
}


/* Additional RTL-specific adjustments */

[dir="rtl"] .material-symbols-outlined {
    transform: scaleX(-1);
    /* Flip icons for RTL */
}

[dir="rtl"] .rtl\:space-x-reverse>*+* {
    margin-left: 0;
    margin-right: 16px;
}

[dir="rtl"] .rtl\:ml-2 {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

[dir="rtl"] .rtl\:mr-2 {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

[dir="rtl"] .rtl\:text-right {
    text-align: right;
}

[dir="rtl"] .rtl\:float-right {
    float: right;
}