From 7ab148d12c8c738e737e32154dce7eba4340d21b Mon Sep 17 00:00:00 2001
From: Szymon Porwolik <szporwolik@gmail.com>
Date: Sat, 1 Nov 2025 01:53:52 +0100
Subject: [PATCH] First prototype ready

---
 application/views/bandmap/list.php |  832 ++++++++----
 assets/js/sections/bandmap_list.js | 1929 +++++++++++++++++++++++++---
 2 files changed, 2338 insertions(+), 423 deletions(-)

diff --git a/application/views/bandmap/list.php b/application/views/bandmap/list.php
index 4380c36b1..85146f667 100644
--- a/application/views/bandmap/list.php
+++ b/application/views/bandmap/list.php
@@ -1,72 +1,19 @@
 <script>
+	// Global variables that don't require jQuery
 	var dxcluster_provider = "<?php echo base_url(); ?>index.php/dxcluster";
 	var cat_timeout_interval = "<?php echo $this->optionslib->get_option('cat_timeout_interval'); ?>";
 	var dxcluster_maxage = <?php echo $this->optionslib->get_option('dxcluster_maxage') ?? 60; ?>;
 	var custom_date_format = "<?php echo $custom_date_format ?>";
 	var popup_warning = "<?= __("Pop-up was blocked! Please allow pop-ups for this site permanently."); ?>";
-	var lang_click_to_prepare_logging = "<?= __("Click to prepare logging."); ?>";
 
-	// Handle "All" option for multi-select dropdowns
-	$(document).ready(function() {
-		// Disable Apply Filters button initially
-		$('#applyFiltersButton').prop('disabled', true);
-
-		// Function to enable Apply Filters button when changes are made
-		function enableApplyButton() {
-			$('#applyFiltersButton').prop('disabled', false);
-		}
-
-		// Function to handle All option selection
-		function handleAllOption(selectId) {
-			$('#' + selectId).on('change', function() {
-				let selected = $(this).val() || [];
-
-				// If "All" was just selected, deselect all others
-				if (selected.includes('All') || selected.includes('Any')) {
-					let allValue = selected.includes('All') ? 'All' : 'Any';
-					if (selected.length > 1) {
-						// All was just selected, keep only All
-						$(this).val([allValue]);
-					}
-				} else if (selected.length === 0) {
-					// Nothing selected, select All
-					let allValue = selectId === 'decontSelect' ? 'Any' : 'All';
-					$(this).val([allValue]);
-				}
-
-				// Enable Apply Filters button
-				enableApplyButton();
-			});
-		}
-
-		// Apply to all filter selects
-		handleAllOption('cwnSelect');
-		handleAllOption('decontSelect');
-		handleAllOption('band');
-		handleAllOption('mode');
-	});
+	// Detect OS for proper keyboard shortcuts
+	var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+	var modKey = isMac ? 'Cmd' : 'Ctrl';
+	var lang_click_to_prepare_logging = "<?= __("Click to prepare logging."); ?> (" + modKey + "+Click <?= __("for new window"); ?>)";
 </script>
 
 <style>
-	.spotted_call {
-		cursor: alias;
-	}
-
-	.kHz::after {
-		content: " kHz";
-	}
-
-	.bandlist {
-		-webkit-transition: all 15s ease;
-		-moz-transition: all 15s ease;
-		-o-transition: all 15s ease;
-		transition: 15s;
-	}
-
 	.fresh {
-		/* -webkit-transition: all 15s ease;
-    -moz-transition: all 15s ease;
-    -o-transition: all 15s ease; */
 		transition: all 500ms ease;
 		--bs-table-bg: #3981b2;
 		--bs-table-accent-bg: #3981b2;
@@ -76,69 +23,373 @@
 		color: inherit;
 		text-decoration: none;
 	}
