/* ============================================================================
   Sidebar collapse — reglas globales (NO scoped CSS).

   Vive aquí (no en Sidebar.razor.css) porque los selectores cruzan dos
   componentes: el flag `.sidebar-collapsed` está en MainLayout sobre
   `.app-shell`, mientras que los elementos a esconder/redimensionar están
   en Sidebar y UserMenu. Blazor scoped CSS hace esto frágil — global es
   garantía.

   Estrategia: ancho fijo 64px en `.sidebar-shell` con !important + redundancia
   en grid-template-columns + min-width 0 baseline para vencer el gotcha de
   "min-content" en grid items.
   ============================================================================ */

/* ─── Estado base del grid (redundancia con MainLayout.razor.css) ──────── */
.app-shell {
    grid-template-columns: 72px 280px 1fr;
    transition: grid-template-columns 0.25s ease;
}

.app-shell.with-aside {
    grid-template-columns: 72px 280px 1fr 320px;
}

/* ─── Estado colapsado: forzar 64px en grid Y sidebar ──────────────────── */
.app-shell.sidebar-collapsed {
    grid-template-columns: 72px 64px 1fr !important;
}

.app-shell.sidebar-collapsed.with-aside {
    grid-template-columns: 72px 64px 1fr 320px !important;
}

/* Forzar ancho directamente en .sidebar-shell — vence cualquier inflado
   por contenido (gotcha de grid items con min-width: auto). */
.app-shell.sidebar-collapsed .sidebar-shell {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    overflow: hidden !important;
}

/* ─── Ocultar todo el contenido textual cuando colapsado ───────────────── */
.app-shell.sidebar-collapsed .sidebar-brand-block,
.app-shell.sidebar-collapsed .sidebar-brand,
.app-shell.sidebar-collapsed .sidebar-brand-sub,
.app-shell.sidebar-collapsed .nav-text,
.app-shell.sidebar-collapsed .nav-arrow,
.app-shell.sidebar-collapsed .nav-badge,
.app-shell.sidebar-collapsed .nav-section-label,
.app-shell.sidebar-collapsed .nav-children,
.app-shell.sidebar-collapsed .nav-child,
.app-shell.sidebar-collapsed .nav-child-badge,
.app-shell.sidebar-collapsed .sidebar-user-info,
.app-shell.sidebar-collapsed .sidebar-user-chevron,
.app-shell.sidebar-collapsed .user-menu {
    display: none !important;
}

/* ─── Reajustar paddings para iconos centrados ─────────────────────────── */
.app-shell.sidebar-collapsed .sidebar-header {
    padding: 22px 12px 18px !important;
    justify-content: center !important;
}

.app-shell.sidebar-collapsed .nav-section {
    padding: 6px 8px !important;
}

.app-shell.sidebar-collapsed .nav-item {
    justify-content: center !important;
    padding: 9px 0 !important;
    gap: 0 !important;
}

.app-shell.sidebar-collapsed .nav-icon {
    margin: 0 auto !important;
}

.app-shell.sidebar-collapsed .sidebar-user {
    padding: 12px !important;
    justify-content: center !important;
}

/* Esconder el scrollbar interno cuando colapsado (no hay nada que scrollear) */
.app-shell.sidebar-collapsed .sidebar-scroll {
    overflow: hidden !important;
}

/* ─── Rotar el chevron del botón colapsar ──────────────────────────────── */
.app-shell.sidebar-collapsed .sidebar-collapse-btn .msr,
.app-shell.sidebar-collapsed .sidebar-collapse-btn .material-symbols-rounded {
    transform: rotate(180deg);
}