/* Project-wide table styling to keep all pages visually consistent. */

table,
.table-wrapper table,
table.dataTable,
.dataTables_wrapper table {
	width: 100%;
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	border-collapse: separate;
	border-spacing: 0;
	background: #fcfcfc;
	overflow: hidden;
}

table thead,
table.dataTable thead,
.dataTables_wrapper table thead {
	background: #f3f5f7;
}

table th,
table td,
table.dataTable th,
table.dataTable td,
.dataTables_wrapper table th,
.dataTables_wrapper table td {
	padding: 0.58rem 0.68rem;
	border-bottom: 1px solid #e6e6e6;
	vertical-align: middle;
}

table th,
table.dataTable th,
.dataTables_wrapper table th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #555;
	font-weight: 700;
}

table tbody tr:last-child td,
table.dataTable tbody tr:last-child td,
.dataTables_wrapper table tbody tr:last-child td {
	border-bottom: 0;
}

table tbody tr:nth-child(2n),
table.dataTable tbody tr:nth-child(2n),
.dataTables_wrapper table tbody tr:nth-child(2n) {
	background: #f9fafb;
}

table tbody tr:hover,
table.dataTable tbody tr:hover,
.dataTables_wrapper table tbody tr:hover {
	background: #eef4ff;
}

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.focus {
	
	border-radius: 0.375em !important;
	box-shadow: none !important;
	background: #ffffff !important;
}

.selectize-dropdown .active,
.selectize-dropdown .selected,
.selectize-dropdown .option.active,
.selectize-dropdown .option.selected {
	background: rgba(0, 184, 255, 0.15) !important;
	color: #1f1f1f !important;
}