-	.dataTables_wrapper {
-		margin: 10px;
+
+	/* Make table rows clickable for prepare logging */
+	.spottable tbody tr,
+	.spottable tbody tr td,
+	.spottable tbody tr td *,
+	.spottable tbody tr span,
+	.spottable tbody tr a,
+	.spottable tbody tr td i,
+	.spottable tbody tr td .flag-emoji {
+		cursor: pointer !important;
 	}
 
-	/* Ensure table respects container width */
-	.spottable {
-		width: 100% !important;
-		table-layout: auto;
+	.spottable tbody tr td:nth-child(4) a {
+		text-decoration: underline !important;
+		cursor: pointer !important;
 	}
 
-	.dataTables_wrapper {
-		overflow-x: auto;
+	.spottable tbody tr td:nth-child(7) i:hover {
+		opacity: 0.7;
+		transform: scale(1.1);
+		transition: all 0.2s ease;
 	}
 
-	/* Style for multi-select dropdowns */
-	select[multiple] {
-		height: auto !important;
-		min-height: 300px;
-		max-height: 600px;
+	/* Status bar styling */
+	.status-bar {
+		font-size: 0.875rem;
+		color: var(--bs-body-color);
+		font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
+		background-color: var(--bs-body-bg);
+		border-radius: 8px;
+		margin: 0.25rem 0;
+		padding: 10px 15px;
 	}
 
-	/* Make multi-select options look more interactive */
-	select[multiple] option {
-		padding: 8px 12px;
-		border-radius: 3px;
-		margin: 2px;
-		cursor: pointer;
+	.status-bar-inner {
+		display: flex;
+		align-items: center;
+		gap: 15px;
 	}
 
-	select[multiple] option:hover {
-		background-color: #e9ecef !important;
-	}
-
-	select[multiple] option:checked {
-		background-color: #0d6efd !important;
-		color: white !important;
+	.status-bar-left {
+		flex: 1;
+		min-width: 0;
 		font-weight: 500;
 	}
 
-	/* Add visual checkmark indicator for selected options */
-	select[multiple] option:checked::before {
-		content: "✓ ";
-		font-weight: bold;
+	#statusMessage {
+		cursor: help;
 	}
 
-	/* Responsive adjustments for filter dropdown */
+	.status-bar-right {
+		flex: 0 0 20%;
+		min-width: 150px;
+		font-weight: 500;
+		color: var(--bs-secondary);
+		text-align: right;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.dataTables_wrapper {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+
+	.spottable {
+		width: 100%;
+		table-layout: fixed;
+		font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
+		font-size: calc(1rem - 2px);
+	}
+
+	.spottable thead th {
+		font-weight: normal;
+	}
+
+	/* Column widths - consolidated selectors */
+	.spottable th:nth-child(1), .spottable td:nth-child(1) { min-width: 60px; width: auto; }
+	.spottable th:nth-child(2), .spottable td:nth-child(2) { min-width: 75px; width: auto; }
+	.spottable th:nth-child(3), .spottable td:nth-child(3) { min-width: 55px; width: auto; }
+	.spottable th:nth-child(4), .spottable td:nth-child(4) { min-width: 90px; width: auto; }
+	.spottable th:nth-child(5), .spottable td:nth-child(5) { min-width: 120px; max-width: 250px; width: auto; }
+	.spottable th:nth-child(6), .spottable td:nth-child(6) { min-width: 45px; width: auto; }
+	.spottable th:nth-child(7), .spottable td:nth-child(7) { min-width: 80px; width: auto; }
+	.spottable th:nth-child(8), .spottable td:nth-child(8) { min-width: 80px; width: auto; }
+	.spottable th:nth-child(9), .spottable td:nth-child(9) { min-width: 150px; width: auto; }
+
+	.spottable td {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.spottable td:nth-child(9) {
+		white-space: normal;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		font-size: calc(1rem - 4px);
+	}
+
+	.spottable td:nth-child(5) {
+		font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', Arial, sans-serif;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.spottable .flag-emoji {
+		font-family: "Twemoji Country Flags", "Helvetica", "Comic Sans", sans-serif;
+		font-style: normal;
+		font-variant: normal;
+	}
+
+	.spottable img.emoji {
+		height: 1.3em;
+		width: 1.3em;
+		margin: 0 .05em 0 .1em;
+		vertical-align: -0.25em;
+		display: inline-block;
+	}
+
+	.spottable td:nth-child(7) {
+		overflow: visible;
+		white-space: nowrap;
+	}
+
+	.spottable thead th {
+		font-size: calc(1rem - 1px);
+		vertical-align: middle;
+	}
+
+	/* Fullscreen mode */
+	.bandmap-logo-fullscreen {
+		display: none;
+	}
+
+	.bandmap-fullscreen .bandmap-logo-fullscreen {
+		display: inline-block;
+	}
+
+	.bandmap-fullscreen {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100vw;
+		height: 100vh;
+		max-width: 100vw;
+		margin: 0;
+		padding: 0;
+		z-index: 9999;
+		overflow: hidden;
+		background: var(--bs-body-bg, #fff);
+	}
+
+	.bandmap-fullscreen .card {
+		height: 100vh;
+		margin: 0;
+		border-radius: 0;
+		display: flex;
+		flex-direction: column;
+		border: none;
+	}
+
+	.bandmap-fullscreen .card-header {
+		flex-shrink: 0;
+	}
+
+	.bandmap-fullscreen .card-body:first-of-type {
+		flex-shrink: 0;
+		flex-grow: 0;
+		padding: 0.5rem;
+	}
+
+	.bandmap-fullscreen .menu-bar {
+		flex-shrink: 0;
+		margin-bottom: 0;
+	}
+
+	.bandmap-fullscreen .card-body:last-child {
+		flex: 1 1 0;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		padding: 0.5rem;
+	}
+
+	.bandmap-fullscreen .table-responsive {
+		flex: 1 1 0;
+		min-height: 0;
+		overflow: auto;
+		height: auto;
+	}
+
+	.bandmap-fullscreen .dataTables_processing {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 10001;
+	}
+
+	.bandmap-fullscreen .dropdown-menu {
+		z-index: 10002;
+		position: fixed;
+	}
+
+	body.fullscreen-active #page-wrapper,
+	body.fullscreen-active nav,
+	body.fullscreen-active .navbar,
+	body.fullscreen-active header,
+	body.fullscreen-active #bandmapContainer > .d-flex.align-items-center.mb-3,
+	body.fullscreen-active #bandmapContainer > #radio_status,
+	body.fullscreen-active #bandmapContainer > .messages {
+		display: none !important;
+	}
+
+	body.fullscreen-active .fullscreen-wavelog-text {
+		display: inline !important;
+	}
+
+	body.fullscreen-active {
+		overflow: hidden;
+	}
+
+	#fullscreenToggle {
+		cursor: pointer;
+		font-size: 1.2rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 36px;
+		height: 36px;
+	}
+
+	/* Menu bar and table styling */
+	.menu-bar {
+		margin-top: 5px;
+		margin-bottom: 5px;
+	}
+
+	.card-body.pt-1 {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
+	.table-responsive {
+		overflow: auto;
+		margin: 0;
+		padding: 0;
+		background-color: var(--bs-card-cap-bg, var(--bs-secondary-bg));
+		border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0,0,0,.125));
+		border-radius: 8px;
+	}
+
+	.spottable {
+		border-bottom: none;
+		margin-bottom: 0;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	.spottable thead tr {
+		border-top: 1px solid var(--bs-border-color);
+		border-bottom: 1px solid var(--bs-border-color);
+	}
+
+	.spottable tbody tr:last-child {
+		border-bottom: 1px solid var(--bs-border-color);
+	}
+
+	.spottable tbody tr,
+	.spottable tbody tr td {
+		border-top: none;
+		border-bottom: none;
+	}
+
+	/* Filter dropdowns */
+	select[multiple] {
+		height: auto;
+		min-height: 350px;
+		max-height: 700px;
+	}
+
+	select[multiple].filter-short {
+		min-height: 150px;
+		max-height: 220px;
+	}
+
+	select[multiple] option:checked {
+		background-color: var(--bs-primary);
+		color: white;
+		font-weight: normal;
+	}
+
+	.dropdown-menu .mb-3 {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		min-height: 100px;
+	}
+
+	.dropdown-menu .filter-label-bottom {
+		margin-top: auto;
+		margin-bottom: 0.25rem;
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.dropdown-menu select.form-select {
+		margin-bottom: 0;
+	}
+
+	.dropdown-menu select {
+		flex-shrink: 0;
+	}
+
+	.filter-tip {
+		background-color: var(--bs-card-cap-bg, var(--bs-secondary-bg));
+		color: var(--bs-body-color);
+		border: 2px solid var(--bs-dark, #212529);
+		padding: 8px 12px;
+		border-radius: 6px;
+		margin-bottom: 15px;
+		font-size: 0.875rem;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.filter-label-small {
+		font-size: 0.8rem;
+		margin-bottom: 0.25rem;
+		font-weight: 500;
+	}
+
+	.search-icon-clickable {
+		cursor: pointer;
+	}
+
+	.search-icon-clickable:hover {
+		background-color: var(--bs-secondary-bg);
+	}
+
+	/* Responsive adjustments */
 	@media (max-width: 768px) {
 		.dropdown-menu {
-			min-width: 95vw !important;
-			max-width: 95vw !important;
+			min-width: 95vw;
+			max-width: 95vw;
 		}
 
 		select[multiple] {
 			min-height: 180px;
 			max-height: 375px;
 		}
+
+		select[multiple].filter-short {
+			min-height: 100px;
+			max-height: 150px;
+		}
 	}
 
 	@media (max-width: 576px) {
-		.filterbody .row > div {
-			margin-bottom: 0.5rem;
-		}
-
 		select[multiple] {
 			min-height: 150px;
 			max-height: 300px;
@@ -147,139 +398,288 @@
 </style>
 
 
-<div class="container">
-	<br>
-	<center><button type="button" class="btn" id="menutoggle"><i class="fa fa-arrow-up" id="menutoggle_i"></i></button></center>
-
+<div class="container" id="bandmapContainer">
 	<div id="errormessage" style="display: none;"></div>
 
-	<h2 id="dxtitle"><?php echo $page_title; ?></h2>
+	<!-- Radio Selector - Moved to top -->
+	<div class="d-flex align-items-center mb-3">
+		<label class="my-1 me-2" for="radio"><?= __("Radio"); ?></label>
+		<select class="form-select form-select-sm radios my-1 me-sm-2 w-auto" id="radio" name="radio">
+			<option value="0" selected="selected"><?= __("None"); ?></option>
+			<option value="ws"<?php if ($this->session->userdata('radio') == 'ws') { echo ' selected="selected"'; } ?>><?= __("WebSocket (Requires WLGate>1.1.10)"); ?></option>
+			<?php foreach ($radios->result() as $row) { ?>
+				<option value="<?php echo $row->id; ?>" <?php if ($this->session->userdata('radio') == $row->id) {
+															echo "selected=\"selected\"";
+														} ?>><?php echo $row->radio; ?></option>
+			<?php } ?>
+		</select>
+	</div>
 
-	<div class="tab-content" id="myTabContent">
-		<div class="messages my-1 me-2"></div>
+	<!-- Radio Status Panel (dynamically populated by JavaScript) -->
+	<div id="radio_status"></div>
+	<!-- Messages -->
+	<div class="messages my-1 mx-3"></div>
 
-		<!-- Radio Selector -->
-		<div class="d-flex align-items-center mb-2">
-			<label class="my-1 me-2" for="radio"><?= __("Radio"); ?></label>
-			<select class="form-select form-select-sm radios my-1 me-sm-2 w-auto" id="radio" name="radio">
-				<option value="0" selected="selected"><?= __("None"); ?></option>
-				<option value="ws"<?php if ($this->session->userdata('radio') == 'ws') { echo ' selected="selected"'; } ?>><?= __("WebSocket (Requires WLGate>1.1.10)"); ?></option>
-				<?php foreach ($radios->result() as $row) { ?>
-					<option value="<?php echo $row->id; ?>" <?php if ($this->session->userdata('radio') == $row->id) {
-																echo "selected=\"selected\"";
-															} ?>><?php echo $row->radio; ?></option>
-				<?php } ?>
-			</select>
+	<!-- DX Cluster Panel -->
+	<div class="card">
+		<div class="card-header d-flex justify-content-between align-items-center">
+			<div class="d-flex align-items-center">
+				<a href="<?php echo base_url(); ?>" title="<?= __("Return to Home"); ?>">
+					<img class="headerLogo me-2 bandmap-logo-fullscreen" src="<?php echo base_url(); ?>assets/logo/<?php echo $this->optionslib->get_logo('header_logo'); ?>.png" alt="Logo" style="height: 32px; width: auto; cursor: pointer;" />
+				</a>
+				<h5 class="mb-0">DX Cluster - spot list</h5>
+			</div>
+			<div class="d-flex align-items-center gap-3">
+				<span class="fullscreen-wavelog-text" style="display: none; font-weight: 500; color: var(--bs-body-color);">www.wavelog.org</span>
+				<button type="button" class="btn btn-sm" id="fullscreenToggle" title="<?= __("Toggle Fullscreen"); ?>" style="background: none; border: none; padding: 0;">
+					<i class="fas fa-expand" id="fullscreenIcon" style="font-size: 1.2rem;"></i>
+				</button>
+			</div>
 		</div>
-
-		<!-- Filters Section -->
-		<div class="row pt-2">
-			<div class="col-12">
-				<div class="btn-toolbar d-flex flex-wrap align-items-center gap-2" role="toolbar">
-					<!-- Filter Button Group -->
-					<div class="btn-group" role="group">
-						<!-- Main Filters Dropdown -->
-						<div class="dropdown" data-bs-auto-close="outside">
-							<button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-								<i class="fas fa-filter"></i> <?= __("Filters"); ?>
-							</button>
-							<div class="dropdown-menu dropdown-menu-start p-3 mt-2" aria-labelledby="filterDropdown" style="min-width: 800px; max-width: 95vw; max-height: 80vh; overflow-y: auto;">
-								<div class="alert alert-info mb-3 py-2" role="alert">
-									<i class="fas fa-info-circle"></i>
-									<small><strong><?= __("Tip:"); ?></strong> <?= __("Hold Ctrl (Windows) or Cmd (Mac) to select multiple options. Use 'All' to select everything."); ?></small>
-								</div>
-								<div class="card-body filterbody">
-									<div class="row">
-										<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg-3">
-											<label class="form-label" for="cwnSelect"><?= __("DXCC-Status"); ?></label>
-											<select class="form-select form-select-sm border border-secondary" id="cwnSelect" name="dxcluster_cwn" multiple="multiple" aria-describedby="dxcluster_cwnHelp">
-												<option value="All" selected><?= __("All"); ?></option>
-												<option value="notwkd"><?= __("Not worked"); ?></option>
-												<option value="wkd"><?= __("Worked"); ?></option>
-												<option value="cnf"><?= __("Confirmed"); ?></option>
-												<option value="ucnf"><?= __("Worked, not Confirmed"); ?></option>
-											</select>
-										</div>
-										<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg-3">
-											<label class="form-label" for="decontSelect"><?= __("Spots de"); ?></label>
-											<select class="form-select form-select-sm border border-secondary" id="decontSelect" name="dxcluster_decont" multiple="multiple" aria-describedby="dxcluster_decontHelp">
-												<option value="Any" selected><?= __("All"); ?></option>
-												<option value="AF" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'AF') {echo " selected";} ?>><?= __("Africa"); ?></option>
-												<option value="AN" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'AN') {echo " selected";} ?>><?= __("Antarctica"); ?></option>
-												<option value="AS" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'AS') {echo " selected";} ?>><?= __("Asia"); ?></option>
-												<option value="EU" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'EU') {echo " selected";} ?>><?= __("Europe"); ?></option>
-												<option value="NA" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'NA') {echo " selected";} ?>><?= __("North America"); ?></option>
-												<option value="OC" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'OC') {echo " selected";} ?>><?= __("Oceania"); ?></option>
-												<option value="SA" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'SA') {echo " selected";} ?>><?= __("South America"); ?></option>
-											</select>
-										</div>
-										<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg-3">
-											<label class="form-label" for="band"><?= __("Band"); ?></label>
-											<select id="band" class="form-select form-select-sm border border-secondary" name="band" multiple="multiple">
-												<option value="All" selected><?= __("All"); ?></option>
-												<?php foreach ($bands as $key => $bandgroup) {
-													echo '<optgroup label="' . strtoupper($key) . '">';
-													foreach ($bandgroup as $band) {
-														echo '<option value="' . $band . '"';
-														echo '>' . $band . '</option>' . "\n";
-													}
-													echo '</optgroup>';
-												}
-												?>
-											</select>
-										</div>
-										<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg-3">
-											<label class="form-label" for="mode"><?= __("Mode"); ?></label>
-											<select id="mode" class="form-select form-select-sm border border-secondary" name="mode" multiple="multiple">
-												<option value="All" selected><?= __("All"); ?></option>
-												<option value="phone"><?= __("Phone"); ?></option>
-												<option value="cw"><?= __("CW"); ?></option>
-												<option value="digi"><?= __("Digi"); ?></option>
-											</select>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<!-- Apply Filters Button -->
-						<button type="button" class="btn btn-sm btn-success" id="applyFiltersButton" disabled>
-							<i class="fas fa-check"></i> <?= __("Apply Filters"); ?>
-						</button>
+		<div class="card-body pt-1">
+		<!-- Filters Section with darker background and rounded corners -->
+		<div class="menu-bar">
+			<!-- First Row: Band Filters, Mode Filters, and Continent Filters -->
+			<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
+				<!-- Band Filter Buttons -->
+				<div class="d-flex flex-wrap gap-2 align-items-center">
+					<small class="text-muted me-1 flex-shrink-0"><?= __("Bands:"); ?></small>
+					<!-- MF Band -->
+					<div class="btn-group flex-shrink-0" role="group">
+						<button class="btn btn-sm btn-primary" type="button" id="toggle160mFilter" title="<?= __("Toggle 160m band filter"); ?>">160m</button>
+					</div>
+					<!-- HF Bands -->
+					<div class="btn-group flex-shrink-0" role="group">
+						<button class="btn btn-sm btn-primary" type="button" id="toggle80mFilter" title="<?= __("Toggle 80m band filter"); ?>">80m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle60mFilter" title="<?= __("Toggle 60m band filter"); ?>">60m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle40mFilter" title="<?= __("Toggle 40m band filter"); ?>">40m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle30mFilter" title="<?= __("Toggle 30m band filter"); ?>">30m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle20mFilter" title="<?= __("Toggle 20m band filter"); ?>">20m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle17mFilter" title="<?= __("Toggle 17m band filter"); ?>">17m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle15mFilter" title="<?= __("Toggle 15m band filter"); ?>">15m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle12mFilter" title="<?= __("Toggle 12m band filter"); ?>">12m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle10mFilter" title="<?= __("Toggle 10m band filter"); ?>">10m</button>
 					</div>
 
-					<!-- Search Input -->
-					<div class="input-group input-group-sm" style="max-width: 250px;">
-						<span class="input-group-text"><i class="fas fa-search"></i></span>
-						<input type="text" class="form-control" id="spotSearchInput" placeholder="<?= __("Search spots..."); ?>" aria-label="<?= __("Search"); ?>">
+					<!-- VHF Bands -->
+					<div class="btn-group flex-shrink-0" role="group">
+						<button class="btn btn-sm btn-primary" type="button" id="toggle6mFilter" title="<?= __("Toggle 6m band filter"); ?>">6m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle4mFilter" title="<?= __("Toggle 4m band filter"); ?>">4m</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle2mFilter" title="<?= __("Toggle 2m band filter"); ?>">2m</button>
+					</div>
+
+					<!-- UHF Bands -->
+					<div class="btn-group flex-shrink-0" role="group">
+						<button class="btn btn-sm btn-primary" type="button" id="toggle70cmFilter" title="<?= __("Toggle 70cm band filter"); ?>">70cm</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggle23cmFilter" title="<?= __("Toggle 23cm band filter"); ?>">23cm</button>
+					</div>
+				</div>
+
+			<!-- Spacer to push modes and continents to the right -->
+			<div class="flex-grow-1"></div>
+
+			<!-- Mode Filter Buttons -->
+			<div class="d-flex flex-wrap gap-2 align-items-center">
+				<small class="text-muted me-1 flex-shrink-0"><?= __("Modes:"); ?></small>
+				<div class="btn-group flex-shrink-0" role="group">
+					<button class="btn btn-sm btn-primary" type="button" id="toggleCwFilter" title="<?= __("Toggle CW mode filter"); ?>">CW</button>
+					<button class="btn btn-sm btn-primary" type="button" id="toggleDigiFilter" title="<?= __("Toggle Digital mode filter"); ?>">Digi</button>
+					<button class="btn btn-sm btn-primary" type="button" id="togglePhoneFilter" title="<?= __("Toggle Phone mode filter"); ?>">Phone</button>
+				</div>
+			</div>
+
+			<!-- Continent Filter Buttons -->
+			<div class="d-flex flex-wrap gap-2 align-items-center">
+					<small class="text-muted me-1 flex-shrink-0"><?= __("de:"); ?></small>
+					<div class="btn-group flex-shrink-0" role="group">
+						<button class="btn btn-sm btn-primary" type="button" id="toggleAfricaFilter" title="<?= __("Toggle Africa continent filter"); ?>">AF</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggleAsiaFilter" title="<?= __("Toggle Asia continent filter"); ?>">AS</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggleEuropeFilter" title="<?= __("Toggle Europe continent filter"); ?>">EU</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggleNorthAmericaFilter" title="<?= __("Toggle North America continent filter"); ?>">NA</button>
+						<button class="btn btn-sm btn-primary" type="button" id="toggleSouthAmericaFilter" title="<?= __("Toggle South America continent filter"); ?>">SA</button>
 					</div>
 				</div>
 			</div>
+
+		<!-- Second Row: Filter Dropdown and Other Quick Filters -->
+		<div class="d-flex flex-wrap align-items-center gap-2">
+			<!-- Filter Button and Quick Filter Toggles -->
+			<div class="d-flex flex-wrap gap-2 align-items-center flex-grow-1">
+				<div class="dropdown">
+					<!-- Filter Dropdown Button -->
+					<button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+						<i class="fas fa-filter" id="filterIcon"></i> <?= __("Advanced Filters"); ?>
+					</button>
+					<div class="dropdown-menu dropdown-menu-start p-3 mt-2" aria-labelledby="filterDropdown" style="min-width: 1264px; max-width: 95vw; max-height: 98vh; overflow-y: auto;">
+						<!-- Filter tip -->
+						<div class="filter-tip">
+							<i class="fas fa-info-circle"></i>
+							<span id="filterTipText"></span>
+						</div>
+						<script>
+									// Set filter tip text based on OS
+									document.addEventListener('DOMContentLoaded', function() {
+										var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+										var modKey = isMac ? 'Cmd' : 'Ctrl';
+										document.getElementById('filterTipText').textContent = 'Hold ' + modKey + ' and click to select multiple options';
+									});
+								</script>
+							<div class="row">
+								<!-- Column 1: DXCC-Status and Mode -->
+								<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg">
+									<label class="form-label d-block filter-label-small" for="cwnSelect"><?= __("DXCC-Status"); ?></label>
+									<select class="form-select form-select-sm filter-short" id="cwnSelect" name="dxcluster_cwn" multiple="multiple" aria-describedby="dxcluster_cwnHelp">
+										<option value="All" selected><?= __("All"); ?></option>
+										<option value="notwkd"><?= __("Not worked"); ?></option>
+										<option value="wkd"><?= __("Worked"); ?></option>
+										<option value="cnf"><?= __("Confirmed"); ?></option>
+										<option value="ucnf"><?= __("Worked, not Confirmed"); ?></option>
+									</select>
+									<label class="form-label d-block filter-label-small mt-3" for="mode"><?= __("Mode"); ?></label>
+									<select id="mode" class="form-select form-select-sm filter-short" name="mode" multiple="multiple">
+										<option value="All" selected><?= __("All"); ?></option>
+										<option value="phone"><?= __("Phone"); ?></option>
+										<option value="cw"><?= __("CW"); ?></option>
+										<option value="digi"><?= __("Digi"); ?></option>
+									</select>
+								</div>
+								<!-- Column 2: Required Flags and Additional Flags -->
+								<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg">
+									<label class="form-label d-block filter-label-small" for="requiredFlags"><?= __("Required Flags"); ?></label>
+									<select id="requiredFlags" class="form-select form-select-sm filter-short" name="required_flags" multiple="multiple">
+										<option value="lotw"><?= __("LoTW User"); ?></option>
+										<option value="notworked"><?= __("Not worked before"); ?></option>
+									</select>
+									<label class="form-label d-block filter-label-small mt-3" for="additionalFlags"><?= __("Additional Flags"); ?></label>
+									<select id="additionalFlags" class="form-select form-select-sm filter-short" name="additional_flags" multiple="multiple">
+										<option value="All" selected><?= __("All"); ?></option>
+										<option value="SOTA"><?= __("SOTA"); ?></option>
+										<option value="POTA"><?= __("POTA"); ?></option>
+										<option value="WWFF"><?= __("WWFF"); ?></option>
+										<option value="IOTA"><?= __("IOTA"); ?></option>
+										<option value="Contest"><?= __("Contest"); ?></option>
+									</select>
+								</div>
+								<!-- Column 3: Spots de Continent -->
+								<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg">
+									<label class="form-label d-block filter-label-small" for="decontSelect"><?= __("Spots de Continent"); ?></label>
+									<select class="form-select form-select-sm" id="decontSelect" name="dxcluster_decont" multiple="multiple" aria-describedby="dxcluster_decontHelp">
+										<option value="Any"<?php if ($this->optionslib->get_option('dxcluster_decont') == '' || $this->optionslib->get_option('dxcluster_decont') == 'Any') {echo " selected";} ?>><?= __("All"); ?></option>
+										<option value="AF" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'AF') {echo " selected";} ?>><?= __("Africa"); ?></option>
+										<option value="AN" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'AN') {echo " selected";} ?>><?= __("Antarctica"); ?></option>
+										<option value="AS" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'AS') {echo " selected";} ?>><?= __("Asia"); ?></option>
+										<option value="EU" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'EU') {echo " selected";} ?>><?= __("Europe"); ?></option>
+										<option value="NA" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'NA') {echo " selected";} ?>><?= __("North America"); ?></option>
+										<option value="OC" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'OC') {echo " selected";} ?>><?= __("Oceania"); ?></option>
+										<option value="SA" <?php if ($this->optionslib->get_option('dxcluster_decont') == 'SA') {echo " selected";} ?>><?= __("South America"); ?></option>
+									</select>
+								</div>
+								<!-- Column 4: Spotted Station Continent -->
+								<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg">
+									<label class="form-label d-block filter-label-small" for="continentSelect"><?= __("Spotted Station Continent"); ?></label>
+									<select id="continentSelect" class="form-select form-select-sm" name="continent" multiple="multiple">
+										<option value="Any" selected><?= __("All"); ?></option>
+										<option value="AF"><?= __("Africa"); ?></option>
+										<option value="AN"><?= __("Antarctica"); ?></option>
+										<option value="AS"><?= __("Asia"); ?></option>
+										<option value="EU"><?= __("Europe"); ?></option>
+										<option value="NA"><?= __("North America"); ?></option>
+										<option value="OC"><?= __("Oceania"); ?></option>
+										<option value="SA"><?= __("South America"); ?></option>
+									</select>
+								</div>
+								<!-- Column 5: Band -->
+								<div class="mb-3 col-12 col-sm-6 col-md-4 col-lg">
+									<label class="form-label d-block filter-label-small" for="band"><?= __("Band"); ?></label>
+									<select id="band" class="form-select form-select-sm" name="band" multiple="multiple">
+										<option value="All" selected><?= __("All"); ?></option>
+										<?php foreach ($bands as $key => $bandgroup) {
+											echo '<optgroup label="' . strtoupper($key) . '">';
+											foreach ($bandgroup as $band) {
+												echo '<option value="' . $band . '"';
+												echo '>' . $band . '</option>' . "\n";
+											}
+											echo '</optgroup>';
+										}
+										?>
+									</select>
+							</div>
+						</div>
+
+						<!-- Buttons in popup -->
+						<div class="text-center mt-3">
+							<button type="button" class="btn btn-sm btn-success me-2" id="applyFiltersButtonPopup">
+								<i class="fas fa-check"></i> <?= __("Apply Filters"); ?>
+							</button>
+						<button type="button" class="btn btn-sm btn-secondary" id="clearFiltersButton">
+							<i class="fas fa-times"></i> <?= __("Clear Filters"); ?>
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<!-- Quick Filter Toggle Buttons -->
+			<small class="text-muted me-1 flex-shrink-0"><?= __("Quick Filters:"); ?></small>
+			<div class="btn-group flex-shrink-0" role="group">
+				<button class="btn btn-sm btn-primary" type="button" id="toggleLotwFilter" title="<?= __("Toggle LoTW User filter"); ?>">
+					<i class="fas fa-upload"></i> <span class="d-none d-sm-inline">LoTW</span>
+				</button>
+				<button class="btn btn-sm btn-primary" type="button" id="toggleNotWorkedFilter" title="<?= __("Toggle Not Worked Before filter"); ?>">
+					<i class="fas fa-star"></i> <span class="d-none d-sm-inline">New</span>
+				</button>
+				<button class="btn btn-sm btn-primary" type="button" id="toggleDxccNeededFilter" title="<?= __("Toggle DXCC Needed filter"); ?>">
+					<i class="fas fa-globe"></i> <span class="d-none d-sm-inline">DXCC</span>
+				</button>
+				<button class="btn btn-sm btn-primary" type="button" id="toggleContextFilter" title="<?= __("Toggle Contest filter"); ?>">
+					<i class="fas fa-trophy"></i> <span class="d-none d-sm-inline">Contest</span>
+				</button>
+				<button class="btn btn-sm btn-primary" type="button" id="toggleGeoHunterFilter" title="<?= __("Toggle Geo Hunter (POTA/SOTA/IOTA/WWFF)"); ?>">
+					<i class="fas fa-map-marked-alt"></i> <span class="d-none d-sm-inline">Geo</span>
+				</button>
+			</div>
+
+			<!-- Search Input -->
+			<div class="input-group input-group-sm ms-auto flex-shrink-0" style="max-width: 300px; min-width: 200px;">
+				<input type="text" class="form-control" id="spotSearchInput" placeholder="<?= __("Search spots..."); ?>" aria-label="<?= __("Search"); ?>">
+				<span class="input-group-text search-icon-clickable" id="searchIcon"><i class="fas fa-search"></i></span>
+			</div>
+		</div>
+</div>
+			<!-- Status Bar showing filter info and refresh timer -->
+			<div class="status-bar">
+				<div class="status-bar-inner">
+					<div class="status-bar-left">
+						<span id="statusMessage"></span>
+					</div>
+					<div class="status-bar-right">
+						<i class="fas fa-hourglass-half me-1" id="refreshIcon"></i>
+						<span id="refreshTimer"></span>
+					</div>
+				</div>
+			</div>
+
+			<div class="table-responsive">
+				<table class="table table-striped table-hover spottable">
+					<thead>
+						<tr class="log_title titles">
+							<th title="<?= __("Time"); ?> UTC"><?= __("Time"); ?> UTC</th>
+							<th title="<?= __("Frequency"); ?> [MHz]"><?= __("Freq"); ?></th>
+							<th title="<?= __("Mode"); ?>"><?= __("Mode"); ?></th>
+							<th title="<?= __("Callsign"); ?>"><?= __("Call"); ?></th>
+							<th title="<?= __("DXCC Entity"); ?>"><?= __("DXCC"); ?></th>
+							<th title="<?= __("Continent"); ?>"><?= __("Cont"); ?></th>
+							<th title="<?= __("Flags"); ?>"><?= __("Flags"); ?></th>
+							<th title="<?= __("Spotter"); ?>"><?= __("Spotter"); ?></th>
+							<th title="<?= __("Message"); ?>"><?= __("Message"); ?></th>
+						</tr>
+					</thead>
+
+					<tbody class="spots_table_contents">
+					</tbody>
+				</table>
+			</div>
 		</div>
 	</div>
