@use "tokens" as *;

// Portado de kontuan (_app-layout.scss) y adaptado al motor.

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: $bg;
  color: $text-1;
}

.sidebar {
  width: $layout-sidebar-width;
  background: $surface;
  border-right: 1px solid $border;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  flex-shrink: 0;
  height: 100vh;
}

.sidebar-collapsed .sidebar {
  width: 64px;
}

.sidebar-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  border-bottom: 1px solid $border;
  height: 56px;

  &--collapsed {
    justify-content: center;
  }
}

.sidebar-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 1;
  min-width: 0;
  padding: 0 $space-3;
}

.sidebar-header .sidebar-toggle {
  flex-shrink: 0;
  width: auto;
  aspect-ratio: 1;
  height: 100%;
  border-radius: 0;
  border: none;
  border-left: 1px solid $border;
}

.sidebar-header--collapsed .sidebar-toggle {
  width: 100%;
  aspect-ratio: auto;
  border-left: none;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid $border;
  border-radius: $radius-sm;
  color: $accent-500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;

  &:hover {
    background: $surface-2;
    color: $accent-600;
  }
}

.sidebar-preferences {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $space-2;
  padding: 0 $space-3;
}

.sidebar-divider {
  border: none;
  border-top: 1px solid $border;
  margin: $space-3;
}

.sidebar-nav {
  flex: 1;
  padding: $space-3 $space-2;
  overflow-y: auto;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

.sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

// Enlaces de navegación (los rellena el slot #nav).
.nav-item {
  display: flex;
  align-items: center;
  gap: $space-3;
  padding: $space-2 $space-3;
  border-radius: $radius-md;
  color: $text-2;
  text-decoration: none;
  font-size: $fs-14;
  font-weight: $k-fw-medium;
  transition: all 0.15s ease;

  .nav-icon,
  svg {
    flex-shrink: 0;
  }

  &:hover {
    background: $ui-hover-bg;
    color: $text-1;
  }

  &.router-link-active,
  &.active {
    background: $accent-100;
    color: $accent-600;
  }
}

// Grupo plegable del menú (NavGroup): cabecera-botón con el mismo cuerpo que
// un nav-item (más el chevron) y panel de hijos con sangría. La animación va
// por grid-template-rows (0fr → 1fr): discreta y sin medir alturas en JS.
.nav-group {
  display: flex;
  flex-direction: column;

  &__toggle {
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  &__chevron {
    margin-left: auto;
    color: $text-3;
    transition: transform 0.2s ease;
  }

  &--open > .nav-group__toggle .nav-group__chevron {
    transform: rotate(90deg);
  }

  // Activo (la ruta actual es de un hijo): la cabecera toma el acento; solo
  // plegado toma también el fondo (desplegado ya se resalta el propio hijo).
  &--active > .nav-group__toggle {
    color: $accent-600;
  }
  &--active:not(.nav-group--open) > .nav-group__toggle {
    background: $accent-100;
  }

  &__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
  }

  &--open > .nav-group__panel {
    grid-template-rows: 1fr;
  }

  &__children {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow: hidden;
    // Plegado, fuera del tab-order; al plegar espera a que acabe la animación.
    visibility: hidden;
    transition: visibility 0s 0.2s;

    .nav-item {
      padding-left: $space-6 + $space-2;
    }
  }

  &--open > .nav-group__panel > .nav-group__children {
    visibility: visible;
    transition: visibility 0s;
  }
}

.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: $space-2 $space-3;
  border-top: 1px solid $border;
  gap: $space-2;
  flex-shrink: 0;

  &--collapsed {
    justify-content: center;
    padding: $space-2;
  }
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.main-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.navbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $space-6;
  background: $surface;
  border-bottom: 1px solid $border;
  flex-shrink: 0;
  gap: $space-3;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: $space-2;
  min-width: 0;
}

// La marca en la barra superior (solo móvil: el sidebar está oculto).
.navbar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-title {
  font-size: $fs-16;
  font-weight: $k-fw-semibold;
  color: $text-1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: $space-3;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  padding: $layout-page-padding;
  width: 100%;
  min-width: 0;
  overflow-y: auto;
  container-type: inline-size;
  container-name: content;
}

.sidebar-overlay {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}

.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: $space-1;
  color: $text-2;
  border-radius: $radius-md;

  &:hover {
    background: $ui-hover-bg;
    color: $text-1;
  }
}

// ---- Colapsado (escritorio): solo iconos centrados ----
.sidebar-collapsed:not(.is-mobile) {
  .nav-item {
    justify-content: center;
    gap: 0;
  }
  .nav-label {
    display: none;
  }

  // Carril de iconos: los grupos muestran siempre a sus hijos (lo fuerza
  // NavGroup vía inject) y su cabecera queda inerte, sin chevron ni sangría.
  .nav-group__chevron {
    display: none;
  }
  .nav-group__toggle {
    cursor: default;

    &:hover {
      background: transparent;
    }
  }
  .nav-group__children .nav-item {
    padding-left: $space-3;
  }
}

// ---- Modo móvil (< bp-md): el sidebar se vuelve drawer ----
.is-mobile {
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    height: auto;
    z-index: 100;
    width: $layout-sidebar-width;
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform 0.25s ease;

    &--mobile-open {
      transform: translateX(0);
    }
  }

  .sidebar-header {
    display: none;
  }

  .sidebar-toggle {
    display: none;
  }

  .navbar {
    padding: 0 $space-3;
  }

  .navbar-right {
    gap: $space-2;
    flex-shrink: 0;
  }

  .main-content {
    padding: $space-4;
  }
}