/* =========================================================
   SoL — CUSTOM UI
   Completely custom visual layer
========================================================= */

:root
{
	--sol-bg: #050b14;
	--sol-bg-2: #08111d;
	--sol-panel: rgba(13, 25, 42, .58);
	--sol-panel-strong: rgba(15, 30, 49, .78);
	--sol-border: rgba(148, 190, 230, .12);
	--sol-border-hover: rgba(90, 170, 255, .28);
	--sol-text: #edf5ff;
	--sol-muted: #8295aa;
	--sol-blue: #55a9ff;
	--sol-blue-2: #257bd1;
	--sol-radius: 18px;
	--sol-shadow:
		0 20px 60px rgba(0, 0, 0, .35),
		0 2px 12px rgba(0, 0, 0, .2);
}


/* =========================================================
   RESET / BASE
========================================================= */

html,
body
{
	margin: 0;
	padding: 0;
	background:
		radial-gradient(
			circle at 15% 10%,
			rgba(38, 113, 180, .13),
			transparent 32%
		),
		radial-gradient(
			circle at 85% 15%,
			rgba(44, 88, 145, .10),
			transparent 30%
		),
		var(--sol-bg) !important;

	color: var(--sol-text);
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}

body
{
	min-height: 100vh;
}

a
{
	color: var(--sol-blue);
}

a:hover
{
	color: #8ac7ff;
}


/* =========================================================
   REMOVE XF PAGE STRUCTURE
========================================================= */

.p-pageWrapper,
.p-body,
.p-body-inner,
.p-body-main,
.p-body-content,
.p-body-pageContent,
.p-body-sidebar,
.p-footer,
.p-footer-inner
{
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}


/* =========================================================
   APP
========================================================= */

.sol-app
{
	min-height: 100vh;
	background: transparent;
}


/* =========================================================
   STAFF BAR
========================================================= */

