/* ==========================================================================
   Design tokens — sistema de temas (claro/oscuro + acento)
   Basado en prototipo.txt
   ========================================================================== */

/* ===== Modo claro (default) ===== */
:root {
    /* Texto */
    --ink:        #0b0d12;
    --ink-2:      #4b5565;
    --ink-3:      #8a93a4;
    --ink-4:      #b4bdcc;

    /* Superficies */
    --surface:    #ffffff;
    --surface-2:  #fafbfc;

    /* Líneas y estados */
    --line:       #e6e8ec;
    --hover:      #f3f4f7;
    --active:     #eef2f7;

    /* Fondo de página (entre los MudPaper de las cards). Más cálido/gris
       que el blanco puro de las cards — efecto de profundidad sin sombras. */
    --page-bg:    #f5f7fa;

    /* Marca (indigo por defecto) */
    --brand:      #635bff;
    --brand-2:    #5851ea;
    --brand-soft: rgba(99,91,255,0.08);
    --brand-glow: rgba(99,91,255,0.25);

    /* Semánticos */
    --success:    #059669;
    --success-bg: #ecfdf5;
    --warning:    #d97706;
    --warning-bg: #fef3c7;
    --danger:     #dc2626;
    --danger-bg:  #fef2f2;
    --info:       #2563eb;
    --info-bg:    #eff6ff;

    /* Sombras */
    --shadow-sm:  0 1px 2px rgba(15,23,42,0.04);
    --shadow-md:  0 4px 12px rgba(15,23,42,0.08);
    --shadow-lg:  0 12px 32px rgba(15,23,42,0.12);

    /* Radios */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-lg:  10px;
    --radius-xl:  14px;

    /* Navegación (sidebar + topbar) — superficies oscuras INTENCIONALMENTE
       theme-agnosticas: NO se overridean en [data-theme="dark"] porque el
       AppBar y el sidebar mantienen siempre el navy de marca (estilo
       StockPro). Si quieres que el AppBar/sidebar respondan al modo
       oscuro/claro hay que duplicar estos tokens en el bloque [data-theme="dark"]. */
    --nav-bg:        #1e3a5f;
    --nav-bg-2:      #2a4f80;
    --nav-ink:       #e2e8f0;
    --nav-ink-2:     #94a3b8;
    --nav-ink-3:     #64748b;
    --nav-line:      rgba(255,255,255,0.08);
    --nav-hover:     rgba(255,255,255,0.06);
    /* Item activo en color de acento (azul cuando data-accent="blue"). El
       brand cambia con el acento elegido por el usuario en su perfil. */
    --nav-active-bg: var(--brand);
    --nav-active-fg: #ffffff;
}

/* ===== Modo oscuro ===== */
[data-theme="dark"] {
    --ink:        #e6e8ef;
    --ink-2:      #b4bdcc;
    --ink-3:      #8a93a4;
    --ink-4:      #6b7280;

    /* Jerarquia de superficies en oscuro:
         --page-bg     #07091a  (body, casi negro puro)
         --surface-2   #0f1320  (paneles internos sutiles)
         --surface     #14182a  (cards/MudPaper — gris oscuro azulado;
                                  el "gris oscuro" tradicional de MudBlazor
                                  para tablas y paneles). */
    --surface:    #14182a;
    --surface-2:  #0f1320;
    --page-bg:    #07091a;

    --line:       #232842;
    --hover:      #1c2236;
    --active:     #232a45;

    --success-bg: rgba(5,150,105,0.15);
    --warning-bg: rgba(217,119,6,0.15);
    --danger-bg:  rgba(220,38,38,0.15);
    --info-bg:    rgba(37,99,235,0.15);
}

