/* ============================================================================
 * Banner e painel de preferências de cookies.
 *
 * No knxsite estes dois componentes são ShadCN puro — Card, Dialog, Accordion, Switch e
 * Table, todos com utilitários do Tailwind. Nada disso existe aqui, então vale a mesma
 * convenção da Fase 2 (`themes/khoinix/assets/css/components.css`): classe semântica no
 * markup e, nesta folha, o valor MEDIDO no site em execução com a anotação de qual
 * utilitário o produziu.
 *
 * As medidas saíram de `tests/visual/extract-privacy.mjs` rodado contra :3000, não da
 * documentação do Tailwind. A diferença aparece: várias declarações do ShadCN PERDEM para
 * regras de elemento de khoinix.css, que não estão em @layer e por isso vencem qualquer
 * `.classe` do Tailwind. Onde isso acontece, o certo aqui é NÃO declarar nada — khoinix.css
 * já está carregado e produz o mesmo resultado sozinho. Os casos:
 *
 *   h2 do banner e do painel  `font-semibold text-base mb-2` perde para `h2` → 48px/700,
 *                             General Sans, margin-bottom 16px
 *   h3 dos itens              `text-sm` perde para `h3` → 36px/600 (o rótulo visível é o
 *                             <span>, esse sim 14px)
 *   todo <p>                  `text-sm/text-xs text-muted-foreground mb-2/mt-4` perde para
 *                             `p` → 16px/1.6, cor --fg, max-width 70ch, margem 0 0 16px
 *   todo <a>                  `underline` perde para `a { text-decoration: none }`; a cor
 *                             é o laranja do Design System, não a herdada
 *
 * Os tokens `--card`, `--border`, `--primary` e companhia vêm de `compat-shadcn-tokens.css`
 * do tema, que reproduz de propósito o sombreamento de tokens do site atual. É por isso que
 * o botão "Aceitar todos" sai quase preto e não laranja — defeito reproduzido, não corrigido.
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * Banner — `fixed bottom-0 left-0 right-0 z-50 p-4`
 * -------------------------------------------------------------------------- */

.knx-cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 16px;
}

/* Card do ShadCN: `rounded-lg bg-card text-card-foreground relative shadow-lg border w-full` */
.knx-cookie-card {
	position: relative;
	width: 100%;
	background-color: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* CardContent: `p-4 sm:p-6` */
.knx-cookie-card-body {
	padding: 16px;
}

@media (min-width: 640px) {
	.knx-cookie-card-body {
		padding: 24px;
	}
}

/* `flex flex-col gap-2 text-xs text-muted-foreground mb-4` */
.knx-cookie-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 12px;
	/* `text-xs` do Tailwind v4 é razão, não px: line-height: calc(1 / 0.75). Onde o
	   font-size muda depois, a razão recalcula — foi o que denunciou o th da política. */
	line-height: calc(1 / 0.75);
	color: var(--muted-foreground);
}

/* `underline underline-offset-2 hover:text-foreground w-fit` — o sublinhado não aparece
   (perde para khoinix.css), mas o offset computa e o `w-fit` é o que impede o link de
   ocupar a linha inteira: dentro de um container flex-column ele é blocado. */
.knx-cookie-link {
	width: fit-content;
	text-underline-offset: 2px;
}

.knx-cookie-link:hover {
	color: var(--foreground);
}

/* `flex flex-col sm:flex-row gap-2` */
.knx-cookie-acoes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 640px) {
	.knx-cookie-acoes {
		flex-direction: row;
	}
}

/* --------------------------------------------------------------------------
 * Botões — o `Button` do ShadCN, tamanho default (h-10 px-4 py-2)
 *
 * `cursor` fica como o navegador manda para <button> (default): o original também não
 * declara `cursor-pointer` aqui, e o valor medido é `default`.
 * -------------------------------------------------------------------------- */

