/*
 * AKRIVAS 3D Viewer - office theme on top of potree.css.
 *
 * Colours are the akrivas.gr design system (navy #0B1F33, green #7FBF00) and the blue
 * contour lines of the site's hero. Manrope is bundled locally because the desktop
 * viewer has to work offline and Manrope covers Greek.
 *
 * Only overrides live here; libs/potree stays untouched. Loaded after potree.css and
 * enhance.css.
 */

@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400;
	src: url(./fonts/manrope-greek-400-normal.woff2) format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400;
	src: url(./fonts/manrope-latin-400-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500;
	src: url(./fonts/manrope-greek-500-normal.woff2) format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500;
	src: url(./fonts/manrope-latin-500-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700;
	src: url(./fonts/manrope-greek-700-normal.woff2) format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700;
	src: url(./fonts/manrope-latin-700-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 800;
	src: url(./fonts/manrope-greek-800-normal.woff2) format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 800;
	src: url(./fonts/manrope-latin-800-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--ak-navy-950:	#050d16;
	--ak-navy-900:	#07131f;
	--ak-navy:		#0B1F33;
	--ak-navy-800:	#0e263e;
	--ak-navy-700:	#122d49;
	--ak-navy-600:	#1a3d60;
	--ak-line:		#21476a;
	--ak-text:		#e6edf3;
	--ak-text-2:	#9fb2c4;
	--ak-green:		#7FBF00;
	--ak-green-2:	#9ad61f;
	--ak-contour:	#5aaaeb;
	--ak-font:		'Manrope', 'Segoe UI', Arial, sans-serif;

	/* Potree's own palette, re-pointed at the office colours */
	--color-0:			var(--ak-navy);
	--color-1:			#5f768c;
	--color-2:			var(--ak-navy-600);
	--color-3:			#2a5f8a;
	--color-4:			var(--ak-green);
	--bg-color:			var(--ak-navy);
	--bg-color-2:		var(--ak-navy-700);
	--bg-light-color:	var(--ak-navy-800);
	--bg-dark-color:	var(--ak-navy-900);
	--bg-hover-color:	var(--ak-navy-600);
	--font-color:		#c9d5e0;
	--font-color-2:		var(--ak-text);
	--border-color:		var(--ak-line);
}

body {
	background: var(--ak-navy-900);
	font-family: var(--ak-font);
}

/* ---------------------------------------------------------------- sidebar */

#potree_sidebar_container {
	background-color: var(--ak-navy);
	border-right: 1px solid var(--ak-line);
	scrollbar-color: var(--ak-line) var(--ak-navy);
}

#sidebar_root {
	font-family: var(--ak-font);
	color: var(--font-color);
}

#potree_sidebar_container a,
#potree_sidebar_container a:link,
#potree_sidebar_container a:visited {
	color: var(--ak-text-2);
}

#potree_sidebar_container a:hover {
	color: var(--ak-green-2);
}

::-webkit-scrollbar-thumb {
	background-color: var(--ak-line);
	border-radius: 3px;
}

/* Header: logo, profession, contact. Filled in by brand.js. */
#sidebar_header {
	padding: 0;
	background: var(--ak-navy-900);
	border-bottom: 1px solid var(--ak-line);
}

.ak-brand {
	position: relative;
	padding: 22px 20px 16px 20px;
	overflow: hidden;
}

.ak-brand-contours {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.55;
}

.ak-brand > *:not(.ak-brand-contours) {
	position: relative;
}

.ak-brand-logo {
	display: block;
	line-height: 0;
}

.ak-brand-logo img {
	width: 190px;
	max-width: 100%;
}

.ak-brand-rule {
	width: 42px;
	height: 3px;
	margin: 14px 0 10px 0;
	background: var(--ak-green);
}

.ak-brand-sub {
	color: var(--ak-text);
	font-weight: 700;
	font-size: 0.82em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ak-brand-meta {
	margin-top: 6px;
	font-size: 0.95em;
	color: var(--ak-text-2);
}

.ak-brand-meta span {
	margin: 0 6px;
	opacity: 0.6;
}

/* Potree's own links and version, kept as a credit at the foot of the sidebar */
.ak-credit {
	margin: 18px 12px 24px 12px;
	padding-top: 10px;
	border-top: 1px solid var(--ak-line);
	color: var(--ak-text-2);
	font-size: 0.85em;
	line-height: 1.6;
}

.ak-credit .potree_sidebar_brand {
	margin: 0;
	font-weight: 500;
	line-height: 1.6em;
}

.ak-credit #potree_languages {
	margin-top: 6px;
}

