/*
 * Linha corrente da grade — secao 9.9 do `CLAUDE.md`.
 *
 * Nasceu na `Pesquisa Nota Fiscal` (divergencia 701, 11/09/2026: *"seria bom outra forma de
 * marcar a linha como selecionada"*, proposta `A` entre cinco) e no mesmo dia o usuario mandou
 * levar a **toda grade do sistema** em que se seleciona um registro — inclusive a modal da
 * lupa (`alpha-lookup.js`). Ate entao cada tela marcava do seu jeito: `bg-light-primary`,
 * `fw-bold`, `border border-primary`, `table-active`.
 *
 * Tres classes, todas opt-in:
 *
 *   `grade-selecao`   na `<table>`      liga as regras e abre a folga da primeira coluna
 *   `selecionada`     no `<tr>` corrente faixa lateral + fundo `gray-100`
 *   `grade-chave`     na celula da chave texto em `--bs-primary` quando a linha e a corrente
 *
 * **Nenhuma cor literal**: `--bs-primary`, `--bs-gray-100` e as variaveis de tabela do
 * Bootstrap 5.3, que o Metronic redefine no tema escuro. Mesmo criterio de `alpha-lookup.css`,
 * `alpha-dica.css`, `alpha-loading.css` e `alpha-alertas.css`.
 *
 * A linha corrente **esconde** a cor de estado que a `<tr>` carregue (`bg-light-danger` de
 * item cancelado, `Comp. Parcial` da requisicao...): o `inset 9999px` opaco do `td` cobre o
 * fundo da `<tr>`. Decisao do usuario em 11/09/2026 — *"uma regra so"* — que reviu a de
 * 07/09 ("a cor da legenda manda no fundo; a selecao e o negrito"). O `table-hover` do tema
 * faz o mesmo enquanto o mouse esta sobre a linha.
 */

/*
 * Folga da primeira coluna, senao a faixa encosta no texto. O tema zera o `padding-left` do
 * primeiro `td`/`th` de toda `.table:not(.table-bordered)` (`style.bundle.css:37445`) e de
 * `.gs-0` (`:37615`), ambos (0,3,1); este seletor e (0,3,3) e vence os dois. Vale para todas
 * as linhas, e nao so a corrente, para a coluna nao pular ao selecionar. Tabela `gs-4`+
 * (1rem..2.25rem) cairia para .75rem — nenhuma grade de selecao usa.
 */
.table.grade-selecao > thead > tr > th:first-child,
.table.grade-selecao > tbody > tr > td:first-child {
	padding-left: .75rem;
}

/*
 * O fundo sai pelo `--bs-table-bg-state`, a mesma variavel que o `table-hover` usa
 * (`:2168`), com especificidade maior: a corrente nao muda ao passar o mouse.
 */
.table.grade-selecao > tbody > tr.selecionada > td {
	--bs-table-bg-state: var(--bs-gray-100);
}

/*
 * A faixa e o fundo no mesmo `box-shadow`: o tema ja usa o slot do `box-shadow` do `td` para
 * pintar o fundo (`:2118`), entao quem redeclara tem de repetir a cadeia de fallback —
 * `var()` sem fallback sobre variavel `initial` invalida a declaracao inteira e a faixa some.
 */
