/* ======================================================
   SIDEBAR · HUB (Admin | Loja | Cliente)
   Caminho: /hub/partials/css/sidebar_admin.css
   Recursos:
   - Sidebar fixo e rolável
   - Seções recolhíveis (Admin / Loja / Cliente) com setinha ▸
   - Dark mode (respeita [data-theme="dark"])
   - Compatível com header fixo via --hdrH
   ====================================================== */

/* ---------- Variáveis básicas ---------- */
:root{
  --hdrH: 0px;              /* ajuste se seu header for fixo (ex.: 64px) */
  --sb-w: 250px;
  --sb-bg: #ffffff;
  --sb-txt: #111827;
  --sb-bd: #e5e7eb;
  --sb-hover: #f3f4f6;
  --sb-active-bg: #e0e7ff;
  --sb-active-bd: #3b82f6;
  --sb-active-tx: #1e40af;
  --sb-danger: #ef4444;
  --sb-danger-h: #dc2626;
}

/* ---------- Container do sidebar ---------- */
.ck-sidebar{
  position: fixed;
  left: 0;
  top: var(--hdrH);
  height: calc(100vh - var(--hdrH));
  width: var(--sb-w);
  min-height: 0;
  background: var(--sb-bg);
  color: var(--sb-txt);
  border-right: 1px solid var(--sb-bd);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: transform .3s ease-in-out;
}

/* Mobile: overlay (abre com classe .is-open) */
.ck-sidebar.is-open{ transform: translateX(0); }
@media (max-width: 900px){
  .ck-sidebar{ transform: translateX(-100%); }
  .ck-sidebar.is-open{ transform: translateX(0); }
}

/* Topo e rodapé fixos; meio rolável */
.ck-sb-top, .ck-sb-foot{ flex: 0 0 auto; }
.ck-sb-nav{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar (opcional) */
.ck-sb-nav::-webkit-scrollbar{ width: 8px; }
.ck-sb-nav::-webkit-scrollbar-thumb{ background: var(--sb-bd); border-radius: 8px; }

/* ---------- Topo (avatar, nome, papel) ---------- */
.ck-sb-top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px;
  border-bottom: 1px solid var(--sb-bd);
}

.ck-avatar{
  background: #2563eb;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.ck-user-name{ font-weight: 600; font-size: 15px; line-height: 1.1; }
.ck-user-role{ font-size: 13px; color: #6b7280; }

/* ---------- Título de seção (acordeão) ---------- */
.ck-sb-title{
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.ck-sb-title::before{
  content: '▸';
  transform: rotate(0deg);
  transition: transform .2s ease;
  font-size: 12px;
  color: #9ca3af;
}
.ck-sb-section.is-open > .ck-sb-title::before{ transform: rotate(90deg); }

/* Grupo de links recolhível */
.ck-sb-group{
  display: flex;
  flex-direction: column;
  max-height: 700px;
  overflow: hidden;
  transition: max-height .25s ease;
}
.ck-sb-section:not(.is-open) > .ck-sb-group{ max-height: 0; }

/* Separador sutil entre seções */
.ck-sb-section + .ck-sb-section{ border-top: 1px dashed var(--sb-bd); }

/* ---------- Links ---------- */
.ck-sb-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  text-decoration: none;
  color: inherit;
  font-size: 15px;
  border-left: 3px solid transparent;
  transition: background .2s ease, color .2s ease, border-left-color .2s ease;
}
.ck-sb-link .ico{ font-size: 17px; }
.ck-sb-link:hover{ background: var(--sb-hover); }
.ck-sb-link.is-active{
  background: var(--sb-active-bg);
  border-left-color: var(--sb-active-bd);
  color: var(--sb-active-tx);
  font-weight: 600;
}

/* ---------- Rodapé ---------- */
.ck-sb-foot{
  padding: 10px 16px;
  border-top: 1px solid var(--sb-bd);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.ck-sair{
  background: var(--sb-danger);
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  transition: background .2s ease;
}
.ck-sair:hover{ background: var(--sb-danger-h); }

/* ---------- Dark mode ---------- */
[data-theme="dark"] .ck-sidebar{
  --sb-bg: #111827;
  --sb-txt: #f9fafb;
  --sb-bd: #374151;
  --sb-hover: #1f2937;
  --sb-active-bg: #1e3a8a;
  --sb-active-bd: #60a5fa;
  --sb-active-tx: #ffffff;
  --sb-danger: #b91c1c;
  --sb-danger-h: #991b1b;
}

[data-theme="dark"] .ck-sb-title{ color: #e5e7eb; }
[data-theme="dark"] .ck-sb-section + .ck-sb-section{ border-top-color: #374151; }
[data-theme="dark"] .ck-sb-nav::-webkit-scrollbar-thumb{ background: #374151; }

/* ---------- Utilidades opcionais ---------- */
/* Ajuste de largura para telas muito pequenas */
@media (max-width: 360px){
  :root{ --sb-w: 220px; }
}
/* Quando o conteúdo principal precisar empurrar pelo sidebar fixo */
body.has-sidebar{ margin-left: var(--sb-w); }
@media (max-width: 900px){
  body.has-sidebar{ margin-left: 0; }
}
:root{ --sb-w: 250px; }            /* largura do sidebar */

body.has-sidebar{                  /* empurra o conteúdo */
  margin-left: var(--sb-w);
}
@media (max-width: 900px){         /* no mobile o sidebar vira overlay */
  body.has-sidebar{ margin-left: 0; }
}
.ck-sb-toggle{
  position: fixed;
  left: 12px;
  top: calc(var(--hdrH, 0px) + 8px);
  z-index: 60;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  display: none;         /* escondido no desktop */
}
@media (max-width: 900px){
  .ck-sb-toggle{ display: inline-flex; align-items:center; gap:6px; }
}