/* Activity Card Styles - White boxes with shadows */
        .activity-card {
            background: var(--color-white);
            border-radius: var(--border-radius-xl);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            border: 1px solid var(--color-gray-200);
        }

        .activity-card--full {
            min-height: 600px;
            display: flex;
            flex-direction: column;
        }

        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-5);
            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
            border-bottom: 2px solid var(--color-gray-200);
        }

        .activity-title {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-900);
            margin: 0 0 var(--space-2) 0;
        }

        .activity-content {
            flex: 1;
            padding: var(--space-6);
            overflow-y: auto;
        }

        /* Column Headers */
        .leaderboard-table-header {
            display: grid;
            /* Rank | Image | Speed | Labels | Time | Actions - evenly distributed */
            grid-template-columns: 0.4fr 0.7fr 0.6fr 0.9fr 0.9fr 0.7fr;
            gap: var(--space-4);
            align-items: center;
            padding: var(--space-3) var(--space-4);
            margin-bottom: var(--space-3);
            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
            border-radius: var(--border-radius-md);
            border: 1px solid var(--color-gray-300);
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .leaderboard-table-header > div {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-700);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* All headers left-aligned */
        .header-rank,
        .header-image,
        .header-speed,
        .header-labels,
        .header-time,
        .header-actions {
            text-align: left;
        }

        .activity-legend {
            margin: 0;
            font-size: var(--font-size-sm);
            color: var(--color-gray-600);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-wrap: wrap;
        }

        .legend-badge {
            display: inline-block;
            padding: 0.125rem var(--space-2);
            border-radius: var(--border-radius-sm);
            font-size: 0.7rem;
            font-weight: var(--font-weight-semibold);
            color: var(--color-white);
        }

        .legend-label {
            font-weight: var(--font-weight-medium);
            color: var(--color-gray-700);
        }

        /* Device Selector Styles */
        .device-selector {
            margin-bottom: var(--space-6);
            padding: var(--space-5);
            background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
            border-radius: var(--border-radius-xl);
            box-shadow: var(--shadow-md);
            border: 1px solid var(--color-gray-200);
        }

        .device-selector-label {
            display: block;
            margin-bottom: var(--space-3);
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-900);
        }

        .device-select {
            width: 100%;
            padding: var(--space-3) var(--space-4);
            font-size: var(--font-size-base);
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--border-radius-md);
            transition: var(--transition-base);
        }

        .device-select:hover {
            border-color: var(--color-gray-400);
        }

        .device-select:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        /* Leaderboard Table */
        .leaderboard-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .leaderboard-row {
            display: grid;
            /* Rank | Image | Speed | Labels | Time | Actions - evenly distributed */
            grid-template-columns: 0.4fr 0.7fr 0.6fr 0.9fr 0.9fr 0.7fr;
            gap: var(--space-4);
            align-items: center;
            padding: var(--space-3) var(--space-4);
            margin-bottom: var(--space-2);
            border-radius: var(--border-radius-md);
            border: 1px solid var(--color-gray-200);
            background: transparent;
            overflow: hidden;
        }

        /* Hover effect removed for cleaner UX (Nov 2025) */

        .leaderboard-rank {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            text-align: left;
            color: var(--color-gray-700);
            padding-left: var(--space-2);
        }

        .leaderboard-speed {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-900);
            white-space: nowrap;
            text-align: left;
        }

        /* Threshold speed display for basic users (non-premium/non-admin) */
        .leaderboard-speed--threshold {
            font-size: var(--font-size-lg);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-sm);
            display: inline-block;
        }

        .leaderboard-speed--under {
            color: #059669;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .leaderboard-speed--at {
            color: #d97706;
            background: rgba(217, 119, 6, 0.12);
            border: 1px solid rgba(217, 119, 6, 0.3);
        }

        .leaderboard-speed--over {
            color: #dc2626;
            background: rgba(220, 38, 38, 0.12);
            border: 1px solid rgba(220, 38, 38, 0.3);
        }

        /* Locked speed display for public users */
        .leaderboard-speed--locked {
            position: relative;
        }

        .speed-locked-container {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .speed-blurred {
            filter: blur(5px);
            opacity: 0.6;
            user-select: none;
            pointer-events: none;
        }

        .speed-padlock {
            position: absolute;
            top: 50%;
            left: 15%;
            transform: translate(-50%, -50%);
            font-size: 1rem;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }

        /* Mobile adjustments for locked speed */
        @media (max-width: 768px) {
            .speed-padlock {
                font-size: 0.75rem;
                width: 22px;
                height: 22px;
            }
        }

        @media (max-width: 480px) {
            .speed-padlock {
                font-size: 0.625rem;
                width: 18px;
                height: 18px;
            }
        }

        /* Locked time display for public users */
        .time-locked-container {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .time-blurred {
            filter: blur(5px);
            opacity: 0.6;
            user-select: none;
        }

        .time-padlock {
            font-size: 0.75rem;
            opacity: 0.9;
        }

        .leaderboard-labels {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 0.25rem;
            min-height: 24px;
        }

        .leaderboard-direction {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-500);
            text-transform: capitalize;
            white-space: nowrap;
            text-align: left;
        }

        /* Percentage column removed - now showing in color-coded backgrounds only */

        .leaderboard-time {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 0.125rem;
            overflow: hidden;
            min-width: 0;
        }

        .leaderboard-time-exact {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-700);
            white-space: nowrap;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }

        .leaderboard-time-ago {
            font-size: var(--font-size-xs);
            color: var(--color-gray-700);
            white-space: nowrap;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }

        /* New detection badge - sparkle style to match other badges */
        .new-badge {
            display: inline-block;
            padding: var(--space-1) var(--space-2);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            line-height: 1;
            color: #9333ea;
            background: rgba(147, 51, 234, 0.12);
            border: 1px solid rgba(147, 51, 234, 0.3);
            border-radius: var(--border-radius-sm);
            white-space: nowrap;
        }

        /* Time condition badges with symbols */
        .time-badge {
            display: inline-block;
            padding: var(--space-1) var(--space-2);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            line-height: 1;
            border-radius: var(--border-radius-sm);
            white-space: nowrap;
            vertical-align: middle;
        }

        .time-badge--high-risk {
            color: #9a3412;
            background: rgba(255, 165, 0, 0.25);
            border: 1px solid rgba(255, 165, 0, 0.4);
        }

        .time-badge--dark {
            color: #1f2937;
            background: rgba(50, 50, 50, 0.2);
            border: 1px solid rgba(50, 50, 50, 0.3);
        }

        .time-badge--low-light {
            color: #374151;
            background: rgba(100, 100, 100, 0.15);
            border: 1px solid rgba(100, 100, 100, 0.25);
        }

        .time-badge--daylight {
            color: #065f46;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        /* Direction badges */
        .direction-badge {
            display: inline-block;
            padding: var(--space-1) var(--space-2);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            line-height: 1;
            border-radius: var(--border-radius-sm);
            white-space: nowrap;
            text-transform: capitalize;
        }

        .direction-badge--inbound {
            color: #059669;
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.35);
        }

        .direction-badge--outbound {
            color: #2563eb;
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.35);
        }

        /* Admin labels - Repeat Offender and Local badges */
        .admin-label {
            display: inline-block;
            padding: var(--space-1) var(--space-2);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            line-height: 1;
            border-radius: var(--border-radius-sm);
            white-space: nowrap;
        }

        .admin-label--repeat-offender {
            color: #dc2626;
            background: rgba(220, 38, 38, 0.12);
            border: 1px solid rgba(220, 38, 38, 0.3);
        }

        .admin-label--local {
            color: #d97706;
            background: rgba(217, 119, 6, 0.12);
            border: 1px solid rgba(217, 119, 6, 0.3);
        }

        .leaderboard-sticker {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            min-height: 110px;
            gap: 0.35rem;
        }

        .leaderboard-sticker img {
            max-width: 100px;
            max-height: 100px;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: var(--border-radius-md);
            cursor: pointer;
            border: none;
            box-shadow: none;
        }

        .leaderboard-sticker-placeholder {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: transparent;
            font-size: var(--font-size-4xl);
            background: transparent;
            border-radius: var(--border-radius-md);
            border: none;
        }

        /* Privacy blur for public users (LEGAL COMPLIANCE - GDPR Nov 2025) */
        .sticker-blur-container {
            position: relative;
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: help;
            overflow: visible;
        }

        .sticker-blurred {
            max-width: 90px;
            max-height: 90px;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: var(--border-radius-md);
            filter: blur(2px);
            opacity: 0.95;
            pointer-events: none;
        }

        .blur-privacy-notice {
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.75);
            color: white;
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            pointer-events: none;
            z-index: 2;
            white-space: nowrap;
        }

        /* Locked sticker for public users (Premium upsell) */
        .leaderboard-sticker .sticker-locked-container {
            position: relative;
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            border-radius: var(--border-radius-md);
        }

        .leaderboard-sticker .sticker-locked-container img.sticker-blurred-public {
            max-width: 100px;
            max-height: 100px;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: var(--border-radius-md);
            filter: blur(2px) !important;
            opacity: 0.85 !important;
            pointer-events: none;
            cursor: default;
        }

        .leaderboard-sticker .sticker-locked-container .sticker-padlock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }

        /* Mobile adjustments for locked sticker */
        @media (max-width: 768px) {
            .leaderboard-sticker .sticker-locked-container {
                width: 60px;
                height: 60px;
            }

            .leaderboard-sticker .sticker-locked-container img.sticker-blurred-public {
                max-width: 60px;
                max-height: 60px;
            }

            .leaderboard-sticker .sticker-locked-container .sticker-padlock {
                font-size: 1rem;
                width: 28px;
                height: 28px;
            }
        }

        @media (max-width: 480px) {
            .leaderboard-sticker .sticker-locked-container {
                width: 50px;
                height: 50px;
            }

            .leaderboard-sticker .sticker-locked-container img.sticker-blurred-public {
                max-width: 50px;
                max-height: 50px;
            }

            .leaderboard-sticker .sticker-locked-container .sticker-padlock {
                font-size: 0.875rem;
                width: 24px;
                height: 24px;
            }
        }

        .leaderboard-actions {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .btn-sticker {
            padding: var(--space-2) var(--space-3);
            background: var(--color-primary-light);
            color: var(--color-white);
            border: none;
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition-base);
            touch-action: manipulation;
            white-space: nowrap;
        }

        .btn-sticker:hover {
            background: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .btn-sticker:active {
            background: var(--color-primary-dark);
            transform: translateY(0);
        }

        .btn-exclude-mode {
            padding: var(--space-2) var(--space-3);
            background: #dc2626;
            color: var(--color-white);
            border: none;
            border-radius: var(--border-radius-md);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition-base);
            touch-action: manipulation;
            white-space: nowrap;
        }

        .btn-exclude-mode:hover {
            background: #b91c1c;
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .btn-exclude-mode:active {
            background: #991b1b;
            transform: translateY(0);
        }

        .btn-exclude-mode.active {
            background: #991b1b;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
        }

        /* Mobile button styling */
        @media (max-width: 768px) {
            .btn-sticker {
                font-size: var(--font-size-xs);
                padding: var(--space-2);
            }

            .btn-exclude-mode {
                font-size: var(--font-size-xs);
                padding: var(--space-2);
            }
        }

        /* Modal styles */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .modal-content {
            background: var(--color-white);
            border-radius: var(--border-radius-md);
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-xl);
        }

        .modal-header {
            padding: var(--space-6);
            border-bottom: 1px solid var(--color-gray-200);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            margin: 0;
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-900);
        }

        .modal-close {
            background: none;
            border: none;
            font-size: var(--font-size-2xl);
            color: var(--color-gray-500);
            cursor: pointer;
            padding: 0;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius-sm);
            transition: var(--transition-base);
        }

        .modal-close:hover {
            background: var(--color-gray-100);
            color: var(--color-gray-900);
        }

        .modal-body {
            padding: var(--space-6);
        }

        .file-upload-container {
            margin-bottom: var(--space-4);
        }

        .file-upload-label {
            display: block;
            padding: var(--space-8);
            border: 2px dashed var(--color-gray-300);
            border-radius: var(--border-radius-md);
            text-align: center;
            cursor: pointer;
            transition: var(--transition-base);
            background: var(--color-gray-50);
        }

        .file-upload-label:hover {
            border-color: var(--color-primary-light);
            background: #eff6ff;
        }

        .file-upload-icon {
            font-size: var(--font-size-3xl);
            margin-bottom: var(--space-2);
        }

        #file-upload-text {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            color: var(--color-gray-700);
            margin-bottom: var(--space-1);
        }

        #file-upload-specs {
            font-size: var(--font-size-xs);
            color: var(--color-gray-500);
        }

        .modal-actions {
            display: flex;
            gap: var(--space-3);
            margin-top: var(--space-6);
        }

        .btn {
            padding: var(--space-3) var(--space-5);
            border: none;
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            transition: var(--transition-base);
            flex: 1;
        }

        .btn-primary {
            background: var(--color-primary-light);
            color: var(--color-white);
        }

        .btn-primary:hover:not(:disabled) {
            background: var(--color-primary);
        }

        .btn-primary:disabled {
            background: var(--color-gray-400);
            cursor: not-allowed;
        }

        .btn-secondary {
            background: var(--color-gray-100);
            color: var(--color-gray-700);
        }

        .btn-secondary:hover {
            background: var(--color-gray-200);
        }

        .btn-danger {
            background: var(--color-accent);
            color: var(--color-white);
            width: 100%;
        }

        .btn-danger:hover {
            background: var(--color-accent);
        }

        /* Sticker Modal - Tablet */
        @media (max-width: 768px) {
            .modal-header {
                padding: var(--space-4);
            }

            .modal-body {
                padding: var(--space-4);
            }

            .file-upload-label {
                padding: var(--space-4);
            }

            .modal-close {
                min-width: 44px;
                min-height: 44px;
            }
        }

        /* Sticker Modal - Mobile */
        @media (max-width: 480px) {
            .modal-content {
                width: 95%;
            }

            .modal-header {
                padding: var(--space-3);
            }

            .modal-header h3 {
                font-size: var(--font-size-lg);
            }

            .modal-body {
                padding: var(--space-3);
            }

            .file-upload-label {
                padding: var(--space-3);
            }

            .file-upload-icon {
                font-size: var(--font-size-2xl);
            }

            #file-upload-text {
                font-size: var(--font-size-sm);
            }
        }

        /* iPad / Tablet layout (768px - 1024px) */
        @media (max-width: 1024px) and (min-width: 769px) {
            .leaderboard-table-header,
            .leaderboard-row {
                /* Slightly tighter columns for tablets */
                grid-template-columns: 0.4fr 0.8fr 0.6fr 1fr 1fr 0.8fr;
                gap: 0.75rem;
                padding: var(--space-2) var(--space-3);
            }

            .leaderboard-sticker {
                height: 90px;
            }

            .leaderboard-sticker img {
                max-width: 80px;
                max-height: 80px;
            }

            .leaderboard-rank {
                font-size: var(--font-size-xl);
            }

            .leaderboard-speed {
                font-size: var(--font-size-xl);
            }
        }

        /* Mobile layout (768px and below) */
        @media (max-width: 768px) {
            .device-selector {
                padding: var(--space-3);
            }

            .activity-card {
                border-radius: var(--border-radius-lg);
            }

            .activity-header {
                padding: var(--space-3);
                flex-direction: column;
                gap: var(--space-2);
                align-items: flex-start;
            }

            .activity-title {
                font-size: var(--font-size-lg);
            }

            .activity-content {
                padding: var(--space-2);
            }

            /* Mobile layout: 5 columns evenly distributed - Rank | Image | Speed | Labels | Time */
            /* Hide Actions column on mobile */
            .leaderboard-table-header,
            .leaderboard-row {
                grid-template-columns: 0.5fr 1fr 0.8fr 1.2fr 1.1fr;
                gap: 0.5rem;
                padding: 0.5rem;
            }

            .leaderboard-table-header > div {
                font-size: 0.65rem;
                white-space: normal;
                overflow: visible;
                line-height: 1.2;
            }

            /* Hide action header and column on mobile */
            .header-actions,
            .leaderboard-actions {
                display: none !important;
            }

            .leaderboard-rank {
                font-size: 1rem;
                font-weight: 700;
                text-align: center;
            }

            .leaderboard-sticker {
                width: 100%;
                min-height: 60px;
                height: auto;
                justify-content: center;
                align-items: center;
            }

            .leaderboard-sticker img {
                max-width: 60px;
                max-height: 60px;
            }

            .leaderboard-sticker-placeholder {
                width: 60px;
                height: 60px;
            }

            .leaderboard-speed {
                font-size: 1rem;
                font-weight: 700;
            }

            .leaderboard-labels {
                gap: 0.2rem;
                flex-wrap: wrap;
            }

            .direction-badge,
            .time-badge,
            .admin-label,
            .new-badge {
                font-size: 0.6rem;
                padding: 0.15rem 0.3rem;
            }

            .leaderboard-time {
                align-items: flex-start;
                min-width: 0;
                overflow: visible;
            }

            .leaderboard-time-exact {
                font-size: 0.7rem;
                white-space: nowrap;
            }

            .leaderboard-time-ago {
                font-size: 0.6rem;
                white-space: nowrap;
            }

            /* Hide Link vehicle button on mobile (complex multi-select) */
            .btn-link-vehicle,
            #link-vehicle-toggle,
            #link-selected-btn {
                display: none !important;
            }

            /* Keep Edit and Exclude buttons visible on mobile for admins */
            #edit-mode-toggle.admin-visible,
            #exclude-mode-toggle.admin-visible {
                display: inline-flex !important;
                font-size: 0.75rem;
                padding: 0.5rem 0.75rem;
                min-height: 44px; /* Touch-friendly */
            }

            /* Mobile exclude mode button styling */
            .btn-exclude-mode.admin-visible {
                display: inline-flex !important;
                font-size: 0.75rem;
                padding: 0.5rem 0.75rem;
                min-height: 44px;
            }

            /* When exclude mode is active on mobile, make rows clearly tappable */
            .leaderboard-list.exclude-mode .leaderboard-row {
                cursor: pointer;
                position: relative;
                transition: all 0.15s ease;
            }

            .leaderboard-list.exclude-mode .leaderboard-row::after {
                content: '❌';
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 1rem;
                opacity: 0.4;
                pointer-events: none;
            }

            .leaderboard-list.exclude-mode .leaderboard-row:hover,
            .leaderboard-list.exclude-mode .leaderboard-row:active {
                background: rgba(220, 38, 38, 0.1) !important;
                box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.3);
            }

            .leaderboard-list.exclude-mode .leaderboard-row:active::after {
                opacity: 1;
            }
        }

        /* Small mobile (480px and below) */
        @media (max-width: 480px) {
            .activity-header {
                padding: var(--space-2);
            }

            .activity-title {
                font-size: var(--font-size-base);
            }

            .activity-content {
                padding: var(--space-1);
            }

            /* 4-column layout - hide labels on small screens */
            /* Rank | Image | Speed | Time - evenly distributed */
            .leaderboard-table-header,
            .leaderboard-row {
                grid-template-columns: 0.4fr 1fr 0.9fr 1.3fr;
                gap: 0.4rem;
                padding: 0.4rem;
            }

            /* Hide labels column on small screens */
            .header-labels,
            .leaderboard-labels {
                display: none;
            }

            .leaderboard-rank {
                font-size: 0.9rem;
            }

            .leaderboard-sticker {
                min-height: 50px;
            }

            .leaderboard-sticker img {
                max-width: 50px;
                max-height: 50px;
            }

            .leaderboard-sticker-placeholder {
                width: 50px;
                height: 50px;
            }

            .leaderboard-speed {
                font-size: 0.9rem;
            }

            .leaderboard-time-exact {
                font-size: 0.65rem;
            }

            .leaderboard-time-ago {
                font-size: 0.55rem;
            }
        }

        /* Extra small mobile (360px and below) */
        @media (max-width: 360px) {
            /* 4 columns: Rank | Image | Speed | Time - compact but readable */
            .leaderboard-table-header,
            .leaderboard-row {
                grid-template-columns: 0.35fr 0.9fr 0.8fr 1.2fr;
                gap: 0.3rem;
                padding: 0.3rem;
            }

            .leaderboard-rank {
                font-size: 0.8rem;
            }

            .leaderboard-sticker img {
                max-width: 42px;
                max-height: 42px;
            }

            .leaderboard-sticker-placeholder {
                width: 42px;
                height: 42px;
            }

            .leaderboard-speed {
                font-size: 0.8rem;
            }

            .leaderboard-time-exact {
                font-size: 0.6rem;
            }

            .leaderboard-time-ago {
                display: none;
            }
        }

        .activity-legend {
            margin: var(--space-2) 0 var(--space-6) 0;
            font-size: var(--font-size-sm);
            color: var(--color-gray-500);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .legend-badge {
            display: inline-block;
            padding: 0.125rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.7rem;
            font-weight: 600;
            color: white;
        }

        .legend-label {
            font-weight: 500;
            color: #374151;
        }

        /* Live status indicator animation */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
                box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.4);
            }
            50% {
                opacity: 0.4;
                transform: scale(0.85);
                box-shadow: 0 0 0 6px rgba(5, 150, 105, 0.1);
            }
        }

        /* Live Updates Indicator */
        .live-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: var(--space-2) var(--space-3);
            background: var(--color-white);
            border-radius: var(--border-radius-md);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-gray-700);
            border: 1px solid var(--color-gray-200);
        }

        .live-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--color-gray-400);
            animation: pulse 2s ease-in-out infinite;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
        }

        .live-dot--connected {
            background: var(--color-secondary);
        }

        .live-dot--connecting {
            background: var(--color-warning);
        }

        .live-dot--error {
            background: var(--color-accent);
        }

        .live-dot--disconnected {
            background: var(--color-gray-400);
            animation: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
        }

        /* ============================================
           Vehicle Grouping Styles (Admin Feature)
           ============================================ */

        /* Clickable Repeat Offender label styling (when vehicle is linked) */
        .admin-label.clickable-label {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .admin-label.clickable-label:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            filter: brightness(1.1);
        }

        /* Vehicle link checkbox styling */
        .vehicle-link-checkbox {
            width: 16px;
            height: 16px;
            margin-right: 0.5rem;
            cursor: pointer;
            accent-color: #2563eb;
            vertical-align: middle;
        }

        .vehicle-link-checkbox:checked {
            transform: scale(1.1);
        }

        /* Link mode active state for rows */
        .leaderboard-row.link-mode-active {
            cursor: pointer;
        }

        .leaderboard-row.link-mode-active:hover {
            background: rgba(37, 99, 235, 0.08);
        }

        /* Link vehicle button states */
        .btn-link-vehicle {
            transition: all 0.2s ease;
        }

        .btn-link-vehicle.active {
            background: #dc2626 !important;
        }

        .btn-link-vehicle.active:hover {
            background: #b91c1c !important;
        }

        /* Vehicle group modal */
        .vehicle-group-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 1rem;
        }

        .vehicle-group-modal-content {
            background: white;
            border-radius: 0.75rem;
            max-width: 600px;
            width: 100%;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .vehicle-group-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e5e7eb;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white;
        }

        .vehicle-group-modal-header h3 {
            margin: 0;
            font-size: 1.125rem;
            font-weight: 600;
        }

        .vehicle-group-modal-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            line-height: 1;
            transition: background 0.2s ease;
        }

        .vehicle-group-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .vehicle-group-modal-body {
            padding: 1.5rem;
            overflow-y: auto;
            max-height: calc(80vh - 60px);
        }

        .vehicle-group-detection {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            background: #f9fafb;
        }

        .vehicle-group-detection:hover {
            background: #f3f4f6;
        }

        .vehicle-group-detection-info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .vehicle-group-detection-speed {
            font-weight: 600;
            color: #dc2626;
        }

        .vehicle-group-detection-date {
            font-size: 0.875rem;
            color: #6b7280;
        }

        .vehicle-group-unlink-btn {
            padding: 0.5rem 1rem;
            background: #fee2e2;
            color: #dc2626;
            border: 1px solid #fecaca;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 44px;
        }

        .vehicle-group-unlink-btn:hover {
            background: #fecaca;
            border-color: #f87171;
        }

        /* Vehicle Group Modal - Tablet */
        @media (max-width: 768px) {
            .vehicle-group-modal {
                padding: 0.5rem;
            }

            .vehicle-group-modal-content {
                max-width: 95%;
                max-height: 90vh;
            }

            .vehicle-group-modal-header {
                padding: 0.875rem 1rem;
            }

            .vehicle-group-modal-header h3 {
                font-size: 1rem;
            }

            .vehicle-group-modal-body {
                padding: 1rem;
                max-height: calc(90vh - 55px);
            }

            .vehicle-group-detection {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }

            .vehicle-group-unlink-btn {
                width: 100%;
                text-align: center;
            }
        }

        /* Vehicle Group Modal - Mobile */
        @media (max-width: 480px) {
            .vehicle-group-modal-header {
                padding: 0.75rem;
            }

            .vehicle-group-modal-header h3 {
                font-size: 0.9375rem;
            }

            .vehicle-group-modal-close {
                padding: 0.5rem;
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .vehicle-group-modal-body {
                padding: 0.75rem;
            }

            .vehicle-group-detection {
                padding: 0.625rem;
            }

            .vehicle-group-detection-speed {
                font-size: 1rem;
            }

            .vehicle-group-detection-date {
                font-size: 0.8125rem;
            }
        }

        /* View Linked Button - styled as a badge/link to match site design */
        .btn-view-linked {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.375rem 0.5rem;
            background: rgba(59, 130, 246, 0.12);
            color: #2563eb;
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: var(--border-radius-sm);
            font-size: 0.6875rem;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            line-height: 1;
            min-height: 28px;
        }

        .btn-view-linked:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.5);
            color: #1d4ed8;
        }

        .btn-view-linked:active {
            background: rgba(59, 130, 246, 0.25);
        }

        /* Disabled state for public users */
        .btn-view-linked--disabled,
        .btn-view-linked--disabled:hover,
        .btn-view-linked--disabled:active {
            background: rgba(107, 114, 128, 0.12);
            color: #9ca3af;
            border-color: rgba(107, 114, 128, 0.3);
            cursor: not-allowed;
            opacity: 0.7;
        }

        /* Mobile styling for view linked button - keep readable */
        @media (max-width: 768px) {
            .btn-view-linked {
                font-size: 0.625rem;
                padding: 0.25rem 0.375rem;
                min-height: 24px;
            }
        }

        @media (max-width: 480px) {
            .btn-view-linked {
                font-size: 0.5625rem;
                padding: 0.2rem 0.3rem;
                min-height: 22px;
            }
        }

        /* ============================================
           Edit Mode Styles (Admin Feature)
           ============================================ */

        /* Edit mode button - hidden by default, shown when admin-visible class added by JS */
        .btn-edit-mode {
            display: none;
            transition: all 0.2s ease;
        }

        .btn-edit-mode.admin-visible {
            display: inline-flex !important;
        }

        .btn-edit-mode.active {
            background: #dc2626 !important;
        }

        .btn-edit-mode.active:hover {
            background: #b91c1c !important;
        }

        /* When edit mode is active, rows become clickable */
        .leaderboard-row.edit-mode-active {
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .leaderboard-row.edit-mode-active:hover {
            background: rgba(37, 99, 235, 0.08) !important;
            box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.3);
        }

        .leaderboard-row.edit-mode-active:active {
            background: rgba(37, 99, 235, 0.15) !important;
        }

        /* Visual indicator that edit mode is active */
        .leaderboard-list.edit-mode .leaderboard-row {
            position: relative;
        }

        .leaderboard-list.edit-mode .leaderboard-row::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: #2563eb;
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .leaderboard-list.edit-mode .leaderboard-row:hover::before {
            opacity: 1;
        }