/*
 * WiND - Wireless Nodes Database
 *
 * Copyright (C) 2005-2014 	by WiND Contributors (see AUTHORS.txt)
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/* Default configuration */
html {
	height: 100%;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size: 0.9em;
	background-color: #313852;
	/* Deep Blue background */
	font-family: 'Open Sans', sans-serif;
	color: #dee0ea;
	/* Light Grey-Blue text */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


.ui-widget {
	font-size: 11px;
}

.ui-widget input {
	font-size: 12px;
	background-color: #3e4764;
	color: #dee0ea;
	border: 1px solid #576492;
}

.no-title-dialog .ui-dialog-titlebar {
	display: none
}

/* Force X on close button */
.ui-dialog-titlebar-close {
	text-indent: 0 !important;
	font-size: 0 !important;
	right: 8px !important;
	background: #485278;
	border: none;
}

.ui-dialog-titlebar-close:focus-visible {
	outline: none;
}

.ui-dialog-titlebar-close::after {
	content: "X";
	font-size: 14px;
	font-weight: bold;
	color: #dee0ea;
	/* Light text for visibility */
	display: block;
	line-height: normal;
	text-align: center;
}

/** Page Layout  **/
.layout {
	width: 100%;
	position: relative;
	background-color: #3e4764;
	/* Content Blue background */
	display: grid;
	grid-template-columns: 210px 1fr;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
	grid-template-areas:
		"header header"
		"nav main"
		"footer footer";
}

/* Handle missing sidebar */
.layout:not(:has(.navigation)) {
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"main"
		"footer";
}

.layout>.header {
	height: 90px;
	grid-area: header;
}

.layout>.main {
	/* min-height: 500px; removed */
	width: auto;
	overflow: visible;
	grid-area: main;
	min-height: 0;
	color: #dee0ea;
}

.layout>.navigation {
	width: auto;
	float: none;
	grid-area: nav;
}

.layout>.footer {
	clear: none;
	width: 100%;
	color: #8b91a4;
	/* Muted text */
	font-size: 10px;
	background-color: #313852;
	/* Deep Blue footer */
	border-top: 5px solid #485278;
	/* Panel Blue border */
	padding: 20px 0px;
	grid-area: footer;
}

/** Header **/
div.header {
	width: 100%;
	height: 93px;
	background-image: -webkit-gradient(linear,
			left top,
			left bottom,
			color-stop(0, #313852),
			color-stop(1, #485278));
	background-image: -o-linear-gradient(bottom, #313852 0%, #485278 100%);
	background-image: -moz-linear-gradient(bottom, #313852 0%, #485278 100%);
	background-image: -webkit-linear-gradient(bottom, #313852 0%, #485278 100%);
	background-image: -ms-linear-gradient(bottom, #313852 0%, #485278 100%);
	background-image: linear-gradient(to bottom, #313852 0%, #485278 100%);
	position: relative;
	border-bottom: 1px solid #576492;
	z-index: 2000;
	/* Ensure header dropdowns go over sticky nav */
}

div.header img.logo {
	display: block;
}

div.user-panel {
	background-color: #485278;
	/* Panel Blue */
	border-color: #576492;
	border-radius: 5px 0 0;
	border-style: solid;
	border-width: 1px 0 0 1px;
	bottom: -1px;
	font-size: 11px;
	padding: 5px 10px 0px 10px;
	position: absolute;
	right: 0;
	z-index: 1;
	color: #dee0ea;
}


div.user-panel .user-info-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Quicksearch Styling */
.quicksearch {
	display: inline-block;
	position: relative;
	float: right;
	padding: 6px 0 4px 0;
}

.quicksearch input {
	padding: 4px 8px;
	border-radius: 4px;
	width: 180px;
	color: #f0f2f6;
	background: #3e4766;
	border: 1px solid #576492;
	transition: all 0.3s ease;
}

.quicksearch input:focus {
	background: #485278;
	border-color: #7986cb;
	outline: none;
}

#searchResult {
	font-family: Arial;
	font-size: 12px;
	background-color: #485278;
	color: #dee0ea;
	padding: 5px;
	display: none;
	position: absolute;
	width: 198px;
	vertical-align: left;
	border: 1px solid #576492;
	border-top-width: 0px;
	z-index: 1001;
}

#searchResult td {
	padding: 2px 0px;
}

#searchResult td.node_id {
	color: #8b91a4;
}

div#login-dialog {
	display: none;
}

div.user-panel .user {
	font-size: 14px;
	color: #ffffff;
	font-weight: bold;
}

div.user-panel>a {
	color: #b4b9c7;
}

div.user-panel>a:hover {
	color: #ffffff;
}

.language-selection {
	display: inline-block;
	margin-right: 8px;
	vertical-align: text-bottom;
}

.language-selection a img {
	border: 0px;
	margin: 0px;
	vertical-align: bottom;
}

ul.languages {
	list-style-type: none;
	margin: 0px;
	display: block;
	float: right;
	position: absolute;
	z-index: 1000;
	top: 40px;
	background: #485278 !important;
	color: #dee0ea;
	border: 1px solid #576492 !important;
	border-radius: 4px !important;
	padding: 6px 0 !important;
	display: none;
	min-width: 140px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

ul.languages li {
	margin: 0;
	padding: 0;
}

ul.languages li a {
	white-space: nowrap;
	color: #dee0ea;
	padding: 8px 15px !important;
	display: flex !important;
	align-items: center;
	transition: background-color 0.15s ease;
}

ul.languages li a:hover {
	background-color: #576492;
	color: #ffffff;
}


/* Page Title */
div.page-title {
	background-color: #485278;
	/* Panel Blue */
	height: 56px;
	margin-bottom: 10px;
	position: relative;
	border-radius: 4px;
}

div.page-title h1 {
	color: #ffffff;
	font-size: 20px;
	font-weight: normal;
	line-height: 56px;
	margin: 0;
	padding-left: 20px;
}

div.page-title h1 small {
	color: #b4b9c7;
}

div.page-title .extra {
	position: absolute;
	bottom: 10px;
	right: 25px;
}

#help-dialog-icon:hover {
	cursor: pointer;
}

#help-dialog {
	display: none;
}

/** Navigation **/

.navigation .gadget {
	background-color: #485278;
	/* Panel Blue */
	margin-bottom: 5px;
	border-radius: 10px;
	margin: 15px 5px 15px 5px;
	padding: 5px;
	color: #dee0ea;
}


.navigation .gadget .title {
	padding: 5px 10px;
	font-weight: bold;
	font-size: 14px;
	border-bottom: 1px solid #576492;
	display: block;
	color: #ffffff;
}

ul.menu {
	padding: 0px;
	list-style-type: none;
}

ul.menu>li>a {
	display: block;
	padding: 0px 5px;
	color: #dee0ea;
}

ul.menu>li:nth-child(odd) {
	background-color: #4e5982;
	/* Slightly lighter/different panel blue */
}

ul.menu>li:nth-child(even) {
	background-color: #485278;
	/* Base panel blue */
}

ul.main-menu {
	padding: 0px;
	background-color: transparent;
	/* Deep Blue */
}

ul.main-menu>li {
	border-bottom: 1px solid #313852;
	font-size: 1.1em;
	font-weight: bold;
	text-align: left;
	vertical-align: text-bottom;
	background-color: transparent !important;
}

ul.main-menu>li:last-child,
ul.main-menu>li:last-child>a {
	border-bottom: none;
}

ul.main-menu>li>a {
	padding: 8px;
	color: #dee0ea;
	height: 40px;
	padding: 12px 0 10px 10px;
	border-bottom: 1px solid #485278;
}

ul.main-menu>li>a:hover {
	text-decoration: none;
	background-color: #576492;
}

ul.main-menu>li.active:not(.has-children)>a,
ul.main-menu>li>ul>li.active>a {
	background: rgb(222 224 234 / 5%);
	color: #dee0ea;
}

ul.main-menu li img {
	margin-right: 10px;
}

ul.main-menu li a:hover {
	background-color: #3b4463;
}

ul.main-menu>li>ul {
	padding: 0px;
}

ul.main-menu>li>ul>li a {
	display: block;
	color: #dee0ea;
	font-size: 0.8em;
	padding: 3px 5px;
	padding-left: 25px;
}

ul.node-list .node-id {
	float: right;
	color: #8b91a4;
}

div.statistics ul {
	list-style-type: none;
	padding: 2px 5px;
	margin: 0px;
}

div.statistics li .quantity {
	font-weight: bold;
	color: #ffffff;
}

div.toolbox ul.menu li {
	padding: 3px 0px;
	white-space: normal;
	color: #dee0ea;
	font-weight: normal;
}

.navigation div.toolbox .title {
	background: url('../images/node.gif') no-repeat 160px center;
	padding-left: 40px;
	height: 30px;
	line-height: 20px
}

.navigation div.toolbox.administration .title {
	background-image: url('../images/admin.gif');
}

.navigation div.toolbox.hostmaster .title {
	background-image: url('../images/admin.gif');
}

.navigation div.toolbox.hostmaster .button {
	display: block;

}


/** Footer **/

.footer {
	position: relative;
	padding: 20px;
}

.footer-left {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	text-align: left;
	font-size: 11px;
	color: #8b91a4;
}

.footer-center {
	text-align: center;
	font-size: 12px;
	color: #8b91a4;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	white-space: nowrap;
}

.footer-right {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	text-align: right;
}

/* Ensure footer has enough height */
.layout>.footer {
	min-height: 80px;
}

/** Sections **/
.section .panel-heading {
	position: relative;
}

.section .panel-heading .buttons {
	position: absolute;
	right: 15px;
	top: 5px;
}

/** Messages **/
.message {
	width: 500px;
	margin: 50px auto;
}

/** Table Filter **/
.table-data-filter-toolbar {
	line-height: 34px;
	border-radius: 5px;
	padding: 4px 5px;
	text-align: right;
	background-color: #485278;
	color: #dee0ea;
}

.table-data-filter-wrapper .enabled-filters {
	display: inline-block;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	font-size: 1.2em;
}

.table-data-filter-wrapper .enabled-filters li {
	line-height: 22px;
	background-color: #576492;
	border-radius: 5px;
	padding: 4px 15px;
	display: inline-block;
	margin: 0px 5px;
	color: #ffffff;
}

.table-data-filter-wrapper .enabled-filters .value {
	font-weight: bold;
	margin: 0px 5px;
	color: #dee0ea;
}

/** Tables Extra */
.table-data .extra {
	margin-bottom: 20px;
}

.table-data .extra .pagination {
	margin: 0px;
	width: auto;
}

.table-data .extra .buttons {
	text-align: right;
	float: right;
}

/** Forms **/
.form-bs {
	padding: 10px 20px;
}

.form-bs .buttons {
	text-align: right;
	padding: 10px 0px;
}

.form-bs .comparison select {
	width: auto;
}

.form-bs .comparison input {
	width: 270px;
}


/** Login dialog **/

.login-dialog {
	padding: 15px 15px;
	border-radius: 15px;
	border-width: 0px;
	font-size: 1em;
	color: #dee0ea !important;
	background-color: #485278 !important;
	background-image: none;
	box-shadow: 0px 0px 10px #313852;
	width: 390px !important;
	position: relative;
}

.login-dialog button.close {
	position: absolute;
	right: 0px;
	top: -26px;
	right: -20px;
	font-size: 28px;
}

.login-dialog a {
	color: #b4b9c7;
}

.login-dialog a:hover {
	text-decoration: none;
	color: #ffffff;
}

.login-dialog .notification {
	display: none;
}

.login-dialog .info .notification {
	display: block;
	background-color: #576492;
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 5px;
	width: 212px;
	color: #ffffff;
}

.login-dialog .error .notification {
	color: #ffcccc !important;
	background-color: #c84448;
}

.login-dialog label {
	display: block;
	margin: 15px 0px;
	font-weight: normal;
}

.login-dialog fieldset {
	border: 0px;
	padding: 0px;
	;
}

.login-dialog input[type=text],
.login-dialog input[type=password] {
	font-size: 1.2em;
	background-color: #3e4764;
	color: #dee0ea;
	border: 1px solid #576492;
	padding: 4px;
	border-radius: 4px;
}

.login-dialog .btn {
	margin-right: 10px;
	font-size: 1.2em;
}

/** Node view **/
.node-status {
	padding: 5px 6px 6px 6px;
	font-size: 12px;
	background-color: #485278;
	/* Panel Blue */
	text-transform: capitalize;
	border-radius: 3px;
	color: #dee0ea;
}

.node-status-active {
	background-color: #1b6d2d;
	color: white;
}

.plot-table {
	position: relative;
	width: 300px;
	text-shadow: 0px 0px 5px #000;
	color: #dee0ea;
	font-weight: bold;
}

.plot-table .plot-peers {
	position: absolute;
	top: 2px;
	right: 0px;
	left: 0px;
	font-weight: normal;
	padding: 0px 5px;
}

.plot-table .plot-peers .plot-right-peer {
	float: right;
}

.plot-table .plot-distance {
	display: block;
	text-align: center;
	position: absolute;
	bottom: 0px;
	right: 0px;
	left: 0px;
}

/** Misc **/
.page-content {
	padding: 5px 25px 15px 25px;
}

/* Fix for Semantic UI List dots */
/* Fix for Semantic UI List dots */
ul.node-list.ui.list>li.item::before,
ul.node-list.ui.list>li.item::after,
.ui.list>.item::before,
.ui.list>.item::after,
.node-list.ui.striped.list ul::before,
ul.node-list.ui.striped.list::before {
	content: none !important;
	display: none !important;
}

/** Standalone Login Form **/
#form_node.form select {
	display: inline-block;
	width: auto;
}

.logins {
	width: 320px;
	margin: 18px auto;
	padding: 20px;
	background-color: #485278;
	/* Panel Blue */
	color: #dee0ea;
	border-radius: 10px;
	position: relative;
}

.logins a {
	color: #b4b9c7;
}

.logins a:hover {
	text-decoration: none;
	color: #ffffff;
}

.logins button.close {
	display: none;
}

.logins .notification {
	display: none;
}

.invalid-feedback {
	color: #E91E63;
}

.logins .notification.error {
	display: block;
	background-color: #c84448;
	/* Error Red */
	color: #ffffff;
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 5px;
}

/* Ensure close button is shown if inside the dialog */
#login-dialog .logins button.close {
	display: block;
}

/* Standalone Login Form Centering */
.login-center-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 500px;
	width: 100%;
}

.logins.standalone {
	position: static;
	transform: none;
	margin: 0;
	z-index: auto;
}

div#login-dialog {
	width: 100% !important;
}

