/* ==========================================================================
   MACAM Connect — Direção B: denso operacional
   ==========================================================================
   Escolha registrada: o sistema é usado o dia inteiro por quem monta O.S. de
   150 itens e confere valores linha a linha. A tela otimiza para VOLUME e
   COMPARAÇÃO, não para primeiro contato.

   Três decisões concretas:
     1. Poppins (a fonte do site institucional) na interface; ver marca.css.
     2. IBM Plex Mono em TODO número — datas, quantidades, dinheiro, IDs.
        Dígito de largura fixa é o que torna uma coluna comparável de relance.
     3. Linha de listagem mais baixa: cabe mais registro sem apertar o alvo
        de clique, que continua acima de 32px.

   O que NÃO muda: alturas de controle (38px), raio (6px), cores de estado.
   Densidade é ritmo, não redesenho.
   ========================================================================== */

@import url("plex.b71c34861510.css");

/* --- Tipografia base ---------------------------------------------------- */

:root,
body,
.unfold-body {
    font-family: "Poppins", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Todo número no sistema é monoespaçado. Vale para células de listagem,
   campos numéricos, datas e os totais do topo. */
#result_list td.field-total_formatado,
#result_list td.field-valor_formatado,
#result_list td.field-valor_unitario,
#result_list td.field-total_linha,
#result_list td.field-itens_total,
#result_list td.field-quantidade,
#result_list td.field-periodo,
#result_list td.field-periodo_item,
#result_list td.field-vencimento,
#result_list td.field-id_os,
#result_list td.field-os_numero,
#result_list td.field-documento,
#itens_os-group td.field-quantidade input,
#itens_os-group td.field-valor_venda input,
#itens_os-group td.field-total input,
#itens_os-group td.field-data_inicio input,
#itens_os-group td.field-horario_inicio input,
#itens_os-group td.field-horario_termino input,
#parcelas-group td.field-valor_parcela input,
.field-cpf input,
.field-cnpj input,
.field-cep input,
.field-inscricao_estadual input,
.field-rg input,
.field-percentual_imposto input {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
    font-variant-numeric: tabular-nums;
}

/* --- Densidade da listagem ---------------------------------------------- */

/* Cabeçalho vira etiqueta: menor, em maiúsculas, discreto. O peso visual da
   tabela pertence aos dados, não aos rótulos das colunas. */
#result_list thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    text-transform: uppercase;
}

/* Linha mais baixa: mais registros por tela.
   O padding sozinho nao resolve — o piso da altura e o CONTEUDO da celula:
   a etiqueta de status tem 24px e os icones de acao tambem. Os tres precisam
   encolher juntos, senao a linha nao desce de 45px. */
#result_list tbody td {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
}

/* O unfold fixa a altura da celula com a classe utilitaria h-[45px] — altura
   LITERAL, nao minima. Enquanto ela valer, mexer em padding, line-height ou no
   tamanho da etiqueta nao muda nada: foi exatamente o que aconteceu nas duas
   primeiras tentativas. A regra abaixo e a que de fato baixa a linha. */
@media (min-width: 1024px) {
    #result_list tbody td.h-\[45px\],
    #result_list tbody th.h-\[45px\] {
        height: 34px;
    }
}

/* Etiqueta de status na listagem: 20px em vez de 24px. No formulário e nas
   telas de detalhe ela mantem o tamanho cheio. */
/* Etiquetas de estado (Aprovada, Pendente, Vencida) na altura da linha.
   O :not() e necessario: o seletor pega qualquer span com fundo e canto
   arredondado, e o avatar da listagem e exatamente isso — ele vinha sendo
   achatado de 28px para 20px e saia oval em vez de redondo. */
#result_list tbody td span[class*="bg-"][class*="rounded"]:not(.macam-avatar) {
    height: 1.25rem;
    line-height: 1.25rem;
}

/* Avatar da listagem: medida explicita.
   h-7/w-7 do unfold resolvem por var(--spacing) e sao faceis de perder numa
   cascata; aqui o tamanho e o mesmo em qualquer contexto. */
.macam-avatar {
    background-position: center;
    background-size: cover;
    border-radius: 9999px;
    flex-shrink: 0;
    height: 1.75rem;
    line-height: 1.75rem;
    width: 1.75rem;
}

