/* ============================================================
   PLATAFORMA SB · UI COMPARTILHADA
   - Sidebar recolhível (todas as vistas com <aside class="sidebar">)
   - Toggle button
   - Banner "Você está visualizando como aluna"
   Vale em: vitrine geral, área Ametista, curso.html, aula.html
   ============================================================ */

:root {
  --sidebar-w-collapsed: 72px;
}

/* Botão flutuante pra recolher/expandir sidebar */
/* Posicionamento absoluto na borda direita da sidebar (não pega overflow) */
.sidebar-toggle {
  position: fixed;
  top: 18px;
  left: calc(var(--sidebar-w, 264px) - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(200, 190, 180, .5);
  color: #2B1F14;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.20);
  z-index: 60;
  transition: left .22s ease, background .18s, transform .18s;
  padding: 0;
}
.sidebar-toggle:hover { background: #F4EDFC; color: #6D28D9; transform: scale(1.05); }
.sidebar-toggle svg { width: 15px; height: 15px; stroke-width: 2; transition: transform .22s; }

/* Estado recolhido — só ícones */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-w-collapsed) !important;
}
body.sidebar-collapsed .sidebar-toggle {
  left: calc(var(--sidebar-w-collapsed) - 14px);
}
body.sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Ajusta main e topbar pra acompanhar a sidebar recolhida */
body.sidebar-collapsed .topbar,
body.sidebar-collapsed .main,
body.sidebar-collapsed .layout-inner {
  --sidebar-w: var(--sidebar-w-collapsed);
}
body.sidebar-collapsed .topbar { left: var(--sidebar-w-collapsed) !important; }
body.sidebar-collapsed .main { margin-left: var(--sidebar-w-collapsed) !important; }

/* Esconde textos/labels · deixa só ícones */
body.sidebar-collapsed .sidebar .brand-text,
body.sidebar-collapsed .sidebar .brand-by,
body.sidebar-collapsed .sidebar .brand-name,
body.sidebar-collapsed .sidebar-search,
body.sidebar-collapsed .sidebar-nav .nav-item span:not(.badge),
body.sidebar-collapsed .sidebar-modules .module-link span:not(.dot):not(.num),
body.sidebar-collapsed .sidebar-modules .module-link .arrow,
body.sidebar-collapsed .sidebar-label,
body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .side-item span:not(.badge):not(.num):not(.arrow),
body.sidebar-collapsed .side-item .arrow,
body.sidebar-collapsed .sidebar-footer .user-info,
body.sidebar-collapsed .sidebar-footer .sidebar-actions {
  display: none !important;
}

/* Centraliza ícones dos itens */
body.sidebar-collapsed .sidebar-nav .nav-item,
body.sidebar-collapsed .sidebar-modules .module-link,
body.sidebar-collapsed .side-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
body.sidebar-collapsed .sidebar-brand,
body.sidebar-collapsed .sidebar-footer {
  justify-content: center;
  align-items: center;
}
body.sidebar-collapsed .sidebar-brand .brand-logo {
  margin: 0 auto;
}
body.sidebar-collapsed .sidebar-footer .user-avatar {
  margin: 0 auto;
}

/* Transição suave */
.sidebar, .topbar, .main {
  transition: width .22s ease, left .22s ease, margin-left .22s ease;
}

/* ============================================================
   BANNER "VOCÊ ESTÁ VISUALIZANDO COMO ALUNA"
   Aparece quando admin ativa modo visualização.
   ============================================================ */
.viewing-as-student-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: linear-gradient(90deg, #6D28D9 0%, #5B1FB8 100%);
  color: #fff;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 4px 16px rgba(15,4,32,.35);
}
body.viewing-as-student .viewing-as-student-bar { display: block; }
body.viewing-as-student { padding-top: 40px; }
.viewing-as-student-bar strong { font-weight: 700; }
.viewing-as-student-bar button {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  cursor: pointer;
  margin-left: 12px;
  transition: background .15s;
}
.viewing-as-student-bar button:hover { background: rgba(255,255,255,.28); }

/* Enquanto vendo como aluna: esconde tudo com classe .is-admin visível */
body.viewing-as-student.is-admin .admin-bar,
body.viewing-as-student.is-admin .btn-edit-categoria,
body.viewing-as-student.is-admin .card-edit-btn,
body.viewing-as-student.is-admin .card-edit-wrap,
body.viewing-as-student.is-admin .mod-edit-btn,
body.viewing-as-student.is-admin .card-admin-overlay,
body.viewing-as-student.is-admin .banner-hero-add-inline,
body.viewing-as-student.is-admin .banner-add,
body.viewing-as-student.is-admin .add-card,
body.viewing-as-student.is-admin .drag-handle,
body.viewing-as-student.is-admin [data-only-admin] {
  display: none !important;
}

/* Menu do avatar: opção "Ver como aluna" · injetada via JS */
.menu-item-view-as-student {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6D28D9;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  grid-column: 1 / -1;
  background: rgba(109, 40, 217, 0.06);
  border: 1px solid rgba(109, 40, 217, 0.16);
  margin: 6px 0 10px;
  transition: background .15s;
  line-height: 1.2;
}
.menu-item-view-as-student:hover {
  background: rgba(109, 40, 217, 0.12);
}
.menu-item-view-as-student svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

@media (max-width: 720px) {
  .sidebar-toggle { display: none; }
}