/*
    Regra do projeto: nenhuma tela do admin rola de lado.

    O admin do Django dimensiona os campos em pixel fixo (`.vTextField` tem
    20em, o `<input type="number">` fica no tamanho padrão do navegador) e,
    quando a soma passa da largura da coluna de conteúdo, resolve com barra de
    rolagem horizontal: `forms.css` põe `overflow-x: scroll` na tabela do inline
    e `responsive.css` põe `overflow: auto` no `.inline-group` abaixo de 1024px.
    Na ordem de serviço isso empurrava para fora da tela justamente as colunas
    da direita — Total e Remover —, que é onde se confere a ordem.

    Aqui a linha quebra em vez de rolar: os campos passam a ser fluidos, a
    tabela do inline nunca excede o contêiner e, quando nem assim as colunas
    cabem, cada linha vira um bloco com as células empilhadas.

    Carregado em todas as páginas do admin pelo override de
    `templates/admin/base_site.html`.
*/

/* ------------------------------------------------- 1. sem contêiner rolante */

/*
    `.js-inline-admin-formset` entra na conta só para vencer o
    `.inline-group { overflow: auto }` do responsive.css, que o base.html
    carrega *depois* do extrahead onde este arquivo entra. Deixar visível é
    proposital: se algum dia uma coluna nova estourar a largura, o defeito
    aparece na tela em vez de sumir dentro de um scroll.
*/
.js-inline-admin-formset.inline-group {
    overflow: visible;
}

.inline-related.tabular fieldset.module table {
    width: 100%;
    /*
        `fixed` é o que garante a regra: a largura das colunas sai do cabeçalho,
        não do conteúdo, então nada dentro da célula consegue empurrar a tabela
        para além do contêiner.
    */
    table-layout: fixed;
    overflow-x: visible;
}

/* Texto longo quebra dentro da célula em vez de alargar a coluna. */
.inline-related.tabular th,
.inline-related.tabular td {
    overflow-wrap: anywhere;
}

.inline-related.tabular thead th {
    white-space: normal;
    padding: 8px 6px;
}

/* --------------------------------------------------- 2. campos sem px fixo */

/*
    O `<select>` que o select2 esconde fica de fora: ele é
    `position: absolute; width: 1px !important` por conta do próprio select2, e
    alargá-lo o fazia vazar 8px para fora da coluna. O `!important` no
    `.select2-container` é necessário porque o select2 grava a largura em
    atributo `style` no momento em que monta o widget.
*/
.inline-related.tabular td input:not([type="checkbox"]):not([type="radio"]),
.inline-related.tabular td select:not(.select2-hidden-accessible),
.inline-related.tabular td textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.inline-related.tabular td .select2-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.inline-related.tabular td .related-widget-wrapper {
    max-width: 100%;
    min-width: 0;
}

/* --------------------------------------------- 3. proporção entre colunas */

/*
    Com `table-layout: fixed` sem largura declarada todas as colunas ficam
    iguais, e uma coluna de dinheiro ou de data ganharia o mesmo espaço de uma
    descrição. Fixar as curtas devolve a sobra para as colunas de texto.
*/
.inline-related.tabular thead th.column-quantidade,
.inline-related.tabular thead th.column-valor_unitario,
.inline-related.tabular thead th.column-custo_unitario,
.inline-related.tabular thead th.column-desconto,
.inline-related.tabular thead th.column-valor,
.inline-related.tabular thead th.column-recebido,
.inline-related.tabular thead th.column-total {
    width: 7em;
}

.inline-related.tabular thead th.column-data,
.inline-related.tabular thead th.column-numero,
.inline-related.tabular thead th.column-status,
.inline-related.tabular thead th.column-situacao,
.inline-related.tabular thead th.column-forma_pagamento,
.inline-related.tabular thead th.column-link {
    width: 9em;
}

/* Data e hora por extenso ("22 de Agosto de 2026 às 17:15") não cabem em 9em. */
.inline-related.tabular thead th.column-enviado_em,
.inline-related.tabular thead th.column-alterado_em,
.inline-related.tabular thead th.column-criada_em,
.inline-related.tabular thead th.column-atualizada_em {
    width: 12em;
}

/* Coluna do "Remover?", sempre uma caixa de seleção. */
.inline-related.tabular thead th:last-child {
    width: 5.5em;
}

/* ------------------------------------ 4. quebra da linha quando não cabe */

/*
    A consulta é de contêiner, e não de viewport: a largura útil do inline
    depende da barra lateral do admin estar aberta ou não, então a mesma janela
    tem duas larguras possíveis.
*/
.inline-related.tabular {
    container-type: inline-size;
    container-name: linha-inline;
}

