/**
 * EstudePlan - Sidebar Styles
 * Estilos consistentes para sidebar em todos os dispositivos
 * Criado por Mateus Souza
 */

/* ========================================
   DESKTOP SIDEBAR - FIXED (igual página de Matérias)
   ======================================== */

/* Desktop: sidebar fixa com scroll próprio */
@media (min-width: 992px) {
  body {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 240px !important;
    min-width: 240px !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(0) !important;
    z-index: 100;
    padding: 24px 16px !important;
    background: rgba(12, 18, 32, 0.95) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  
  /* Garantir tamanhos de fonte consistentes */
  .sidebar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 32px !important;
  }
  
  .sidebar-brand-icon {
    font-size: 28px !important;
  }
  
  .sidebar-brand-text {
    font-size: 20px !important;
    font-weight: 600 !important;
  }
  
  .sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  
  .sidebar-link-icon {
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
  }
  
  .sidebar-section-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 16px !important;
    margin-top: 8px !important;
  }
  
  .sidebar-user {
    padding: 16px !important;
  }
  
  .sidebar-user-avatar {
    width: 36px !important;
    height: 36px !important;
  }
  
  .sidebar-user-name {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  
  .sidebar-user-email {
    font-size: 12px !important;
  }

  /* Scrollbar estilizada para sidebar desktop */
  .sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }

  .main-content {
    flex: 1 !important;
    margin-left: 240px !important;
    min-width: 0; /* Previne overflow */
  }

  .mobile-menu-btn {
    display: none !important;
  }

  #sidebar-backdrop {
    display: none !important;
  }
}

/* ========================================
   MOBILE SIDEBAR - ESTILOS GLOBAIS
   ======================================== */

/* Mobile: sidebar escondida por padrão */
@media (max-width: 991px) {
  body {
    display: block !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
  }

  /* Menu com scroll */
  .sidebar-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }

  /* Scrollbar estilizada */
  .sidebar-menu::-webkit-scrollbar {
    width: 4px;
  }
  .sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }

  /* User section fixa no fundo */
  .sidebar-user {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 18, 32, 0.98);
  }

  /* Brand fixa no topo */
  .sidebar-brand {
    flex-shrink: 0;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 70px !important;
  }

  /* Botão do menu mobile */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: 16px;
    left: 16px;
    z-index: 500 !important;
    background: rgba(12, 18, 32, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: #e8edf2 !important;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    font-size: 20px;
  }

  .mobile-menu-btn:hover {
    background: rgba(28, 37, 65, 0.95) !important;
  }
}

/* ========================================
   SELETOR DE IDIOMA
   ======================================== */
.language-selector {
  padding: 8px 16px;
  margin-top: 8px;
}

.lang-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted, #8a94a6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e8edf2);
  border-color: rgba(255, 255, 255, 0.15);
}

.lang-toggle-btn:active {
  transform: scale(0.98);
}

/* Versão compacta para sidebar */
.sidebar .language-selector {
  padding: 4px 16px;
}

.sidebar .lang-toggle-btn {
  padding: 8px 12px;
  font-size: 12px;
}

/* Mobile: seletor dentro do menu */
@media (max-width: 991px) {
  .language-selector {
    padding: 8px 12px;
  }
  
  .lang-toggle-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}