/* Accordion section headers */
.accordion > h3,
#potree_sidebar_container .accordion-header {
	background: var(--ak-navy-700) !important;
	border: none;
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--ak-navy-900);
	box-shadow: none;
	text-shadow: none;
	color: var(--ak-text);
	font-family: var(--ak-font);
	font-weight: 700;
	font-size: 0.9em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
	padding: 9px 10px 9px 30px;
	transition: border-color 0.15s, background-color 0.15s;
}

.accordion > h3:hover,
#potree_sidebar_container .accordion-header:hover {
	filter: none;
	background: var(--ak-navy-600) !important;
	border-left-color: var(--ak-green);
}

.pv-menu-list {
	color: var(--font-color);
}

.divider {
	color: var(--ak-text-2);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 80%;
	margin-top: 10px;
}

.divider > span:before,
.divider > span:after {
	background: var(--ak-line);
}

/* jQuery UI widgets: sliders, select groups, buttons */
.ui-state-default {
	background: var(--ak-navy-600) !important;
	border: 1px solid var(--ak-line);
	color: var(--ak-text);
}

.ui-state-active {
	background: var(--ak-green) !important;
	border-color: var(--ak-green) !important;
	color: var(--ak-navy-900) !important;
	font-weight: 700;
}

.ui-slider .ui-slider-handle {
	background: var(--ak-green) !important;
	border: 2px solid var(--ak-navy) !important;
	border-radius: 50%;
}

.pv-menu-list .ui-slider,
.pv-menu-list > li > .ui-slider,
.ui-widget {
	font-family: var(--ak-font);
}

.pv-menu-list .ui-slider-range {
	background: var(--ak-green) !important;
}

#potree_sidebar_container input[type="button"],
#potree_sidebar_container button,
#converter_panel input[type="button"] {
	background: var(--ak-navy-600);
	color: var(--ak-text);
	border: 1px solid var(--ak-line);
	border-radius: 4px;
	padding: 4px 10px;
	font-family: var(--ak-font);
	cursor: pointer;
}

#potree_sidebar_container input[type="button"]:hover,
#potree_sidebar_container button:hover,
#converter_panel input[type="button"]:hover {
	border-color: var(--ak-green);
}

#potree_sidebar_container input[type="checkbox"],
#potree_sidebar_container input[type="radio"],
#potree_sidebar_container input[type="range"] {
	accent-color: var(--ak-green);
}

#potree_sidebar_container select,
#potree_sidebar_container input[type="text"],
#potree_sidebar_container input[type="number"] {
	background: var(--ak-navy-900);
	color: var(--ak-text);
	border: 1px solid var(--ak-line);
}

.jstree-default .jstree-clicked,
.jstree-default .jstree-hovered {
	background-color: var(--ak-navy-600) !important;
}

/* The 3D mouse panel reads in the office accent rather than its own blue */
.enh-panel .enh-value,
.enh-panel .enh-angle,
.enh-panel .enh-raw,
.enh-panel .enh-binding {
	color: var(--ak-green-2);
}

.enh-panel .enh-fill {
	background: var(--ak-green);
}

.enh-panel .enh-title {
	border-top-color: var(--ak-line);
}

/* --------------------------------------------------------- render area */

.potree_message {
	background-color: var(--ak-navy);
	border: 1px solid var(--ak-line);
	border-left: 3px solid var(--ak-green);
	border-radius: 4px;
	color: var(--ak-text);
	font-family: var(--ak-font);
	opacity: 0.95;
}

.potree_message_error {
	background-color: #5a1620;
	border-left-color: #ff5a5a;
}

.annotation-titlebar,
.annotation-item {
	background-color: var(--ak-navy);
	border: 1px solid var(--ak-green);
	font-family: var(--ak-font);
}

