/* =========================================================================
 * Unbox Painel 3.1 — motor de campos (PRD §61, §69)
 *
 * Estilos do que o `FieldRenderer` produz: grade de 12 colunas, repeater
 * (inclusive aninhado), toggle, link estruturado, mídia e editor simples.
 * Tudo sobre o contrato público `--ubp-*`.
 * ====================================================================== */

/* ---------- Grade ---------- */

.ubp-panel .ubp-ui-fields {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var(--ubp-space-4);
	align-items: start;
}

.ubp-panel .ubp-ui-field {
	grid-column: span 12;
	min-width: 0;
}

.ubp-panel .ubp-ui-field[hidden] {
	display: none;
}

@media ( min-width: 768px ) {

	.ubp-panel .ubp-ui-field[data-ubp-width="1"]  { grid-column: span 1; }
	.ubp-panel .ubp-ui-field[data-ubp-width="2"]  { grid-column: span 2; }
	.ubp-panel .ubp-ui-field[data-ubp-width="3"]  { grid-column: span 3; }
	.ubp-panel .ubp-ui-field[data-ubp-width="4"]  { grid-column: span 4; }
	.ubp-panel .ubp-ui-field[data-ubp-width="5"]  { grid-column: span 5; }
	.ubp-panel .ubp-ui-field[data-ubp-width="6"]  { grid-column: span 6; }
	.ubp-panel .ubp-ui-field[data-ubp-width="7"]  { grid-column: span 7; }
	.ubp-panel .ubp-ui-field[data-ubp-width="8"]  { grid-column: span 8; }
	.ubp-panel .ubp-ui-field[data-ubp-width="9"]  { grid-column: span 9; }
	.ubp-panel .ubp-ui-field[data-ubp-width="10"] { grid-column: span 10; }
	.ubp-panel .ubp-ui-field[data-ubp-width="11"] { grid-column: span 11; }
}

/* Abaixo de 768px todo campo colapsa para 100% (PRD 3.0 §35). */

/* ---------- Rótulo e ajuda ---------- */

.ubp-panel .ubp-ui-field__label {
	display: block;
	margin-bottom: var(--ubp-space-1);
	font-size: var(--ubp-text-sm);
	font-weight: var(--ubp-weight-semibold);
	color: var(--ubp-color-text-secondary);
}

.ubp-panel .ubp-ui-field__required {
	margin-left: 2px;
	color: var(--ubp-color-danger);
}

.ubp-panel .ubp-ui-field__help {
	margin: var(--ubp-space-1) 0 0;
	font-size: var(--ubp-text-xs);
	color: var(--ubp-color-muted);
}

/* ---------- Escolhas (checkbox / radio) ---------- */

.ubp-panel .ubp-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubp-space-2) var(--ubp-space-4);
	padding: var(--ubp-space-3);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-md);
	background: var(--ubp-color-surface);
}

.ubp-panel .ubp-choice {
	display: inline-flex;
	align-items: center;
	gap: var(--ubp-space-2);
	cursor: pointer;
	font-size: var(--ubp-text-base);
}

.ubp-panel .ubp-choice input {
	width: 16px;
	height: 16px;
	accent-color: var(--ubp-color-primary);
}

/* ---------- Toggle ---------- */

.ubp-panel .ubp-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ubp-space-3);
	cursor: pointer;
}

.ubp-panel .ubp-toggle__input {
	/* Escondido visualmente, mas presente para teclado e leitor de tela. */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ubp-panel .ubp-toggle__track {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: var(--ubp-radius-full);
	background: var(--ubp-color-border-stronger);
	transition: background var(--ubp-transition-fast);
	flex: 0 0 auto;
}

.ubp-panel .ubp-toggle__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: var(--ubp-radius-full);
	background: #ffffff;
	transition: transform var(--ubp-transition-fast);
}

.ubp-panel .ubp-toggle__input:checked + .ubp-toggle__track {
	background: var(--ubp-color-primary);
}

.ubp-panel .ubp-toggle__input:checked + .ubp-toggle__track::after {
	transform: translateX( 18px );
}

.ubp-panel .ubp-toggle__input:focus-visible + .ubp-toggle__track {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: 2px;
}

.ubp-panel .ubp-toggle__text {
	font-size: var(--ubp-text-base);
	color: var(--ubp-color-text);
}

/* ---------- Campo link ---------- */

.ubp-panel .ubp-link {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var(--ubp-space-3);
	padding: var(--ubp-space-4);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-md);
	background: var(--ubp-color-surface-alt);
}

.ubp-panel .ubp-link__label {
	display: block;
	margin-bottom: var(--ubp-space-1);
	font-size: var(--ubp-text-xs);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-link > .ubp-choice {
	grid-column: 1 / -1;
}

@media ( max-width: 640px ) {

	.ubp-panel .ubp-link {
		grid-template-columns: 1fr;
	}
}

/* ---------- Mídia ---------- */

.ubp-panel .ubp-ui-media {
	padding: var(--ubp-space-3);
	border: 1px dashed var(--ubp-color-border-strong);
	border-radius: var(--ubp-radius-md);
	background: var(--ubp-color-surface);
}

.ubp-panel .ubp-ui-media__preview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubp-space-2);
	margin-bottom: var(--ubp-space-3);
}

