/**
 * Fiber Optic Networks Manager - Interactive Mapping System - Core Application Styles (BASE ONLY)
 * 
 * @description Core CSS styles for the VS infrastructure mapping application
 * @version 2025.11.08
 * @author Savin Ionut Razvan
 *
 * @license Copyright (c) 2025 Savin Ionut Razvan. All rights reserved.
 * 
 * Features:
 * - Core application structure and layout
 * - Base controls panel and navigation
 * - Map controls and markers (base styles only)
 * - No responsive breakpoints (moved to responsive.css)
 * - No search components (moved to components.css)
 */

/* ==========================================================================
   GROUP 1: BASE STYLES & DOCUMENT STRUCTURE
   ========================================================================== */

/* Used in: index.html - Base document structure */
/* Purpose: Reset and base document styles */
/* Root variables */
:root {
    /* Default nudge for bottom-right Leaflet controls; mobile overrides in responsive.css */
    --zoom-bottom-nudge: 16px;
    /* Dynamic viewport height with fallback for older browsers */
    --dynamic-vh: 100vh;
    --dynamic-vh: 100dvh;
    /* Custom vh for iOS Safari fix (set by JavaScript) */
        --vh: 1vh; /* Fallback for desktop */
        --safe-area-inset-top: env(safe-area-inset-top, 0px);
        --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Used in: index.html - Main map container */
/* Purpose: Full-screen map container */
#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: var(--dynamic-vh);
    min-height: 300px;
    touch-action: pan-x pan-y;
    /* PERFORMANCE: CSS containment to optimize layout recalculation */
    contain: layout style paint;
}

/* Desktop cursor behavior */
@media (hover: hover) and (pointer: fine) {
    #map {
        cursor: grab;
    }
    
    /* Fix for stuck cursor states on desktop */
    #map:active {
        cursor: grabbing;
    }
    
    /* Reset cursor when not dragging */
    #map.leaflet-grab {
        cursor: grab;
    }
    
    #map.leaflet-dragging {
        cursor: grabbing;
    }
}

/* Mobile touch behavior - no cursor changes */
@media (hover: none) and (pointer: coarse) {
    #map {
        cursor: default;
        touch-action: pan-x pan-y;
    }
    
    /* Ensure touch interactions work properly */
    #map * {
        touch-action: manipulation;
    }
}

/* Mobile-specific viewport height fix for iOS Safari */
@media screen and (max-width: 768px) {
    #map {
        height: calc(var(--vh, 1vh) * 100) !important;
        min-height: calc(var(--vh, 1vh) * 100);
    }
}

/* ==========================================================================
   GROUP 2: CONTROLS PANEL - SIDE PANEL (BASE)
   ========================================================================== */

/* Used in: index.html - Side controls panel */
/* Purpose: Main side panel container for layer controls */
#controls {
    position: fixed;
    top: 0;
    left: -280px;
    /* PERFORMANCE: CSS containment and will-change for smooth animations */
    contain: layout style;
    will-change: transform;
    width: 280px;
    height: var(--dynamic-vh);
    background: #1f2937;
    border-right: 1px solid #374151;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    padding: 0;
    z-index: 1200;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: left 0.25s ease, transform 0.2s ease;
    box-sizing: border-box;
    pointer-events: none;
    visibility: visible;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Used in: index.html - Side panel when open */
/* Purpose: Controls panel open state */
#controls.open {
    left: 0 !important;
    pointer-events: auto;
    visibility: visible !important;
}

/* Swipe feedback for controls panel */
#controls.swiping {
    box-shadow: 4px 0 15px rgba(0,0,0,0.3);
}

/* Used in: index.html - Backdrop overlay */
/* Purpose: Dark overlay behind side panel */
.controls-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--dynamic-vh);
    background: rgba(0, 0, 0, 0.3);
    z-index: 1199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Used in: index.html - Backdrop when active */
