/**
 * NOC portal — loading indicator (loading.io chunk SVG).
 *
 * Shown via `<img src="…/loading.svg">`: Chromium often composites **inline SMIL SVG** into an opaque white
 * layer; `<img>` keeps transparency. SMIL may be static in some browsers — light CSS pulse hints activity.
 *
 * Theme reference (style.css :root):
 *   Primary #eb8153 · Secondary #6418C3 · Success #68CF29 · Info #51A6F5 · Warning #FFAB2D · Danger #FF4C41
 */

/*
 * NOC-wide: Zenix maps .btn-outline-secondary to brand purple (--bs-secondary #6418C3), which fails contrast
 * on dark surfaces. Restore Bootstrap-like neutral outline buttons on every page that loads this stylesheet
 * (index, servers, server-detail, …). Does not alter .btn-secondary solid fills.
 */
.btn-outline-secondary {
	--bs-btn-color: var(--bs-gray-600, #6c757d);
	--bs-btn-border-color: var(--bs-gray-500, #adb5bd);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-gray-600, #6c757d);
	--bs-btn-hover-border-color: var(--bs-gray-600, #6c757d);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-gray-700, #495057);
	--bs-btn-active-border-color: var(--bs-gray-700, #495057);
	--bs-btn-disabled-color: var(--bs-gray-500, #adb5bd);
	--bs-btn-disabled-border-color: var(--bs-gray-400, #ced4da);
	--bs-btn-focus-shadow-rgb: 108, 117, 125;
}

[data-bs-theme="dark"] .btn-outline-secondary {
	--bs-btn-color: rgba(255, 255, 255, 0.88);
	--bs-btn-border-color: rgba(255, 255, 255, 0.42);
	--bs-btn-hover-color: #1e1a33;
	--bs-btn-hover-bg: rgba(255, 255, 255, 0.9);
	--bs-btn-hover-border-color: rgba(255, 255, 255, 0.9);
	--bs-btn-active-color: #1e1a33;
	--bs-btn-active-bg: rgba(255, 255, 255, 0.78);
	--bs-btn-active-border-color: rgba(255, 255, 255, 0.78);
	--bs-btn-disabled-color: rgba(255, 255, 255, 0.35);
	--bs-btn-disabled-border-color: rgba(255, 255, 255, 0.2);
	--bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.noc-portal-loader {
	background: transparent;
}

img.noc-portal-loader__spinner {
	width: 6rem;
	height: 6rem;
	max-width: 100%;
	border: 0;
	display: block;
	pointer-events: none;
	box-sizing: border-box;
	object-fit: contain;
	vertical-align: middle;
	background: transparent !important;
	animation: noc-portal-loader-pulse 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	img.noc-portal-loader__spinner {
		animation: none;
	}
}

@keyframes noc-portal-loader-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.72;
	}
}

/* Documentation card — frosted overlay until real docs ship (server-detail Overview). */
#nocOverviewDocsCard .noc-docs-frozen-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border-radius: inherit;
	pointer-events: auto;
	/* Strong blur so underlying copy is unreadable */
	backdrop-filter: blur(16px) saturate(1.1);
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	background: rgba(255, 255, 255, 0.42);
}

[data-bs-theme='dark'] #nocOverviewDocsCard .noc-docs-frozen-overlay {
	background: rgba(22, 20, 35, 0.72);
}

#nocOverviewDocsCard .noc-docs-frozen-box {
	max-width: 16rem;
	padding: 0.85rem 1.1rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(128, 128, 160, 0.28);
	background: rgba(var(--bs-body-bg-rgb, 248, 249, 250), 0.92);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-bs-theme='dark'] #nocOverviewDocsCard .noc-docs-frozen-box {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(30, 28, 45, 0.94);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* Top bar F2H wordmark: light-coloured SVG on dark header, dark SVG on light header (see shell-top-header.inc.html). */
.noc-header-f2h-logo--forLightUi {
	display: none;
}
body[data-bs-theme='light'] .noc-header-f2h-logo--forDarkUi {
	display: none;
}
body[data-bs-theme='light'] .noc-header-f2h-logo--forLightUi {
	display: inline;
}

/* Profile dropdown: match sidebar link icons (flaticon / FA) to primary in light menu */
.header .header-profile .dropdown-item i {
	color: var(--bs-primary, #eb8153);
}

/* Top bar: server / IP search (shell-top-header) */
.header .noc-header-search {
	position: relative;
	z-index: 1060;
	isolation: isolate;
}
.noc-header-search__group {
	max-width: 100%;
}
.noc-header-search__group .form-control {
	min-width: 0;
}
.noc-header-search__dropdown {
	--noc-hs-surface: var(--bs-body-bg, #fff);
	position: absolute;
	top: calc(100% + 0.3rem);
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.2rem 0 0.15rem;
	z-index: 2;
	max-height: min(22rem, 72vh);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: 0.5rem;
	background-color: var(--noc-hs-surface);
	background-clip: padding-box;
	box-shadow:
		0 0.125rem 0.25rem rgba(0, 0, 0, 0.06),
		0 0.5rem 1.25rem -0.2rem rgba(0, 0, 0, 0.18);
	contain: layout paint;
	list-style: none;
}
[data-bs-theme='dark'] .noc-header-search__dropdown {
	--noc-hs-surface: var(--bs-tertiary-bg, #2b2838);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow:
		0 0.25rem 0.4rem rgba(0, 0, 0, 0.45),
		0 0.5rem 2rem -0.25rem rgba(0, 0, 0, 0.55);
}
.noc-header-search__dropdown:focus-within {
	outline: 0;
}
/* Visible scrollbar (dark UI) */
.noc-header-search__dropdown::-webkit-scrollbar {
	width: 8px;
}
.noc-header-search__dropdown::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.08);
	border-radius: 4px;
}
.noc-header-search__dropdown::-webkit-scrollbar-thumb {
	background: rgba(128, 128, 160, 0.45);
	border-radius: 4px;
}
.noc-header-search__dropdown::-webkit-scrollbar-thumb:hover {
	background: rgba(128, 128, 160, 0.65);
}
.noc-header-search__section-label {
	margin: 0;
	padding: 0.5rem 0.9rem 0.35rem;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bs-secondary-color, #6c757d);
	border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}
.noc-header-search__section-label--spaced {
	margin-top: 0.15rem;
	padding-top: 0.65rem;
	border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}
.noc-header-search__li {
	margin: 0;
}
.noc-header-search__li:last-child .noc-header-search__opt {
	border-bottom: none;
}
.noc-header-search__opt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	width: 100%;
	margin: 0;
	padding: 0.6rem 0.95rem 0.65rem;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
	background: transparent;
	color: var(--bs-body-color, #212529);
	line-height: 1.3;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.12s ease;
}
.noc-header-search__opt:hover,
.noc-header-search__opt:focus {
	background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.04));
}
.noc-header-search__opt:focus {
	outline: 0;
}
.noc-header-search__opt:focus-visible {
	outline: 2px solid var(--bs-primary, #eb8153);
	outline-offset: -2px;
}
.noc-header-search__opt-title {
	font-size: 0.875rem;
	font-weight: 500;
	width: 100%;
	word-break: break-word;
}
.noc-header-search__opt-title--ip {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.noc-header-search__opt-meta {
	font-size: 0.75rem;
	color: var(--bs-secondary-color, #6c757d);
	width: 100%;
	padding-top: 0.05rem;
}
.noc-header-search__state {
	margin: 0;
	padding: 0.9rem 1rem;
	font-size: 0.85rem;
	color: var(--bs-secondary-color, #6c757d);
}