/* Shell global do JurisDelfus — Fase 3.
 *
 * A paleta é a do `.jd-ext` (slate), que já passou por sete viewports e por
 * comparação com o portal externo. Não há paleta nova: o que este arquivo faz é
 * levar aquela identidade para a moldura do sistema — sidebar, cabeçalho e área
 * principal —, deixando o conteúdo dos módulos antigos como está.
 *
 * Regra de convivência: nada aqui altera `.card`, `.btn` ou os estilos internos
 * dos módulos. Se um seletor daqui vazar para dentro do conteúdo, é defeito.
 */

:root {
  --jd-sb-largura: 248px;
  --jd-sb-largura-recolhida: 64px;
  --jd-topo-altura: 56px;
  --jd-slate-50: #f8fafc;
  --jd-slate-100: #f1f5f9;
  --jd-slate-200: #e2e8f0;
  --jd-slate-400: #94a3b8;
  --jd-slate-500: #64748b;
  --jd-slate-700: #334155;
  --jd-slate-800: #1e293b;
  --jd-slate-900: #0f172a;
  --jd-marinho: var(--jd-navy);
  --jd-marinho-claro: var(--jd-navy-claro);
  --jd-marinho-borda: rgba(148, 163, 184, .18);
  --jd-marinho-texto: #cbd5e1;
}

/* ── moldura ───────────────────────────────────────────────────────────── */
.jd-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--jd-slate-50);
}

.jd-shell-sidebar {
  width: var(--jd-sb-largura);
  flex: 0 0 var(--jd-sb-largura);
  display: flex;
  flex-direction: column;
  /* azul-marinho #0f172a — é o mesmo `slate-900` que a página do processo já
     usa nos botões primários, então continua sendo a paleta validada */
  background: var(--jd-marinho);
  border-right: 1px solid var(--jd-marinho-borda);
  overflow: hidden;
  transition: width .18s ease, flex-basis .18s ease;
}

.jd-shell-principal {
  flex: 1;
  min-width: 0;                 /* deixa o conteúdo encolher em vez de estourar */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── marca e usuário ───────────────────────────────────────────────────── */
.jd-sb-topo { padding: 14px 14px 10px }

.jd-sb-marca {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 4px; border-radius: 8px;
  cursor: pointer; text-align: left; color: inherit;
}
.jd-sb-marca:hover { background: rgba(255, 255, 255, .07) }

.jd-sb-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  background: #fff; color: var(--jd-marinho);
  font-weight: 700; font-size: 15px;
}
.jd-sb-marca-txt { display: flex; flex-direction: column; min-width: 0 }
.jd-sb-nome { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.2 }
.jd-sb-ver { font-size: 11px; color: rgba(226, 232, 240, .55) }

