/* ============================================================================
   ONDA 14 — DRAWER LATERAL CANÔNICO
   ----------------------------------------------------------------------------
   Converte qualquer .modal-overlay marcado com `.as-drawer` (modais de
   FORMULÁRIO/EDIÇÃO) num drawer lateral direito, altura cheia, deslizando da
   direita. Padroniza com o Lead (onda-13-lead-drawer.css) e os drawers de
   Melhorias/Pipeline (.drawer--right) — mesma curva/tempo de animação.

   Carrega POR ÚLTIMO no index.html → ganha a cascata sobre o modal central
   base (.modal-overlay/.modal-container + onda-8). Especificidade alta
   (:root[data-theme=light] .modal-overlay.as-drawer .modal-container) garante
   override.

   NÃO afeta: confirm-modal (.confirm-modal__overlay) e atalhos-help
   (.atalhos-help__overlay) — classes próprias, seguem centralizados; nem o
   Lead (que tem seu próprio onda-13, visualmente idêntico a este).

   Estrutura assumida (confirmada): .modal-container > .modal-header /
   .modal-body / .modal-footer (filhos DIRETOS, sem wrapper).
   Gustavo 2026-06-02: padronizar "drawer central → lateral", bonito.
   ========================================================================== */

/* Overlay: backdrop continua cobrindo tudo (escuro + blur do base/onda-8);
   o container deixa de ser centralizado e ancora na direita. */
:root[data-theme="light"] .modal-overlay.as-drawer {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}

/* Painel: ancorado à direita, altura cheia, desliza da direita.
   A largura vem da classe --w-* que cada modal já tem (não sobrescreve). */
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--border-default);
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  overflow: hidden;                 /* quem rola é o .modal-body */
  display: flex;
  flex-direction: column;
  animation: drawer-slide-in var(--duration-base) var(--ease-out);
}

/* Largura por conteúdo. O onda-7b tem um `.modal-container { max-width:880px }`
   global que atropela as classes --w-* — então cravamos aqui (carrega por
   último + especificidade 0,5,0 vence). Default 760 cobre o drill-down (tabela,
   sem classe --w). Pequenos formulários ficam estreitos e elegantes. */
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container        { max-width: 760px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--users  { max-width: 720px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--w-460  { max-width: 460px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--w-520  { max-width: 520px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--w-540  { max-width: 540px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--w-560  { max-width: 560px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--w-580  { max-width: 580px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--w-640  { max-width: 640px; }
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container--w-720  { max-width: 720px; }

/* Header fixo no topo (não rola). */
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container > .modal-header {
  flex: 0 0 auto;
}

/* Corpo rolável entre header e footer. */
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

/* Rodapé fixo na base (ações sempre visíveis). */
:root[data-theme="light"] .modal-overlay.as-drawer .modal-container > .modal-footer {
  flex: 0 0 auto;
}

/* Mobile: drawer ocupa a largura toda, sem borda esquerda. */
@media (max-width: 760px) {
  :root[data-theme="light"] .modal-overlay.as-drawer .modal-container {
    max-width: 100%;
    border-left: 0;
  }
}

/* Paisagem baixa: garante que o corpo comprima e o footer apareça. */
@media (max-height: 640px) {
  :root[data-theme="light"] .modal-overlay.as-drawer .modal-container > .modal-body {
    min-height: 0;
  }
}

/* Respeita quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .modal-overlay.as-drawer .modal-container {
    animation: none;
  }
}