/* CSS Variables for theming */
:root {
	--bg-color: #4DC1F9;
	--text-color: #333;
	--sidebar-bg: rgba(255, 255, 255, 0.95);
	--sidebar-text: #333;
	--button-bg: #4DC1F9;
	--button-hover: #3BA8E0;
	--button-active: #E9DC00;
	--button-active-text: #333;
	--title-color: #E9DC00;
	--shadow: rgba(0,0,0,0.2);
}

/* Dark mode */
body.dark-mode {
	--bg-color: #1a1a1a;
	--text-color: #ffffff;
	--sidebar-bg: rgba(40, 40, 40, 0.95);
	--sidebar-text: #ffffff;
	--button-bg: #4DC1F9;
	--button-hover: #3BA8E0;
	--button-active: #E9DC00;
	--button-active-text: #333;
	--title-color: #E9DC00;
	--shadow: rgba(0,0,0,0.4);
}

/* Dark mode settings table */
body.dark-mode .table-selector {
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark mode table colors */
body.dark-mode .container table {
	border-color: #2d4a1f;
	background-color: #2d4a1f;
}

/* Sidebar header with buttons */
.sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

	.sidebar-info-btn,
	.sidebar-settings-btn {
		background: rgba(0, 0, 0, 0.2);
		border: 1px solid rgba(0, 0, 0, 0.3);
		border-radius: 8px;
		padding: 8px;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1em;
	}

.sidebar-info-btn:hover,
.sidebar-settings-btn:hover {
	background: rgba(0, 0, 0, 0.3);
}

/* Emoji icons in sidebar buttons */

/* Dark mode sidebar buttons - now using consistent styling for both modes */

body.dark-mode .container thead {
	background: linear-gradient(135deg, #1e3a15, #2d4a1f);
}

body.dark-mode .container th,
body.dark-mode .container td {
	border-color: #2d4a1f;
}

body.dark-mode .container td:hover {
	background-color: rgba(255,255,255,0.05);
}

body.dark-mode .result {
	background-color: #1e3a15;
}

body.dark-mode .result:hover {
	background-color: #2d4a1f;
}

body {
	background-color: var(--bg-color);
	background-image: linear-gradient(135deg, var(--bg-color) 0%, rgba(77, 193, 249, 0.8) 100%);
	background-attachment: fixed;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	color: var(--text-color);
	min-height: 100vh;
	overflow-x: hidden; /* Prevent horizontal scrolling */
}

h1{
	color: var(--title-color);
	font-size: 50px;
	margin: 4px;
	text-shadow: 2px 2px 4px var(--shadow);
}
h2{
	color: var(--title-color);
	font-size: 30px;
	margin: 4px;
	text-shadow: 1px 1px 2px var(--shadow);
}

/* Table Selector Sidebar */
.table-selector {
	position: fixed;
	left: 20px;
	top: 100px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 15px;
	padding: 25px;
	box-shadow: 0 8px 32px var(--shadow);
	max-width: 280px;
	z-index: 100;
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark mode toggle button */
.dark-mode-toggle {
	position: fixed;
	left: 20px;
	top: 20px;
	background: rgba(0, 0, 0, 0.3);
	color: white;
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 8px var(--shadow);
	transition: all 0.3s ease;
	z-index: 1000;
}

.dark-mode-toggle:hover {
	background: rgba(0, 0, 0, 0.5);
}

/* Light mode toggle button (sun icon) */
body.dark-mode .dark-mode-toggle {
	background: rgba(255, 255, 255, 0.3);
}

body.dark-mode .dark-mode-toggle:hover {
	background: rgba(255, 255, 255, 0.5);
}

/* Desktop header styling */
.desktop-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	background: linear-gradient(135deg, #4C792D, #578A34);
	padding: 8px 20px;
	border-radius: 0;
	margin: 0;
	width: 100%;
	box-shadow: 0 4px 8px var(--shadow);
	border: none;
	border-bottom: 2px solid #578A34;
}

.desktop-header-icon {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.desktop-header h1 {
	margin: 0;
	font-size: 40px;
	color: white;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Dark mode styling for desktop header */
body.dark-mode .desktop-header {
	background: linear-gradient(135deg, #1e3a15, #2d4a1f);
	border: 2px solid #2d4a1f;
}

/* Dark mode toggle button when in Options section */
.button-group .dark-mode-toggle {
	position: static;
	width: auto;
	min-width: 100px;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	padding: 10px 15px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(77, 193, 249, 0.2);
	box-shadow: none;
	z-index: auto;
}

.button-group .dark-mode-toggle:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(77, 193, 249, 0.4);
}

body.dark-mode .button-group .dark-mode-toggle {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(77, 193, 249, 0.2);
}

body.dark-mode .button-group .dark-mode-toggle:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(77, 193, 249, 0.4);
}

/* Table wrapper for better centering */
.table-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	width: 100%; /* Ensure full width for grid */
}

/* Ranglist wrapper specific styling for centering */
.ranglist-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

/* Ensure the more runners button is centered within table cell */
.ranglist-wrapper .more-runners-btn {
	margin: 0;
	display: inline-block;
}

/* Main table wrapper - first table */
.main-table-wrapper {
	width: 100%;
	max-width: 100%;
	grid-area: main;
}

/* Ranglist wrapper - second table */
.ranglist-wrapper {
	width: 100%;
	max-width: 100%;
	grid-area: ranglist;
}

/* Ensure grid areas work with the table-wrapper class structure */
.table-wrapper.main-table-wrapper {
	grid-area: main;
	width: 100%;
	display: flex;
	justify-content: center;
}

.table-wrapper.ranglist-wrapper {
	grid-area: ranglist;
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Remove the old ranglist margin */
.ranglist {
	margin-top: 0;
}

/* Ensure ranglist table has the same styling as main table */
.ranglist-wrapper table {
	border-top: none;
	border: 10px solid #578A34;
	background-color: #578A34;
	border-collapse: collapse;
	color: white;
	margin: 8px 8px;
	box-shadow: 0 8px 16px var(--shadow);
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.ranglist-wrapper table:hover {
	/* transform: translateY(-2px); - Disabled jump-up animation */
	box-shadow: 0 12px 24px var(--shadow);
}

.ranglist-wrapper thead {
	font-size: 18px;
	background: linear-gradient(135deg, #4C792D, #578A34);
}

.ranglist-wrapper th {
	border: 3px solid #578A34;
	height: 50px;
	padding: 10px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.ranglist-wrapper td {
	border: 3px solid #578A34;
	color: white;
	text-align: center;
	padding: 8px;
	transition: all 0.2s ease;
}

.ranglist-wrapper td:hover {
	background-color: rgba(255,255,255,0.1);
}

/* Mode-specific styling for ranglist table */
.ranglist-wrapper table.mode1 {
	background-color: #51AD3E;
	border: 10px solid #51AD3E;
}

.ranglist-wrapper .mode1 th {
	border: 3px solid #51AD3E;
}

.ranglist-wrapper .mode1 td {
	border: 3px solid #51AD3E;
}

.ranglist-wrapper table.mode2 {
	background-color: #AB593E;
	border: 10px solid #AB593E;
}

.ranglist-wrapper .mode2 th {
	border: 3px solid #AB593E;
}

.ranglist-wrapper .mode2 td {
	border: 3px solid #AB593E;
}

/* More runners button styling */
.more-runners-btn {
	background: linear-gradient(135deg, #4C792D, #578A34);
	border: 2px solid #578A34;
	border-radius: 8px;
	color: white;
	padding: 10px 20px;
	margin: 10px 0;
	display: inline-block;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	transition: all 0.3s ease;
	box-shadow: 0 4px 8px var(--shadow);
	text-align: center;
	width: fit-content;
}

.more-runners-btn:hover {
	background: linear-gradient(135deg, #578A34, #4C792D);
	box-shadow: 0 6px 12px var(--shadow);
}

/* Dark mode styling for more runners button */
body.dark-mode .more-runners-btn {
	background: linear-gradient(135deg, #1e3a15, #2d4a1f);
	border: 2px solid #2d4a1f;
}

body.dark-mode .more-runners-btn:hover {
	background: linear-gradient(135deg, #2d4a1f, #1e3a15);
}

/* Improve table aesthetics */
.container table {
	border-top: none;
	border: 10px solid #578A34;
	background-color: #578A34;
	border-collapse: collapse;
	color: white;
	margin: 8px 8px;
	box-shadow: 0 8px 16px var(--shadow);
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.container table:hover {
	/* transform: translateY(-2px); - Disabled jump-up animation */
	box-shadow: 0 12px 24px var(--shadow);
}

/* Improve table header styling */
.container thead {
	font-size: 18px;
	background: linear-gradient(135deg, #4C792D, #578A34);
}

.container th {
	border: 3px solid #578A34;
	height: 50px;
	padding: 10px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Improve table cell styling */
.container td {
	border: 3px solid #578A34;
	color: white;
	text-align: center;
	padding: 8px;
	transition: all 0.2s ease;
}

/* Light mode only - slightly darker cell backgrounds */
body:not(.dark-mode) .container td {
	background-color: #4C792D;
}

.container td:hover {
	background-color: rgba(255,255,255,0.1);
}

.table-selector h3 {
	color: var(--sidebar-text);
	margin: 0 0 20px 0;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.table-selector label {
	color: var(--sidebar-text);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
	display: block;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.table-selector .button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	justify-content: center;
}

.table-option-btn {
	background: var(--button-bg);
	color: white;
	border: none;
	border-radius: 12px;
	padding: 8px;
	margin: 2px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 55px;
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px var(--shadow);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-option-btn img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.table-option-btn:hover {
	background: var(--button-hover);
}

.table-option-btn.active {
	background: var(--button-active);
	color: var(--button-active-text);
	border: 2px solid rgba(255, 255, 255, 0.3);
}



/* Quick Fetch button specific styling */
.quick-fetch-btn {
	width: auto;
	min-width: 120px;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(135deg, #007bff, #0056b3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	padding: 10px 15px;
	color: white;
}

.quick-fetch-btn:hover {
	background: linear-gradient(135deg, #0056b3, #004085);
	border-color: rgba(255, 255, 255, 0.3);
}

.quick-fetch-btn:disabled {
	background: linear-gradient(135deg, #ccc, #999);
	cursor: not-allowed;
}

/* Refresh button specific styling */
.refresh-btn {
	width: auto;
	min-width: 100px;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(77, 193, 249, 0.2);
	border-radius: 8px;
	padding: 10px 15px;
}

.refresh-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(77, 193, 249, 0.4);
}

/* Individual refresh button styling for multiple tables */
.individual-refresh-btn {
	width: 35px;
	height: 35px;
	min-width: 35px;
	font-size: 18px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(0, 0, 0, 0.3);
	padding: 6px;
	margin-left: 10px;
	vertical-align: middle;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}

.individual-refresh-btn:hover {
	background: rgba(0, 0, 0, 0.3);
	box-shadow: none;
}

/* Mobile-specific individual refresh button styling */
.mobile-individual-refresh-btn {
	width: 40px;
	height: 40px;
	min-width: 40px;
	font-size: 20px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(0, 0, 0, 0.3);
	padding: 8px;
	margin-left: 8px;
	vertical-align: middle;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}

.mobile-individual-refresh-btn:hover {
	background: rgba(0, 0, 0, 0.3);
	box-shadow: none;
}



/* Time travel button specific styling */
.time-travel-btn {
	width: auto;
	min-width: 120px;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(135deg, #8B0000, #B22222);
	border: 1px solid rgba(77, 193, 249, 0.2);
	border-radius: 8px;
	padding: 10px 15px;
}

/* Dark mode time travel button - will be moved to end for proper specificity */

.time-travel-btn.active {
	background: #28a745;
	color: white;
	border: 1px solid rgba(77, 193, 249, 0.2);
	border-radius: 8px;
	padding: 10px 15px;
}

.time-travel-btn:hover {
	background: linear-gradient(135deg, #660000, #8B0000);
}

.time-travel-btn.active:hover {
	background: #218838;
}

/* Multiple tables button specific styling */
.multiple-tables-btn {
	width: auto;
	min-width: 120px;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(135deg, #8B0000, #B22222);
	border: 1px solid rgba(77, 193, 249, 0.2);
	border-radius: 8px;
	padding: 10px 15px;
}

/* Dark mode multiple tables button - will be moved to end for proper specificity */

.multiple-tables-btn.active {
	background: #28a745;
	color: white;
	border: 1px solid rgba(77, 193, 249, 0.2);
	border-radius: 8px;
	padding: 10px 15px;
}

.multiple-tables-btn:hover {
	background: linear-gradient(135deg, #660000, #8B0000);
}

.multiple-tables-btn.active:hover {
	background: #218838;
}

/* Stop/Resume button specific styling */
.stop-resume-btn {
	width: auto;
	min-width: 120px;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(135deg, #8B0000, #B22222);
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-block;
	margin: 0 4px;
}

/* Dark mode stop/resume button */
body.dark-mode .stop-resume-btn {
	background: linear-gradient(135deg, #8B0000, #B22222);
	border: 1px solid rgba(77, 193, 249, 0.2);
}

.stop-resume-btn:hover {
	background: linear-gradient(135deg, #660000, #8B0000);
}

.stop-resume-btn:disabled {
	background: linear-gradient(135deg, #8B0000, #B22222);
	opacity: 0.5;
	cursor: not-allowed;
}



/* Adjust container to make room for sidebar */
.container{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 310px; /* Margin for left sidebar (20px + 280px + 10px gap) */
	margin-top: 0px; /* Reset margin-top */
	width: calc(100% - 310px); /* Take remaining width after sidebar */
	padding: 20px;
	padding-top: 10px; /* Reduced padding-top to push tables up */
	min-height: calc(100vh - 200px);
	position: relative;
	gap: 10px; /* Reduced gap to give more space for tables */
}

/* Desktop grid layout for side-by-side tables */
@media (min-width: 1024px) {
	.container {
		display: grid !important;
		grid-template-columns: 1fr 300px !important; /* Main table takes remaining space, ranglist fixed 300px */
		grid-template-areas: "main ranglist" !important;
		gap: 30px !important;
		align-items: start !important;
		justify-items: center !important;
		margin-left: 400px !important; /* Ensure margin is maintained in grid layout */
		width: calc(100% - 400px) !important; /* Ensure width is maintained in grid layout */
		flex-direction: unset !important; /* Override mobile flex-direction */
	}
}








.container table.mode1{
	background-color: #51AD3E;
	border: 10px solid #51AD3E;
}
.container .mode1 th{
	border: 3px solid #51AD3E;
}
.container .mode1 td{
	border: 3px solid #51AD3E;
}

.container table.mode2{
	background-color: #AB593E;
	border: 10px solid #AB593E;
}
.container .mode2 th{
	border: 3px solid #AB593E;
}
.container .mode2 td{
	border: 3px solid #AB593E;
}




.container th img{
	width:40px;
	height:auto;
	padding: 4px 4px;
	padding-right: 12px;
}

.ranglist img{
	width:100px;
}


.container td a{
	color:white;
	text-decoration: none;
}

.result{
	/*background-color: #50712B;*/
	background-color: #4C792D;
	width:100px;
}

.result a{
	display: block;
}

.result a a{
	width:fit-content;
	margin:auto;
}

.result:hover{
	background-color: #578A34;
	transition: all 0.2s ease;
}

/* Styling for multiple runs container */
.runs-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.time-display {
	font-weight: bold;
	margin-bottom: 4px;
}

.player-separator {
	color: #666;
	font-weight: normal;
	margin: 0 4px;
}

/* Dark mode styling for runs container */
body.dark-mode .player-separator {
	color: #aaa;
}

.gradient-text {
	font-size: 23px;
	font-weight: bold;
    background-color: #f3ec78;
    background-size: 100%;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    padding: 4px 4px;
}

.time{
	margin-top: 5px;
	margin-left: 4px;
	margin-right:4px;
	font-size: 18px;
	display: block;
	white-space: nowrap;
}

.name{
	margin-left: 5px;
	margin-right: 5px;
	font-weight: bold;
}

.percentage{
	font-size: 20px;
	font-weight: bold;
}

button{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    color: white;
    font-size: 15px;
    font-weight: bold;
}
button:focus {outline:0;}

.mybutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgb(207, 207, 207)), color-stop(0.79, rgb(252, 252, 252)));
  background-image: -moz-linear-gradient(center bottom, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
  background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); 
  padding: 3px;
  border: 1px solid #000;
  color: black;
  text-decoration: none;
}

/* The Modal (background) */

.modal-button {
    position: absolute;
    right: 0.8em;
    top: 0.8em;
    display: none; /* Hide original modal buttons */
}
.modal-button2 {
    position: absolute;
    right: 4em;
    top: 0.8em;
    display: none; /* Hide original modal buttons */
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 20px; /* Location of the box - moved higher */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.6); /* Darker overlay */
  backdrop-filter: blur(5px); /* Blur background */
}

/* Modal Content */
.modal-content {
  background: linear-gradient(135deg, rgba(77, 193, 249, 0.95), rgba(77, 193, 249, 0.85));
  color: white;
  margin: auto;
  padding: 20px;
  padding-top: 0px;
  border: none;
  border-radius: 20px;
  width: 900px;
  max-width: 90%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  animation: modalFadeIn 0.4s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
}

/* Modal text styling */
.modal-content p {
  margin: 20px 0;
  font-size: 16px;
  line-height: 1.6;
  color: white;
  text-align: center;
}

.modal-content strong {
  color: var(--title-color);
  font-weight: 700;
  font-size: 32px;
}

/* Modal links styling */
.modal-content a {
  color: var(--button-bg);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(77, 193, 249, 0.1), rgba(77, 193, 249, 0.05));
  border: 2px solid rgba(77, 193, 249, 0.2);
  display: inline-block;
  margin: 8px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(77, 193, 249, 0.1);
}

.modal-content a:hover {
  color: white;
  background: linear-gradient(135deg, var(--button-bg), var(--button-hover));
  border-color: var(--button-bg);
}

/* Info modal specific styling */
#infoModal .modal-content {
  background: linear-gradient(135deg, rgba(77, 193, 249, 0.95), rgba(77, 193, 249, 0.85));
  color: white;
  max-width: 500px;
  width: 90%;
}

#infoModal .modal-content p {
  color: white;
  margin: 15px 0;
  font-size: 16px;
  line-height: 1.6;
}

#infoModal .modal-content strong {
  color: var(--title-color);
  font-weight: 700;
  font-size: 18px;
}

#infoModal .modal-content a {
  color: var(--title-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(233, 220, 0, 0.2), rgba(233, 220, 0, 0.1));
  border: 1px solid rgba(233, 220, 0, 0.3);
  display: inline-block;
  margin: 5px;
  font-size: 14px;
}

#infoModal .modal-content a:hover {
  color: #333;
  background: linear-gradient(135deg, var(--title-color), #D4C700);
  border-color: var(--title-color);
}

/* Settings form items */
.settings-form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  gap: 10px;
}

/* Modal form elements styling */
.modal-content label {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-weight: 600;
  color: white;
  font-size: 15px;
  text-align: center;
  justify-content: center;
}

/* Fix checkbox alignment for all checkboxes in modal */
.modal-content input[type="checkbox"] {
  margin: 0 10px 0 0;
  width: 18px;
  height: 18px;
  accent-color: #0d6efd;
  flex-shrink: 0;
  border: 2px solid #0d6efd;
  border-radius: 4px;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  cursor: pointer;
}

.modal-content input[type="checkbox"]:checked {
  background-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.modal-content input[type="date"],
.modal-content input[type="input"] {
  width: 100%;
  padding: 15px;
  border: 2px solid rgba(77, 193, 249, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 15px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.modal-content input[type="date"]:focus,
.modal-content input[type="input"]:focus {
  outline: none;
  border-color: var(--button-bg);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(77, 193, 249, 0.15);
  transform: translateY(-2px);
}

/* Modal button styling */
.modal-content .mybutton {
  background: linear-gradient(135deg, #E9DC00, #D4C700);
  color: #333;
  border: none;
  padding: 15px 30px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 15px 0;
  box-shadow: 0 6px 15px rgba(233, 220, 0, 0.3);
  width: 100%;
}

.modal-content .mybutton:hover {
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
}

.modal-content .mybutton:disabled {
  background: linear-gradient(135deg, #9E9E9E, #757575);
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}

.modal-content .mybutton:disabled:hover {
  background: linear-gradient(135deg, #9E9E9E, #757575);
}

/* Game mode icons container */
#optionButtons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  padding: 20px;
  background: transparent;
  border-radius: 15px;
  border: none;
}

/* Top row container for category and other settings */
.top-settings-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
}

/* Settings containers */
.settings-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 25px;
  background: transparent;
  border-radius: 10px;
  border: none;
  min-width: 280px;
  text-align: center;
}

/* Category container - left column */
.category-container {
  flex: 1;
  max-width: 400px;
}

/* Other settings container - right column */
.other-settings-container {
  flex: 1;
  max-width: 350px;
}

/* Button groups for wrapping icons */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 60px;
}

/* Settings titles */
.settings-title {
  width: 100%;
  text-align: center;
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Style the individual option buttons */
#optionButtons .optionButton {
  display: inline-block;
  margin: 5px;
}

/* Fix icon layout in settings containers */
.settings-container .optionButton {
  display: inline-block;
  margin: 5px;
}

/* Ensure icons wrap properly in containers */
.settings-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(77, 193, 249, 0.1);
  min-width: 200px;
  text-align: center;
}

/* Fix for table-option-btn buttons in settings containers */
.settings-container .table-option-btn {
  display: inline-block;
  margin: 3px;
  flex-shrink: 0;
}

/* Checkbox wrapper for run mode settings */
.checkbox-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Individual checkbox items */
.checkbox-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.checkbox-item input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: #0d6efd;
  flex-shrink: 0;
  border: 2px solid #0d6efd;
  border-radius: 4px;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"]:checked {
  background-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.checkbox-item label {
  margin: 0;
  font-weight: 600;
  color: white;
  font-size: 15px;
  cursor: pointer;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The Close Button - Hidden for settings popup */
.close {
  display: none;
}

/* Show close button for info modal */
#infoModal .close {
  display: block;
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s ease;
  position: absolute;
  top: 15px;
  right: 15px;
}

#infoModal .close:hover,
#infoModal .close:focus {
  color: var(--title-color);
}

/* Dark mode modal improvements */
body.dark-mode .modal {
  background-color: rgba(0,0,0,0.8);
}

body.dark-mode .modal-content {
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(30, 30, 30, 0.9));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-content label {
  color: white;
}

body.dark-mode .modal-content input[type="date"],
body.dark-mode .modal-content input[type="input"] {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(77, 193, 249, 0.3);
}

body.dark-mode .modal-content input[type="date"]:focus,
body.dark-mode .modal-content input[type="input"]:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--button-bg);
}

body.dark-mode .close {
  color: white;
}

body.dark-mode .close:hover,
body.dark-mode .close:focus {
  color: var(--button-bg);
}

body.dark-mode #optionButtons {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(77, 193, 249, 0.2);
}

body.dark-mode .settings-container {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(77, 193, 249, 0.2);
}

body.dark-mode .settings-title {
  color: white;
}

body.dark-mode .checkbox-item label {
	color: white;
}

/* Dark mode styling for category settings */
body.dark-mode .table-option-btn {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(77, 193, 249, 0.2);
}

body.dark-mode .table-option-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(77, 193, 249, 0.4);
}

body.dark-mode .table-option-btn.active {
	background: var(--button-active);
	color: var(--button-active-text);
	border: 2px solid rgba(255, 255, 255, 0.3);
}

body.dark-mode .modal-content p {
  color: white;
}

body.dark-mode .modal-content strong {
  color: var(--title-color);
}

/* Dark mode specific styling for info modal */
body.dark-mode #infoModal .modal-content {
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(30, 30, 30, 0.9));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode #infoModal .modal-content p {
  color: white;
}

body.dark-mode #infoModal .modal-content strong {
  color: var(--title-color);
}

body.dark-mode #infoModal .modal-content a {
  color: var(--button-bg);
  background: linear-gradient(135deg, rgba(77, 193, 249, 0.1), rgba(77, 193, 249, 0.05));
  border: 2px solid rgba(77, 193, 249, 0.2);
}

body.dark-mode #infoModal .modal-content a:hover {
  color: white;
  background: linear-gradient(135deg, var(--button-bg), var(--button-hover));
  border-color: var(--button-bg);
}

.optionButtonImage{
	transition: all 1s ease;
	width:50px;
	height: auto;
}

.optionButtonImageDisabled{
	opacity:0.45
}
.optionButton{
	border: none;
	padding: 0px 0px;
	margin: 0px 0px;
	display: inline;
	outline:none;
	background-color: rgba(0,0,0,0);
	width: 60px;

}



/* Center the data content container */
.data-content-container {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
	justify-content: center;
	flex-wrap: wrap;
}

.progress-display {
	font-size: 14px;
	color: var(--text-color);
	text-align: center;
	font-weight: 500;
	width: 100%;
}

#apiProgress {
	font-weight: bold;
	color: black;
}

.cache-info {
	font-size: 12px;
	color: var(--text-color);
	text-align: center;
	font-weight: 400;
	width: 100%;
	margin-top: 5px;
}

.cache-info span {
	font-weight: bold;
}

#cacheStatus {
	color: green;
}

#cacheStatus[style*="yellow"] {
	color: orange;
}

#cacheStatus[style*="gray"] {
	color: gray;
}



body.dark-mode .progress-display {
	color: white;
}

body.dark-mode #apiProgress {
	color: var(--button-bg);
}

/* Dark mode time travel and multiple tables buttons - placed at end for highest specificity */
body.dark-mode .time-travel-btn {
	background: linear-gradient(135deg, #8B0000, #B22222) !important;
	border: 1px solid rgba(77, 193, 249, 0.2) !important;
}

body.dark-mode .time-travel-btn.active {
	background: #28a745 !important;
	color: white !important;
	border: 1px solid rgba(77, 193, 249, 0.2) !important;
	border-radius: 8px !important;
	padding: 10px 15px !important;
}

body.dark-mode .time-travel-btn:hover {
	background: linear-gradient(135deg, #660000, #8B0000) !important;
}

body.dark-mode .time-travel-btn.active:hover {
	background: #218838 !important;
}

body.dark-mode .multiple-tables-btn {
	background: linear-gradient(135deg, #8B0000, #B22222) !important;
	border: 1px solid rgba(77, 193, 249, 0.2) !important;
}

body.dark-mode .multiple-tables-btn.active {
	background: #28a745 !important;
	color: white !important;
	border: 1px solid rgba(77, 193, 249, 0.2) !important;
	border-radius: 8px !important;
	padding: 10px 15px !important;
}

body.dark-mode .multiple-tables-btn:hover {
	background: linear-gradient(135deg, #660000, #8B0000) !important;
}

body.dark-mode .multiple-tables-btn.active:hover {
	background: #218838 !important;
}

/* Dark mode Quick Fetch button */
body.dark-mode .quick-fetch-btn {
	background: linear-gradient(135deg, #007bff, #0056b3) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: white !important;
}

body.dark-mode .quick-fetch-btn:hover {
	background: linear-gradient(135deg, #0056b3, #004085) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .quick-fetch-btn:disabled {
	background: linear-gradient(135deg, #666, #444) !important;
	cursor: not-allowed !important;
}



/* ======================================== */
/* DESKTOP-SPECIFIC STYLES - DESKTOP ONLY */
/* ======================================== */

/* Ensure desktop elements are shown on desktop */
@media (min-width: 1024px) {
	/* Show desktop elements */
	.table-selector,
	.container,
	h1 {
		display: block !important;
	}

	/* Hide desktop modal buttons (info and settings) on desktop */
	.modal-button,
	.modal-button2 {
		display: none !important;
	}

	/* Hide fixed dark mode toggle on desktop (now in Options section) */
	.dark-mode-toggle {
		display: none !important;
	}

	/* Show dark mode toggle when it's in the Options section */
	.button-group .dark-mode-toggle {
		display: flex !important;
	}

	/* Hide mobile elements on desktop */
	.mobile-header,
	.mobile-main,
	.mobile-nav,
	.mobile-settings-panel,
	.mobile-modal {
		display: none !important;
	}
}

/* ======================================== */
/* DESKTOP-SPECIFIC STYLES - DESKTOP ONLY */
/* ======================================== */

/* Ensure desktop elements are shown on desktop */
@media (min-width: 1024px) {
	/* Show desktop elements */
	.table-selector,
	.container,
	h1 {
		display: block !important;
	}

	/* Hide desktop modal buttons (info and settings) on desktop */
	.modal-button,
	.modal-button2 {
		display: none !important;
	}

	/* Hide fixed dark mode toggle on desktop (now in Options section) */
	.dark-mode-toggle {
		display: none !important;
	}

	/* Show dark mode toggle when it's in the Options section */
	.button-group .dark-mode-toggle {
		display: flex !important;
	}

	/* Hide mobile elements on desktop */
	.mobile-header,
	.mobile-main,
	.mobile-nav,
	.mobile-settings-panel,
	.mobile-modal {
		display: none !important;
	}
}

/* ======================================== */
/* COMPLETE TABLE LAYOUT OVERHAUL */
/* ======================================== */

/* Base container layout - mobile first */
.container {
		display: flex;
	flex-direction: column;
		align-items: center;
	margin-left: 310px; /* Margin for left sidebar (20px + 280px + 10px gap) */
	margin-top: 0px;
	width: calc(100% - 310px);
	padding: 20px;
	padding-top: 10px;
	min-height: calc(100vh - 200px);
	position: relative;
	gap: 10px;
}

/* Table wrapper base styles */
.table-wrapper {
		display: flex;
	flex-direction: column;
		align-items: center;
	margin: 0;
		width: 100%;
}

/* Main table wrapper */
.main-table-wrapper {
		width: 100%;
	max-width: 100%;
}

/* Ranglist wrapper */
.ranglist-wrapper {
		width: 100%;
	max-width: 100%;
}

/* DESKTOP GRID LAYOUT - COMPLETE OVERHAUL */
@media (min-width: 1024px) {
	/* Container grid layout */
	.container {
		display: grid !important;
		grid-template-columns: 1fr 280px !important; /* Main table takes more space, ranglist reduced to 280px */
		grid-template-areas: "main ranglist" !important;
		gap: 30px !important;
		align-items: start !important;
		justify-items: center !important;
		margin-left: 310px !important; /* Margin for left sidebar (20px + 280px + 10px gap) */
		width: calc(100% - 310px) !important;
		flex-direction: unset !important;
		padding: 20px !important;
	}

	/* Grid area assignments */
	.table-wrapper.main-table-wrapper {
		grid-area: main !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important; /* Center the records table */
		align-items: flex-start !important;
		margin: 0 0 0 140px !important; /* Move records table 45px to the right */
	}

	.table-wrapper.ranglist-wrapper {
		grid-area: ranglist !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		margin-right: 250px !important; /* Summary table 15px away from right border */
	}

	/* Ensure tables are properly sized within their grid areas */
	.main-table-wrapper table {
		max-width: 100% !important;
		width: auto !important;
	}

	.ranglist-wrapper table {
		max-width: 100% !important;
		width: auto !important;
	}

	/* Remove any conflicting styles */
	.main-table-wrapper,
	.ranglist-wrapper {
		grid-area: unset !important; /* Remove any conflicting grid-area */
	}
	
	/* Multiple tables container */
	.multiple-tables-container {
		display: flex !important;
		flex-direction: column !important;
		gap: 30px !important;
		width: 100% !important;
		align-items: center !important;
	}
	
	/* Individual multiple table wrapper */
	.multiple-table-wrapper {
		width: 100% !important;
		max-width: 800px !important;
		margin-bottom: 20px !important;
	}
}