.knx-cookie-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	height: 40px;
	padding: 8px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: calc(1.25 / 0.875);
	border-radius: calc(var(--radius) - 2px);
	/* Só a largura: a cor vem da regra `* { border-color: var(--border) }` de
	   compat-shadcn-tokens.css, que é o que o original também usa. Um `border: 0` em
	   atalho zeraria a cor para currentColor e divergiria. */
	border-width: 0;
	border-style: solid;
	background-color: transparent;
	transition: background-color var(--duration-fast, 0.15s) var(--ease-out, ease);
}

/* No banner os três botões dividem a linha: `flex-1`. O texto é `nowrap`, então a
   min-width automática do item flex impede que qualquer um encolha abaixo do próprio
   rótulo — é isso que dá as larguras desiguais do original, e sai igual aqui. */
.knx-cookie-acoes .knx-cookie-btn {
	flex: 1 1 0%;
}

/* `border border-input bg-background hover:bg-accent hover:text-accent-foreground` */
.knx-cookie-btn-outline {
	border-width: 1px;
	border-color: var(--input);
	background-color: var(--background);
	color: var(--foreground);
}

.knx-cookie-btn-outline:hover {
	background-color: var(--accent);
	color: var(--accent-foreground);
}

/* `bg-primary text-primary-foreground hover:bg-primary/90` */
.knx-cookie-btn-primary {
	background-color: var(--primary);
	color: var(--primary-foreground);
}

.knx-cookie-btn-primary:hover {
	background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}

/* Revogar: `variant="ghost"` + `text-destructive hover:text-destructive` */
.knx-cookie-btn-fantasma {
	background-color: transparent;
	color: var(--destructive);
}

.knx-cookie-btn-fantasma:hover {
	background-color: var(--accent);
	color: var(--destructive);
}

/* `w-full` nos botões do painel */
.knx-cookie-btn-bloco {
	width: 100%;
}

/* --------------------------------------------------------------------------
 * Painel — <dialog> nativo no lugar do Radix Dialog
 *
 * DialogContent: `fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%]
 * translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg max-w-lg
 * max-h-[90vh] overflow-y-auto`.
 *
 * O posicionamento é escrito à mão em vez de deixar o centramento padrão do <dialog>
 * (margin auto) justamente para o `top`/`left` computados baterem com os do original.
 * -------------------------------------------------------------------------- */

