/* ==========================================================================
   MACAM Connect — camada de acabamento
   ==========================================================================
   Quatro decisões pedidas, com uma regra em comum: nada aqui pode custar
   densidade nem legibilidade. Este sistema é usado o dia inteiro, e brilho
   que atrapalha a leitura de uma coluna de valores é ruído, não acabamento.

     1. Profundidade nos blocos — sombra com deslocamento e desfoque reais.
     2. Degradê na barra lateral — de baixa amplitude, para dar corpo à
        superfície sem virar decoração.
     3. Estados de passagem em todo controle clicável.
     4. Raio maior nos campos, em escala: quanto maior o recipiente, maior a
        curva.
   ========================================================================== */

:root {
    /* Escala de elevação. Cada nível tem DESLOCAMENTO e DESFOQUE — um halo
       centrado e sem offset não é sombra, é decoração. As duas camadas dão o
       contato (a linha rente) e a difusão (a sombra que abre). */
    --macam-elev-1:
        0 1px 2px rgba(16, 24, 40, 0.05),
        0 1px 3px rgba(16, 24, 40, 0.06);
    --macam-elev-2:
        0 1px 2px rgba(16, 24, 40, 0.06),
        0 4px 10px -2px rgba(16, 24, 40, 0.08);
    --macam-elev-3:
        0 2px 4px rgba(16, 24, 40, 0.06),
        0 12px 24px -6px rgba(16, 24, 40, 0.12);

    /* Raio em escala: campo < bloco < painel. A curva cresce com a área, e é
       isso que faz a hierarquia parecer intencional em vez de arredondada. */
    --macam-raio-campo: 0.5rem;
    --macam-raio-bloco: 0.75rem;
    --macam-raio-painel: 1rem;
}

/* No escuro a sombra some contra o fundo; o que separa as superfícies ali é a
   luz na borda de cima, não a sombra embaixo. */
.dark {
    --macam-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --macam-elev-2: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --macam-elev-3: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- 1. Profundidade dos blocos ----------------------------------------- */

fieldset.module,
#result_list,
.module > .bg-white,
[id$="-group"] > .inline-related > fieldset,
.macam-cartao {
    border-radius: var(--macam-raio-bloco);
    box-shadow: var(--macam-elev-2);
}

/* A tabela é o conteúdo principal da listagem: recebe o nível acima, para
   descolar do fundo sem que os blocos ao redor briguem com ela. */
#result_list {
    box-shadow: var(--macam-elev-2);
    overflow: hidden;
}

/* Sobreposições realmente flutuam — aí a sombra é forte de propósito. */
.macam-modal,
.select2-dropdown,
#nav-sidebar nav > nav {
    border-radius: var(--macam-raio-bloco);
    box-shadow: var(--macam-elev-3);
}

/* --- 2. Degradê da barra lateral ---------------------------------------- */
/* Amplitude baixa de propósito: dois passos do mesmo azul-noite, do mais
   claro no topo (onde está a marca) ao mais fechado embaixo. O suficiente
   para a superfície ter corpo; não o bastante para competir com o item ativo,
   que é o único elemento que deve saltar dali. */

#nav-sidebar,
#nav-sidebar > nav {
    background-image: linear-gradient(180deg, #333d57 0%, #2a334e 42%, #222a42 100%);
}

.dark #nav-sidebar,
.dark #nav-sidebar > nav {
    background-image: linear-gradient(180deg, #0b1440 0%, #050a30 46%, #030720 100%);
}

/* --- 3. Estados de passagem --------------------------------------------- */

button,
a.addlink,
.submit-row button,
.macam-botao,
#result_list td a,
.object-tools a {
    transition:
        background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
        color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ação principal: sobe um degrau de elevação sob o cursor. */
button[name="_save"]:hover,
a.addlink:hover {
    box-shadow: var(--macam-elev-2);
}

button[name="_save"]:active,
a.addlink:active {
    box-shadow: var(--macam-elev-1);
}

/* Secundários: o fundo responde, a borda acompanha. */
.submit-row button:not([name="_save"]):hover,
a.export_link:hover,
a.import_link:hover {
    background-color: var(--color-base-50);
    border-color: var(--color-base-300);
}

.dark .submit-row button:not([name="_save"]):hover,
.dark a.export_link:hover,
.dark a.import_link:hover {
    background-color: var(--color-base-800);
    border-color: var(--color-base-600);
}

/* Linha da listagem: o alvo inteiro reage, não só o link. */
#result_list tbody tr {
    transition: background-color 120ms ease;
}