/* A inicial de quem nao tem foto herdava um cinza de texto secundario e ficava
   em 4,39:1 sobre o circulo — abaixo do minimo, justamente no elemento que
   SUBSTITUI a foto e precisa ser lido. */
.macam-avatar {
    color: #5c6472;
}

.dark .macam-avatar {
    color: #a8b0c7;
}

/* Icones de acao: alvo de 24px com o icone a 16px. Continua confortavel no
   mouse, e a linha inteira ja e clicavel pelo link do identificador. */
#result_list td.field-acoes a,
#result_list td.field-acoes_evento a {
    height: 1.5rem;
    padding: 0;
    width: 1.5rem;
}

/* Zebra discreta ajuda a percorrer a linha até a coluna de dinheiro. */
#result_list tbody tr:nth-child(even) {
    background-color: var(--color-base-50);
}

/* Tabela larga rola DENTRO do proprio bloco em vez de ser cortada na borda.
   Em 1024px a coluna de acao da listagem de Check-ins ficava pela metade. */
#changelist-form,
.result-list-wrapper .changelist-form-container {
    max-width: 100%;
}

#result_list {
    display: table;
}

.results,
#changelist-form > .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
}

/* A coluna de retrato so precisa da largura do avatar. */
#result_list td.field-retrato,
#result_list th.column-retrato {
    width: 1%;
}

/* --- Barra de comando: busca e filtros à vista -------------------------- */

/* A busca deixa de ser um campo qualquer e passa a ser o ponto de entrada. */
#changelist-search input[type="text"],
.changelist-search input[type="text"] {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
}

/* Contagem e totais numa linha discreta, não em cartões que empurram a
   tabela para fora da primeira dobra. */
.macam-resumo {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 1.25rem;
    padding-bottom: 0.5rem;
}

/* Sem cor fixa: --color-font-important-light e escuro, e no tema escuro os
   numeros sumiam contra o fundo. currentColor herda do contexto, que o unfold
   ja adapta nos dois temas. */
.macam-resumo strong {
    color: var(--color-font-important-light);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ==========================================================================
   Modo escuro
   ==========================================================================
   O unfold NAO usa prefers-color-scheme nem data-theme: a variante escura dele
   e uma CLASSE .dark no elemento raiz (o CSS compilado usa :where(.dark,.dark *)).

   Escrever @media (prefers-color-scheme: dark) aqui fazia os estilos escuros
   valerem sempre que o SISTEMA OPERACIONAL estivesse no escuro — mesmo com a
   pagina renderizada em claro. Resultado visivel: campos de filtro pretos e
   barra de resumo apagada numa tela branca.
   ========================================================================== */

.dark .macam-resumo strong {
    color: var(--color-font-important-dark);
}

.macam-resumo .macam-destaque {
    color: var(--color-primary-600);
}

/* Gráficos mais baixos: úteis, mas não são o conteúdo da tela — a tabela é.
   Classe própria em vez de utilitário do Tailwind: h-48 não existe no bundle
   pré-compilado do unfold, e uma classe ausente falha em silêncio. */
.macam-grafico {
    height: 12rem;
}

/* --- Formulários: mesma densidade --------------------------------------- */

.change-form .field-line {
    padding-bottom: 0.4375rem;
    padding-top: 0.4375rem;
}

/* --- Modo escuro -------------------------------------------------------- */

.dark #result_list tbody tr:nth-child(even) {
    background-color: rgb(255 255 255 / 0.02);
}

/* ==========================================================================
   Filtros em linha na barra de pesquisa
   ==========================================================================
   Substituem o drawer lateral do unfold. O painel original continua no HTML
   (é ele que instancia os formulários dos filtros de data), mas sai da vista.
   ========================================================================== */

/* O painel lateral nao e mais renderizado (ver
   templates/unfold/helpers/change_list_filter.html); esta regra cobre o botao
   que o abriria, caso o unfold o imprima em alguma tela. */
#changelist-filter,
#changelist-filter-close {
    display: none !important;
}

.macam-filtros {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    /* 0.5rem separava as CAIXAS, mas os rotulos em caixa alta acima delas sao
       mais largos que os campos e encostavam um no outro ("JA FOI CRIADO NO
       ASAAS DATA PAGAMENTO" lia como um titulo so). */
    gap: 0.5rem 1rem;
    margin-left: auto;
}

