/* ════════════════════════════════════════════════════════════════════
   📁 wwwroot/css/sidebar-menu.css
   🏛️ SIDEBAR MENU — Ministerial Government Theme
   
   متناسق مع الـ dashboard tokens والـ admin skin
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   📦 BASE MENU CONTAINER
   ════════════════════════════════════════════════════════════════════ */

.bg-menu-theme {
    background: #ffffff !important;
    border-left: 2px solid var(--gov-primary);
    box-shadow: -2px 0 12px rgba(31, 78, 121, 0.04);
}


/* ════════════════════════════════════════════════════════════════════
   🏷️ BRAND (المنصة القانونية)
   ════════════════════════════════════════════════════════════════════ */

.app-brand {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gov-border);
}

/* ════════════════════════════════════════════════════════════════════
   🏷️ BRAND (المنصة القانونية) - Fixed Truncation
   ════════════════════════════════════════════════════════════════════ */

.app-brand {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gov-border);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: visible !important;
    min-width: 0;
}

.app-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow: visible !important;
    text-decoration: none;
}

.app-brand-text {
    color: var(--gov-primary) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    letter-spacing: 0.2px;
    /* 🆕 منع الـ truncation */
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0;
    line-height: 1.3;
}

.app-brand-logo {
    flex-shrink: 0;
}

    .app-brand-logo img {
        transition: transform 0.25s ease;
        max-width: 32px;
        height: auto;
    }

.app-brand:hover .app-brand-logo img {
    transform: scale(1.05);
}


/* 🆕 منع الـ collapse في الـ sidebar */
.layout-menu .app-brand,
.bg-menu-theme .app-brand {
    overflow: visible !important;
}

.app-brand-logo img {
    transition: transform 0.25s ease;
}

.app-brand:hover .app-brand-logo img {
    transform: scale(1.05);
}


/* ════════════════════════════════════════════════════════════════════
   🔗 MENU LINKS - Default State
   ════════════════════════════════════════════════════════════════════ */

