/* Modern Theme for HLstatsX:CE */
/* Enhanced styling that preserves functionality */

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 9pt;
	color: #2c3e50;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	background-attachment: fixed;
	margin: 10px;
}

tr, td, div, span {
	font-family: inherit;
	font-size: 9pt;
}

a:link {
	color: #3498db;
	text-decoration: none;
}

a:visited {
	color: #3498db;
	text-decoration: none;
}

a:active {
	color: #2980b9;
	text-decoration: none;
}

a:hover {
	color: #2980b9;
	text-decoration: underline;
	transition: color 0.2s ease;
}

ul {
	margin-left: 6px;
	padding-left: 6px;
	list-style: none;
}

li {
	margin-bottom: 8px;
}

img {
	text-align: center;
	vertical-align: middle;
	border: none;
}

/* Font classes */
.fSmall {
	font-size: 8pt;
	color: rgba(255, 255, 255, 0.95);
}

.fNormal {
	font-size: 9pt;
}

.fHeading {
	font-size: 9pt;
	font-weight: bold;
	color: #2c3e50;
}

.fTitle {
	font-size: 14pt;
	font-weight: bold;
	color: #2c3e50;
}

/* Background colors for rows */
.bg1 {
	background-color: #FFFFFF;
}

.bg2 {
	background-color: #F8F9FA;
}

/* Main blocks */
.block {
	background: rgba(255, 255, 255, 0.98);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 20px;
}

/* Header block */
.headerblock {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 20px;
	overflow: hidden;
}

.headerblock .title {
	float: left;
}

.headerblock .title img {
	max-height: 50px;
	width: auto;
}

/* Header tabs */
.headertabs {
	float: right;
	margin-top: 10px;
}

.headertabs ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.headertabs li {
	display: inline;
	margin-left: 10px;
}

.headertabs img {
	opacity: 0.9;
	transition: all 0.3s ease;
	max-height: 35px;
}

.headertabs img:hover {
	opacity: 1;
}

/* Games list */
.header_gameslist {
	float: right;
	clear: right;
	margin-top: 10px;
}

#header_gameslist {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header_gameslist li {
	display: inline;
	padding: 0 5px;
}

#header_gameslist img {
	border-radius: 4px;
	transition: all 0.3s ease;
	max-height: 40px;
}

#header_gameslist img:hover {
	opacity: 1;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Location bar */
.location {
	background: white;
	border-radius: 8px;
	padding: 12px 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	overflow: hidden;
	clear: both;
}

.location ul {
	margin: 0;
	padding: 0;
	float: left;
}

.location li {
	display: inline;
	margin-bottom: 0;
}

.location a {
	color: #3498db;
}

.location a:hover {
	color: #2980b9;
}

.location .arrow {
	color: #999;
	margin: 0 5px;
}

/* Style selector */
#style_selection {
	float: right;
}

#style_selection select {
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: white;
	font-size: 8pt;
}

.location_under {
	clear: both;
	height: 0;
}

