/* PANTTO Viewer — interface
 *
 * Identidade conforme Pantto_Guidebook.pdf:
 *   Areia   #E6E4DF  (Pantone Cool Gray 1 C)
 *   Militar #575332  (Pantone 7764 C)
 *   Texto corrido #4D4D4D
 *   Tipografia: Inter — bold (títulos), medium (rótulos/tagline), regular (texto)
 */

@font-face {
	font-family: "Inter";
	src: url("../assets/fonts/inter-latin-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Cores institucionais (não alterar) */
	--areia: #e6e4df;
	--militar: #575332;
	--texto: #4d4d4d;

	/* Apoio: branco/preto e transparências das cores oficiais */
	--branco: #ffffff;
	--preto: #1a1a1a;
	--linha: rgba(77, 77, 77, 0.22);
	--linha-forte: rgba(77, 77, 77, 0.55);
	--militar-10: rgba(87, 83, 50, 0.10);
	--texto-suave: rgba(77, 77, 77, 0.72);

	/* Área 3D: escuro neutro e quente, para não competir com a nuvem */
	--viewport-a: #2a2920;
	--viewport-b: #121210;

	--danger: #9a3a2a;

	--header-h: 72px;
	--toolbar-w: 88px;
	--panel-w: 312px;
	--font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--areia);
	color: var(--texto);
	font-family: var(--font);
	font-size: 13px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

[hidden] { display: none !important; }

.app {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* ---------- Cabeçalho ---------- */

.header {
	height: var(--header-h);
	flex: 0 0 var(--header-h);
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 20px 0 28px;
	background: var(--areia);
	border-bottom: 1px solid var(--linha-forte);
}

.brand {
	display: flex;
	align-items: center;
	gap: 24px;
	white-space: nowrap;
}

/* Logotipo: proporção original, sem efeitos (brandbook p. 19) */
.brand-logo {
	display: block;
	width: 150px;
	height: auto;
}

.brand-sub {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--texto);
	padding-left: 24px;
	border-left: 1px solid var(--linha-forte);
	line-height: 28px;
}

.header-project {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
	line-height: 1.35;
}

.header-project-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--militar);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40vw;
}

.header-project-client {
	color: var(--texto);
	font-size: 12px;
}

.header-btn {
	background: none;
	border: 1px solid var(--linha-forte);
	border-radius: 2px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--militar);
}
.header-btn:hover { background: var(--militar); color: var(--areia); border-color: var(--militar); }
.header-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- Layout principal ---------- */

.main {
	flex: 1;
	display: flex;
	min-height: 0;
}

/* ---------- Barra de ferramentas ---------- */

.toolbar {
	flex: 0 0 var(--toolbar-w);
	background: var(--areia);
	border-right: 1px solid var(--linha-forte);
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 4px 0;
}

.tool-group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 6px 10px 8px;
	border-bottom: 1px solid var(--linha);
}
.tool-group:last-child { border-bottom: none; }

.tool-group-label {
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--texto-suave);
	text-align: center;
	margin: 4px 0 6px;
}

.tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 2px 5px;
	margin: 1px 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 2px;
	color: var(--militar);
	font: inherit;
	font-size: 10.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
}
.tool span:last-child { color: var(--texto); }
.tool svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tool:hover:not(:disabled) { background: var(--militar-10); }
.tool.active,
.tool.active:hover {
	background: var(--militar);
	color: var(--areia);
}
.tool.active span:last-child { color: var(--areia); }
.tool:disabled { opacity: 0.32; cursor: not-allowed; }
.tool-danger:hover:not(:disabled),
.tool-danger:hover:not(:disabled) span:last-child { color: var(--danger); }

.swatch {
	width: 22px;
	height: 12px;
	border-radius: 1px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}
