/* ==========================================================================
   DS Admin — shell do painel (sidebar, topbar, conteúdo)
   Depende de ds.css. Somente apresentação.
   ========================================================================== */

.ds-admin {
  --sidebar-w: 262px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 60px;
  min-height: 100vh;
  background: hsl(var(--ds-background));
}
.ds-admin.is-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }

/* ---------------- Sidebar ---------------- */
.ds-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-w); max-width: 86vw;
  display: flex; flex-direction: column;
  background: hsl(var(--ds-surface));
  border-right: 1px solid hsl(var(--ds-border));
  transition: width var(--ds-transition), transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-100%);
}
.ds-sidebar.is-open { transform: translateX(0); box-shadow: var(--ds-shadow-lg); }
@media (min-width: 1024px) { .ds-sidebar { transform: none; box-shadow: none; } }

.ds-sidebar__brand {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-bottom: 1px solid hsl(var(--ds-border));
}
.ds-sidebar__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, hsl(var(--ds-primary)) 0%, hsl(var(--ds-primary-dark)) 100%);
  box-shadow: 0 4px 12px -4px hsl(var(--ds-primary) / 0.6);
  font-family: var(--ds-font-display); font-weight: 700; font-size: 15px;
  overflow: hidden;
}
.ds-sidebar__mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ds-sidebar__name { font-family: var(--ds-font-display); font-weight: 700; font-size: 15px; line-height: 1.15; }
.ds-sidebar__role { font-size: 11.5px; color: hsl(var(--ds-muted)); }

.ds-sidebar__nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; }
.ds-sidebar__nav::-webkit-scrollbar { width: 6px; }
.ds-sidebar__nav::-webkit-scrollbar-thumb { background: hsl(var(--ds-border-strong)); border-radius: 3px; }

.ds-navgroup { margin-bottom: 14px; }
.ds-navgroup__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: hsl(var(--ds-muted-soft)); padding: 6px 12px;
}
.ds-navlink {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--ds-r-md);
  font-size: 14px; font-weight: 500; color: hsl(var(--ds-muted));
  transition: background var(--ds-transition), color var(--ds-transition);
  text-decoration: none;
}
.ds-navlink svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ds-navlink:hover { background: hsl(var(--ds-surface-2) / 0.75); color: hsl(var(--ds-foreground)); }
.ds-navlink.is-active { background: hsl(var(--ds-primary-soft)); color: hsl(var(--ds-primary-dark)); font-weight: 600; }
.ds-navlink.is-active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: hsl(var(--ds-primary));
}
.ds-navlink__badge {
  margin-left: auto; min-width: 20px; text-align: center;
  background: hsl(var(--ds-warning)); color: #fff;
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--ds-r-full);
}

/* Estado recolhido (desktop) */
@media (min-width: 1024px) {
  .ds-admin.is-collapsed .ds-sidebar__name,
  .ds-admin.is-collapsed .ds-sidebar__role,
  .ds-admin.is-collapsed .ds-navgroup__label,
  .ds-admin.is-collapsed .ds-navlink__text,
  .ds-admin.is-collapsed .ds-sidebar__foot-text { display: none; }
  .ds-admin.is-collapsed .ds-navlink { justify-content: center; padding-inline: 0; }
  .ds-admin.is-collapsed .ds-navlink__badge {
    position: absolute; top: 4px; right: 10px; margin: 0; min-width: 16px; font-size: 9.5px; padding: 0 4px;
  }
  .ds-admin.is-collapsed .ds-navgroup__label { display: block; height: 1px; padding: 0; margin: 10px 12px; background: hsl(var(--ds-border)); overflow: hidden; text-indent: -999px; }
  .ds-admin.is-collapsed .ds-sidebar__brand { justify-content: center; padding-inline: 0; }
  /* Tooltip */
  .ds-admin.is-collapsed .ds-navlink::after {
    content: attr(data-title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: hsl(var(--ds-foreground)); color: #fff; font-size: 12.5px; font-weight: 500;
    padding: 5px 10px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity var(--ds-transition); box-shadow: var(--ds-shadow-md); z-index: 5;
  }
  .ds-admin.is-collapsed .ds-navlink:hover::after,
  .ds-admin.is-collapsed .ds-navlink:focus-visible::after { opacity: 1; }
}

.ds-sidebar__foot { border-top: 1px solid hsl(var(--ds-border)); padding: 10px 12px; display: grid; gap: 4px; }

.ds-sidebar-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, 0.5); }
.ds-sidebar-backdrop[hidden] { display: none; }
@media (min-width: 1024px) { .ds-sidebar-backdrop { display: none; } }

/* ---------------- Área principal ---------------- */
.ds-admin__main { min-height: 100vh; display: flex; flex-direction: column; transition: padding-left var(--ds-transition); }
@media (min-width: 1024px) { .ds-admin__main { padding-left: var(--sidebar-w); } }

.ds-topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: hsl(var(--ds-surface) / 0.85);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid hsl(var(--ds-border));
}
@media (min-width: 768px) { .ds-topbar { padding: 0 24px; } }
.ds-topbar__spacer { flex: 1; }
.ds-topbar__search { display: none; max-width: 340px; flex: 1; }
@media (min-width: 900px) { .ds-topbar__search { display: block; } }

.ds-iconbtn {
  width: 38px; height: 38px; border-radius: var(--ds-r-md); display: grid; place-items: center;
  color: hsl(var(--ds-muted)); background: transparent; border: 0; cursor: pointer;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.ds-iconbtn:hover { background: hsl(var(--ds-surface-2)); color: hsl(var(--ds-foreground)); }
.ds-iconbtn svg { width: 19px; height: 19px; }
@media (min-width: 1024px) { .ds-iconbtn--mobile { display: none; } }
@media (max-width: 1023px) { .ds-iconbtn--desktop { display: none; } }

.ds-userchip {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px;
  border-radius: var(--ds-r-full); border: 1px solid hsl(var(--ds-border));
  background: hsl(var(--ds-surface)); text-decoration: none;
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}
.ds-userchip:hover { border-color: hsl(var(--ds-border-strong)); box-shadow: var(--ds-shadow-xs); }
.ds-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, hsl(var(--ds-primary)), hsl(var(--ds-primary-dark)));
  color: #fff; font-size: 12px; font-weight: 700; font-family: var(--ds-font-display);
}
.ds-userchip__name { font-size: 13.5px; font-weight: 600; max-width: 130px; }
@media (max-width: 767px) { .ds-userchip__name { display: none; } }

/* Menu inferior mobile */
.ds-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-auto-flow: column; justify-content: stretch;
  background: hsl(var(--ds-surface)); border-top: 1px solid hsl(var(--ds-border));
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .ds-bottomnav { display: none; } }
.ds-bottomnav__item {
  display: grid; justify-items: center; gap: 3px; padding: 9px 4px 8px;
  font-size: 10.5px; font-weight: 600; color: hsl(var(--ds-muted-soft)); text-decoration: none;
  min-height: 54px;
}
.ds-bottomnav__item svg { width: 20px; height: 20px; }
.ds-bottomnav__item.is-active { color: hsl(var(--ds-primary-dark)); }
@media (max-width: 1023px) { .ds-admin__content { padding-bottom: 78px; } }

.ds-bc-sep { width: 13px; height: 13px; }

.ds-avatar--square { border-radius: 10px; width: 34px; height: 34px; font-size: 13px; }