@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ======================================================================= */
/* ===== AESTHETICS MASTER CONTROL PANEL                             ===== */
/* ======================================================================= */
/* Adjust the values in this section to easily change the entire look
   and feel of the dashboard's glass effects and video background. */
:root {
    /* --- Glass & Blur Controls --- */
    
    /* Sets the blur intensity for the main data panel (Notifications, Location, etc.).
       Higher value = more blur. Recommended: 10px to 40px. */
    --data-panel-blur-intensity: 60px;

    /* Sets the blur intensity for the top map panel. */
    --map-panel-blur-intensity: 30px;


    /* --- "Smoky Glass" Background Opacity Controls --- */

    /* Controls the background darkness/opacity of the data panel in NORMAL mode.
       Value is from 0.0 (fully transparent) to 1.0 (fully opaque). */
    --data-panel-opacity-normal: rgba(0, 0, 0, 0.3);
    
    /* Controls the background darkness/opacity of the data panel in FULLSCREEN mode. */
    --data-panel-opacity-fullscreen: rgba(0, 0, 0, 0.7);

    /* Controls the background darkness/opacity of the TOP MAP panel. */
    --map-panel-opacity: rgba(28, 28, 30, 0.8);


    /* --- Background Video Controls --- */

    /* Controls the opacity/visibility of the background video when in fullscreen.
       Value is from 0.0 (invisible) to 1.0 (fully visible). */
    --video-opacity: 0.3;

    /* Controls the brightness of the background video.
       1.0 = normal brightness. 0.7 = 70% bright (dimmer). 1.5 = brighter. */
    --video-brightness: 1;
	
	/* Controls the playback speed of the video. 1.0 = normal speed.
       0.5 = half speed. 2.0 = double speed. */
    --video-playback-speed: 1;


    /* --- Original Theme Variables (Do Not Change) --- */
    --bg-color: #000000;
    --panel-bg: var(--map-panel-opacity); /* This now uses your control variable */
    --border-color: rgba(255, 255, 255, 0.15);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --font-family: 'Inter', sans-serif;
    --panel-border-radius: 18px;
    --sidebar-width: 280px;
}

/* --- Base & Layout --- */
body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-family);
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