#result_list tbody tr:hover {
    background-color: var(--color-base-50);
}

.dark #result_list tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* --- 4. Raio dos campos -------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.select2-container--default .select2-selection--single,
.vTextField,
.vLargeTextField {
    border-radius: var(--macam-raio-campo);
}

/* O foco ganha um anel em vez de só trocar a borda: a borda sozinha some
   quando o campo está entre outros dois. */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(86, 39, 153, 0.12);
    outline: none;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    box-shadow: 0 0 0 3px rgba(185, 158, 225, 0.18);
}

/* --- Barra de filtros ---------------------------------------------------- */
/* Os campos de data ganharam alguns pixels com o raio novo e empurraram
   "Aplicar filtros" para uma segunda linha, sozinho e desalinhado. O botao e
   o fim da leitura da barra: ele fica na mesma linha, e quem cede largura sao
   os campos de intervalo, que tem tamanho conhecido. */

/* flex-wrap continua "wrap": forcar nowrap fez a barra empurrar a pagina 28px
   para fora. O que cabe se resolve com a largura dos campos, nao proibindo a
   quebra — proibir so troca uma quebra visivel por uma barra de rolagem. */
.macam-filtros {
    align-items: flex-end;
}

.macam-filtros .macam-filtro {
    min-width: 0;
}

/* Nao cabe tudo em uma linha sem cortar as datas, entao a barra quebra — e o
   botao termina a leitura no mesmo lugar de sempre, na direita, em vez de
   ficar solto embaixo do primeiro campo. */
.macam-filtros .macam-filtro-acoes {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ===========================================================================
   BARRA DE FILTROS: uma linha, uma altura, uma base.

   Medido na tela de O.S. Operacionais com dados reais:

       busca            top=103  bot=138  h=35  raio=8px
       Status           top=122  bot=156  h=34  raio=6px
       datas            top=122  bot=156  h=34  raio=8px
       Aplicar filtros  top=122  bot=156  h=34  raio=6px

   Quatro controles lado a lado, nenhum comecando nem terminando na mesma
   altura e com dois raios diferentes. A causa: #toolbar (que traz a busca) e
   display:block, entao a caixa de busca encosta no TOPO dos 54px do bloco;
   form.macam-filtros e align-items:flex-end, entao os filtros encostam na
   BASE dos mesmos 54px. Os containers coincidem — o conteudo vai para pontas
   opostas.
   =========================================================================== */

/* 1. A busca alinha com a PRIMEIRA linha de campos dos filtros.

   A primeira versao usava align-items:flex-end e funcionava enquanto tudo
   cabia numa linha. No Painel de O.S., com tres grupos de filtro, o bloco de
   filtros cresce para tres linhas -- e o flex-end jogava a busca para o FUNDO
   desse bloco, abrindo um vazio de duas linhas acima dela. Encostar na base
   so alinha quando os dois blocos tem a mesma altura.

   20px e a distancia medida do topo do grupo ate o campo (o rotulo em caixa
   alta tem 16px e o gap e 4px). Com esse recuo a busca acompanha o primeiro
   campo, tenham os filtros uma linha ou quatro. */
#toolbar {
    align-items: flex-start;
    display: flex;
    padding-top: 20px;
}

/* 2. Uma altura so. 36px em vez de 34/35: e a altura da busca da barra
      lateral, entao a mesma medida vale no sistema inteiro. */
#toolbar form#changelist-search > div,
.macam-filtros .macam-filtro-campo,
.macam-filtros .macam-filtro-aplicar,
.macam-filtros .macam-filtro-limpar {
    height: 36px;
}

/* 3. Um raio so. Estava 6px nos campos que eu mesmo montei e 8px nos do
      unfold, na mesma barra. 8px e o raio de campo da marca. */
#toolbar form#changelist-search > div,
.macam-filtros .macam-filtro-campo,
.macam-filtros .macam-filtro-aplicar,
.macam-filtros .macam-filtro-limpar {
    border-radius: var(--macam-raio-campo, 0.5rem);
}

/* 4. Campo de data: 8,25rem (132px) estava ERRADO. Medido de verdade,
      "dd/mm/aaaa" pede 92px na fonte de 13px, mais 18px de padding e os 24px
      do indicador nativo do calendario = 134px. Em 132px sobrava -2px e o
      campo aparecia cortado ("dd/mm/aaac"). 9,5rem da a folga. */