.ubp-panel .ubp-ui-media__preview:empty {
	display: none;
}

.ubp-panel .ubp-ui-media__thumb {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--ubp-radius-sm);
	border: 1px solid var(--ubp-color-border);
	background: var(--ubp-color-surface-alt);
}

.ubp-panel .ubp-ui-media__missing {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--ubp-radius-sm);
	background: var(--ubp-color-surface-sunken);
	font-family: var(--ubp-font-mono);
	font-size: var(--ubp-text-xs);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-media__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubp-space-2);
}

/* ---------- Editor simples ---------- */

.ubp-panel .ubp-richtext {
	border: 1px solid var(--ubp-color-border-strong);
	border-radius: var(--ubp-radius-md);
	overflow: hidden;
	background: var(--ubp-color-surface);
}

.ubp-panel .ubp-richtext__tools {
	display: flex;
	gap: var(--ubp-space-1);
	padding: var(--ubp-space-2);
	border-bottom: 1px solid var(--ubp-color-border);
	background: var(--ubp-color-surface-alt);
}

.ubp-panel .ubp-richtext__tool {
	width: 28px;
	height: 28px;
	border: 1px solid transparent;
	border-radius: var(--ubp-radius-sm);
	background: none;
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-sm);
	font-weight: var(--ubp-weight-bold);
	color: var(--ubp-color-text-secondary);
	cursor: pointer;
}

.ubp-panel .ubp-richtext__tool:hover {
	background: var(--ubp-color-surface);
	border-color: var(--ubp-color-border);
}

.ubp-panel .ubp-richtext__tool:focus-visible {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: 1px;
}

.ubp-panel .ubp-richtext__area {
	min-height: 120px;
	padding: var(--ubp-space-3);
	line-height: 1.6;
}

.ubp-panel .ubp-richtext__area:focus {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: -2px;
}

.ubp-panel .ubp-richtext__area ul {
	margin: 0 0 0 var(--ubp-space-5);
	padding: 0;
}

/* ---------- Group ---------- */

.ubp-panel .ubp-group {
	grid-column: span 12;
	padding: var(--ubp-space-4);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-lg);
	background: var(--ubp-color-surface);
}

/* ---------- Repeater ---------- */

/*
 * Prefixo `ubp-ui-`, como todo o resto do SDK.
 *
 * Com o nome antigo (`ubp-repeater`), a folha da 2.x — que carrega DEPOIS —
 * impunha `display: grid` e `grid-template-columns: 160px minmax(0,1fr) auto`
 * ao repeater do SDK. O cabeçalho da linha virava uma coluna estreita à
 * esquerda e o corpo ia para o lado, com uma faixa vazia embaixo. Dois
 * sistemas de design disputando o mesmo nome de classe.
 *
 * `display` fica explícito para nenhuma folha de fora escolher por nós.
 */
.ubp-panel .ubp-ui-repeater {
	display: block;
	grid-column: span 12;
	margin-bottom: 0;
}

.ubp-panel .ubp-ui-repeater__rows {
	display: flex;
	flex-direction: column;
	gap: var(--ubp-space-3);
}

.ubp-panel .ubp-ui-repeater__row {
	display: block;
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-lg);
	background: var(--ubp-color-surface);
	overflow: hidden;
}

.ubp-panel .ubp-ui-repeater__row.is-dragging {
	opacity: .5;
	border-style: dashed;
	border-color: var(--ubp-color-primary);
}

.ubp-panel .ubp-ui-repeater__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ubp-space-2);
	padding: var(--ubp-space-2) var(--ubp-space-3);
	background: var(--ubp-color-surface-alt);
	border-bottom: 1px solid var(--ubp-color-border);
}

.ubp-panel .ubp-ui-repeater__toggle {
	display: flex;
	align-items: center;
	gap: var(--ubp-space-2);
	flex: 1;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	text-align: left;
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-repeater__toggle:focus-visible {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: 2px;
}

.ubp-panel .ubp-ui-repeater__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 var(--ubp-space-1);
	border-radius: var(--ubp-radius-full);
	background: var(--ubp-color-primary-soft);
	font-family: var(--ubp-font-mono);
	font-size: var(--ubp-text-xs);
	font-weight: var(--ubp-weight-semibold);
	color: var(--ubp-color-primary-active);
}

.ubp-panel .ubp-ui-repeater__title {
	font-size: var(--ubp-text-sm);
	font-weight: var(--ubp-weight-medium);
}

.ubp-panel .ubp-ui-repeater__controls {
	display: flex;
	align-items: center;
	gap: var(--ubp-space-1);
	flex: 0 0 auto;
}

