/* ==========================================================================
   JavanehSchool - Menu & Navigation Styles
   ========================================================================== */

/* Sidebar scrollbar */
.nav-menu::-webkit-scrollbar { width: 4px; }
.nav-menu::-webkit-scrollbar-track { background: transparent; }
.nav-menu::-webkit-scrollbar-thumb { background: var(--border-subtle, #E5E7EB); border-radius: 10px; }
.nav-menu::-webkit-scrollbar-thumb:hover { background: #D1D5DB; }

/* =======================================================
   Mini drawer — text hidden, icons centered
   ======================================================= */
.mud-drawer-mini .mud-nav-link,
.mud-drawer--closed.mud-drawer-mini .mud-nav-link {
    padding: 1px 15px;
    position: relative;
}

/* Hide all text content inside nav-link when mini (except icon) */
.mud-drawer-mini:not(:hover) .mud-nav-link > *:not(.mud-nav-link-icon):not(svg):not(.mud-icon-root) {
    opacity: 0;
    visibility: hidden;
    width: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .15s ease;
}

/* Hide nav-group header text (keep icon) */
.mud-drawer-mini:not(:hover) .mud-nav-group-header .mud-nav-link-text,
.mud-drawer-mini:not(:hover) .mud-nav-link-text,
.mud-drawer-mini:not(:hover) .mud-nav-link-expand-icon,
.mud-drawer-mini:not(:hover) .mud-badge-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* Hide children of nav-groups when mini (so only parent icons show) */
.mud-drawer-mini:not(:hover) .mud-nav-group .mud-collapse-container,
.mud-drawer-mini:not(:hover) .mud-collapse-entered,
.mud-drawer-mini:not(:hover) .mud-nav-group .mud-nav-link-child {
    display: none !important;
}

/* Logo text, user card, theme toggle label — hide when mini */
.mud-drawer-mini:not(:hover) .mud-typography,
.mud-drawer-mini:not(:hover) .sidebar-user-name,
.mud-drawer-mini:not(:hover) .sidebar-user-role {
    opacity: 0 !important;
    visibility: hidden !important;
    max-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap;
}

/* Logo avatar stays visible */
.mud-drawer-mini:not(:hover) .mud-avatar { opacity: 1 !important; visibility: visible !important; }

/* Notification bell hide when mini */
.mud-drawer-mini:not(:hover) .notification-bell-wrapper { display: none !important; }

/* Hover on drawer expands — restore everything */
.mud-drawer-mini:hover * {
    transition: opacity .2s ease, visibility .2s ease;
}

/* Smooth drawer transition */
.mud-drawer { transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

/* Profile card collapse when mini */
.mud-drawer-mini:not(:hover) .d-flex.align-center.px-3 {
    padding: 18px 7px 5px 5px !important;
}

/* Remove default padding from drawer content */
.mud-drawer-content { padding: 0 !important; }

/* AppBar dense */
.mud-appbar-dense { min-height: 56px; }

/* ==========================================================================
   Dark Mode — Menu & Sidebar
   (از html.dark-mode استفاده می‌کنیم نه prefers-color-scheme
    تا کنترل برنامه‌ای داشته باشیم)
   ========================================================================== */

html.dark-mode .school-appbar,
html.dark-mode .mud-appbar {
    background: #1E293B !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .appbar-school-name { color: #F1F5F9 !important; }

html.dark-mode .mud-drawer-paper,
html.dark-mode .modern-drawer .mud-drawer-content {
    background: #1E293B !important;
    border-left-color: #334155 !important;
}

html.dark-mode .sidebar-logo-text { color: #F1F5F9 !important; }

/* Nav links در دارک مود — MudBlazor با ThemeProvider این را هندل می‌کند
   اما برای اطمینان از رنگ درست: */
html.dark-mode .mud-nav-link {
    color: #CBD5E1 !important;
}

html.dark-mode .mud-nav-link:hover {
    background-color: #334155 !important;
    color: #60A5FA !important;
}

html.dark-mode .mud-nav-link.active {
    background-color: rgba(96, 165, 250, 0.1) !important;
    color: #60A5FA !important;
}

html.dark-mode .mud-nav-group-header { color: #94A3B8 !important; }

html.dark-mode .mud-divider { border-color: #334155 !important; }

html.dark-mode .user-section .mud-text { color: #F1F5F9 !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1279px) {
    .mud-main-content { padding-top: 56px; }
}