div#map {
	margin: 20px 0 !important;
}

.main>.table-data,
table.table-page,
.table-data-filter-wrapper {
	margin: 0;
}

.table-node table.table-d1 {
	width: 100%;
}

table.table-node {
	width: 100%;
}

table.table-d1 {
	width: 100%;
	margin-bottom: 20px;
}

td.table-d1-title-text {
	padding: 10px 0 10px 15px;
	background: #485278;
	/* Panel Blue */
	font-weight: 600;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	color: #ffffff;
}

td.table-d1-text1 {
	background: #4e5982;
	/* Slightly darker/different panel blue */
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color: #dee0ea;
}

td.table-node-link-info {
	padding: 10px 20px 20px 20px;
}

.table-node-link-info table.table-form {
	background: #4e5982;
	border-radius: 10px;
}

td.table-node-link-info tr {
	border-bottom: 2px solid #485278;
}

td.table-node-key2 {
	padding: 5px 0 2px 10px;
	color: #b4b9c7;
}

td.table-node-value2 {
	padding: 5px 0 2px 10px;
	font-weight: 600;
	color: #ffffff;
}

/* General Link Styling */
a {
	color: #b4b9c7;
}

a:hover {
	color: #ffffff;
}

/* Semantic UI Overrides for Dark Mode */
.ui.table {
	background: #4e5982;
	color: #dee0ea;
	border-color: #576492;
}

