/* ===================================================================
   DoberCheck — Mini-sidebar con expansión al pasar el mouse (hover).

   Por defecto el sidebar queda colapsado: solo el ICONO del logo arriba +
   los iconos de navegación. Al pasar el mouse se expande como OVERLAY (por
   encima del contenido, sin moverlo) y muestra el logo completo, los textos
   y el botón ‹/› para fijarlo abierto. Solo en escritorio (≥1024px); en móvil
   se respeta el drawer nativo de Filament.

   Aplica a ambos paneles (admin y store): el CSS se registra global vía
   FilamentAsset en AppServiceProvider.
   =================================================================== */

@media (min-width: 1024px) {
    /* Sidebar como capa fija + opaca, para que el hover lo expanda por encima
       del contenido sin reflujo. Filament en desktop lo deja sticky,
       transparente y SIN transición: lo invertimos. */
    .fi-sidebar {
        position: fixed !important;
        inset-inline-start: 0 !important;
        /* z-index alto (Filament le pone lg:z-0). Necesario para que el overlay
           del hover quede POR ENCIMA del topbar (z-20); si no, el topbar tapaba
           el logo completo y se veía cortado ("Dobercheck" → "D"). */
        z-index: 50 !important;
        background-color: #ffffff !important;
        border-inline-end: 1px solid rgba(17, 24, 39, 0.06);
        transition: width 0.18s ease !important;
    }
    .dark .fi-sidebar {
        background-color: #111827 !important; /* gray-900 */
        border-inline-end-color: rgba(255, 255, 255, 0.06);
    }

    /* Ancho colapsado: solo iconos. */
    .fi-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width) !important;
    }

    /* El contenido reserva el ancho del mini-sidebar; si está fijado abierto,
       reserva el ancho completo. */
    .fi-main-ctn {
        padding-inline-start: var(--collapsed-sidebar-width);
        transition: padding-inline-start 0.18s ease;
    }
    .fi-main-ctn.fi-main-ctn-sidebar-open {
        padding-inline-start: var(--sidebar-width);
    }

    /* Hover: expandir a ancho completo como overlay (el contenido NO se mueve). */
    .fi-sidebar:not(.fi-sidebar-open):hover {
        width: var(--sidebar-width) !important;
        box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28);
    }

    /* Mostrar los textos del menú al expandir en hover. Alpine los oculta con
       display:none inline; un !important en el stylesheet lo sobrescribe. */
    .fi-sidebar:not(.fi-sidebar-open):hover .fi-sidebar-item-label,
    .fi-sidebar:not(.fi-sidebar-open):hover .fi-sidebar-group-label {
        display: block !important;
        opacity: 1 !important;
    }

    /* ---------- LOGO ----------
       Filament oculta el logo al colapsar (x-show="isOpen"). Lo mostramos
       siempre: colapsado = solo el icono; hover/abierto = logo completo. */
    .fi-sidebar-header > div:first-child {
        display: flex !important;
        opacity: 1 !important;
    }
    /* El icono un poco más chico para que entre en el rail. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-logo {
        height: 2rem !important;
    }
    /* El botón ‹/› siempre a la derecha del header (si no, el › queda centrado
       y descolocado al hacer hover). */
    .fi-sidebar-header button {
        margin-inline-start: auto !important;
        margin-inline-end: 0 !important;
    }
    /* Colapsado EN REPOSO (sin hover): icono centrado, sin wordmark y sin los
       botones ‹/› (esos aparecen al hacer hover, ya a ancho completo → así el
       botón NO “salta” de posición y el click para fijar abierto funciona). */
    .fi-sidebar:not(.fi-sidebar-open):not(:hover) .fi-sidebar-header {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
    /* Wordmark "Dobercheck": oculto solo en colapsado EN REPOSO (solo icono).
       En hover y fijado-abierto se muestra completo (cabe de sobra: right 161 ≤ 255). */
    .fi-sidebar:not(.fi-sidebar-open):not(:hover) .fi-sidebar-header p {
        display: none !important;
    }
    .fi-sidebar:not(.fi-sidebar-open):not(:hover) .fi-sidebar-header button {
        display: none !important;
    }

    /* ---------- Botón "Nuevo cliente" (store) ----------
       Colapsado en reposo: solo el icono +, compacto (si no, el texto se
       aplasta y hace wrap feo en el rail de 72px). */
    .fi-sidebar:not(.fi-sidebar-open):not(:hover) .fi-newclient-label {
        display: none;
    }
    /* Colapsado: botón "+" como cuadrado redondeado 40×40, centrado en el rail.
       El wrapper (.fi-newclient-wrap) queda confinado a ~23px por el padding del
       nav, así que centramos con flex (justify+align center) y el botón con
       flex:none para que NO se encoja ni se estire (un pill vertical). */
    .fi-sidebar:not(.fi-sidebar-open):not(:hover) .fi-newclient-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-inline: 0 !important;
    }
    .fi-sidebar:not(.fi-sidebar-open):not(:hover) .fi-newclient-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 0.7rem;
    }
}