-
 </div>
 
-<div class="container">
-	<table class="table-sm table spottable table-bordered table-hover table-striped table-condensed">
-		<thead>
-			<tr class="log_title titles">
-				<th style="width:200px;"><?= __("Date"); ?>/<?= __("Time"); ?></th>
-				<th style="width:150px;"><?= __("Frequency"); ?></th>
-				<th><?= __("Call"); ?></th>
-				<th><?= __("DXCC"); ?></th>
-				<th style="width:30px;"><?= __("WAC"); ?></th>
-				<th style="width:150px;"><?= __("Spotter"); ?></th>
-				<th><?= __("Message"); ?></th>
-				<th><?= __("Last Worked"); ?></th>
-				<th><?= __("Mode"); ?></th>
-			</tr>
-		</thead>
-
-		<tbody class="spots_table_contents">
-		</tbody>
-	</table>
 </div>
-	</div>
-
-
diff --git a/assets/js/sections/bandmap_list.js b/assets/js/sections/bandmap_list.js
index 601a71ff8..d02140800 100644
--- a/assets/js/sections/bandmap_list.js
+++ b/assets/js/sections/bandmap_list.js
@@ -1,200 +1,985 @@
+/**
+ * @fileoverview DX CLUSTER BANDMAP for WaveLog
+ * @version 1.0.0
+ * @author Wavelog Team
+ *
+ * @description
+ * Real-time DX spot filtering and display with intelligent client/server-side
+ * filter architecture, smart caching, and multi-criteria spot filtering.
+ *
+ * @requires jQuery
+ * @requires DataTables
+ * @requires base_url (global from Wavelog)
+ * @requires dxcluster_provider (global from Wavelog)
+ * @requires dxcluster_maxage (global from Wavelog)
+ *
+ * @browserSupport
+ * - Chrome 90+
+ * - Firefox 88+
+ * - Safari 14+
+ * - Edge 90+
+ *
+ * @features
+ * - Smart filter architecture (server-side: continent only; client-side: band, mode, flags)
+ * - Real-time spot caching and client-side filtering
+ * - Multi-select filters with AND/OR logic
+ * - Required flags (LoTW, Not Worked) with AND logic
+ * - Activity flags (POTA, SOTA, WWFF, IOTA, Contest)
+ * - Auto-refresh with 60-second countdown timer
+ * - DXCC status color coding (Confirmed/Worked/New)
+ */
+
+'use strict';
+
 $(function() {
 
-	function SortByQrg(a, b){
-		var a = a.frequency;
-		var b = b.frequency;
-		return ((a< b) ? -1 : ((a> b) ? 1 : 0));
+	// ========================================
+	// FILTER UI MANAGEMENT
+	// ========================================
+
+	// Check if any filters are active (not default "All"/"Any" values)
+	function areFiltersApplied() {
+		let cwnVal = $('#cwnSelect').val() || [];
+		let decontVal = $('#decontSelect').val() || [];
+		let continentVal = $('#continentSelect').val() || [];
+		let bandVal = $('#band').val() || [];
+		let modeVal = $('#mode').val() || [];
+		let flagsVal = $('#additionalFlags').val() || [];
+		let requiredVal = $('#requiredFlags').val() || [];
+
+		// Check if anything is selected besides "All"/"Any"
+		let isDefaultCwn = cwnVal.length === 1 && cwnVal.includes('All');
+		let isDefaultDecont = decontVal.length === 1 && decontVal.includes('Any');
+		let isDefaultContinent = continentVal.length === 1 && continentVal.includes('Any');
+		let isDefaultBand = bandVal.length === 1 && bandVal.includes('All');
+		let isDefaultMode = modeVal.length === 1 && modeVal.includes('All');
+		let isDefaultFlags = flagsVal.length === 1 && flagsVal.includes('All');
+		let isDefaultRequired = requiredVal.length === 0;
+
+		return !(isDefaultCwn && isDefaultDecont && isDefaultContinent && isDefaultBand && isDefaultMode && isDefaultFlags && isDefaultRequired);
 	}
 
-	function get_dtable () {
+	// Update filter icon based on whether filters are active
+	function updateFilterIcon() {
+		if (areFiltersApplied()) {
+			$('#filterIcon').removeClass('fa-filter').addClass('fa-filter-circle-xmark');
+			$('#filterDropdown').removeClass('btn-primary').addClass('btn-warning');
+		} else {
+			$('#filterIcon').removeClass('fa-filter-circle-xmark').addClass('fa-filter');
+			$('#filterDropdown').removeClass('btn-warning').addClass('btn-primary');
+		}
+	}
+
+	// Sync quick filter button states with their corresponding dropdown values
+	function syncQuickFilterButtons() {
+		let requiredFlags = $('#requiredFlags').val() || [];
+		let additionalFlags = $('#additionalFlags').val() || [];
+		let cwnValues = $('#cwnSelect').val() || [];
+		let modeValues = $('#mode').val() || [];
+		let bandValues = $('#band').val() || [];
+		let decontValues = $('#decontSelect').val() || [];
+
+		// LoTW button
+		if (requiredFlags.includes('lotw')) {
+			$('#toggleLotwFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#toggleLotwFilter i').removeClass('fa-upload').addClass('fa-check-circle');
+		} else {
+			$('#toggleLotwFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#toggleLotwFilter i').removeClass('fa-check-circle').addClass('fa-upload');
+		}
+
+		// Not Worked button
+		if (requiredFlags.includes('notworked')) {
+			$('#toggleNotWorkedFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#toggleNotWorkedFilter i').removeClass('fa-star').addClass('fa-check-circle');
+		} else {
+			$('#toggleNotWorkedFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#toggleNotWorkedFilter i').removeClass('fa-check-circle').addClass('fa-star');
+		}
+
+		// DXCC Needed button
+		if (cwnValues.length === 1 && cwnValues[0] === 'notwkd') {
+			$('#toggleDxccNeededFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#toggleDxccNeededFilter i').removeClass('fa-globe').addClass('fa-check-circle');
+		} else {
+			$('#toggleDxccNeededFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#toggleDxccNeededFilter i').removeClass('fa-check-circle').addClass('fa-globe');
+		}
+
+		// Contest button
+		if (additionalFlags.includes('Contest')) {
+			$('#toggleContextFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#toggleContextFilter i').removeClass('fa-trophy').addClass('fa-check-circle');
+		} else {
+			$('#toggleContextFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#toggleContextFilter i').removeClass('fa-check-circle').addClass('fa-trophy');
+		}
+
+		// Geo Hunter button
+		let geoFlags = ['POTA', 'SOTA', 'IOTA', 'WWFF'];
+		let hasGeoFlag = geoFlags.some(flag => additionalFlags.includes(flag));
+		if (hasGeoFlag) {
+			$('#toggleGeoHunterFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#toggleGeoHunterFilter i').removeClass('fa-map-marked-alt').addClass('fa-check-circle');
+		} else {
+			$('#toggleGeoHunterFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#toggleGeoHunterFilter i').removeClass('fa-check-circle').addClass('fa-map-marked-alt');
+		}
+
+		// CW mode button
+		if (modeValues.includes('cw')) {
+			$('#toggleCwFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#toggleCwFilter i').removeClass('fa-wave-square').addClass('fa-check-circle');
+		} else {
+			$('#toggleCwFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#toggleCwFilter i').removeClass('fa-check-circle').addClass('fa-wave-square');
+		}
+
+		// Digi mode button
+		if (modeValues.includes('digi')) {
+			$('#toggleDigiFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#toggleDigiFilter i').removeClass('fa-keyboard').addClass('fa-check-circle');
+		} else {
+			$('#toggleDigiFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#toggleDigiFilter i').removeClass('fa-check-circle').addClass('fa-keyboard');
+		}
+
+		// Phone mode button
+		if (modeValues.includes('phone')) {
+			$('#togglePhoneFilter').removeClass('btn-primary').addClass('btn-warning');
+			$('#togglePhoneFilter i').removeClass('fa-microphone').addClass('fa-check-circle');
+		} else {
+			$('#togglePhoneFilter').removeClass('btn-warning').addClass('btn-primary');
+			$('#togglePhoneFilter i').removeClass('fa-check-circle').addClass('fa-microphone');
+		}
+
+		// Check if "All" is selected for bands, modes, and continents
+		let allBandsSelected = bandValues.length === 1 && bandValues.includes('All');
+		let allModesSelected = modeValues.length === 1 && modeValues.includes('All');
+		let allContinentsSelected = decontValues.length === 1 && decontValues.includes('Any');
+
+		// Band filter buttons - green if All, orange if specific band, blue if not selected
+		let bandButtons = ['#toggle160mFilter', '#toggle80mFilter', '#toggle60mFilter', '#toggle40mFilter', '#toggle30mFilter',
+		                   '#toggle20mFilter', '#toggle17mFilter', '#toggle15mFilter', '#toggle12mFilter', '#toggle10mFilter',
+		                   '#toggle6mFilter', '#toggle4mFilter', '#toggle2mFilter', '#toggle70cmFilter', '#toggle23cmFilter'];
+		let bandIds = ['160m', '80m', '60m', '40m', '30m', '20m', '17m', '15m', '12m', '10m', '6m', '4m', '2m', '70cm', '23cm'];
+
+		bandButtons.forEach((btnId, index) => {
+			let $btn = $(btnId);
+			$btn.removeClass('btn-primary btn-warning btn-success');
+			if (allBandsSelected) {
+				$btn.addClass('btn-success');
+			} else if (bandValues.includes(bandIds[index])) {
+				$btn.addClass('btn-warning');
+			} else {
+				$btn.addClass('btn-primary');
+			}
+		});
+
+		// Mode buttons - green if All, orange if selected, blue if not
+		let modeButtons = [
+			{ id: '#toggleCwFilter', mode: 'cw', icon: 'fa-wave-square' },
+			{ id: '#toggleDigiFilter', mode: 'digi', icon: 'fa-keyboard' },
+			{ id: '#togglePhoneFilter', mode: 'phone', icon: 'fa-microphone' }
+		];
+
+		modeButtons.forEach(btn => {
+			let $btn = $(btn.id);
+			$btn.removeClass('btn-primary btn-warning btn-success');
+			let $icon = $btn.find('i');
+
+			if (allModesSelected) {
+				$btn.addClass('btn-success');
+				$icon.removeClass(btn.icon).addClass('fa-check-circle');
+			} else if (modeValues.includes(btn.mode)) {
+				$btn.addClass('btn-warning');
+				$icon.removeClass(btn.icon).addClass('fa-check-circle');
+			} else {
+				$btn.addClass('btn-primary');
+				$icon.removeClass('fa-check-circle').addClass(btn.icon);
+			}
+		});
+
+		// Continent filter buttons - green if Any, orange if selected, blue if not
+		let continentButtons = [
+			{ id: '#toggleAfricaFilter', continent: 'AF' },
+			{ id: '#toggleAsiaFilter', continent: 'AS' },
+			{ id: '#toggleEuropeFilter', continent: 'EU' },
+			{ id: '#toggleNorthAmericaFilter', continent: 'NA' },
+			{ id: '#toggleSouthAmericaFilter', continent: 'SA' }
+		];
+
+		continentButtons.forEach(btn => {
+			let $btn = $(btn.id);
+			$btn.removeClass('btn-primary btn-warning btn-success');
+			if (allContinentsSelected) {
+				$btn.addClass('btn-success');
+			} else if (decontValues.includes(btn.continent)) {
+				$btn.addClass('btn-warning');
+			} else {
+				$btn.addClass('btn-primary');
+			}
+		});
+	}
+
+	// Add checkbox-style indicators (☑/☐) to multi-select dropdowns
+	function updateSelectCheckboxes(selectId) {
+		let $select = $('#' + selectId);
+		$select.find('option').each(function() {
+			let $option = $(this);
+			let originalText = $option.data('original-text');
+
+			if (!originalText) {
+				originalText = $option.text();
+				$option.data('original-text', originalText);
+			}
+
+			if ($option.is(':selected')) {
+				$option.text('☑ ' + originalText);
+			} else {
+				$option.text('☐ ' + originalText);
+			}
+		});
+	}
+
+	// Initialize checkbox indicators for all filter selects
+	function initFilterCheckboxes() {
+		['cwnSelect', 'decontSelect', 'continentSelect', 'band', 'mode', 'additionalFlags', 'requiredFlags'].forEach(function(selectId) {
+			updateSelectCheckboxes(selectId);
+			$('#' + selectId).on('change', function() {
+				updateSelectCheckboxes(selectId);
+			});
+		});
+	}
+
+	// Handle "All"/"Any" option behavior in multi-selects
+	// If "All" is selected with other options, keep only "All"
+	// If nothing selected, default back to "All"/"Any"
+	function handleAllOption(selectId) {
+		$('#' + selectId).on('change', function() {
+			let selected = $(this).val() || [];
+
+			if (selected.includes('All') || selected.includes('Any')) {
+				let allValue = selected.includes('All') ? 'All' : 'Any';
+				if (selected.length > 1) {
+					$(this).val([allValue]);
+				}
+			} else if (selected.length === 0) {
+				let allValue = (selectId === 'decontSelect' || selectId === 'continentSelect') ? 'Any' : 'All';
+				$(this).val([allValue]);
+			}
+
+			updateFilterIcon();
+		});
+	}
+
+	// Apply "All" handler to all filter dropdowns
+	['cwnSelect', 'decontSelect', 'continentSelect', 'band', 'mode', 'additionalFlags'].forEach(handleAllOption);
+
+	// Required flags filter doesn't use "All" option - handle separately
+	$('#requiredFlags').on('change', function() {
+		updateFilterIcon();
+	});
+
+	// ========================================
+	// DATATABLE CONFIGURATION
+	// ========================================
+
+	// Sort spots by frequency (ascending)
+	function SortByQrg(a, b) {
+		return a.frequency - b.frequency;
+	}
+
+	// Initialize DataTables instance with custom row click handlers
+	function get_dtable() {
 		var table = $('.spottable').DataTable({
-			"paging": false,
-			"searching": true,
-			"dom": 'rt', // Only show table (r) and processing (t), hide search box and other elements
-			"retrieve": true,
-			"language": {
+			paging: false,
+			searching: true,
+			dom: 'rt',
+			retrieve: true,
+			language: {
 				url: getDataTablesLanguageUrl(),
+				"emptyTable": "<i class='fas fa-spinner fa-spin'></i> Loading spots...",
+				"zeroRecords": "No spots found"
 			},
 			'columnDefs': [
 				{
 					'targets': 1, "type":"num",
 					'createdCell':  function (td, cellData, rowData, row, col) {
-						$(td).addClass("kHz");
+						$(td).addClass("MHz");
 					}
 				},
 				{
 					'targets': 2,
-					'createdCell':  function (td, cellData, rowData, row, col) {
-						$(td).addClass("spotted_call");
-						$(td).attr( "title", lang_click_to_prepare_logging);
-					}
-				},
-				{
-					'targets': 8,
 					'createdCell':  function (td, cellData, rowData, row, col) {
 						$(td).addClass("mode");
 					}
-				},
+				}
 			],
-			"language": {
-				url: getDataTablesLanguageUrl(),
-			},
-			"search": { "smart": true },
+			search: { smart: true },
+			drawCallback: function(settings) {
+				// Update status bar after table is drawn (including after search)
+				let totalRows = cachedSpotData ? cachedSpotData.length : 0;
+				let displayedRows = this.api().rows({ search: 'applied' }).count();
+				updateStatusBar(totalRows, displayedRows, getServerFilterText(), getClientFilterText(), false, false);
+			}
 		});
+
+		$('.spottable tbody').off('click', 'tr').on('click', 'tr', function(e) {
+			// Don't trigger row click if clicking on a link
+			if ($(e.target).is('a') || $(e.target).closest('a').length) {
+				// Handle activity flag links (POTA/SOTA/WWFF)
+				if ($(e.target).closest('a').hasClass('activity-flag-link')) {
+					let activityLink = $(e.target).closest('a.activity-flag-link');
+					let activityType = activityLink.data('activity-type');
+					let ref = activityLink.data('ref');
+
+					if (activityType === 'pota' && ref) {
+						window.open('https://pota.app/#/park/' + ref, '_blank');
+					} else if (activityType === 'sota' && ref) {
+						window.open('https://sotl.as/summits/' + ref, '_blank');
+					} else if (activityType === 'wwff' && ref) {
+						window.open('https://wwff.co/directory/?showRef=' + ref, '_blank');
+					}
+					return;
+				}
+				return;
+			}
+
+			let cellIndex = $(e.target).closest('td').index();
+
+			// If clicking callsign column, open QRZ link directly
+			if (cellIndex === 3) {
+				let rowData = table.row(this).data();
+				if (!rowData) return;
+
+				let callsignHtml = rowData[3];
+				let tempDiv = $('<div>').html(callsignHtml);
+				let qrzLink = tempDiv.find('a');
+
+				if (qrzLink.length) {
+					qrzLink[0].click();
+					return;
+				}
+			}
+
+			// Default row click: prepare QSO logging with callsign, frequency, mode
+			let rowData = table.row(this).data();
+			if (!rowData) return;
+
+			let callsignHtml = rowData[3];
+			let tempDiv = $('<div>').html(callsignHtml);
+			let call = tempDiv.find('a').text().trim();
+			if (!call) return;
+
+			let qrg = parseFloat(rowData[1]) * 1000;
+			let mode = rowData[2];
+
+			prepareLogging(call, qrg, mode);
+		});
+
 		return table;
 	}
 
-	function fill_list(band, de, maxAgeMinutes, cwn, mode) {
-		// var table = $('.spottable').DataTable();
+	// ========================================
+	// FILTER STATE TRACKING
+	// ========================================
+
+	// Track what backend parameters were used for last data fetch
+	// NOTE: Changed architecture - only de continent affects backend now
+	// Band and Mode are now client-side filters only
+	var loadedBackendFilters = {
+		continent: 'Any'
+	};
+
+	// Initialize backend filter state from form values
+	function initializeBackendFilters() {
+		const decontSelect = $('#decontSelect').val();
+		loadedBackendFilters.continent = (decontSelect && decontSelect.length > 0) ? decontSelect[0] : 'Any';
+	}
+
+	// Track all current filter selections (both client and server-side)
+	var currentFilters = {
+		band: ['All'],
+		deContinent: ['Any'],
+		spottedContinent: ['Any'],
+		cwn: ['All'],
+		mode: ['All'],
+		additionalFlags: ['All'],
+		requiredFlags: []
+	};
+
+	// ========================================
+	// DATA CACHING & FETCH STATE
+	// ========================================
+
+	var cachedSpotData = null;  // Raw spot data from last backend fetch
+	var isFetchInProgress = false;  // Prevent multiple simultaneous fetches
+	var currentAjaxRequest = null;  // Track active AJAX request for cancellation
+	var lastFetchParams = {  // Track last successful fetch parameters
+		continent: 'Any',
+		maxAge: 60,
+		timestamp: null
+	};
+
+	// Auto-refresh timer state
+	var refreshCountdown = 60;
+	var refreshTimerInterval = null;
+
+	// ========================================
+	// STATUS BAR & UI UPDATES
+	// ========================================
+
+	// Update status bar with spot counts, filter info, and fetch status
+	function updateStatusBar(totalSpots, displayedSpots, serverFilters, clientFilters, isFetching, isInitialLoad) {
+		if (isFetching) {
+			let allFilters = [];
+			if (serverFilters && serverFilters.length > 0) {
+				allFilters = allFilters.concat(serverFilters.map(f => 'de ' + f));
+			}
+			if (clientFilters && clientFilters.length > 0) {
+				allFilters = allFilters.concat(clientFilters);
+			}
+
+			let loadingMessage = 'Loading data from DX Cluster';
+			if (allFilters.length > 0) {
+				loadingMessage += ' (' + allFilters.join(', ') + ')';
+			}
+			loadingMessage += '...';
+
+			$('#statusMessage').text(loadingMessage);
+			$('#refreshIcon').removeClass('fa-hourglass-half').addClass('fa-spinner fa-spin');
+			$('#refreshTimer').text('');
+			return;
+		}
+
+		if (lastFetchParams.timestamp === null) {
+			$('#statusMessage').text('');
+			$('#refreshTimer').text('');
+			return;
+		}
+
+		let now = new Date();
+		let timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
+		let statusMessage = totalSpots + ' spots fetched @ ' + timeStr;
+		let allFilters = [];
+
+		if (serverFilters && serverFilters.length > 0) {
+			allFilters = allFilters.concat(serverFilters.map(f => 'de ' + f));
+		}
+
+		if (clientFilters && clientFilters.length > 0) {
+			allFilters = allFilters.concat(clientFilters);
+		}
+
 		var table = get_dtable();
-
-		// Handle multi-select values
-		let bands = Array.isArray(band) ? band : [band];
-		let continents = Array.isArray(de) ? de : [de];
-		let cwnStatuses = Array.isArray(cwn) ? cwn : [cwn];
-		let modes = Array.isArray(mode) ? mode : [mode];
-
-		// If 'All' is selected or nothing selected, treat as all
-		if (bands.includes('All') || bands.length === 0) {
-			bands = ['All'];
-		}
-		if (continents.includes('Any') || continents.length === 0) {
-			continents = ['Any'];
-		}
-		if (cwnStatuses.includes('All') || cwnStatuses.length === 0) {
-			cwnStatuses = ['All'];
-		}
-		if (modes.includes('All') || modes.length === 0) {
-			modes = ['All'];
+		var searchValue = table.search();
+		if (searchValue) {
+			allFilters.push('search: "' + searchValue + '"');
 		}
 
-		// For now, use first band for API call (we'll need to make multiple calls or update API for multi-band)
-		let bandForAPI = bands.includes('All') ? 'All' : bands[0];
-		let continentForAPI = continents.includes('Any') ? 'Any' : continents[0];
-		let modeForAPI = modes.includes('All') ? 'All' : modes[0];
+		if (allFilters.length > 0) {
+			statusMessage += ', showing ' + displayedSpots + ' (active filters: ' + allFilters.join(', ') + ')';
+		} else if (displayedSpots < totalSpots) {
+			statusMessage += ', showing ' + displayedSpots;
+		} else if (totalSpots > 0) {
+			statusMessage += ', showing all';
+		}
 
-		if ((bandForAPI != '') && (bandForAPI !== undefined)) {
-			let dxurl = dxcluster_provider + "/spots/" + bandForAPI + "/" +maxAgeMinutes + "/" + continentForAPI + "/" + modeForAPI;
-			$.ajax({
-				url: dxurl,
-				cache: false,
-				dataType: "json"
-			}).done(function(dxspots) {
-				table.page.len(50);
-				let oldtable=table.data();
-				table.clear();
-				let spots2render=0;
-				if (dxspots.length>0) {
-					dxspots.sort(SortByQrg);
-					dxspots.forEach((single) => {
-						// Apply multi-select filtering
-						let passesCwnFilter = cwnStatuses.includes('All');
-						if (!passesCwnFilter) {
-							if (cwnStatuses.includes('notwkd') && !single.worked_dxcc) passesCwnFilter = true;
-							if (cwnStatuses.includes('wkd') && single.worked_dxcc) passesCwnFilter = true;
-							if (cwnStatuses.includes('cnf') && single.cnfmd_dxcc) passesCwnFilter = true;
-							if (cwnStatuses.includes('ucnf') && single.worked_dxcc && !single.cnfmd_dxcc) passesCwnFilter = true;
-						}
-						if (!passesCwnFilter) { return; }
+		let tooltipLines = ['Last fetched for:'];
+		tooltipLines.push('Band: ' + lastFetchParams.band);
+		tooltipLines.push('Continent: ' + lastFetchParams.continent);
+		tooltipLines.push('Mode: ' + lastFetchParams.mode);
+		tooltipLines.push('Max Age: ' + lastFetchParams.maxAge + ' min');
+		if (lastFetchParams.timestamp) {
+			let fetchTime = new Date(lastFetchParams.timestamp);
+			let fetchTimeStr = fetchTime.getHours().toString().padStart(2, '0') + ':' +
+			                   fetchTime.getMinutes().toString().padStart(2, '0') + ':' +
+			                   fetchTime.getSeconds().toString().padStart(2, '0');
+			tooltipLines.push('Fetched at: ' + fetchTimeStr);
+		}
 
-						spots2render++;
-						var data=[];
-						if (single.cnfmd_dxcc) {
-							dxcc_wked_info="text-success";
-						} else if (single.worked_dxcc) {
-							dxcc_wked_info="text-warning";
-						} else {
-							dxcc_wked_info="text-danger";
-						}
-						if (single.cnfmd_call) {
-							wked_info="text-success";
-						} else if (single.worked_call) {
-							wked_info="text-warning";
-						} else {
-							wked_info="";
-						}
-						lotw_badge='';
-						lclass='';
-						if (single.dxcc_spotted.lotw_user) {
-							$('#lotw_info').text("LoTW");
-							if (single.dxcc_spotted.lotw_user > 365) {
-								lclass='lotw_info_red';
-							} else if (single.dxcc_spotted.lotw_user > 30) {
-								lclass='lotw_info_orange';
-							} else if (single.dxcc_spotted.lotw_user > 7) {
-								lclass='lotw_info_yellow';
-							}
-							lotw_badge='<a id="lotw_badge" style="float: right;" href="https://lotw.arrl.org/lotwuser/act?act='+single.spotted+'" target="_blank"><small id="lotw_infox" class="badge text-bg-success '+lclass+'" data-bs-toggle="tooltip" title="LoTW User. Last upload was '+single.dxcc_spotted.lotw_user+' days ago">L</small></a>';
-						}
+		$('#statusMessage').text(statusMessage).attr('title', tooltipLines.join('\n'));
 
-						data[0]=[];
-						data[0].push(single.when_pretty);
-						data[0].push(single.frequency*1);
-						wked_info=((wked_info != '' ?'<span class="'+wked_info+'">' : '')+'<span id="prepcall">'+single.spotted+'</span>'+(wked_info != '' ? '</span>' : ''));
-						spotted=wked_info+lotw_badge;
-						data[0].push(spotted);
-						if (single.dxcc_spotted.flag) {
-							dxcc_wked_info=((dxcc_wked_info != '' ?'<span class="'+dxcc_wked_info+'">' : '')+single.dxcc_spotted.flag+' '+single.dxcc_spotted.entity+(dxcc_wked_info != '' ? '</span>' : ''));
-						} else {
-							dxcc_wked_info=((dxcc_wked_info != '' ?'<span class="'+dxcc_wked_info+'">' : '')+single.dxcc_spotted.entity+(dxcc_wked_info != '' ? '</span>' : ''));
-						}
-						data[0].push('<a href="javascript:spawnLookupModal(\''+single.dxcc_spotted.dxcc_id+'\',\'dxcc\')";>'+dxcc_wked_info+'</a>');
-
-						if (single.cnfmd_continent) {
-							continent_wked_info="text-success";
-						} else if (single.worked_continent) {
-							continent_wked_info="text-warning";
-						} else {
-							continent_wked_info="text-danger";
-						}
-						continent_wked_info = ((continent_wked_info != '' ?'<span class="'+continent_wked_info+'">' : '')+single.dxcc_spotted.cont+(continent_wked_info != '' ? '</span>' : ''));
-
-						data[0].push(continent_wked_info);
-						data[0].push(single.spotter);
-						data[0].push(single.message || '');
-						if ((single.worked_call) && ((single.last_wked || '') != '')) {
-							data[0].push(single.last_wked.LAST_QSO+' in '+single.last_wked.LAST_MODE);
-						} else {
-							data[0].push('');
-						}
-						data[0].push(single.mode || '');
-						if (oldtable.length > 0) {
-							let update=false;
-							oldtable.each( function (srow) {
-								if (JSON.stringify(srow) === JSON.stringify(data[0])) {
-									update=true;
-								}
-							});
-							if (!update) { 	// Sth. Fresh? So highlight
-								table.rows.add(data).draw().nodes().to$().addClass("fresh");
-							} else {
-								table.rows.add(data).draw();
-							}
-						} else {
-							table.rows.add(data).draw();
-						}
-					});
-					setTimeout(function(){	// Remove Highlights
-						$(".fresh").removeClass("fresh");
-					},10000);
-				} else {
-					table.clear();
-					table.draw();
-				}
-				if (spots2render == 0) {
-					table.clear();
-					table.draw();
-				}
-			});
+		if (isFetching) {
+			$('#refreshIcon').removeClass('fa-hourglass-half').addClass('fa-spinner fa-spin');
+			$('#refreshTimer').text('Fetching...');
 		} else {
-			table.clear();
-			table.draw();
+			$('#refreshIcon').removeClass('fa-spinner fa-spin').addClass('fa-hourglass-half');
+			$('#refreshTimer').text('Next update in ' + refreshCountdown + 's');
 		}
 	}
 
+	function getDisplayedSpotCount() {
+		var table = get_dtable();
+		return table.rows({search: 'applied'}).count();
+	}
+
+	// Start/restart the auto-refresh countdown timer (60 seconds)
+	function startRefreshTimer() {
+		if (refreshTimerInterval) {
+			clearInterval(refreshTimerInterval);
+		}
+
+		refreshCountdown = 60;
+
+		refreshTimerInterval = setInterval(function() {
+			refreshCountdown--;
+			if (refreshCountdown <= 0) {
+				console.log('Timer countdown: reloading spot data with current filters');
+				let table = get_dtable();
+				table.clear();
+				fill_list(currentFilters.deContinent, dxcluster_maxage);
+				refreshCountdown = 60;
+			} else {
+				if (!isFetchInProgress && lastFetchParams.timestamp !== null) {
+					$('#refreshIcon').removeClass('fa-spinner fa-spin').addClass('fa-hourglass-half');
+					$('#refreshTimer').text('Next update in ' + refreshCountdown + 's');
+				}
+			}
+		}, 1000);
+	}
+
+	// Build array of server-side filter labels for display
+	function getServerFilterText() {
+		let filters = [];
+		// Only de continent is a server filter now
+		if (loadedBackendFilters.continent !== 'Any') {
+			filters.push(loadedBackendFilters.continent);
+		}
+		return filters;
+	}
+
+	// Build array of client-side filter labels for display
+	function getClientFilterText() {
+		let filters = [];
+
+		if (!currentFilters.cwn.includes('All')) {
+			let cwnLabels = currentFilters.cwn.map(function(status) {
+				switch(status) {
+					case 'notwkd': return 'Not worked';
+					case 'wkd': return 'Worked';
+					case 'cnf': return 'Confirmed';
+					case 'ucnf': return 'Worked, not Confirmed';
+					default: return status;
+				}
+			});
+			filters.push('DXCC: ' + cwnLabels.join('/'));
+		}
+
+		// Band is now a client filter
+		if (!currentFilters.band.includes('All')) {
+			filters.push('Band: ' + currentFilters.band.join('/'));
+		}
+
+		if (!currentFilters.spottedContinent.includes('Any')) {
+			filters.push('spotted: ' + currentFilters.spottedContinent.join('/'));
+		}
+
+		// Mode is now a client filter
+		if (!currentFilters.mode.includes('All')) {
+			let modeLabels = currentFilters.mode.map(function(m) {
+				return m.charAt(0).toUpperCase() + m.slice(1);
+			});
+			filters.push('Mode: ' + modeLabels.join('/'));
+		}
+
+		if (!currentFilters.additionalFlags.includes('All')) {
+			filters.push(currentFilters.additionalFlags.join('/'));
+		}
+
+		// Required flags - special handling (must have ALL selected flags)
+		if (currentFilters.requiredFlags && currentFilters.requiredFlags.length > 0) {
+			let requiredLabels = currentFilters.requiredFlags.map(function(flag) {
+				if (flag === 'lotw') return 'LoTW User';
+				if (flag === 'notworked') return 'Not worked before';
+				return flag;
+			});
+			filters.push('Required: ' + requiredLabels.join(' + '));
+		}
+
+		return filters;
+	}
+
+	// ========================================
+	// CLIENT-SIDE FILTERING & RENDERING
+	// ========================================
+
+	// Render spots from cached data, applying client-side filters
+	// Client filters: spottedContinent, cwn status, additionalFlags
+	function renderFilteredSpots() {
+		var table = get_dtable();
+
+		if (!cachedSpotData || cachedSpotData.length === 0) {
+			table.clear();
+			table.settings()[0].oLanguage.sEmptyTable = "No data available";
+			table.draw();
+			return;
+		}
+
+		let bands = currentFilters.band;
+		let spottedContinents = currentFilters.spottedContinent;
+		let cwnStatuses = currentFilters.cwn;
+		let modes = currentFilters.mode;
+		let flags = currentFilters.additionalFlags;
+		let requiredFlags = currentFilters.requiredFlags || [];
+
+		table.clear();
+		let oldtable = table.data();
+		let spots2render = 0;
+
+	cachedSpotData.forEach((single) => {
+		// Extract time from spot data - use 'when' field
+		let timeOnly = single.when;
+
+		// Apply required flags FIRST (must have ALL selected required flags)
+		if (requiredFlags.length > 0) {
+			for (let reqFlag of requiredFlags) {
+				if (reqFlag === 'lotw') {
+					if (!single.dxcc_spotted || !single.dxcc_spotted.lotw_user) return;
+				}
+				if (reqFlag === 'notworked') {
+					if (single.worked_call) return;  // Reject if already worked
+				}
+			}
+		}			// Apply CWN (Confirmed/Worked/New) filter
+			let passesCwnFilter = cwnStatuses.includes('All');
+			if (!passesCwnFilter) {
+				if (cwnStatuses.includes('notwkd') && !single.worked_dxcc) passesCwnFilter = true;
+				if (cwnStatuses.includes('wkd') && single.worked_dxcc) passesCwnFilter = true;
+				if (cwnStatuses.includes('cnf') && single.cnfmd_dxcc) passesCwnFilter = true;
+				if (cwnStatuses.includes('ucnf') && single.worked_dxcc && !single.cnfmd_dxcc) passesCwnFilter = true;
+			}
+			if (!passesCwnFilter) return;
+
+			// Apply band filter (client-side for multi-select)
+			let passesBandFilter = bands.includes('All');
+			if (!passesBandFilter) {
+				let freq_khz = single.frequency;
+				let spot_band = getBandFromFrequency(freq_khz);
+				passesBandFilter = bands.includes(spot_band);
+			}
+			if (!passesBandFilter) return;
+
+			// Apply spotted continent filter (which continent the DX station is in)
+			let passesContinentFilter = spottedContinents.includes('Any');
+			if (!passesContinentFilter) {
+				passesContinentFilter = spottedContinents.includes(single.dxcc_spotted.cont);
+			}
+			if (!passesContinentFilter) return;
+
+			// Apply mode filter (client-side for multi-select)
+			let passesModeFilter = modes.includes('All');
+			if (!passesModeFilter) {
+				let spot_mode_category = getModeCategory(single.mode);
+				// Only pass if mode has a category and it matches one of the selected filters
+				passesModeFilter = spot_mode_category && modes.includes(spot_mode_category);
+			}
+			if (!passesModeFilter) return;
+
+			// Apply additional flags filter (POTA, SOTA, WWFF, IOTA, Contest)
+			let passesFlagsFilter = flags.includes('All');
+			if (!passesFlagsFilter) {
+				for (let flag of flags) {
+					if (flag === 'SOTA' && single.dxcc_spotted && single.dxcc_spotted.sota_ref) {
+						passesFlagsFilter = true;
+						break;
+					}
+					if (flag === 'POTA' && single.dxcc_spotted && single.dxcc_spotted.pota_ref) {
+						passesFlagsFilter = true;
+						break;
+					}
+					if (flag === 'WWFF' && single.dxcc_spotted && single.dxcc_spotted.wwff_ref) {
+						passesFlagsFilter = true;
+						break;
+					}
+					if (flag === 'IOTA' && single.dxcc_spotted && single.dxcc_spotted.iota_ref) {
+						passesFlagsFilter = true;
+						break;
+					}
+					if (flag === 'Contest' && single.dxcc_spotted && single.dxcc_spotted.isContest) {
+						passesFlagsFilter = true;
+						break;
+					}
+				}
+			}
+			if (!passesFlagsFilter) return;
+
+			// All filters passed - build table row data
+			spots2render++;
+			var data = [];
+			var dxcc_wked_info, wked_info;
+
+			// Color code DXCC entity: green=confirmed, yellow=worked, red=new
+
+			if (single.cnfmd_dxcc) {
+				dxcc_wked_info = "text-success";
+			} else if (single.worked_dxcc) {
+				dxcc_wked_info = "text-warning";
+			} else {
+				dxcc_wked_info = "text-danger";
+			}
+			// Color code callsign: green=confirmed, yellow=worked
+			if (single.cnfmd_call) {
+				wked_info = "text-success";
+			} else if (single.worked_call) {
+				wked_info = "text-warning";
+			} else {
+				wked_info = "";
+			}
+
+			// Build LoTW badge with color coding based on last upload age
+			var lotw_badge = '';
+			if (single.dxcc_spotted && single.dxcc_spotted.lotw_user) {
+				let lclass = '';
+				if (single.dxcc_spotted.lotw_user > 365) {
+					lclass = 'lotw_info_red';
+				} else if (single.dxcc_spotted.lotw_user > 30) {
+					lclass = 'lotw_info_orange';
+				} else if (single.dxcc_spotted.lotw_user > 7) {
+					lclass = 'lotw_info_yellow';
+				}
+				let lotw_title = 'LoTW User. Last upload was ' + single.dxcc_spotted.lotw_user + ' days ago';
+				lotw_badge = '<a id="lotw_badge" href="https://lotw.arrl.org/lotwuser/act?act=' + single.spotted + '" target="_blank">' + buildBadge('success ' + lclass, '', lotw_title, 'L') + '</a>';
+			}
+
+			// Build activity badges (POTA, SOTA, WWFF, IOTA, Contest, Worked)
+			let activity_flags = '';
+
+			if (single.dxcc_spotted && single.dxcc_spotted.pota_ref) {
+				let pota_title = 'POTA: ' + single.dxcc_spotted.pota_ref;
+				if (single.dxcc_spotted.pota_mode) {
+					pota_title += ' (' + single.dxcc_spotted.pota_mode + ')';
+				}
+				pota_title += ' - Click to view on POTA.app';
+				activity_flags += '<a href="#" class="activity-flag-link" data-activity-type="pota" data-ref="' + single.dxcc_spotted.pota_ref + '" onclick="event.preventDefault(); event.stopPropagation();">' + buildBadge('success', 'fa-tree', pota_title) + '</a>';
+			}
+
+			if (single.dxcc_spotted && single.dxcc_spotted.sota_ref) {
+				let sota_title = 'SOTA: ' + single.dxcc_spotted.sota_ref + ' - Click to view on SOTL.as';
+				activity_flags += '<a href="#" class="activity-flag-link" data-activity-type="sota" data-ref="' + single.dxcc_spotted.sota_ref + '" onclick="event.preventDefault(); event.stopPropagation();">' + buildBadge('primary', 'fa-mountain', sota_title) + '</a>';
+			}
+
+			if (single.dxcc_spotted && single.dxcc_spotted.wwff_ref) {
+				let wwff_title = 'WWFF: ' + single.dxcc_spotted.wwff_ref + ' - Click to view on WWFF.co';
+				activity_flags += '<a href="#" class="activity-flag-link" data-activity-type="wwff" data-ref="' + single.dxcc_spotted.wwff_ref + '" onclick="event.preventDefault(); event.stopPropagation();">' + buildBadge('success', 'fa-leaf', wwff_title) + '</a>';
+			}
+
+			if (single.dxcc_spotted && single.dxcc_spotted.iota_ref) {
+				activity_flags += buildBadge('info', 'fa-island-tropical', 'IOTA: ' + single.dxcc_spotted.iota_ref);
+			}
+
+			if (single.dxcc_spotted && single.dxcc_spotted.isContest) {
+				activity_flags += buildBadge('warning', 'fa-trophy', 'Contest');
+			}
+
+			if (single.worked_call) {
+				let worked_title = 'Worked Before';
+				if (single.last_wked && single.last_wked.LAST_QSO && single.last_wked.LAST_MODE) {
+					worked_title = 'Worked: ' + single.last_wked.LAST_QSO + ' in ' + single.last_wked.LAST_MODE;
+				}
+			let worked_badge_type = single.cnfmd_call ? 'success' : 'warning';
+			activity_flags += buildBadge(worked_badge_type, 'fa-check-circle', worked_title, null, true);
+		}
+
+		// Build table row array
+		data[0] = [];
+		// Time column: extract time portion from ISO datetime (e.g., "2025-10-31T23:13:06.347Z" -> "23:13:06")
+		if (timeOnly) {
+			// ISO format: split by 'T' and take time part, then remove milliseconds and Z
+			if (timeOnly.includes('T')) {
+				timeOnly = timeOnly.split('T')[1].split('.')[0];
+			}
+		}
+		data[0].push(timeOnly || '');
+		// Frequency column: convert kHz to MHz with 3 decimal places
+		let freqMHz = (single.frequency / 1000).toFixed(3);
+		data[0].push(freqMHz);			// Mode column: capitalize properly
+
+			let displayMode = single.mode || '';
+			if (displayMode.toLowerCase() === 'phone') displayMode = 'Phone';
+			else if (displayMode.toLowerCase() === 'cw') displayMode = 'CW';
+			else if (displayMode.toLowerCase() === 'digi') displayMode = 'Digi';
+			data[0].push(displayMode);
+
+			// Callsign column: wrap in QRZ link with color coding
+			let qrzLink = '<a href="https://www.qrz.com/db/' + single.spotted + '" target="_blank" onclick="event.stopPropagation();" data-bs-toggle="tooltip" title="Click to view ' + single.spotted + ' on QRZ.com">' + single.spotted + '</a>';
+			wked_info = ((wked_info != '' ? '<span class="' + wked_info + '">' : '') + qrzLink + (wked_info != '' ? '</span>' : ''));
+			var spotted = wked_info;
+			data[0].push(spotted);
+			// DXCC entity column: flag emoji + entity name with color coding
+			let dxcc_entity_full = single.dxcc_spotted.entity;
+			if (single.dxcc_spotted.flag) {
+				let flagSpan = '<span class="flag-emoji">' + single.dxcc_spotted.flag + '</span>';
+				dxcc_wked_info = ((dxcc_wked_info != '' ? '<span class="' + dxcc_wked_info + '">' : '') + flagSpan + ' <span style="font-family: monospace;">' + single.dxcc_spotted.entity + '</span>' + (dxcc_wked_info != '' ? '</span>' : ''));
+			} else {
+				dxcc_wked_info = ((dxcc_wked_info != '' ? '<span class="' + dxcc_wked_info + '">' : '') + '<span style="font-family: monospace;">' + single.dxcc_spotted.entity + '</span>' + (dxcc_wked_info != '' ? '</span>' : ''));
+			}
+			data[0].push('<a href="javascript:spawnLookupModal(\'' + single.dxcc_spotted.dxcc_id + '\',\'dxcc\')"; data-bs-toggle="tooltip" title="See details for ' + dxcc_entity_full + '">' + dxcc_wked_info + '</a>');
+
+			// Continent column: color code based on worked/confirmed status
+			var continent_wked_info;
+			if (single.cnfmd_continent) {
+				continent_wked_info = "text-success";
+			} else if (single.worked_continent) {
+				continent_wked_info = "text-warning";
+			} else {
+				continent_wked_info = "text-danger";
+			}
+			continent_wked_info = ((continent_wked_info != '' ? '<span class="' + continent_wked_info + '">' : '') + single.dxcc_spotted.cont + (continent_wked_info != '' ? '</span>' : ''));
+
+			data[0].push(continent_wked_info);
+			// Flags column: combine LoTW and activity badges
+			let flags_column = lotw_badge;
+			if (lotw_badge && activity_flags) {
+				flags_column += ' ';
+			}
+			flags_column += activity_flags;
+			data[0].push(flags_column);
+			data[0].push(single.spotter);
+			data[0].push(single.message || '');
+
+			// Add row to table (with "fresh" class for new spots animation)
+			if (oldtable.length > 0) {
+				let update = false;
+				oldtable.each(function (srow) {
+					if (JSON.stringify(srow) === JSON.stringify(data[0])) {
+						update = true;
+					}
+				});
+				if (!update) {
+					table.rows.add(data).draw().nodes().to$().addClass("fresh");
+				} else {
+					table.rows.add(data).draw();
+				}
+			} else {
+				table.rows.add(data).draw();
+			}
+		});
+
+		// Remove "fresh" highlight after 10 seconds
+		setTimeout(function () {
+			$(".fresh").removeClass("fresh");
+		}, 10000);
+
+		if (spots2render == 0) {
+			table.clear();
+			table.settings()[0].oLanguage.sEmptyTable = "No data available";
+			table.draw();
+		}
+
+		// Parse emoji flags for proper rendering
+		if (typeof twemoji !== 'undefined') {
+			twemoji.parse(document.querySelector('.spottable'), {
+				folder: 'svg',
+				ext: '.svg'
+			});
+		}
+
+		// Add hover tooltips to all rows
+		$('.spottable tbody tr').each(function() {
+			$(this).attr('title', lang_click_to_prepare_logging);
+		});
+
+		$('[data-bs-toggle="tooltip"]').tooltip();
+
+		let displayedCount = spots2render || 0;
+
+		// Update status bar after render completes
+		setTimeout(function() {
+			if (!isFetchInProgress) {
+				let actualDisplayedCount = table.rows({search: 'applied'}).count();
+				updateStatusBar(cachedSpotData.length, actualDisplayedCount, getServerFilterText(), getClientFilterText(), false, false);
+				$('#refreshIcon').removeClass('fa-spinner fa-spin').addClass('fa-hourglass-half');
+				$('#refreshTimer').text('Next update in ' + refreshCountdown + 's');
+			}
+		}, 100);
+	}
+
+	// ========================================
+	// BACKEND DATA FETCH
+	// ========================================
+
+	// Fetch spot data from DX cluster API
+	// Backend filters: band, de continent (where spotter is), mode
+	// Client filters applied after fetch: cwn, spotted continent, additionalFlags
+	function fill_list(de, maxAgeMinutes) {
+		var table = get_dtable();
+
+		// Normalize de continent parameter to array
+		let deContinent = Array.isArray(de) ? de : [de];
+		if (deContinent.includes('Any') || deContinent.length === 0) deContinent = ['Any'];
+
+		// Backend API only accepts single values for continent
+		// Band and mode are always 'All' - filtering happens client-side
+		let continentForAPI = 'Any';
+		if (deContinent.length === 1 && !deContinent.includes('Any')) continentForAPI = deContinent[0];
+
+		// Update backend filter state (only continent now)
+		loadedBackendFilters = {
+			continent: continentForAPI
+		};
+
+		lastFetchParams.continent = continentForAPI;
+		lastFetchParams.maxAge = maxAgeMinutes;
+
+		// Build API URL: /spots/{band}/{maxAge}/{continent}/{mode}
+		// Always use 'All' for band and mode - we filter client-side
+		let dxurl = dxcluster_provider + "/spots/All/" + maxAgeMinutes + "/" + continentForAPI + "/All";
+		console.log('Loading from backend: ' + dxurl);
+
+		// Cancel any in-flight request before starting new one
+		if (currentAjaxRequest) {
+			console.log('Aborting previous fetch request');
+			currentAjaxRequest.abort();
+			currentAjaxRequest = null;
+		}
+
+		isFetchInProgress = true;
+
+		updateStatusBar(0, 0, getServerFilterText(), getClientFilterText(), true, false);
+
+		currentAjaxRequest = $.ajax({
+			url: dxurl,
+			cache: false,
+			dataType: "json"
+		}).done(function(dxspots) {
+			currentAjaxRequest = null;
+			table.page.len(50);
+
+			if (dxspots.length > 0) {
+				dxspots.sort(SortByQrg);  // Sort by frequency
+				cachedSpotData = dxspots;
+			} else {
+				cachedSpotData = [];
+			}
+
+			lastFetchParams.timestamp = new Date();
+			isFetchInProgress = false;
+
+			renderFilteredSpots();  // Apply client-side filters and render
+			startRefreshTimer();  // Start 60s countdown
+
+		}).fail(function(jqXHR, textStatus) {
+			currentAjaxRequest = null;
+
+			// Don't show error if user cancelled the request
+			if (textStatus === 'abort') {
+				console.log('Fetch request aborted');
+				return;
+			}
+
+			cachedSpotData = null;
+			isFetchInProgress = false;
+			table.clear();
+			table.settings()[0].oLanguage.sEmptyTable = "Error loading spots. Please try again.";
+			table.draw();
+			updateStatusBar(0, 0, getServerFilterText(), getClientFilterText(), false, false);
+			startRefreshTimer();
+		});
+	}	// Highlight rows within ±20 kHz of specified frequency (for CAT integration)
 	function highlight_current_qrg(qrg) {
-		var table=get_dtable();
-		// var table=$('.spottable').DataTable();
+		var table = get_dtable();
 		table.rows().eq(0).each( function ( index ) {
 			let row = table.row( index );
 			var d=row.data();
@@ -211,11 +996,83 @@ $(function() {
 		});
 	}
 
+	// Initialize DataTable
 	var table=get_dtable();
-	table.order([1, 'asc']);
+	table.order([1, 'asc']);  // Sort by frequency column
 	table.clear();
 
-	// Function to get selected values from multi-select
+	// ========================================
+	// HELPER FUNCTIONS
+	// ========================================
+
+	// Build a badge HTML string with consistent styling
+	// type: badge color (success/primary/info/warning/danger)
+	// icon: FontAwesome icon class (e.g., 'fa-tree')
+	// title: tooltip text
+	// text: optional text content instead of icon
+	// isLast: if true, uses margin: 0 instead of negative margin
+	function buildBadge(type, icon, title, text = null, isLast = false) {
+		const margin = isLast ? '0' : '0 -0.5px 0 0';
+		const fontSize = text ? '0.7rem' : '0.65rem';
+		const content = text ? text : '<i class="fas ' + icon + '"></i>';
+		return '<small class="badge text-bg-' + type + '" style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin: ' + margin + '; font-size: ' + fontSize + '; line-height: 1;" data-bs-toggle="tooltip" title="' + title + '">' + content + '</small>';
+	}
+
+	// Map frequency (in kHz) to ham band name
+	function getBandFromFrequency(freq_khz) {
+		if (freq_khz >= 1800 && freq_khz <= 2000) return '160m';
+		if (freq_khz >= 3500 && freq_khz <= 4000) return '80m';
+		if (freq_khz >= 5250 && freq_khz <= 5450) return '60m';
+		if (freq_khz >= 7000 && freq_khz <= 7300) return '40m';
+		if (freq_khz >= 10100 && freq_khz <= 10150) return '30m';
+		if (freq_khz >= 14000 && freq_khz <= 14350) return '20m';
+		if (freq_khz >= 18068 && freq_khz <= 18168) return '17m';
+		if (freq_khz >= 21000 && freq_khz <= 21450) return '15m';
+		if (freq_khz >= 24890 && freq_khz <= 24990) return '12m';
+		if (freq_khz >= 28000 && freq_khz <= 29700) return '10m';
+		if (freq_khz >= 50000 && freq_khz <= 54000) return '6m';
+		if (freq_khz >= 70000 && freq_khz <= 71000) return '4m';
+		if (freq_khz >= 144000 && freq_khz <= 148000) return '2m';
+		if (freq_khz >= 222000 && freq_khz <= 225000) return '1.25m';
+		if (freq_khz >= 420000 && freq_khz <= 450000) return '70cm';
+		if (freq_khz >= 902000 && freq_khz <= 928000) return '33cm';
+		if (freq_khz >= 1240000 && freq_khz <= 1300000) return '23cm';
+		if (freq_khz >= 2300000 && freq_khz <= 2450000) return '13cm';
+		return 'All';
+	}
+
+	// Categorize mode as phone/cw/digi for filtering
+	function getModeCategory(mode) {
+		if (!mode) return null;
+
+		// Mode can come from server as lowercase category names (phone, cw, digi)
+		// or as actual mode names (SSB, LSB, FT8, etc.)
+		let modeLower = mode.toLowerCase();
+
+		// Check if already a category
+		if (['phone', 'cw', 'digi'].includes(modeLower)) {
+			return modeLower;
+		}
+
+		// Otherwise categorize by mode name
+		mode = mode.toUpperCase();
+
+		// Phone modes
+		if (['SSB', 'LSB', 'USB', 'FM', 'AM', 'DV'].includes(mode)) return 'phone';
+
+		// CW modes
+		if (['CW', 'CWR'].includes(mode)) return 'cw';
+
+		// Digital modes
+		if (['RTTY', 'PSK', 'PSK31', 'PSK63', 'FT8', 'FT4', 'JT65', 'JT9', 'MFSK',
+		     'OLIVIA', 'CONTESTIA', 'HELL', 'SSTV', 'FAX', 'PACKET', 'PACTOR',
+		     'THOR', 'DOMINO', 'MT63', 'ROS', 'WSPR'].includes(mode)) return 'digi';
+
+		// Return null for uncategorized modes instead of 'All'
+		return null;
+	}
+
+	// Get selected values from multi-select dropdown
 	function getSelectedValues(selectId) {
 		let values = $('#' + selectId).val();
 		if (!values || values.length === 0) {
@@ -224,39 +1081,130 @@ $(function() {
 		return values;
 	}
 
-	// Function to apply filters
-	function applyFilters() {
+	// ========================================
+	// SMART FILTER APPLICATION
+	// ========================================
+
+	// Intelligently decide whether to reload from backend or filter client-side
+	// Backend filter (requires new API call): de continent only
+	// Client filters (use cached data): band, mode, cwn, spotted continent, requiredFlags, additionalFlags
+	function applyFilters(forceReload = false) {
 		let band = getSelectedValues('band');
 		let de = getSelectedValues('decontSelect');
+		let continent = getSelectedValues('continentSelect');
 		let cwn = getSelectedValues('cwnSelect');
 		let mode = getSelectedValues('mode');
+		let additionalFlags = getSelectedValues('additionalFlags');
+		let requiredFlags = $('#requiredFlags').val() || [];
 
-		table.clear();
-		fill_list(band, de, dxcluster_maxage, cwn, mode);
+		let continentForAPI = 'Any';
+		if (de.length === 1 && !de.includes('Any')) {
+			continentForAPI = de[0];
+		}
+
+		console.log('applyFilters - Current backend filters:', loadedBackendFilters);
+		console.log('applyFilters - Requested backend params:', {continent: continentForAPI});
+
+		// Check if backend parameters changed (requires new data fetch)
+		// Only de continent affects backend now - band and mode are client-side only
+		let backendParamsChanged = forceReload ||
+			loadedBackendFilters.continent !== continentForAPI;
+
+		console.log('applyFilters - backendParamsChanged:', backendParamsChanged);
+
+		// Always update current filters for client-side filtering
+		currentFilters = {
+			band: band,
+			deContinent: de,              // Spots FROM continent (server filter)
+			spottedContinent: continent,  // Spotted STATION continent (client filter)
+			cwn: cwn,
+			mode: mode,
+			requiredFlags: requiredFlags,
+			additionalFlags: additionalFlags
+		};
+
+		if (backendParamsChanged) {
+			console.log('Reloading from backend: continent=' + continentForAPI);
+			table.clear();
+			fill_list(de, dxcluster_maxage);
+		} else {
+			console.log('Client-side filtering changed - using cached data');
+			renderFilteredSpots();
+		}
+
+		updateFilterIcon();
 	}
 
-	// Initial load
-	applyFilters();
+	initializeBackendFilters();
 
-	// Auto-refresh every 60 seconds
-	setInterval(function () { applyFilters(); }, 60000);
+	initFilterCheckboxes();
 
-	// Apply filters button click
-	$("#applyFiltersButton").on("click", function() {
-		applyFilters();
-		// Disable button after applying filters
-		$(this).prop('disabled', true);
+	applyFilters(true);
+
+	// Sync button states on initial load
+	syncQuickFilterButtons();
+	updateFilterIcon();
+
+	$("#applyFiltersButtonPopup").on("click", function() {
+		applyFilters(false);
+		$('#filterDropdown').dropdown('hide');
+	});
+
+	$("#clearFiltersButton").on("click", function() {
+		$('#cwnSelect').val(['All']);
+		$('#decontSelect').val(['Any']);
+		$('#continentSelect').val(['Any']);
+		$('#band').val(['All']);
+		$('#mode').val(['All']);
+		$('#additionalFlags').val(['All']);
+		$('#requiredFlags').val([]);
+
+		// Clear text search
+		$('#spotSearchInput').val('');
+		table.search('').draw();
+
+		syncQuickFilterButtons();
+		updateFilterIcon();
+		applyFilters(true);
+		$('#filterDropdown').dropdown('hide');
+	});
+
+	// Sync button states when dropdown is shown
+	$('#filterDropdown').on('show.bs.dropdown', function() {
+		syncQuickFilterButtons();
+	});
+
+	// Sync button states when dropdown is hidden
+	$('#filterDropdown').on('hide.bs.dropdown', function() {
+		syncQuickFilterButtons();
 	});
 
-	// Connect search input to DataTable
 	$("#spotSearchInput").on("keyup", function() {
 		table.search(this.value).draw();
 	});
 
-	// Remove old individual change handlers and keep only for specific use cases
-	// Note: Radio selector still triggers immediate update
+	$("#spotSearchInput").on("input", function() {
+		const cursorPos = this.selectionStart;
+		const oldValue = this.value;
+		const newValue = oldValue.replace(/0/g, "Ø");
+
+		if (newValue !== oldValue) {
+			this.value = newValue;
+			// Restore cursor position
+			this.setSelectionRange(cursorPos, cursorPos);
+			// Trigger search with new value
+			table.search(newValue).draw();
+		}
+	});
+
+	$("#searchIcon").on("click", function() {
+		const searchValue = $("#spotSearchInput").val();
+		if (searchValue.length > 2) {
+			table.search(searchValue).draw();
+		}
+	});
+
 	$("#radio").on("change", function() {
-		// Radio change doesn't affect filters, handled separately
 	});
 
 	$("#spottertoggle").on("click", function() {
@@ -279,7 +1227,6 @@ $(function() {
 	};
 
 	setInterval(function () {
-		// reset the pong flag if the last seen time is older than 1 second in case the qso window was closed
 		if (qso_window_last_seen < (Date.now()-1000)) {
 			pong_rcvd = false;
 		}
@@ -289,22 +1236,11 @@ $(function() {
 	let bc2qso = new BroadcastChannel('qso_wish');
 	var CatCallbackURL = "http://127.0.0.1:54321";
 
-	// set some times
-	let wait4pong = 2000; // we wait in max 2 seconds for the pong
-	let check_intv = 100; // check every 100 ms
+	let wait4pong = 2000;
+	let check_intv = 100;
 
-	$(document).on('click','#prepcall', function() {
+	function prepareLogging(call, qrg, mode) {
 		let ready_listener = true;
-		let call=this.innerText;
-		let qrg=''
-		let mode='';
-		if (this.parentNode.parentNode.className.indexOf('spotted_call')>=0) {
-			qrg=this.parentNode.parentNode.parentNode.cells[1].textContent*1000;
-			mode=this.parentNode.parentNode.parentNode.cells[8].textContent;
-		} else {
-			qrg=this.parentNode.parentNode.cells[1].textContent*1000;
-			mode=this.parentNode.parentNode.cells[8].textContent;
-		}
 
 		try {
 			irrelevant=fetch(CatCallbackURL + '/'+qrg+'/'+mode).catch(() => {
@@ -315,7 +1251,7 @@ $(function() {
 
 		let check_pong = setInterval(function() {
 			if (pong_rcvd || ((Date.now() - qso_window_last_seen) < wait4pong)) {
-                clearInterval(check_pong); // max time reached or pong received
+				clearInterval(check_pong);
 				bc2qso.postMessage({ frequency: qrg, call: call });
 			} else {
 				clearInterval(check_pong);
@@ -334,7 +1270,6 @@ $(function() {
                     newWindow.focus();
                 }
 
-				// wait for the ready message
                 bc2qso.onmessage = function(ev) {
 					if (ready_listener == true) {
 						if (ev.data === 'ready') {
@@ -345,6 +1280,21 @@ $(function() {
 				};
 			}
 		}, check_intv);
+	}
+
+	$(document).on('click','#prepcall', function() {
+		let call=this.innerText;
+		let qrg=''
+		let mode='';
+		if (this.parentNode.parentNode.className.indexOf('spotted_call')>=0) {
+			qrg=this.parentNode.parentNode.parentNode.cells[1].textContent*1000;
+			mode=this.parentNode.parentNode.parentNode.cells[2].textContent;
+		} else {
+			qrg=this.parentNode.parentNode.cells[1].textContent*1000;
+			mode=this.parentNode.parentNode.cells[2].textContent;
+		}
+
+		prepareLogging(call, qrg, mode);
 	});
 
 	$("#menutoggle").on("click", function() {
@@ -363,6 +1313,26 @@ $(function() {
 		}
 	});
 
+	$(document).on('click', '.activity-flag-link', function(e) {
+		e.stopPropagation();
+
+		let activityType = $(this).data('activity-type');
+		let ref = $(this).data('ref');
+		let url = '';
+
+		if (activityType === 'pota') {
+			url = 'https://pota.app/#/park/' + ref;
+		} else if (activityType === 'sota') {
+			url = 'https://sotl.as/summits/' + ref;
+		} else if (activityType === 'wwff') {
+			url = 'https://wwff.co/directory/?showRef=' + ref;
+		}
+
+		if (url) {
+			window.open(url, '_blank');
+		}
+	});
+
 	let websocket = null;
 	let reconnectAttempts = 0;
 	let websocketEnabled = false;
@@ -405,26 +1375,23 @@ $(function() {
 	}
 
 	function handleWebSocketData(data) {
-		// Handle welcome message
 		if (data.type === 'welcome') {
 			return;
 		}
-		// Handle radio status updates
 		if (data.type === 'radio_status' && data.radio && ($(".radios option:selected").val() == 'ws')) {
 			data.updated_minutes_ago = Math.floor((Date.now() - data.timestamp) / 60000);
 			data.cat_url = 'http://127.0.0.1:54321';
-			// Cache the radio data
 			updateCATui(data);
 		}
 	}
 
 
 	$( "#radio" ).change(function() {
-		if (CATInterval) {	// We've a change - stop polling if active
+		if (CATInterval) {
 			clearInterval(CATInterval);
 			CATInterval=null;
 		}
-		if (websocket) {	// close possible websocket connection
+		if (websocket) {
 			websocket.close();
 			websocketEnabled = false;
 		}
@@ -496,9 +1463,557 @@ $(function() {
 		}
 	};
 
-$.fn.dataTable.moment(custom_date_format + ' HH:mm');
+	$.fn.dataTable.moment(custom_date_format + ' HH:mm');
 
-// If a radios selected from drop down select radio update.
-$('#radio').change();
+	$('#radio').change();
+
+	let isFullscreen = false;
+
+	$('#fullscreenToggle').on('click', function() {
+		const container = $('#bandmapContainer');
+		const icon = $('#fullscreenIcon');
+		const radioSelector = container.find('.d-flex.align-items-center.mb-3').first();
+
+		if (!isFullscreen) {
+			container.addClass('bandmap-fullscreen');
+			$('body').addClass('fullscreen-active');
+			icon.removeClass('fa-expand').addClass('fa-compress');
+			$(this).attr('title', 'Exit Fullscreen');
+
+			radioSelector.hide();
+			$('#radio_status').hide();
+			$('.messages').hide();
+
+			isFullscreen = true;
+
+			// Request browser fullscreen
+			const elem = document.documentElement;
+			if (elem.requestFullscreen) {
+				elem.requestFullscreen().catch(err => {
+					console.log('Fullscreen request failed:', err);
+				});
+			} else if (elem.webkitRequestFullscreen) { // Safari
+				elem.webkitRequestFullscreen();
+			} else if (elem.msRequestFullscreen) { // IE11
+				elem.msRequestFullscreen();
+			}
+
+			setTimeout(function() {
+				if ($.fn.DataTable.isDataTable('.spottable')) {
+					$('.spottable').DataTable().columns.adjust();
+				}
+			}, 100);
+		} else {
+			container.removeClass('bandmap-fullscreen');
+			$('body').removeClass('fullscreen-active');
+			icon.removeClass('fa-compress').addClass('fa-expand');
+			$(this).attr('title', 'Toggle Fullscreen');
+
+			radioSelector.show();
+			$('#radio_status').show();
+			$('.messages').show();
+
+			isFullscreen = false;
+
+			// Exit browser fullscreen
+			if (document.exitFullscreen) {
+				document.exitFullscreen().catch(err => {
+					console.log('Exit fullscreen failed:', err);
+				});
+			} else if (document.webkitExitFullscreen) { // Safari
+				document.webkitExitFullscreen();
+			} else if (document.msExitFullscreen) { // IE11
+				document.msExitFullscreen();
+			}
+
+			setTimeout(function() {
+				if ($.fn.DataTable.isDataTable('.spottable')) {
+					$('.spottable').DataTable().columns.adjust();
+				}
+			}, 100);
+		}
+	});
+
+	$(document).on('keydown', function(e) {
+		if (e.key === 'Escape' && isFullscreen) {
+			$('#fullscreenToggle').click();
+		}
+	});
+
+	// ========================================
+	// QUICK FILTER TOGGLE BUTTONS
+	// ========================================
+
+	// Toggle CW mode filter
+	$('#toggleCwFilter').on('click', function() {
+		let currentValues = $('#mode').val() || [];
+
+		// Remove 'All' if present
+		if (currentValues.includes('All')) {
+			currentValues = currentValues.filter(v => v !== 'All');
+		}
+
+		if (currentValues.includes('cw')) {
+			// Remove CW filter
+			currentValues = currentValues.filter(v => v !== 'cw');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			// Add CW filter
+			currentValues.push('cw');
+		}
+
+		$('#mode').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	// Toggle Digital mode filter
+	$('#toggleDigiFilter').on('click', function() {
+		let currentValues = $('#mode').val() || [];
+
+		// Remove 'All' if present
+		if (currentValues.includes('All')) {
+			currentValues = currentValues.filter(v => v !== 'All');
+		}
+
+		if (currentValues.includes('digi')) {
+			// Remove Digi filter
+			currentValues = currentValues.filter(v => v !== 'digi');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			// Add Digi filter
+			currentValues.push('digi');
+		}
+
+		$('#mode').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	// Toggle Phone mode filter
+	$('#togglePhoneFilter').on('click', function() {
+		let currentValues = $('#mode').val() || [];
+
+		// Remove 'All' if present
+		if (currentValues.includes('All')) {
+			currentValues = currentValues.filter(v => v !== 'All');
+		}
+
+		if (currentValues.includes('phone')) {
+			// Remove Phone filter
+			currentValues = currentValues.filter(v => v !== 'phone');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			// Add Phone filter
+			currentValues.push('phone');
+		}
+
+		$('#mode').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	// Band filter buttons
+	$('#toggle160mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('160m')) {
+			currentValues = currentValues.filter(v => v !== '160m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('160m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle80mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('80m')) {
+			currentValues = currentValues.filter(v => v !== '80m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('80m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle60mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('60m')) {
+			currentValues = currentValues.filter(v => v !== '60m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('60m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle40mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('40m')) {
+			currentValues = currentValues.filter(v => v !== '40m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('40m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle30mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('30m')) {
+			currentValues = currentValues.filter(v => v !== '30m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('30m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle20mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('20m')) {
+			currentValues = currentValues.filter(v => v !== '20m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('20m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle17mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('17m')) {
+			currentValues = currentValues.filter(v => v !== '17m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('17m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle15mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('15m')) {
+			currentValues = currentValues.filter(v => v !== '15m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('15m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle12mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('12m')) {
+			currentValues = currentValues.filter(v => v !== '12m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('12m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle10mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('10m')) {
+			currentValues = currentValues.filter(v => v !== '10m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('10m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle6mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('6m')) {
+			currentValues = currentValues.filter(v => v !== '6m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('6m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle4mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('4m')) {
+			currentValues = currentValues.filter(v => v !== '4m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('4m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle2mFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('2m')) {
+			currentValues = currentValues.filter(v => v !== '2m');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('2m');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle70cmFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('70cm')) {
+			currentValues = currentValues.filter(v => v !== '70cm');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('70cm');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggle23cmFilter').on('click', function() {
+		let currentValues = $('#band').val() || [];
+		if (currentValues.includes('All')) currentValues = currentValues.filter(v => v !== 'All');
+		if (currentValues.includes('23cm')) {
+			currentValues = currentValues.filter(v => v !== '23cm');
+			if (currentValues.length === 0) currentValues = ['All'];
+		} else {
+			currentValues.push('23cm');
+		}
+		$('#band').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	// Continent filter buttons (spotter's continent - de continent)
+	$('#toggleAfricaFilter').on('click', function() {
+		let currentValues = $('#decontSelect').val() || [];
+		if (currentValues.includes('Any')) currentValues = currentValues.filter(v => v !== 'Any');
+		if (currentValues.includes('AF')) {
+			currentValues = currentValues.filter(v => v !== 'AF');
+			if (currentValues.length === 0) currentValues = ['Any'];
+		} else {
+			currentValues.push('AF');
+		}
+		$('#decontSelect').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggleAsiaFilter').on('click', function() {
+		let currentValues = $('#decontSelect').val() || [];
+		if (currentValues.includes('Any')) currentValues = currentValues.filter(v => v !== 'Any');
+		if (currentValues.includes('AS')) {
+			currentValues = currentValues.filter(v => v !== 'AS');
+			if (currentValues.length === 0) currentValues = ['Any'];
+		} else {
+			currentValues.push('AS');
+		}
+		$('#decontSelect').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggleEuropeFilter').on('click', function() {
+		let currentValues = $('#decontSelect').val() || [];
+		if (currentValues.includes('Any')) currentValues = currentValues.filter(v => v !== 'Any');
+		if (currentValues.includes('EU')) {
+			currentValues = currentValues.filter(v => v !== 'EU');
+			if (currentValues.length === 0) currentValues = ['Any'];
+		} else {
+			currentValues.push('EU');
+		}
+		$('#decontSelect').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggleNorthAmericaFilter').on('click', function() {
+		let currentValues = $('#decontSelect').val() || [];
+		if (currentValues.includes('Any')) currentValues = currentValues.filter(v => v !== 'Any');
+		if (currentValues.includes('NA')) {
+			currentValues = currentValues.filter(v => v !== 'NA');
+			if (currentValues.length === 0) currentValues = ['Any'];
+		} else {
+			currentValues.push('NA');
+		}
+		$('#decontSelect').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	$('#toggleSouthAmericaFilter').on('click', function() {
+		let currentValues = $('#decontSelect').val() || [];
+		if (currentValues.includes('Any')) currentValues = currentValues.filter(v => v !== 'Any');
+		if (currentValues.includes('SA')) {
+			currentValues = currentValues.filter(v => v !== 'SA');
+			if (currentValues.length === 0) currentValues = ['Any'];
+		} else {
+			currentValues.push('SA');
+		}
+		$('#decontSelect').val(currentValues).trigger('change');
+		syncQuickFilterButtons();
+		applyFilters(false);
+	});
+
+	// Toggle LoTW User filter
+	$('#toggleLotwFilter').on('click', function() {
+		let currentValues = $('#requiredFlags').val() || [];
+		let btn = $(this);
+
+		if (currentValues.includes('lotw')) {
+			// Remove LoTW filter
+			currentValues = currentValues.filter(v => v !== 'lotw');
+			btn.removeClass('btn-warning').addClass('btn-primary');
+			btn.find('i').removeClass('fa-check-circle').addClass('fa-upload');
+		} else {
+			// Add LoTW filter
+			currentValues.push('lotw');
+			btn.removeClass('btn-primary').addClass('btn-warning');
+			btn.find('i').removeClass('fa-upload').addClass('fa-check-circle');
+		}
+
+		$('#requiredFlags').val(currentValues).trigger('change');
+		applyFilters(false);
+	});
+
+	// Toggle Not Worked Before filter
+	$('#toggleNotWorkedFilter').on('click', function() {
+		let currentValues = $('#requiredFlags').val() || [];
+		let btn = $(this);
+
+		if (currentValues.includes('notworked')) {
+			// Remove Not Worked filter
+			currentValues = currentValues.filter(v => v !== 'notworked');
+			btn.removeClass('btn-warning').addClass('btn-primary');
+			btn.find('i').removeClass('fa-check-circle').addClass('fa-star');
+		} else {
+			// Add Not Worked filter
+			currentValues.push('notworked');
+			btn.removeClass('btn-primary').addClass('btn-warning');
+			btn.find('i').removeClass('fa-star').addClass('fa-check-circle');
+		}
+
+		$('#requiredFlags').val(currentValues).trigger('change');
+		applyFilters(false);
+	});
+
+	// Toggle DXCC Needed filter (not worked DXCC)
+	$('#toggleDxccNeededFilter').on('click', function() {
+		let currentValues = $('#cwnSelect').val() || [];
+		let btn = $(this);
+
+		if (currentValues.length === 1 && currentValues[0] === 'notwkd') {
+			// Remove DXCC filter - reset to All
+			currentValues = ['All'];
+			btn.removeClass('btn-warning').addClass('btn-primary');
+			btn.find('i').removeClass('fa-check-circle').addClass('fa-globe');
+		} else {
+			// Set DXCC filter to Not Worked only
+			currentValues = ['notwkd'];
+			btn.removeClass('btn-primary').addClass('btn-warning');
+			btn.find('i').removeClass('fa-globe').addClass('fa-check-circle');
+		}
+
+		$('#cwnSelect').val(currentValues).trigger('change');
+		applyFilters(false);
+	});
+
+	// Toggle Contest filter
+	$('#toggleContextFilter').on('click', function() {
+		let currentValues = $('#additionalFlags').val() || [];
+		let btn = $(this);
+
+		// Remove 'All' if present
+		if (currentValues.includes('All')) {
+			currentValues = currentValues.filter(v => v !== 'All');
+		}
+
+		if (currentValues.includes('Contest')) {
+			// Remove Contest filter
+			currentValues = currentValues.filter(v => v !== 'Contest');
+			if (currentValues.length === 0) currentValues = ['All'];
+			btn.removeClass('btn-warning').addClass('btn-primary');
+			btn.find('i').removeClass('fa-check-circle').addClass('fa-trophy');
+		} else {
+			// Add Contest filter
+			currentValues.push('Contest');
+			btn.removeClass('btn-primary').addClass('btn-warning');
+			btn.find('i').removeClass('fa-trophy').addClass('fa-check-circle');
+		}
+
+		$('#additionalFlags').val(currentValues).trigger('change');
+		applyFilters(false);
+	});
+
+	// Toggle Geo Hunter filter (POTA, SOTA, IOTA, WWFF)
+	$('#toggleGeoHunterFilter').on('click', function() {
+		let currentValues = $('#additionalFlags').val() || [];
+		let btn = $(this);
+		let geoFlags = ['POTA', 'SOTA', 'IOTA', 'WWFF'];
+
+		// Remove 'All' if present
+		if (currentValues.includes('All')) {
+			currentValues = currentValues.filter(v => v !== 'All');
+		}
+
+		// Check if any geo flag is active
+		let hasGeoFlag = geoFlags.some(flag => currentValues.includes(flag));
+
+		if (hasGeoFlag) {
+			// Remove all geo flags
+			currentValues = currentValues.filter(v => !geoFlags.includes(v));
+			if (currentValues.length === 0) currentValues = ['All'];
+			btn.removeClass('btn-warning').addClass('btn-primary');
+			btn.find('i').removeClass('fa-check-circle').addClass('fa-map-marked-alt');
+		} else {
+			// Add all geo flags
+			currentValues = currentValues.concat(geoFlags.filter(flag => !currentValues.includes(flag)));
+			btn.removeClass('btn-primary').addClass('btn-warning');
+			btn.find('i').removeClass('fa-map-marked-alt').addClass('fa-check-circle');
+		}
+
+		$('#additionalFlags').val(currentValues).trigger('change');
+		applyFilters(false);
+	});
 
 });