.ui.table thead th {
	background: #485278;
	color: #ffffff;
	border-bottom: 1px solid #576492;
}

.ui.celled.table tr td,
.ui.celled.table tr th {
	border-color: #576492;
}

.ui.striped.table>tbody>tr:nth-child(2n),
.ui.striped.table>tbody>tr:nth-child(2n) {
	background: #454e6f;
}

/* Layout Restructuring 2026 */

.full-width-bg {
	width: 100%;
}

.inner-centered {
	max-width: 1300px;
	margin: 0 auto;
	width: 100%;
	position: relative;
	padding: 0 20px;
	/* Add some padding for smaller screens */
}

/* 1. Top Bar (Staff Bar) */
.p-staffBar {
	font-size: 13px;
	color: #ffffff;
	background: #4d5880;
	border-bottom: 1px solid #55618d;
	position: relative;
	z-index: 2001;
	/* Ensure top bar dropdowns overlap sticky nav */
	min-height: 40px;
}

.p-staffBar .header-flex-container {
	min-height: 40px;
}

/* 2. Sticky Nav */
.p-navSticky {
	color: #dee0ea;
	background: #363e5a;
	border-bottom: 1px solid #576492;
	min-height: 60px;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.p-navSticky .menu-flex-container {
	min-height: 60px;
}

.p-navSticky--secondary {
	color: #dbdee8;
	background: #434d70
}

/* 3. Page Content */
.p-body-inner {
	background-color: #24293c;
	/* Content Blue */
	padding-top: 20px;
	min-height: 600px;
	padding-bottom: 40px;
	flex: 1 0 auto;
}

/* 4. Footer Wrapper */
.footer-wrapper {
	background-color: #313852;
	margin-top: auto;
	padding: 30px 0;
	position: relative;
	border-top: 5px solid #485278;
	/* Panel Blue border */
	flex-shrink: 0;
}

/* Reset Grid Layout */
.layout {
	display: block;
	grid-template-columns: none;
	grid-template-rows: none;
	grid-template-areas: none;
	background-color: transparent;
}

.layout>.header,
.layout>.navigation,
.layout>.footer,
.layout>.main {
	grid-area: auto;
	width: auto;
	height: auto;
	float: none;
}

/* Horizontal Menu Overrides */
.navigation-area .main-menu {
	border-bottom: 0;
	margin-bottom: 0;
}

.navigation-area .main-menu>li {
	display: inline-block;
	border-bottom: 0;
	vertical-align: middle;
	position: relative;
}

.navigation-area .main-menu>li>a {
	border-bottom: 0;
	padding: 21px 15px;
	/* Increase height for nav bar */
	height: auto;
	text-decoration: none;
	/* Ensure no underline */
}

.navigation-area .main-menu>li:hover>a {
	background-color: #485278;
}

.navigation-area .main-menu>li>ul {
	position: absolute;
	background-color: #485278;
	z-index: 1001;
	min-width: 200px;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
	display: none;
}

.navigation-area .main-menu>li:hover>ul {
	display: block;
}

/* Gadget Styling in Header */
.p-staffBar .node_editor.toolbox.gadget {
	background-color: transparent !important;
	border: none !important;
	padding: 0;
	margin: 0;
}

#header-user-dropdown {
	background: transparent !important;
	border: none !important;
}