.sol-staffbar
{
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;

	display: flex;
	gap: 8px;

	padding: 7px 10px;

	background: rgba(8, 18, 30, .68);
	border: 1px solid var(--sol-border);
	border-radius: 12px;

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.sol-staffbar-link
{
	padding: 5px 10px;

	color: #9eb5ca !important;
	font-size: 12px;
	text-decoration: none;

	border-radius: 8px;
}

.sol-staffbar-link:hover
{
	background: rgba(255,255,255,.06);
	color: #fff !important;
}


/* =========================================================
   HEADER
========================================================= */

.sol-header
{
	position: sticky;
	top: 0;
	z-index: 900;

	height: 78px;

	background: rgba(5, 12, 21, .68);

	border-bottom: 1px solid var(--sol-border);

	backdrop-filter: blur(24px) saturate(140%);
	-webkit-backdrop-filter: blur(24px) saturate(140%);
}

.sol-header-inner
{
	height: 100%;
	max-width: 1500px;

	margin: auto;
	padding: 0 28px;

	display: flex;
	align-items: center;
	gap: 36px;
}


/* =========================================================
   BRAND
========================================================= */

.sol-brand
{
	display: flex;
	align-items: center;
	gap: 12px;

	min-width: 220px;

	color: #fff !important;
	text-decoration: none !important;
}

.sol-brand-mark
{
	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	border-radius: 13px;

	background:
		linear-gradient(
			135deg,
			#55b5ff,
			#1761a9
		);

	color: #fff;

	font-size: 15px;
	font-weight: 800;

	box-shadow:
		0 8px 25px rgba(50,150,255,.25);
}

.sol-brand-info
{
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.sol-brand-info strong
{
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1px;
}

.sol-brand-info small
{
	margin-top: 4px;

	color: var(--sol-muted);
	font-size: 10px;
}


/* =========================================================
   MAIN NAV
========================================================= */

.sol-main-nav
{
	display: flex;
	align-items: center;
	gap: 4px;

	flex: 1;
}

.sol-main-nav-item
{
	display: inline-flex;
	align-items: center;
	gap: 8px;

	height: 40px;
	padding: 0 14px;

	border-radius: 11px;

	color: #8fa4b9 !important;
	text-decoration: none !important;

	font-size: 13px;
	font-weight: 600;

	transition:
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}

.sol-main-nav-item:hover
{
	background: rgba(255,255,255,.055);
	color: #fff !important;
}

.sol-main-nav-item.is-active
{
	background: rgba(67,150,226,.13);
	color: #fff !important;
	box-shadow:
		inset 0 0 0 1px rgba(85,169,255,.12);
}

.sol-main-nav-item b
{
	padding: 2px 6px;

	border-radius: 20px;

	background: var(--sol-blue);
	color: #fff;

	font-size: 9px;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.sol-header-actions
{
	display: flex;
	align-items: center;
	gap: 5px;
}

.sol-header-icon
{
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border-radius: 11px;

	color: #8fa5ba !important;
	text-decoration: none !important;
}

.sol-header-icon:hover
{
	background: rgba(255,255,255,.06);
	color: #fff !important;
}

.sol-alert-badge
{
	position: absolute;
	top: 2px;
	right: 2px;

	min-width: 15px;
	height: 15px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background: #4fa8ff;
	color: white;

	font-size: 8px;
	font-weight: 800;
}


/* =========================================================
   USER
========================================================= */

.sol-user
{
	display: flex;
	align-items: center;
	gap: 9px;

	margin-left: 6px;
	padding: 5px 9px 5px 5px;

	border: 1px solid transparent;
	border-radius: 13px;

	color: #fff !important;
	text-decoration: none !important;
}

.sol-user:hover
{
	background: rgba(255,255,255,.05);
	border-color: var(--sol-border);
}

.sol-user .avatar
{
	width: 32px;
	height: 32px;

	border-radius: 10px;
}

.sol-user-info
{
	display: flex;
	flex-direction: column;
}

.sol-user-info strong
{
	font-size: 12px;
}

.sol-user-info small
{
	margin-top: 2px;

	color: var(--sol-muted);
	font-size: 9px;
}


/* =========================================================
   SHELL
========================================================= */

.sol-shell
{
	max-width: 1500px;
	margin: 0 auto;

	padding: 34px 28px 80px;

	display: grid;

	grid-template-columns:
		220px
		minmax(0, 1fr)
		270px;

	gap: 24px;
}


/* =========================================================
   LEFT SIDEBAR
========================================================= */

.sol-sidebar
{
	position: sticky;
	top: 102px;
	align-self: start;
}

.sol-sidebar-inner
{
	padding: 14px;

	background: rgba(9, 20, 34, .52);

	border: 1px solid var(--sol-border);
	border-radius: var(--sol-radius);

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	box-shadow: var(--sol-shadow);
}

.sol-sidebar-section
{
	margin-bottom: 22px;
}

.sol-sidebar-heading
{
	padding: 7px 9px 10px;

	color: #61758a;

	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.sol-sidebar-nav
{
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sol-sidebar-item
{
	display: flex;
	align-items: center;
	gap: 10px;

	min-height: 40px;
	padding: 0 10px;

	border-radius: 10px;

	color: #8da2b7 !important;
	text-decoration: none !important;

	font-size: 12px;
	font-weight: 600;

	transition: all .2s ease;
}

.sol-sidebar-item:hover
{
	background: rgba(255,255,255,.045);
	color: #fff !important;
}

.sol-sidebar-item.is-active
{
	background:
		linear-gradient(
			90deg,
			rgba(59,143,220,.18),
			rgba(59,143,220,.05)
		);

	color: #fff !important;

	box-shadow:
		inset 2px 0 0 var(--sol-blue);
}

.sol-sidebar-icon
{
	width: 18px;

	color: #64839e;

	text-align: center;
}

.sol-sidebar-item.is-active .sol-sidebar-icon
{
	color: var(--sol-blue);
}

.sol-sidebar-counter
{
	margin-left: auto;

	padding: 2px 6px;

	border-radius: 20px;

	background: rgba(255,255,255,.06);

	font-size: 9px;
}

.sol-sidebar-footer
{
	padding: 12px 9px 4px;

	border-top: 1px solid var(--sol-border);
}

.sol-sidebar-status
{
	display: flex;
	align-items: center;
	gap: 8px;

	color: #63798e;

	font-size: 10px;
}

.sol-status-dot
{
	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #42d98a;

	box-shadow: 0 0 12px rgba(66,217,138,.7);
}


/* =========================================================
   MAIN
========================================================= */

.sol-main
{
	min-width: 0;
}

.sol-breadcrumbs
{
	margin-bottom: 20px;
}

.sol-breadcrumb-list
{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.sol-breadcrumb-list li
{
	display: flex;
	align-items: center;
}

.sol-breadcrumb-list li:not(:last-child)::after
{
	content: "/";
	margin-left: 7px;

	color: #40566c;
}

.sol-breadcrumb-list a
{
	color: #718aa2 !important;
	font-size: 11px;
	text-decoration: none;
}

.sol-breadcrumb-list a:hover
{
	color: var(--sol-blue) !important;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.sol-page-header
{
	margin-bottom: 22px;
}

.sol-page-header h1
{
	margin: 0;

	color: #f3f8ff;

	font-size: 28px;
	font-weight: 750;
	letter-spacing: -.6px;
}

.sol-page-header p
{
	margin: 7px 0 0;

	color: var(--sol-muted);

	font-size: 12px;
}


/* =========================================================
   CONTENT
========================================================= */

.sol-content
{
	min-width: 0;
}

.sol-content-inner
{
	min-width: 0;
}


/* =========================================================
   XF CONTENT OVERRIDES
========================================================= */

.sol-content-inner .block,
.sol-content-inner .block-container,
.sol-content-inner .structItemContainer,
.sol-content-inner .node-body,
.sol-content-inner .node-main
{
	background: transparent !important;
	border: 0 !important;
}

.sol-content-inner .block-container
{
	border-radius: var(--sol-radius);
}

.sol-content-inner .block-header
{
	background: rgba(12,25,42,.72) !important;

	border: 1px solid var(--sol-border) !important;
	border-bottom: 0 !important;

	border-radius: var(--sol-radius) var(--sol-radius) 0 0 !important;

	color: #eaf4ff !important;
}

.sol-content-inner .block-body
{
	background: rgba(8,18,31,.52) !important;

	border: 1px solid var(--sol-border) !important;

	border-radius: 0 0 var(--sol-radius) var(--sol-radius) !important;

	box-shadow: var(--sol-shadow);
}


/* =========================================================
   FORUM LIST — VERTICAL / CUSTOM
========================================================= */

.sol-content-inner .node
{
	margin-bottom: 10px !important;

	background:
		linear-gradient(
			110deg,
			rgba(17,34,54,.72),
			rgba(8,20,34,.62)
		) !important;

	border: 1px solid var(--sol-border) !important;
	border-radius: 15px !important;

	box-shadow:
		0 12px 35px rgba(0,0,0,.20);

	transition:
		transform .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}

.sol-content-inner .node:hover
{
	transform: translateY(-2px);

	border-color: var(--sol-border-hover) !important;

	box-shadow:
		0 18px 45px rgba(0,0,0,.30);
}

.sol-content-inner .node-title a
{
	color: #eaf3fc !important;
	font-size: 15px;
	font-weight: 700;
}

.sol-content-inner .node-description
{
	color: #72879b !important;
	font-size: 11px;
}

.sol-content-inner .node-extra
{
	color: #8298ad !important;
}


/* =========================================================
   WIDGETS
========================================================= */

.sol-widget
{
	margin-bottom: 14px;
	padding: 17px;

	background:
		linear-gradient(
			145deg,
			rgba(16,30,49,.70),
			rgba(7,17,29,.64)
		);

	border: 1px solid var(--sol-border);
	border-radius: var(--sol-radius);

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	box-shadow: var(--sol-shadow);
}

.sol-widget .block-container
{
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.sol-widget .block-header
{
	padding: 0 0 12px !important;

	background: transparent !important;
	border: 0 !important;

	color: #dce9f6 !important;

	font-size: 13px;
	font-weight: 700;
}

.sol-widget .block-body
{
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.sol-content-inner .button,
.sol-content-inner a.button
{
	border: 1px solid rgba(101,168,224,.20) !important;
	border-radius: 10px !important;

	background: rgba(40,86,127,.24) !important;

	color: #dcecff !important;

	box-shadow:
		0 8px 22px rgba(0,0,0,.18) !important;
}

.sol-content-inner .button:hover
{
	background: rgba(61,130,193,.34) !important;
	border-color: rgba(85,169,255,.4) !important;
}


/* =========================================================
   INPUTS
========================================================= */

.sol-content-inner input,
.sol-content-inner textarea,
.sol-content-inner select
{
	background: rgba(4,12,21,.72) !important;

	border: 1px solid var(--sol-border) !important;
	border-radius: 10px !important;

	color: #e9f4ff !important;

	box-shadow:
		inset 0 1px 3px rgba(0,0,0,.25);
}

.sol-content-inner input:focus,
.sol-content-inner textarea:focus,
.sol-content-inner select:focus
{
	border-color: rgba(85,169,255,.45) !important;

	box-shadow:
		0 0 0 3px rgba(85,169,255,.08) !important;
}


/* =========================================================
   RIGHT SIDEBAR
========================================================= */

.sol-rightbar
{
	min-width: 0;
}

.sol-rightbar .block
{
	margin-bottom: 14px;
}

.sol-rightbar .block-container
{
	background:
		linear-gradient(
			145deg,
			rgba(15,29,47,.72),
			rgba(7,17,29,.66)
		) !important;

	border: 1px solid var(--sol-border) !important;
	border-radius: var(--sol-radius) !important;

	box-shadow: var(--sol-shadow) !important;

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.sol-rightbar .block-header
{
	background: transparent !important;
	border: 0 !important;

	color: #e5f0fb !important;
}

.sol-rightbar .block-body
{
	background: transparent !important;
	border: 0 !important;
}


/* =========================================================
   FOOTER
========================================================= */

.sol-footer
{
	margin-top: 40px;

	border-top: 1px solid var(--sol-border);

	background: rgba(4,11,19,.72);

	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.sol-footer-inner
{
	max-width: 1500px;
	margin: auto;

	padding: 28px;

	display: flex;
	align-items: center;
	gap: 30px;
}

.sol-footer-brand
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.sol-footer-logo
{
	width: 34px;
	height: 34px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 10px;

	background: rgba(65,143,210,.16);

	color: var(--sol-blue);

	font-weight: 800;
	font-size: 11px;
}

.sol-footer-brand div:last-child
{
	display: flex;
	flex-direction: column;
}

.sol-footer-brand strong
{
	color: #dbe8f5;
	font-size: 11px;
}

.sol-footer-brand span
{
	margin-top: 2px;

	color: #60758a;
	font-size: 9px;
}

.sol-footer-links
{
	display: flex;
	gap: 18px;
	margin-left: auto;
}

.sol-footer-links a
{
	color: #687e94 !important;
	font-size: 10px;
	text-decoration: none;
}

.sol-footer-links a:hover
{
	color: #fff !important;
}

.sol-footer-copy
{
	color: #45596c;
	font-size: 9px;
}


/* =========================================================
   HIDE OLD XF FOOTER
========================================================= */

.p-footer
{
	display: none !important;
}


/* =========================================================
   XF MENUS
========================================================= */

.menu
{
	background:
		rgba(10,22,37,.94) !important;

	border: 1px solid var(--sol-border) !important;
	border-radius: 14px !important;

	box-shadow:
		0 25px 70px rgba(0,0,0,.45) !important;

	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

.menu-header,
.menu-footer
{
	background: transparent !important;
	border-color: var(--sol-border) !important;
}

.menu-linkRow
{
	color: #9db2c7 !important;
}

.menu-linkRow:hover
{
	background: rgba(255,255,255,.05) !important;
	color: #fff !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px)
{
	.sol-shell
	{
		grid-template-columns: 190px minmax(0,1fr);
	}

	.sol-rightbar
	{
		display: none;
	}
}

@media (max-width: 760px)
{
	.sol-header
	{
		height: 64px;
	}

	.sol-header-inner
	{
		padding: 0 15px;
		gap: 10px;
	}

	.sol-brand
	{
		min-width: auto;
	}

	.sol-brand-info
	{
		display: none;
	}

	.sol-main-nav
	{
		display: none;
	}

	.sol-shell
	{
		display: block;

		padding:
			20px
			14px
			50px;
	}

	.sol-sidebar
	{
		display: none;
	}

	.sol-page-header h1
	{
		font-size: 23px;
	}

	.sol-footer-inner
	{
		flex-direction: column;
		align-items: flex-start;
	}

	.sol-footer-links
	{
		margin-left: 0;
		flex-wrap: wrap;
	}
}