/* ── Unified geofence map editor ─────────────────────────────────────────── */
.geofence-editor-full {
    position: fixed; inset: 0; z-index: 1055;
    display: flex; background: #111;
}

.geofence-editor-sidebar {
    width: 240px; flex-shrink: 0;
    background: #1a1e2e; color: #fff;
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.geofence-editor-sidebar-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    padding: 10px 12px; background: #0d6efd; flex-shrink: 0;
}

.geofence-editor-holes-scroll {
    flex: 1; overflow-y: auto; padding: 4px 0;
}

.geofence-hole-row {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.1s;
}
.geofence-hole-row.hole-row-active { background: rgba(13,110,253,0.12); }
.geofence-hole-row:hover { background: rgba(255,255,255,0.05); }

.geofence-editor-map-area {
    flex: 1; position: relative; min-width: 0;
}

/* Bootstrap doesn't have btn-xs — add it */
.btn-xs {
    padding: 1px 6px; font-size: 0.7rem; border-radius: 3px; line-height: 1.4;
}

/* Leaflet vertex tooltip pill */
.vertex-label {
    background: #0d6efd; border: none; color: #fff;
    font-size: 10px; padding: 1px 5px; border-radius: 8px;
    white-space: nowrap;
}
/* ── End geofence map editor ─────────────────────────────────────────────── */

.sidebar { position: sticky; top: 0; height: 100vh; }
.sidebar .nav-link:hover { background: rgba(255,255,255,0.1); border-radius: 4px; }
.badge-zone-0 { background: #198754; color: #fff; }
.badge-zone-1 { background: #0d6efd; color: #fff; }
.badge-zone-2 { background: #0dcaf0; color: #000; }
.badge-zone-3 { background: #ffc107; color: #000; }
.badge-zone-outside { background: #6c757d; color: #fff; }
.camera-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.camera-grid img { width: 100%; border-radius: 4px; object-fit: cover; aspect-ratio: 4/3; background: #dee2e6; }
.camera-placeholder { width: 100%; aspect-ratio: 4/3; background: #dee2e6; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 0.75rem; text-align: center; }
.offcanvas-xxl { width: 600px !important; }