.macam-filtro {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.macam-filtro-rotulo {
    color: var(--color-font-subtle-light);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Mesma altura e raio de qualquer outro controle do sistema. */
.macam-filtro-campo {
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    color: var(--color-font-default-light);
    font-family: inherit;
    font-size: 0.8125rem;
    height: 34px;
    max-width: 15rem;
    padding: 0 1.75rem 0 0.625rem;
}

.macam-filtro-campo:focus {
    border-color: var(--color-primary-600);
    outline: 2px solid rgb(202 138 4 / 0.18);
    outline-offset: 0;
}

/* Intervalo de datas: dois campos nativos <input type="date"> lado a lado.
   A versao anterior incluia o template do rangefilter, que trazia um
   <details><summary> e um par submit/reset proprios — dois botoes "Pesquisa"
   na mesma barra. Agora os campos sao do formulario unico. */
.macam-filtro-datas {
    align-items: center;
    display: flex;
    gap: 0.375rem;
}

.macam-filtro-intervalo .macam-filtro-campo {
    background-image: none;
    max-width: 9.5rem;
    padding-right: 0.5rem;
}

.macam-filtro-ate {
    color: var(--color-font-subtle-light);
    font-size: 0.8125rem;
}

.macam-filtro-acoes {
    align-items: flex-end;
    display: flex;
    gap: 0.5rem;
}

.macam-filtro-aplicar {
    background: var(--color-primary-600);
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    height: 34px;
    padding: 0 0.75rem;
    transition: background 0.15s;
    white-space: nowrap;
}

.macam-filtro-aplicar:hover {
    background: var(--color-primary-700);
}

.macam-filtro-limpar {
    align-items: center;
    align-self: flex-end;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    color: var(--color-font-subtle-light);
    display: inline-flex;
    font-size: 0.8125rem;
    gap: 0.375rem;
    height: 34px;
    padding: 0 0.625rem;
    transition: all 0.15s;
    white-space: nowrap;
}

.macam-filtro-limpar:hover {
    border-color: var(--color-primary-600);
    color: var(--color-primary-600);
}

/* --- Modo escuro -------------------------------------------------------- */

.dark .macam-filtro-campo,
.dark .macam-filtro-intervalo input {
    background-color: var(--color-base-900);
    border-color: var(--color-base-700);
    color: var(--color-font-default-dark);
}

.dark .macam-filtro-rotulo,
.dark .macam-filtro-limpar {
    color: var(--color-font-subtle-dark);
}

.dark .macam-filtro-limpar {
    border-color: var(--color-base-700);
}

.dark .macam-filtro-ate {
    color: var(--color-font-subtle-dark);
}

/* ==========================================================================
   Responsividade
   ==========================================================================
   O autocomplete.css do Django admin fixa .select2-container { min-width: 20em }
   (280px). Num celular de 390px, somado ao recuo do formulário, o campo
   ultrapassa a tela e a página inteira ganha rolagem horizontal — o formulário
   da O.S. transbordava 104px.
   ========================================================================== */

@media (max-width: 1023px) {
    .select2-container {
        max-width: 100%;
        min-width: 0;
    }

    /* O container do select2 e o campo de busca dele acompanham a coluna. */
    .select2-container .select2-selection--single,
    .select2-container .select2-search--dropdown .select2-search__field {
        max-width: 100%;
    }

    /* Linhas de fieldset empilham; nenhuma coluna pode impor largura mínima. */
    .form-row.field-row,
    .form-row.field-row > .field-line {
        min-width: 0;
    }

    /* Campos e selects nunca mais largos que o contêiner. */
    .change-form input[type="text"],
    .change-form input[type="email"],
    .change-form input[type="number"],
    .change-form select,
    .change-form textarea {
        max-width: 100%;
    }

    /* A barra de filtros vira coluna; cada campo ocupa a largura toda. */
    .macam-filtros {
        margin-left: 0;
        width: 100%;
    }

    .macam-filtro,
    .macam-filtro-campo {
        max-width: none;
        width: 100%;
    }
}

/* --- Inlines em tela estreita -------------------------------------------
   No celular o unfold empilha cada célula do inline como rótulo + campo. As
   regras de largura da seção anterior valem só a partir de 1024px, então aqui
   o min-width do unfold (e os 280px do select2) voltavam a empurrar: os campos
   saíam pela direita e ficavam cortados pela metade.
   ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
    #itens_os-group td,
    #parcelas-group td,
    #os_supply_itens_infra_os-group td,
    #contatos-group td {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* O campo ocupa a linha inteira abaixo do rótulo, em vez de disputar
       espaço com ele. */
    #itens_os-group td > div,
    #parcelas-group td > div,
    #os_supply_itens_infra_os-group td > div,
    #contatos-group td > div {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    #itens_os-group td input,
    #itens_os-group td select,
    #parcelas-group td input,
    #parcelas-group td select,
    #os_supply_itens_infra_os-group td input,
    #contatos-group td input {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    /* Datas e horas precisam caber inteiras: com a largura herdada da coluna
       do desktop, "30/08/2026" saia como "30/08/202". */
    #itens_os-group td input.vDateField,
    #itens_os-group td input.vTimeField,
    #os_supply_itens_infra_os-group td input.vDateField,
    #os_supply_itens_infra_os-group td input.vTimeField,
    #parcelas-group td input.vDateField {
        min-width: 8rem;
        width: auto;
    }

    /* A tabela deixa de ser tabela: como <table> real, o navegador calcula as
       larguras de coluna somando TODAS as linhas, então o bloco fica mais largo
       que a tela mesmo com cada célula empilhada — e o inline só era alcançável
       deslizando de lado. Em display:block cada célula ocupa a largura da tela. */
    #itens_os-group table,
    #parcelas-group table,
    #os_supply_itens_infra_os-group table,
    #contatos-group table,
    #itens_os-group tbody,
    #parcelas-group tbody,
    #os_supply_itens_infra_os-group tbody,
    #contatos-group tbody,
    #itens_os-group tbody tr:not(.form-delete),
    #parcelas-group tbody tr:not(.form-delete),
    #os_supply_itens_infra_os-group tbody tr:not(.form-delete),
    #contatos-group tbody tr:not(.form-delete),
    #itens_os-group tbody td,
    #parcelas-group tbody td,
    #os_supply_itens_infra_os-group tbody td,
    #contatos-group tbody td {
        display: block;
        max-width: 100%;
        width: 100%;
    }

    /* O cabeçalho de colunas não faz sentido quando cada célula traz o próprio
       rótulo (o unfold já o imprime via data-label). */
    #itens_os-group thead,
    #parcelas-group thead,
    #os_supply_itens_infra_os-group thead,
    #contatos-group thead {
        display: none;
    }

    /* A linha .form-delete e a confirmacao de exclusao: o unfold a mantem
       oculta ate marcarem o checkbox. Sem excluí-la da regra acima, o
       display:block a tornava visivel em toda linha — todo item aparecia como
       "This item will be deleted". */
    #itens_os-group tbody tr.form-delete,
    #parcelas-group tbody tr.form-delete,
    #os_supply_itens_infra_os-group tbody tr.form-delete,
    #contatos-group tbody tr.form-delete {
        display: none;
    }

    /* Uma borda separa um registro do seguinte. */
    #itens_os-group tbody tr:not(.form-delete),
    #parcelas-group tbody tr:not(.form-delete),
    #os_supply_itens_infra_os-group tbody tr:not(.form-delete),
    #contatos-group tbody tr:not(.form-delete) {
        border-bottom: 1px solid var(--color-base-200);
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* --- Seletor de grupos e permissões (filter_horizontal) ------------------
   O widget do Django coloca duas caixas de seleção lado a lado com largura
   própria. Entre 1024 e 1440px a soma passa do contêiner e a tela de usuário
   ganha rolagem horizontal (144px de excesso em 1280).
   ------------------------------------------------------------------------ */