.user-panel .user-info-wrapper .ui.dropdown .menu>.divider {
	border-top: 0;
	margin: 0;
}

.p-staffBar .ui.dropdown .text {
	color: #dee0ea;
	padding: 10px;
}

.p-staffBar .ui.dropdown .menu {
	background-color: #485278;
	border: 1px solid #576492;
	z-index: 1001;
}

.p-staffBar .ui.dropdown .item {
	color: #dee0ea;
}

.p-staffBar .ui.dropdown .item:hover {
	background-color: #576492;
}

/* Header User Panel overrides */
.p-staffBar .user-panel {
	position: relative;
	background: transparent;
	border: 0;
	padding: 0;
	float: left;
	line-height: 20px;
	/* Vertically center text in the 40px bar */
	font-size: 13px;
}

#select-language {
	margin-bottom: 2px;
}

a#select-language:focus,
a#select-language:focus-visible {
	color: #ffffff;
}

/* Footer Stats Bar */
.statistics-bar.ui.segment {
	background-color: #485278;
	border: 1px solid #576492;
	margin-top: 0;
}

/* Logo Sizing */
.logo-area img {
	width: auto;
	display: block;
}


/* Dropdown Menu Fixes */
.p-navSticky,
.navigation-area,
.p-nav-scroller,
.hScroller {
	overflow: visible !important;
	text-align: right;
}

