/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   Casca no desenho do shadcndashboard (docs/referencia/ESPEC.md, secoes 1 e 2):
   menu "inset" com borda de 1px, 256px aberto e 70px no trilho de icones;
   conteudo emoldurado por um fio de 1px a 8px da janela; cabecalho de 57px.
   ============================================================ */
.casca {
  display: grid;
  grid-template-columns: var(--menu-w) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--medio) var(--gaveta);
}
html[data-menu="recolhido"] .casca {
  grid-template-columns: var(--menu-recolhido) minmax(0, 1fr);
}
/* atalho de teclado nao anima (Ctrl+B e usado dezenas de vezes por dia) */
html[data-sem-transicao] .casca,
html[data-sem-transicao] .menu-caixa {
  transition: none !important;
}

/* ---------- menu lateral ---------- */
.menu {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 8px;
  z-index: 20;
}
.menu-caixa {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: calc(var(--menu-w) - 16px);
  border: 1px solid var(--border);
  background: var(--sidebar);
  /* visivel: o menu do perfil precisa sair para a direita com o menu recolhido */
  overflow: visible;
  transition:
    width var(--medio) var(--gaveta),
    box-shadow var(--medio) var(--saida);
}
html[data-menu="recolhido"] .menu-caixa {
  width: calc(var(--menu-recolhido) - 16px);
  position: relative;
}
.menu-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--topo-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}
.marca img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex: none;
}
.marca-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.marca-texto b {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.marca-texto small {
  color: var(--muted-foreground);
  font-size: 12px;
  white-space: nowrap;
}
.menu-rolagem {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.menu-grupo-titulo {
  display: block;
  margin: 0 0 6px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin: 2px 0;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--foreground);
  white-space: nowrap;
  transition:
    background-color var(--rapido) ease,
    color var(--rapido) ease;
}
.menu-item svg {
  width: 16px;
  height: 16px;
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover {
    background: var(--sidebar-accent);
  }
}
.menu-item[aria-current="page"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.menu-item .contador {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--perigo-fundo);
  color: var(--perigo);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.menu-item[aria-current="page"] .contador {
  background: color-mix(in srgb, var(--primary-foreground) 20%, transparent);
  color: var(--primary-foreground);
}

/* rodape do menu: o estado da integracao (o "Basic Plan" da referencia) */
.menu-rodape {
  flex: none;
  border-top: 1px solid var(--border);
}
.integracao-cartao {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.integracao-cartao .linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}
.integracao-cartao .linha span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.integracao-cartao svg {
  width: 16px;
  height: 16px;
}
.barra-progresso {
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.barra-progresso i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--foreground);
}
.usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 12px;
  font-weight: 700;
}
.usuario-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.usuario-texto b {
  font-size: 14px;
  font-weight: 600;
}
.usuario-texto small {
  color: var(--muted-foreground);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- trilho de icones (recolhido) ---------- */
html[data-menu="recolhido"] .menu-topo {
  justify-content: center;
  padding: 0;
}
html[data-menu="recolhido"] :is(.marca-texto, .menu-item span, .menu-item .contador, .integracao-cartao, .usuario-texto) {
  display: none;
}
html[data-menu="recolhido"] .menu-grupo-titulo {
  text-align: center;
  font-size: 0;
}
html[data-menu="recolhido"] .menu-grupo-titulo::before {
  content: "···";
  font-size: 12px;
  letter-spacing: 0;
}
html[data-menu="recolhido"] .menu-rolagem {
  padding: 16px 8px;
  scrollbar-width: none;
}
html[data-menu="recolhido"] .menu-item {
  justify-content: center;
  padding: 0;
  min-height: 38px;
}
html[data-menu="recolhido"] .usuario {
  justify-content: center;
  padding: 12px 0;
}
/* passar o mouse no trilho abre o menu por cima (a referencia faz o mesmo, em CSS) */
@media (hover: hover) and (pointer: fine) {
  html[data-menu="recolhido"] .menu:hover .menu-caixa {
    width: calc(var(--menu-w) - 16px);
    box-shadow: var(--sombra-lg);
  }
  html[data-menu="recolhido"] .menu:hover :is(.marca-texto, .usuario-texto) {
    display: flex;
  }
  html[data-menu="recolhido"] .menu:hover :is(.menu-item span, .menu-item .contador) {
    display: inline;
  }
  html[data-menu="recolhido"] .menu:hover .integracao-cartao {
    display: grid;
  }
  html[data-menu="recolhido"] .menu:hover .menu-grupo-titulo {
    text-align: left;
    font-size: 12px;
  }
  html[data-menu="recolhido"] .menu:hover .menu-grupo-titulo::before {
    content: none;
  }
  html[data-menu="recolhido"] .menu:hover .menu-rolagem {
    padding: 16px 12px;
  }
  html[data-menu="recolhido"] .menu:hover .menu-item {
    justify-content: flex-start;
    padding: 0 12px;
  }
  html[data-menu="recolhido"] .menu:hover .menu-topo {
    justify-content: space-between;
    padding: 0 12px;
  }
  html[data-menu="recolhido"] .menu:hover .usuario {
    justify-content: flex-start;
    padding: 12px 16px;
  }
}

/* ---------- area principal ---------- */
.principal {
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 8px 8px 8px 0;
  outline: 1px solid var(--border);
  background: var(--background);
}
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--topo-h);
  padding: 0 12px 0 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
}
.topo-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex: none;
}
.topo-marca {
  display: none;
}
.topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.conteudo {
  flex: 1;
  padding: 16px;
}
/* o foco vai para o conteudo a cada troca de tela (leitor de tela comeca dali); nao e controle */
.conteudo:focus,
.conteudo:focus-visible {
  outline: none;
}
.recipiente {
  max-width: 1367px;
  margin: 0 auto;
}
.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 24px 0 4px;
  color: var(--muted-foreground);
  font-size: 14px;
}
.rodape a {
  color: var(--primary);
  font-weight: 600;
}

