/* ==========================================================================
   NAVEGAÇÃO
   Desktop: sidebar fixa com expansão por hover
   Mobile:  topbar fixa com drawer lateral (hamburguer)
   ========================================================================== */

/* ─────────────────────────────────────────
   BLINDAGEM
───────────────────────────────────────── */

.side-bar *,
.topbar * {
  box-sizing: border-box;
}

/* ==========================================================================
   DESKTOP — SIDEBAR (acima de 768px)
   ========================================================================== */

/* ─────────────────────────────────────────
   1. ESTADO BASE
───────────────────────────────────────── */

.side-bar {
  width: var(--sb-collapsed);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--sb-bg);
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
  transition:
    width var(--transition-speed) var(--transition-func),
    background-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}

/* ─────────────────────────────────────────
   2. EXPANSÃO POR HOVER
───────────────────────────────────────── */

.side-bar:hover {
  width: var(--sb-expanded);
  background-color: #2d3748;
  box-shadow: 8px 0 20px rgba(0, 0, 0, 0.3);
}

.side-bar:hover .menu-label {
  opacity: 1;
  pointer-events: auto;
}

/* ─────────────────────────────────────────
   3. ITENS DE NAVEGAÇÃO
───────────────────────────────────────── */

.icon-text-item {
  font-family: var(--font-family-base);
  display: flex;
  align-items: center;
  height: 50px;
  min-width: var(--sb-expanded);
  width: var(--sb-expanded);
  margin: 0;
  padding: 0;
  color: var(--sb-text);
  text-decoration: none;
  white-space: nowrap;
  border: none;
  background: transparent;
  transition:
    background var(--transition-speed) ease,
    color var(--transition-speed) ease,
    padding var(--transition-speed) ease;
  cursor: pointer;
}

.icon-text-item:hover {
  background-color: var(--sb-hover);
  color: var(--sb-text-active);
  border-left: 4px solid var(--color-link);
  padding-left: 11px;
}

.icon-text-item:hover .menu-label,
.icon-text-item:hover .icon i {
  color: var(--sb-text-active);
  transition: color var(--transition-speed) ease;
}

/* ─────────────────────────────────────────
   4. BOTÃO DE MENU / TÍTULO (TOPO)
───────────────────────────────────────── */

#menu-button {
  height: 65px;
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
  color: #fff;
  cursor: default;
}

#menu-button .menu-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  transform: translateY(-11px);
}

/* ─────────────────────────────────────────
   5. CONTAINER DO ÍCONE
───────────────────────────────────────── */

.icon-text-item .icon {
  width: var(--sb-collapsed);
  min-width: var(--sb-collapsed);
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.icon-text-item .icon i {
  font-size: 1.1rem;
  color: var(--sb-text);
  transition: color var(--transition-speed) ease;
}

/* ─────────────────────────────────────────
   6. LABEL (TEXTO DO ITEM)
───────────────────────────────────────── */

.menu-label {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: inherit;
  opacity: 0;
  margin: 0;
  padding: 0 0 0 7px;
  height: 100%;
  display: flex;
  align-items: center;
  line-height: 1;
  transition:
    opacity var(--transition-speed) ease,
    color var(--transition-speed) ease;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-6px);
}

/* ─────────────────────────────────────────
   7. CONTEÚDO CENTRAL (NAVEGAÇÃO)
───────────────────────────────────────── */

.side-bar-content {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────
   8. RODAPÉ — LOGOUT
───────────────────────────────────────── */

#logout {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 0;
}

#logout .icon-text-item {
  color: #feb2b2;
}

#logout .icon-text-item .icon i {
  color: #feb2b2;
}

#logout .icon-text-item:hover {
  background-color: rgba(245, 101, 101, 0.2);
  color: #fff;
  border-left: 4px solid var(--color-danger);
}

#logout .icon-text-item:hover .icon i,
#logout .icon-text-item:hover .menu-label {
  color: #fff;
}

/* ─────────────────────────────────────────
   9. ITEM ATIVO
───────────────────────────────────────── */

.icon-text-item.is-active {
  background-color: var(--sb-hover);
  color: var(--sb-text-active);
  box-shadow: inset 4px 0 0 var(--color-primary);
  padding-left: 0;
}

.icon-text-item.is-active .icon i {
  color: var(--sb-text-active);
}