/* Purpose: Backdrop active state */
.controls-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   GROUP 3: ACTION BUTTONS
   ========================================================================== */

/* Used in: index.html - Action buttons container */
/* Purpose: Container for primary action buttons */
.action-buttons {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid #374151;
}

/* Used in: index.html - Individual action buttons */
/* Purpose: Base styles for action buttons (Localizează-mă, Schimbă harta, etc.) */
.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
    min-height: 34px;
    width: 100%;
}

/* Used in: index.html - Primary action button (Localizează-mă) */
/* Purpose: Primary button styling */
.action-btn.primary {
    background: #3b82f6;
    color: white;
}

/* Used in: index.html - Primary button hover state */
/* Purpose: Primary button hover effect */
.action-btn.primary:hover {
    background: #2563eb;
}

/* Used in: index.html - Secondary action button (Schimbă harta) */
/* Purpose: Secondary button styling */
.action-btn.secondary {
    background: #6b7280;
    color: white;
}

/* Used in: index.html - Secondary button hover state */
/* Purpose: Secondary button hover effect */
.action-btn.secondary:hover {
    background: #4b5563;
}

/* Used in: index.html - Warning action button (Clear Selection) */
/* Purpose: Warning button styling */
.action-btn.warning {
    background: #f59e0b;
    color: white;
}

/* Used in: index.html - Warning button hover state */
/* Purpose: Warning button hover effect */
.action-btn.warning:hover {
    background: #d97706;
}

/* Used in: index.html - Button icon styling */
/* Purpose: Icon styling within action buttons */
.btn-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* Used in: index.html - Button text styling */
/* Purpose: Text styling within action buttons */
.btn-text {
    flex: 1;
    font-weight: 500;
}

/* ==========================================================================
   GROUP 4: MENU SECTIONS & CHECKBOXES
   ========================================================================== */

/* Used in: index.html - Menu section containers */
/* Purpose: Container for each menu section (Infrastructură, Zone, etc.) */
.menu-section {
    padding: 16px;
    border-bottom: 1px solid #374151;
}

/* Used in: index.html - Last menu section */
/* Purpose: Remove border from last menu section */
.menu-section:last-child {
    border-bottom: none;
}

/* Used in: index.html - Section headers */
/* Purpose: Styling for section titles (Infrastructură, Zone, etc.) */
.section-header {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Used in: index.html - Checkbox list containers */
/* Purpose: Container for checkbox items */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Used in: index.html - Individual checkbox items */
/* Purpose: Styling for each checkbox item (Stâlpi, Camereta, etc.) */
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #f9fafb;
    font-size: 13px;
    font-weight: 400;
    border-radius: 4px;
}

/* Used in: index.html - Checkbox item hover state */
/* Purpose: Hover effect for checkbox items */
.checkbox-item:hover {
    background: rgba(255,255,255,0.05);
    padding-left: 6px;
    padding-right: 6px;
}

/* Used in: index.html - Checkbox input styling */
/* Purpose: Styling for checkbox inputs */
.checkbox-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #3b82f6;
    cursor: pointer;
    flex-shrink: 0;
}

/* Used in: index.html - Checkbox label when checked */
/* Purpose: Styling for checked checkbox labels */
.checkbox-item input[type="checkbox"]:checked + .checkbox-label {
    color: #3b82f6;
    font-weight: 500;
}

/* Used in: index.html - Checkbox label text */
/* Purpose: Styling for checkbox label text */
.checkbox-label {
    flex: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* ==========================================================================
   GROUP 5: HAMBURGER MENU (BASE)
   ========================================================================== */

/* Used in: index.html - Legacy button styling for compatibility */
/* Purpose: Legacy button styles for controls panel */
#controls button {
    min-width: 28px;
    min-height: 30px;
    font-size: 13px;
    padding: 4px 10px;
    margin: 3px 0 6px 0;
    border-radius: 6px;
    background: #374151;
    border: 1px solid #4b5563;
    color: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Used in: index.html - Legacy button hover state */
/* Purpose: Legacy button hover effect */
#controls button:hover {
    background: #4b5563;
    border-color: #6b7280;
}