.bg-menu-theme .menu-link {
    color: var(--gov-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 11px 16px !important;
    margin: 3px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    letter-spacing: 0.1px;
    line-height: 1.5;
}


    /* ─── Icons ─── */
    .bg-menu-theme .menu-link .menu-icon {
        color: var(--gov-primary) !important;
        opacity: 0.85;
        font-size: 19px !important;
        transition: all 0.2s ease;
        margin-inline-end: 10px;
    }


    /* ─── Hover State ─── */
    .bg-menu-theme .menu-link:hover {
        background: var(--gov-card-hover) !important;
        color: var(--gov-primary) !important;
        transform: translateX(-2px);
    }

[dir="rtl"] .bg-menu-theme .menu-link:hover {
    transform: translateX(2px);
}

.bg-menu-theme .menu-link:hover .menu-icon {
    color: var(--gov-primary) !important;
    opacity: 1;
    transform: scale(1.05);
}


/* ════════════════════════════════════════════════════════════════════
   ✅ ACTIVE STATE
   ════════════════════════════════════════════════════════════════════ */

.bg-menu-theme .menu-item.active > .menu-link {
    background: linear-gradient(135deg, rgba(31, 78, 121, 0.1), rgba(31, 78, 121, 0.05)) !important;
    color: var(--gov-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(31, 78, 121, 0.08);
}

    /* Active indicator (RTL = border on right) */
    .bg-menu-theme .menu-item.active > .menu-link::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inset-inline-end: 0;
        width: 3px;
        height: 70%;
        background: var(--gov-primary);
        border-radius: 3px 0 0 3px;
    }

[dir="rtl"] .bg-menu-theme .menu-item.active > .menu-link::before {
    border-radius: 0 3px 3px 0;
}

.bg-menu-theme .menu-item.active > .menu-link .menu-icon {
    color: var(--gov-primary) !important;
    opacity: 1;
}


/* ────  Open Parent (لما الـ child active) ─── */
.bg-menu-theme .menu-item.open > .menu-link {
    color: var(--gov-primary) !important;
    font-weight: 700 !important;
}

    .bg-menu-theme .menu-item.open > .menu-link .menu-icon {
        opacity: 1;
    }


/* ════════════════════════════════════════════════════════════════════
   📁 SUB-MENU
   ════════════════════════════════════════════════════════════════════ */

.bg-menu-theme .menu-sub {
    background: rgba(31, 78, 121, 0.02);
    border-radius: 8px;
    margin: 4px 12px;
    padding: 4px 0;
}

    .bg-menu-theme .menu-sub .menu-link {
        color: var(--gov-muted) !important;
        font-weight: 500 !important;
        font-size: 13.5px !important;
        padding: 9px 14px !important;
        margin: 2px 6px;
    }

        .bg-menu-theme .menu-sub .menu-link .menu-icon {
            font-size: 16px !important;
            opacity: 0.7;
        }


        /* ─── Sub-menu Hover ─── */
        .bg-menu-theme .menu-sub .menu-link:hover {
            color: var(--gov-primary) !important;
            background: var(--gov-card-hover) !important;
        }

            .bg-menu-theme .menu-sub .menu-link:hover .menu-icon {
                opacity: 1;
            }


    /* ─── Active Sub-item ─── */
    .bg-menu-theme .menu-sub .menu-item.active > .menu-link {
        color: var(--gov-primary) !important;
        font-weight: 700 !important;
        background: rgba(31, 78, 121, 0.08) !important;
    }

        .bg-menu-theme .menu-sub .menu-item.active > .menu-link .menu-icon {
            color: var(--gov-primary) !important;
            opacity: 1;
        }


/* ════════════════════════════════════════════════════════════════════
   ➖ DIVIDER & HEADERS
   ════════════════════════════════════════════════════════════════════ */

.bg-menu-theme .menu-divider {
    border-color: var(--gov-border);
    margin: 12px 16px;
}

.bg-menu-theme .menu-header {
    color: var(--gov-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 20px 8px !important;
    opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════════════
   🔻 CHEVRON / TOGGLE ARROW
   ════════════════════════════════════════════════════════════════════ */

.bg-menu-theme .menu-link::after {
    color: var(--gov-muted);
    transition: transform 0.25s ease;
    font-size: 16px;
}

.bg-menu-theme .menu-item.open > .menu-link::after {
    color: var(--gov-primary);
}


/* ════════════════════════════════════════════════════════════════════
   📜 SCROLLBAR (داخل الـ sidebar)
   ════════════════════════════════════════════════════════════════════ */

.bg-menu-theme .menu-inner::-webkit-scrollbar {
    width: 5px;
}

.bg-menu-theme .menu-inner::-webkit-scrollbar-track {
    background: transparent;
}

.bg-menu-theme .menu-inner::-webkit-scrollbar-thumb {
    background: var(--gov-border);
    border-radius: 4px;
}

    .bg-menu-theme .menu-inner::-webkit-scrollbar-thumb:hover {
        background: var(--gov-primary);
        opacity: 0.5;
    }


/* ════════════════════════════════════════════════════════════════════
   📱 RESPONSIVE - Mobile Sidebar
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199.98px) {
    .bg-menu-theme {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
    }

        .bg-menu-theme .menu-link {
            font-size: 14.5px !important;
            padding: 12px 18px !important;
        }
}


/* ════════════════════════════════════════════════════════════════════
   🌙 DARK MODE
   ════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .bg-menu-theme,
.dark-style .bg-menu-theme {
    background: var(--gov-surface) !important;
    border-left-color: rgba(125, 183, 232, 0.3);
}


/* ─── Brand in dark ─── */
html[data-theme="dark"] .app-brand-text,
.dark-style .app-brand-text {
    color: #7db7e8 !important;
}


/* ─── Menu links in dark ─── */
html[data-theme="dark"] .bg-menu-theme .menu-link,
.dark-style .bg-menu-theme .menu-link {
    color: var(--gov-text) !important;
}

    html[data-theme="dark"] .bg-menu-theme .menu-link .menu-icon,
    .dark-style .bg-menu-theme .menu-link .menu-icon {
        color: #7db7e8 !important;
    }


    /* ─── Hover in dark ─── */
    html[data-theme="dark"] .bg-menu-theme .menu-link:hover,
    .dark-style .bg-menu-theme .menu-link:hover {
        background: rgba(125, 183, 232, 0.1) !important;
        color: #7db7e8 !important;
    }


/* ─── Active in dark ─── */
html[data-theme="dark"] .bg-menu-theme .menu-item.active > .menu-link,
.dark-style .bg-menu-theme .menu-item.active > .menu-link {
    background: linear-gradient(135deg, rgba(125, 183, 232, 0.18), rgba(125, 183, 232, 0.08)) !important;
    color: #7db7e8 !important;
}

    html[data-theme="dark"] .bg-menu-theme .menu-item.active > .menu-link::before,
    .dark-style .bg-menu-theme .menu-item.active > .menu-link::before {
        background: #7db7e8;
    }


/* ─── Sub-menu in dark ─── */
html[data-theme="dark"] .bg-menu-theme .menu-sub,
.dark-style .bg-menu-theme .menu-sub {
    background: rgba(125, 183, 232, 0.04);
}

    html[data-theme="dark"] .bg-menu-theme .menu-sub .menu-link,
    .dark-style .bg-menu-theme .menu-sub .menu-link {
        color: var(--gov-muted) !important;
    }

    html[data-theme="dark"] .bg-menu-theme .menu-sub .menu-item.active > .menu-link,
    .dark-style .bg-menu-theme .menu-sub .menu-item.active > .menu-link {
        background: rgba(125, 183, 232, 0.15) !important;
        color: #7db7e8 !important;
    }


/* ─── Divider in dark ─── */
html[data-theme="dark"] .bg-menu-theme .menu-divider,
.dark-style .bg-menu-theme .menu-divider {
    border-color: rgba(255, 255, 255, 0.1);
}


/* ════════════════════════════════════════════════════════════════════
   ✨ ANIMATIONS
   ════════════════════════════════════════════════════════════════════ */

@keyframes sidebarMenuFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[dir="rtl"] @keyframes sidebarMenuFadeIn {
    from

{
    opacity: 0;
    transform: translateX(10px);
}

to {
    opacity: 1;
    transform: translateX(0);
}

}

.bg-menu-theme .menu-item {
    animation: sidebarMenuFadeIn 0.3s ease backwards;
}

    .bg-menu-theme .menu-item:nth-child(1) {
        animation-delay: 0.05s;
    }

    .bg-menu-theme .menu-item:nth-child(2) {
        animation-delay: 0.08s;
    }

    .bg-menu-theme .menu-item:nth-child(3) {
        animation-delay: 0.11s;
    }

    .bg-menu-theme .menu-item:nth-child(4) {
        animation-delay: 0.14s;
    }

    .bg-menu-theme .menu-item:nth-child(5) {
        animation-delay: 0.17s;
    }

    .bg-menu-theme .menu-item:nth-child(6) {
        animation-delay: 0.2s;
    }