/* =========================================================
   Navegação principal
   ========================================================= */


/* ---------------------------------------------------------
   Cabeçalho da sidebar
   --------------------------------------------------------- */

.sidebar-head {
  padding:
    2px
    7px
    18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-3);
}


/* ---------------------------------------------------------
   Marca
   --------------------------------------------------------- */

.brand {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 11px;

  color: #ffffff;

  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 11px;

  display: grid;
  place-items: center;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #12a899,
      #087f72
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, .12);

  font-size: 12px;
  font-weight: 900;
}

.brand > span:last-child {
  min-width: 0;

  display: grid;

  gap: 1px;
}

.brand b {
  overflow: hidden;

  color: #ffffff;

  font-size: 16.5px;
  font-weight: 850;

  letter-spacing: -.01em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand small {
  overflow: hidden;

  color: #8fb0b3;

  font-size: 12.5px !important;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   Abrir / fechar sidebar
   --------------------------------------------------------- */

.sidebar-close,
.mobile-menu {
  border: 0;

  display: none;
  align-items: center;
  justify-content: center;

  background: transparent;

  cursor: pointer;
}

.sidebar-close {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border-radius: var(--radius-sm);

  color: #ffffff;
}

.sidebar-close:hover {
  background:
    rgba(255, 255, 255, .08);
}

.mobile-menu {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  border-radius: var(--radius-sm);

  color: var(--text-primary);
}

.mobile-menu:hover {
  background: var(--surface-subtle);
}


/* ---------------------------------------------------------
   Ação principal
   --------------------------------------------------------- */

.quick-launch {
  min-height: 44px;

  margin:
    4px
    6px
    18px;

  border-radius: var(--radius-md);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  color: var(--brand-950);
  background: var(--accent-500);

  font-size: 14px;
  font-weight: 800;

  box-shadow:
    0 5px 16px
    rgba(173, 132, 35, .16);

  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast);
}

.quick-launch > span {
  font-size: 18px;
}

.quick-launch:hover {
  color: var(--brand-950);

  background: #ebc45f;

  filter: brightness(1.03);

  box-shadow:
    0 7px 20px
    rgba(173, 132, 35, .2);

  text-decoration: none;
}

.quick-launch:active {
  transform: translateY(1px);
}


/* ---------------------------------------------------------
   Lista de navegação
   --------------------------------------------------------- */

.side-nav {
  min-height: 0;

  overflow-y: auto;

  padding:
    var(--space-2)
    var(--space-1)
    var(--space-4);

  scrollbar-width: thin;

  scrollbar-color:
    rgba(166, 194, 196, .34)
    transparent;
}

.side-nav::-webkit-scrollbar {
  width: 7px;
}

.side-nav::-webkit-scrollbar-track {
  background: transparent;
}

.side-nav::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);

  background:
    rgba(166, 194, 196, .28);
}

.side-nav::-webkit-scrollbar-thumb:hover {
  background:
    rgba(166, 194, 196, .44);
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

.side-nav a {
  min-height: 42px;

  margin: 2px 0;

  padding:
    9px
    11px;

  border-radius: var(--radius-sm);

  display: flex;
  align-items: center;

  gap: 11px;

  color: #bfd0d1;

  font-size: 14px;
  font-weight: 650;

  text-decoration: none;

  transition:
    color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast);
}

.side-nav a:hover {
  color: #ffffff;

  background:
    rgba(255, 255, 255, .055);

  text-decoration: none;
}

.side-nav a.active {
  color: #ffffff;

  background:
    rgba(43, 104, 114, .52);

  box-shadow:
    inset 3px 0 0
    var(--accent-500);
}


/* ---------------------------------------------------------
   Ícones
   --------------------------------------------------------- */

.nav-icon {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #8fc0be;
}

.nav-icon-svg {
  width: 18px;
  height: 18px;

  display: block;

  stroke: currentColor;
  stroke-width: 1.8;
}

.side-nav a.active .nav-icon {
  color: var(--accent-500);
}


/* ---------------------------------------------------------
   Visão geral
   --------------------------------------------------------- */

.nav-home {
  margin-bottom: var(--space-2) !important;
}


/* ---------------------------------------------------------
   Grupos
   --------------------------------------------------------- */

.nav-group {
  margin: 2px 0;
}

.nav-group-toggle {
  min-height: 38px;

  padding:
    12px
    11px
    7px;

  border-radius: var(--radius-sm);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-2);

  color: #74999d;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .12em;

  text-transform: uppercase;

  cursor: pointer;

  user-select: none;

  list-style: none;

  transition:
    color var(--motion-fast),
    background var(--motion-fast);
}

.nav-group-toggle::-webkit-details-marker {
  display: none;
}

.nav-group-toggle::marker {
  display: none;

  content: "";
}