.jd-sb-user {
  display: flex; align-items: center; gap: 9px;
  margin: 0 14px 10px; padding: 8px;
  border-radius: 8px; background: rgba(255, 255, 255, .06);
}
.jd-sb-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 11px; font-weight: 600;
}
.jd-sb-user-txt { display: flex; flex-direction: column; min-width: 0 }
.jd-sb-user-nome {
  font-size: 12.5px; font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jd-sb-user-papel {
  font-size: 11px; color: rgba(226, 232, 240, .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── navegação ─────────────────────────────────────────────────────────── */
.jd-sb-nav {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 0 10px 10px;
  scrollbar-width: thin;
}
.jd-sb-grupo + .jd-sb-grupo { margin-top: 10px }
.jd-sb-grupo-tit {
  padding: 6px 8px 4px; margin: 0;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #94a3b8;
}

.jd-sb-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; margin-bottom: 1px;
  border: 0; border-radius: 7px; background: none;
  font-size: 13px; font-weight: 500; color: var(--jd-marinho-texto);
  cursor: pointer; text-align: left;
  transition: background .12s ease, color .12s ease;
}
.jd-sb-item:hover { background: rgba(255, 255, 255, .08); color: #fff }
.jd-sb-item.ativo { background: #fff; color: var(--jd-marinho); font-weight: 600 }
.jd-sb-item.ativo .jd-sb-badge { background: var(--jd-marinho); color: #fff }
/* foco visível CONTRA o fundo escuro — o outline escuro sumiria aqui */
.jd-sb-item:focus-visible, .jd-sb-marca:focus-visible, .jd-sb-sair:focus-visible {
  outline: 2px solid #fff; outline-offset: 1px;
}

.jd-sb-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 18px;
}
.jd-sb-ic svg { width: 16px; height: 16px; display: block }

.jd-sb-rot {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.jd-sb-badge {
  flex: 0 0 auto; min-width: 18px; padding: 1px 5px;
  border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff;
  font-size: 10px; font-weight: 600; text-align: center; line-height: 16px;
}

.jd-sb-rodape { padding: 10px 14px 14px; border-top: 1px solid var(--jd-marinho-borda) }
.jd-sb-sair {
  width: 100%; padding: 7px; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px; background: transparent; color: rgba(226, 232, 240, .7);
  font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.jd-sb-sair:hover { border-color: rgba(255,255,255,.5); color: #fff }

/* ── cabeçalho ─────────────────────────────────────────────────────────── */
.jd-shell-topo {
  height: var(--jd-topo-altura); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  background: #fff; border-bottom: 1px solid var(--jd-slate-200);
}
.jd-shell-topo-tit {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 600; color: var(--jd-slate-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jd-shell-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border: 1px solid var(--jd-slate-200); border-radius: 7px;
  background: #fff; color: var(--jd-slate-500); cursor: pointer;
}
.jd-shell-btn:hover { background: var(--jd-slate-50); color: var(--jd-slate-800) }
.jd-shell-btn:focus-visible { outline: 2px solid var(--jd-slate-900); outline-offset: 1px }
.jd-shell-btn svg { width: 16px; height: 16px }

#jd-shell-menu { display: none }        /* só no celular */

/* A ação do módulo (#tacoes) vinha com 24 px de altura — abaixo de qualquer
   recomendação de alvo de toque. Vale para todos os módulos, não só o Dashboard. */
.jd-shell-topo #tacoes { display: flex; align-items: center; gap: 8px }
.jd-shell-topo #tacoes .btn { min-height: 34px; display: inline-flex; align-items: center }
@media (max-width: 767px) {
  .jd-shell-topo #tacoes .btn { min-height: 40px }
}

/* ── área de conteúdo ──────────────────────────────────────────────────── */
.jd-shell-conteudo {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: auto;   /* tabela larga rola AQUI, não na página */
  padding: 24px;
}

/* ── modo recolhido ────────────────────────────────────────────────────── */
body.jd-shell-recolhida .jd-shell-sidebar {
  width: var(--jd-sb-largura-recolhida);
  flex-basis: var(--jd-sb-largura-recolhida);
}
body.jd-shell-recolhida .jd-sb-rot,
body.jd-shell-recolhida .jd-sb-grupo-tit,
body.jd-shell-recolhida .jd-sb-marca-txt,
body.jd-shell-recolhida .jd-sb-user-txt,
body.jd-shell-recolhida .jd-sb-sair { display: none }
body.jd-shell-recolhida .jd-sb-item { justify-content: center; padding: 8px 0 }
body.jd-shell-recolhida .jd-sb-topo,
body.jd-shell-recolhida .jd-sb-user { justify-content: center }
body.jd-shell-recolhida .jd-sb-user { margin: 0 8px 10px; padding: 6px }
body.jd-shell-recolhida .jd-sb-nav { padding: 0 8px 10px }
body.jd-shell-recolhida .jd-sb-rodape { padding: 8px }
/* recolhido, o badge vira um ponto no canto do ícone: o número não caberia,
   mas o aviso não pode sumir (o `title` continua dizendo quantos são) */
body.jd-shell-recolhida .jd-sb-badge {
  position: absolute; top: 3px; right: 9px;
  min-width: 7px; height: 7px; padding: 0;
  font-size: 0; line-height: 0; background: #fff;
}
body.jd-shell-recolhida .jd-sb-item { position: relative }
body.jd-shell-recolhida .jd-sb-item.ativo .jd-sb-badge { background: var(--jd-marinho) }

/* ── celular: drawer ───────────────────────────────────────────────────── */
#jd-shell-overlay { display: none }

@media (max-width: 767px) {
  .jd-shell-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 300;
    width: var(--jd-sb-largura); flex-basis: var(--jd-sb-largura);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  }
  body.jd-shell-drawer-aberto .jd-shell-sidebar { transform: translateX(0) }
  body.jd-shell-drawer-aberto #jd-shell-overlay {
    display: block; position: fixed; inset: 0; z-index: 290;
    background: rgba(15, 23, 42, .45);
  }
  /* no celular o menu é o drawer: recolher não se aplica */
  body.jd-shell-recolhida .jd-shell-sidebar {
    width: var(--jd-sb-largura); flex-basis: var(--jd-sb-largura);
  }
  body.jd-shell-recolhida .jd-sb-rot,
  body.jd-shell-recolhida .jd-sb-grupo-tit,
  body.jd-shell-recolhida .jd-sb-marca-txt,
  body.jd-shell-recolhida .jd-sb-user-txt,
  body.jd-shell-recolhida .jd-sb-sair { display: revert }
  body.jd-shell-recolhida .jd-sb-item { justify-content: flex-start; padding: 7px 8px }
  body.jd-shell-recolhida .jd-sb-badge {
    position: static; min-width: 18px; height: auto; padding: 1px 5px;
    font-size: 10px; line-height: 16px; background: rgba(255, 255, 255, .18);
  }

  #jd-shell-menu { display: inline-flex }
  #jd-shell-recolher { display: none }
  .jd-shell-topo { padding: 0 12px }
  .jd-shell-conteudo { padding: 14px }
}

@media (min-width: 768px) and (max-width: 1180px) {
  /* faixa intermediária: o menu começa recolhido, para o conteúdo respirar */
  :root { --jd-sb-largura: 216px }
}

body.jd-shell-sem-animacao .jd-shell-sidebar { transition: none }

/* ── impressão ─────────────────────────────────────────────────────────── */
@media print {
  .jd-shell-sidebar,
  .jd-shell-topo,
  #jd-shell-overlay { display: none !important }
  .jd-shell,
  .jd-shell-principal { display: block !important; height: auto !important; overflow: visible !important }
  .jd-shell-conteudo {
    padding: 0 !important; margin: 0 !important;
    overflow: visible !important; height: auto !important;
  }
}

/* ── convivência com os módulos antigos ────────────────────────────────── */
/* Os módulos legados foram escritos supondo `.content` com padding próprio e
   altura de viewport. Dentro do shell eles continuam iguais — só herdam a área
   correta. Nada de repintar conteúdo nesta fase. */
.jd-shell-conteudo > * { max-width: 100% }


/* Cabeçalho com várias ações no celular (veio de `clientes_lista.css` na
   Fase 7 — é regra GLOBAL, não de um módulo). Clientes foi o primeiro com
   três botões no `#tacoes`; eles quebravam linha e transbordavam a barra de
   56 px, ficando por baixo do conteúdo. A barra cresce quando precisa. */
@media (max-width: 767px) {
  .jd-shell-topo {
    height: auto; min-height: var(--jd-topo-altura);
    flex-wrap: wrap; align-items: center; padding-top: 8px; padding-bottom: 8px;
  }
  .jd-shell-topo-tit { flex: 1 1 100%; order: -1 }
  .jd-shell-topo #tacoes { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 6px }
  .jd-shell-topo #tacoes .btn { flex: 1 1 auto; justify-content: center; min-height: 40px }
}