/* Custom CSS for Electrical Distribution Survey UI */

/* Custom font or fallback */
body {
    font-family: 'Sarabun', 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
    padding-top: env(safe-area-inset-top);
}

/* Ensure map fills the screen correctly minus the navbar and header */
#map {
    height: 100%;
    width: 100%;
    z-index: 10;
}

/* Page visibility transition */
.page {
    display: none;
    height: calc(100vh - 7.5rem - env(safe-area-inset-bottom) - env(safe-area-inset-top)); /* Adjust dynamically based on header + navbar height + iOS safe areas */
    overflow-y: auto;
}

.page.active {
    display: flex;
    flex-direction: column;
}

/* iOS bottom navigation bar spacing fixes to support notched iPhones */
nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(4rem + env(safe-area-inset-bottom)) !important;
}

/* Leaflet control button styling */
.leaflet-bar a {
    background-color: #fff !important;
    border-bottom: 1px solid #ccc !important;
    color: #374151 !important;
}

.leaflet-bar a:hover {
    background-color: #f3f4f6 !important;
}

/* Custom Leaflet SVG Pole Marker styles */
.custom-pole-marker-icon {
    background: transparent !important;
    border: none !important;
}