/* Ensure dropdowns are above everything */
.navigation-area .main-menu>li>ul {
	z-index: 9999 !important;
	background-color: #485278;
	/* Match header for seamless look */
	border: 1px solid #576492;
	border-top: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	min-width: 220px;
}

.navigation-area .main-menu>li>ul>li>a {
	padding: 10px 15px;
	border-bottom: 1px solid #485278;
	color: #dee0ea;
	display: block;
}

.navigation-area .main-menu>li>ul>li>a:hover {
	background-color: #2e344e;
	color: #fff;
	text-decoration: none;
}

/* Dropdown Positioning & Visibility */
.navigation-area .main-menu>li {
	position: relative;
	/* Anchor for absolute dropdown */
}

.navigation-area .main-menu>li>ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	/* Hidden by default */
}

.navigation-area .main-menu>li.open>ul {
	display: block;
	/* Show when open */
}

.navigation-area .main-menu>li.open>a {
	background-color: #485278;
	color: #fff;
	position: relative;
	z-index: 10000;
	/* Ensure it stays above dropdown border if needed */
	border-radius: 4px 4px 0 0;
	/* Rounded top corners to match potential dropdown style */
}

/* Down Arrow for Submenus */
.navigation-area .main-menu>li.has-children>a::after {
	content: "\f0d7";
	/* FontAwesome/Semantic Icon caret-down */
	font-family: Icons;
	/* Semantic UI uses 'Icons' font family */
	margin-left: 5px;
	opacity: 0.8;
}

/* Click behavior needs this to indicate interactivity */
.navigation-area .main-menu>li.has-children>a {
	cursor: pointer;
}

/* Standard Dropdown Menu */
.navigation-area .main-menu>li>ul {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	min-width: 220px;
	width: auto !important;
	/* Let content dictate width */
	max-height: 420px;
	overflow-y: auto;
	padding: 10px 0;
	list-style: none;
	background-color: #485278;
	/* Match header for seamless look */
	border: 1px solid #576492;
	border-top: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	z-index: 9999 !important;
	white-space: nowrap;
}

.navigation-area .main-menu>li>ul.align-right {
	left: auto !important;
	right: 0 !important;
}