.knx-cookie-dialog {
	position: fixed;
	left: 50%;
	top: 50%;
	/* O <dialog> vem com `inset: 0` do navegador; o original só declara left/top. */
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	z-index: 50;
	width: 100%;
	max-width: 32rem;
	max-height: 90vh;
	overflow-y: auto;
	margin: 0;
	padding: 24px;
	gap: 16px;
	background-color: var(--background);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: 0;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* `display: grid` só quando aberto: o <dialog> fechado precisa continuar `display: none`,
   e uma declaração fora do [open] venceria a regra do navegador. */
.knx-cookie-dialog[open] {
	display: grid;
}

@media (min-width: 640px) {
	.knx-cookie-dialog {
		border-radius: var(--radius);
	}
}

/* DialogOverlay: `fixed inset-0 z-50 bg-black/80`. O Tailwind v4 emite oklab para
   `bg-black/80`; usamos o mesmo espaço de cor, como em components.css. */
.knx-cookie-dialog::backdrop {
	background-color: oklab(0 0 0 / 0.8);
}

/* O Radix trava a rolagem do fundo enquanto o dialog está aberto. O <dialog> modal
   bloqueia a interação, mas não a rolagem — daqui sai o mesmo comportamento. */
html:has(.knx-cookie-dialog[open]) {
	overflow: hidden;
}

/* DialogHeader: `flex flex-col space-y-1.5 text-center sm:text-left`. O `space-y-1.5`
   (6px) some: a margem de 16px que khoinix.css dá ao h2 é maior e vem depois. */
.knx-cookie-dialog-header {
	display: flex;
	flex-direction: column;
	text-align: center;
}

@media (min-width: 640px) {
	.knx-cookie-dialog-header {
		text-align: left;
	}
}

/* Accordion raiz: `w-full mt-2` */
.knx-cookie-acordeao {
	width: 100%;
	margin-top: 8px;
}

/* AccordionItem: `border-b` */
.knx-cookie-item {
	border-bottom: 1px solid var(--border);
}

/* AccordionHeader: `flex items-center` — o resto (36px/600 e a margem de 16px) é do h3 */
.knx-cookie-item-header {
	display: flex;
	align-items: center;
}

/* AccordionTrigger: `flex flex-1 items-center py-4 font-medium transition-all` */
.knx-cookie-item-gatilho {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	padding: 16px 0;
	font-family: inherit;
	font-weight: 500;
	background: transparent;
	border-width: 0;
	border-style: solid;
	color: inherit;
}

/* `text-sm text-left` */
.knx-cookie-item-nome {
	font-size: 14px;
	line-height: calc(1.25 / 0.875);
	text-align: left;
}

/* `ml-2 h-4 w-4 shrink-0 transition-transform duration-200` mais o
   `[&[data-state=open]>svg]:rotate-180` do gatilho. */
.knx-cookie-chevron {
	width: 16px;
	height: 16px;
	margin-left: 8px;
	flex-shrink: 0;
	transition: transform 0.2s var(--ease-out, ease);
}

.knx-cookie-item-gatilho[aria-expanded="true"] .knx-cookie-chevron {
	transform: rotate(180deg);
}

/* `shrink-0 pl-4` */
.knx-cookie-item-controle {
	flex-shrink: 0;
	padding-left: 16px;
}

/* `text-xs text-muted-foreground font-medium` */
.knx-cookie-sempre {
	font-size: 12px;
	line-height: calc(1 / 0.75);
	font-weight: 500;
	color: var(--muted-foreground);
}

/* AccordionContent: `overflow-hidden text-sm` */
.knx-cookie-item-regiao {
	overflow: hidden;
	font-size: 14px;
	line-height: calc(1.25 / 0.875);
}

/* `pt-0 pb-4 px-0` */
.knx-cookie-item-corpo {
	padding-bottom: 16px;
}

/* O rótulo "Base legal:" é `font-medium`; o parágrafo em volta é o <p> de khoinix.css */
.knx-cookie-item-base-rotulo {
	font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Switch do ShadCN
 *
 * `peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2
 * border-transparent transition-colors data-[state=checked]:bg-primary
 * data-[state=unchecked]:bg-input` e o polegar
 * `block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
 * data-[state=checked]:translate-x-5`.
 * -------------------------------------------------------------------------- */

.knx-cookie-switch {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	padding: 0;
	/* `border-transparent` do original perde para `* { border-color: var(--border) }`,
	   que não está em @layer. Invisível de qualquer jeito (a mesma cor do fundo do
	   switch), mas é o valor computado que o gate compara. */
	border-width: 2px;
	border-style: solid;
	border-radius: calc(infinity * 1px);
	background-color: var(--input);
	cursor: pointer;
	transition: background-color var(--duration-fast, 0.15s) var(--ease-out, ease);
}

.knx-cookie-switch[aria-checked="true"] {
	background-color: var(--primary);
}

.knx-cookie-switch-bola {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: calc(infinity * 1px);
	background-color: var(--background);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	pointer-events: none;
	transform: translateX(0);
	transition: transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}

.knx-cookie-switch[aria-checked="true"] .knx-cookie-switch-bola {
	transform: translateX(20px);
}

/* --------------------------------------------------------------------------
 * Tabela de cookies dentro do painel
 *
 * Wrapper externo: `overflow-x-auto rounded-md border text-sm mt-2`
 * Wrapper interno (o do <Table> do ShadCN): `relative w-full overflow-auto`
 * Tabela: `w-full caption-bottom text-sm`
 * -------------------------------------------------------------------------- */

.knx-cookie-tabela-wrap {
	overflow-x: auto;
	margin-top: 8px;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 2px);
	font-size: 14px;
	line-height: calc(1.25 / 0.875);
}

.knx-cookie-tabela-inner {
	position: relative;
	width: 100%;
	overflow: auto;
}

.knx-cookie-tabela {
	width: 100%;
	caption-side: bottom;
	font-size: 14px;
	line-height: calc(1.25 / 0.875);
}

/* TableHead: `h-12 px-4 text-left align-middle font-medium text-muted-foreground` */
.knx-cookie-tabela th {
	height: 48px;
	padding: 0 16px;
	text-align: left;
	vertical-align: middle;
	font-weight: 500;
	color: var(--muted-foreground);
}

/* TableRow: `border-b`; TableBody: `[&_tr:last-child]:border-0` */
.knx-cookie-tabela tr {
	border-bottom: 1px solid var(--border);
	transition: background-color var(--duration-fast, 0.15s) var(--ease-out, ease);
}

.knx-cookie-tabela tbody tr:last-child {
	border-bottom-width: 0;
}

.knx-cookie-tabela tr:hover {
	background-color: color-mix(in oklab, var(--muted) 50%, transparent);
}

/* TableCell: `p-4 align-middle` mais as classes por coluna do CookieDetailsTable */
.knx-cookie-tabela td {
	padding: 16px;
	vertical-align: middle;
	font-size: 12px;
	line-height: calc(1 / 0.75);
}

.knx-cookie-td-nome {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.knx-cookie-td-dominio {
	color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
 * Ações do painel e rodapé
 * -------------------------------------------------------------------------- */

/* `flex flex-col gap-2 mt-4` */
.knx-cookie-dialog-acoes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

/* `text-xs text-muted-foreground mt-2 text-center` — só o alinhamento sobrevive; o resto
   perde para a regra de elemento `p`. */
.knx-cookie-rodape {
	text-align: center;
}

.knx-cookie-link-rodape {
	text-underline-offset: 2px;
}

/* DialogClose: `absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100
   transition-opacity` */
.knx-cookie-fechar {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 0;
	background: none;
	border-width: 0;
	border-style: solid;
	color: inherit;
	border-radius: calc(var(--radius) - 4px);
	opacity: 0.7;
	transition: opacity var(--duration-normal, 0.25s) var(--ease-out, ease);
}

.knx-cookie-fechar:hover {
	opacity: 1;
}

.knx-cookie-icone-x {
	width: 16px;
	height: 16px;
}

/* `sr-only` do Tailwind, literal. */
.knx-cookie-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* --------------------------------------------------------------------------
 * Tabela da página de política
 *
 * `.pc-table-wrap` já vem de `assets/css/pages/politica-de-cookies.css`, que é gerado a
 * partir do knxsite. Falta só o que era ShadCN: o div de rolagem do <Table> e as classes
 * da própria tabela.
 * -------------------------------------------------------------------------- */

.pc-table-inner {
	position: relative;
	width: 100%;
	overflow: auto;
}

.pc-table {
	caption-side: bottom;
	font-size: 14px;
	line-height: calc(1.25 / 0.875);
}

.pc-table th {
	height: 48px;
	text-align: left;
	vertical-align: middle;
	font-weight: 500;
}

.pc-table tr {
	border-bottom: 1px solid var(--border);
}

.pc-table tbody tr:last-child {
	border-bottom-width: 0;
}

.pc-table td {
	vertical-align: middle;
}

/* `align-top` nas quatro primeiras colunas de cada serviço, e `font-mono` no nome do
   cookie — as duas classes vêm do CookiePolicyContent. */
.pc-table .pc-td-servico,
.pc-table .pc-td-topo {
	vertical-align: top;
}

.pc-table .pc-td-servico {
	font-weight: 500;
}

.pc-table .pc-td-cookie {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}