.macam-filtros input[type="date"] {
    max-width: 9.5rem;
    min-width: 9.5rem;
}

/* 5. O icone do calendario e do relogio e desenhado pelo NAVEGADOR, nao por
      nos: sem declarar o esquema de cor ele vem sempre escuro, e no tema
      escuro ficava um borrao invisivel dentro do campo. color-scheme faz o
      navegador inverter a propria decoracao junto com o tema. */
:root:not(.dark) .macam-filtros input[type="date"] {
    color-scheme: light;
}

.dark .macam-filtros input[type="date"] {
    color-scheme: dark;
}

/* O indicador nativo e pequeno e sem area de clique; um alvo de 24px e o
   minimo para acertar com o dedo ou com o mouse sem mirar. */
.macam-filtros input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    height: 18px;
    opacity: 0.55;
    padding: 3px;
    transition: opacity 0.15s;
    width: 18px;
}

.macam-filtros input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* 6. Botao de acao com icone. "Aplicar filtros" e "Limpar" eram texto puro no
      meio de uma barra em que todo outro controle tem simbolo — o olho procura
      a forma antes de ler a palavra. */
.macam-filtros .macam-filtro-aplicar,
.macam-filtros .macam-filtro-limpar {
    align-items: center;
    display: inline-flex;
    gap: 0.375rem;
}

.macam-filtros .macam-filtro-aplicar .material-symbols-outlined,
.macam-filtros .macam-filtro-limpar .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

/* Abaixo de 1280px a barra volta a quebrar — ali ela tem mesmo de empilhar,
   e o botao acompanha a largura total em vez de ficar solto. */
@media (max-width: 1279px) {
    .macam-filtros {
        flex-wrap: wrap;
    }
}

/* Contador de cartoes no topo de cada coluna do quadro. Com px-2/py-0.5 e
   rounded-full, um numero de um digito virava uma pilula de 24x16 — um circulo
   achatado. Aqui o contador e redondo de verdade ate dois digitos e so vira
   pilula quando o numero realmente exige. */
.macam-contador {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.375rem;
}

/* ===========================================================================
   UM RAIO SO PARA TODO CONTROLE — e para o que encosta nele.

   O detector de controles achou o mesmo defeito em 20 lugares: um campo com
   8px de raio colado a um botao com 6px (a lupa do raw_id em 6 telas de
   cadastro, o botao de acao ao lado do select de status em Check-ins) ou com
   0px (o seletor de arquivo em Meu perfil). Dois raios encostados na mesma
   linha leem como duas pecas de sistemas diferentes.

   O raio vem do token, nunca de um numero solto: quando --macam-raio-campo
   mudar, muda em todo lugar de uma vez.
   =========================================================================== */

.related-lookup,
.related-widget-wrapper > a,
#result_list td a[class*="border"],
#result_list td button,
.field-box > a[class*="border"],
form .vForeignKeyRawIdAdminField,
input[type="file"],
input[type="file"]::file-selector-button {
    border-radius: var(--macam-raio-campo);
}

/* O seletor de arquivo nativo vinha com 14px de altura, raio zero e sem
   borda: ao lado de um campo de 36px em Meu perfil, ele nao parecia um campo
   -- parecia texto solto com um botao cinza do navegador. */