.selector {
    max-width: 100%;
}

@media (max-width: 1439px) {
    .selector {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .selector .selector-available,
    .selector .selector-chosen {
        flex: 1 1 16rem;
        min-width: 0;
        width: auto;
    }

    .selector select {
        max-width: 100%;
        width: 100%;
    }

    /* Os botões de mover ficam entre as caixas, não numa coluna própria. */
    .selector .selector-chooser {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        margin: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Modal de registro relacionado
   ==========================================================================
   Substitui a janela separada que o window.open() do admin abria. Ver
   js/modal_relacionado.js para o mecanismo.
   ========================================================================== */

.macam-modal {
    align-items: center;
    background: rgb(0 0 0 / 0.45);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 2rem 1rem;
    position: fixed;
    z-index: 100;
}

.macam-modal-caixa {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 20px 40px rgb(0 0 0 / 0.2);
    display: flex;
    flex-direction: column;
    height: min(85vh, 900px);
    max-width: 100%;
    overflow: hidden;
    width: min(1100px, 100%);
}

.macam-modal-barra {
    align-items: center;
    background: var(--color-base-50);
    border-bottom: 1px solid var(--color-base-200);
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
    height: 48px;
    padding: 0 0.75rem 0 1rem;
}

.macam-modal-titulo {
    color: var(--color-font-important-light);
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.macam-modal-fechar {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-font-subtle-light);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin-left: auto;
    transition: all 0.15s;
    width: 32px;
}

.macam-modal-fechar:hover {
    background: var(--color-base-100);
    color: var(--color-font-important-light);
}

.macam-modal-quadro {
    border: 0;
    flex: 1;
    width: 100%;
}

/* A página de trás não rola enquanto o modal está aberto. */
body.macam-modal-aberto {
    overflow: hidden;
}

/* Dentro do iframe (?_popup=1) o admin ainda desenha a barra lateral e o
   cabeçalho; num modal isso é moldura duplicada. */
body.popup .macam-modal-quadro,
body.popup #nav-sidebar,
body.popup .sidebar {
    display: none;
}

.dark .macam-modal-caixa {
    background: var(--color-base-900);
}

.dark .macam-modal-barra {
    background: var(--color-base-800);
    border-color: var(--color-base-700);
}

.dark .macam-modal-titulo {
    color: var(--color-font-important-dark);
}

.dark .macam-modal-fechar:hover {
    background: var(--color-base-700);
    color: var(--color-font-important-dark);
}

@media (max-width: 767px) {
    .macam-modal {
        padding: 0;
    }

    .macam-modal-caixa {
        border-radius: 0;
        height: 100%;
        width: 100%;
    }
}

/* --- Grade de servico (O.S. operacional) -------------------------------- */
/* A coluna "Item" da grade recebia a largura minima e o select mostrava
   "Mic...", "Cai...", "Me..." — o operador nao conseguia ler o que estava
   escalando. As proporcoes abaixo dao ao item o espaco que ele precisa e
   apertam data/hora, que tem largura conhecida. */

#grade_os_supply-group td.field-item,
#grade_os_supply-group th.column-item {
    min-width: 13rem;
}

#grade_os_supply-group td.field-item select,
#grade_os_supply-group td.field-item .select2 {
    min-width: 0;
    width: 100%;
}

#grade_os_supply-group td.field-data_inicio input,
#grade_os_supply-group td.field-horario_inicio input,
#grade_os_supply-group td.field-horario_termino input {
    min-width: 0;
    max-width: 10rem;
}