/* Used in: index.html - Legacy button active state */
/* Purpose: Legacy button active effect */
#controls button:active {
    background: #6b7280;
    transform: translateY(1px);
}

/* Used in: index.html - Hamburger menu button (BASE) */
/* Purpose: Main hamburger menu button for mobile navigation */
#hamburger-btn {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.2);
    z-index: 1202;
    touch-action: pan-x pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline: none;
}

/* Used in: index.html - Hamburger button hidden state */
/* Purpose: Hide hamburger button when needed */
#hamburger-btn.hidden {
    display: none !important;
}

/* Used in: index.html - Hamburger button hover state */
/* Purpose: Hamburger button hover effect */
#hamburger-btn:hover {
    background: #374151;
    border-color: #4b5563;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.3);
}

/* Swipe feedback for hamburger button */
#hamburger-btn.swiping {
    background: #4b5563;
    border-color: #6b7280;
    transform: scale(1.05);
    box-shadow: 0 0.375rem 1rem rgba(0,0,0,0.4);
}

/* Used in: index.html - Hamburger button active state */
/* Purpose: Hamburger button active effect */
#hamburger-btn:active {
    transform: translateY(0);
    background: #4b5563;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.2);
}

/* Used in: index.html - Hamburger button SVG icon */
/* Purpose: Styling for hamburger icon */
#hamburger-btn svg {
    width: 30px;
    height: 30px;
}

/* Used in: index.html - Hamburger button SVG rectangles */
/* Purpose: Styling for hamburger icon lines */
#hamburger-btn svg rect {
    fill: #f9fafb;
}

/* Used in: index.html - Close menu button */
/* Purpose: Close button inside the menu */
#closemenu-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 9px;
    z-index: 1203;
    width: 18px;
    height: 18px;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

/* Used in: index.html - Close button hover state */
/* Purpose: Close button hover effect */
#closemenu-btn:hover {
    background: #4b5563;
    transform: scale(1.1);
}

/* Used in: index.html - Close button active state */
/* Purpose: Close button active effect */
#closemenu-btn:active {
    transform: scale(0.9);
}

/* Used in: index.html - Close button SVG icon */
/* Purpose: Styling for close icon */
#closemenu-btn svg {
    width: 12px;
    height: 12px;
}

/* Used in: index.html - Close button SVG lines */
/* Purpose: Styling for close icon lines */
#closemenu-btn svg line {
    stroke: #f9fafb;
}

/* ==========================================================================
   GROUP 6: ATTRIBUTION & FOOTER
   ========================================================================== */

/* Used in: index.html - Hide default Leaflet attribution */
/* Purpose: Hide default attribution since we have custom footer */
.leaflet-control-attribution {
    display: none !important;
}

/* Used in: index.html - Custom attribution footer */
/* Purpose: Custom attribution footer at bottom of page */
#attribution-footer {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    background: rgba(31, 41, 55, 0.95);
    padding: calc(3px + env(safe-area-inset-bottom, 0px)) 8px 3px 8px; /* include safe-area on mobile */
    font-size: 11px;
    text-align: center;
    z-index: 1000;
    border-top: 1px solid #374151;
    font-family: Arial, sans-serif;
    line-height: 1.1;
    backdrop-filter: blur(10px);
    color: #f9fafb;
    /* expose current footer height to layout via CSS var */
    --footer-h: 36px; /* default; overridden below by actual computed height */
}

#attribution-footer a {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Used in: index.html - Attribution footer links hover state */
/* Purpose: Hover effect for attribution links */
#attribution-footer a:hover {
    text-decoration: underline;
    color: #60a5fa;
}

/* Used in: index.html - Leaflet link styling */
/* Purpose: Special styling for Leaflet link with flag */
#attribution-footer .leaflet-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