/* Navigation menu */
nav {
	background: white;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.fancyNav {
	display: inline-block;
	margin: 0;
	padding: 4px 4px 4px 4px;
	list-style: none;
}

.fancyNav li {
	display: inline-block;
	margin: 0 2px;
	padding: 0;
}

.fancyNav li:after {
	display: none !important;
}

.fancyNav a,
.fancyNav a.fHeading {
	display: inline-block;
	padding: 8px 16px;
	background: linear-gradient(135deg, #3498db, #2980b9);
	color: white !important;
	text-decoration: none !important;
	border-radius: 5px;
	font-weight: 500;
	font-size: 9pt;
	transition: all 0.3s ease;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.fancyNav a:hover {
	background: linear-gradient(135deg, #2980b9, #3498db);
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
	color: white !important;
}

/* Content area */
.content {
	clear: both;
}

/* Data tables */
.data-table {
	border-style: solid;
	border-width: 0px;
	border-color: #ddd;
	border-collapse: collapse;
	width: 100%;
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.data-table td {
	border-style: solid;
	border-width: 1px;
	border-color: #e0e0e0;
	padding: 8px;
	text-align: left;
	font-size: 9pt;
}

.data-table-head {
	background: linear-gradient(135deg, #2c3e50, #34495e);
	color: white;
	vertical-align: bottom;
}

.data-table-head td {
	color: white !important;
	font-weight: 600;
	font-size: 8pt;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-color: transparent;
}

.data-table-head a {
	color: white !important;
	text-decoration: none;
}

.data-table-head a:hover {
	text-decoration: underline;
}

/* Game tables */
.game-table-row {
	background-color: white;
}

.game-table-row-hover {
	background-color: #f0f7fd;
}

.game-table-cell {
	padding: 8px;
}

.livestats-table {
	width: 100%;
}

/* Table hover effects - disabled to prevent blinking */
/* .data-table tr:hover td {
	background: #e8f4fd;
} */

/* Forms */
input[type="text"],
input[type="password"],
select,
textarea {
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 9pt;
	transition: all 0.3s ease;
	background: white;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: #3498db;
	outline: none;
	box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

input[type="submit"],
button,
.button {
	display: inline-block;
	padding: 8px 16px;
	background: linear-gradient(135deg, #3498db, #2980b9);
	color: white !important;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 9pt;
	font-weight: 500;
	transition: all 0.3s ease;
	text-decoration: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type="submit"]:hover,
button:hover,
.button:hover {
	background: linear-gradient(135deg, #2980b9, #2471a3);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
	color: white !important;
}

/* Footer */
#footer {
	text-align: center;
	padding: 20px;
	margin-top: 30px;
}

#footer img {
	opacity: 0.8;
	transition: all 0.3s ease;
	filter: brightness(0) invert(1);
}

#footer img:hover {
	opacity: 1;
}

/* Footer text */
#footer + br + .fSmall,
body > .fSmall {
	color: rgba(255, 255, 255, 0.95) !important;
}

body > .fSmall a {
	color: white !important;
	text-decoration: underline;
	opacity: 0.9;
}

body > .fSmall a:hover {
	opacity: 1;
}

/* Subblocks */
.subblock {
	/* background: #f8f9fa;
	border-radius: 6px;
	padding: 15px;
	margin: 15px 0;
	border: 1px solid #e9ecef; */
}

/* Warning messages */
.warning {
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 8px;
	padding: 15px;
	margin: 15px 0;
	color: #856404;
}

.warning .warning-heading {
	font-size: 18px;
	font-weight: bold;
	color: #856404;
	margin-bottom: 5px;
}

/* Status colors */
.status-online {
	color: #27ae60;
	font-weight: bold;
}

.status-offline {
	color: #999;
}

/* Pagination */
.pagination {
	text-align: center;
	margin: 20px 0;
}

.pagination a,
.pagination span {
	display: inline-block;
	padding: 6px 12px;
	margin: 0 2px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 3px;
	text-decoration: none;
	color: #333;
	transition: all 0.3s ease;
}

.pagination a:hover {
	background: #3498db;
	color: white;
	border-color: #3498db;
}

.pagination .current {
	background: #3498db;
	color: white;
	border-color: #3498db;
}

/* Progress bars */
meter {
	width: 100%;
	height: 16px;
	border-radius: 8px;
}

/* Player cards */
.player-card,
.clan-card {
	background: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin: 20px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	body {
		margin: 5px;
	}
	
	.headerblock {
		text-align: center;
		padding: 15px;
	}
	
	.headerblock .title {
		float: none;
		margin-bottom: 10px;
	}
	
	.headertabs {
		float: none;
		margin-top: 10px;
	}
	
	.header_gameslist {
		float: none;
		clear: none;
		text-align: center;
	}
	
	.location ul {
		float: none;
		text-align: center;
	}
	
	#style_selection {
		float: none;
		text-align: center;
		margin-top: 10px;
	}
	
	.fancyNav li {
		display: block;
		border-right: none;
		border-bottom: 1px solid #ddd;
	}
	
	.fancyNav li:last-child {
		border-bottom: none;
	}
	
	.data-table {
		font-size: 8pt;
	}
	
	.data-table td {
		padding: 4px;
		font-size: 8pt;
	}
}

/* Fix clear issues */
.clearfix:after,
.block:after,
.headerblock:after,
.location:after {
	content: "";
	display: table;
	clear: both;
}

/* Banner image */
.block img[alt="Banner"] {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}