/* ============================================================================
   KTG HUB — CASCA DO HUB (rep) · Design System v1
   Base, login e topo compartilhados vivem em chrome.css; componentes de página
   (banner, atalhos, itens, vazio) em components.css. Aqui: barra lateral + layout.
   ============================================================================ */

/* ============================================================
   BARRA LATERAL (clara, igual à do admin)
   ============================================================ */
.app{ display:flex; align-items:flex-start; min-height:100vh; min-height:100dvh; }

.sb{ position:sticky; top:0; align-self:start; z-index:40;
  width:var(--sb-w); flex:0 0 var(--sb-w); height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  background:var(--color-surface); border-right:1px solid var(--color-divider); }

#nav{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-4) var(--space-3);
  scrollbar-width:thin; scrollbar-color:var(--color-border) transparent; }

.sb a{ display:flex; align-items:center; gap:var(--space-3); min-height:var(--control-h); padding:0 var(--space-3);
  border-radius:var(--radius-lg); cursor:pointer;
  /* nome longo (caso de "Tabela de Preços/Cadastro", hoje "Tabelas Comerciais") quebra em 2 linhas em vez de ser cortado na borda;
     a pílula cresce na altura e mantém o respiro lateral */
  padding-top:var(--space-2); padding-bottom:var(--space-2); overflow-wrap:anywhere;
  font:var(--weight-medium) var(--text-sm)/var(--lh-sm) var(--font); color:var(--color-text-muted);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.sb a span{ flex:0 0 auto; width:20px; display:inline-flex; align-items:center; justify-content:center; }
.sb a:hover{ background:var(--color-surface-muted); color:var(--color-text); }
.sb a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.sb a.on{ background:var(--color-accent-selected); color:var(--color-accent-text); font-weight:var(--weight-bold); }

.sep{ height:1px; margin:var(--space-2) var(--space-3); background:var(--color-divider); }

/* ============================================================
   ÁREA PRINCIPAL
   ============================================================ */
.main{ flex:1; min-width:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:var(--space-4);
  min-height:72px; padding:var(--space-3) var(--space-8);
  background:var(--color-surface); border-bottom:1px solid var(--color-divider); }

.scrim{ display:none; }   /* fundo real da gaveta no celular — intercepta o toque */

#view{ flex:1; width:100%; max-width:1320px; padding:var(--space-8) var(--space-8) var(--space-16);
  animation:viewin .3s var(--ease-out) forwards; }
@keyframes viewin{ from{ opacity:0; transform:translateY(6px); } }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:820px){
  .scrim{ display:block; position:fixed; inset:0; z-index:39; background:rgba(31,29,28,.45); }
  /* fechada: fora da tela por transform (independe da largura) e invisível para teclado/leitor */
  .sb{ position:fixed; top:0; left:0; width:280px; max-width:85vw; flex-basis:auto; height:100vh; height:100dvh;
    transform:translateX(-100%); visibility:hidden; transition:transform .3s var(--ease), visibility 0s linear .3s; }
  .sb.open{ transform:none; visibility:visible; box-shadow:var(--shadow-lg); transition:transform .3s var(--ease); }
  /* na gaveta o toque pede alvo e letra maiores */
  .sb a{ min-height:48px; font-size:var(--text-md); line-height:var(--lh-md); }
  .topbar{ padding:var(--space-3) var(--space-4); }
  #view{ padding:var(--space-6) var(--space-4) var(--space-12); }
}

/* celular estreito: logo + Menu na 1ª linha; busca na largura toda na 2ª */
@media (max-width:560px){
  .topbar{ flex-wrap:wrap; row-gap:var(--space-3); }
  .topbar .search{ flex:1 1 100%; max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.06s !important; }
}