/****************************************************************
 ** Stylesheet file for default Flux theme.                    **
 ** MODIFIED FOR LARGER TEXT, MOBILE-FRIENDLY & DARK SIDEBAR   **
 ****************************************************************/

/* Universal Box Sizing */
html {
	box-sizing: border-box;
	font-size: 16px; /* Set base font size */
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0 0 1.5rem 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
	background-color: #fff;
}

table {
	font-family: inherit;
	font-size: 1rem;
	width: 100%;
}

tr, td, th {
	vertical-align: top;
}

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

h2 {
	color: #444;
	letter-spacing: -1px;
	font-size: 1.75rem;
}

h3 {
	font-weight: normal;
	font-size: 1.25rem;
	color: #444;
	border-bottom: 1px dotted #ddd;
	text-transform: uppercase;
	margin-top: 2rem;
}

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

p {
	margin: 0.5rem 0 1rem 0;
	padding: 0;
}

a img {
	border: 0;
}

a {
	color: #007bff;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

input[type=text], input[type=password], input[type=file], textarea, select {
	font-family: inherit;
	padding: 0.75rem;
	font-size: 1rem;
	color: #444;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 100%;
	max-width: 100%;
}

label:hover {
	cursor: pointer;
}

.module-name {
	font-weight: bold;
	font-size: 1.2rem;
}

/* --- Messages & Notices --- */
.message, .notice, .red, .green {
	display: block;
	padding: 1rem;
	margin-bottom: 1rem;
	font-size: 1.1rem;
	border-radius: 4px;
}

.message {
	color: #fff;
	background-color: #343a40;
}

.notice {
	color: #0c5460;
	background-color: #d1ecf1;
	border: 1px solid #bee5eb;
}

.red {
	color: #fff;
	background-color: #dc3545;
}

.green {
	color: #fff;
	background-color: #28a745;
}

.center {
	text-align: center;
}

/* --- Sidebars (Dark Theme) --- */
#admin_sidebar, #sidebar {
	margin-bottom: 1rem;
	border-collapse: collapse;
	border-spacing: 0;
}

#admin_sidebar td.menuitem, #admin_sidebar th.menuitem,
#sidebar td.menuitem, #sidebar th.menuitem {
	display: block;
	font-size: 1rem;
	border-width: 0;
}

/* Common style for both sidebar headers */
#sidebar th.menuitem, #admin_sidebar th.menuitem {
	padding: 0.75rem;
	color: #fff;
	font-size: 1.1rem;
	text-align: center;
	background-color: #343a40; /* Dark header background */
}

/* Common style for both sidebar links */
#sidebar td.menuitem a, #admin_sidebar td.menuitem a {
	display: block;
	padding: 0.75rem 1rem;
	color: #fff;
	text-decoration: none;
	background-color: #495057; /* Dark link background */
	transition: background-color 0.2s ease-in-out;
}

/* Common hover effect for both sidebar links */
#sidebar td.menuitem a:hover, #admin_sidebar td.menuitem a:hover {
	background-color: #5a6268; /* Lighter background on hover */
}


/* --- Tables --- */
.table-container {
	overflow-x: auto; /* Makes table scrollable on mobile */
	width: 100%;
	margin-bottom: 1.5rem;
}

.horizontal-table, .vertical-table, .install_table, #server_status {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #ddd;
}

.horizontal-table th, .vertical-table th, .install_table th, #server_status th {
	padding: 0.75rem;
	background-color: #f2f2f2;
	text-align: left;
}

.horizontal-table td, .vertical-table td, .install_table td, #server_status td {
	padding: 0.75rem;
	background-color: #fff;
	border-top: 1px solid #ddd;
}

.td-checkbox, .td-action {
	text-align: center;
}

/* --- Forms & Buttons --- */
.generic-form, .generic-form-div {
	padding: 1.5rem;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.submit_button {
	display: inline-block;
	margin: 1rem 0;
	padding: 0.75rem 1.5rem;
	background-color: #007bff;
	color: #fff;
	border: 1px solid #007bff;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease-in-out;
}

.submit_button:hover {
	background-color: #0056b3;
	border: 1px solid #0056b3;
}

#register_form input[type=text], #register_form input[type=password],
#login_form input[type=text], #login_form input[type=password],
#register_form select, #login_form select {
	width: 100%; /* Make form elements responsive */
}

/* --- Pagination --- */
.pages {
	margin-top: 1.5rem;
	padding-top: 1rem;
	color: #ccc;
	text-align: center;
	border-top: 1px solid #ddd;
}
.pages a, .pages span {
	padding: 0.5rem 0.75rem;
	margin: 0 0.25rem;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.pages .current-page {
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
	font-weight: bold;
}

/* --- Shop / Cards --- */
.shop-table {
	border-spacing: 0 1rem;
	border-collapse: separate;
}
.shop-table td {
	padding: 1rem;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.shop-item-name {
	font-size: 1.5rem;
	color: #222;
	border-bottom: 1px solid #eee;
	margin: 0 0 0.5rem 0;
	padding: 0 0 0.25rem 0;
}
.cost {
	font-size: 1.25rem;
}
textarea {
	width: 100%;
	min-height: 150px;
}

/* --- Statuses & Misc --- */
.up {
	font-weight: bold;
	color: #28a745;
	text-transform: uppercase;
}
.down {
	font-weight: bold;
	color: #dc3545;
	text-transform: uppercase;
}
.state-pending { color: #ffc107; }
.state-banned { color: #dc3545; }
.state-permanently-banned { font-weight: bold; color: #dc3545; }
.online { color: #28a745; }
.offline { color: #6c757d; }
.not-applicable { font-style: italic; color: #bbb; }
.credit-balance {
	padding: 1rem;
	color: #000;
	background-color: #eee;
	border: 1px dotted #ddd;
	margin-bottom: 1rem;
}
#copyright p, #info p {
	font-size: 0.9rem;
	color: #aaa;
	text-align: center;
	margin-top: 1.5rem;
}

/****************************************************************
 ** MOBILE RESPONSIVE STYLES                                   **
 ** (For screens 768px and smaller)                            **
 ****************************************************************/
@media screen and (max-width: 768px) {
	body {
		-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
	}

	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.15rem; }

	/* Force sidebar to be full-width and stack */
	#admin_sidebar, #sidebar {
		width: 100%;
		margin-bottom: 1.5rem;
	}

	/* Force shop items to stack vertically */
	.shop-table, .shop-table tbody, .shop-table tr, .shop-table td {
		display: block;
		width: 100%;
	}
	.shop-item-image, .shop-item-cost-qty {
		width: 100%;
		text-align: center;
		margin-bottom: 1rem;
	}
	.shop-item-image img {
		max-width: 100px;
		height: auto;
	}
	
	/* Adjust generic form for better stacking */
	.generic-form-table th, .generic-form-table td {
		display: block;
		width: 100%;
		text-align: left;
	}
	.generic-form-table th label {
		padding: 0.5rem 0;
	}

	/* Handle floated elements */
	.credit-balance {
		float: none;
		text-align: center;
	}

	#copyright p, #info p {
		text-align: center;
	}
}

/****************************************************************
 ** CUSTOM BACKGROUND IMAGE                                    **
 ****************************************************************/
body {
    background: url('../img/backgroundimage2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}