html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;    
    font-size: 16px;
}

#map {
    height: 100%;
    width: 100%;
    image-rendering: pixelated;
}

.mouseposition {
    background-color: white;
    padding: 3px;
    text-align: right;
}

.mousepositioncoord {
    min-width: 40px;
    display: inline-block;
}

div.ol-mouse-position {
    background-color: white;
    padding: 6px;
    border-radius: 3px;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}

.ol-ctx-menu-container {
    font-size: 16px;
}

.ol-scale-step-text {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: white;
    text-shadow:
        1px 0 0 black,
        0 1px 0 black,
        -1px 0 0 black,
        0 -1px 0 black;
    0px 0px 8px black;
}

.ol-scale-singlebar-odd {
    background: #ddd;
}

.ol-scale-singlebar-even {
    background: #444;
}

.toastify {
    color: black;
    background: yellow;
}

.ol-ctx-menu-container li {
    padding-left: 20px;
}

.menuitem-checked::before {
    content: '☑';
    width: 20px;
    display: inline-block;
    margin-left: -20px;
}

.menuitem-unchecked::before {
    content: '☐';
    width: 20px;
    display: inline-block;
    margin-left: -20px;
}

/* For WebKit/Blink (Chrome, Safari, Edge) */
.ol-viewport canvas {
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast; /* For older Chrome/Safari */
}

/* For Firefox */
.ol-viewport canvas {
    image-rendering: crisp-edges;
}

/* For older browsers or as a fallback */
.ol-viewport canvas {
    -ms-interpolation-mode: nearest-neighbor;
}

/* Layer Toggle Control Container */
.ol-unmined-layers {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Button Base Styles - Force consistent styling */
.ol-unmined-layers button,
.layer-toggle-button {
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    background-color: #f8f8f8 !important;
    background-image: none !important;
    color: #333 !important;
    cursor: pointer;
    border-radius: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: normal !important;
    text-align: center;
    min-width: 80px;
    height: auto !important;
    line-height: 1.2 !important;
    transition: none !important;
    outline: none;
    box-sizing: border-box !important;
    display: block !important;
    width: 100%;
}

/* Hover State - Force consistent styling */
.ol-unmined-layers button:hover,
.layer-toggle-button:hover {
    background-color: #e8e8e8 !important;
    background-image: none !important;
    border-color: #ccc !important;
}

/* Active/Pressed State */
.ol-unmined-layers button:active,
.layer-toggle-button:active {
    background-color: #ddd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Focus State for Accessibility */
.ol-unmined-layers button:focus,
.layer-toggle-button:focus {
    border-color: #999;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Optional: Different styling for ON/OFF states */
.layer-toggle-button[data-state="on"] {
    background-color: #e8f4fd;
    border-color: #b3d9ff;
    color: #0066cc;
}

.layer-toggle-button[data-state="off"] {
    background-color: #f8f8f8;
    border-color: #ddd;
    color: #666;
}

/* Locate Coordinates Control Container */
.ol-locate-coordinates {
    position: absolute;
    top: 60px;
    right: 0.5em;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Locate Coordinates Button */
.ol-locate-coordinates button {
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    background-color: #f8f8f8 !important;
    color: #333 !important;
    cursor: pointer;
    border-radius: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: normal !important;
    text-align: center;
    transition: none !important;
    outline: none;
    box-sizing: border-box !important;
    display: block !important;
    box-shadow: none !important;
    height: 30px;
    width: 80px;
}

/* Locate Coordinates Button Hover */
.ol-locate-coordinates button:hover {
    background-color: #e8e8e8 !important;
    background-image: none !important;
    border-color: #ccc !important;
}

/* Locate Coordinates Button Active */
.ol-locate-coordinates button:active {
    background-color: #ddd !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Locate Coordinates Button Focus */
.ol-locate-coordinates button:focus {
    border-color: #999 !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .ol-unmined-layers {
        bottom: 3em;
        right: 1em;
        padding: 6px;
    }

    .ol-unmined-layers button,
    .layer-toggle-button {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 70px;
    }
    
    .ol-locate-coordinates {
        top: 50px;
        right: 0.5em;
        padding: 6px;
    }
    
    .ol-locate-coordinates button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}