.dashboard-container {
    display: flex;
    width: 100%;
    height: 100%;
    background: #121212;
}

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-width);
    padding: 24px;
    background: rgba(20, 20, 22, 0.8);
    border-right: 1px solid var(--border-color);
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease-in-out;
    flex-shrink: 0;
    z-index: 1100;
}
.sidebar-title { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.sidebar-search-container { display: flex; align-items: center; background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 8px 12px; margin-bottom: 16px; }
.sidebar-search-container i { color: var(--text-secondary); margin-right: 8px; font-size: 14px; }
.sidebar-search-container input { width: 100%; background: transparent; border: none; color: var(--text-primary); font-size: 14px; }
.sidebar-search-container input:focus { outline: none; }
.device-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; }
.device-list li { display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; border: 1px solid transparent; }
.device-list li.selected { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.device-list li:not(.selected):hover { background: rgba(255, 255, 255, 0.05); }
.device-list li.placeholder { color: var(--text-secondary); }
.status-indicator { width: 8px; height: 8px; border-radius: 50%; margin-right: 12px; background-color: #FF5733 /* orange indicator */; transition: background-color 0.3s ease; }
.status-indicator.offline { background-color: #8E8E93; }
.device-info { flex-grow: 1; }
.device-name { font-weight: 500; }
.device-details { font-size: 12px; color: var(--text-secondary); }
.device-actions { display: flex; align-items: center; gap: 8px; }
.action-btn { background: none; border: none; color: var(--text-secondary); font-size: 16px; cursor: pointer; padding: 4px; transition: color 0.2s; }
.action-btn:hover { color: var(--text-primary); }
.toggle-switch { width: 38px; height: 22px; position: relative; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(120, 120, 128, 0.36); transition: .4s; border-radius: 34px; }
.toggle-switch .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
.toggle-switch input:checked + .slider { background-color: #08F7FE; /* cyan indicator */ }
.toggle-switch input:checked + .slider:before { transform: translateX(16px); background-color: #141416; }

/* --- Main Content --- */
.page-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; /* Crucial for containing a scrolling child element */
}
.main-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 24px 24px 0 28px; /* Give it its own padding */
    margin: 0; /* Reset any default margin */
    flex-shrink: 0; /* Prevent it from shrinking */
}
.main-content {
    flex-grow: 1;
    display: block;
    overflow-y: auto;
    padding: 24px;
	box-sizing: border-box;
}
.main-header { display: none; }
.panel {
    background: var(--panel-bg);
    border-radius: var(--panel-border-radius);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(var(--map-panel-blur-intensity));
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
	box-sizing: border-box;
}

/* Map Panel Styles */
.map-panel { height: 45vh; min-height: 350px; position: sticky; top: 0; z-index: 1; margin-bottom: 36px; }
#map { height: 100%; width: 100%; border-radius: var(--panel-border-radius); }
.map-overlay { position: absolute; z-index: 10; display: flex; gap: 8px; align-items: center; transition: opacity 0.2s ease, visibility 0.2s ease; }
.map-overlay.top-left { top: 16px; left: 16px; }
.map-overlay.top-right { top: 16px; right: 16px; }
.map-overlay.bottom-right { bottom: 16px; right: 16px; flex-direction: column; align-items: flex-end; }
.map-overlay.bottom-center { bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.5); color: var(--text-secondary); font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.zoom-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.map-type-control, .map-options-control label { padding: 0; display: flex; align-items: center; border-radius: 8px; overflow: hidden; }
.map-type-control button { background: none; border: none; color: var(--text-secondary); padding: 8px 14px; cursor: pointer; transition: 0.2s ease; font-size: 14px; }
.map-type-control button.active { background-color: var(--text-primary); color: var(--bg-color); }
.map-options-control input { display: none; }
.map-options-control label { padding: 8px 14px; cursor: pointer; user-select: none; }
.map-options-control input:checked + label { background-color: rgba(255, 255, 255, 0.2); color: var(--text-primary); }
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
  70% {
    transform: scale(1.4);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

/* This is the new style for the marker */
.historical-pin {
    /* This creates the stable, central red dot */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FF5252; /* A vibrant red */
    border: 2px solid white;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    transform: translate(-50%, -50%);
    
    /* This links the animation to the marker */
    animation: pulse 2s infinite;
}

/* Data Explorer Panel */
.data-explorer-panel { height: auto; position: relative; z-index: 2; }
.explorer-view { display: none; width: 100%; height: 100%; flex-direction: column; color: var(--text-secondary); box-sizing: border-box; }
.explorer-view.active { display: flex; }
#explorer-device-view { padding: 0; }
.panel-header { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.header-line-1, .header-line-2 { display: flex; align-items: center; width: 100%; gap: 16px; }
.header-line-1 h2 { font-size: 20px; font-weight: 600; margin: 0; display: flex; align-items: center; flex: 1; min-width: 0; }
#explorer-header-title { display: flex; align-items: center; gap: 12px; flex-grow: 1; overflow: hidden; }
#explorer-header-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-btn { flex-shrink: 0; }
.explorer-action-icons { display: flex; gap: 8px; flex-shrink: 0; }
.glass-button, .category-buttons button { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-secondary); border-radius: 8px; font-size: 14px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.glass-button:hover, .category-buttons button:hover { background-color: rgba(255, 255, 255, 0.15); }
.category-buttons { display: flex; gap: 8px; }
.category-buttons button { padding: 8px 16px; }
.category-buttons button.active { background-color: var(--text-primary); color: var(--bg-color); border-color: transparent; }

/*
*   ======================================================================================
*   START: NEW & FINAL UNIVERSAL FIXES FOR ALL ICONS & LISTS
*   ======================================================================================
*/

/* FIX #1: Force all header icon buttons (Fullscreen, Search, etc.) to be correctly centered */
.panel-icon-btn.glass-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    flex-shrink: 0;
}
/* FORCE the size of the icons (like fa-expand) inside those buttons */
.panel-icon-btn.glass-button .fas {
    font-size: 14px !important;
    line-height: 1 !important;
}
.panel-icon-btn.filter-active {
    position: relative;
}
.panel-icon-btn.filter-active::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: #FFC300; /* Amber indicator color */
    border-radius: 50%;
    border: 1.5px solid var(--panel-bg);
}
.panel-icon-btn.search-active {
    position: relative;
}
.panel-icon-btn.search-active::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: #E333FF; /* A magenta indicator for search */
    border-radius: 50%;
    border: 1.5px solid var(--panel-bg);
}
/* Copy the same pattern as device-filter-active for consistency */
.action-btn.location-interval-btn-sidebar.interval-active {
    position: relative;
}
.action-btn.location-interval-btn-sidebar.interval-active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background-color: #F92672; /* pink indicator for interval */
    border-radius: 50%;
    border: 1.5px solid var(--panel-bg);
}
.action-btn.device-filter-active {
    position: relative;
    /* color: #34C759; /* Make the cog icon green */
}
.action-btn.device-filter-active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background-color: #33FF57; /* lime dot color */
    border-radius: 50%;
    border: 1.5px solid var(--panel-bg);
}