.nav-group-toggle:hover {
  color: #b8ced0;

  background:
    rgba(255, 255, 255, .025);
}

.nav-group:has(a.active) > .nav-group-toggle {
  color: #b9d0d1;
}

.nav-group-chevron {
  flex: 0 0 auto;

  transition:
    transform var(--motion-base);
}

.nav-group[open]
> .nav-group-toggle
.nav-group-chevron {
  transform: rotate(180deg);
}

.nav-group-items {
  display: grid;

  padding-bottom: var(--space-1);
}

.nav-group[open]
.nav-group-items {
  animation:
    nav-group-open
    var(--motion-base)
    ease-out;
}

@keyframes nav-group-open {

  from {
    opacity: 0;

    transform: translateY(-3px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }

}


/* ---------------------------------------------------------
   Administração
   --------------------------------------------------------- */

.nav-group-admin {
  margin-top: var(--space-2);

  padding-top: var(--space-1);

  border-top:
    1px solid
    rgba(255, 255, 255, .07);
}


/* ---------------------------------------------------------
   Rodapé da sidebar
   --------------------------------------------------------- */

.sidebar-foot {
  margin-top: auto;

  padding:
    13px
    7px
    3px;

  border-top:
    1px solid
    rgba(255, 255, 255, .09);

  display: flex;
  align-items: center;

  gap: 8px;

  flex: 0 0 auto;
}

.sidebar-foot form {
  margin: 0;
}


/* ---------------------------------------------------------
   Usuário
   --------------------------------------------------------- */

.user-mini {
  min-width: 0;

  flex: 1;

  display: flex;
  align-items: center;

  gap: 9px;
}

.user-mini > div {
  min-width: 0;

  display: grid;
}

.user-mini strong {
  overflow: hidden;

  color: #ffffff;

  font-size: 14px;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-mini small {
  overflow: hidden;

  color: #88a9ac;

  font-size: 12.5px !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-password-link {
  width: fit-content;

  margin-top: 3px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  color: #9db6b9;

  font-size: 11px !important;

  text-decoration: none;
}

.user-password-link:hover {
  color: #ffffff;

  text-decoration: none;
}


/* ---------------------------------------------------------
   Logout
   --------------------------------------------------------- */

.logout-button {
  width: 36px;
  height: 36px;

  border:
    1px solid
    rgba(255, 255, 255, .06);

  border-radius: var(--radius-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #a9c0c2;

  background:
    rgba(255, 255, 255, .055);

  cursor: pointer;

  transition:
    color var(--motion-fast),
    background var(--motion-fast);
}

.logout-button:hover {
  color: #ffffff;

  background:
    rgba(255, 255, 255, .1);
}


/* =========================================================
   Navegação inferior mobile
   ========================================================= */

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 680px) {

  .mobile-bottom-nav {
    position: fixed;

    left: 8px;
    right: 8px;

    bottom:
      max(
        8px,
        env(safe-area-inset-bottom)
      );

    z-index: 40;

    height: 64px;

    padding:
      6px
      5px
      5px;

    border:
      1px solid
      rgba(35, 55, 61, .13);

    border-radius: 18px;

    display: grid;
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    align-items: end;

    background:
      rgba(255, 253, 250, .97);

    box-shadow:
      0 14px 40px
      rgba(10, 34, 42, .2);

    backdrop-filter:
      blur(14px);
  }


  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    height: 50px;

    padding: 0;

    border: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    color: #68777c;

    background: transparent;

    cursor: pointer;

    text-decoration: none;
  }


  .mobile-bottom-nav small {
    font-size: 12px !important;
    font-weight: 800;
  }


  .mobile-bottom-nav .active {
    color: var(--brand-600);
  }


  .mobile-bottom-nav .mobile-launch {
    width: 54px;
    height: 54px;

    margin-top: -18px;

    justify-self: center;

    border-radius: 18px;

    color: #26373b;

    background: var(--accent-500);

    box-shadow:
      0 7px 18px
      rgba(89, 70, 14, .2);
  }


  .mobile-bottom-nav .mobile-launch small {
    font-size: 12px !important;
  }

}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 950px) {

  .sidebar-head {
    padding-inline: 4px;

    gap: 8px;
  }


  .brand {
    min-width: 0;

    flex: 1 1 auto;
  }


  .brand > span:last-child {
    min-width: 0;

    flex: 1 1 auto;
  }


  .brand b {
    font-size: 15px;
  }


  .sidebar-close {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;
  }


  .side-nav {
    padding-bottom: var(--space-6);
  }


  .sidebar-close,
  .mobile-menu {
    display: inline-flex;
  }

}

/* =========================================================
   Movimento reduzido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .nav-group-chevron,
  .nav-group-items,
  .quick-launch {
    animation: none !important;
    transition: none !important;
  }

}