.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-search,
div.dt-container .dt-search {
	width: 100% !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dt-search label,
div.dt-container .dt-search label {
	display: block;
	width: 100% !important;
	margin: 0;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dt-search input,
div.dt-container .dt-search input {
	border-radius: 0.375em !important;
	border: solid 1px rgba(210, 215, 217, 0.75) !important;
	padding: 0 1em !important;
	background-color: transparent !important;
	color: inherit !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

.dataTables_wrapper .dt-layout-row .dt-layout-cell.dt-layout-start,
div.dt-container .dt-layout-row .dt-layout-cell.dt-layout-start {
	flex: 1 1 auto;
	min-width: 0;
}

.dataTables_wrapper .dt-layout-row .dt-layout-cell.dt-layout-start .dt-search,
div.dt-container .dt-layout-row .dt-layout-cell.dt-layout-start .dt-search {
	display: block;
	width: 100%;
}



.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dt-length select,
.dt-container select.dt-input {
	padding-right: 2rem;
	min-height: 2.1rem;
}

.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper button.dt-button,
.dataTables_wrapper div.dt-button,
.dt-container .dt-buttons .dt-button,
.dt-container button.dt-button,
.dt-container div.dt-button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0.375em !important;
	box-shadow: inset 0 0 0 2px #00b8ff !important;
	color: #00b8ff !important;
	cursor: pointer;
	display: inline-block;
	font-family: "Roboto Slab", serif;
	font-size: 0.8em;
	font-weight: 700;
	height: 3.5em;
	letter-spacing: 0.075em;
	line-height: 3.5em;
	padding: 0 2.25em !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper button.dt-button:hover,
.dataTables_wrapper div.dt-button:hover,
.dt-container .dt-buttons .dt-button:hover,
.dt-container button.dt-button:hover,
.dt-container div.dt-button:hover {
	background-color: rgba(0, 184, 255, 0.1) !important;
	color: #00b8ff !important;
}

.dataTables_wrapper .dt-buttons .dt-button:active,
.dataTables_wrapper button.dt-button:active,
.dataTables_wrapper div.dt-button:active,
.dt-container .dt-buttons .dt-button:active,
.dt-container button.dt-button:active,
.dt-container div.dt-button:active {
	background: rgba(0, 184, 255, 0.2) !important;
	color: #00b8ff !important;
}

.dataTables_wrapper .dt-buttons .dt-button.disabled,
.dataTables_wrapper button.dt-button.disabled,
.dataTables_wrapper div.dt-button.disabled,
.dt-container .dt-buttons .dt-button.disabled,
.dt-container button.dt-button.disabled,
.dt-container div.dt-button.disabled {
	background: transparent !important;
	box-shadow: inset 0 0 0 2px rgba(0, 184, 255, 0.25) !important;
	color: rgba(0, 184, 255, 0.35) !important;
	cursor: not-allowed;
	opacity: 1;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dt-paging .dt-paging-button,
.dataTables_wrapper .dt-paging button.dt-paging-button,
.dataTables_wrapper .dt-paging a.dt-paging-button,
.dt-container .dt-paging .dt-paging-button,
.dt-container .dt-paging button.dt-paging-button,
.dt-container .dt-paging a.dt-paging-button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0.375em !important;
	box-shadow: inset 0 0 0 2px #00b8ff !important;
	color: #00b8ff !important;
	cursor: pointer;
	display: inline-block;
	font-family: "Roboto Slab", serif;
	font-size: 0.8em;
	font-weight: 700;
	height: 3.5em;
	letter-spacing: 0.075em;
	line-height: 3.5em;
	padding: 0 2.25em !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dt-paging .dt-paging-button:hover,
.dataTables_wrapper .dt-paging button.dt-paging-button:hover,
.dataTables_wrapper .dt-paging a.dt-paging-button:hover,
div.dt-container .dt-paging .dt-paging-button:hover,
div.dt-container .dt-paging button.dt-paging-button:hover,
div.dt-container .dt-paging a.dt-paging-button:hover
{
	background: rgba(0, 184, 255, 0.1) !important;
	color: #00b8ff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dt-paging .dt-paging-button:active,
.dataTables_wrapper .dt-paging button.dt-paging-button:active,
.dataTables_wrapper .dt-paging a.dt-paging-button:active,
.dt-container .dt-paging .dt-paging-button:active,
.dt-container .dt-paging button.dt-paging-button:active,
.dt-container .dt-paging a.dt-paging-button:active {
	background-color: rgba(0, 184, 255, 0.2) !important;
	color: #00b8ff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dt-paging .dt-paging-button.current,
.dataTables_wrapper .dt-paging button.dt-paging-button.current,
.dataTables_wrapper .dt-paging a.dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging button.dt-paging-button.current,
.dt-container .dt-paging a.dt-paging-button.current {
	
	background-color: rgba(0, 184, 255, 0.2) !important;
	box-shadow: inset 0 0 0 2px #00b8ff !important;
	color: #00b8ff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
.dataTables_wrapper .dt-paging .dt-paging-button.disabled,
.dataTables_wrapper .dt-paging .dt-paging-button.disabled:hover,
.dataTables_wrapper .dt-paging .dt-paging-button.disabled:active,
.dataTables_wrapper .dt-paging button.dt-paging-button.disabled,
.dataTables_wrapper .dt-paging button.dt-paging-button.disabled:hover,
.dataTables_wrapper .dt-paging button.dt-paging-button.disabled:active,
.dataTables_wrapper .dt-paging a.dt-paging-button.disabled,
.dataTables_wrapper .dt-paging a.dt-paging-button.disabled:hover,
.dataTables_wrapper .dt-paging a.dt-paging-button.disabled:active,
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover,
.dt-container .dt-paging .dt-paging-button.disabled:active,
.dt-container .dt-paging button.dt-paging-button.disabled,
.dt-container .dt-paging button.dt-paging-button.disabled:hover,
.dt-container .dt-paging button.dt-paging-button.disabled:active,
.dt-container .dt-paging a.dt-paging-button.disabled,
.dt-container .dt-paging a.dt-paging-button.disabled:hover,
.dt-container .dt-paging a.dt-paging-button.disabled:active {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 2px rgba(0, 184, 255, 0.25) !important;
	color: rgba(0, 184, 255, 0.35) !important;
	cursor: not-allowed;
	opacity: 1;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dt-search input:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dt-length select:focus,
.dt-container .dt-input:focus {
	box-shadow: 0 0 0 1px #00b8ff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible,
.dataTables_wrapper .dt-paging .dt-paging-button:focus-visible,
.dataTables_wrapper .dt-paging button.dt-paging-button:focus-visible,
.dataTables_wrapper .dt-paging a.dt-paging-button:focus-visible,
.dt-container .dt-paging .dt-paging-button:focus-visible,
.dt-container .dt-paging button.dt-paging-button:focus-visible,
.dt-container .dt-paging a.dt-paging-button:focus-visible,
.dt-container .dt-search input:focus-visible,
.dt-container .dt-input:focus-visible {
	outline: none;
}

.dt-container .dt-search {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: flex-start;
}

.dt-container .dt-search input {
	min-width: min(18rem, 100%);
}

/* Dartu stats page */
.dartu-stats-page .box.light {
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	background: #fcfcfc;
}

.dartu-stats-page .dartu-intro-box {
	margin-bottom: 0.9rem;
}

.dartu-kpi-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-bottom: 1rem;
}

.dartu-kpi-card {
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	background: #fcfcfc;
	padding: 0.75rem;
}

.dartu-kpi-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	margin-bottom: 0.22rem;
}

.dartu-kpi-value {
	font-size: 1.28rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1f1f1f;
}

.dartu-stats-page .dartu-stats-table-box {
	margin-bottom: 1rem;
}

.dartu-stats-page .dartu-stats-table-wrap > h2 {
	margin-bottom: 0.55rem;
}

/* Season summary cards */
.season-summary-cards {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-bottom: 0.85rem;
}

.season-summary-card {
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	background: #fcfcfc;
	padding: 0.7rem;
}

.season-summary-label {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	margin-bottom: 0.2rem;
}

.season-summary-value {
	font-size: 1.18rem;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.2;
}

#thisSeason tbody tr.season-rank-1 {
	background: #fff7e1;
}

#thisSeason tbody tr.season-rank-2 {
	background: #f3f5f8;
}

#thisSeason tbody tr.season-rank-3 {
	background: #fdf0e7;
}

#thisSeason tbody tr.season-rank-1 td:first-child,
#thisSeason tbody tr.season-rank-2 td:first-child,
#thisSeason tbody tr.season-rank-3 td:first-child {
	font-weight: 700;
}

/* POX page */
.pox-infographic {
	margin-bottom: 1.25rem;
}

.pox-infographic-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 0.9rem;
}

.pox-card {
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	padding: 0.75rem;
	background: #fcfcfc;
}

.pox-card.pox-rank-card-1 {
	background: #fff7e1;
	border-color: #e7d6a7;
}

.pox-card.pox-rank-card-2 {
	background: #f3f5f8;
	border-color: #d5dde8;
}

.pox-card.pox-rank-card-3 {
	background: #fdf0e7;
	border-color: #ebcdb5;
}

.pox-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	margin-bottom: 0.25rem;
}

.pox-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.2;
}

