/* ============================================================
   Formulário da petição inicial — aparência ÚNICA
   ------------------------------------------------------------
   `sistema/utils/initial_petition.php` é incluído por QUATRO views
   (peticao, inbox, rascunhos, autos) e cada uma carregava a sua
   própria cópia inline das regras do formulário. Elas divergiram:
   o editor full screen (/inbox/peticao, que renderiza peticao/home)
   estava sem as regras que o inbox tem, e o mesmo formulário
   aparecia diferente em cada tela.

   Este arquivo é a fonte única. Cada regra é ESCOPADA em
   `#modalProporAcao`, o container do formulário, por dois motivos:

     1. não vaza para o resto de nenhuma das quatro páginas — elas
        usam `.form-control`, `.card-body`, `.select2-*` fora daqui;
     2. um id (1,x,x) vence as regras de classe do `<style>` inline
        das views, que carregam DEPOIS deste arquivo.

   Os valores são os do INBOX, que é a referência de layout atual.
   As regras inline das views continuam onde estão, a serviço do
   que há FORA do formulário; aqui dentro, quem manda é este arquivo.
   ============================================================ */

/* ——— Campos de texto ——— */

#modalProporAcao .form-petition {
    background-color: #fff !important;
}

#modalProporAcao .form-petition:focus {
    border-color: #D9D9D9 !important;
}

/* peticao/home.php impõe `height: 40px !important` no `.form-petition`,
   que o inbox não tem. Fora do formulário aquela regra continua valendo
   (ela serve às divs `dinamic-divs-dare-fs`, montadas por JS); aqui a
   altura volta a sair do padding, como no inbox. */
#modalProporAcao .form-petition {
    height: auto !important;
}

/* ——— Selects ——— */

#modalProporAcao .form-select-petition {
    background-color: #fff !important;
}

#modalProporAcao .form-select-petition:focus {
    border-color: #D9D9D9 !important;
    background-color: #fff !important;
}

#modalProporAcao .form-select {
    cursor: pointer;
}

/* ——— Checkboxes ——— */

#modalProporAcao .form-check-petition {
    border-color: #000 !important;
}

/* ——— select2 (polos e participantes) ———
   Só o inbox declarava isto inline. MEDIDO: hoje não muda nada na tela — o
   select2.min.css já pinta o campo de branco, e o
   `.select2-container .select2-selection--single{background-color:#ededed!important}`
   do style.min.css não alcança este elemento. Fica aqui pela PARIDADE: a
   regra existia numa das quatro views e não nas outras, que é a divergência
   que este arquivo elimina. Se o branco do select2.min.css sair um dia, as
   quatro telas continuam iguais em vez de se separarem de novo. */
#modalProporAcao .select2-container--default .select2-selection--single {
    background-color: #fff !important;
}

/* A seta do select2 centrada na caixa de 40px. Mesma conta de
   lm-dropdown.css: (40 - 26) / 2. Aqui a especificidade é (1,3,0),
   contra os (0,3,0) do select2.min.css. */
#modalProporAcao .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px !important;
}

/* ——— Fundo da modal ———
   `peticao` e `rascunhos` pintam de #F8FAFC; `inbox` e `autos` deixam
   branco. `body` à frente leva o seletor a (1,1,1), acima do
   `#modalProporAcao .modal-content` (1,0,1) inline daquelas duas views,
   que também é !important. */
body #modalProporAcao .modal-content {
    background-color: #fff !important;
}

/* ============================================================
   PARIDADE COMPLETA COM O INBOX
   ------------------------------------------------------------
   As regras acima cobriam o que eu havia sondado à mão. Varrendo
   TODO par (elemento, propriedade) que qualquer `<style>` inline
   das quatro views aplica a qualquer elemento do formulário,
   apareceram 98 divergências em 341 pares — vindas das regras
   abaixo. O que manda é sempre o valor computado no INBOX.
   ============================================================ */

/* ——— o que o INBOX tem e faltava nas outras ——— */

/* "+ Adicionar" dos polos e de outros assuntos (faltava em autos) */
#modalProporAcao .add-polo {
    color: #6F1A07 !important;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

/* Faixa "tipo de peça" sob o cabeçalho do formulário (faltava em autos) */
#modalProporAcao .tipo-peca {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(196, 196, 196, 0.1);
    padding: 15px 0;
    border-radius: 0 0 5px 5px;
    border-left: 1px solid #C4C4C4;
    border-right: 1px solid #C4C4C4;
    border-bottom: 1px solid #C4C4C4;
    margin: 0;
}

