/* Sidebar Menu - Persistent Visible Portion with Overlay Expansion */
.sidebar {
    position: fixed;
    left: -220px;
    /* Show 55px (20% of 275px width) */
    top: 0;
    width: 275px;
    height: 100%;
    transition: left 0.3s ease, right 0.3s ease, z-index 0s;
    z-index: 50;
    /* Higher z-index when collapsed to appear in front of hero content */
}

.sidebar:hover,
.sidebar.sidebar-open {
    left: 0;
    z-index: 1001;
    /* Higher z-index when expanded to overlay content */
}

/* RTL Sidebar */
html[dir="rtl"] .sidebar {
    left: auto;
    right: -220px;
    /* Show 55px (20% of 275px width) */
    transition: right 0.3s ease, left 0.3s ease, z-index 0s;
}

html[dir="rtl"] .sidebar:hover,
html[dir="rtl"] .sidebar.sidebar-open {
    left: auto;
    right: 0;
    z-index: 1001;
    /* Higher z-index when expanded to overlay content */
}

.sidebar-container {
    display: flex;
    height: 100%;
}

.sidebar-left {
    flex: 0 0 80%;
    background-color: rgba(12, 36, 48, 0.98);
    padding-top: 60px;
    overflow-y: auto;
}

/* Custom Scrollbar Styling */
.sidebar-left::-webkit-scrollbar {
    width: 1px;
}

.sidebar-left::-webkit-scrollbar-track {
    background: #000;
}

.sidebar-left::-webkit-scrollbar-thumb {
    background: #fff;
}

.sidebar-left::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

.sidebar-right {
    flex: 0 0 20%;
    background-color: #0c2430;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-right-text {
    font-size: 20px;
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 0.5em;
}

/* Remove letter spacing for RTL Arabic text */
html[dir="rtl"] .sidebar-right-text {
    letter-spacing: 0;
}

/* Vertical Text Utility */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* RTL Vertical Text */
html[dir="rtl"] .vertical-text {
    writing-mode: vertical-lr;
    transform: rotate(0deg);
}

/* Main Menu List */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Training Nav Items (Main Level) */
.sidebar .training-nav-item {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    font-size: 16px;
    transition: background-color 0.3s;
    position: relative;
}

.sidebar .training-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar .training-nav-item.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* Font Awesome arrows for items with children */
.sidebar .training-nav-item.has-children::after {
    content: '\f078';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
}

.sidebar .training-nav-item.has-children.active::after {
    color: rgba(255, 255, 255, 1);
}

/* RTL Arrow Positioning */
html[dir="rtl"] .sidebar .training-nav-item.has-children::after {
    right: auto;
    left: 15px;
}

/* Regular links (non-nav items) */
.menu li>a:not(.training-nav-item) {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.menu li>a:not(.training-nav-item):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu li>a:not(.training-nav-item).active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* Training Submenus */
.training-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.05);
    display: none;
}

.training-submenu.active {
    display: block;
}

.training-submenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.training-submenu a {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 12px 25px;
    font-size: 14px;
    transition: background-color 0.3s;
    border-left: 3px solid transparent;
}

.training-submenu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-left-color: rgba(255, 255, 255, 0.3);
}

.training-submenu a.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* Training Sub-Submenus (deeper nesting) */
.training-sub-submenu {
    padding-left: 10px;
}

.training-sub-submenu a {
    font-size: 13px;
    padding: 10px 30px;
    border-left: 2px solid transparent;
}

.training-sub-submenu a:hover {
    border-left-color: rgba(255, 255, 255, 0.3);
}

.training-sub-submenu a.active {
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* Content spacing to account for persistent sidebar portion */
@media (min-width: 769px) {

    /* Desktop: Add left margin to content to start after visible sidebar */
    .training-courses-container,
    .course-content,
    .main-content,
    body>main,
    /* About page hero section */
    .flex.flex-col.md\\:flex-row.h-screen.w-full,
    /* About page content sections */
    section.bg-white.py-20.px-8.md\\:px-12.relative {
        margin-left: 55px;
    }

    /* RTL: Add right margin instead */
    html[dir="rtl"] .training-courses-container,
    html[dir="rtl"] .course-content,
    html[dir="rtl"] .main-content,
    html[dir="rtl"] body>main,
    /* About page hero section */
    html[dir="rtl"] .flex.flex-col.md\\:flex-row.h-screen.w-full,
    /* About page content sections */
    html[dir="rtl"] section.bg-white.py-20.px-8.md\\:px-12.relative {
        margin-left: 0;
        margin-right: 55px;
    }
}