/* General Body and HTML Styling */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
@font-face {
font-family: 'Eurostile Regular';
src: local('Eurostile Regular'), url('src/eurostile.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'EuroStyle Normal';
font-style: normal;
font-weight: normal;
src: local('EuroStyle Normal'), url('src/EuroStyle Normal.woff') format('woff');
}
/* Light Theme (Default) */
html, body {
height: 100%; margin: 0; padding: 0; font-family: 'Eurostile Regular', sans-serif;
background-color: #f8f9fa; color: #333333; line-height: 1.6;
display: flex; flex-direction: column; overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
}
body a { color: #D4AF37; text-decoration: none; transition: color 0.3s ease; }
body a:hover { color: #b89a2e; text-decoration: underline; }
#wrapper { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.page { position: relative; width: 100%; padding-top: 70px; /* Adjusted by JS */ display: flex; align-items: center; justify-content: center; text-align: center; flex-grow: 1; }
/* Make the main content area grow to fill any available space */
main.page {
flex-grow: 1;
}
/* --- Top Navigation Bar --- */
#top-nav {
position: fixed; top: 0; left: 0; width: 100%; min-height: 65px;
background-color: #ffffff; border-bottom: 1px solid #e0e0e0;
display: flex; justify-content: space-between; align-items: center;
padding: 0 15px; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}
.nav-left { flex-shrink: 0; z-index: 1001; display: flex; align-items: center; }
.nav-left .nc-logo img { height: 40px; display: block; }
.nav-toggle-button {
display: none; background: none; border: none; color: #555555;
font-size: 1.6em; cursor: pointer; padding: 8px 12px; margin-left: 10px; z-index: 1005;
}
.nav-collapsible-content { display: flex; align-items: center; flex-grow: 1; justify-content: space-between; }
.nav-collapsible-content .nav-center { display: flex; justify-content: center; flex-grow: 1; }
.nav-collapsible-content .nav-center ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 25px; }
.nav-collapsible-content .nav-center ul li a {
color: #555555; font-size: 1.0em; font-weight: bold; padding: 0 1px;
white-space: nowrap; transition: color 0.3s ease;
}
.nav-collapsible-content .nav-center ul li a:hover { color: #D4AF37; }
.nav-collapsible-content .nav-center ul li a.nav-admin-link { color: #D4AF37; }
.nav-collapsible-content .nav-right-items {
display: flex;
align-items: center;
flex-shrink: 0;
}
.nav-right-items .create-account, .nav-right-items .login {
font-size: 0.95em; padding: 7px 12px; white-space: nowrap; border-radius: 5px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.nav-right-items .create-account {
margin-right: 8px; background-color: #D4AF37; color: #ffffff; border: 1px solid #D4AF37;
}
.nav-right-items .create-account:hover { background-color: #b89a2e; color: #ffffff; text-decoration: none; }
.nav-right-items .login { border: 1px solid #4A90E2; color: #4A90E2; }
.nav-right-items .login:hover { background-color: #4A90E2; color: #ffffff; text-decoration: none; }
/* Server Status Dropdown in Nav Right */
.nav-right-items .server-status-nav-item {
position: relative; /* For dropdown positioning */
margin-right: 10px;
}
a.server-status-main-link {
font-size: 0.98em;
font-weight: bold;
padding: 7px 10px;
white-space: nowrap;
border-radius: 5px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
color: #555555;
border: 1px solid transparent;
}
a.server-status-main-link:hover {
color: #D4AF37;
}
.status-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-left: 5px;
margin-right: 9px;
flex-shrink: 0;
}
.status-dot-online { background-color: #28a745; } /* Green */
.status-dot-offline { background-color: #dc3545; } /* Red */
.status-dot-checking { background-color: #ffc107; } /* Yellow for N/A */
.nav-right-items .server-status-nav-item .servers-status-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
left: auto;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 0 0 5px 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 1010;
min-width: 250px;
padding: 10px;
text-align: left;
}
.nav-right-items .server-status-nav-item:hover .servers-status-dropdown,
.nav-right-items .server-status-nav-item:focus-within .servers-status-dropdown {
display: block;
}
.dropdown-server-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 5px;
border-bottom: 1px solid #f0f0f0;
font-size: 0.9em;
}
.dropdown-server-item:last-of-type {
/* border-bottom: none; /* View All link has top border, so this might not be needed */
}
.dropdown-server-item .server-name-dropdown {
flex-grow: 1;
color: #333333;
padding-right: 10px;
}
.dropdown-server-item .status-indicator { /* Uses global .status-online/.status-offline */
padding: 3px 8px;
font-size: 0.85em;
border-radius: 4px;
white-space: nowrap;
}
.dropdown-status-unavailable {
padding: 10px 5px;
color: #777777;
font-size: 0.9em;
text-align: center;
}
.dropdown-view-all-servers {
display: block;
text-align: center;
padding: 10px 5px 5px 5px;
font-size: 0.85em;
color: #D4AF37;
text-decoration: none;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
.dropdown-view-all-servers:hover {
text-decoration: underline;
color: #b89a2e;
}
/* End Server Status Dropdown */
.nav-right-actions { display: flex; align-items: center; flex-shrink: 0; margin-left: 15px; z-index:1005; }
.theme-toggle-button {
background: none; border: none; color: #555555; font-size: 1.4em;
cursor: pointer; padding: 5px; transition: color 0.3s ease;
}
.theme-toggle-button:hover { color: #D4AF37; }
/* Main Content & Other styles ... */
#main-content-section { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #f8f9fa; background-size: cover; background-position: center; background-repeat: no-repeat; flex-direction: column; flex-grow: 1; transition: background-color 0.3s ease, color 0.3s ease; }
#main-content-section .content { position: relative; z-index: 5; padding: 20px; background-color: transparent; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1200px; margin: 0 auto; flex-grow: 1; }
.background-image.bg-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; opacity: 0.05; transition: opacity 0.3s ease; }
.container { width: 90%; max-width: 650px; margin: auto; background-color: #ffffff; border: 1px solid #d1d1d1; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; flex-grow: 0; z-index: 2; padding: 20px; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; }
header { text-align: center; padding: 15px 20px; border-bottom: 1px solid #eeeeee; color: #333333; transition: border-bottom-color 0.3s ease, color 0.3s ease; }
header h1 { font-family: 'Eurostile Regular', sans-serif; font-size: 2.5em; color: #D4AF37; margin-bottom: 5px; text-shadow: none; }
header p { font-size: 1.1em; color: #555555; margin-top: 0; margin-bottom: 10px; transition: color 0.3s ease; }
.form-section { padding: 25px 30px; flex-grow: 1; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; transition: color 0.3s ease; }
.form-section h2, .form-section h3 { text-align: center; font-family: 'Eurostile Regular', sans-serif; color: #3b5998; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; text-shadow: none; transition: color 0.3s ease; }
.form-section h2 { font-size: 2em; } .form-section h3 { font-size: 1.5em; color: #4a5a7e; }
.form-group { margin-bottom: 18px; width: 100%; max-width: 450px; text-align: left; }
.form-group label { display: block; margin-bottom: 6px; color: #495057; font-weight: bold; font-size: 0.95em; transition: color 0.3s ease; }
.form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 10px; background-color: #f8f9fa; border: 1px solid #ced4da; border-radius: 5px; color: #495057; font-size: 1em; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease; }
.form-group input[type="text"]:focus, .form-group input[type="password"]:focus, .form-group input[type="email"]:focus, .form-group textarea:focus { border-color: #D4AF37; outline: none; box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25); }
.form-group textarea { min-height: 120px; } .help-block { color: #dc3545; font-size: 0.875em; margin-top: 4px; display: block; text-align: left; }
.form-group.has-error input, .form-group.has-error textarea { border-color: #dc3545; }
.error-message, .success-message, .info-message { padding: 12px 15px; margin-bottom: 20px; border-radius: 5px; font-weight: normal; font-size: 0.95em; width: 100%; max-width: 450px; text-align: left; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .success-message { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .info-message { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.btn { display: inline-block; padding: 10px 20px; background-color: #D4AF37; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; text-transform: uppercase; text-decoration: none; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease, color 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.btn:hover { background-color: #b89a2e; color: #ffffff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); transform: translateY(-1px); }
.btn:active { transform: translateY(0px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .btn.logout-btn { background-color: #7F8C8D; color: #ffffff; } .btn.logout-btn:hover { background-color: #6c7a7b; color: #ffffff; } .btn.disabled-btn { opacity: 0.65; cursor: not-allowed; background-color: #cccccc; color: #666666; box-shadow: none; } .btn.disabled-btn:hover { background-color: #cccccc; transform: none; color: #666666; } .form-group.submit-button-container { display: flex; justify-content: center; margin-top: 25px; margin-bottom: 0; width: 100%; max-width: none; } .register-link { text-align: center; margin-top: 20px; padding-bottom: 15px; color: #555555; font-size: 0.9em; transition: color 0.3s ease; } .register-link a { color: #4A90E2; font-weight: bold; } .register-link a:hover { text-decoration: underline; color: #3b73b8; }
.character-table-container { width: 100%; max-width: 100%; overflow-x: auto; margin-bottom: 25px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #ffffff; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: background-color 0.3s ease, border-color 0.3s ease; }
.character-table { width: 100%; border-collapse: collapse; margin-top: 0; } .character-table th, .character-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #f1f1f1; color: #333333; transition: color 0.3s ease, border-bottom-color 0.3s ease; } .character-table th { background-color: #f8f9fa; font-family: 'Eurostile Regular', sans-serif; font-weight: bold; color: #D4AF37; text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.05em; transition: background-color 0.3s ease, color 0.3s ease; } .character-table tr:hover { background-color: #f1f8ff; transition: background-color 0.2s ease; } .character-table tbody tr:last-child td { border-bottom: none; } .character-table td .btn { padding: 6px 12px; font-size: 0.85em; }
.news-entry { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px 25px; margin-bottom: 25px; text-align: left; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07); width: 100%; max-width: 800px; transition: background-color 0.3s ease, border-color 0.3s ease; color: #333333; } .news-entry h3 { font-family: 'Eurostile Regular', sans-serif; color: #D4AF37; font-size: 1.8em; margin-top: 0; margin-bottom: 8px; text-align: left; } .news-entry .news-date { font-size: 0.9em; color: #777777; margin-bottom: 15px; font-style: italic; text-align: left; transition: color 0.3s ease; } .news-entry .news-content-html, .news-entry > p { font-size: 1em; color: inherit; line-height: 1.7; text-align: left; transition: color 0.3s ease; } .news-entry .news-content-html img { max-width: 100%; height: auto; border-radius: 4px; } .news-entry .news-content-html p { margin-bottom: 1em; color: inherit; } .news-entry .news-content-html a { color: #4A90E2; } .news-entry .news-content-html a:hover { color: #3b73b8; } .news-entry form { margin-top: 15px; text-align: left; }
.action-buttons { text-align: center; margin-top: 25px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; } .action-buttons .btn { margin: 0; }
.account-info { text-align: left; margin-bottom: 25px; padding: 15px; background-color: #e9f5ff; border: 1px solid #b8d6eb; border-radius: 5px; color: #004085; width: 100%; max-width: 550px; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .account-info p { margin: 8px 0; font-size: 1em; color: inherit; } .account-info strong { color: #003366; transition: color 0.3s ease; } .account-info em { font-size: 0.9em; color: #005c99; transition: color 0.3s ease; }
.premium-details { text-align: left; margin-bottom: 25px; padding: 15px; background-color: #fff8e1; border: 1px solid #ffecb3; border-radius: 5px; color: #856404; width: 100%; max-width: 550px; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .premium-details p, .premium-details ul { margin: 8px 0; font-size: 1em; color: inherit;} .premium-details ul { list-style-position: inside; padding-left: 0; } .premium-details li { margin-bottom: 5px; color: inherit;} .premium-details strong { color: #664d03; transition: color 0.3s ease; }
.login-input-group { display: flex; align-items: center; } .login-input-group .prefix-input { width: 70px !important; text-align: center; margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; flex-grow: 0; flex-shrink: 0; } .login-input-group .refresh-button { background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; border-left: 0; padding: 9px 12px; cursor: pointer; border-top-right-radius: 5px; border-bottom-right-radius: 5px; font-size: 1em; line-height: 1.2; height: 40px; transition: background-color 0.2s ease, color 0.3s ease, border-color 0.3s ease; } .login-input-group .refresh-button:hover { background-color: #dde2e6; } .login-input-group .login-suffix-input { flex-grow: 1; width: auto !important; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } .form-group label small { display: block; font-size: 0.8em; color: #6c757d; font-weight: normal; margin-top: 3px; text-align: left; transition: color 0.3s ease; }
.password-input-group { display: flex; align-items: center; } .password-input-group .form-control { flex-grow: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; } .password-toggle-btn { background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; border-left: 0; padding: 9px 12px; cursor: pointer; border-top-right-radius: 5px; border-bottom-right-radius: 5px; height: 40px; transition: background-color 0.2s ease, color 0.3s ease, border-color 0.3s ease; } .password-toggle-btn:hover { background-color: #dde2e6; }
.copy { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; padding: 15px; background-color: #e9ecef; border-top: 1px solid #dee2e6; z-index: 10; transition: background-color 0.3s ease, border-top-color 0.3s ease; } .copy p { font-size: 0.9em; color: #6c757d; margin: 0; text-align: center; transition: color 0.3s ease; }
.form-section hr { border: 0; height: 1px; background: #e0e0e0; margin: 20px auto; width: 80%; transition: background-color 0.3s ease; } .form-section > ul { text-align: left; display: inline-block; padding-left: 20px; margin-bottom: 20px; }
.inventory-display ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; list-style-type: none; padding: 0; margin: 0 auto; max-width: 100%; } .inventory-display li { background-color: #f8f9fa; padding: 10px; border-radius: 5px; border: 1px solid #e0e0e0; text-align: left; word-wrap: break-word; font-size: 0.95em; color: #333; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.tox-tinymce { border: 1px solid #ced4da !important; border-radius: 5px !important; transition: border-color 0.3s ease; } .tox .tox-edit-area__iframe { background-color: #ffffff !important; transition: background-color 0.3s ease; }
/* Widget Styles */
.widget-grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px; width: 100%; max-width: 1200px; margin: 0 auto; }
.widget-item { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.07); display: flex; flex-direction: column; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; color: #333333; }
.widget-span-1 { grid-column: span 1; } .widget-span-2 { grid-column: span 2; } .widget-span-3 { grid-column: span 3; } .widget-span-4 { grid-column: span 4; }
.widget-item h3.widget-title { font-family: 'Eurostile Regular', sans-serif; color: #D4AF37; font-size: 1.4em; margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; text-align: left; transition: color 0.3s ease, border-bottom-color 0.3s ease; }
.widget-item .widget-content { font-size: 0.95em; line-height: 1.6; text-align: left; flex-grow: 1; color: inherit; }
.widget-item .widget-content p { margin-bottom: 10px; color: inherit; } .widget-item .widget-content ul { list-style: none; padding-left: 0; } .widget-item .widget-content li { margin-bottom: 8px; padding-left: 20px; position: relative; color: inherit; }
.widget-item .widget-content li::before { content: "\f105"; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; color: #D4AF37; }
.widget-news-item { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #efefef; transition: border-bottom-color 0.3s ease; }
.widget-news-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.widget-news-item h4 a { font-size: 1.1em; color: #3b5998; text-decoration: none; font-weight: bold; transition: color 0.3s ease; }
.widget-news-item h4 a:hover { color: #D4AF37; }
.widget-news-item .news-widget-date { font-size: 0.8em; color: #777777; margin-bottom: 5px; display: block; transition: color 0.3s ease; }
/* Global Server Status Indicators (used in dropdown and potentially elsewhere) */
.status-indicator { /* Base style if needed, specific styles below are more common */
padding: 3px 8px;
font-size: 0.85em;
border-radius: 4px;
font-weight: bold; /* Moved from home.php specific style */
white-space: nowrap;
}
.status-online { background-color: #d4edda; color: #155724; }
.status-offline { background-color: #f8d7da; color: #721c24; }
.status-checking { background-color: #fff3cd; color: #856404; } /* For N/A or initial check */
.download-links-widget .download-link { display: block; padding: 8px 0; text-decoration: none; font-weight: bold; }
.download-links-widget .download-link i { margin-right: 8px; color: #D4AF37; }
/* --- Dark Mode Styles --- */
body.dark-mode { background-color: #1a1a1a !important; color: #e0e0e0 !important; }
body.dark-mode a { color: #D4AF37; } body.dark-mode a:hover { color: #f0c040; }
body.dark-mode #top-nav { background-color: #2b2b2b; border-bottom: 1px solid #383838; }
body.dark-mode .nav-toggle-button { color: #c0c0c0; }
body.dark-mode .theme-toggle-button { color: #c0c0c0; } body.dark-mode .theme-toggle-button:hover { color: #D4AF37; }
body.dark-mode .nav-collapsible-content .nav-center ul li a { color: #c0c0c0; }
body.dark-mode .nav-collapsible-content .nav-center ul li a:hover { color: #D4AF37; }
body.dark-mode .nav-collapsible-content .nav-center ul li a.nav-admin-link { color: #D4AF37; }
body.dark-mode .nav-collapsible-content .nav-right-items .create-account { background-color: #D4AF37; color: #1a1a1a !important; border-color: #D4AF37; }
body.dark-mode .nav-collapsible-content .nav-right-items .create-account:hover { background-color: #b89a2e; }
body.dark-mode .nav-collapsible-content .nav-right-items .login { border: 1px solid #58a6ff; color: #58a6ff !important; }
body.dark-mode .nav-collapsible-content .nav-right-items .login:hover { background-color: #58a6ff; color: #1e1e1e !important; }
/* Dark Mode: Server Status Dropdown in Nav Right */
body.dark-mode a.server-status-main-link { color: #c0c0c0; }
body.dark-mode a.server-status-main-link:hover { color: #D4AF37; }
/* Status dot colors are global, should work fine in dark mode too */
body.dark-mode .nav-right-items .server-status-nav-item .servers-status-dropdown {
background-color: #2b2b2b;
border-color: #383838;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
body.dark-mode .dropdown-server-item { border-bottom-color: #3a3f44; }
body.dark-mode .dropdown-server-item .server-name-dropdown { color: #c0c0c0; }
body.dark-mode .dropdown-status-unavailable { color: #8e9297; }
body.dark-mode .dropdown-view-all-servers { color: #D4AF37; border-top-color: #3a3f44; }
body.dark-mode .dropdown-view-all-servers:hover { color: #f0c040; }
/* Dark Mode: Global Server Status Indicators */
body.dark-mode .status-online { background-color: #2f4b37; color: #a7d7af; }
body.dark-mode .status-offline { background-color: #5a3236; color: #f5c6cb; }
body.dark-mode .status-checking { background-color: #574b2e; color: #ffeeba; }
/* End Dark Mode: Server Status Dropdown */
body.dark-mode #main-content-section { background-color: #1a1a1a !important; color: #e0e0e0 !important; }
body.dark-mode .background-image.bg-main { opacity: 0.03; }
body.dark-mode .container { background-color: #2c2f33 !important; border-color: #40454a !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); color: #e0e0e0 !important; }
body.dark-mode header { border-bottom-color: #3a3f44; color: #e0e0e0; } body.dark-mode header p { color: #b0b0b0; }
body.dark-mode .form-section { color: #e0e0e0 !important; }
body.dark-mode .form-section h2, body.dark-mode .form-section h3 { color: #7289da; } body.dark-mode .form-section h3 { color: #8A9BED; }
body.dark-mode .form-group label { color: #b9bbbe; }
body.dark-mode .form-group input[type="text"], body.dark-mode .form-group input[type="password"],
body.dark-mode .form-group input[type="email"], body.dark-mode .form-group textarea { background-color: #202225; border-color: #40444b; color: #dcddde; }
body.dark-mode .form-group input[type="text"]:focus, body.dark-mode .form-group input[type="password"]:focus,
body.dark-mode .form-group input[type="email"]:focus, body.dark-mode .form-group textarea:focus { border-color: #D4AF37; box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.35); }
body.dark-mode .error-message { background-color: #4a2c30; color: #f5c6cb; border-color: #721c24; }
body.dark-mode .success-message { background-color: #2c4a30; color: #c3e6cb; border-color: #155724; }
body.dark-mode .info-message { background-color: #2c444a; color: #bee5eb; border-color: #0c5460; }
body.dark-mode a.btn, body.dark-mode button.btn { background-color: #D4AF37; color: #ffffff !important; }
body.dark-mode a.btn:hover, body.dark-mode button.btn:hover { background-color: #b89a2e; color: #ffffff !important; }
body.dark-mode .btn.logout-btn { background-color: #4f545c; color: #dcddde; } body.dark-mode .btn.logout-btn:hover { background-color: #5c626b; color: #dcddde; }
body.dark-mode .btn.disabled-btn { background-color: #3a3e43; color: #72767d; } body.dark-mode .btn.disabled-btn:hover { background-color: #3a3e43; color: #72767d; }
body.dark-mode .register-link { color: #b0b0b0; } body.dark-mode .register-link a { color: #7289da; } body.dark-mode .register-link a:hover { color: #8A9BED; }
body.dark-mode .character-table-container { border-color: #40454a; background-color: #2c2f33; }
body.dark-mode .character-table th, body.dark-mode .character-table td { border-bottom-color: #3a3f44; color: #dcddde; }
body.dark-mode .character-table th { background-color: #202225; color: #D4AF37; }
body.dark-mode .character-table tr:hover { background-color: #32353b; }
body.dark-mode .news-entry { background-color: #2c2f33; border-color: #40454a; color: #e0e0e0 !important; }
body.dark-mode .news-entry h3 { color: #D4AF37; }
body.dark-mode .news-entry .news-date { color: #8e9297; }
body.dark-mode .news-entry .news-content-html, body.dark-mode .news-entry > p { color: inherit !important; }
body.dark-mode .news-entry .news-content-html p { color: inherit !important; }
body.dark-mode .news-entry .news-content-html a { color: #7289da; } body.dark-mode .news-entry .news-content-html a:hover { color: #8A9BED; }
body.dark-mode .account-info { background-color: #23364e; border-color: #375070; color: #a6c5f7 !important; }
body.dark-mode .account-info p { color: inherit !important; }
body.dark-mode .account-info strong { color: #cce0ff; } body.dark-mode .account-info em { color: #8cb6f0; }
body.dark-mode .premium-details { background-color: #4d402a; border-color: #856404; color: #ffd58a !important; }
body.dark-mode .premium-details p, body.dark-mode .premium-details li { color: inherit !important; }
body.dark-mode .premium-details strong { color: #ffc14d; }
body.dark-mode .login-input-group .refresh-button { background-color: #3a3e43; color: #b9bbbe; border-color: #40444b; }
body.dark-mode .login-input-group .refresh-button:hover { background-color: #474b50; }
body.dark-mode .form-group label small { color: #8e9297; }
body.dark-mode .password-toggle-btn { background-color: #3a3e43; color: #b9bbbe; border-color: #40444b; }
body.dark-mode .password-toggle-btn:hover { background-color: #474b50; }
body.dark-mode .copy { background-color: #202225; border-top-color: #313336; } body.dark-mode .copy p { color: #8e9297; }
body.dark-mode .form-section hr { background: #40454a; } body.dark-mode .form-section > ul { color: #dcddde; }
body.dark-mode .inventory-display li { background-color: #202225; border-color: #40444b; color: #dcddde; }
body.dark-mode .tox-tinymce { border-color: #40444b !important; } body.dark-mode .tox .tox-edit-area__iframe { background-color: #2c2f33 !important; }
/* Dark Mode Widget Styles */
body.dark-mode .widget-item { background-color: #2c2f33; border-color: #40454a; color: #e0e0e0 !important; }
body.dark-mode .widget-item h3.widget-title { color: #D4AF37; border-bottom-color: #3a3f44; }
body.dark-mode .widget-item .widget-content { color: inherit !important; }
body.dark-mode .widget-item .widget-content li::before { color: #D4AF37; }
body.dark-mode .widget-news-item { border-bottom-color: #3a3f44; }
body.dark-mode .widget-news-item h4 a { color: #7289da; } body.dark-mode .widget-news-item h4 a:hover { color: #D4AF37; }
body.dark-mode .widget-news-item .news-widget-date { color: #8e9297; }
/* --- Mobile Navigation Styles --- */
@media (max-width: 768px) {
#top-nav { flex-wrap: wrap; padding: 10px 15px; height: auto; min-height: 0; }
.nav-left { order: 1; margin-right: auto; }
.nav-toggle-button { display: block !important; order: 2; font-size: 1.8em; }
.nav-toggle-button i { display: inline-block; }
.nav-right-actions { order: 3; margin-left: 10px; display: flex !important; align-items: center; }
#theme-toggle.theme-toggle-button { display: block !important; color: #555555; }
body.dark-mode #theme-toggle.theme-toggle-button { color: #c0c0c0; }
.nav-collapsible-content {
display: none;
order: 4;
flex-direction: column;
width: 75%; /* Or your preferred width */
background-color: #ffffff;
position: absolute;
top: 100%; /* Position below the nav bar */
left: auto;
right: 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.1);
z-index: 999; /* Below main nav bar items, above page content */
border-top: 1px solid #e9e9e9;
transition: transform 0.3s ease-in-out; /* Or your preferred transition */
}
.nav-collapsible-content.active { display: flex; } /* Show when active */
body.dark-mode .nav-collapsible-content { background-color: #2b2b2b; border-top-color: #383838; }
.nav-collapsible-content .nav-center,
.nav-collapsible-content .nav-right-items {
width: 100%;
flex-direction: column;
align-items: stretch;
margin-left: 0; padding-left: 0;
}
.nav-collapsible-content .nav-right-items { padding-bottom: 0; } /* Remove bottom padding if items have borders */
.nav-collapsible-content .nav-center ul { flex-direction: column; width: 100%; padding: 0; margin:0; gap: 0px; }
/* Styling for all links within the mobile collapsible menu */
.nav-collapsible-content .nav-center ul li a,
.nav-collapsible-content .nav-right-items a, /* For existing buttons like Login/Register */
.nav-collapsible-content .nav-right-items .server-status-nav-item a.server-status-main-link { /* For new server status link */
display: block;
text-align: left;
margin: 0 !important;
padding: 10px 15px; /* Consistent padding */
border-bottom: 1px solid #f0f0f0;
width: 100%;
color: #555555;
text-decoration: none;
font-size: 1em; /* Consistent font size */
font-weight: normal; /* Reset bold from desktop for some items if needed */
background-color: transparent !important; /* Ensure no button backgrounds are inherited */
border-left: none; border-right: none; border-top: none; /* Clean borders */
border-radius: 0; /* No rounded corners in stacked list */
text-transform: none; /* Reset text transform if any */
}
/* Hover/active states for mobile menu items */
.nav-collapsible-content .nav-center ul li a:hover,
.nav-collapsible-content .nav-right-items a:hover,
.nav-collapsible-content .nav-right-items .server-status-nav-item a.server-status-main-link:hover {
background-color: #f5f5f5 !important;
color: #D4AF37 !important;
}
/* Dark mode for mobile menu items */
body.dark-mode .nav-collapsible-content .nav-center ul li a,
body.dark-mode .nav-collapsible-content .nav-right-items a,
body.dark-mode .nav-collapsible-content .nav-right-items .server-status-nav-item a.server-status-main-link {
border-bottom-color: #383838;
color: #c0c0c0 !important;
}
body.dark-mode .nav-collapsible-content .nav-center ul li a:hover,
body.dark-mode .nav-collapsible-content .nav-right-items a:hover,
body.dark-mode .nav-collapsible-content .nav-right-items .server-status-nav-item a.server-status-main-link:hover {
background-color: #333333 !important;
color: #D4AF37 !important;
}
/* Remove bottom border from the very last item in the collapsible menu */
.nav-collapsible-content > div > *:last-child,
.nav-collapsible-content > div > ul > li:last-child a,
.nav-collapsible-content .nav-right-items > *:last-child a, /* If last item is a direct 'a' */
.nav-collapsible-content .nav-right-items > .server-status-nav-item:last-child a.server-status-main-link, /* If server status is last */
.nav-collapsible-content .nav-right-items > a:last-child { /* If a generic 'a' is last */
border-bottom: none;
}
body.dark-mode .nav-collapsible-content > div > *:last-child,
body.dark-mode .nav-collapsible-content > div > ul > li:last-child a,
body.dark-mode .nav-collapsible-content .nav-right-items > *:last-child a,
body.dark-mode .nav-collapsible-content .nav-right-items > .server-status-nav-item:last-child a.server-status-main-link,
body.dark-mode .nav-collapsible-content .nav-right-items > a:last-child {
border-bottom: none;
}
.nav-collapsible-content .nav-center ul li a.nav-admin-link { color: #D4AF37; font-weight: bold; } /* Keep admin link distinct if needed */
body.dark-mode .nav-collapsible-content .nav-center ul li a.nav-admin-link { color: #D4AF37; }
/* Hide the hover dropdown for server status on mobile */
.nav-right-items .server-status-nav-item .servers-status-dropdown {
display: none !important;
}
.page { /* padding-top is handled by JS, ensure it's sufficient for wrapped nav */ }
.container { width: 95%; margin: 20px auto; padding: 15px; }
.form-section { padding: 20px 15px; } .form-section h2 { font-size: 1.8em; } .form-section h3 { font-size: 1.4em; }
.form-group { max-width: 100%; } .news-entry { padding: 15px; } .news-entry h3 { font-size: 1.5em; }
.widget-grid-container { grid-template-columns: repeat(2, 1fr); } /* Keep this if you have widgets */
.widget-span-4, .widget-span-3 { grid-column: span 2; } /* Keep this for widgets */
}
@media (max-width: 576px) {
.widget-grid-container { grid-template-columns: 1fr; padding: 15px; gap: 15px; } /* Keep this for widgets */
.widget-span-1, .widget-span-2, .widget-span-3, .widget-span-4 { grid-column: span 1; } /* Keep this for widgets */
.widget-item { padding: 15px; } .widget-item h3.widget-title { font-size: 1.2em; } /* Keep this for widgets */
.form-section h2 { font-size: 1.6em; } .form-section h3 { font-size: 1.3em; }
.btn { font-size: 0.9em; padding: 8px 15px; }
.form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group textarea { font-size: 0.95em; }
.nav-left .nc-logo img { height: 35px; }
.nav-collapsible-content { width: 90%; /* Wider dropdown on very small screens */ }
}
/* --- Centering for Login/Register Forms --- */
/*
This targets the