/* Refinamientos de badges en oscuro: aclarar ligeramente los textos saturados */
[data-theme="dark"] .badge.active,
[data-theme="dark"] .badge.received    { color: #34d399; }
[data-theme="dark"] .badge.confirmed   { color: #60a5fa; }
[data-theme="dark"] .badge.partial     { color: #fbbf24; }
[data-theme="dark"] .badge.cancelled   { color: #f87171; }

/* ===== Overrides de acento ===== */
/* indigo es el default y ya está en :root — no necesita override */

[data-accent="blue"] {
    --brand:      #2563eb;
    --brand-2:    #1d4ed8;
    --brand-soft: rgba(37,99,235,0.08);
    --brand-glow: rgba(37,99,235,0.25);
}

[data-accent="emerald"] {
    --brand:      #059669;
    --brand-2:    #047857;
    --brand-soft: rgba(5,150,105,0.08);
    --brand-glow: rgba(5,150,105,0.25);
}

[data-accent="orange"] {
    --brand:      #ea580c;
    --brand-2:    #c2410c;
    --brand-soft: rgba(234,88,12,0.08);
    --brand-glow: rgba(234,88,12,0.25);
}

[data-accent="rose"] {
    --brand:      #e11d48;
    --brand-2:    #be123c;
    --brand-soft: rgba(225,29,72,0.08);
    --brand-glow: rgba(225,29,72,0.25);
}

[data-accent="slate"] {
    --brand:      #334155;
    --brand-2:    #1e293b;
    --brand-soft: rgba(51,65,85,0.08);
    --brand-glow: rgba(51,65,85,0.25);
}

/* ─────────────────────────────────────────────────────────────────────────
   MODO SIDEBAR COMPACTA — solo iconos en el drawer; al pasar el ratón
   sobre un grupo (Compras, Ventas, …) aparece un popout a la derecha con
   sus sub-items. Activado por <html data-sidebar="compact"> (lo setea el
   anti-FOUC + ThemeService).

   Solo aplica en md+ (>=960px). En móvil el drawer es temporal y no tiene
   sentido reducirlo.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 960px) {

    /* 1) Override de la variable CSS de MudBlazor que controla el ancho del
          drawer permanente. MudLayout usa ESTA variable para posicionar la
          AppBar y el MudMainContent (margin-left). Cambiarla aquí basta — el
          resto del layout se reajusta automáticamente sin tener que tocar
          AppBar o main-content por separado. */
    [data-sidebar="compact"] {
        --mud-drawer-width-left: 72px !important;
    }
    [data-sidebar="compact"] .mud-drawer.mud-drawer-pos-left {
        width: 72px !important;
        min-width: 72px !important;
        overflow: visible !important;
    }
    [data-sidebar="compact"] .mud-drawer .mud-drawer-content {
        overflow: visible !important;
    }

    /* 2b) Cabecera del drawer en compact: ocultamos "wilkIA" y centramos
          el icono Bolt para que quede como un logo aislado de 72px. */
    [data-sidebar="compact"] .drawer-brand .drawer-brand-text {
        display: none !important;
    }
    [data-sidebar="compact"] .drawer-brand {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3) Ocultar etiquetas de texto y caret de expansión.
          MudBlazor render: <p class="mud-typography mud-nav-link-text"> */
    [data-sidebar="compact"] .mud-nav-link .mud-nav-link-text,
    [data-sidebar="compact"] .mud-nav-group-text,
    [data-sidebar="compact"] .mud-nav-link-icon-expanded,
    [data-sidebar="compact"] .mud-nav-link-expand-icon {
        display: none !important;
    }

    /* 4) Centrar el icono dentro del nav-link estrecho */
    [data-sidebar="compact"] .mud-nav-link {
        justify-content: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    [data-sidebar="compact"] .mud-nav-link .mud-nav-link-icon {
        margin-right: 0 !important;
    }

    /* 5) Defeat MudCollapse: en modo compact los hijos se gestionan con
          display/popout, no con height-collapse. Forzamos open en CSS. */
    [data-sidebar="compact"] .mud-nav-group .mud-collapse-container {
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    /* 6) Cada MudNavGroup se convierte en posición relativa para anclar el
          popout. Sus hijos quedan ocultos por defecto. */
    [data-sidebar="compact"] .mud-nav-group {
        position: relative !important;
    }
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container {
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        margin-left: 4px !important;
        /* Mismo navy del sidebar para que el popout sea continuacion visual. */
        background-color: var(--nav-bg) !important;
        border: 1px solid var(--nav-line) !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        /* Bridge invisible para evitar el "hover gap": el margin-left:4px crea
           un hueco entre el icono y el popout en el que ni .mud-nav-group ni
           .mud-collapse-container son hover, y :hover pierde el match. El
           ::before extiende el area hoverable del popout 8px hacia la
           izquierda — el cursor cruza por encima del bridge sin que se cierre. */
        min-width: 220px !important;
        padding: 6px !important;
        z-index: 1300 !important;
    }
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8px;
        width: 8px;
        background: transparent;
    }

    /* El wrapper interno de MudCollapse y los nav-link individuales pintan su
       propio fondo (DrawerBackground blanco por defecto). Forzamos transparente
       para que se vea el navy del contenedor del popout. */
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-collapse-wrapper,
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-collapse-wrapper-inner,
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-nav-link {
        background-color: transparent !important;
    }
    /* Texto blanco sobre navy en el popout */
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-nav-link,
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-nav-link-text {
        color: #ffffff !important;
    }
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-nav-link .mud-nav-link-icon {
        color: rgba(255, 255, 255, 0.85) !important;
    }
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-nav-link:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
    [data-sidebar="compact"] .mud-drawer .mud-nav-group > .mud-collapse-container .mud-nav-link.active {
        background-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* 7) Mostrar el popout al pasar el ratón sobre el grupo (icono o popout) */
    [data-sidebar="compact"] .mud-nav-group:hover > .mud-collapse-container {
        display: block !important;
    }

    /* 8) Dentro del popout sí queremos las etiquetas de texto */
    [data-sidebar="compact"] .mud-nav-group > .mud-collapse-container .mud-nav-link-text {
        display: inline !important;
    }
    [data-sidebar="compact"] .mud-nav-group > .mud-collapse-container .mud-nav-link {
        justify-content: flex-start !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        border-radius: 6px !important;
    }
    [data-sidebar="compact"] .mud-nav-group > .mud-collapse-container .mud-nav-link .mud-nav-link-icon {
        margin-right: 12px !important;
    }

    /* 9) Encabezados de sección (OPERACIONES, ALMACENES, …) ocultos en compact —
          ocupan demasiado y descuadran al estar el drawer estrecho. */
    [data-sidebar="compact"] .mud-drawer .mud-typography-overline {
        display: none !important;
    }

    /* 10) Flip-up: cuando un grupo está tan abajo que el popout no cabe hacia
           abajo, sidebar-popout.js le añade la clase `popout-flip-up`.
           Anclamos el popout por su borde inferior al borde inferior del
           grupo (bottom:0) en vez de por arriba, así crece hacia arriba.
           El bridge (::before) se replica en bottom para mantener hoverable
           el área hacia abajo cuando el popout va hacia arriba — sin esto
           el cursor pierde el hover al moverse del icono al popout. */
    [data-sidebar="compact"] .mud-nav-group.popout-flip-up > .mud-collapse-container {
        top: auto !important;
        bottom: 0 !important;
    }
}