code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.App {
    height: 100%;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.dark.App {
    color-scheme: dark;
}

* {
    border-color: hsl(var(--border));
}
*:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: hsl(var(--ring));
}

#vg-tooltip-element {
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
}

:host {
    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
    --radius: 0.5rem;
}

.dark .map-tile {
    filter: var(--map-tiles-filter, none);
}

.dark .leaflet-container {
    background-color: hsl(var(--background));
}

.dark .leaflet-control-zoom-out,
.dark .leaflet-control-zoom-in {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    border-color: hsl(var(--input));
}
.dark .leaflet-control-zoom-out:hover,
.dark .leaflet-control-zoom-in:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}
.dark .leaflet-control-zoom {
    border: 2px solid hsl(var(--input)) !important;
}
.dark .leaflet-container .leaflet-control-attribution {
    background-color: hsla(var(--secondary) / 0.8);
    color: hsl(var(--secondary-foreground));
}
.dark .leaflet-tooltip {
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border-color: hsl(var(--border));
}
.dark .leaflet-tooltip-right:before {
    border-right-color: hsl(var(--popover));
}
.dark .leaflet-tooltip-left:before {
    border-left-color: hsl(var(--popover));
}