.pox-progress-wrap {
	margin-bottom: 0.9rem;
}

.pox-progress-bar {
	height: 0.75rem;
	border-radius: 999px;
	background: #ececec;
	overflow: hidden;
}

.pox-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #148f77, #1f9f88);
}

.pox-interval-row {
	margin-bottom: 0.45rem;
}

.pox-interval-head {
	display: flex;
	justify-content: space-between;
	font-size: 0.84rem;
}

.pox-interval-bar {
	height: 0.5rem;
	border-radius: 999px;
	background: #ececec;
	overflow: hidden;
}

.pox-interval-fill {
	height: 100%;
	border-radius: 999px;
	background: #4b6cb7;
}

.pox-dual-bars {
	display: grid;
	gap: 0.35rem;
}

.pox-interval-caught-fill {
	height: 100%;
	border-radius: 999px;
	background: #148f77;
}

.pox-interval-missed-fill {
	height: 100%;
	border-radius: 999px;
	background: #b23c3c;
}

.pox-photo-grid {
	display: grid;
	gap: 0.35rem;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.pox-photo-item {
	border: 1px solid #d9d9d9;
	border-radius: 0.45rem;
	background: #fcfcfc;
	padding: 0.28rem;
	position: relative;
}

.pox-photo-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.28rem;
}

