/* ZEFRA Ruído — classes/tokens comuns do app (base.html + o que mais de um módulo usa).
   Só tokens do design system no que é layout; os tokens abaixo são a identidade fixa de
   "instrumento de medição" (visor LCD), reaproveitada também na landing (.landing-readout)
   e em instrumento.css (trabalhos/detalhe.html) — não muda com o tema claro/escuro,
   como a tela de um decibelímetro real. Nomes mantidos idênticos aos já usados no app. */

:root {
  --lcd-bg: #0E2126;
  --lcd-digit: #8FE3C0;
  --lcd-label: #6FA9AE;
  --lcd-line: #1D3A40;
}

/* Pares/trios de campo lado a lado (cadastros de clientes/equipamentos/
   configurações) — zefra-ui.css só tem .field-row (auto-fit, nº de colunas
   varia com a largura); aqui o layout original pede sempre 2 ou 3 colunas
   iguais, colapsando para 1 no mobile. */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .row2, .row3 { grid-template-columns: 1fr; } }

/* Grupo recolhível da barra lateral (Elaboradores > Empresa/Responsáveis técnicos) —
   <details> nativo, mesmo padrão usado no Gestão de Perícias. */
.sidebar-grupo { display: flex; flex-direction: column; gap: 2px; margin-top: 0.4rem; }
.sidebar-grupo summary {
  cursor: pointer; list-style: none; user-select: none;
  font: 600 var(--text-xs) / 1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--side-text-soft); padding: 0.6rem 0.7rem 0.3rem;
  display: flex; align-items: center; gap: 0.55rem;
}
.sidebar-grupo summary::-webkit-details-marker { display: none; }
.sidebar-grupo summary .zi:last-child { margin-left: auto; width: 0.9em; height: 0.9em; transition: transform var(--dur-fast) var(--ease-out); }
.sidebar-grupo[open] summary .zi:last-child { transform: rotate(90deg); }
.sidebar-grupo summary:hover { color: var(--side-text); }
.sidebar-grupo > a { display: flex; }

/* Menu móvel: gaveta com JS (sidebar.js — ids sidebarToggle/sidebarOverlay/sidebar),
   não a barra horizontal padrão do design system. O menu tem um grupo aninhado
   (Elaboradores > Empresa/Responsáveis) que não cabe numa barra rolável.
   Reescreve por cima do @media (max-width: 900px) de zefra-ui.css. */
.sidebar-toggle {
  display: none; position: fixed; top: var(--space-3); left: var(--space-3); z-index: 40;
  width: 42px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); align-items: center; justify-content: center;
  box-shadow: var(--shadow-2);
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(13, 20, 51, 0.5); z-index: 29;
}
.sidebar-overlay.ativo { display: block; }

@media (max-width: 900px) {
  .sidebar-toggle { display: flex; }
  .main-content { padding-top: calc(42px + var(--space-3) * 2); }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 82vw;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
    z-index: 30; padding: var(--space-4); gap: var(--space-2);
  }
  .sidebar.aberta { transform: translateX(0); }
  .sidebar .logo { padding: 0.15rem 0.6rem 1.5rem; flex: none; }
  .sidebar form { order: 0; margin: 0.6rem 0 0 !important; flex: none; }
  .sidebar nav { order: 0; flex-direction: column; overflow-x: visible; margin: 0; padding: 0; gap: 2px; }
  .sidebar nav a { white-space: normal; flex: none; }
  .sidebar nav a.active::before { display: block; }
  .sidebar .nav-label { display: block; }
  .sidebar .keep-mobile { order: 0; flex: none; }
}