/* FIX #2: Force the entire list item to vertically center its content */
.data-list {
    list-style: none;
    margin: 0;
    padding: 0; /* This line removes the unwanted space on the left */
}
.data-list li {
    display: flex;
    justify-content: space-between;
    align-items: center; /* This is the main vertical centering property */
    min-height: 64px; /* Give the row a consistent, stable height */
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s; 
	touch-action: pan-y;
}
.data-list li:hover { background-color: rgba(255,255,255,0.03); }

/* FIX #3: Force the bell/location icon to align with the text block next to it */
.data-list-main {
    display: flex;
    align-items: center; /* Align the icon container and the text container */
    flex-grow: 1;
    gap: 12px;
}
.data-list-icon {
    width: 24px;
    text-align: center;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Debug logs specific icon styling */
.data-list-icon.info {
    color: #007AFF; /* Blue for info logs */
}
.data-list-icon.error {
    color: #FF453A; /* Red for error/rejected logs */
}
.data-list-icon.success {
    color: #34C759; /* Green for success/accepted logs */
}
.data-list-icon.warning {
    color: #FF9500; /* Orange for warning/enqueuing logs */
}
.data-list-icon.notification {
    color: #AF52DE; /* Purple for notification logs */
}
/* FORCE the size of the icons (like fa-bell) inside the list */
.data-list-icon .fas {
    font-size: 20px !important; /* Larger, clearer size */
    line-height: 1 !important;
}

/* Debug logs additional details styling */
.log-details {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    line-height: 1.2;
}

.log-details .log-detail {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.log-details .log-detail strong {
    color: var(--text-primary);
}
.data-list-info { flex-grow: 1; min-width: 0; }
.data-list-info p {
    margin: 0;
    overflow-wrap: break-word; /* Add this line */
    word-break: break-word;     /* Add this for broader compatibility */
}
.data-list-info .title { font-weight: 500; font-size: 15px; }
.data-list-info .subtitle { font-size: 13px; color: var(--text-secondary); }
.data-list-time { text-align: right; font-size: 12px; line-height: 1.4; color: var(--text-secondary); flex-shrink: 0; padding-left: 16px; }

/*
*   ======================================================================================
*   END: NEW & FINAL UNIVERSAL FIXES
*   ======================================================================================
*/

#explorer-content, #explorer-default-view > .explorer-content { padding: 0 16px 24px 16px; overflow-y: visible; height: auto; overscroll-behavior-y: contain; }
.filter-controls { display: none; gap: 16px; padding: 16px; align-items: center; }
.filter-controls.visible { display: flex; }
.search-bar { flex-grow: 1; position: relative; height: 36px; }
.search-bar input { width: 100%; height: 100%; padding: 8px 32px 8px 32px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); box-sizing: border-box; font-size: 14px; }
.search-bar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px; z-index: 1; }
.search-clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 18px; display: none; padding: 0 4px; line-height: 1; z-index: 2; }
.danger-btn:hover { background-color: rgba(255, 69, 58, 0.2) !important; color: #ff453a !important; }

/* Filter Modal */
.filter-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding-top: 40px; padding-bottom: 24px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.filter-modal-backdrop.visible { opacity: 1; visibility: visible; }
.filter-modal { width: 90%; max-width: 550px; background: var(--panel-bg); border-radius: var(--panel-border-radius); border: 1px solid var(--border-color); display: flex; flex-direction: column; max-height: 85vh; transform: scale(0.95); transition: transform 0.3s ease; }
.filter-modal-backdrop.visible .filter-modal { transform: scale(1); }
.filter-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border-color); }
.filter-modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
#filter-modal-close-btn, #location-interval-modal-close-btn, #device-filter-modal-close-btn { font-size: 20px; font-weight: 300; }
.filter-modal-content { padding: 24px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; flex-grow: 1; min-height: 0; }
.filter-modal.hide-apps .js-app-filter-section {
    display: none;
}
.filter-section h3 { margin: 0 0 12px 0; font-size: 14px; color: var(--text-secondary); font-weight: 500; }
.datetime-inputs { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.datetime-group { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.datetime-group label { font-size: 12px; color: var(--text-secondary); padding-left: 4px; }
.datetime-group input { -webkit-appearance: none; display: inline-block; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 4px; font-size: 14px; color: var(--text-primary); font-family: var(--font-family); text-align: center; width: 70%; min-height: 30px; }
.input-error { border-color: #ff453a !important; animation: shake 0.5s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
input.filter-box::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
.app-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.app-category-tag { padding: 8px 14px; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; border-radius: 18px; }
.app-category-tag:hover { background-color: rgba(255, 255, 255, 0.12); }
.app-category-tag.selected { background-color: #34C759; border-color: transparent; color: white; }
.filter-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border-color); }
.filter-modal-footer .glass-button { border-radius: 10px; padding: 8px 14px; background-color: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-color); color: var(--text-primary); }
.filter-modal-footer .glass-button.primary { background-color: #34C759; color: white; border-color: transparent; }
.filter-modal-footer .glass-button:hover { background-color: rgba(255, 255, 255, 0.12); }
.filter-modal-footer .glass-button.primary:hover { background-color: #30a94c; }

.filter-modal-footer .glass-button.danger-btn {
    background-color: rgba(255, 69, 58, 0.1);
    color: #ff453a;
    border-color: rgba(255, 69, 58, 0.2);
}

.filter-modal-footer .glass-button.danger-btn:hover {
    background-color: rgba(255, 69, 58, 0.2);
}

/* ADD THIS BLOCK to style the new filter mode selector */
.filter-mode-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 4px;
}
.filter-mode-selector label {
    flex-grow: 1;
    text-align: center;
}
.filter-mode-selector input {
    display: none;
}
.filter-mode-selector span {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: background-color 0.2s;
}
.filter-mode-selector input:checked + span {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

/* Expanding Map Search */
.panel-search-container { position: relative; display: flex; align-items: center; justify-content: flex-end; }
#map-search-input { width: 0; padding: 0; border: none; opacity: 0; transition: all 0.3s ease-in-out; background-color: rgba(0, 0, 0, 0.3); border-radius: 8px; height: 36px; color: var(--text-primary); box-sizing: border-box; font-family: var(--font-family); font-size: 14px; }
.panel-search-container.expanded #map-search-input { width: 200px; padding: 8px 32px 8px 12px; margin-right: -44px; opacity: 1; border: 1px solid var(--border-color); }
#map-search-clear-btn { position: absolute; right: 44px; z-index: 2; }

/* Fullscreen */
.panel.fullscreen {
    position: fixed;
    inset: 16px;
    width: auto;
    height: auto;
    z-index: 2000;
    border-radius: var(--panel-border-radius);
    box-shadow: 0px 20px 40px rgba(0,0,0,0.4);
}
.panel.fullscreen {
    /* Override the background to be more transparent */
    background: rgba(28, 28, 30, 0.05); /* From 80% opacity down to 60% */

    /* We can also make the border slightly softer */
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.panel.fullscreen #explorer-content,
.panel.fullscreen #explorer-default-view > .explorer-content {
    overflow-y: auto !important;
}
.fullscreen-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); z-index: 1999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.fullscreen-backdrop.visible { opacity: 1; visibility: visible; }

/* MOBILE LAYOUT */
.sidebar-backdrop { display: none; }

.sidebar-mobile-header {
    display: none; /* Hidden on desktop */
}

.sidebar-desktop-title {
    font-size: 22px;
    padding: 0;
    margin: 0 0 16px 0;
}

/* REPLACE your entire mobile media query with this one */
@media (max-width: 800px) {
    /* --- KEYBOARD FIX --- */
    .dashboard-container { 
        display: flex; 
        flex-direction: column;
        width: 100vw; 
        /* This uses the JS variable to prevent the keyboard bug */
        height: var(--app-height, 100dvh); 
        overflow: hidden; 
    }
    
    /* --- Original Layout Structure --- */
    .page-content-wrapper {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .main-content {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px; /* This padding provides space around both map and feed */
        box-sizing: border-box;
		overscroll-behavior-y: contain;
    }
    
    .main-title { 
        display: none; 
    }

    .main-header { 
        display: flex; 
        align-items: center; 
        padding: 12px 16px; 
        background: #121212; 
        border-bottom: 1px solid var(--border-color); 
        flex-shrink: 0; 
        z-index: 1000;
        position: relative;
    }
    
    /* Restores the original title and hamburger icon behavior */
    .main-header .header-title {
        flex-grow: 1;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        padding-right: 36px; /* Balances the hamburger icon */
        box-sizing: border-box;
    }

    .map-panel {
        position: sticky;
        top: 0;
        z-index: 10;
        margin: 0 0 16px 0;
        height: 40vh;
        min-height: 350px;
    }

    .data-explorer-panel {
        position: relative;
        z-index: 20;
        margin: 0;
    }

    .panel.fullscreen {
        inset: 8px;
    }

    /* --- Sidebar Styles --- */
    .sidebar-desktop-title { display: none; }
    .sidebar-mobile-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); }
    .sidebar-mobile-header .main-title { display: block; margin: 0; font-size: 18px; font-weight: 600; }
    #sidebar-close-btn { font-size: 24px; font-weight: 300; width: 32px; height: 32px; }
    .sidebar { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); transition: transform 0.3s ease-in-out; box-shadow: 4px 0px 20px rgba(0,0,0,0.3); }
    .sidebar-backdrop { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .dashboard-container.sidebar-open .sidebar { transform: translateX(0); }
    .dashboard-container.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
    .main-header .sidebar-toggle-btn { background: none; border: none; color: var(--text-primary); font-size: 20px; }
    #map-panel:has(#map-search-container.expanded) .map-overlay.top-right,
    #map-panel:has(#map-search-container.expanded) .map-overlay.bottom-right { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; }

    /* --- Modal Styles --- */
    .filter-modal { max-height: 85vh; width: 95%; }
    .filter-modal-content { overflow-y: auto; }
}

/* --- ADD THIS ENTIRE BLOCK FOR SWIPE-TO-DELETE --- */

/* 1. The list item still acts as our "viewport" or "mask". */
.list-item-viewport {
    width: 100%;
    position: relative;
    overflow: hidden; /* This now works because it's NOT a flex container. */
}

/* 2. The wrapper is now a FLEX container that we will slide. */
.swipe-wrapper {
    display: flex;
    width: calc(100% + 80px); /* Keep 80px for swipe distance, button is now smaller */

    /* Remove will-change and transition from CSS to avoid conflicts with JS */
}

/* 3. The content block (your text, icons, etc.). */
.list-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* CRITICAL FIX: The width is now calculated to fill the visible area precisely. */
    width: calc(100% - 80px);
    
    /* Ensures the content doesn't shrink. */
    flex-shrink: 0;

    /* This preserves your beautiful semi-transparent dashboard effect. */
    background: transparent;
}