.swatch-rgb   { background: linear-gradient(90deg, #6f8a4a, #a99a78, #5d6f84); }
.swatch-elev  { background: linear-gradient(90deg, #2b3cc4, #2fb5c9, #7bd04a, #f2d43a, #e2452f); }
.swatch-class { background: linear-gradient(90deg, #8a6a3c 0 25%, #3fa34d 25% 50%, #e04a3c 50% 75%, #3b7bd8 75%); }
.swatch-int   { background: linear-gradient(90deg, #111, #eee); }
.tool.active .swatch { border-color: rgba(230, 228, 223, 0.6); }

/* ---------- Área da nuvem ---------- */

.viewport {
	position: relative;
	flex: 1;
	min-width: 0;
	background: radial-gradient(ellipse at 50% 40%, var(--viewport-a) 0%, var(--viewport-b) 75%);
}

/* O potree.css posiciona #potree_render_area como absolute/inset 0.
   O fundo do Potree é transparente (app.js), deixando aparecer o da .viewport. */

.hint {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: var(--militar);
	color: var(--areia);
	padding: 8px 16px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.overlay {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: grid;
	place-items: center;
	padding: 24px;
	background: radial-gradient(ellipse at 50% 40%, var(--viewport-a) 0%, var(--viewport-b) 75%);
}

.overlay-box {
	max-width: 500px;
	padding: 36px 40px 34px;
	background: var(--areia);
	border-radius: 2px;
	line-height: 1.6;
	color: var(--texto);
}

.overlay-symbol {
	display: block;
	width: 72px;
	height: 72px;
	margin-bottom: 28px;
}

.overlay-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--militar);
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--linha-forte);
}

.overlay-text code {
	font-family: var(--font);
	font-size: 12px;
	font-weight: 500;
	color: var(--militar);
	background: var(--militar-10);
	padding: 1px 6px;
	border-radius: 2px;
	word-break: break-all;
}

/* ---------- Painel de informações ---------- */

.panel {
	flex: 0 0 var(--panel-w);
	width: var(--panel-w);
	background: var(--areia);
	border-left: 1px solid var(--linha-forte);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.panel-section {
	padding: 18px 20px;
	border-bottom: 1px solid var(--linha);
}
.panel-section:last-child { border-bottom: none; }
.panel-grow {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.panel h2 {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--militar);
	display: flex;
	align-items: center;
	gap: 8px;
}

.badge {
	background: var(--militar);
	color: var(--areia);
	border-radius: 2px;
	padding: 1px 7px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.kv {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 6px 12px;
	margin: 0;
}
.kv dt { color: var(--texto-suave); }
.kv dd { margin: 0; word-break: break-word; color: var(--preto); font-weight: 500; }

.muted { color: var(--texto-suave); margin: 0; line-height: 1.55; }
.muted b { color: var(--militar); font-weight: 700; }

.meas-list {
	overflow-y: auto;
	min-height: 0;
	flex: 1;
	scrollbar-width: thin;
	margin-right: -6px;
	padding-right: 6px;
}

.meas {
	background: var(--branco);
	border-left: 2px solid var(--militar);
	border-radius: 2px;
	padding: 10px 12px;
	margin-bottom: 8px;
}

.meas-title {
	font-weight: 700;
	color: var(--militar);
	margin-bottom: 6px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.meas-title small { color: var(--texto-suave); font-weight: 400; font-size: 11px; }

.meas-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	line-height: 1.7;
}
.meas-row span:first-child { color: var(--texto-suave); }
.meas-row span:last-child {
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--preto);
	white-space: nowrap;
}
.meas-row.main span:last-child {
	color: var(--militar);
	font-weight: 700;
	font-size: 13.5px;
}

.help {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 2;
	color: var(--texto);
}
kbd {
	font-family: var(--font);
	font-size: 11px;
	font-weight: 500;
	color: var(--militar);
	background: var(--branco);
	border: 1px solid var(--linha);
	border-radius: 2px;
	padding: 1px 6px;
	margin-right: 4px;
}

/* ---------- Ajustes do Potree ---------- */

/* Mantém apenas a área de render do Potree, sem a barra lateral padrão. */
#potree_quick_buttons { display: none; }
#potree_description { display: none; }

/* ---------- Responsivo (computador) ---------- */

.app.panel-hidden .panel { display: none; }

@media (max-width: 1100px) {
	:root { --panel-w: 272px; }
	.brand-sub { display: none; }
}

@media (max-width: 820px) {
	.panel {
		position: fixed;
		top: var(--header-h);
		right: 0;
		bottom: 0;
		z-index: 40;
		box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
	}
}