/* Botão de recolher seção (faltava em rascunhos; autos ainda punha
   um margin-right de 5px que o inbox não tem) */
#modalProporAcao .btnCollapse {
    background-color: #f0e8e7;
    border-radius: 5px;
    padding: 2px 10px;
    cursor: pointer;
    transition: 0.2s;
    margin-right: 0;
}

/* Botão "Salvar petição" (faltava em rascunhos e autos) */
#modalProporAcao .btn-peticionar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* Cartão dos campos personalizados (só o inbox desenhava a borda) */
#modalProporAcao .card-body {
    border: 1px solid #cecece;
}

/* Fundo dos campos que NÃO são do formulário em si — o textarea do
   feedback do autofill. O `.form-petition` acima continua branco,
   porque lá o !important é dele. */
#modalProporAcao .form-control {
    background-color: #ededed;
}

/* ——— o que OUTRAS views acrescentavam e o inbox não tem ——— */

/* `peticao` traz `.divDropzoneAnexos p, img, button { user-select: none }`.
   As duas últimas partes do seletor são de ELEMENTO, sem escopo nenhum:
   pegam toda imagem, todo botão e todo parágrafo da página, inclusive os 20
   que estão dentro deste formulário, onde o inbox deixa o texto selecionável.
   (0,0,1) contra (1,0,1) daqui. */
#modalProporAcao img,
#modalProporAcao button,
#modalProporAcao p {
    user-select: auto;
    -webkit-user-select: auto;
}

/* `peticao` impõe `.form-control { border-radius: .5rem !important }`, que
   vence até o `#modalProporAcao .form-petition` do próprio partial — porque
   !important ganha de não-!important seja qual for a especificidade. O raio
   volta ao token do inbox. */
#modalProporAcao .form-control {
    border-radius: var(--ml-radius-sm) !important;
}

/* ============================================================
   O LAYOUT MODERNO DENTRO DO FORMULÁRIO, SEM DEPENDER DO <body>
   ------------------------------------------------------------
   Esta era a diferença de verdade — cor, bordas e fontes — e ela
   não estava em regra nenhuma das views.

   A classe `modern-layout` é adicionada ao <body> por JavaScript,
   num único lugar: `sistema/menu_sistema.php`. E DUAS das quatro
   telas que incluem este formulário não carregam esse partial:

       peticao (o editor full screen, /inbox/peticao)  — sem menu
       autos                                           — sem menu
       inbox, rascunhos                                — com menu

   Sem a classe, some tudo o que está sob `body.modern-layout` no
   modern-layout.min.css: 12 regras que alcançam este formulário
   (.modal-content, .modal-header, .modal-body, label, .form-control,
   .form-select, .card, .btn-*) e — pior — os 36 TOKENS `--ml-*`,
   que são declarados justamente em `body.modern-layout`, não em
   `:root`. Sem eles, todo `var(--ml-…)` vira declaração inválida e
   é descartada: o lm-dropdown.css inteiro fica sem borda, sem raio
   e sem cor dentro dessas telas.

   O bloco abaixo é GERADO a partir do próprio modern-layout.min.css
   (tokens + as 12 regras que casam com algum elemento do
   formulário), reescopado de `body.modern-layout X` para
   `#modalProporAcao X`. Onde a classe existe, os valores são os
   mesmos e nada muda; onde não existe, o formulário passa a ter o
   layout moderno como no inbox.

   Ao atualizar o modern-layout.min.css, regerar este trecho.
   ============================================================ */