/* Prevent breaks inside items */
.navigation-area .main-menu>li>ul>li {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Scrollbar Styling for Webkit */
.navigation-area .main-menu>li>ul::-webkit-scrollbar {
	width: 8px;
}

.navigation-area .main-menu>li>ul::-webkit-scrollbar-track {
	background: #313852;
}

.navigation-area .main-menu>li>ul::-webkit-scrollbar-thumb {
	background: #576492;
	border-radius: 4px;
}

.navigation-area .main-menu>li>ul::-webkit-scrollbar-thumb:hover {
	background: #dee0ea;
}

/* FORCE OVERRIDE: Disable hover OPEN */
.navigation-area .main-menu>li:hover>ul {
	display: none !important;
}

/* Enable ONLY on .open class */
.navigation-area .main-menu>li.open>ul {
	display: block !important;
}

/* Global Input Styling */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select,
.ui.input input,
.ui.dropdown,
.ui.selection.dropdown {
	color: #f0f2f6 !important;
	background-color: #3e4766 !important;
	border: 1px solid #576492 !important;
}

/* Placeholder Color */
::placeholder {
	color: #aeb4c5;
	opacity: 1;
}

/* Quicksearch Specific Override (to ensure it matches) */
.quicksearch input {
	color: #f0f2f6;
	background: #3e4766;
	border: 1px solid #576492;
	padding: 8px 5px 4px 10px;
}

/* Dropdown Menu Items */
.ui.dropdown .menu {
	background-color: #3e4766 !important;
	border: 1px solid #576492 !important;
}

.ui.dropdown .menu .item {
	color: #dee0ea !important;
	border-top: 1px solid #485278;
}

.ui.dropdown .menu .item:hover {
	background-color: #485278 !important;
	color: #fff !important;
}

/* Language Selector Dropdown */
#languages {
	position: absolute;
	z-index: 1001;
	background-color: #485278;
	border: 1px solid #576492;
	list-style: none;
	padding: 5px;
	margin: 0;
	display: none;
}

#languages li a {
	display: block;
	padding: 3px 5px;
	color: #dee0ea;
	white-space: nowrap;
}

#languages li a:hover {
	background-color: #576492;
	color: #fff;
	text-decoration: none;
}

/* Node Editor Full Width Mega Menu (1300px Centered) */
#header-node-editor {
	position: static !important;
	/* Allow dropdown to be relative to main container */
}

#node-editor-menu {
	width: 1300px !important;
	/* Center without transform to avoid animation conflicts */
	left: 0 !important;
	right: 0 !important;
	margin: 0 auto !important;
	border-radius: 0 0 4px 4px;
	margin-top: 0;
	top: 100% !important;
	padding: 15px 15px 12px 15px;
}

#node-editor-menu a.item {
	border-top: 0;
}

/* Grid Layout for Node List */
#node-list-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 4 Columns */
	gap: 10px;
}

#node-list-container .item {
	/* Ensure items look good in grid */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: none !important;
	/* Remove individual borders if grid has gap */
	padding: 8px !important;
	background: rgba(255, 255, 255, 0.05);
	/* Slight background for grid items */
	border-radius: 4px;
}

#node-list-container .item:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Pagination Styling (Mimicking pageNavWrapper / XenForo Style) */
.pagination {
	display: inline-flex;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
	list-style: none;
}

.pagination>li {
	display: inline;
}

.pagination>li>a,
.pagination>li>span {
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #dee0ea;
	text-decoration: none;
	background-color: #313852;
	border: 1px solid #485278;
	margin: 0 2px;
	border-radius: 3px;
	transition: all 0.2s ease;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
	z-index: 2;
	color: #ffffff;
	background-color: #3e4766;
	border-color: #576492;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
	z-index: 3;
	color: #ffffff;
	cursor: default;
	background-color: #485278;
	border-color: #576492;
	font-weight: 600;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
	color: #7d84a1;
	cursor: not-allowed;
	background-color: #2b3149;
	border-color: #3e4766;
}

/* Pagination Small */
.pagination-sm>li>a,
.pagination-sm>li>span {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
}

/* Data Filter Toolbar - Vertical Alignment & Right Align */
.table-data-filter-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* Right Align */
	gap: 10px;
	/* Optional gap between elements */
	margin-bottom: 10px;
	margin-top: 10px;
	/* spacing from table */
	background: none !important;
	/* Remove BG */
	border: none !important;
	padding: 0 !important;
}

/* Ensure children form-inline elements behave nicely if needed */
.table-data-filter-toolbar .form-group {
	margin-bottom: 0;
}

