/* --------------------------------------------------------------------------
// NXM.System
// Copyright NXM Sp. z o.o. All Rights reserved 2010-2022
//
// nxm.engine.zero CSS
//
// boot-time styles, preloader
// 
// created: 2019-12-10/../2025-05-19
//
-------------------------------------------------------------------------- */

/* --------- general settings --------- */
html {
	height: 100%;
	margin: 0;
	box-sizing: border-box;
}

body {
	height: 100%;
	margin: 0;
	background: #40668a !important;
	box-sizing: border-box;
	overflow: hidden;
}

#nxm_surface {
	height: 100%;
}

/* --------- preloader --------- */
#nxm_preloader_wrapper {
	display: flex;
	/*justify-content: center;*/
	align-items: start;
	margin: 20px;
	position: fixed;
	z-index: 10000;
	visibility: visible;
	/*opacity: 0.33;*/
	width: 100vw;
	height: 100vh;
	top: 0;
	/* background-color: white;
    transition: opacity 400ms ease-in-out, visibility 0s 400ms;*/
}

#nxm_preloader {
	width: 200px;
	height: 100px;
	background-image: url('../gfx/nxm_logo.svg'); /* The image used */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	/*-webkit-animation: nxm_preloader_spin 2s linear infinite; /* Safari */
	/*animation: nxm_preloader_spin 2s linear infinite;*/
}

.loading_placeholder {
	position: absolute;
	bottom: 20px;
	left: 30px;
}

.loading_placeholder h1 {
	font-size: 34px;
	font-weight: 200;
	color: white;
}

/* Safari */
@-webkit-keyframes nxm_preloader_spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes nxm_preloader_spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* =============== trace support ================== */
#nxm_trace {
	position: absolute;
	right: 20px;
	top: 20px;
	min-width: 400px;
	font-size: x-small;
	padding-left: 20px;
}

.nxm_trace_cell {
	padding: 0.2rem !important;
	font-size: 10px;
	white-space: pre-wrap;
}

.nxm_trace_even_row {
	background-color: #d0d0d0;
}

.nxm_trace_error {
	color: red;
	font-weight: bold;
}

.nxm_trace_warning {
	font-weight: bold;
}
/* ================================= */

/*preloader*/
#nxm_trace tr:nth-child(odd) {
	color: #ffffff;
}

#nxm_surface .fancy-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10vh;
	height: 10vh;
	position: absolute;
	bottom: 2rem;
	/**/
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#nxm_surface .fancy-spinner div {
	position: absolute;
	width: 9vh;
	height: 9vh;
	border-radius: 50%;
}

#nxm_surface .fancy-spinner div.ring {
	border-width: 0.5rem;
	border-style: solid;
	border-color: transparent;
	animation: 1s fancy infinite alternate;
}

#nxm_surface .fancy-spinner div.ring:nth-child(1) {
	border-left-color: #ffffff;
	border-right-color: #ffffff;
}

#nxm_surface .fancy-spinner div.ring:nth-child(2) {
	border-top-color: #ffffff;
	border-bottom-color: #ffffff;
	animation-delay: 0.5s;
}

#nxm_surface .fancy-spinner div.dot {
	width: 1.2rem;
	height: 1.2rem;
	background: #ffffff;
}

#nxm_surface .fancy-spinner .loader_text {
	margin-top: 180px;
	color: #ffffff;
	font-weight: 500;
	font-size: 1.2rem;
}

#nxm_surface .app_title {
	color: #ffffff;
	position: absolute;
	top: 4%;
	font-size: 42px;
	width: 100%;
	font-weight: 400;
	text-align: center;
	margin: 0;
}

#nxm_surface .loading_placeholder h3 {
	color: #ffffff;
	font-weight: 400;
	font-size: 20px;
}

@keyframes fancy {
	to {
		transform: rotate(360deg) scale(0.55);
	}
}

#nxm_trace {
	display: none;
}

.show_nxm_module_table {
	display: block !important;
}

@media only screen and (max-width: 600px) {
	#nxm_surface .app_title {
		top: 20%;
	}

	#nxm_preloader_wrapper {
		justify-content: center;
		top: 5%;
		margin: 0;
	}

	#nxm_preloader {
		width: 160px;
		height: 80px;
	}
}

/* ==============================
   Toast Notifications
   ============================== */

:root {
	--toast-z: 99999;
	--toast-gap: var(--space-sm);
	--toast-radius: var(--rounded-xl);
	--toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
	--toast-enter: 0.3s;
	--toast-exit: 0.3s;

	--toast-info: var(--nxmas-primary);
	--toast-info-foreground: var(--nxmas-primary-foreground);

	--toast-success: var(--nxmas-success);
	--toast-success-foreground: var(--nxmas-success-foreground);

	--toast-warning: var(--nxmas-warning-foreground);
	--toast-warning-foreground: var(--nxmas-warning);

	--toast-error: var(--nxmas-destructive);
	--toast-error-foreground: var(--nxmas-destructive-foreground);
}

