/* ============================================================
   MATIOS UI — matios-ui-sidenav.css
   MTS.SideNav — Navegación lateral colapsable tipo dashboard
   Requiere: matios-ui-base.css, matios-ui-menu.css
   ============================================================ */

/* ── Shell ─────────────────────────────────────────── */
.mts-sidenav {
  display: flex;
  flex-direction: column;
  width: 240px;
  /* Standalone: fill a fixed-height parent. min-height:0 lets the inner __nav
     scroll instead of the whole sidenav growing. In the MTS.Shell the sidenav is
     a row-spanning grid item where height:100% would resolve against the whole
     container (overflowing by the topbar height) — that case is overridden below. */
  height: 100%;
  min-height: 0;
  background: var(--mts-bg-surface);
  border-right: 1px solid var(--mts-border-color);
  transition: width .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.mts-sidenav--collapsed { width: 60px; }

/* In the MTS.Shell the sidenav is a row-spanning grid item: let the grid stretch
   it to its area (height:auto) instead of height:100% (which would resolve against
   the whole 100vh container and overflow by the topbar height). The inner __nav
   then scrolls when sections overflow. */
.mts-shell .mts-shell__sidenav.mts-sidenav {
  height: auto;
  min-height: 0;
  align-self: stretch;
}

/* ── Brand ─────────────────────────────────────────── */
.mts-sidenav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 48px 12px 14px; /* padding-right extra para el toggle button */
  border-bottom: 1px solid var(--mts-border-color);
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  transition: padding .25s cubic-bezier(.4,0,.2,1);
}
.mts-sidenav--collapsed .mts-sidenav__brand {
  padding: 14px 14px 12px;
  justify-content: center;
}

.mts-sidenav__brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mts-sidenav__brand-title {
  font-size: var(--mts-font-size-md);
  font-weight: var(--mts-font-weight-bold);
  color: var(--mts-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  transition: opacity .2s, width .2s;
}
.mts-sidenav--collapsed .mts-sidenav__brand-title {
  opacity: 0;
  width: 0;
  flex: 0;
}

/* ── Sin brand: el nav necesita espacio para el toggle absoluto ── */
.mts-sidenav--no-brand .mts-sidenav__nav        { padding-top: 42px; }
.mts-sidenav--no-brand.mts-sidenav--collapsed .mts-sidenav__nav { padding-top: 8px; }

/* ── Toggle collapse btn ───────────────────────────── */
.mts-sidenav__toggle {
  position: absolute;
  top: 14px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--mts-border-color);
  border-radius: var(--mts-radius-sm);
  cursor: pointer;
  color: var(--mts-text-muted);
  transition: all .12s;
  z-index: 1;
}
.mts-sidenav__toggle:hover {
  background: var(--mts-bg-surface-2);
  color: var(--mts-text-primary);
}
.mts-sidenav__toggle svg { width: 16px; height: 16px; display: block; }
.mts-sidenav--collapsed .mts-sidenav__toggle {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  margin: 8px auto;
  display: flex;
}

/* ── Nav container ─────────────────────────────────── */
.mts-sidenav__nav {
  flex: 1;
  min-height: 0;
  padding: 8px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ── Footer ────────────────────────────────────────── */
.mts-sidenav__footer {
  padding: 12px 10px;
  border-top: 1px solid var(--mts-border-color);
  overflow: hidden;
}

/* ════════════════════════════════════════════════════
   MTS.MENU montado dentro de SideNav (modo tree)
   ════════════════════════════════════════════════════ */

/* El nav de SideNav ya maneja el padding */
.mts-sidenav__nav .mts-menu--tree { padding: 0; }

/* Al colapsar: ocultar labels, chevrons, grupos y subárboles */
.mts-sidenav--collapsed .mts-menu--tree .mts-menu__group-label {
  opacity: 0;
  height: 0;
  padding: 0;
  pointer-events: none;
}
.mts-sidenav--collapsed .mts-menu--tree .mts-menu__label {
  opacity: 0;
  width: 0;
  flex: 0;
}
.mts-sidenav--collapsed .mts-menu--tree .mts-menu__chevron {
  opacity: 0;
  width: 0;
}
.mts-sidenav--collapsed .mts-menu--tree .mts-menu__sub {
  display: none;
}

/* Centrar ícono cuando está colapsado */
.mts-sidenav--collapsed .mts-menu--tree .mts-menu__item--tree {
  justify-content: center;
  position: relative;
}

/* Badge colapsado → punto indicador */
.mts-sidenav--collapsed .mts-menu--tree .mts-menu__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  transition: all .2s;
}

/* ════════════════════════════════════════════════════
   TOOLTIP — label flotante en estado colapsado
   position:fixed para escapar del overflow:hidden
   ════════════════════════════════════════════════════ */
.mts-sidenav__tip {
  position: fixed;
  top: 0;
  left: 0;
  padding: 5px 10px;
  background: var(--mts-bg-inverse, #1c1c1e);
  color: var(--mts-text-inverse, #f5f5f7);
  font-size: var(--mts-font-size-sm);
  font-weight: var(--mts-font-weight-medium);
  font-family: var(--mts-font-family);
  border-radius: var(--mts-radius-md);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--mts-z-tooltip, 9000);
  transform: translateY(-50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  opacity: 0;
  transition: opacity .1s ease;
}
.mts-sidenav__tip--show {
  opacity: 1;
}