.icon-text-item.is-active .menu-label {
  opacity: 1;
  color: var(--sb-text-active);
}

.icon-text-item.is-active:hover {
  box-shadow: none;
  border-left: 4px solid var(--color-link);
  padding-left: 11px;
}

/* ─────────────────────────────────────────
   10. TABLET — reduz altura dos itens
───────────────────────────────────────── */

@media (max-width: 1023px) {
  .icon-text-item {
    height: 46px;
  }

  #menu-button {
    height: 58px;
  }
}

/* ─────────────────────────────────────────
   11. MOBILE — sidebar some, topbar assume
───────────────────────────────────────── */

@media (max-width: 768px) {
  .side-bar {
    display: none;
  }
}

/* ==========================================================================
   MOBILE — TOPBAR + DRAWER
   ========================================================================== */

/* ─────────────────────────────────────────
   TOPBAR — barra superior fixa no mobile
───────────────────────────────────────── */

.topbar {
  display: none; /* oculta no desktop */
}

@media (max-width: 768px) {
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background-color: var(--sb-bg);
    padding: 0 var(--spacing-md);
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .topbar-brand {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .topbar-hamburger {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
  }

  .topbar-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition:
      transform var(--transition-speed) ease,
      opacity var(--transition-speed) ease;
  }

  /* Animação do X quando aberto */
  .topbar-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .topbar-hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .topbar-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ─────────────────────────────────────────
   OVERLAY — escurece o conteúdo atrás do drawer
───────────────────────────────────────── */

.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 250;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

@media (max-width: 768px) {
  .drawer-overlay.is-visible {
    display: block;
    opacity: 1;
  }
}

/* ─────────────────────────────────────────
   DRAWER — painel lateral mobile
───────────────────────────────────────── */

.drawer {
  display: none;
}

@media (max-width: 768px) {
  .drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: var(--sb-bg);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform var(--transition-speed) var(--transition-func);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
  }

  .drawer.is-open {
    transform: translateX(0);
  }

  /* Cabeçalho do drawer */
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
  }

  .drawer-brand {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
  }

  .drawer-close {
    background: transparent;
    border: none;
    color: var(--sb-text);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: color var(--transition-speed) ease;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
  }

  .drawer-close:hover,
  .drawer-close:active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
  }

  /* Navegação do drawer — reaproveita os mesmos itens da sidebar */
  .drawer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Itens do drawer — versão mobile dos icon-text-item */
  .drawer .icon-text-item {
    height: 52px;
    width: 100%;
    min-width: unset;
    opacity: 1;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-md);
  }

  .drawer .icon-text-item .icon {
    width: 24px;
    min-width: 24px;
  }

  .drawer .icon-text-item .menu-label {
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    font-size: var(--font-size-sm);
  }

  .drawer .icon-text-item:hover {
    padding: 0 var(--spacing-md);
    border-left: 4px solid var(--color-link);
    padding-left: calc(var(--spacing-md) - 4px);
  }

  .drawer .icon-text-item.is-active {
    padding: 0 var(--spacing-md);
    box-shadow: inset 4px 0 0 var(--color-primary);
  }

  .drawer .icon-text-item.is-active:hover {
    box-shadow: none;
    border-left: 4px solid var(--color-link);
    padding-left: calc(var(--spacing-md) - 4px);
    background-color: var(--sb-hover);
    color: var(--sb-text-active);
  }

  .drawer .icon-text-item.is-active:hover .icon i,
  .drawer .icon-text-item.is-active:hover .menu-label {
    color: var(--sb-text-active);
  }

  /* Rodapé do drawer */
  .drawer-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--spacing-sm) 0;
    flex-shrink: 0;
  }

  .drawer-footer .icon-text-item {
    color: #feb2b2;
  }

  .drawer-footer .icon-text-item .icon i {
    color: #feb2b2;
  }

  .drawer-footer .icon-text-item:hover {
    background-color: rgba(245, 101, 101, 0.2);
    color: #fff;
    border-left: 4px solid var(--color-danger);
    padding-left: calc(var(--spacing-md) - 4px);
  }

  .drawer-footer .icon-text-item:hover .icon i,
  .drawer-footer .icon-text-item:hover .menu-label {
    color: #fff;
  }
}