#modalProporAcao {
    --ml-primary:#6F1A07;
    --ml-primary-light:#8B3A1F;
    --ml-primary-dark:#5A1206;
    --ml-primary-subtle:#FDF2F0;
    --ml-accent:#5A2D0C;
    --ml-accent-light:#7A4520;
    --ml-bg:#FFFFFF;
    --ml-surface:#FFFFFF;
    --ml-surface-hover:#F5F0EE;
    --ml-surface-active:#EDE5E2;
    --ml-border:#E8E0DC;
    --ml-border-light:#F3EEEC;
    --ml-text:#1C1210;
    --ml-text-secondary:#6B5B54;
    --ml-text-muted:#9C8E87;
    --ml-sidebar-bg:linear-gradient(180deg, #3B1106 0%, #5A1A0A 100%);
    --ml-sidebar-text:#F5DDD7;
    --ml-sidebar-hover:rgba(255, 255, 255, 0.08);
    --ml-sidebar-active:rgba(255, 255, 255, 0.15);
    --ml-submenu-bg:#FFFFFF;
    --ml-radius-sm:8px;
    --ml-radius-md:12px;
    --ml-radius-lg:16px;
    --ml-radius-xl:20px;
    --ml-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);
    --ml-shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.07),0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --ml-shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.08),0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --ml-shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.08),0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --ml-transition:0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ml-transition-slow:0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ml-sidebar-width:72px;
    --ml-submenu-width:280px;
    /* Do bloco original do body ficam só as propriedades que HERDAM para dentro
       do formulário. A fonte é uma delas, e a falta dela era parte do que o
       usuário viu como "fontes diferentes". */
    font-family:Inter,'Open Sans',system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    /* `background: var(--ml-bg)` (= #FFFFFF) FICOU DE FORA, de propósito.
       No original ele pinta o <body>; aqui `#modalProporAcao` é o elemento
       `.modal`, o OVERLAY que cobre a viewport inteira. Copiado junto, ele
       pintava o overlay de branco e escondia o `.modal-backdrop` — a tela
       ficava sem o escurecimento atrás da modal. O overlay tem de continuar
       transparente; quem pinta é o `.modal-content`. */
}

#modalProporAcao .btn-peticionar-novo {
    background:var(--ml-primary);
    color:#fff;
    border-radius:var(--ml-radius-sm);
    font-weight:600;
    font-size:13px;
    padding:10px 16px;
    transition:var(--ml-transition);
    box-shadow:var(--ml-shadow-sm);
    width:auto!important;
    margin-left:16px;
    margin-right:16px;
}

#modalProporAcao .btn-bg-marrom {
    background:var(--ml-primary)!important;
    border:none;
    border-radius:var(--ml-radius-sm);
    font-weight:600;
    transition:var(--ml-transition);
    box-shadow:var(--ml-shadow-sm);
}

#modalProporAcao .form-control {
    border-radius:var(--ml-radius-sm);
    transition:var(--ml-transition);
}

#modalProporAcao .form-control {
    border-color:var(--ml-border);
}

#modalProporAcao .form-select,
#modalProporAcao .select2-container--default .select2-selection--single {
    border-radius:var(--ml-radius-sm);
    border-color:var(--ml-border);
}

#modalProporAcao label {
    font-size:13px;
    font-weight:500;
    color:var(--ml-text-secondary);
}

#modalProporAcao .modal-content {
    border-radius:var(--ml-radius-xl)!important;
    border:none!important;
    box-shadow:var(--ml-shadow-xl);
    overflow:hidden;
}

#modalProporAcao .modal-header {
    border-bottom:1px solid var(--ml-border-light);
    padding:20px 24px;
}

#modalProporAcao .modal-body {
    padding:24px;
}

#modalProporAcao .card {
    border:1px solid var(--ml-border);
    border-radius:var(--ml-radius-md);
    box-shadow:var(--ml-shadow-sm);
    transition:transform var(--ml-transition),box-shadow var(--ml-transition);
    background:var(--ml-surface);
}

#modalProporAcao .card .card-body {
    padding:1.25rem;
}

#modalProporAcao .modal-content {
    border-radius:var(--ml-radius-md);
    border:1px solid var(--ml-border);
    box-shadow:var(--ml-shadow-xl);
}

/* Dropdown do "Peticionar" (Editor de petição / Importar petição): o botão fica no RODAPÉ do modal e o
   `.modal-content` corta o que passa da borda (overflow: hidden, para os cantos arredondados). Por isso o
   menu é `position: fixed` — escapa do corte e SOBREPÕE o modal e a página — e abre sempre PARA BAIXO; o JS
   (`posicionaCollapsePetitionDropdown`) escreve top/left/min-width/max-height, e se faltar espaço embaixo o
   modal rola um pouco (`reservaEspacoParaCollapsePetitionDropdown`). */
