/* App Shell v2 (Sprint 21) — camada visual do shell (sidebar navy + header),
   por cima de style.css/legacy.css. Usa os tokens de static/css/tokens.css.
   Não altera layout estrutural (larguras/breakpoints seguem o contrato de
   static/style.css); aqui só cor, tipografia, raio e espaçamento da casca. */

/* ---------- Header ---------- */
.topbar.ds-app-topbar {
  height: var(--shell-header-height);
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border);
  padding-inline: 24px;
  font-family: var(--font-family-v2);
}

.ds-shell-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.ds-shell-crumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.ds-shell-crumbs a:hover,
.ds-shell-crumbs a:focus-visible {
  color: var(--color-navy);
}
.ds-shell-crumbs__sep {
  color: var(--color-text-tertiary);
}
.ds-shell-crumbs__current {
  color: var(--color-navy);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Especificidade elevada de propósito: static/style.css define
   `.topbar > div { flex-direction: column }` (herdado do antigo
   .topbar-context) e essa regra bate em qualquer <div> filho direto do
   header, incluindo este novo wrapper — sem isso ele empilha em coluna. */
.topbar.ds-app-topbar > .ds-shell-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.ds-shell-search {
  position: relative;
  display: flex;
  align-items: center;
}
.ds-shell-search__icon {
  position: absolute;
  left: 10px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.ds-shell-search__input {
  width: 15.5rem;
  max-width: 40vw;
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  padding: 6px 12px 6px 32px;
  font-family: var(--font-family-v2);
  font-size: 13.5px;
  color: var(--color-text-primary);
}
.ds-shell-search__input::placeholder {
  color: var(--color-text-tertiary);
}
.ds-shell-search__input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  background: var(--color-surface-white);
}

.ds-app-topbar .ds-user-menu__trigger {
  font-family: var(--font-family-v2);
  color: var(--color-text-primary);
}
.ds-app-topbar .ds-user-menu__name {
  font-size: 13.5px;
  font-weight: 500;
}
.ds-app-topbar .avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  color: var(--color-navy);
  font-size: 12px;
}

@media (max-width: 640px) {
  .ds-shell-search { display: none; }
}

/* ---------- Sidebar ---------- */
/* Prompt 2 (redesenho visual, shell) — largura exata do mockup. Sobrepõe
   --ds-sidebar-width (layout.css, 16.25rem=260px) com nomes próprios pra
   não brigar com os 2 sistemas de largura de sidebar mais antigos e mortos
   que já existem em style.css (--sidebar-width / .sidebar-mini de sprints
   anteriores, nunca conectados a JS — ver STATUS_REPORT). */
:root {
  --shell-sidebar-width: 236px;
}
.sidebar.ds-app-sidebar {
  background: var(--color-navy);
  padding: 10px 8px 16px;
  font-family: var(--font-family-v2);
}
/* A largura fixa (236px) só vale em desktop — abaixo de 901px o drawer
   mobile já tem seu próprio contrato de largura (`min(20rem,88vw)`,
   layout.css) que não pode ser competido por aqui: uma
   `.sidebar.ds-app-sidebar{width:...}` sem guarda de media query bateria
   nele com folga de especificidade (0,2,0 > 0,1,0). */
@media (min-width: 901px) {
  .sidebar.ds-app-sidebar {
    width: var(--shell-sidebar-width);
    transition: width .16s ease;
  }
  /* Especificidade alta (classe de body + 2 classes do <main>) de
     propósito, pelo mesmo motivo do comentário acima: static/style.css já
     tem 2 regras de `.main{margin-left:...}` concorrentes (245px fixo e
     var(--sidebar-width) de sprints anteriores) — isso aqui precisa vencer
     as duas com folga, sem depender só da ordem de carregamento. */
  body.ds-authenticated-layout .main.ds-app-main {
    margin-left: var(--shell-sidebar-width);
    width: calc(100% - var(--shell-sidebar-width));
    padding: 0;
    transition: margin-left .16s ease, width .16s ease;
  }
}

.nav-badge {
  flex-shrink: 0;
  min-width: 19px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--color-info);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: auto;
}

/* ---------- Rodapé (nome + Sair, compacto — sem avatar de propósito,
   pedido do usuário) ---------- */
.sidebar-footer {
  padding: 8px 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.sidebar-user {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-nav);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.sidebar-user:hover {
  background: rgba(255, 255, 255, .08);
}
.sidebar-user-name {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .45);
}
.sidebar-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-nav);
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font-family: var(--font-family-v2);
  font-size: 12px;
  cursor: pointer;
}
.sidebar-logout:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.sidebar.ds-app-sidebar .nav-item,
.sidebar.ds-app-sidebar .nav-details > summary {
  gap: 10px;
  border-radius: var(--radius-nav);
  padding: 9px 10px;
  font-size: 13.5px;
  color: var(--color-sidebar-text-inactive);
}
.sidebar.ds-app-sidebar .nav-item:hover,
.sidebar.ds-app-sidebar .nav-details > summary:hover {
  background: var(--color-sidebar-item-hover-bg);
  color: var(--color-sidebar-text-active);
}
.sidebar.ds-app-sidebar .nav-item.active,
.sidebar.ds-app-sidebar .nav-details > summary.active {
  background: var(--color-sidebar-item-active-bg);
  color: var(--color-sidebar-text-active);
  box-shadow: none;
}
.sidebar.ds-app-sidebar .nav-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background: transparent;
  border-radius: 0;
}
.sidebar.ds-app-sidebar .nav-icon-svg {
  width: 17px;
  height: 17px;
  display: block;
}
.sidebar.ds-app-sidebar .submenu a {
  color: var(--color-sidebar-text-inactive);
  border-radius: var(--radius-base);
}
.sidebar.ds-app-sidebar .submenu a.active,
.sidebar.ds-app-sidebar .submenu a:hover {
  color: var(--color-sidebar-text-active);
  background: var(--color-sidebar-item-hover-bg);
}
.sidebar.ds-app-sidebar .nav-section-label,
.sidebar.ds-app-sidebar .submenu-label {
  color: var(--color-text-tertiary);
}