/* Map Styles - Consolidated for Full-Screen Map */

/* Base Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Map Container */
#incidentMap {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    position: relative;
}

/* Leaflet Overrides */
.leaflet-container {
    background-color: #1a1a1a;
    font-family: 'Inter', system-ui, sans-serif;
}

.leaflet-popup-content-wrapper {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 0.5rem;
}

.leaflet-popup-content {
    background: #1f2937;
    color: white;
    margin: 0;
    padding: 0;
}

.leaflet-popup-tip {
    background: #1f2937;
    border: 1px solid #374151;
}

.leaflet-control-zoom {
    border: 1px solid #374151 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-control-zoom a {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
    border-bottom: 1px solid #374151 !important;
}

.leaflet-control-zoom a:hover {
    background-color: #374151 !important;
    color: white !important;
}

/* Map Control Buttons */
.map-control-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 41, 55, 0.9);
    border: 1px solid rgba(75, 85, 99, 0.5);
    border-radius: 0.375rem;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.2s;
}

.map-control-btn:hover {
    background: rgba(55, 65, 81, 0.95);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.map-control-btn:active {
    transform: translateY(0);
}

/* Tool Buttons */
.measurement-tool-btn, 
.drawing-tool-btn {
    width: 100%;
    padding: 0.5rem;
    background: rgba(31, 41, 55, 0.9);
    border: 1px solid rgba(75, 85, 99, 0.5);
    border-radius: 0.25rem;
    color: #d1d5db;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    text-align: left;
}

.measurement-tool-btn:hover, 
.drawing-tool-btn:hover {
    background: rgba(55, 65, 81, 0.95);
    color: white;
    transform: translateX(2px);
}

/* Layer Controls */
.layer-toggle {
    transition: background-color 0.2s;
}

.layer-toggle input[type="checkbox"] {
    accent-color: #3b82f6;
}

/* Accordion group headers */
.layer-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    margin-top: 2px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
}

.layer-group-header:hover {
    background: rgba(55, 65, 81, 0.6);
    color: #d1d5db;
}

.layer-group-chevron {
    font-size: 8px;
    transition: transform 0.2s;
    width: 10px;
    text-align: center;
}

.layer-group-content {
    padding-left: 4px;
}

.opacity-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.opacity-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    color: #d1d5db;
}

.opacity-slider {
    background-color: rgba(31, 41, 55, 0.5);
    border-radius: 0.25rem;
    padding: 0.5rem;
    margin-left: 2rem;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.opacity-slider input[type="range"] {
    flex: 1;
    height: 4px;
}

/* Search Box */
.search-type-checkbox {
    accent-color: #3b82f6;
}

#mapSearchResults .search-result-item {
    padding: 0.5rem;
    background: rgba(55, 65, 81, 0.5);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

#mapSearchResults .search-result-item:hover {
    background: rgba(55, 65, 81, 0.8);
    transform: translateX(2px);
}

/* Context Menu */
.map-context-menu {
    background-color: rgba(17, 24, 39, 0.98);
    backdrop-filter: blur(10px);
    animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu-item {
    transition: all 0.15s ease;
}

.context-menu-item:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    transform: translateX(2px);
}

/* Custom Markers */
.cctv-marker {
    background: transparent !important;
    border: none !important;
}

.cctv-icon {
    width: 30px;
    height: 30px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 2px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
    }
}

.poi-marker {
    background: transparent !important;
    border: none !important;
}

.poi-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.poi-marker.witness .poi-icon {
    background: #a855f7;
    border: 2px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.poi-marker.evidence .poi-icon {
    background: #eab308;
    border: 2px solid rgba(234, 179, 8, 0.3);
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

.poi-marker.location .poi-icon {
    background: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.poi-marker.police .poi-icon {
    background: #3b82f6;
    border: 2px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.poi-icon:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Custom Drawing Markers */
.custom-drawing-marker {
    background: transparent !important;
    border: none !important;
}

.distance-label {
    background: transparent !important;
    border: none !important;
    white-space: nowrap;
}

/* Popup Styles */
.cctv-popup, 
.poi-popup {
    padding: 12px;
    min-width: 200px;
}

.cctv-popup h4, 
.poi-popup h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}

.cctv-popup p, 
.poi-popup p {
    margin: 4px 0;
}

.cctv-popup button, 
.poi-popup button {
    width: 100%;
    margin-top: 8px;
    padding: 4px 8px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s;
}

.cctv-popup button:hover, 
.poi-popup button:hover {
    background: #2563eb;
}

/* Range Slider Styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(107, 114, 128, 0.3);
    outline: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    border-radius: 2px;
    height: 4px;
}

input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #3b82f6;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #3b82f6;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Status Message */
#statusMessage {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translate(-50%, -20px);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.8);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.8);
}

/* Fullscreen Adjustments */
:fullscreen #mapContainer {
    background: #111827;
}

:-webkit-full-screen #mapContainer {
    background: #111827;
}

:-moz-full-screen #mapContainer {
    background: #111827;
}

:-ms-fullscreen #mapContainer {
    background: #111827;
}

/* Drawing Instructions Tooltip */
.drawing-instructions {
    position: absolute;
    top: calc(var(--map-edge, 8px) + 36px + var(--map-gap, 6px));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.95);
    color: white;
    padding: 6px 12px;
    border-radius: var(--panel-r, 8px);
    border: 1px solid #374151;
    font-size: 13px;
    z-index: 1000;
    pointer-events: none;
    animation: fadeInOut 0.3s ease;
}

@keyframes fadeInOut {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Route Marker */
.route-marker {
    background: transparent !important;
    border: none !important;
}

/* Entity Marker */
.entity-marker {
    background: transparent !important;
    border: none !important;
}

/* TPS Marker */
.tps-marker {
    background: transparent !important;
    border: none !important;
}

/* TPS Tooltip */
.tps-tooltip {
    background: rgba(17, 24, 39, 0.95) !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .toolbar-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    #mapSidebar {
        width: 260px !important;
    }

    #mapSearchBar {
        width: 220px !important;
    }
}

@media (max-width: 480px) {
    #mapSidebar {
        width: 220px !important;
        font-size: 12px;
    }

    #mapSearchBar {
        width: 180px !important;
    }
}

/* Marker Label Tooltip */
.marker-label-tooltip {
    background: rgba(17, 24, 39, 0.9) !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    padding: 1px 5px !important;
    box-shadow: none !important;
}
.marker-label-tooltip::before {
    border-bottom-color: rgba(17, 24, 39, 0.9) !important;
}

/* Print Styles */
@media print {
    #mapToolbar,
    #mapSidebar,
    #mapSearchBar,
    #mapStylePicker,
    #routeInfoPanel,
    #elevationPanel,
    #mapContextMenu {
        display: none !important;
    }
}

/* ============================================
   TOUCH DEVICE TAP TARGETS (≥44×44 per WCAG/Apple)
   Scoped to coarse-pointer devices so desktop officer view stays
   on the original tighter chrome. The visual icon size can stay
   smaller than the hit area where the parent gives us padding to
   work with.
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .opacity-btn {
        width: 44px;
        height: 44px;
    }
    /* Layer-group chevron itself is purely decorative; its CLICKABLE
       parent (.layer-group-header) is what users tap. Bump that
       header's min-height + vertical padding instead of the chevron
       glyph so the visual stays compact but the hit area is finger-
       friendly. */
    .layer-group-header {
        min-height: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}