/* ============================================================================
   Sidebar collapse — reglas globales (NO scoped CSS). Shell v3, sidebar único.

   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.

   Anchos y easing tokenizados en tokens.css:
   --sidebar-w (264px) / --sidebar-w-collapsed (68px) / --ease.

   TODO el bloque va dentro de @media (min-width: 1024px): bajo el breakpoint
   el sidebar es un drawer overlay SIEMPRE expandido (MainLayout.razor.css) y
   estas reglas no deben aplicar.
   ============================================================================ */

@media (min-width: 1024px) {

    /* ─── Estado base del grid (redundancia con MainLayout.razor.css) ────── */
    .app-shell {
        grid-template-columns: var(--sidebar-w, 264px) 1fr;
        transition: grid-template-columns 0.24s var(--ease);
    }

    .app-shell.with-aside {
        grid-template-columns: var(--sidebar-w, 264px) 1fr 320px;
    }

    /* ─── Estado colapsado: forzar 68px en grid Y sidebar ─────────────────── */
    .app-shell.sidebar-collapsed {
        grid-template-columns: var(--sidebar-w-collapsed, 68px) 1fr !important;
    }

    .app-shell.sidebar-collapsed.with-aside {
        grid-template-columns: var(--sidebar-w-collapsed, 68px) 1fr 320px !important;
    }

    /* Forzar ancho directamente en .sidebar-shell — vence cualquier inflado
       por contenido (gotcha de grid items con min-width: auto).
       overflow visible: los tooltips CSS asoman fuera de los 68px. */
    .app-shell.sidebar-collapsed .sidebar-shell {
        width: var(--sidebar-w-collapsed, 68px) !important;
        min-width: var(--sidebar-w-collapsed, 68px) !important;
        max-width: var(--sidebar-w-collapsed, 68px) !important;
        overflow: visible !important;
    }

    /* ─── Ocultar todo el contenido textual cuando colapsado ──────────────── */
    .app-shell.sidebar-collapsed .sidebar-word,
    .app-shell.sidebar-collapsed .sidebar-collapse-btn,
    .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 .sidebar-user-info,
    .app-shell.sidebar-collapsed .sidebar-user-chevron,
    .app-shell.sidebar-collapsed .user-menu {
        display: none !important;
    }

    /* ─── Header: solo el logo, centrado (click en logo = expandir) ────────── */
    .app-shell.sidebar-collapsed .sidebar-header {
        justify-content: center !important;
        padding: 14px 8px 12px !important;
    }

    /* ─── Iconos centrados ─────────────────────────────────────────────────── */
    .app-shell.sidebar-collapsed .nav-section {
        padding: 6px 8px !important;
    }

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

    /* Barra teal del item activo: a 68px no hay padding donde asomar (left:-10px
       la deja flotando FUERA del borde, visible por el overflow:visible de los
       tooltips). El fondo activo ya marca el estado — la barra se omite. */
    .app-shell.sidebar-collapsed .nav-item.active::before {
        display: none !important;
    }

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

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

    /* Sin scroll interno cuando colapsado (todo cabe; y los tooltips
       necesitan overflow visible para asomar a la derecha). */
    .app-shell.sidebar-collapsed .sidebar-scroll {
        overflow: visible !important;
    }

    /* ─── Dot teal: "hay pendientes" en items con badge > 0 ────────────────── */
    .app-shell.sidebar-collapsed .nav-dot {
        display: block !important;
        position: absolute;
        top: 7px;
        right: 12px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-teal);
        border: 2px solid var(--bg-sidebar);
    }

    /* ─── Tooltip estilizado a la derecha (data-tip) ───────────────────────── */
    .app-shell.sidebar-collapsed .nav-item::after,
    .app-shell.sidebar-collapsed .sidebar-logo::after,
    .app-shell.sidebar-collapsed .sidebar-user::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        background: var(--text-primary);
        color: #FFFFFF;
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
        z-index: calc(var(--z-overlay) + 1);
    }

    .app-shell.sidebar-collapsed .nav-item:hover::after,
    .app-shell.sidebar-collapsed .sidebar-logo:hover::after,
    .app-shell.sidebar-collapsed .sidebar-user:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}