/* Textarea de orientacao: 190px de altura para duas linhas de texto era um
   buraco no meio do formulario. */
#cadastrosupply_form textarea,
.change-form textarea.vLargeTextField {
    min-height: 5.5rem;
    max-height: 12rem;
}

/* --- Alvos de clique ---------------------------------------------------- */
/* Medidos abaixo de 24x24 CSS px: as caixas de selecao da listagem (16x16, 79
   por tela), o botao de busca (18x18), o link de voltar (18x18) e os controles
   de ordenacao da coluna. Aumentar o DESENHO estragaria a densidade que a
   listagem existe para ter; o que cresce e a AREA sensivel ao clique, com um
   pseudo-elemento que nao ocupa espaco no fluxo. */

#result_list input[type="checkbox"],
#action-toggle,
#searchbar-submit,
.sortoptions a,
a.sortremove,
a.block.h-\[18px\],
.related-widget-wrapper-link,
th a[href*="o="] {
    position: relative;
}

/* A lista de baixo tem de acompanhar a de cima: "a.block.h-[18px]" — o link de
   voltar, presente em 60 telas — estava so na primeira e ficou sem area
   ampliada. As duas listas descrevem o mesmo conjunto e sao facil de
   dessincronizar; se um dia virar uma so, melhor. */