.table.grade-selecao > tbody > tr.selecionada > td:first-child {
	box-shadow: inset 4px 0 0 var(--bs-primary),
	            inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.table.grade-selecao > tbody > tr.selecionada .grade-chave {
	color: var(--bs-primary) !important;
}

/*
 * Coluna `Ações` — `grade-acoes` no `<th>` e no `<td>`, em toda grade (secao 9.10, divergencia
 * 875, 24/09/2026): *"a Coluna Ações sempre está com os botões colados no fim da linha [...]
 * Preciso que a Label fique sempre centralizada na coluna e os botões tenham uma distância da
 * borda da grid a direita"*; avaliado em `/orcamentos` e propagado — *"Pode propagar para todas
 * as outras"*. Nenhuma outra classe de alinhamento/largura na coluna: `text-end`, `w-*px` e
 * `pe-N` do tema sao `!important` e desfazem esta regra.
 *
 * O tema zera o `padding-right` da ultima coluna de toda `.table:not(.table-bordered)`
 * (`style.bundle.css:37448`, 0,3,1) e de `.gs-0` (`:37618`, 0,3,1); este seletor e (0,3,3) e
 * vence os dois. `.75rem` e a mesma folga que `grade-selecao` abre na primeira coluna: a grade
 * fica simetrica.
 *
 * `width: 1%` encolhe a coluna ao conteudo (os botoes, que nao quebram linha): sem isso a tabela
 * de 100% reparte a sobra tambem com `Ações`, a coluna fica mais larga que os botoes e o titulo
 * centralizado cai a esquerda deles. Com a coluna do tamanho dos botoes e a folga igual dos dois
 * lados, o titulo fica no meio do grupo; os botoes continuam alinhados a direita, para o
 * `Excluir` ficar na mesma posicao quando uma linha tiver menos botoes que a outra.
 */
.table > thead > tr > th.grade-acoes:last-child,
.table > tbody > tr > td.grade-acoes:last-child {
	padding-right: .75rem;
}

.table > thead > tr > th.grade-acoes {
	width: 1%;
	text-align: center;
	white-space: nowrap;
}

.table > tbody > tr > td.grade-acoes {
	text-align: right;
	white-space: nowrap;
}

/*
 * Coluna `Ações` fixa na borda direita, em toda grade (divergencia 877, 24/09/2026): *"quando ela
 * existe, ela sempre deve ficar visível, ou seja, se der scroll horizontal, ela fica fixa igual
 * acontece nas listagens do Ariba"*; avaliado em `/ordens-compra` e propagado — *"Pode implementar
 * em todos os lugares"*. Nenhuma view marca nada: vale para toda `grade-acoes` (875).
 *
 * `position: sticky` + `right: 0` prende a celula na borda direita da caixa que rola — a
 * `.table-responsive` em volta da `<table>`. Enquanto a grade cabe, nada muda: a coluna ja esta
 * na borda. Quando nao cabe, as outras colunas rolam **por baixo** dela, e por isso ela precisa
 * de fundo proprio: o do tema e `--bs-table-bg: transparent` (`style.bundle.css:2099`). O fundo
 * e o do card (`--bs-card-bg`, que e o `--bs-body-bg`; fora de card, o `--bs-body-bg` direto) —
 * o mesmo nos dois temas. O hover e a linha corrente continuam valendo: os dois pintam pelo
 * `box-shadow` inset do `td` (`:2118`), que fica por cima do `background-color`.
 *
 * Linha com cor de estado (`bg-light-warning` do preco exclusivo, `bg-light-success`...): a cor
 * e `!important` na `<tr>` e a celula fixa herda da linha, senao ficaria branca no meio da faixa.
 * So as cores opacas: `bg-light-* bg-opacity-25` (a nao lida de `/notificacoes`) sai
 * **transparente** no tema — o `bg-light-*` nao define o `--bs-bg-rgb-color` que o
 * `bg-opacity-25` le (`style.bundle.css:46097`) —, e herdar o transparente deixaria as colunas
 * roladas aparecendo atraves da `Ações`.
 */
.table > thead > tr > th.grade-acoes,
.table > tbody > tr > td.grade-acoes {
	position: sticky;
	right: 0;
	z-index: 1;
	background-color: var(--bs-card-bg, var(--bs-body-bg));
}

.table > tbody > tr[class*="bg-light"]:not([class*="bg-opacity"]) > td.grade-acoes {
	background-color: inherit;
}

/*
 * Menu `...` aberto na coluna (itens da nota fiscal, divergencia 887; listagem `/notas-fiscais`,
 * 888): o `z-index: 1` acima faz de cada celula fixa um contexto de empilhamento, e o
 * `dropdown-menu` fica preso ao da sua linha —
 * a celula `Ações` da linha de baixo, que vem depois no DOM com o mesmo `z-index`, pintaria por
 * cima dele. Enquanto o menu esta aberto a celula dele sobe acima das vizinhas.
 */
.table > tbody > tr > td.grade-acoes:has(.dropdown-menu.show) {
	z-index: 3;
}

/*
 * A sombra a esquerda da coluna so aparece enquanto ha coluna escondida **atras** dela — o
 * `alpha-grade.js` poe `grade-sobra-direita` na `.table-responsive` enquanto a rolagem nao chegou
 * ao fim. Rolou ate o fim, ou a grade cabe: a sombra some e a coluna fica igual as outras. E o
 * desenho das grades com coluna fixa (Ariba, Ant Design `ping-right`). Sem cor literal: o preto
 * do `--bs-black-rgb` em opacidade baixa e a linha do `--bs-border-color`. Descendente, e nao
 * filho, da `.table-responsive`: a `<table>` pode estar dentro de um `<form>` na caixa.
 */
.table > thead > tr > th.grade-acoes::before,
.table > tbody > tr > td.grade-acoes::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -.75rem;
	width: .75rem;
	border-right: 1px solid var(--bs-border-color);
	background: linear-gradient(to left, rgba(var(--bs-black-rgb), .07), rgba(var(--bs-black-rgb), 0));
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
}

