.navbar {
    transition: all 0.3s ease;
}

/*.navbar.mini_sidebar {
width: 100px;
}


.navbar .navbar-nav > li > a span, .navbar.mini_sidebar .navbar-nav > li > a:after {
transition: opacity 0.3s ease, margin 0.3s ease;
}

.navbar.mini_sidebar .navbar-nav > li > a span, .navbar.mini_sidebar .navbar-nav > li > a:after{
opacity: 0;
margin-left: 0;
}


.navbar .navbar-nav > li + div {
max-height: 500px;
opacity: 1;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}

.navbar.mini_sidebar .navbar-nav > li + div {
max-height: 0;
opacity: 0;
}

.navbar.mini_sidebar:hover {
width: 280px;
}

.navbar.mini_sidebar:hover .navbar-nav > li > a span {
opacity: 1;
margin-left: 0.5rem;
}

.navbar.mini_sidebar:hover .navbar-nav > li + div {
max-height: 500px;
opacity: 1;
}*/



/* التحول السلس */
.toggle-icon .line {
    transition: all 0.3s ease;
    transform-origin: center;
}

/* عند التبديل إلى condensed تتحول الأيقونة إلى X */
.toggle-icon.condensed .line1 {
    transform: translateY(5px) rotate(45deg);
}

.toggle-icon.condensed .line2 {
    opacity: 0;
}

.toggle-icon.condensed .line3 {
    transform: translateY(-5px) rotate(-45deg);
}

/* ==============================================
   FOCUS MODE — إخفاء القائمة (فقط للشاشات الكبيرة)
   ============================================== */
@media (min-width: 992px) {

    /* إخفاء القائمة العمودية (Sidebar) */
    html.focus-mode[data-navigation-layout="vertical"] .navbar-vertical {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1060;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        top: 0;
        bottom: 0;
        height: 100vh;
    }

    html.focus-mode[data-navigation-layout="vertical"][dir="RTL"] .navbar-vertical {
        transform: translateX(100%);
    }

    /* إلغاء مساحة الـ sidebar من الـ main */
    html.focus-mode[data-navigation-layout="vertical"] main {
        margin-inline-start: 0 !important;
        padding-inline-start: 0 !important;
    }

    /* إظهار القائمة العمودية عند التفعيل */
    html.focus-mode.nav-open[data-navigation-layout="vertical"] .navbar-vertical {
        transform: translateX(0) !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) !important;
    }

    /* Backdrop */
    html.focus-mode.nav-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.10);
        z-index: 1055;
        animation: fadeIn 0.2s ease;
    }

    /* إخفاء القائمة الأفقية بشكل ناعم */
    html.focus-mode[data-navigation-layout="horizontal"] .horizontal-navbar {
        position: absolute;
        top: 60px !important;
        left: 7px !important;
        right: 7px !important;
        z-index: 1060 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.98);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.25s ease !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        border-radius: 8px !important;
        pointer-events: none;
    }

    /* إظهار القائمة الأفقية كـ overlay عند فتحها بشكل ناعم */
    html.focus-mode.nav-open[data-navigation-layout="horizontal"] .horizontal-navbar {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(10px) scale(1) !important;
        pointer-events: auto !important;
    }

    /* إخفاء شريط الوصول السريع في Focus Mode */
    html.focus-mode .quick-access-toolbar {
        display: none !important;
    }
}

/* زر التفعيل — تأثيرات (يظهر في الهيدر على الشاشات الكبيرة فقط عبر التنسيقات العامة) */
.focus-mode-toggle {
    transition: all 0.2s ease;
    position: relative;
}

@media (max-width: 991.98px) {

    /* إخفاء زر التفعيل تلقائياً في شاشات الجوال لأن القائمة تتحول لزر همبرغر أصلي */
    .focus-mode-toggle {
        display: none !important;
    }
}

.focus-mode-toggle:hover {
    transform: scale(1.05);
}