#result_list input[type="checkbox"]::after,
#action-toggle::after,
#searchbar-submit::after,
.sortoptions a::after,
a.sortremove::after,
a.block.h-\[18px\]::after,
.related-widget-wrapper-link::after,
th a[href*="o="]::after {
    content: "";
    position: absolute;
    /* centraliza uma area de 24px sobre um controle de 16 a 18px */
    top: 50%;
    left: 50%;
    height: 24px;
    width: 24px;
    transform: translate(-50%, -50%);
}

/* O link "O.S." da listagem de itens tinha 16px de altura util (101 linhas por
   tela). display:block com a altura da linha faz a celula inteira responder. */
#result_list td.field-os_numero a,
#result_list td.field-id_os a {
    display: block;
    padding: 6px 0;
}

/* Numeros do rodape do inline seguem a mesma regra do resto do sistema. */
.macam-numero {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
    font-variant-numeric: tabular-nums;
}

/* --- Botoes "+" da tela inicial ----------------------------------------- */
/* Cada linha do indice traz um "+" solido roxo: dezessete deles formam uma
   coluna de circulos que disputa a atencao com os nomes dos cadastros — que
   sao o conteudo da tela. Discretos em repouso, cheios ao passar o mouse: a
   funcao continua ali, o ruido some. */

/* Escopado a TABELA do indice, nao a classe app-<label>: essa classe tambem
   vai no <body> das telas de lista e de formulario, e a regra apagava o fundo
   roxo do botao "+" do cabecalho em todas elas. */
/* O "+" de cada linha do indice.
   Dezessete circulos roxos solidos formavam uma coluna que competia com os
   nomes dos cadastros. Mas tirar o fundo inteiro foi longe demais: virou um
   sinal de mais solto na borda, sem nada que dissesse "isto e um botao".
   O meio-termo e um botao de contorno: mantem a forma e a area de clique,
   pesa pouco, e assume as cores da marca sob o cursor. */
.module table a.addlink,
.module table a.addlink .material-symbols-outlined {
    background-color: transparent;
    /* ambar sobre branco mede 1,81:1 — aqui o icone segue a cor do link */
    color: var(--color-base-400);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.module table a.addlink {
    border: 1px solid var(--color-base-200);
    border-radius: 9999px;
    height: 28px;
    width: 28px;
}

.module table a.addlink:hover,
.module table a.addlink:hover .material-symbols-outlined {
    background-color: #562799;
    border-color: #562799;
    color: var(--macam-ambar);
}

.module table a.addlink:hover .material-symbols-outlined {
    background-color: transparent;
}

.dark .module table a.addlink {
    border-color: var(--color-base-700);
}

/* --- Larguras da listagem de O.S. ---------------------------------------- */
/* A tabela distribuia a largura pelo CABECALHO, nao pelo conteudo: "Qtde
   Itens" ficava com 97px para escrever "83", enquanto "Grupo Andrade" e
   "Carlos Menezes" tinham 125 e 129px e quebravam em duas linhas — a linha
   inteira dobrava de altura, e o olho perdia o alinhamento entre colunas.
   As colunas de numero tem largura conhecida e cedem espaco para os nomes. */

/* As larguras foram calibradas com os nomes REAIS de producao — "QUINTAL DO
   ESPETO CHACARA SANTO ANTONIO", "TATICA MARKETING ESPORTIVO LTDA". Com os
   14 registros de teste, min-width bastava; com os nomes de verdade a tabela
   media 1443px num espaco de 1280 e empurrava Status e Acoes para fora da
   tela — justamente as duas colunas que dizem em que pe esta a O.S. e o que
   fazer com ela. Agora o teto e por coluna, e quem passa dele corta. */
@media (min-width: 1280px) {
    #result_list th.column-itens_total,
    #result_list td.field-itens_total {
        width: 4.5rem;
    }

    #result_list th.column-periodo,
    #result_list td.field-periodo {
        width: 9rem;
    }

    #result_list th.column-cliente_os,
    #result_list td.field-cliente_os {
        max-width: 12.5rem;
        width: 12.5rem;
    }

    #result_list th.column-vendedor,
    #result_list td.field-vendedor {
        max-width: 10rem;
        width: 10rem;
    }

    #result_list th.column-nome_evento,
    #result_list td.field-nome_evento {
        max-width: 12.5rem;
        width: 12.5rem;
    }
}

