/* ============================================================
   drawer.css — Painel lateral global da Plataforma.
   Anexo: webapp/static/js/drawer.js (API window.drawer).
   Carregado em base.html.

   O drawer e uma alternativa moderna ao modal-por-linha em
   listagens densas (auditoria_design.md secao 5): o usuario ve
   a tabela enquanto edita, sem perder contexto.

   Estrutura sugerida do conteudo (caller fornece via drawer.open(html)):

     <div class="drawer-header">
       <h6>...</h6>
       <small>...</small>
     </div>
     <div class="drawer-body">...</div>
     <div class="drawer-footer">...</div>
   ============================================================ */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(var(--drawer-width, 520px), 100vw);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border-left: 1px solid var(--line);
  z-index: 1090;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2, .85, .35, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
}
.drawer-panel.open {
  transform: translateX(0);
}

.drawer-panel .drawer-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
  z-index: 2;
  border-radius: var(--radius-sm);
}
.drawer-panel .drawer-close:hover { color: var(--ink); background: var(--surface-2); }

.drawer-panel .drawer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Quando o caller injeta um <form> direto na .drawer-content (caso do
   Controle de Exames e Interface Vencimentos), o form precisa virar um
   flex container que nao expande alem da altura disponivel — senao o
   .drawer-body nao consegue ativar o overflow-y:auto. */
.drawer-panel .drawer-content > form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Bloco semantico padrao (opcional, para o caller usar) */
.drawer-header {
  padding: 14px 48px 12px 20px;   /* 48px direita reserva espaco para .drawer-close */
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.drawer-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;          /* essencial: permite que flex:1 realmente shrinque o body para ativar o scroll */
}
.drawer-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.drawer-footer .drawer-footer-meta {
  margin-right: auto;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* Estado de loading enquanto drawer.fetch() aguarda resposta. */
.drawer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  flex: 1;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.drawer-loading .spinner-border {
  color: var(--brand);
  width: 1.5rem;
  height: 1.5rem;
}

/* Trava o scroll do body enquanto o drawer estiver aberto */
body.drawer-open { overflow: hidden; }

@media (max-width: 600px) {
  .drawer-panel { --drawer-width: 100vw; }
}