html.focus-mode.nav-open .focus-mode-toggle {
    background-color: #e3e8ff !important;
    color: #333 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   Condensed Sidebar Floating Menu Names on Hover
   ========================================================================== */
@media (min-width: 992px) {
    /* Allow floating tooltips to escape the sidebar wrapper */
    html[data-sidebar-behaviour="condensed"] .navbar-vertical,
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-collapse,
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav {
        overflow: visible !important;
    }

    /* Target the text span inside the root nav-links */
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item {
        position: relative !important;
    }

    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link {
        position: relative !important;
    }

    /* Style and position the tooltip (shared base styles) */
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link > span {
        display: block !important;
        position: absolute !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        color: #4a5568 !important;
        padding: 0.5rem 0.85rem !important;
        border-radius: 6px !important;
        font-size: 0.8rem !important;
        font-weight: 550 !important;
        white-space: nowrap !important;
        z-index: 99999 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* === CASE A: Single link (No dropdown) - tooltip on the SIDE of the icon === */
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span {
        top: 50% !important;
        bottom: auto !important;
        left: 80px !important;
        right: auto !important;
        transform: translateY(-50%) translateX(5px) !important;
    }

    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        right: 100% !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        border-width: 5px !important;
        border-style: solid !important;
        border-color: transparent rgba(255, 255, 255, 0.95) transparent transparent !important;
    }

    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(10px) !important;
    }

    /* RTL support for CASE A: show on the right of the icon (left side of screen) */
    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span {
        left: auto !important;
        right: 80px !important;
        transform: translateY(-50%) translateX(-5px) !important;
    }

    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span::after,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span::after {
        left: 100% !important;
        right: auto !important;
        border-color: transparent transparent transparent rgba(255, 255, 255, 0.95) !important;
    }

    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(-10px) !important;
    }


    /* === CASE B: Link with dropdown - tooltip vertically ABOVE the icon === */
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span,
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span {
        bottom: 100% !important;
        top: auto !important;
        left: 80px !important;
        right: auto !important;
        transform: translateY(-5px) !important;
    }

    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span::after,
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span::after {
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        left: 15px !important;
        right: auto !important;
        transform: none !important;
        border-width: 5px !important;
        border-style: solid !important;
        border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent !important;
    }

    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link[data-bs-toggle="collapse"] > span,
    html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link.dropdown-toggle > span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-10px) !important;
    }

    /* RTL support for CASE B */
    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span,
    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span {
        left: auto !important;
        right: 80px !important;
        transform: translateY(-5px) !important;
    }

    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span::after,
    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span::after,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span::after,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span::after {
        left: auto !important;
        right: 15px !important;
        border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent !important;
    }

    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link[data-bs-toggle="collapse"] > span,
    html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link.dropdown-toggle > span,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link[data-bs-toggle="collapse"] > span,
    html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item:hover > .nav-link.dropdown-toggle > span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-10px) !important;
    }

    /* Dark Theme overrides for the vertical sidebar tooltip */
    [data-theme="dark"] html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link > span {
        background-color: rgba(35, 38, 48, 0.96) !important;
        color: #cbd5e0 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* CASE A Dark Arrow (pointing to the icon) */
    [data-theme="dark"] html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span::after {
        border-color: transparent rgba(35, 38, 48, 0.96) transparent transparent !important;
    }
    [data-theme="dark"] html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span::after,
    [data-theme="dark"] html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link:not([data-bs-toggle="collapse"]):not(.dropdown-toggle) > span::after {
        border-color: transparent transparent transparent rgba(35, 38, 48, 0.96) !important;
    }

    /* CASE B Dark Arrow (pointing down) */
    [data-theme="dark"] html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span::after,
    [data-theme="dark"] html[data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span::after {
        border-color: rgba(35, 38, 48, 0.96) transparent transparent transparent !important;
    }
    [data-theme="dark"] html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span::after,
    [data-theme="dark"] html[dir="RTL"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span::after,
    [data-theme="dark"] html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] > span::after,
    [data-theme="dark"] html[dir="rtl"][data-sidebar-behaviour="condensed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle > span::after {
        border-color: rgba(35, 38, 48, 0.96) transparent transparent transparent !important;
    }

    /* Prevent layout flickering/wrapping of text spans when expanding the sidebar */
    html[data-sidebar-behaviour="fixed"] .navbar-vertical .navbar-nav > .nav-item > .nav-link > span {
        animation: fadeInDelayed 0.3s ease forwards;
    }

    @keyframes fadeInDelayed {
        0% {
            opacity: 0;
            visibility: hidden;
        }
        60% {
            opacity: 0;
            visibility: hidden;
        }
        100% {
            opacity: 1;
            visibility: visible;
        }
    }
}