.pox-photo-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.22rem;
	gap: 0.2rem;
}

.pox-photo-tag {
	font-size: 0.74rem;
	font-weight: 700;
	color: #333;
}

.pox-photo-state {
	font-size: 0.68rem;
	border-radius: 999px;
	padding: 0.05rem 0.32rem;
	font-weight: 600;
}

.pox-photo-state.is-caught {
	background: #e3f4ef;
	color: #0f6e5a;
}

.pox-photo-state.is-missed {
	background: #faeaea;
	color: #8f2e2e;
}

.pox-tables-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	margin-top: 1rem;
}

.pox-table-panel {
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	background: #fcfcfc;
	padding: 0.65rem;
	overflow-x: auto;
}

.pox-table-panel h2 {
	font-size: 1.15rem;
	margin: 0 0 0.45rem;
}

.pox-table-panel table {
	margin-bottom: 0;
}

#pox-leaderboard tbody tr.pox-rank-1 {
	background: #fff7e1;
}

#pox-leaderboard tbody tr.pox-rank-2 {
	background: #f3f5f8;
}

#pox-leaderboard tbody tr.pox-rank-3 {
	background: #fdf0e7;
}

#pox-leaderboard tbody tr.pox-rank-1 td:first-child,
#pox-leaderboard tbody tr.pox-rank-2 td:first-child,
#pox-leaderboard tbody tr.pox-rank-3 td:first-child {
	font-weight: 700;
}

.pox-photo-tooltip {
	position: absolute;
	left: 0.28rem;
	right: 0.28rem;
	bottom: calc(100% + 0.25rem);
	background: #1f1f1f;
	color: #fff;
	border-radius: 0.35rem;
	padding: 0.35rem 0.45rem;
	font-size: 0.7rem;
	line-height: 1.3;
	opacity: 0;
	pointer-events: none;
	transform: translateY(3px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 5;
	text-align: center;
}

.pox-photo-item:hover .pox-photo-tooltip,
.pox-photo-item:focus-within .pox-photo-tooltip {
	opacity: 1;
	transform: translateY(0);
}

/* Reiting */
#in-reiting tbody tr.group-medal-gold {
	background: #fff6df;
}

#in-reiting tbody tr.group-medal-silver {
	background: #f3f5f8;
}

#in-reiting tbody tr.group-medal-bronze {
	background: #fdf0e7;
}

#in-reiting tbody tr.group-medal-start td {
	border-top: 2px solid #d8e1ee;
}

/* Player stats */
.player-stats-infographic {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0.7rem 0 0.95rem;
}

.player-stats-card {
	border: 1px solid #d9d9d9;
	border-radius: 0.5rem;
	background: #fcfcfc;
	padding: 0.7rem;
}

.player-stats-label {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	margin-bottom: 0.2rem;
}

.player-stats-value {
	font-size: 1.2rem;
	font-weight: 700;
	color: #1f1f1f;
	line-height: 1.2;
}

.player-subscore-plot {
	grid-column: 1 / -1;
}

.player-subscore-row {
	margin-bottom: 0.4rem;
}

.player-subscore-head {
	display: flex;
	justify-content: space-between;
	font-size: 0.84rem;
	margin-bottom: 0.12rem;
}

.player-subscore-bar {
	height: 0.5rem;
	border-radius: 999px;
	background: #ececec;
	overflow: hidden;
}

.player-subscore-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #4b6cb7, #5f84d2);
}

/* UI tabs */
.tabs-wrapper .tabs-nav.box.light {
	padding: 0.5rem;
}

@media (max-width: 980px) {
	.dartu-kpi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.season-summary-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pox-tables-grid {
		grid-template-columns: 1fr;
	}

	.player-stats-infographic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.pox-infographic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.dartu-kpi-grid {
		grid-template-columns: 1fr;
	}

	.season-summary-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pox-infographic-grid {
		grid-template-columns: 1fr;
	}

	.player-stats-infographic {
		grid-template-columns: 1fr;
	}
}