.table-responsive.grade-sobra-direita .table > thead > tr > th.grade-acoes::before,
.table-responsive.grade-sobra-direita .table > tbody > tr > td.grade-acoes::before {
	opacity: 1;
}

/*
 * Fixa em **qualquer** largura de janela, celular inclusive (divergencia 892, 26/09/2026): saiu o
 * `@media (max-width: 991.98px)` da 879, que a soltava abaixo do `lg`. A 879 nasceu de quatro icones
 * tomando 58% da grade em 390 px; depois das 887-891 nenhuma grade tem mais de dois icones a vista
 * (acima disso, lapis + menu `...`), e a coluna fica em 89 px de 294 — *"Pois se não tivermos,
 * colocamos a coluna Ações fixa no mobile"*, *"Pode aplicar 1 e 2"*.
 */

/*
 * A grade cabe num notebook de 1366 px — o metodo da **1038** da nota fiscal, que o orcamento
 * aplicou na listagem (**1050**) e na grade de itens (**1051**) e que saiu das duas views para
 * ca quando o pedido, a requisicao, a ordem de compra e a cotacao passaram a usa-lo (11/10/2026,
 * onda 1 de `docs/legado/usabilidade/analise-pedido-requisicao-cotacao-oc.md`, divergencia 1066).
 * Duas classes opt-in na `<table>`:
 *
 *   `grade-compacta`  o titulo da coluna pode quebrar em duas linhas, alinhado embaixo — e o
 *                     algoritmo automatico da tabela que reparte a sobra, entao so quebra o que
 *                     nao cabe (medida fixa e `width: 1%` forcariam quebra tambem em 1920 px).
 *                     Vence o `text-nowrap` que a `<tr>` do cabecalho ainda tenha: o `th`
 *                     declara o proprio `white-space`
 *   `grade-respiro`   o respiro entre colunas cai de .75rem para .5rem; a primeira coluna
 *                     continua com a folga da faixa da 9.9 a esquerda e a `Ações` com a da 875
 *
 * Mesmas colunas, mesma ordem, mesmos rotulos — so a largura muda. O `min-w-250px` que a
 * coluna de texto livre carregava sai na view (o metodo usa 200 px, ou o minimo que a tela mediu).
 */
.table.grade-compacta > thead > tr > th {
	white-space: normal;
	line-height: 1.15;
	vertical-align: bottom;
}

.table.grade-respiro > :is(thead, tbody) > tr > :is(th, td):not(:first-child):not(.grade-acoes) {
	padding-left: .5rem;
	padding-right: .5rem;
}

.table.grade-respiro > :is(thead, tbody) > tr > :is(th, td):first-child {
	padding-right: .5rem;
}

/*
 * `grade-grupo` — o titulo que agrupa colunas num cabecalho de duas linhas (`colspan` em cima,
 * as colunas embaixo): o `Quantidade` do historico do `Controle de estoque` (divergencia 1197),
 * sobre `Estoque Anterior`, `Entrada/Saída` e `Estoque Atual`. O tracejado separa o grupo das
 * colunas dele sem parecer a linha da grade.
 */
.table > thead > tr > th.grade-grupo {
	border-bottom: 1px dashed var(--bs-gray-300) !important;
}

/*
 * O detalhe do `+` da linha (9.11) que pode ser mais largo que a grade — a tabela de itens de
 * `/orcamentos` (**1053**) e de `/pedidos` (1068): largura intrinseca zero, e o conteudo rola
 * dentro da propria caixa. Sem o involucro, no celular a tabela de itens alargava a grade inteira.
 */
.grade-detalhe-caixa {
	width: 0;
	min-width: 100%;
}