#modalProporAcao .btn-collapse-petition .collapse-dropdown {
    position: fixed;
    margin: 0;
    z-index: 2000;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* ——— Seção "Tramitação ágil" (D224) ———
   Dropdown MÚLTIPLO de poderes especiais: reaproveita a pele do LmDropdown (.lm-dd*, em
   lm-dropdown.css) sem o JS dele, que é de seleção única. Só o que é próprio da variante múltipla
   (a faixa "Selecionar todos / Desmarcar todos" e a opção com caixinha) mora aqui. */

#modalProporAcao .lm-dd-multi .lm-dd-multi-acoes {
    display: flex;
    gap: 8px;
    padding: 2px 2px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ml-border-light, #EFE9E6);
}

#modalProporAcao .lm-dd-multi .lm-dd-multi-acoes button {
    flex: 1 1 0;
    height: 32px;
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-sm);
    background: #fff;
    color: var(--ml-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ml-transition);
}

#modalProporAcao .lm-dd-multi .lm-dd-multi-acoes button:hover {
    background: var(--ml-surface-hover);
}

#modalProporAcao .lm-dd-multi .lm-dd-opt {
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    font-weight: 400;
}

#modalProporAcao .lm-dd-multi .lm-dd-opt .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    float: none;
}

/* Campo de arquivo: mesma altura, borda e raio dos campos de texto do formulário. O <input type="file">
   nativo fica na tela só para o foco e o teclado; quem aparece é o botão (um <label for>) + o nome. */

#modalProporAcao .lm-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 5px 8px 5px 6px;
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-sm);
    background: #fff;
    font-size: 14px;
    transition: var(--ml-transition);
}

#modalProporAcao .lm-upload:focus-within {
    border-color: var(--ml-primary-light);
    box-shadow: 0 0 0 3px var(--ml-primary-subtle);
}

#modalProporAcao .lm-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    clip: rect(0 0 0 0);
}

#modalProporAcao .lm-upload-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--ml-surface-hover);
    color: var(--ml-text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--ml-transition);
}

#modalProporAcao .lm-upload-btn:hover {
    background: var(--ml-surface-active, #EDE5E2);
}

#modalProporAcao .lm-upload-nome {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: var(--ml-text);
    white-space: nowrap;
}

#modalProporAcao .lm-upload-nome.is-empty {
    color: var(--ml-text-muted);
}

#modalProporAcao .lm-upload-arquivo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#modalProporAcao .lm-upload-nome .remover-anexo-tramitacao-agil {
    flex: 0 0 auto;
    margin-left: auto;
}

#modalProporAcao .lm-upload-nome .remover-anexo-tramitacao-agil:hover {
    color: var(--ml-danger, #D14343);
}

/* Sub-seção "Contato do(a) Advogado(a)": separada do bloco de honorários por um filete e um título
   menor que o da seção, para a hierarquia ficar legível quando todas as caixinhas estão marcadas. */

#modalProporAcao .tramitacao-agil-subsecao {
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--ml-border-light, #EFE9E6);
}

#modalProporAcao .tramitacao-agil-subtitulo {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
}

/* Rótulo de duas linhas ("local de internação (informar hospital, quarto, contato…)") empurrava o campo
   dele para baixo do vizinho. Cada coluna vira uma pilha vertical e o controle (campo, dropdown, arquivo)
   encosta no FUNDO dela: numa mesma linha da grade os campos ficam sempre na mesma altura, qualquer que
   seja o tamanho do rótulo. */

#modalProporAcao #div-tramitacao-agil .row > .form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Mensagem de formato inválido ("Telefone inválido", "E-mail inválido", "Documento inválido") fica FORA do
   fluxo, na margem de baixo do campo: se ocupasse altura, a coluna ficava mais alta que a vizinha e o campo
   dela (encostado no fundo, pela regra acima) descia junto — o layout "quebrava" ao digitar algo inválido. */

#modalProporAcao #div-tramitacao-agil .row > .form-group > small {
    position: absolute;
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    top: 100%;
    margin-top: 2px;
    line-height: 1.2;
    white-space: nowrap;
}

#modalProporAcao #div-tramitacao-agil .row > .form-group > .form-control,
#modalProporAcao #div-tramitacao-agil .row > .form-group > .form-select,
#modalProporAcao #div-tramitacao-agil .row > .form-group > .select2-container,
#modalProporAcao #div-tramitacao-agil .row > .form-group > .lm-dd,
#modalProporAcao #div-tramitacao-agil .row > .form-group > .lm-upload {
    margin-top: auto;
}