/* jQuery UI Dialog Theming */
div[role="dialog"] {
	background: #485278 !important;
	/* Panel Blue */
	color: #dee0ea !important;
	border: 1px solid #576492 !important;
	border-radius: 6px;
	padding: 0 !important;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

div[role="dialog"] .ui-dialog-titlebar {
	background: #3e4766 !important;
	/* Darker header */
	border: none !important;
	border-bottom: 1px solid #576492 !important;
	color: #ffffff !important;
	border-radius: 5px 5px 0 0;
	padding: 10px 15px !important;
}

div[role="dialog"] .ui-dialog-content {
	color: #dee0ea !important;
	padding: 20px !important;
	background: none !important;
}

div[role="dialog"] .ui-dialog-buttonpane {
	background: #485278 !important;
	border-top: 1px solid #576492 !important;
	margin: 0 !important;
	padding: 10px 15px !important;
}

div[role="dialog"] .ui-dialog-buttonpane button {
	background: #313852 !important;
	color: #dee0ea !important;
	border: 1px solid #576492 !important;
	border-radius: 3px;
	padding: 5px 15px;
	cursor: pointer;
}

div[role="dialog"] .ui-dialog-buttonpane button:hover {
	background: #3e4766 !important;
	color: #ffffff !important;
}

/* Node Editor & General Form Styling */
.form-bs {
	background: #313852;
	padding: 20px;
	color: #dee0ea;
}

.form-bs label.control-label {
	color: #b4b9c7;
	font-weight: 600;
	text-align: right;
	padding-top: 7px;
}

.form-bs .form-control {
	background-color: #3e4766;
	border: 1px solid #576492;
	color: #ffffff;
	border-radius: 4px;
	padding: 6px 12px;
	display: block;
	width: 100%;
	height: 34px;
}

.form-bs .form-control:focus {
	border-color: #7a88b8;
	outline: 0;
	box-shadow: 0 0 5px rgba(122, 136, 184, 0.5);
}

.form-bs .buttons {
	border-top: 1px solid #485278;
	padding-top: 20px;
	margin-top: 20px;
	text-align: right;
}

/* Pickup inputs specific */
.form-bs .pickup {
	display: flex;
	gap: 5px;
}

.form-bs .pickup .form-control[disabled] {
	background-color: #2b3149;
	color: #7d84a1;
	border-color: #485278;
}

/* Tabs & Panels (Bootstrap standard classes) */
.nav-tabs {
	border-bottom: none;
	margin-bottom: 0;
	/* Remove bottom margin to connect with content */
}

.nav-tabs>li>a {
	color: #b4b9c7;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	padding: 10px 15px;
	margin-right: 2px;
}

.nav-tabs>li>a:hover {
	background-color: #3e4766;
	border-color: #3e4766;
	color: #ffffff;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
	color: #ffffff;
	cursor: default;
	background-color: #485278;
	/* Matches content background */
	border: 1px solid #485278;
	border-bottom-color: transparent;
	font-weight: 600;
}

/* Tab Content Container */
.tab-content {
	background: #485278;
	padding: 20px;
	border: 1px solid #485278;
	border-top: none;
	/* Seamless connection with active tab */
	border-radius: 0 0 4px 4px;
	color: #dee0ea;
	border-top-right-radius: 4px;
}

/* Panel Overrides (Wana Dark Theme) */
.panel-default>.panel-heading {
	color: #ffffff !important;
	background-color: #3e4766 !important;
	/* Header Dark */
	border-color: #485278 !important;
	background-image: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.panel {
	background-color: #313852 !important;
	/* Panel BG */
	border: 1px solid #485278 !important;
}

.panel-body {
	background-color: #313852 !important;
	color: #dee0ea !important;
	border-top-right-radius: 4px;
}

/* jQuery UI Overlay */
.ui-widget-overlay {
	background: #1c202d !important;
	opacity: 0.8 !important;
	/* Ensure it is visible */
}

/* Page Layout Overrides */
.table-page {
	width: 100% !important;
	max-width: none !important;
}

.node-info:has(.node-status-active) {
	background: #28a745;
	padding: 10px;
	border-radius: 4px;
	margin: 20px 0;
	color: #fff;
	border: 1px solid #21e14d;
}

.node-info:has(.node-status-inactive) {
	background: #c93d32;
	padding: 10px;
	border-radius: 4px;
	margin: 20px 0;
	color: #fff;
	border: 1px solid #F44336;
}

.node-info:has(.node-status-pending) {
	background: #d7a100;
	padding: 10px;
	border-radius: 4px;
	margin: 20px 0;
	color: #fff;
	border: 1px solid #FFC107;
}

/* Specific Contact Button Styling */
.node-details button.btn.btn-info.btn-xs {
	color: #333333 !important;
	background-color: #f8f8f8 !important;
	border-color: #485278 !important;
	background-image: none;
	transition: all 0.2s ease-in-out;
	margin-left: 5px;
}

.node-details button.btn.btn-info.btn-xs:hover,
.node-details button.btn.btn-info.btn-xs:focus,
.node-details button.btn.btn-info.btn-xs:active {
	background-color: #f8f8f8e1 !important;
	border-color: #485278 !important;
}

/* Scroll to Top Button */
.scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #485278;
	color: #fff;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 4px;
	z-index: 1000;
	cursor: pointer;
	transition: background 0.3s;
	display: none;
}

.scroll-to-top:hover,
.scroll-to-top:focus {
	background: #576492;
	color: #fff;
}

.scroll-to-top i {
	margin: 0;
	font-size: 1.5em;
	line-height: 40px;
}

/* Ensure no clipping */
.p-navSticky,
.navigation-area,
.menu-flex-container {
	overflow: visible !important;
}

/* Page Preloader */
#page-preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1c202d;
	z-index: 999999;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.5s ease;
}