/* Container positions */
.nxm-toasts {
	position: fixed;
	z-index: var(--toast-z);
	display: flex;
	flex-direction: column;
	gap: var(--toast-gap);
	pointer-events: none;
}

.nxm-toasts.bottom-right {
	right: var(--space-lg);
	bottom: var(--space-lg);
	align-items: flex-end;
}

.nxm-toasts.bottom-left {
	left: var(--space-lg);
	bottom: var(--space-lg);
	align-items: flex-start;
}

.nxm-toasts.top-right {
	right: var(--space-lg);
	top: var(--space-lg);
	align-items: flex-end;
}

.nxm-toasts.top-left {
	left: var(--space-lg);
	top: var(--space-lg);
	align-items: flex-start;
}

/* Toast item */
.nxm-toast {
	border-radius: var(--toast-radius);
	background-color: #fff; /* Backdrop for the nxm-toast-body so that the opacity does not let anything through */
	overflow: hidden;
	box-shadow: var(--toast-shadow);
	transition: transform 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
	will-change: transform, opacity, margin;
}

.nxm-toast-body {
	--toast-bg: var(--nxmas-secondary);
	--toast-color: var(--nxmas-secondary-foreground);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-md);
	position: relative;
	width: min(92vw, 356px);
	padding: var(--space-base);
	border: 1px solid rgb(var(--toast-bg), 0.75);
	border-radius: var(--toast-radius);
	background-color: rgb(var(--toast-bg), 1);
	color: rgb(var(--toast-color));
	font-family: var(--nxmas-font-family);
	pointer-events: auto;
	overflow: hidden;
}

.nxm-toast-body:has(.nxm-toast__title:not(:empty)) {
	align-items: start;
}

.nxm-toast.showing {
	animation: toast-in var(--toast-enter) ease both;
}

.nxm-toast.hiding {
	animation: toast-out var(--toast-exit) ease both;
}

.nxm-toast-backdrop {
	background-color: rgb(var(--nxmas-secondary));
}

/* Variants */
.nxm-toast-body[data-type='info'] {
	--toast-bg: var(--toast-info);
	--toast-color: var(--toast-info-foreground);
}

.nxm-toast-body[data-type='success'] {
	--toast-bg: var(--toast-success);
	--toast-color: var(--toast-success-foreground);
}

.nxm-toast-body[data-type='warn'] {
	--toast-bg: var(--toast-warning);
	--toast-color: var(--toast-warning-foreground);
}

.nxm-toast-body[data-type='error'] {
	--toast-bg: var(--toast-error);
	--toast-color: var(--toast-error-foreground);
}

.nxm-toast__icon {
	font-size: 1rem;
	margin-top: 2px;
	opacity: 0.95;
}

.nxm-toast__content .nxm-toast__title {
	font-weight: 600;
	font-size: var(--text-sm);
	line-height: 1.2;
}

.nxm-toast__content .nxm-toast__message {
	font-size: var(--text-sm);
	line-height: 1.35;
	font-weight: 600;
	word-break: break-word;
}

.nxm-toast__close,
.nxm-toast__action {
	appearance: none;
	border: none;
	background: transparent;
	color: rgb(var(--nxmas-muted-foreground));
	opacity: 0.75;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding-left: var(--space-xs);
	transition: opacity 0.15s ease;
}

.nxm-toast__close:hover,
.nxm-toast__action:hover {
	opacity: 1;
}

/* Progress bar */
.nxm-toast__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: rgb(var(--toast-color));
	transform-origin: left center;
	animation: toast-bar linear forwards;
	animation-duration: var(--duration);
}

.nxm-toast:hover .nxm-toast__bar {
	animation-play-state: paused;
}

/* Sticky */
.nxm-toast--sticky .nxm-toast__bar {
	display: none;
}

/* Animations */
@keyframes toast-in {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes toast-out {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.8);
	}
}

@keyframes toast-bar {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

/* Mobile */
@media (max-width: 520px) {
	.nxm-toasts.top-right,
	.nxm-toasts.bottom-right,
	.nxm-toasts.top-left,
	.nxm-toasts.bottom-left {
		left: var(--space-md);
		right: var(--space-md);
	}

	.nxm-toast-body {
		width: 100%;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.nxm-toast-body,
	.nxm-toast__bar {
		animation-duration: 1ms !important;
	}
}