/* Used in: index.html - Leaflet flag styling */
/* Purpose: Styling for the Leaflet flag SVG icon */
#attribution-footer .leaflet-attribution-flag {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Used in: index.html - Leaflet link hover effect */
/* Purpose: Hover effect for Leaflet link */
#attribution-footer .leaflet-link:hover {
    color: #60a5fa;
}

#attribution-footer .leaflet-link:hover .leaflet-attribution-flag {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* ==========================================================================
   GROUP 7: ACCESSIBILITY & SCROLLBARS
   ========================================================================== */

/* Used in: index.html - Focus styles for accessibility */
/* Purpose: Better accessibility with focus indicators */
#controls button:focus,
#hamburger-btn:focus,
#closemenu-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Used in: index.html - Controls panel scrollbar hiding */
/* Purpose: Hide scrollbar for cleaner look */
#controls {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Used in: index.html - Webkit scrollbar hiding */
/* Purpose: Hide scrollbar in webkit browsers */
#controls::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ==========================================================================
   GROUP 8: MAP CONTROLS - LEAFLET ZOOM (BASE) - REMOVED
   ========================================================================== */
/* OLD ZOOM CONTROL STYLES REMOVED - Using newer consolidated styles below */

/* Used in: index.html - Bottom controls spacing */
/* Purpose: Ensure proper spacing above footer */
/* Base bottom spacing (desktop); mobile overrides in responsive.css with safe areas */
.leaflet-bottom .leaflet-control {
    margin-bottom: 1px;
}

/* Align right-side Leaflet controls with the desktop search button column */
@media (min-width: 601px) {
    .leaflet-top.leaflet-right {
        top: 1rem;   /* same as .unified-search-container top */
        right: 1rem; /* same as .unified-search-container right */
    }
    .leaflet-right .leaflet-control {
        margin-right: 1rem !important; /* container handles right alignment */
    }
}

/* ==========================================================================
   GROUP 9: MAP POPUPS - LEAFLET OVERRIDES (BASE)
   ========================================================================== */

/* Used in: index.html - Leaflet popup wrapper styling */
/* Purpose: Custom styling for map popup containers */
.leaflet-popup-content-wrapper {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    color: #f9fafb !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.leaflet-popup-content {
    color: #f9fafb !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.leaflet-popup-content b {
    color: #f9fafb !important;
    font-weight: 600 !important;
}

.leaflet-popup-content small {
    color: #9ca3af !important;
}

.leaflet-popup-content div[style*="background: #f8f9fa"] {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #f9fafb !important;
}

.leaflet-popup-content button {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    margin: 4px 2px !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.leaflet-popup-content button:hover {
    background: #2563eb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.leaflet-popup-content button:active {
    background: #1d4ed8 !important;
    transform: translateY(0) !important;
}

/* Specific button styling for different actions */
.leaflet-popup-content button[onclick*="copyToClipboard"] {
    background: #10b981 !important;
}

.leaflet-popup-content button[onclick*="copyToClipboard"]:hover {
    background: #059669 !important;
}

.leaflet-popup-content button[onclick*="copyToClipboard"]:active {
    background: #047857 !important;
}

/* Styling for external link buttons */
.leaflet-popup-content button[onclick*="window.open"] {
    background: #6b7280 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    margin-top: 6px !important;
}

.leaflet-popup-content button[onclick*="window.open"]:hover {
    background: #4b5563 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3) !important;
}

.leaflet-popup-content button[onclick*="window.open"]:active {
    background: #374151 !important;
    transform: translateY(0) !important;
}

/* Popup tip styling */
.leaflet-popup-tip {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
}

/* Popup close button */
.leaflet-popup-close-button {
    color: #9ca3af !important;
    font-size: 18px !important;
    font-weight: bold !important;
    transition: color 0.2s ease !important;
}

.leaflet-popup-close-button:hover {
    color: #f9fafb !important;
}

/* ==========================================================================
   GROUP 10: MAP MARKERS & CLUSTERS (BASE)
   ========================================================================== */

/* Used in: index.html - Google Maps-style cluster styling */
/* Purpose: Google-style cluster icon base */
.google-cluster-icon {
    background: transparent !important;
    border: none !important;
}

/* Used in: index.html - Google-style cluster appearance */
/* Purpose: Google Maps-style cluster appearance */
.google-style-cluster {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 10px !important;
    color: white;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3), 0 1px 3px rgba(0,0,0,0.2);
    border: 2px solid white;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

/* Used in: index.html - Google-style cluster hover effect */
/* Purpose: Hover effect for Google-style clusters */
.google-style-cluster:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.4), 0 2px 6px rgba(0,0,0,0.3);
}