/* Cliente e vendedor tambem cortam com reticencias: o nome completo continua
   no registro, e o que a listagem precisa e distinguir uma linha da outra. */
#result_list td.field-cliente_os,
#result_list td.field-vendedor {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nome de pessoa e de cliente nao quebram no meio: a linha cresceria e a
   comparacao entre linhas — o motivo desta listagem existir — se perde. */
/* Vale para TODAS as listagens, nao so a de O.S.: a mesma quebra aparecia em
   Parcelas (51px), Itens da O.S. (49px) e Entradas de log (53px). Nome de
   pessoa, de cliente e de item nao quebram no meio — a linha cresceria e a
   comparacao entre linhas, que e o motivo da listagem existir, se perde. */
#result_list td.field-cliente_os,
#result_list td.field-vendedor,
#result_list td.field-get_cliente,
#result_list td.field-item,
#result_list td.field-user,
#result_list td.field-content_type,
#result_list td.field-parcela_numero,
#result_list td.field-periodo_item,
#result_list td.field-action_time,
#result_list td.field-vencimento,
#result_list td.field-situacao,
#result_list td.field-status_os {
    white-space: nowrap;
}

/* Os campos de texto livre dessas listagens cortam com reticencias, como o
   nome do evento no painel: o registro continua identificavel e a altura da
   linha para de variar de tela para tela. */
#result_list td.field-action_message,
#result_list td.field-object_link,
#result_list td.field-resumo {
    max-width: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nome do evento e o unico campo naturalmente longo, e era ele que ditava a
   altura de TODA a tabela: com ele em duas linhas a listagem inteira ia de 34
   para 53px por linha, um terco a menos de registros por tela. Corta com
   reticencias e mantem o texto completo no title — o nome inteiro tambem
   esta a um clique, na propria O.S. */
#result_list th.column-nome_evento,
#result_list td.field-nome_evento {
    /* A coluna fica com a MAIOR fatia da tabela: ela e a que identifica o
       registro. max-width: 0 sozinho encolhia a coluna ate o minimo e o corte
       comia o nome inteiro ("Encontro de ..."); a largura explicita devolve o
       espaco e o corte passa a atingir so a cauda. */
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 15rem;
}

#result_list td.field-nome_evento > * {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Controles pequenos lado a lado -------------------------------------- */
/* Ordenar-crescente / ordenar-decrescente no cabecalho, e baixar / enviar no
   campo de arquivo, sao pares de 18px colados. Ampliar a area de clique de
   cada um nao resolve: as duas areas se sobrepoem e uma rouba pontos da
   outra (medido: 6 de 9 pontos respondiam ao alvo certo). O que falta e
   espaco ENTRE eles. */

#result_list th .sortoptions,
#result_list thead th > div:has(> a[href*="o="]) {
    display: inline-flex;
    gap: 0.5rem;
}

.related-widget-wrapper,
[class*="border-r"]:has(> .material-symbols-outlined) {
    margin-right: 0.25rem;
}

/* O par baixar/enviar do campo de arquivo. */
.form-row a:has(> .material-symbols-outlined) + a:has(> .material-symbols-outlined),
.field-line a:has(> .material-symbols-outlined) + a:has(> .material-symbols-outlined) {
    margin-left: 0.5rem;
}

/* Baixar e enviar ficam num contêiner de 36px, mas o proprio link tinha a
   altura do icone (20px): a metade de cima e a de baixo da caixa nao
   respondiam ao clique. Esticar o link ate a altura do contêiner aproveita
   espaco que ja existia. */
[class*="border-r"] > a:has(> .material-symbols-outlined),
a.border-r:has(> .material-symbols-outlined),
.flex.items-center.self-stretch > a {
    align-items: center;
    align-self: stretch;
    display: flex;
}