/* ---------- abas da secao (Operacao: Portaria, Chamados...) ---------- */
.secao-abas {
  display: flex;
  gap: 4px;
  margin: -8px 0 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.secao-abas::-webkit-scrollbar {
  display: none;
}
.secao-aba {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) {
  .secao-aba:hover {
    color: var(--foreground);
    background: var(--muted);
  }
}
.secao-aba[aria-current="page"] {
  color: var(--foreground);
}
.secao-aba[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}
.secao-aba:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.pagina-cab h1:focus {
  outline: none;
}
.aviso-tela {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 24px;
}
.aviso-tela h2 {
  font-size: 16px;
  font-weight: 700;
}

/* ---------- login: o cartao "boxed" das telas de acesso da referencia ---------- */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 1px 1px, var(--pontos) 1px, transparent 1.4px) 0 0 / 16px 16px,
    var(--background);
}
.login-meio {
  display: grid;
  gap: 16px;
  width: min(420px, 100%);
}
.login-cartao,
.login-demo {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--sombra-md);
}
.login-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.login-marca img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}
.login-marca > div {
  display: grid;
  line-height: 1.2;
}
.login-marca b {
  font-weight: 700;
}
.login-marca small {
  color: var(--muted-foreground);
  font-size: 12px;
}
.login-marca .btn {
  margin-left: auto;
}
.login-cartao h1 {
  font-size: 22px;
  font-weight: 700;
}
.login-cartao > .apoio {
  margin-bottom: 8px;
}
.login-cartao label {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
}
.login-cartao .campo {
  width: 100%;
  height: 40px;
}
.login-entrar {
  width: 100%;
  height: 40px;
  margin-top: 12px;
}
.login-erro {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--perigo-fundo);
  color: var(--perigo);
  font-size: 14px;
}
.login-demo {
  padding: 16px 20px;
  box-shadow: none;
}
.login-demo h2 {
  font-size: 14px;
  font-weight: 600;
}
.login-demo ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.login-demo li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.login-demo li:last-child {
  border-bottom: 0;
}
.login-demo li div {
  display: grid;
  line-height: 1.3;
  min-width: 0;
}
.login-demo li .mono {
  font-size: 12px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
}
.login-rodape {
  text-align: center;
  color: var(--muted-foreground);
  font-size: 13px;
}
.login-rodape a {
  color: var(--primary);
  font-weight: 600;
}