/* Used in: index.html - Cluster size variations */
/* Purpose: Different cluster sizes with consistent styling */
.cluster-small {
    background: linear-gradient(135deg, #4285f4, #3367d6);
}

.cluster-medium {
    background: linear-gradient(135deg, #4285f4, #3367d6);
}

.cluster-large {
    background: linear-gradient(135deg, #4285f4, #3367d6);
}

/* Used in: index.html - Cluster count text styling */
/* Purpose: Consistent font styling for cluster counts */
.cluster-count,
.leaflet-marker-icon .cluster-count,
.leaflet-cluster-anim .cluster-count,
.marker-cluster .cluster-count,
.marker-cluster-small .cluster-count,
.marker-cluster-medium .cluster-count,
.marker-cluster-large .cluster-count {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    -webkit-text-shadow: none !important;
    -moz-text-shadow: none !important;
}

/* ==========================================================================
   GROUP 11: CASE MARKERS (BASE)
   ========================================================================== */

/* Used in: index.html - Case marker icon base */
/* Purpose: Base styling for case marker icons */
.case-marker-icon {
    background: transparent !important;
    border: none !important;
}

/* Used in: index.html - Case marker content styling */
/* Purpose: Styling for case marker content */
.case-marker-content {
    width: 32px;
    height: 32px;
    background: rgba(64, 224, 208, 0.5); /* Semi-transparent turquoise background */
    border: 2px solid rgba(32, 178, 170, 0.4); /* Semi-transparent darker turquoise border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #1a1a1a;
    font-weight: bold;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Used in: index.html - Case marker hover effect */
/* Purpose: Hover effect for case markers */
.case-marker-content:hover {
    transform: scale(1.1);
    background: rgba(72, 209, 204, 0.9); /* Semi-transparent lighter turquoise on hover */
    border-color: rgba(0, 206, 209, 0.8); /* Semi-transparent brighter turquoise border on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

/* ==========================================================================
   GROUP 12: SCARI MARKERS (BASE)
   ========================================================================== */

/* Used in: index.html - Scari marker icon base */
/* Purpose: Base styling for scari marker icons */
.scari-marker-icon {
    background: transparent !important;
    border: none !important;
}

/* Used in: index.html - Scari marker content styling */
/* Purpose: Styling for scari marker content */
.scari-marker-content {
    width: 32px;
    height: 32px;
    background: rgba(255, 215, 0, 0.5); /* Semi-transparent yellow background */
    border: 2px solid rgba(255, 165, 0, 0.4); /* Semi-transparent orange border */
    border-radius: 50%; /* Circle shape */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #1a1a1a; /* Dark text color */
    font-weight: bold;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Used in: index.html - Scari marker hover effect */
/* Purpose: Hover effect for scari markers */
.scari-marker-content:hover {
    transform: scale(1.1);
    background: rgba(255, 237, 78, 0.9); /* Semi-transparent lighter yellow on hover */
    border-color: rgba(255, 140, 0, 0.8); /* Semi-transparent brighter orange border on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8); /* Subtle white text shadow */
}

/* Used in: index.html - Scari icon base */
/* Purpose: Base styling for scari icons */
.scari-icon {
    background: transparent !important;
    border: none !important;
}

/* Used in: index.html - Scari point content styling */
/* Purpose: Styling for scari point content */
.scari-point-content {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-text-stroke: 1px white;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Used in: index.html - Scari point hover effect */
/* Purpose: Hover effect for scari points */
.scari-point-content:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   GROUP 13: CAMERETA CLUSTERS (BASE)
   ========================================================================== */

/* Used in: index.html - All clusters use consistent Google-style blue colors */
/* Purpose: Consistent cluster styling for case and scari markers */
.case-marker-icon .google-style-cluster,
.scari-marker-icon .google-style-cluster {
    background: linear-gradient(135deg, #4285f4, #3367d6);
}

/* Used in: index.html - Camereta clusters base styling */
/* Purpose: Camereta clusters using default Leaflet.markercluster styling with dark blue colors */
.marker-cluster-camereta {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
    border: 3px solid #1e3a8a !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.3) !important;
}

/* Used in: index.html - Camereta cluster div styling */
/* Purpose: Camereta cluster div content styling */
.marker-cluster-camereta div {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Used in: index.html - Dynamic colors based on cluster size - small */
/* Purpose: Small camereta cluster styling */
.marker-cluster-camereta.marker-cluster-small {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
    border-color: #1e3a8a !important;
}

/* Used in: index.html - Dynamic colors based on cluster size - medium */
/* Purpose: Medium camereta cluster styling */
.marker-cluster-camereta.marker-cluster-medium {
    background: linear-gradient(135deg, #1e40af, #2563eb) !important;
    border-color: #1e40af !important;
}

/* Used in: index.html - Dynamic colors based on cluster size - large */
/* Purpose: Large camereta cluster styling */
.marker-cluster-camereta.marker-cluster-large {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: #2563eb !important;
}

/* Used in: index.html - Hover effects with dynamic colors - small */
/* Purpose: Small camereta cluster hover effect */
.marker-cluster-camereta.marker-cluster-small:hover {
    background: linear-gradient(135deg, #1e40af, #2563eb) !important;
    border-color: #1e40af !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4) !important;
}

/* Used in: index.html - Hover effects with dynamic colors - medium */
/* Purpose: Medium camereta cluster hover effect */
.marker-cluster-camereta.marker-cluster-medium:hover {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: #2563eb !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* Used in: index.html - Hover effects with dynamic colors - large */
/* Purpose: Large camereta cluster hover effect */
.marker-cluster-camereta.marker-cluster-large:hover {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Used in: index.html - Force override all Leaflet cluster fonts */
/* Purpose: Consistent font styling for all cluster types */
.leaflet-container .cluster-count,
.leaflet-container .google-style-cluster,
.leaflet-container .marker-cluster div,
.leaflet-container .marker-cluster-camereta div {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    -webkit-text-shadow: none !important;
    -moz-text-shadow: none !important;
}

/* ==========================================================================
   GROUP 14: NAVIGATION MODAL (BASE)
   ========================================================================== */

/* Used in: js/unified-search-module.js - Navigation modal overlay */
/* Purpose: Navigation modal overlay styling */
.navigation-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: 10000;
    animation: fadeIn 0.3s ease;
}

/* Used in: js/unified-search-module.js - Navigation modal content */
/* Purpose: Navigation modal content container */
.navigation-modal-content {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn 0.3s ease;
}

/* Used in: js/unified-search-module.js - Navigation modal header */
/* Purpose: Navigation modal header styling */
.navigation-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #374151;
    background: #111827;
}

/* Used in: js/unified-search-module.js - Navigation modal header title */
/* Purpose: Navigation modal header title styling */
.navigation-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #f9fafb;
}

/* Used in: js/unified-search-module.js - Navigation modal close button */
/* Purpose: Navigation modal close button styling */
.navigation-modal-close {
    background: #374151;
    border: 1px solid #4b5563;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Used in: js/unified-search-module.js - Navigation modal close button hover */
/* Purpose: Navigation modal close button hover effect */
.navigation-modal-close:hover {
    background: #4b5563;
    color: #f9fafb;
    border-color: #6b7280;
}

/* Used in: js/unified-search-module.js - Navigation modal body */
/* Purpose: Navigation modal body styling */
.navigation-modal-body {
    padding: 24px;
    background: #1f2937;
}

/* Used in: js/unified-search-module.js - Navigation modal body paragraph */
/* Purpose: Styling for modal body text */
.navigation-modal-body p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #9ca3af;
    text-align: center;
    background: #374151;
    border: 1px solid #4b5563;
    padding: 12px;
    border-radius: 8px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Used in: js/unified-search-module.js - Navigation options container */
/* Purpose: Container for navigation app options */
.navigation-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Used in: js/unified-search-module.js - Navigation option item */
/* Purpose: Individual navigation app option */
.navigation-option {
    display: flex;
    align-items: center;
    padding: 16px;
    border: 2px solid #374151;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    background: #1f2937;
}

/* Used in: js/unified-search-module.js - Navigation option hover */
/* Purpose: Hover state for navigation options */
.navigation-option:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    background: #374151;
}

/* Used in: js/unified-search-module.js - Waze navigation option hover */
/* Purpose: Waze-specific hover styling */
.navigation-option.waze:hover {
    border-color: #33ccff;
    box-shadow: 0 4px 12px rgba(51, 204, 255, 0.3);
    background: #374151;
}

/* Used in: js/unified-search-module.js - Google navigation option hover */
/* Purpose: Google Maps-specific hover styling */
.navigation-option.google:hover {
    border-color: #4285f4;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
    background: #374151;
}

/* Used in: js/unified-search-module.js - Navigation option icon */
/* Purpose: Icon styling for navigation options */
.navigation-icon {
    font-size: 24px;
    margin-right: 16px;
    flex-shrink: 0;
}

/* Used in: js/unified-search-module.js - Navigation option text */
/* Purpose: Text container for navigation options */
.navigation-text {
    flex: 1;
}

/* Used in: js/unified-search-module.js - Navigation option title */
/* Purpose: Title styling for navigation options */
.navigation-title {
    font-weight: 600;
    font-size: 16px;
    color: #f9fafb;
    margin-bottom: 4px;
}

/* Used in: js/unified-search-module.js - Navigation option subtitle */
/* Purpose: Subtitle styling for navigation options */
.navigation-subtitle {
    font-size: 12px;
    color: #9ca3af;
}

/* ==========================================================================
   GROUP 15: ANIMATIONS
   ========================================================================== */

/* Used in: js/unified-search-module.js - Fade in animation */
/* Purpose: Fade in effect for modals and overlays */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Used in: js/unified-search-module.js - Slide in animation */
/* Purpose: Slide in effect for modal content */
@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Used in: js/unified-search-module.js - Location dot pulse animation */
/* Purpose: Pulse effect for location dot marker */
@keyframes locationDotPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================================
   GROUP 16: LOCATION NOTIFICATION MARKER
   ========================================================================== */

/* Used in: js/unified-search-module.js - Location notification marker container */
/* Purpose: Container for location notification markers */
.location-notification-marker {
    background: transparent !important;
    border: none !important;
}

/* Used in: js/unified-search-module.js - Location notification wrapper */
/* Purpose: Wrapper containing both notification and dot */
.location-notification-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Used in: js/unified-search-module.js - Location notification wrapper hover */
/* Purpose: Hover effect for location notification wrapper */
.location-notification-wrapper:hover {
    transform: scale(1.02);
}

/* Used in: js/unified-search-module.js - Location notification content container */
/* Purpose: Main container for location notification content */
.location-notification-content {
    background: #1f2937;
    color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    max-width: 300px;
    border: 1px solid #374151;
    animation: pulse 2s infinite;
    position: relative;
}

/* Used in: js/unified-search-module.js - Location notification pointer */
/* Purpose: Visual pointer showing exact location on map */
.location-notification-content::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #1f2937;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Used in: js/unified-search-module.js - Location notification header */
/* Purpose: Header container for location notification */
.location-notification-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Used in: js/unified-search-module.js - Location notification icon */
/* Purpose: Icon styling for location notification */
.location-notification-icon {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Used in: js/unified-search-module.js - Location notification text container */
/* Purpose: Text container for location notification */
.location-notification-text {
    flex: 1;
    min-width: 0;
}

/* Used in: js/unified-search-module.js - Location notification title */
/* Purpose: Title styling for location notification */
.location-notification-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 15px;
}

/* Used in: js/unified-search-module.js - Location notification subtitle */
/* Purpose: Subtitle styling for location notification */
.location-notification-subtitle {
    font-size: 13px;
    opacity: 0.9;
    line-height: 1.3;
    margin-bottom: 8px;
}

/* Used in: js/unified-search-module.js - Location notification actions */
/* Purpose: Actions container for location notification */
.location-notification-actions {
    display: flex;
    gap: 6px;
}

/* Used in: js/unified-search-module.js - Location notification button */
/* Purpose: Button styling for location notification */
.location-notification-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    flex: 1;
    transition: background-color 0.2s ease;
}

/* Used in: js/unified-search-module.js - Location notification button hover */
/* Purpose: Button hover effect for location notification */
.location-notification-btn:hover {
    background: #2563eb;
}

/* Used in: js/unified-search-module.js - Location notification close button */
/* Purpose: Styling for the close button in location notifications */
.location-notification-close-btn {
    background: #6b7280;
    color: white;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;
    line-height: 1;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-notification-close-btn:hover {
    background: #4b5563;
}

/* Used in: js/unified-search-module.js - Location dot within wrapper */
/* Purpose: Visual dot showing exact location point */
.location-dot {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border: 1px solid white;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    animation: locationDotPulse 1.5s infinite;
    margin-top: 8px; /* Space between notification and dot */
    flex-shrink: 0; /* Prevent dot from shrinking */
} 

/* Case text labels - clean and transparent */
.case-text-label {
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Case text labels - only visible at high zoom levels for performance */
.case-text-label.zoom-dependent {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

/* Show case labels only at maximum zoom level (18+) */
#map.map-zoom-18 .case-text-label.zoom-dependent,
#map.map-zoom-19 .case-text-label.zoom-dependent,
#map.map-zoom-20 .case-text-label.zoom-dependent {
    opacity: 1 !important;
}

/* Scari text labels - only visible at high zoom levels for performance */
.scari-text-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.scari-text-label.zoom-dependent {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

/* Show scari labels only at maximum zoom level (18+) */
#map.map-zoom-18 .scari-text-label.zoom-dependent,
#map.map-zoom-19 .scari-text-label.zoom-dependent,
#map.map-zoom-20 .scari-text-label.zoom-dependent {
    opacity: 1 !important;
}

/* Custom Leaflet zoom control styling to match app color palette */
.leaflet-control-zoom {
    border: 1px solid #374151 !important;
    background: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    border-radius: 6px !important;
}

.leaflet-control-zoom a {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    color: #f9fafb !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.leaflet-control-zoom a:hover {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
    transform: scale(1.05) !important;
}

.leaflet-control-zoom a:active {
    background: #4b5563 !important;
    transform: scale(0.95) !important;
}

.leaflet-control-zoom a.leaflet-control-zoom-in {
    border-bottom: 1px solid #374151 !important;
    border-radius: 6px 6px 0 0 !important;
}

.leaflet-control-zoom a.leaflet-control-zoom-out {
    border-radius: 0 0 6px 6px !important;
}

.leaflet-control-zoom a.leaflet-disabled {
    background: #6b7280 !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.leaflet-control-zoom a.leaflet-disabled:hover {
    background: #6b7280 !important;
    transform: none !important;
}