/* --- Altura uniforme da linha, em TODA listagem --------------------------- */
/* Eu vinha corrigindo isto tela a tela — cadastroos, parcela, itemos,
   logentry — e com os nomes reais de producao apareceram mais oito. Coluna a
   coluna nao escala: a regra e da listagem, nao de cada campo.
   Numa lista densa a altura precisa ser constante; e ela que permite comparar
   uma linha com a de baixo. Texto que nao cabe corta com reticencias, e o
   registro inteiro continua a um clique.

   As excecoes sao as celulas que mostram DUAS informacoes de proposito (o
   numero da O.S. com o cliente embaixo, o nome do colaborador com o cargo):
   ali a segunda linha e desenho, nao acidente. */

/* O <th> entra junto: o Django renderiza a PRIMEIRA coluna da listagem
   -- a que leva ao registro -- como <th>, nao <td>. Enquanto a regra
   dizia so 'td', essa coluna escapava em TODA listagem: em Clientes o
   nome quebrava em duas linhas e levava a linha a 53px. */
#result_list tbody td:not(.macam-duas-linhas):not(.field-pessoa):not(.field-os_numero):not(.field-retrato):not(.field-acoes):not(.action-checkbox):not(.field-nome_evento),
#result_list tbody th:not(.macam-duas-linhas):not(.field-pessoa):not(.field-os_numero):not(.field-retrato):not(.field-acoes):not(.action-checkbox):not(.field-nome_evento) {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#result_list tbody td:not(.macam-duas-linhas):not(.field-pessoa):not(.field-os_numero) > *,
#result_list tbody th:not(.macam-duas-linhas):not(.field-pessoa):not(.field-os_numero) > * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Etiquetas de estado e botoes de acao nao herdam o corte: sao curtos e
   precisam aparecer inteiros. */
#result_list tbody td [class*="rounded"],
#result_list tbody td a[class*="border"],
#result_list tbody td button {
    overflow: visible;
    text-overflow: clip;
}

/* --- Controles dentro da listagem ---------------------------------------- */
/* As linhas de 49-51px em Parcelas, Check-ins e Itens NAO eram texto
   quebrando: sao as celulas que contem CONTROLE — botao de acao, select
   editavel, campo de valor — todos com a altura de formulario (38px).
   Num formulario 38px esta certo; numa linha de tabela e mais do que o
   necessario. 32px mantem o alvo bem acima do minimo de 24px e devolve
   altura a cada linha da lista. */

#result_list tbody td button,
#result_list tbody td a[class*="border"],
#result_list tbody td select,
#result_list tbody td input[type="text"],
#result_list tbody td input[type="number"] {
    height: 32px;
    min-height: 32px;
    padding-bottom: 0;
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Duas sobras do achatamento das linhas.

   1. A regra geral de altura uniforme poe nowrap + ellipsis em toda celula.
      Na lista de O.S. isso cortava "nome_evento" — a coluna que identifica a
      linha — a 55% do texto. A coluna de identificacao ganha folga e pode usar
      duas linhas; as outras continuam em uma.

   2. O <h1> da tela de log vinha do mesmo tratamento e aparecia com 35% do
      titulo. Titulo de pagina nunca trunca.
   --------------------------------------------------------------------------- */

/* Esta excecao dava a nome_evento white-space:normal para caber em duas
   linhas. Com os dados reais o nome chega a TRES linhas e a linha da tabela ia
   a 62px ao lado de vizinhas de 39px. Vale a mesma regra das outras colunas --
   uma linha, reticencias, registro a um clique. */
#result_list tbody td.field-nome_evento {
    max-width: 22rem;
    min-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.change-form h1,
#content h1,
#content-main h1 {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

/* Entradas de log: "Alterado Quando sera feito o pagamento?, Alimentacao..."
   aparecia com 13% do texto. A mensagem E o conteudo da linha — sem ela a
   tela nao informa nada. Duas linhas, com reticencias so no fim da segunda. */

#result_list tbody td.field-object_link {
    max-width: 34rem;
    min-width: 14rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
}

/* O texto e no direto da celula, sem elemento filho onde pendurar um
   line-clamp; duas linhas viram um teto de altura com corte no fim. */
#result_list tbody td.field-object_link {
    line-height: 1.3;
    max-height: 2.6em;
    align-content: center;
}