.preloader-spinner {
	width: 60px;
	height: 60px;
	border: 4px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	border-top-color: #576492;
	animation: preloader-spin 1s ease-in-out infinite;
}

@keyframes preloader-spin {
	to {
		transform: rotate(360deg);
	}
}


/* =========================================
   Mobile Optimization
   ========================================= */

/* Default: Hide Mobile Toggle */
.mobile-menu-toggle {
	display: none;
	font-size: 24px;
	color: #dee0ea;
	cursor: pointer;
	padding: 10px;
}

/* Mobile Menu Container Styling */
.mobile-menu-container {
	background: #313852;
	border-top: 1px solid #485278;
	padding: 10px;
}

.mobile-menu-container .main-menu {
	display: flex;
	flex-direction: column;
}

.mobile-menu-container .main-menu>li {
	display: block;
	width: 100%;
	border-bottom: 1px solid #485278;
}

.mobile-menu-container .main-menu>li>a {
	padding: 10px 15px;
	display: block;
}

/* Submenus in Mobile */
.mobile-menu-container .main-menu>li>ul {
	position: static !important;
	/* Stack normally */
	width: 100% !important;
	box-shadow: none;
	background: #2b3149;
	display: none;
	/* Toggle via JS */
}

.mobile-menu-container .main-menu>li.open>ul {
	display: block !important;
}

/* Media Query for Mobile Devices (< 768px) */
@media (max-width: 768px) {

	/* Layout Stacking */
	.menu-flex-container {
		flex-wrap: wrap;
	}

	.logo-area {
		margin-right: auto;
		/* Push others right */
	}

	/* Hide Desktop Menu */
	.navigation-area.p-nav-scroller {
		display: none !important;
	}

	/* Show Mobile Toggle */
	.mobile-menu-toggle {
		display: block;
	}

	/* Mobile Menu Container Full Width */
	.mobile-menu-container {
		width: 100%;
		order: 99;
		/* Force to bottom */
	}

	/* Global Container Stacking */
	.main-content-wrapper {
		display: flex;
		flex-direction: column;
	}

	#left-panel-bar {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 20px;
	}

	.table-page {
		overflow-x: auto;
		display: block;
		width: 100% !important;
	}
}

/* Mobile Icons Only (Hide Text) */
@media (max-width: 768px) {

	.user-panel .text-label,
	#header-node-editor .text-label {
		display: none;
	}


	.user-panel .user i.icon,
	.user-panel .logout i.icon {
		margin-right: 0;
		font-size: 1.3em;
	}

	/* Ensure icons are visible */
	.user-panel i.icon,
	#header-node-editor i.icon {
		display: inline-block;
	}

	.quicksearch input {
		width: 140px;
	}
}

/* Icon Standardization & Alignment */
/* Icon Standardization & Alignment */
/* Icon Standardization & Alignment - Individual Targeting */
.user-panel .user i.icon,
.user-panel .logout i.icon,
#header-node-editor .text i.icon {
	font-size: 14px !important;
	height: auto !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	margin: 0 5px !important;
	color: #dee0ea;
	display: inline-block;
}

.user-panel span.text-label {
	font-size: 13px;
}

/* Specific adjustment for Search Icon inside Input */
.quicksearch .ui.icon.input>i.icon {
	font-size: 1.2em !important;
	/* Keep search icon slightly smaller or standard */
	margin: 0 !important;
	height: 100% !important;
	line-height: 1 !important;
	/* Flex center handles it */
}

/* Vertical Align Wrapper */
.header-left-group,
.header-left-tools,
.user-panel,
.user-info-wrapper {
	display: flex !important;
	align-items: center !important;
}

/* Ensure links don't break flow */
.user-panel a {
	display: flex;
	align-items: center;
	text-decoration: none !important;
}

/* Quicksearch Container Alignment */
.search-area {
	display: flex;
	align-items: center;
}

/* Footer Mobile Optimization */
@media (max-width: 768px) {

	#footer,
	.footer {
		height: auto !important;
		/* Allow expansion */
		padding: 20px 0 !important;
		display: block !important;
	}

	/* Footer Columns - Broad Selector */
	div[class^="footer-"] {
		position: static !important;
		float: none !important;
		width: 100% !important;
		text-align: center !important;
		margin-bottom: 20px !important;
		display: block !important;
		height: auto !important;
	}

	/* Remove margin from last element */
	.footer-right {
		margin-bottom: 0 !important;
	}
}

/* My Nodes Mobile Optimization (2 Columns) */
@media (max-width: 768px) {
	#header-node-editor .menu {
		width: 100% !important;
		left: 0 !important;
		transform: none !important;
		max-width: 100% !important;
		border-radius: 0 !important;
	}

	#node-list-container {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 5px !important;
	}

	/* Adjust item padding for smaller space */
	#node-list-container .item {
		padding: 8px 5px !important;
		font-size: 0.9em !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}