/* 4. The actions block (the delete button container). */
.list-item-actions {
    display: flex;
    align-items: center;
    /* Let the container grow to fill the remaining 80px of the wrapper. */
    flex-grow: 1;
}

/* 5. The delete button itself. */
.list-item-delete-btn {
    background-color: #ff3b30;
    color: white;
    border: none;
    height: 48px; /* Smaller height with padding */
    width: 60px; /* Smaller width with padding */
    border-radius: 12px; /* Rounded corners */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 8px; /* Add margin for spacing */
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3); /* Subtle shadow */
    transition: all 0.2s ease; /* Smooth hover effect */
}

.list-item-delete-btn:hover {
    background-color: #ff453a; /* Slightly brighter on hover */
    transform: scale(1.05); /* Slight scale effect on hover */
}

/* 6. The "active" state when the item is swiped. */
.data-list li.swipe-active .swipe-wrapper {
    /* This slides the oversized wrapper to the left by the exact width of the delete button,
       bringing the button perfectly into the visible area of the <li>. */
    transform: translateX(-80px);
}

/* --- Custom Map Popup (OverlayView) Styling --- */

.custom-map-popup {
    /* This positions the popup to be centered above the marker's point */
    transform: translate(-50%, calc(-100% - 36px));
    /* This prevents the popup from capturing map clicks/drags */
    pointer-events: none;
    position: relative; /* Needed for the close button positioning */
}