.annotation-label {
	font-family: var(--ak-font);
}

.annotation-description {
	background-color: var(--ak-navy);
	border-left: 3px solid var(--ak-green);
	font-family: var(--ak-font);
}

#profile_window {
	font-family: var(--ak-font);
}

#profile_titlebar {
	background-color: var(--ak-navy-700);
	text-shadow: none;
}

/* Logo in the corner of the 3D view, so screenshots carry the office name */
#ak-watermark {
	position: absolute;
	right: 18px;
	bottom: 14px;
	z-index: 10;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	opacity: 0.8;
	line-height: 0;
	transition: opacity 0.2s;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

#ak-watermark:hover {
	opacity: 1;
}

#ak-watermark img {
	width: 128px;
}

/* Welcome screen, shown until the first point cloud is in the scene */
#ak-welcome {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.8s ease;
	overflow: hidden;
}

#ak-welcome.ak-hidden {
	opacity: 0;
}

#ak-welcome .ak-contours {
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	opacity: 0.9;
	animation: ak-drift 60s ease-in-out infinite alternate;
}

@keyframes ak-drift {
	from { transform: rotate(-2deg) scale(1); }
	to   { transform: rotate(2deg) scale(1.06); }
}

#ak-welcome .ak-card {
	position: relative;
	text-align: center;
	color: var(--ak-text);
	font-family: var(--ak-font);
	padding: 0 24px;
}

#ak-welcome .ak-card img {
	width: min(420px, 60vw);
}

#ak-welcome .ak-eyebrow {
	margin-top: 26px;
	color: var(--ak-green);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

#ak-welcome .ak-hint {
	margin: 16px auto 0 auto;
	max-width: 460px;
	color: var(--ak-text-2);
	font-size: 15px;
	line-height: 1.6;
}

#ak-welcome .ak-contact {
	margin-top: 28px;
	color: var(--ak-text-2);
	font-size: 12px;
	letter-spacing: 0.08em;
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	#ak-welcome .ak-contours { animation: none; }
}

/* ------------------------------------------ desktop: drop zone & converter */

.droproot {
	opacity: 1;
}

.dropzone {
	border: none;
	background: rgba(7, 19, 31, 0.82);
}

.dropzone:before {
	border: 3px dashed var(--ak-green);
	border-radius: 14px;
	background: transparent;
	opacity: 1;
	top: 2em;
	left: 2em;
	right: 2em;
	bottom: 2em;
}

.dropzone_title,
.dropzone_text {
	font-family: var(--ak-font);
	color: var(--ak-text);
}

.dropzone_title {
	font-weight: 800;
	font-size: 2.4vw;
}

.dropzone_text {
	font-weight: 500;
	font-size: 1.2vw;
	line-height: 1.8;
	color: var(--ak-text-2);
}

#converter_panel {
	background: var(--ak-navy);
	color: var(--ak-text);
	border: 1px solid var(--ak-line);
	border-top: 3px solid var(--ak-green);
	border-radius: 10px;
	padding: 1.4em 1.6em;
	font-family: var(--ak-font);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
	min-width: 560px;
}

#converter_panel #converter_panel_start {
	background: var(--ak-green);
	border-color: var(--ak-green);
	color: var(--ak-navy-900);
	font-weight: 700;
}

#converter_panel input[type="textfield"] {
	background: var(--ak-navy-900);
	color: var(--ak-text);
	border: 1px solid var(--ak-line);
	padding: 5px 8px;
	font-family: var(--ak-font);
}

.converter_panel_list {
	border: 1px solid var(--ak-line);
	background: var(--ak-navy-900);
	padding: 4px 8px;
	font-size: 0.9em;
}

.selection_buttons label {
	background-color: var(--ak-navy-700);
	border: 1px solid var(--ak-line);
	opacity: 0.55;
}

.selection_buttons input[type="radio"]:hover + label {
	box-shadow: 0 0 0 1px var(--ak-line);
}

.selection_buttons input[type="radio"]:checked + label {
	box-shadow: 0 0 0 2px var(--ak-green);
}

.selection_buttons .title,
.selection_buttons li {
	font-family: var(--ak-font);
}

.selection_buttons .title {
	font-size: 1.2em;
}