/* ---------- celular: o menu vira gaveta ---------- */
.fundo-gaveta {
  display: none;
}
@media (max-width: 1023.98px) {
  .casca,
  html[data-menu="recolhido"] .casca {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(292px, 86vw);
    padding: 0;
    transform: translateX(-102%);
    transition: transform 280ms var(--gaveta);
    z-index: 60;
  }
  .menu .menu-caixa,
  html[data-menu="recolhido"] .menu .menu-caixa {
    width: 100%;
    border-width: 0 1px 0 0;
  }
  html[data-menu="recolhido"] .menu :is(.marca-texto, .usuario-texto) {
    display: flex;
  }
  html[data-menu="recolhido"] .menu :is(.menu-item span) {
    display: inline;
  }
  html[data-menu="recolhido"] .menu .integracao-cartao {
    display: grid;
  }
  html[data-menu="recolhido"] .menu .menu-grupo-titulo {
    text-align: left;
    font-size: 12px;
  }
  html[data-menu="recolhido"] .menu .menu-grupo-titulo::before {
    content: none;
  }
  html[data-menu="recolhido"] .menu .menu-item {
    justify-content: flex-start;
    padding: 0 12px;
  }
  html[data-gaveta] .menu {
    transform: none;
    box-shadow: var(--sombra-lg);
  }
  html[data-gaveta] .fundo-gaveta {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(4, 16, 10, 0.32);
    backdrop-filter: blur(2px);
  }
  .menu-item {
    min-height: 44px;
  }
  .topo-marca {
    display: inline-flex;
  }
  .principal {
    margin: 0;
    outline: 0;
  }
  .conteudo {
    padding: 16px 12px;
  }
}
@media (max-width: 639.98px) {
  .topo .busca,
  .topo-sep {
    display: none;
  }
}

/* fileira de abas maior que a tela: a borda do lado onde ainda ha aba esmaece (app.js, marcarRolagem) */
:is(.secao-abas, .erp-abas, .abas).rola-dir {
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
:is(.secao-abas, .erp-abas, .abas).rola-esq {
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}
:is(.secao-abas, .erp-abas, .abas).rola-esq.rola-dir {
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* piso de leitura: <small> sem tamanho proprio caia para 11,7px (o "smaller" de 14px) */
small {
  font-size: max(12px, 0.85em);
}
/* "Pular para o conteudo": fora da tela ate receber o foco do Tab, e ai aparece no canto */
.pular {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  color: var(--foreground);
  font-weight: 600;
  transform: translateY(-200%);
}
.pular:focus {
  transform: none;
}
/* alvo minimo de 24px (WCAG 2.2, criterio 2.5.8) nos links soltos: celula de tabela, ficha,
   historico, cabecalho de coluna ordenavel e o credito do rodape */
:is(.erp-tabela, .tabela) :is(td, th) :is(a, button),
.tela-erp :is(.kv, .erp-historico, .erp-linha-tempo) a,
:is(.rodape, .login-rodape) a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* no dedo (tablet, celular) os alvos da casca sobem para 44px, como os do ERP */
@media (pointer: coarse) {
  .menu-item,
  .secao-aba,
  .marca {
    min-height: 44px;
  }
  :is(.rodape, .login-rodape) a {
    min-height: 44px;
  }
}