.custom-map-popup-content {
    /* Apply the glass theme */
    background: var(--panel-bg); 
	backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    border-radius: 12px;
    
    /* Apply our own padding */
    padding: 16px;
    
    /* Text styles */
    color: var(--text-primary);
    font-family: var(--font-family);
    width: 220px; /* Set a consistent width */
    font-size: 14px;
    
    /* Re-enable pointer events for the content itself */
    pointer-events: auto;
}

/* Styling for text elements inside the popup */
.custom-map-popup-content strong {
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}
.custom-map-popup-content p {
    margin: 4px 0;
}
.custom-map-popup-content p.timestamp {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Style the close button */
.custom-map-popup-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.custom-map-popup-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- Global Google Maps POI InfoWindow Theme (Final, Forceful Fix) --- */

/* 1. Style the main outer container (our glass box). This part is working correctly. */
.gm-style .gm-style-iw-c {
    background: var(--panel-bg) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    padding: 0 !important; /* We will control padding from the inside */
}

/* 2. Style the inner scrolling content area. */
.gm-style .gm-style-iw-d {
    overflow: auto !important;
    color: var(--text-primary) !important; /* Set the master text color here */
    padding: 12px 16px !important; /* Apply our desired padding */
}

/* 3. **THE CRITICAL FIX**: This combined rule targets both the direct child DIV
      (the white box) AND every single element inside it, stripping their
      default background and forcing them to inherit our text color. */
.gm-style-iw-d > div,
.gm-style-iw-d > div * {
    background: transparent !important;
    color: inherit !important;
    font-family: var(--font-family) !important;
}

/* 4. Specifically restyle links so they are readable and stand out. */
.gm-style-iw-d a,
.gm-style-iw-d a:link,
.gm-style-iw-d a:visited {
    color: #8ab4f8 !important; /* A light, readable blue for links */
    text-decoration: none !important;
    font-weight: 500;
}

/* 5. Hide the little pointer/tail arrow. This is working. */
.gm-style-iw-t,
.gm-style-iw-tc::after {
    display: none !important;
}

/* 6. Restyle the close ('X') button. This is also working. */
.gm-style .gm-ui-hover-effect {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease;
}

.gm-style .gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.gm-style .gm-ui-hover-effect span {
    filter: invert(1) !important;
}


/* ===== BACKGROUND VIDEO STYLES ===== */

/* Background video element - positioned behind everything */
.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    opacity: 0; /* Hidden by default - only show in fullscreen */
    pointer-events: none; /* Don't interfere with UI interactions */
    transition: opacity 0.5s ease;
	filter: brightness(var(--video-brightness));
}

