/*********************************************
	 ** Stylesheet file for default Flux theme. **
	 *********************************************/

	:root {
		--bg-overlay: rgba(0, 0, 0, 0.7);
		--glass-bg: rgba(20, 20, 30, 0.85);
		--glass-border: rgba(255, 255, 255, 0.1);
		--primary-color: #4a90e2;
		--accent-color: #f0c419;
		--text-color: #e0e0e0;
		--text-muted: #a0a0a0;
		--link-color: #64b5f6;
		--link-hover: #90caf9;
		--font-main: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
		--border-radius: 8px;
		--spacing-unit: 1rem;
	}

	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		padding: 0;
		font-family: var(--font-main);
		font-size: 14px;
		color: var(--text-color);
		background: #1a1a1a url('../img/bg.jpg') no-repeat center center fixed;
		background-size: cover;
		min-height: 100vh;
		line-height: 1.6;
	}

	/* Layout Containers */
	/* Layout Containers */
	.flux-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	/* THE MAIN WINDOW (Glass Pane) */
	.main-body {
		display: flex;
		flex-direction: column;
		/* Stack Header, Content, Footer */
		flex: 1;
		background: var(--glass-bg);
		backdrop-filter: blur(10px);
		border: 1px solid var(--glass-border);
		border-radius: var(--border-radius);
	}

	/* Logo Container (Transparent Header) */
	header {
		margin: 0 !important;
		padding: 0 !important;
		display: block;
		flex-shrink: 0;
		/* Force absolute transparency so only the glass pane behind it shows */
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
		border-bottom: 1px solid var(--glass-border);
	}

	/* NUCLEAR OPTION: Kill any potential gradients from pseudo-elements */
	header::before,
	header::after {
		content: none !important;
		display: none !important;
		background: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* The Logo Banner Container */
	#header-banner {
		width: 100%;
		height: 200px;
		/* Place Logo in center, contain it so it floats */
		background: url('../img/logo.png') no-repeat center center;
		background-size: contain;
		border: none;
		/* Ensure no background color behind the logo image */
		background-color: transparent !important;
		box-shadow: none !important;
		margin-bottom: 0 !important;
		position: relative;
	}

	/* Target only the center area */
	#logo-zone {
		display: block;
		width: 320px;
		/* Clickable area restricted to logo width */
		height: 100%;
		margin: 0 auto;
		text-decoration: none;
		cursor: pointer;
	}

	/* Removed unused classes */

	/* Inner Content Wrapper (Sidebar + Main) */
	.body-content {
		display: flex;
		flex: 1;
		flex-direction: row;
		width: 100%;
		background: transparent;
		border: none;
	}

	aside#sidebar {
		width: 250px;
		flex-shrink: 0;
		padding: 20px;
		height: auto;
		border-right: 1px solid var(--glass-border);
		background: transparent;
	}

	main#content {
		flex: 1;
		padding: 20px;
		min-width: 0;
		background: transparent;
	}

	/* Restored Footer Styles */
	footer {
		margin-top: 0 !important;
		padding: 20px;
		text-align: center;
		color: var(--text-muted);
		font-size: 0.9em;
		background: transparent;
		/* Bottom of the window connection */
		border: none;
		border-top: 1px solid var(--glass-border);
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}

	.horizontal-table tr,
	.vertical-table tr,
	.generic-form-table tr,
	.horizontal-table td,
	.vertical-table td,
	.generic-form-table td {
		vertical-align: middle;
	}

	.horizontal-table th,
	.vertical-table th,
	.generic-form-table th {
		vertical-align: top;
	}

	h2 {
		color: #444;
		letter-spacing: -1px;
	}

	h3 {
		/*font-style: italic;*/
		font-weight: normal;
		font-size: 120%;
		color: #444;
		border-bottom: 1px dotted #ddd;
		text-transform: uppercase;
	}

	h3:first-letter {
		font-weight: bold;
	}

	p {
		margin: 4px 0 8px 0;
		padding: 0;
	}

	/* Layout Containers */
	.flux-container {
		width: 95%;
		max-width: 1600px;
		/* Wider but not full stretch */
		margin: 0 auto;
		padding: 20px;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	/* Sidebar Menu */
	.sidebar-menu {
		margin-bottom: 20px;
	}

	.sidebar-menu h3 {
		background: rgba(0, 0, 0, 0.4);
		padding: 10px;
		margin: 0 0 5px 0;
		border-radius: 4px;
		font-size: 0.9em;
		font-weight: bold;
		color: var(--accent-color);
		text-transform: uppercase;
		border-bottom: 2px solid var(--primary-color);
	}

	.menu-category {
		margin-bottom: 15px;
	}

	/* Login Box */
	.login-box {
		background: rgba(255, 255, 255, 0.05);
		padding: 15px;
		border-radius: 4px;
		margin-bottom: 20px;
		border: 1px solid var(--glass-border);
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.login-info {
		margin-bottom: 0;
		text-align: right;
		width: 100%;
	}

	.loginbox-admin-menu {
		text-align: left;
		margin-bottom: 0;
		font-size: 0.9em;
		width: 100%;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding-top: 10px;
	}

	/* Responsive Adjustments */
	@media (max-width: 768px) {
		.main-body {
			flex-direction: column;
		}

		aside#sidebar {
			width: 100%;
			margin-bottom: 20px;
		}

		.login-info,
		.loginbox-admin-menu {
			text-align: center;
		}
	}

	/* Typography & Headings */
	h2 {
		color: var(--primary-color);
		border-bottom: 2px solid var(--glass-border);
		padding-bottom: 10px;
		margin-bottom: 20px;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	h3 {
		color: var(--accent-color);
		font-weight: 400;
		margin-top: 20px;
		margin-bottom: 10px;
		border-bottom: 1px dotted var(--glass-border);
	}

	footer {
		margin-top: 20px;
		padding: 10px;
		text-align: center;
		font-size: 1em;
		color: rgba(255, 255, 255, 0.5);
	}

	a {
		color: var(--link-color);
		text-decoration: none;
		transition: color 0.2s;
	}

	a:hover {
		color: var(--link-hover);
		text-decoration: underline;
	}

	/* Forms & Inputs */
	input[type=text],
	input[type=password],
	input[type=file],
	textarea,
	select {
		background: rgba(0, 0, 0, 0.3);
		border: 1px solid var(--glass-border);
		color: var(--text-color);
		padding: 8px 12px;
		border-radius: 4px;
		font-family: inherit;
	}

	input[type=text]:focus,
	input[type=password]:focus,
	textarea:focus,
	select:focus {
		outline: none;
		border-color: var(--primary-color);
		background: rgba(0, 0, 0, 0.5);
	}

	button,
	input[type=submit],
	.submit_button {
		background: var(--primary-color);
		color: white;
		border: none;
		padding: 10px 20px;
		border-radius: 4px;
		cursor: pointer;
		font-weight: bold;
		text-transform: uppercase;
		transition: background 0.2s;
		width: auto;
		display: inline-block;
	}

	button:hover,
	input[type=submit]:hover,
	.submit_button:hover {
		background: var(--link-hover);
	}

	/* Sidebar & Navigation */
	#sidebar table {
		width: 100%;
	}

	.menuitem {
		margin-bottom: 5px;
	}

	.menuitem strong {
		display: block;
		padding: 10px;
		background: rgba(255, 255, 255, 0.05);
		color: var(--accent-color);
		text-transform: uppercase;
		font-size: 0.85em;
		letter-spacing: 1px;
		border-radius: 4px;
		margin-bottom: 5px;
	}

	.menuitem a {
		display: block;
		padding: 8px 15px;
		color: var(--text-muted);
		border-left: 3px solid transparent;
		transition: all 0.2s;
	}

	.menuitem a:hover {
		background: rgba(255, 255, 255, 0.05);
		color: var(--text-color);
		border-left-color: var(--primary-color);
		text-decoration: none;
	}

	/* Tables */
	table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 20px;
	}

	th,
	td {
		padding: 12px;
		text-align: left;
		border-bottom: 1px solid var(--glass-border);
	}

	th {
		background: rgba(0, 0, 0, 0.2);
		color: var(--primary-color);
		font-weight: 600;
		text-transform: uppercase;
		font-size: 0.85em;
	}

	tr:hover td {
		background: rgba(255, 255, 255, 0.02);
	}

	/* Messages */
	.message {
		background: rgba(46, 204, 113, 0.1);
		border: 1px solid rgba(46, 204, 113, 0.4);
		color: #2ecc71;
		padding: 15px;
		border-radius: 4px;
		margin-bottom: 20px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}

	.error,
	.red {
		background: rgba(231, 76, 60, 0.1);
		border: 1px solid rgba(231, 76, 60, 0.4);
		color: #e74c3c;
		padding: 15px;
		border-radius: 4px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}

	.notice {
		background: rgba(52, 152, 219, 0.1);
		border: 1px solid rgba(52, 152, 219, 0.4);
		color: #3498db;
		padding: 15px;
		border-radius: 4px;
		margin-bottom: 20px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}

	/* Login Box */
	.loginbox-admin-menu {
		text-align: right;
		margin-bottom: 10px;
		font-size: 0.9em;
	}

	#loginbox {
		margin-bottom: 20px;
	}

	/* Footer */
	#copyright,
	#info {
		margin-bottom: 10px;
	}

	.footer-option {
		display: inline-block;
		margin: 0 10px;
	}

	.footer-option select {
		width: auto;
		padding: 4px;
		background: rgba(0, 0, 0, 0.5);
	}

	/* Utility Classes */
	.right {
		text-align: right;
	}

	.center {
		text-align: center;
	}

	/* Shop Specific */
	.shop-item-image {
		background: rgba(0, 0, 0, 0.2);
		padding: 10px;
		border-radius: 4px;
	}

	.cost {
		color: var(--accent-color);
		font-weight: bold;
	}

	/* Fixes for specific components */
	.horizontal-table,
	.vertical-table {
		width: 100%;
	}

	.table-responsive {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-bottom: 15px;
		border-radius: 4px;
	}

	.pages {
		text-align: center;
		margin-top: 20px;
	}

	.pages a {
		padding: 5px 10px;
		background: rgba(255, 255, 255, 0.05);
		margin: 0 2px;
		border-radius: 4px;
	}

	.pages .current-page {
		background: var(--primary-color);
		color: white;
		padding: 5px 10px;
		border-radius: 4px;
	}



	.cart label {
		display: block;
	}

	.cart h4 {
		margin: 10px 0 2px 0;
		font-size: 140%;
	}

	.remove-from-cart {
		width: 100%;
		text-align: right;
	}

	.checkout-text {
		font-size: 120%;
		font-weight: bold;
	}

	.checkout-text a {
		border-bottom: 1px dotted #ccc;
	}

	.checkout-text a:hover {
		color: #000;
		border-bottom: 1px solid #aaa;
	}

	.enter-donation-amount {
		margin: 0;
		padding: 0 0 5px 0;
		font-size: 120%;
	}

	.donation-amount-text {
		margin: 0;
		padding: 0;
		font-size: 120%;
		text-align: center;
	}

	.credit-amount-text {
		font-size: 8pt;
		text-transform: uppercase;
		color: #bbb;
		text-align: center;
		letter-spacing: 1px;
	}

	.donation-amount {
		font-weight: bold;
		color: var(--text-color);
	}

	.credit-amount {
		color: var(--text-color);
	}

	.reset-amount-text {
		margin: 0;
		padding: 0;
		font-size: 8pt;
		text-align: center;
	}

	.checkout-info-text {
		margin: 0 0 5px 0;
		padding: 0;
	}

	.remaining-balance {
		color: var(--accent-color);
		font-weight: bold;
	}

	.exchange-rate {
		font-size: 120%;
		font-weight: bold;
		color: var(--text-color);
	}

	.important {
		font-size: 120%;
		color: var(--text-color);
	}

	.important .server-name {
		font-weight: bold;
	}

	/* Search Form Grid Layout */
	.search-form {
		background: rgba(255, 255, 255, 0.05);
		padding: 20px;
		border-radius: 4px;
		border: 1px solid var(--glass-border);
		margin-bottom: 20px;
	}

	.search-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 15px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
		color: var(--accent-color);
	}

	.search-actions {
		flex-direction: row;
		align-items: flex-end;
		gap: 10px;
	}

	.search-actions input {
		width: auto;
	}

	.generic-form {
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.05) !important;
		/* Force dark background */
		border: 1px solid var(--glass-border);
		width: auto;
		color: var(--text-color);
	}

	.generic-form-div {
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.05) !important;
		/* Force dark background */
		border: 1px solid var(--glass-border);
		width: auto;
		color: var(--text-color);
	}

	.generic-form-table {
		background: transparent !important;
	}

	.generic-form-table th label {
		display: block;
		padding: 6px;
	}

	.generic-form-table td div {
		display: block;
		padding: 6px 0;
	}

	.generic-form-table th {
		text-align: right;
	}

	.generic-form-table td input[type=checkbox] {
		display: inline-block;
		margin-top: 6px;
	}

	.generic-form-table td p {
		margin: 6px 5px;
		color: var(--text-color);
	}

	.security-code {
		margin: 5px 0;
		text-align: left;
		width: 145px;
		height: 50px;
	}

	.action {
		color: #ddd;
	}

	.action a,
	.action span.anchor {
		color: #80a2c8;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.block-link {
		display: block;
		padding: 3px;
		color: #80a2c8;
		border-bottom: 1px solid #eee;
	}

	.button-action {
		padding: 5px 0;
		text-align: left;
	}

	.woe-table {
		border-spacing: 0;
		border-collapse: collapse;
		background-color: rgba(255, 255, 255, 0.05);
		/* Dark background */
		border: 1px solid var(--glass-border);
	}

	.woe-table th,
	.woe-table td {
		padding: 5px 10px;
		color: var(--text-color);
	}

	.woe-table th {
		font-weight: normal;
		border-bottom: 1px solid var(--glass-border);
	}

	.woe-table td {
		font-size: 120%;
	}

	.woe-table .server {
		font-weight: bold;
		color: var(--primary-color);
	}

	.woe-table .time {
		font-style: italic;
		color: var(--text-muted);
	}

	.script {
		width: 98%;
	}

	.multi-select {
		width: 100%;
	}

	.jump-to-page {
		margin-top: 8px;
		font-size: 8pt;
		text-align: center;
	}

	.jump-to-page input {
		padding: 2px;
		font-size: 8pt;
		width: 40px !important;
		display: inline-block;
	}

	.top-ranked td {
		font-weight: bold;
		color: var(--text-color);
		background-color: rgba(255, 248, 220, 0.1);
		/* Darker cream */
	}

	.top-ranked a {
		color: var(--text-color);
		border-bottom: 1px dotted #666;
	}

	.empty-row {
		display: none;
	}

	.item-drop-mvp td {
		color: var(--text-color);
		background-color: rgba(248, 248, 255, 0.1);
		/* Darker ghostwhite */
	}

	.item-drop-card td {
		color: var(--text-color);
		background-color: rgba(240, 255, 255, 0.1);
		/* Darker azure */
	}

	.mvp {
		font-size: xx-small;
		font-weight: bold;
		color: #ff5555;
		vertical-align: top;
	}

	.monster-mode {
		margin: 0;
		padding: 0;
		list-style: square inside;
	}

	.monster-mode li {
		padding: 1px;
		border-bottom: 1px dotted #eee;
	}

	.equipped td {
		background-color: rgba(241, 255, 255, 0.1);
	}

	.job-classes {
		border-spacing: 0;
	}

	.job-classes td {
		padding-right: 10px;
		border-right: 1px solid var(--glass-border);
	}

	.current-shop-category {
		font-weight: bold;
	}

	.normalslotted .equipped {
		color: #25292b;
	}

	.overslotted1 {
		color: #32cd32;
	}

	.overslotted2 {
		color: #00bfff;
	}

	.overslotted3 {
		color: #ffa500;
	}

	.overslotted4 {
		color: #9932cc;
	}

	.hold-hours {
		color: #ffba00;
		font-style: italic;
	}

	/* Submenu */
	#submenu {
		background: rgba(255, 255, 255, 0.05);
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 20px;
		border: 1px solid var(--glass-border);
		color: var(--text-muted);
	}

	#submenu a {
		margin: 0 5px;
		color: var(--link-color);
	}

	#submenu a:hover {
		color: var(--link-hover);
	}

	.current-sub-menu {
		font-weight: bold;
		color: var(--accent-color) !important;
	}

	/* Donate Page Styles */
	.donate-main-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		margin: 20px 0;
	}

	.donate-col-left,
	.donate-col-right {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	@media (max-width: 768px) {
		.donate-main-grid {
			grid-template-columns: 1fr;
		}
	}

	.donate-info-box {
		background: rgba(33, 150, 243, 0.1);
		padding: 15px;
		/* margin: 20px 0; Removed margin for grid layout */
		border-left: 4px solid #2196F3;
		border-radius: 4px;
		color: var(--text-color);
		flex: 1;
	}

	.donate-info-box h3 {
		margin-top: 0;
		color: #64b5f6;
	}

	.donate-warning-box {
		background: rgba(255, 193, 7, 0.1);
		padding: 15px;
		margin: 20px 0;
		border-left: 4px solid #ffc107;
		border-radius: 4px;
		color: #ffd54f;
	}

	.donate-success-box {
		background: rgba(76, 175, 80, 0.1);
		padding: 15px;
		/* margin: 20px 0; Removed margin for grid layout */
		border-left: 4px solid #4CAF50;
		border-radius: 4px;
		color: var(--text-color);
	}

	.donate-crypto-box {
		padding: 15px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid var(--glass-border);
		border-radius: 4px;
		color: var(--text-color);
	}

	/* Increase text size for donate boxes */
	.donate-info-box,
	.donate-success-box,
	.donate-crypto-box {
		font-size: 1.1rem;
	}

	.donate-info-box ol {
		margin: 10px 0 10px 20px;
		padding-left: 20px;
		list-style-type: decimal !important;
		display: block !important;
	}

	.donate-info-box li {
		margin-bottom: 5px;
		list-style-position: outside !important;
		display: list-item !important;
	}

	.donate-info-box h3,
	.donate-crypto-box h3 {
		margin-top: 0;
		color: var(--accent-color);
		font-size: 1.3rem;
		border-bottom: 1px dotted var(--glass-border);
		padding-bottom: 10px;
		margin-bottom: 15px;
	}

	.crypto-security {
		font-size: 0.9rem;
		color: var(--text-muted);
	}

	.donate-button {
		background: #4CAF50;
		color: white;
		border: none;
		padding: 12px 30px;
		font-size: 16px;
		cursor: pointer;
		border-radius: 4px;
		transition: background 0.2s;
	}

	.donate-button:hover {
		background: #43a047;
	}

	.credits-preview {
		margin-left: 10px;
		color: var(--text-muted);
	}

	.credits-preview strong {
		color: var(--accent-color);
	}

	/* Donate Form Box */
	.donate-form-box {
		background: rgba(0, 0, 0, 0.2);
		padding: 20px;
		border-radius: 4px;
		border: 1px solid var(--glass-border);
	}

	.donate-input-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 15px;
	}

	.donate-input-row label {
		font-weight: bold;
		color: var(--primary-color);
		text-transform: uppercase;
		font-size: 0.9em;
		margin-right: 10px;
	}

	.donate-input-row input[type="number"] {
		padding: 8px;
		border-radius: 4px;
		border: 1px solid var(--glass-border);
		background: rgba(255, 255, 255, 0.9);
		width: 120px;
	}

	.donate-button-row {
		display: flex;
		justify-content: flex-start;
		/* Left align button */
	}

	.donate-button-row .donate-button {
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	/* Payment Iframe */
	.payment-iframe-container {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
		background: var(--glass-bg);
		border-radius: 4px;
		padding: 20px;
		border: 1px solid var(--glass-border);
	}

	.payment-iframe {
		width: 100%;
		height: 700px;
		/* Adjust based on NOWPayments widget height */
		border: none;
		border-radius: 4px;
		background: #fff;
		/* Ensure iframe has background if transparent */
	}

	/* Header Styling */
	/* Header Styling - DUPLICATE BLOCK REMOVED */
	/* This was causing the "Double Glass" / "Dark Header" issue by overriding the transparent settings at the top of the file. */

	/* 
    Legacy Header rules removed:
    - header { ... background: var(--glass-bg) ... }
    - #header-banner { ... }
    */

	.donate-input-group .donate-button {
		padding: 10px 25px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		display: block;
	}

	.donate-info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		margin: 20px 0;
	}

	@media (max-width: 768px) {
		.donate-info-grid {
			grid-template-columns: 1fr;
		}
	}

	/* Optimized Widths for Forms and Tables */
	.generic-form,
	.generic-form-div,
	.search-form {
		max-width: 600px;
		margin: 20px auto;
		width: 100%;
	}

	.generic-form.cms-form {
		max-width: 100% !important;
	}

	#server_status {
		max-width: 900px;
		margin: 20px auto;
		width: 100%;
	}

	/* Ensure tables inside these containers fit */
	.generic-form table,
	.generic-form-div table,
	#server_status {
		width: 100%;
	}

	/* Mobile Responsiveness for Optimized Widths */
	@media (max-width: 768px) {

		.generic-form,
		.generic-form-div,
		.search-form,
		#server_status {
			max-width: 100%;
		}
	}


	/* Birthdate Fields Inline */
	.birthdate-fields select {
		width: auto;
		display: inline-block;
		margin-right: 5px;
		max-width: 30%;
	}

	/* Search Grid Layout */
	.search-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 15px;
		align-items: end;
	}

	.form-group {
		display: flex;
		flex-direction: column;
	}

	.form-group label {
		margin-bottom: 5px;
		font-weight: bold;
		color: #ddd;
		/* Ensure visibility on dark bg */
	}

	.form-group input[type="text"],
	.form-group input[type="date"],
	.form-group select {
		width: 100%;
		box-sizing: border-box;
		padding: 8px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		background: rgba(0, 0, 0, 0.5);
		/* Darker background for better readability */
		color: #fff;
		border-radius: 4px;
	}

	/* Date Fields Container Override */
	.date-fields select,
	.date-fields .select2-container,
	.date-time-field select,
	span.date-time-field select,
	.date-time-field .select2-container,
	span.date-time-field .select2-container {
		width: auto !important;
		flex: 1;
		min-width: 70px;
		/* Ensure year/month/day have decent width */
	}

	.search-grid-advanced .search-actions {
		grid-column: 1 / -1;
		display: flex;
		justify-content: flex-end;
		/* Align buttons to the right */
		gap: 10px;
		margin-top: 10px;
	}

	.form-group input:focus,
	.form-group select:focus {
		background: rgba(0, 0, 0, 0.4);
		border-color: rgba(255, 255, 255, 0.5);
		outline: none;
	}

	/* --- Select2 Dark Theme Overrides --- */

	/* Main Container */
	.select2-container--default .select2-selection--single {
		background-color: rgba(0, 0, 0, 0.2) !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
		border-radius: 4px !important;
		height: 38px !important;
		/* Match standard input height */
	}

	/* Text Color */
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: #fff !important;
		line-height: 36px !important;
		padding-left: 12px !important;
	}

	/* Arrow */
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 36px !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		border-color: #fff transparent transparent transparent !important;
	}

	.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
		border-color: transparent transparent #fff transparent !important;
	}

	/* Dropdown Container */
	.select2-dropdown {
		background-color: #2a2a2a !important;
		border: 1px solid #444 !important;
		color: #eee !important;
		z-index: 9999 !important;
		/* Ensure it floats above other elements */
	}

	/* Search Box inside Dropdown */
	.select2-search--dropdown .select2-search__field {
		background-color: #333 !important;
		border: 1px solid #555 !important;
		color: #fff !important;
		border-radius: 3px !important;
	}

	/* Results List */
	.select2-results__option {
		color: #ddd !important;
		padding: 8px 12px !important;
	}

	/* Full width search grid for single input rows */
	.search-grid-full {
		display: flex;
		align-items: flex-end;
		gap: 10px;
		flex-wrap: wrap;
	}

	.search-grid-full .form-group:first-child {
		flex: 1;
		min-width: 200px;
		max-width: 400px;
		/* Keep buttons close to input */
	}

	@media (max-width: 768px) {
		.search-grid-full {
			flex-direction: column;
			align-items: stretch;
		}

		.search-grid-full .form-group:first-child {
			max-width: 100%;
		}
	}

	.search-actions {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: row !important;
		/* Force row to prevent stacking */
		align-items: center;
		gap: 10px;
	}

	.search-grid .search-actions,
	.search-grid-full .search-actions,
	.search-grid-advanced .search-actions {
		grid-column: 1 / -1;
		margin-top: 0;
		margin-bottom: 0;
		/* Align with input bottom */
		padding-bottom: 1px;
		/* Micro-adjustment for border alignment */
	}

	/* Advanced Search Grid (for Account List etc) */
	.search-grid-advanced {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 15px;
		align-items: end;
	}

	.search-grid-advanced .full-width {
		grid-column: 1 / -1;
	}

	/* Hover/Highlight State */
	.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
		background-color: #444 !important;
		color: #fff !important;
	}

	/* Selected State */
	.select2-container--default .select2-results__option--selected {
		background-color: #555 !important;
		color: #fff !important;
	}

	/* Disabled State */
	.select2-container--default.select2-container--disabled .select2-selection--single {
		background-color: #1a1a1a !important;
		cursor: default !important;
	}

	/* Fix for multiple select if used */
	.select2-container--default .select2-selection--multiple {
		background-color: rgba(0, 0, 0, 0.2) !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		background-color: #444 !important;
		border: 1px solid #555 !important;
		color: #fff !important;
	}

	.search-actions {
		grid-column: 1 / -1;
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.search-actions input[type="submit"],
	.search-actions input[type="button"] {
		padding: 8px 20px;
		cursor: pointer;
	}

	/* Specific fix for date fields in FluxCP which generate multiple selects */
	.form-group .date-field select {
		width: auto;
		display: inline-block;
		margin-right: 2px;
	}

	/* Validation Errors */
	.validation-message {
		font-size: 0.85em;
		margin-top: 5px;
		display: none;
		/* Hidden by default */
	}

	.validation-message.error {
		color: #e74c3c;
		display: block;
	}

	.validation-message.success {
		color: #2ecc71;
		display: block;
	}

	input.error {
		border-color: #e74c3c !important;
		background: rgba(231, 76, 60, 0.1) !important;
	}

	input.success {
		border-color: #2ecc71 !important;
		background: rgba(46, 204, 113, 0.1) !important;
	}