.ubp-panel .ubp-ui-repeater__controls [draggable="true"] {
	cursor: grab;
}

.ubp-panel .ubp-ui-repeater__body {
	padding: var(--ubp-space-4);
}

.ubp-panel .ubp-ui-repeater__row.is-collapsed .ubp-ui-repeater__body {
	display: none;
}

.ubp-panel .ubp-ui-repeater__empty[hidden] {
	display: none;
}

/* Repeater aninhado: recuo visual sutil para o nível ficar evidente sem
   transformar a tela numa escada. */
.ubp-panel .ubp-ui-repeater .ubp-ui-repeater .ubp-ui-repeater__row {
	background: var(--ubp-color-surface-alt);
}

.ubp-panel .ubp-ui-repeater .ubp-ui-repeater .ubp-ui-repeater__head {
	background: var(--ubp-color-surface-sunken);
}

/* =========================================================================
 * Repeater compacto
 *
 * Um repeater é uma LISTA: a pessoa lê muitas linhas de uma vez e compara umas
 * com as outras. O espaçamento generoso que ajuda num formulário solto vira
 * obstáculo aqui — seis itens de menu ocupavam duas telas de rolagem, com mais
 * área vazia que conteúdo.
 *
 * Tudo abaixo vale SÓ dentro de repeater. Campos fora dele continuam com o
 * respiro normal do SDK.
 * ====================================================================== */

.ubp-panel .ubp-ui-repeater__rows {
	gap: var(--ubp-space-2);
}

.ubp-panel .ubp-ui-repeater__head {
	padding: var(--ubp-space-1) var(--ubp-space-2);
}

.ubp-panel .ubp-ui-repeater__body {
	padding: var(--ubp-space-3);
}

/* A grade interna aperta; a externa, não. */
.ubp-panel .ubp-ui-repeater .ubp-ui-fields {
	gap: var(--ubp-space-2) var(--ubp-space-3);
}

.ubp-panel .ubp-ui-repeater .ubp-ui-field__label {
	margin-bottom: 2px;
	font-size: var(--ubp-text-xs);
}

.ubp-panel .ubp-ui-repeater .ubp-ui-field__help {
	margin-top: 2px;
}

/* Controles menores: numa lista densa, 38px de altura viram degrau. */
.ubp-panel .ubp-ui-repeater .ubp-ui-input,
.ubp-panel .ubp-ui-repeater .ubp-ui-select,
.ubp-panel .ubp-ui-repeater .ubp-ui-textarea {
	min-height: 32px;
	padding: var(--ubp-space-1) var(--ubp-space-2);
	font-size: var(--ubp-text-sm);
}

.ubp-panel .ubp-ui-repeater .ubp-ui-textarea {
	min-height: 60px;
}

/*
 * Campo link em três colunas: rótulo, endereço e título acessível cabem numa
 * faixa só. Eram duas linhas com metade da segunda vazia.
 */
.ubp-panel .ubp-ui-repeater .ubp-link {
	gap: var(--ubp-space-2);
	/*
	 * Sem borda nem fundo aqui: a linha do repeater JÁ é uma caixa. Uma
	 * segunda moldura por dentro só acrescenta duas bordas e o padding entre
	 * elas, sem separar nada que já não estivesse separado.
	 */
	padding: 0;
	border: 0;
	background: none;
}

@media ( min-width: 1024px ) {

	.ubp-panel .ubp-ui-repeater .ubp-link {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.ubp-panel .ubp-ui-repeater .ubp-link__label {
	margin-bottom: 2px;
}

/* O toggle não precisa da altura inteira da linha ao lado. */
.ubp-panel .ubp-ui-repeater .ubp-toggle,
.ubp-panel .ubp-ui-repeater .ubp-choices {
	padding: var(--ubp-space-1) 0;
}

.ubp-panel .ubp-ui-repeater .ubp-choices {
	border: 0;
	background: none;
}

/* Aninhado: o segundo nível aperta mais ainda, senão a indentação come a tela. */
.ubp-panel .ubp-ui-repeater .ubp-ui-repeater .ubp-ui-repeater__body {
	padding: var(--ubp-space-2);
}

/* Cabeçalho da linha: o número e os controles não precisam de 22px de altura. */
.ubp-panel .ubp-ui-repeater__index {
	min-width: 18px;
	height: 18px;
}

.ubp-panel .ubp-ui-repeater__title {
	font-size: var(--ubp-text-xs);
}

/*
 * Botões de mover, duplicar e remover em tamanho de lista.
 *
 * O SDK dá 32px ao botão pequeno, que é o certo para uma ação isolada. Aqui
 * são três, repetidos em cada linha: 26px mantém a área de clique confortável
 * e devolve altura à lista.
 */
.ubp-panel .ubp-ui-repeater__controls .ubp-ui-button.is-size-sm {
	height: 26px;
	min-width: 26px;
}