/* Mobile-specific fullscreen video positioning */
@media (max-width: 800px) {
    .background-video.video-visible {
        /* Mobile video positioning is same as desktop - absolute within panel */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Fallback: Also try to show video when panels are in fullscreen */
.panel.fullscreen + .background-video,
.data-explorer-panel.fullscreen + .background-video {
    opacity: 0.25 !important;
}

/* Ensure video doesn't show on mobile to save bandwidth */
@media (max-width: 800px) {
    .background-video {
        display: none;
    }
}
/* ===================================================================== */
/* ===== START: REVISED FIXES FOR STICKY SEARCH & LOCATION SCROLL ===== */
/* ===================================================================== */

/* --- Part A: Sticky Header & Search Bar Visibility --- */

/* This makes the header stick to the top of the panel during scrolling.
   It includes the background properties for the correct "glass" effect. */
#explorer-device-view .panel-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--panel-bg);
    backdrop-filter: blur(30px);
}

/* The search bar container is hidden by default. */
.filter-controls {
    display: none;
    padding: 4px 16px 16px 16px;
    border-bottom: 1px solid var(--border-color);
}

/* Your existing JS adds this class to show the search bar when the icon is clicked. */
.filter-controls.visible {
    display: flex;
}


/* --- Part B: The definitive Location Panel Scrolling Fix --- */

/* This rule targets the main scrolling area (.main-content) ONLY WHEN
   it contains a data panel that has the .locations-active class. */
.main-content:has(.data-explorer-panel.locations-active) {
    /* When the condition is met, it completely LOCKS the main page scroll. */
    overflow-y: hidden;
}

/* We then make the location panel itself a flexible container
   so we can control the height of its inner content. */
.data-explorer-panel.locations-active {
    display: flex;
    flex-direction: column;
    /* This forces the panel to take up all available space within the now non-scrolling viewport. */
    height: 100%;
}

/* Finally, we enable scrolling ONLY on the inner list of locations.
   It will grow to fill the available space inside the panel. */
.data-explorer-panel.locations-active #explorer-content {
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain; /* Prevents scroll-chaining */
}
/* =================================================================== */
/* ===== FINAL FIX FOR STICKY HEADER TRANSPARENCY                ===== */
/* =================================================================== */

