/* ==========================================================================
   JANELAS DE CADASTRO                                           14/10/2026

   Editar contrato, equipamento, usuário, permissão, empresa, justificativa e
   componente abre como janela sobre a lista, com o fundo embaçado — o mesmo
   desenho de "Novo contrato" (styles.css, NOVO CONTRATO). Antes, a edição
   trocava a tela inteira por uma página "Edição".

   A classe .janela-de-cadastro vai no painel de edição (posta pelo app.js só
   nas telas de cadastro) e nos formulários de justificativa e componente. O
   fundo é um .form-modal-backdrop: o embaçado vem de modal-standard.css.

   Quatro #dashboardView porque o painel e os formulários já têm regras com
   três ids e !important (interface-standard.css). Quem vence aqui é a
   especificidade, não a ordem: o arquivo carrega antes de interface-standard,
   porque demand-email.css precisa continuar o último (interface-standard.test).
   ========================================================================== */
#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro:not(.hidden) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10001 !important;
  /* 100%, e não 100vw: no elemento fixo, 100% é a tela sem a barra de rolagem. */
  width: min(880px, calc(100% - 48px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 64px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 26px !important;
  border: 1px solid var(--vc-glass-line, rgba(16, 40, 70, .1)) !important;
  border-radius: var(--vc-r-xl, 26px) !important;
  background: var(--ui-surface, #ffffff) !important;
  box-shadow: 0 26px 70px rgba(16, 40, 70, .22) !important;
}

/* Cada painel é uma camada própria (position: relative; z-index: 1), abaixo da
   barra do topo (sticky, z-index 30). Justificativa e componente moram dentro
   do painel: com a janela aberta, o painel sobe acima da barra, para o fundo
   embaçado cobrir a tela toda, como na janela de edição. */
#dashboardView#dashboardView#dashboardView#dashboardView .panel:has(> .janela-de-cadastro:not(.hidden)) {
  z-index: 40 !important;
}

/* --- Título ---------------------------------------------------------------- */
#dashboardView#dashboardView#dashboardView#dashboardView #editPanel.janela-de-cadastro .panel-header {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Na página o título aparece na barra do topo e a cópia do cabeçalho fica
   escondida; na janela a barra do topo é da tela de trás, então o título volta
   para dentro da janela. */
#dashboardView#dashboardView#dashboardView#dashboardView #editPanel.janela-de-cadastro .panel-header .page-header-copy {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#dashboardView#dashboardView#dashboardView#dashboardView #editPanel.janela-de-cadastro .panel-header .eyebrow {
  display: none !important;
}

#dashboardView#dashboardView#dashboardView#dashboardView #editPanel.janela-de-cadastro #editTitle,
#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro .form-modal-title h3 {
  margin: 0 !important;
  color: var(--ui-text, #10233f) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.024em !important;
}

#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro .form-modal-title {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 4px !important;
  margin: 0 0 4px !important;
}

#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro .form-modal-title p {
  margin: 0 !important;
  color: var(--ui-muted, #5d6f87) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* O formulário de edição era uma página: sem moldura própria dentro da janela. */
#dashboardView#dashboardView#dashboardView#dashboardView #editPanel.janela-de-cadastro #editForm {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --- Ações num rodapé à direita, Cancelar antes de Salvar ------------------ */
#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro :is(.edit-actions, .justification-form-actions, .component-form-actions) {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  margin: 4px 0 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ui-border, #d8e0ea) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Cor e cantos dos botões ficam com o padrão de controles (control-standard.css),
   o mesmo que desenha os botões de "Novo contrato". Aqui só o tamanho. */
#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro :is(.edit-actions, .justification-form-actions, .component-form-actions) button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 96px !important;
  min-height: 40px !important;
  margin: 0 !important;
}

/* A mensagem de erro, quando entra na janela, ocupa a linha inteira. */
#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro > .message {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

#dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro > .message:empty {
  display: none !important;
}

@media (max-width: 720px) {
  #dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro:not(.hidden) {
    width: calc(100% - 24px) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 18px !important;
    border-radius: 20px !important;
  }

  #dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro :is(.edit-actions, .justification-form-actions, .component-form-actions) {
    flex-direction: column-reverse !important;
  }

  #dashboardView#dashboardView#dashboardView#dashboardView .janela-de-cadastro :is(.edit-actions, .justification-form-actions, .component-form-actions) button {
    width: 100% !important;
  }
}