input[type="file"] {
    background-color: var(--color-base-50, #fafafa);
    border: 1px solid var(--color-base-200);
    font-size: 0.8125rem;
    height: 36px;
    padding: 0;
}

input[type="file"]::file-selector-button {
    background: var(--color-base-100, #f4f4f5);
    border: 0;
    border-right: 1px solid var(--color-base-200);
    border-radius: var(--macam-raio-campo) 0 0 var(--macam-raio-campo);
    color: var(--color-font-default-light);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    height: 100%;
    margin-right: 0.625rem;
    padding: 0 0.75rem;
    transition: background 0.15s;
}

input[type="file"]::file-selector-button:hover {
    background: var(--color-base-200, #e4e4e7);
}

.dark input[type="file"] {
    background-color: var(--color-base-900);
    border-color: var(--color-base-700);
}

.dark input[type="file"]::file-selector-button {
    background: var(--color-base-800);
    border-right-color: var(--color-base-700);
    color: var(--color-font-default-dark);
}

/* As duas metades do seletor de permissoes (disponiveis / escolhidas) vinham
   com 84px e 121px: a caixa da esquerda tem um campo de busca acima que a
   direita nao tem, e a lista de baixo compensava a diferenca. Duas listas que
   o usuario compara lado a lado precisam da mesma altura. */
/* height sozinho nao resolvia: o valor COMPUTADO vinha 229px mesmo com a
   regra dizendo 12rem, porque as colunas sao itens de um flex que estica os
   filhos -- a coluna da esquerda e mais alta (tem o campo de busca em cima) e
   arrastava o <select> junto. max-height poe o teto que o esticamento
   respeita, e as duas listas passam a ter a mesma altura para comparar. */
.selector .selector-available select,
.selector .selector-chosen select {
    height: 12rem;
    max-height: 12rem;
    min-height: 12rem;
}


/* ===========================================================================
   PAINEL DE O.S.: a tabela precisava de 1.396px numa caixa de 1.210px.

   O container tem rolagem horizontal, entao nada "quebrava" -- e por isso
   passou por toda varredura. Mas a coluna Status ficava fora da vista sem
   nenhum sinal de que havia mais a direita, e quem abre a tela nao descobre
   sozinho que pode rolar. Medindo coluna a coluna, o Cliente sozinho ocupava
   327px: mais que Periodo, Qtde e Total somados.

   As larguras abaixo somam 1.203px e a tabela passa a caber inteira.
   =========================================================================== */

/* Testei e DESCARTEI tres caminhos para fazer as dez colunas caberem em
   1.210px, para nao repetirem depois:

   - max-width no <td>: nao tem efeito. Em table-layout auto a largura da
     coluna vem do min-content do conteudo, e o meu proprio white-space:nowrap
     faz o min-content ser a linha inteira ("TATICA MARKETING ESPORTIVO LTDA").
   - width no <th>: mesmo motivo, ignorado.
   - table-layout:fixed: cabe, mas divide igual e da 12px para a coluna do
     avatar em Colaboradores e para a de acoes aqui. Pior que rolar.

   O que resta e <col> com largura por listagem -- 42 listagens. A tabela
   larga com rolagem horizontal e legitima numa tela operacional de dez
   colunas; o defeito era a rolagem ser INVISIVEL. E isso a sombra resolve.
   =========================================================================== */

/* TENTEI duas linhas com -webkit-line-clamp aqui e deu ERRADO de um jeito pior
   que o problema original: em <td> o clamp desenha as reticencias mas NAO
   confina o texto -- a celula mantem a altura da linha e o resto transborda
   por cima da linha de baixo. Na lista de O.S. a palavra "SEGURANCA" da O.S.
   06683 aparecia escrita em cima de "Evento Color WOW L'Oreal" da 06682.

   E as quatro varreduras passaram limpas: as alturas ficaram uniformes (era o
   que as regras mediam) e texto sobreposto entre linhas nao era medido por
   nenhuma. Virou regra nova no detector de composicao.

   Uma linha com reticencias, como toda outra coluna. */
#result_list td.field-nome_evento {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quando ainda assim nao couber (janela estreita), a borda direita ganha uma
   sombra que aparece SO enquanto ha conteudo fora da vista -- e some ao
   chegar no fim da rolagem. Sem ela, uma coluna cortada parece uma coluna
   que nao existe. */
.simplebar-content-wrapper {
    background:
        linear-gradient(to right, var(--color-base-50, #fff) 30%, transparent) 0 0 / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--color-base-50, #fff) 30%, transparent) 100% 0 / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.16), transparent) 0 0 / 0.75rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) 100% 0 / 0.75rem 100% no-repeat scroll;
}

.dark .simplebar-content-wrapper {
    background:
        linear-gradient(to right, var(--color-base-900, #18181b) 30%, transparent) 0 0 / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--color-base-900, #18181b) 30%, transparent) 100% 0 / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.5), transparent) 0 0 / 0.75rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.5), transparent) 100% 0 / 0.75rem 100% no-repeat scroll;
}

/* ===========================================================================
   BARRA DE FILTROS: um fluxo so, nao dois blocos que quebram por conta.

   Medido em seis larguras (1280 a 1920): a barra quebrava em TODAS. Ate em
   1920, com folga de sobra, o botao caia para outra linha.

   A causa e estrutural. A busca vive em #toolbar e os filtros em
   form.macam-filtros -- dois blocos irmaos. Quando os filtros nao cabem no
   espaco que sobra, eles quebram DENTRO do proprio bloco: "Periodo da O.S."
   fica orfao numa segunda linha e o vazio ao lado da busca nao e usado, por
   mais largo que seja.

   display:contents dissolve a caixa do <form> para efeito de layout -- o
   formulario continua existindo e submetendo, mas seus grupos passam a ser
   itens da MESMA linha flexivel da busca. Ai os cinco blocos (busca, Status,
   Aprovada em, Periodo, botao) fluem juntos e so quebram quando de fato nao
   ha espaco, preenchendo cada linha antes de abrir a seguinte.
   =========================================================================== */

#toolbar ~ form.macam-filtros,
form.macam-filtros {
    display: contents;
}

/* O pai passa a ser a barra de verdade. */
#toolbar:has(~ form.macam-filtros) {
    flex: 0 1 auto;
}

div:has(> #toolbar):has(> form.macam-filtros) {
    align-items: flex-end;
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.75rem;
}

/* flex-grow na busca NAO serve: numa caixa que quebra, o grow age por LINHA
   -- a busca esticava para preencher toda a primeira linha e empurrava os
   filtros para baixo, em qualquer largura. Medido: a busca ia de 337 a 592px
   dependendo da janela, e a barra quebrava sempre.
   Base fixa que pode encolher: ocupa 22rem quando ha espaco, cede quando nao. */
div:has(> #toolbar):has(> form.macam-filtros) > #toolbar {
    /* A BASE decide onde a linha quebra; o grow so distribui a sobra depois.
       Nenhum valor unico serve nas duas faixas de largura -- medido em seis:

         base 17rem: cabe inteira em 1680 e 1920, mas em 1536 o botao sobra
                     sozinho numa segunda linha;
         base 22rem: em 1536 quebra bonito (busca+Status+Aprovada / Periodo+
                     botao), mas em 1680 o botao volta a ficar orfao.

       Entao a base muda com a faixa: 22rem ate 1599px, 17rem daqui para cima.
       O teto de 28rem impede que a busca vire uma faixa de 500px. */
    flex: 1 0 22rem;
    max-width: 28rem;
    min-width: 12rem;
}

@media (min-width: 1600px) {
    div:has(> #toolbar):has(> form.macam-filtros) > #toolbar {
        flex-basis: 17rem;
    }
}

/* O botao fecha a leitura na direita da linha em que estiver -- sem
   margin-left:auto, que forcava quebra ao reservar todo o espaco livre. */
div:has(> #toolbar):has(> form.macam-filtros) .macam-filtro-acoes {
    margin-left: 0;
}

/* Os grupos de filtro nao esticam: cada um ocupa o que o campo pede. */
div:has(> #toolbar):has(> form.macam-filtros) .macam-filtro,
div:has(> #toolbar):has(> form.macam-filtros) .macam-filtro-acoes {
    flex: 0 0 auto;
}

/* O #toolbar encolhe (flex-shrink), mas a caixa de busca dentro dele mantinha
   384px fixos e TRANSBORDAVA: em 1680px vazava 47px para fora do proprio
   bloco e era desenhada por cima do filtro Status -- "Todos" aparecia como
   "odos". Um item flexivel so encolhe de verdade se o conteudo dele puder
   encolher junto, e min-width:auto (o padrao) impede isso. */
#toolbar form#changelist-search,
#toolbar form#changelist-search > div {
    min-width: 0;
    width: 100%;
}

#toolbar {
    min-width: 0;
    overflow: hidden;
}

/* Celulas de DUAS informacoes (nome + cargo, telefone + e-mail) sao excecao a
   regra de uma linha -- a segunda linha ali e desenho. Mas so vale se cada
   informacao ocupar UMA linha: em 1366px o nome "Fernanda Caroline Goncalves
   Do Vale" quebrava sozinho em duas e a celula ia a 56px, levando a linha da
   tabela a 69px ao lado de vizinhas de 49px.

   Cada filho vira uma linha unica com reticencias: a celula fica com duas,
   sempre, em qualquer largura. */
#result_list td.field-pessoa > *,
#result_list th.field-pessoa > *,
#result_list td.field-contato > *,
#result_list td.field-os_numero > *,
#result_list th.field-os_numero > * {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}