/* 1. Remove the background from the main panel container.
   This prevents the "double layer" of transparency. The panel now only
   acts as a border and a clipping mask for its children. */
.data-explorer-panel {
    background: transparent;
    backdrop-filter: none;
}

/* 2. Give BOTH headers (global and device-view) their own glass background.
   We also handle the rounded corners here. */
.data-explorer-panel .panel-header {
    background: var(--panel-bg);
    backdrop-filter: blur(30px);
    border-top-left-radius: var(--panel-border-radius);
    border-top-right-radius: var(--panel-border-radius);
}

/* 3. Give BOTH content areas their own glass background and bottom corners.
   This is the surface that the header will scroll over. */
.data-explorer-panel .explorer-content {
    background: var(--panel-bg);
    backdrop-filter: blur(30px);
    border-bottom-left-radius: var(--panel-border-radius);
    border-bottom-right-radius: var(--panel-border-radius);
}

/* 4. A small adjustment because the global feed header and content are
   separate elements. We make sure they look like a single panel. */
#explorer-default-view .panel-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#explorer-default-view .explorer-content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* ======================================================================= */
/* ===== FINAL & CORRECTED LAYOUT, SCROLLING, AND VIDEO STYLING ====== */
/* ======================================================================= */

/* --- 1. Base Panel Styles (Shared) --- */
.data-explorer-panel { backdrop-filter: blur(var(--data-panel-blur-intensity)); }
.data-explorer-panel .panel-header,
.data-explorer-panel .explorer-content {
    background: transparent !important;
    backdrop-filter: none !important;
}


/* --- 2. State-Specific Backgrounds --- */
.data-explorer-panel:not(.fullscreen) { background: var(--data-panel-opacity-normal); }
.panel.fullscreen#data-explorer-panel { background: var(--data-panel-opacity-fullscreen); }


/* --- 3. Fullscreen Layout --- */
#data-explorer-panel.panel.fullscreen .explorer-view.active {
    height: auto;
    flex-grow: 1;
    min-height: 0;
}

#data-explorer-panel.panel.fullscreen .explorer-content {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto !important;
}

/* --- 4. Differential Scrolling --- */
.main-content:has(.data-explorer-panel.locations-active:not(.fullscreen)) {
    overflow-y: hidden;
    padding-bottom: 0;
}
.data-explorer-panel.locations-active:not(.fullscreen) {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.data-explorer-panel.locations-active:not(.fullscreen) #explorer-content {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}
.data-explorer-panel.locations-active.fullscreen {
    height: auto;
}

/* --- 5. Contained Video Styling --- */
.background-video.video-visible {
    display: block; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover; z-index: -1;
    opacity: var(--video-opacity); pointer-events: none;
}