@container linha-inline (max-width: 48rem) {
    .inline-related.tabular table,
    .inline-related.tabular tbody,
    .inline-related.tabular tbody > tr,
    .inline-related.tabular tbody > tr > td {
        display: block;
        width: auto;
    }

    /* O rótulo da coluna passa a sair do data-label (inline_responsivo.js). */
    .inline-related.tabular thead {
        display: none;
    }

    /*
        `display: block` acima vence o `.empty-form { display: none }` do
        forms.css por especificidade, e o molde da linha nova apareceria como
        uma linha em branco no meio do inline.
    */
    .inline-related.tabular tbody > tr.empty-form {
        display: none;
    }

    .inline-related.tabular tbody > tr.form-row:not(.empty-form) {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        padding: 10px 8px;
        border-bottom: 1px solid var(--hairline-color);
    }

    .inline-related.tabular tbody > tr.form-row > td {
        flex: 1 1 11rem;
        border: 0;
        padding: 2px 0;
    }

    /*
        Célula sem cabeçalho: a coluna do "Remover?" quando o inline é só de
        leitura não tem rótulo nem conteúdo, e empilhada só ocuparia espaço.
    */
    .inline-related.tabular tbody > tr.form-row > td:not([data-label]):empty {
        display: none;
    }

    .inline-related.tabular tbody > tr.form-row > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--body-quiet-color);
    }

    /*
        A primeira célula é o rótulo do registro ("Revisão Simples - R$ 180,00")
        e ocupa a linha inteira, como título do bloco. Fora da tabela o
        `position: absolute` do forms.css sobreporia a célula seguinte.
    */
    .inline-related.tabular tbody > tr.form-row > td.original {
        flex: 1 1 100%;
        padding: 0;
    }

    .inline-related.tabular tbody > tr td.original p {
        position: static;
        height: auto;
        padding: 0 0 4px;
    }

    .inline-related.tabular .tabular tr.add-row td,
    .inline-related.tabular tr.add-row td {
        display: block;
    }
}

/* ------------------------------------------ 5. a mesma regra na listagem */

/*
    A listagem tem a própria versão do problema: `changelists.css` põe
    `white-space: nowrap` em todo cabeçalho de coluna e em algumas células
    (a classe `.nowrap`, que o admin aplica às datas), e resolve o excesso com
    `overflow-x: auto` no `.results`. Com o filtro lateral aberto, a listagem de
    ordens ficava com 848px de tabela em 616px de área, escondendo as colunas de
    dinheiro e a situação — as que se lê primeiro numa lista de ordens.

    Deixar o cabeçalho e as datas quebrarem em duas linhas basta: a tabela passa
    a caber sozinha, e onde há espaço nada quebra.
*/
#changelist-form .results {
    overflow-x: visible;
    container-type: inline-size;
    container-name: lista-admin;
}

#changelist table thead th,
#changelist table thead th a {
    white-space: normal;
}

#changelist table tbody th.nowrap,
#changelist table tbody td.nowrap {
    white-space: normal;
}

#changelist table th,
#changelist table td {
    overflow-wrap: anywhere;
}

/*
    A barra de ações em massa fica com `width` explícita e `box-sizing:
    content-box`, então os 10px de recheio de cada lado saem para fora da
    coluna — 20px de estouro em qualquer listagem, mesmo sem tabela larga.
*/
#changelist .actions {
    box-sizing: border-box;
}

/*
    Dez colunas não cabem em tela de celular nem quebrando o texto — abaixo
    disso cada registro vira um bloco, com o rótulo da coluna acima do valor
    (o `data-label` vem de inline_responsivo.js) e o link do registro como
    título. É a mesma quebra dos inlines, na listagem.
*/
@container lista-admin (max-width: 34rem) {
    #result_list thead {
        display: none;
    }

    #result_list,
    #result_list tbody,
    #result_list tbody > tr > th,
    #result_list tbody > tr > td {
        display: block;
        width: auto;
    }

    #result_list tbody > tr {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        padding: 10px 8px;
        border-bottom: 1px solid var(--hairline-color);
    }

    #result_list tbody > tr > th,
    #result_list tbody > tr > td {
        flex: 1 1 9rem;
        border: 0;
        padding: 2px 0;
    }

    #result_list tbody > tr > td[data-label]::before,
    #result_list tbody > tr > th[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--body-quiet-color);
    }

    /* A caixa de seleção da ação em massa e o link do registro dividem o topo. */
    #result_list tbody > tr > td.action-checkbox {
        flex: 0 0 auto;
    }

    #result_list tbody > tr > th:first-of-type {
        flex: 1 1 auto;
        font-weight: 700;
    }

    #result_list tbody > tr > th:first-of-type::before {
        content: none;
    }
}

/* ------------------------- 6. campos agrupados na tela estreita */

@media (max-width: 767px) {
    /*
        `responsive.css` dá `width: calc(100vw - 30px)` a `.aligned .form-row >
        div`, que é a largura da janela e não a da coluna. Dentro de um inline,
        que tem recuo próprio, o grupo de campos passa da linha — e a linha é
        `overflow: hidden`, então o último campo do grupo fica cortado pela
        metade. O Django já corrige isso para os divs sem classe do inline
        empilhado; falta o `.flex-container` dos campos declarados em tupla,
        como o ("marca", "modelo") do VeiculoInline.
    */
    .aligned .form-row > div.flex-container,
    .inline-group .aligned .form-row > div {
        width: auto;
        max-width: 100%;
    }

    .aligned .form-row .fieldBox {
        margin-right: 0;
    }
}