/* ============================================================
   FINTAXS NAVMENU — sidebar navigation
   Flat sections (GENERAL / OPERACIÓN / ... headers + plain rows),
   matching the Balino Technology mockup: no icon tile, no accent
   bar, no accordion — every module row sits directly under its
   section heading. Reuses the app's design-system tokens
   (--bs-purple, --bs-purple-active) instead of inventing new ones.

   Global (not Blazor-scoped) on purpose: NavMenu.razor renders most
   rows through <NavLink>, and Blazor's CSS-isolation scope attribute
   does not get forwarded onto the <a> that component renders — only
   onto plain HTML tags written directly in the .razor file. A scoped
   NavMenu.razor.css would silently apply to the <div> section titles
   only and skip every NavLink-rendered row. Global side-steps that.

   !important is used on text color/weight/spacing throughout:
   Metronic's own .menu-item/.menu-link/.fw-semibold rules (wwwroot/
   assets/css/style.bundle.css) tie or beat a plain class selector, so
   without it these rules lose the cascade. Same approach the codebase
   already used for .menu-item-svad before this redesign.
   ============================================================ */

.bal-nav {
    display: flex;
    flex-direction: column;
    padding: 4px 0 14px;
}

/* ── Section ── */
.bal-section {
    display: flex;
    flex-direction: column;
}

/* ── Section heading ── */
.bal-section-title {
    margin: 18px 22px 6px;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #A9A5B5 !important;
    white-space: nowrap;
}

.bal-section:first-child .bal-section-title {
    margin-top: 6px;
}

/* ── Row (module link) ── */
.bal-row {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 1px 10px !important;
    padding: 9px 12px !important;
    border-radius: 10px;
    color: #6B7280 !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease !important;
}

.bal-ico {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 18px;
    color: #9CA3AF !important;
    transition: color .15s ease;
}

.bal-row:hover {
    background: rgba(172, 30, 166, .06);
    color: #6B7280 !important;
}

.bal-row:hover .bal-ico {
    color: var(--bs-purple) !important;
}

.bal-row.active {
    background: transparent;
    color: var(--bs-purple) !important;
    font-weight: 700 !important;
}

.bal-row.active .bal-ico {
    color: var(--bs-purple) !important;
}

/* ── Label ── */
.bal-label {
    flex: 1;
    min-width: 0; /* flex items no se achican bajo su contenido por defecto; sin esto,
                     con sidebar colapsado el label (nowrap, opacity:0) desborda .bal-row
                     mas alla de los 111px de forma invisible, e infla su getBoundingClientRect
                     — descubierto al usarlo para posicionar .bal-tip */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Group (accordion: Financiero, Configuración) ──
   Header reuses .bal-row's flat look; only adds a chevron that rotates on
   open. Open state doesn't tint the header — the mockup's flat language has
   no persistent "selected" background, only per-route active state. */
.bal-chevron {
    font-size: 9px !important;
    color: #B5AFC4 !important;
    flex-shrink: 0;
    transition: transform .2s ease, color .2s ease;
}

.bal-group.bal-open .bal-group-header .bal-ico,
.bal-group.bal-open .bal-group-header .bal-label {
    color: var(--bs-purple) !important;
}

.bal-group.bal-open .bal-chevron {
    color: var(--bs-purple) !important;
    transform: rotate(180deg);
}

/* ── Children shelf ── */
.bal-shelf {
    display: flex;
    flex-direction: column;
    margin: 0 10px 4px;
}

.bal-child-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 1px 0 1px 20px !important;
    padding: 7px 12px !important;
    border-radius: 9px;
    color: #6B7280 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease !important;
}

.bal-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C9A8D6;
    transition: background .15s ease, transform .15s ease;
}

.bal-child-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bal-child-row:hover {
    background: rgba(172, 30, 166, .06);
    color: var(--bs-purple-active) !important;
}

.bal-child-row.active {
    color: var(--bs-purple) !important;
    font-weight: 700 !important;
}

.bal-child-row.active .bal-dot {
    background: var(--bs-purple);
    transform: scale(1.3);
}

/* ── Logout ── */
.bal-logout {
    margin-top: 2.5rem;
    padding-top: 10px;
    border-top: 1px solid #F0EAF6;
}

.bal-version {
    display: block;
    font-size: 11px;
    color: #B7B2C4 !important;
    margin: 2px 22px 4px;
}

/* ── Collapsed (icon-only) sidebar ──
   Metronic fades .menu-title via [data-kt-app-sidebar-minimize=on]
   already. Section titles have no room to render as text, but a
   bare hairline keeps the sections visually separated instead of
   the icon list turning into one undifferentiated column.

   data-kt-app-sidebar-minimize=on is MainLayout's default attribute value
   regardless of viewport (see InputAttributesBody), and Metronic itself only
   acts on it inside @media (min-width:992px) — below that the sidebar isn't
   collapsed-to-icons at all, it's a full-width drawer (#kt_app_sidebar.drawer
   in MainLayout.razor). Without this same min-width guard here, these rules
   used to leak into mobile: section titles collapsed to hairlines and the
   Financiero/Configuración accordion (.bal-chevron/.bal-shelf) got hidden
   with no flyout fallback (that's desktop-only too, see below) — the
   submenus became unreachable on mobile. */
