/* <style> */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        /* When the disclaimer is up, freeze everything behind it */
        body.no-scroll{
            overflow: hidden;        /* no scrollbars */
            position: fixed;         /* keep viewport locked */
            width: 100%;             /* stop lateral shift */
        }
        #map {
            width: 100%;
            height:calc(100vh - 50px);
            /* height: 100vh; */
        }
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            text-align: center;
        }
        .leaflet-popup-content {
            max-width: 300px;
            max-height: 400px;
            overflow-y: auto;
            -webkit-overflow-scrolling:touch; /* smooth on iOS */
            font-size: 10px;
        }
        .control-panel {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 1000;
            background: white;
            padding: 5px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.2);
            max-width: 320px;
            min-width: 280px;
        }
        .control-panel h3 {
            margin: 0 0 5px 0;
            color: #333;
            font-size: 18px;
        }
        .time-selector, .offense-selector {
            margin-bottom: 5px;
        }
        .date-range {
            margin-top: 5px;
            display: none;
        }
        #dateSelector, #offenseType {
            width: 100%;
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
        }
        #customRange {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #applyFilters, #exportCSV {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
        }
        #exportCSV {
            background: #2196F3;
            margin-top: 10px;
        }
        #applyFilters:hover {
            background: #45a049;
        }
        #exportCSV:hover {
            background: #1976D2;
        }
        #applyFilters:disabled, #exportCSV:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        #stats {
            margin-top: 5px;
            font-size: 12px;
            background: #f8f9fa;
            padding: 5px;
            border-radius: 4px;
            border-left: 4px solid #4CAF50;
        }
        .label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
            font-size: 13px;
        }
        #disclaimerOverlay {
            position: fixed;
            z-index: 9999; 
            left: 0;
            top: 0;
            width: 100%;
            height:100dvh;
            background-color: rgba(255, 255, 255, 0.95);
            display: block;
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;
            overflow: auto;
            text-align: center;
            padding-top: 20px;
            font-family: Arial, sans-serif;
            display:flex;
            flex-direction:column;
        }
        #disclaimerContent {
            background: #f9f9f9;
            border: 1px solid #ccc;
            display: inline-block;
            padding: 10px;
            max-width: 800px;
            max-height:calc(100vh - 200px);
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;
            text-align: left;
            flex:1 1 auto;
            
        }
        #acceptButton {
            margin-top: 5px;
            font-size: 16px;
            cursor: pointer;
            align-self:center;
            position:sticky;
            bottom:0;
            background:#4CAF50; color:#fff; border:none; border-radius:2px;
            padding:5px 5px; font-size:14px; cursor:pointer;
            /*margin:px 0;*/
            margin:0;

        }
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #f1f1f1;
            color: #555;
            text-align: center;
            padding: 5px 0;
            font-size: 10px;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
            z-index: 10000;

            /* position:static;
            width:100%;
            box-shadow:none;
            z-index:auto; 
            padding:0px 0;
            text-align: center;
            z-index: 10000;
            font-size: 10px; */

        }
        .footer a {
            color: #555;
            text-decoration: none;
            margin: 0 10px;
        }
        .footer a:hover {
            text-decoration: underline;
        }
        #loadStatus {
            margin-bottom: 5px;
            font-size: 0.8em;
            color: #666;
        }

        .control-panel{
        padding:5px 5px;      /* was 15px all around */
        }

        .control-panel h3      { display:flex; align-items:center; cursor:pointer; }

        .toggle-arrow          { margin-left:0px; transition:transform .25s ease; }

        .control-panel.collapsed .toggle-arrow { transform:rotate(-90deg); }

        .panel-body                     { margin-top:5px; }

        .control-panel.collapsed .panel-body { display:none; }

        .control-panel.collapsed        { opacity:.4; }   /* optional fade */

        /* 2‑B. Mobile-friendly sizing */
        @media (max-width:600px){
        .control-panel{
            left:auto; right:5px; transform:none;
            width:auto; max-width:none; padding:5px 5px;
        }
        #dateSelector,#offenseType,#customRange{ font-size:12px; padding:5px; }
        #applyFilters,#exportCSV{ font-size:12px; padding:5px; }
        .control-panel h3{ font-size:12px; }
        }

        /* Keep Leaflet controls (zoom +/- and layer‑toggle) always on top */
        .leaflet-control-zoom,
        .leaflet-control-layers {
        position: relative;          /* preserves Leaflet’s corner anchoring   */
        z-index: 30000 !important;    /* > control‑panel’s 1000, < footer 10000 */
        }
        .control-panel{
        max-width:33vw;   /* ≤ 25 % of viewport width            */
        max-height:50vh;  /* ≤ 25 % of viewport height           */
        overflow-y:auto;  /* allow scrolling inside if it overflows */
        }

        /* 2‑A.  Header layout */
        .panel-header{
        display:flex; align-items:center; gap:6px;
        }

        /* 2‑B.  Toggle button */
        .panel-toggle{
        background:none; border:none; font-size:14px; font-weight:bold;
        cursor:pointer; color:#007bff; padding:0; line-height:1;
        }

        /* simple arrow caret that flips */
        .panel-toggle::after{
        content:""; display:inline-block; margin-left:2px;
        border:solid currentColor; border-width:0 2px 2px 0; padding:3px;
        transform:rotate(45deg); transition:transform .25s ease;
        }
        .panel-toggle[aria-expanded="false"]::after{ transform:rotate(-135deg); }

        /* --- Advanced Search styles --- */
        .advanced-controls {
        margin-top: 6px;
        border-top: 1px dashed #ddd;
        padding-top: 6px;
        }

        .advanced-toggle {
        width: 100%;
        padding: 8px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        text-align: left;
        }

        .advanced-toggle:hover {
        background: #eee;
        }

        .advanced-section {
        margin-top: 6px;
        display: none;
        background: #fafafa;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 8px;
        }

        .advanced-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        }

        .advanced-row .field-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: center;
        font-size: 12px;
        }

        #searchText {
        width: 100%;
        padding: 6px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 12px;
        }

        .adv-actions {
        display: flex;
        gap: 8px;
        margin-top: 6px;
        }

        .adv-actions button {
        flex: 1 1 auto;
        padding: 8px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        }

        #applySearch { background: #6c63ff; color: #fff; }
        #clearSearch { background: #e0e0e0; color: #333; }
        #applySearch:hover, #clearSearch:hover { filter: brightness(0.95); }
        #searchStatus { margin-top: 4px; font-size: 11px; color: #666; }

        .leaflet-tooltip.zone-label {
        background: rgba(0,0,0,0.55);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 12px;
        box-shadow: none;
        }
/* 

    </style> */