/*
 * Amostra para a `Legenda:` das telas que a tem (`badge grade-amostra border`, no lugar do
 * `badge bg-light-primary border` de antes): a mesma faixa + fundo, em miniatura.
 */
.grade-amostra {
	background-color: var(--bs-gray-100);
	box-shadow: inset 4px 0 0 var(--bs-primary);
}

/*
 * Grade de itens de documento em janela — `grade-janela` na `.table-responsive` (divergencia 895,
 * 27/09/2026, primeiro no orcamento). Com 231 itens a grade do orcamento tinha 12.927 px e
 * empurrava as abas do item para 10.676 px abaixo da linha clicada; no Delphi o `grdItem` tem
 * 108 px, rola sozinho e o `PageControl1` fica sempre logo abaixo (`uOrcamento01.dfm:1867`).
 * Aqui a caixa tem no maximo `min(55vh, 520px)` (~8 linhas) e rola nos dois eixos; grade menor
 * que isso nao muda nada.
 *
 * O cabecalho fica preso no topo da caixa (`sticky` + `top: 0`), com o fundo do card — o do tema
 * e transparente, e as linhas apareceriam atras dele — e a linha de baixo no `box-shadow`, porque
 * a borda da `<tr>` nao acompanha a celula presa. `z-index` acima das celulas `Ações` do corpo
 * (1, e 3 com o menu `...` aberto); o `th` da `Ações`, preso tambem a direita (877), acima dos
 * outros `th`.
 *
 * A rolagem da caixa sobrevive a navegacao e a linha selecionada entra na vista sozinha:
 * `alpha-rolagem.js`, segundo bloco.
 *
 * Desde 10/10/2026 tambem as sete grades das abas do item do orcamento (`_AbasItem.cshtml`,
 * divergencia 1057, prancha 10 do plano de usabilidade do orcamento): com 43 materias primas o
 * rodape de custo ficava 2.646 px abaixo das abas, e no `.dfm` o `grdSub` tem altura fixa na
 * `TTabSheet` e o `Panel15` fica sempre a vista (`uOrcamento01.dfm:7588`). La cada caixa leva
 * `data-janela-chave` (item + aba), e a de aba fechada volta ao lugar quando a aba abre.
 *
 * Desde 11/10/2026 tambem as grades de itens do pedido (e a da aba `Entregas`, com chave pelo
 * item), da requisicao e da ordem de compra (divergencia 1071, onda 3 de
 * `docs/legado/usabilidade/analise-pedido-requisicao-cotacao-oc.md`): o pedido de 231 itens tinha
 * 12.900 px de grade, e no `.dfm` os tres `TDBGrid` rolam dentro de um quadro de altura fixa.
 */
.table-responsive.grade-janela {
	max-height: min(55vh, 520px);
	overflow-y: auto;
}

.grade-janela .table > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 4;
	background-color: var(--bs-card-bg, var(--bs-body-bg));
	box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.grade-janela .table > thead > tr > th.grade-acoes {
	z-index: 5;
}

/*
 * Os tres tons de status alem dos seis do tema (`StatusDocumento.Liberado`, `.Atrasado`, `.Recusado`; divergencia
 * 1163, 15/10/2026 — "Nao pode ter cores iguais"): `badge-cyan`, `badge-orange` e `badge-pink`, no contorno da
 * coluna `Status`/`Legenda:` (`badge-outline`) e no fundo claro das marcas (`badge-light-*`), como os seis do tema.
 * Sem cor literal: as variaveis `--bs-cyan`/`--bs-orange`/`--bs-pink` do `:root` do tema. No modo claro o texto
 * escurece (`color-mix` com `--bs-black`) — o tom puro sobre branco nao se le; no escuro fica o tom puro.
 */
:root {
	--alpha-status-cyan: color-mix(in srgb, var(--bs-cyan) 65%, var(--bs-black));
	--alpha-status-orange: color-mix(in srgb, var(--bs-orange) 80%, var(--bs-black));
	--alpha-status-pink: var(--bs-pink);
	--alpha-status-teal: color-mix(in srgb, var(--bs-teal) 60%, var(--bs-black));
}

[data-bs-theme=dark] {
	--alpha-status-cyan: var(--bs-cyan);
	--alpha-status-orange: var(--bs-orange);
	--alpha-status-pink: var(--bs-pink);
	--alpha-status-teal: var(--bs-teal);
}