@media (min-width: 992px) {
    #kt_app_body[data-kt-app-sidebar-minimize="on"] .bal-section-title {
        font-size: 0 !important;
        height: 0;
        margin: 12px 16px;
        border-top: 1px solid #EFEAF4;
    }

    #kt_app_body[data-kt-app-sidebar-minimize="on"] .bal-section:first-child .bal-section-title {
        border-top: none;
        margin-top: 0;
    }

    #kt_app_body[data-kt-app-sidebar-minimize="on"] .bal-version {
        display: none !important;
    }

    /* Chevron/shelf have nothing to do while collapsed (no room for the inline
       accordion) — see .bal-flyout below for the hover replacement. */
    #kt_app_body[data-kt-app-sidebar-minimize="on"] .bal-chevron,
    #kt_app_body[data-kt-app-sidebar-minimize="on"] .bal-shelf {
        display: none !important;
    }
}

/* ── Flyout (collapsed sidebar, hover on a group icon) ──
   .bal-shelf can't be reused here: it lives inside .app-sidebar-menu, the
   scroll container (overflow-y:auto / overflow-x:hidden below), so an
   absolutely-positioned panel there gets clipped to the 111px collapsed
   width. position:fixed escapes that clipping — no ancestor between here
   and the viewport uses `transform` (confirmed in style.bundle.css), so
   fixed positioning is relative to the viewport as expected. Its `top` is
   computed by JS on hover (balinoPosicionarFlyout in base.js) to stay
   aligned with the icon and inside the viewport.
   visibility (not display) is used for the hidden state so JS can still
   read offsetHeight before the panel becomes visible. */
.bal-flyout {
    position: fixed;
    left: calc(var(--bs-app-sidebar-width) + 6px);
    min-width: 210px;
    max-width: 260px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(31, 20, 40, .14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
    z-index: 110;
}

/* Transparent bridge over the gap between the sidebar edge and the flyout,
   so the mouse can cross from icon to panel without the hover chain
   breaking. */
.bal-flyout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 10px;
}

.bal-flyout-title {
    margin: 2px 12px 6px;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #A9A5B5 !important;
    white-space: nowrap;
}

.bal-flyout-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 1px 0 !important;
    padding: 7px 12px !important;
    border-radius: 9px;
    color: #6B7280 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease !important;
}

.bal-flyout-row:hover {
    background: rgba(172, 30, 166, .06);
    color: var(--bs-purple-active) !important;
}

.bal-flyout-row.active {
    color: var(--bs-purple) !important;
    font-weight: 700 !important;
}

.bal-flyout-row.active .bal-dot {
    background: var(--bs-purple);
    transform: scale(1.3);
}

.bal-flyout-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 992px) {
    #kt_app_body[data-kt-app-sidebar-minimize="on"] .bal-group:hover .bal-flyout,
    #kt_app_body[data-kt-app-sidebar-minimize="on"] .bal-flyout:hover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ── Tooltip (sidebar minimizado, hover en fila simple) ──
   Mismo lenguaje visual que .bal-flyout (fondo blanco, sombra, radius) para
   que ambos hovers del sidebar colapsado se sientan del mismo sistema.
   position:fixed por la misma razon que .bal-flyout: .app-sidebar-menu tiene
   overflow-x:hidden y recorta cualquier panel absolute al ancho colapsado.
   Nunca aparece en grupos (.bal-group-header) — ver base.js, ahi ya esta el
   flyout. No necesita guard @media aqui: balinoSidebarMinimizado() en JS ya
   retorna false bajo 992px (drawer mobile). */
.bal-tip {
    position: fixed;
    z-index: 110;
    padding: 6px 12px;
    border-radius: 10px;
    background: #fff;
    color: #4B5563;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    box-shadow: 0 8px 28px rgba(31, 20, 40, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
}

.bal-tip.bal-tip-on {
    opacity: 1;
    visibility: visible;
}

/* ── Scroll ──
   The sidebar is a fixed-position flex column (top:0;bottom:0 gives it a
   definite height), so .app-sidebar-menu — its flex:1 1 auto child — DOES
   get a real, viewport-bound height (confirmed via devtools: 583px against
   a 700px-tall fixed sidebar). But .app-sidebar-menu is `display:block`
   (Metronic never made it a flex container), so flex/min-height rules on
   its own children (.app-sidebar-wrapper, #kt_app_sidebar_menu_scroll) are
   no-ops — those divs just size to content and get clipped by
   .app-sidebar-menu's own hardcoded `overflow-hidden` class (see
   MainLayout.razor markup). Confirmed this in the live app: with an
   accordion group open, scrollTop on the inner divs did nothing, while
   scrollTop on .app-sidebar-menu itself moved a real 507px range.
   So the scroll target has to be .app-sidebar-menu directly, overriding
   its own overflow-hidden. min-height:0 keeps it from refusing to shrink
   below its (very tall, once a group is open) content size. */
.app-sidebar .app-sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(172, 30, 166, .25) transparent;
}

.app-sidebar .app-sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar .app-sidebar-menu::-webkit-scrollbar-thumb {
    background-color: rgba(172, 30, 166, .25);
    border-radius: 3px;
}

.app-sidebar .app-sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}