.badge-cyan.badge-outline { border: 1px solid var(--bs-cyan); background-color: transparent; color: var(--alpha-status-cyan); }
.badge-orange.badge-outline { border: 1px solid var(--bs-orange); background-color: transparent; color: var(--alpha-status-orange); }
.badge-pink.badge-outline { border: 1px solid var(--bs-pink); background-color: transparent; color: var(--alpha-status-pink); }
.badge-teal.badge-outline { border: 1px solid var(--bs-teal); background-color: transparent; color: var(--alpha-status-teal); }

.badge-light-cyan { background-color: color-mix(in srgb, var(--bs-cyan) 14%, transparent); color: var(--alpha-status-cyan); }
.badge-light-orange { background-color: color-mix(in srgb, var(--bs-orange) 14%, transparent); color: var(--alpha-status-orange); }
.badge-light-pink { background-color: color-mix(in srgb, var(--bs-pink) 14%, transparent); color: var(--alpha-status-pink); }

/* O decimo tom (`StatusDocumento.Confirmado`, divergencia 1169): `Confirmada pelo fornecedor` na ficha da OC, onde os
   nove ja estao em uso. Mesmo desenho dos tres acima, com `--bs-teal`. */
.badge-light-teal { background-color: color-mix(in srgb, var(--bs-teal) 14%, transparent); color: var(--alpha-status-teal); }

/* O decimo primeiro tom (`StatusDocumento.Bloqueado`, divergencias 1283/1284): `Bloqueado` do pedido, cuja ficha ja
   usa os outros dez. Mesmo desenho, com `--bs-purple`; no claro o texto escurece, no escuro fica o tom puro. */
:root { --alpha-status-purple: color-mix(in srgb, var(--bs-purple) 75%, var(--bs-black)); }
[data-bs-theme=dark] { --alpha-status-purple: color-mix(in srgb, var(--bs-purple) 55%, var(--bs-white)); }
.badge-purple.badge-outline { border: 1px solid var(--bs-purple); background-color: transparent; color: var(--alpha-status-purple); }
.badge-light-purple { background-color: color-mix(in srgb, var(--bs-purple) 14%, transparent); color: var(--alpha-status-purple); }

/* O `info` do tema (`Em Cotação`, `Aguardando aprovação`, `Aguarda retorno` — 9.12) no escuro: o `badge-outline` pinta o
   texto com `--bs-info` (`#883FFF`), 3,59:1 sobre o cartao; clareado como o roxo acima, passa de 4,5:1. A borda fica no tom
   puro. U8 da analise da requisicao, divergencia 1316. */
[data-bs-theme=dark] .badge-info.badge-outline { color: color-mix(in srgb, var(--bs-info) 55%, var(--bs-white)); }

/*
 * O tom de status como cor de grafico e da marca do grupo (`AlphaGraficos.tom`, os graficos por mes das quatro paginas de
 * painel — revisao de 25/10/2026 das divergencias 1271, 1291, 1335 e 1355). Os tons do tema servem como estao, menos dois,
 * que o validador de paleta da skill de visualizacao reprovou: o ciano puro e claro demais nos dois temas (luminosidade
 * fora da faixa), e no escuro o ciano escurecido encosta no verde e o laranja passa da faixa. Passos medidos sobre o cartao
 * (`#ffffff` / `#15171C`): claro `#0AA2C0`; escuro ciano `#0896BD` e laranja `#C9720C` (o laranja ao lado do vermelho fica
 * em 6,7 para deuteranopia — aceito com legenda, folga de 2 px entre os segmentos e a tabela da aba `Por mês`). A barra e o
 * quadrado dos quadros usam o mesmo tom, para o grupo ter uma cor so na pagina. Sem cor literal.
 */
:root {
	--alpha-grafico-cyan: color-mix(in srgb, var(--bs-cyan) 80%, var(--bs-black));
}

[data-bs-theme=dark] {
	--alpha-grafico-cyan: color-mix(in srgb, color-mix(in srgb, var(--bs-cyan) 80%, var(--bs-black)) 80%, var(--bs-primary));
	--alpha-grafico-orange: color-mix(in srgb, color-mix(in srgb, var(--bs-orange) 70%, var(--bs-warning) 30%) 85%, var(--bs-black));
}