/* Map Page Layout and Controls */

/* CSS Variables for common values */
:root {
    --map-height: calc(100vh - 3.25rem);
    --map-height-mobile: calc(100dvh - 3.25rem);
    --z-index-controls: 997;
    --z-index-elevated: 998;
    --z-index-modal-backdrop: 1000;
    --z-index-modal: 1001;
    --control-button-left: 12px;
}

/*
 * Map Page Layout
 * - Body is fixed to prevent scrolling
 * - Map container accounts for fixed navbar (3.25rem/52px)
 * - Uses dynamic viewport units (dvh/dvw) for better mobile support
 */

/* Prevent body scrolling on map page */
body.map-page {
    overflow: hidden;
    height: 100vh;
    height: 100dvh; /* Fallback for mobile browsers with dynamic UI */
    position: fixed;
    width: 100%;
}

/* Map container - fills viewport minus navbar */
#mapid {
    height: var(--map-height);
    height: var(--map-height-mobile); /* Progressive enhancement for mobile */
    width: 100vw;
    width: 100dvw; /* Progressive enhancement */
    position: relative;
    top: 0;
}

/* Map history wrapper */
#map-history {
    overflow: hidden;
    position: relative;
    height: var(--map-height);
    height: var(--map-height-mobile); /* Progressive enhancement */
    padding-top: 0; /* Override any inherited padding */
}

/* iOS Safari specific fixes for fixed positioning */
@supports (-webkit-touch-callout: none) {
    /* Target only iOS Safari */
    #map-history {
        height: calc(100dvh - 3.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); /* Navbar + safe areas */
        -webkit-overflow-scrolling: touch; /* Enable momentum scrolling if needed */
    }

    #mapid {
        height: calc(100dvh - 3.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); /* Navbar + safe areas */
        width: 100dvw;
        position: relative;
        z-index: 1; /* Ensure map is below fixed nav */
    }

    /* Ensure navbar stays fixed on iOS Safari */
    .navbar.is-fixed-top {
        position: fixed !important;
        top: env(safe-area-inset-top); /* Adjust for notch */
        left: 0;
        right: 0;
        z-index: 999 !important;
        -webkit-transform: translateZ(0); /* Force hardware acceleration */
        transform: translateZ(0);
        backface-visibility: hidden; /* Prevent flickering */
        -webkit-backface-visibility: hidden;
        /* Add padding for safe areas */
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Map control buttons - positioned relative to map container */
.download-button, .pin-button {
    position: fixed;
    height: 30px;
    width: 30px;
    border-radius: 2px;
    font-size: 0.6rem;
    left: var(--control-button-left);
    z-index: var(--z-index-elevated);
}

.download-button {
    top: calc(130px + var(--navbar-height)); /* Account for navbar when fixed positioned */
}

.pin-button {
    top: calc(170px + var(--navbar-height)); /* Account for navbar when fixed positioned */
}

/* Leaflet control customization */
.leaflet-control-layers-toggle {
    background-image: url(../img/control-icon.png) !important;
    background-repeat: no-repeat !important;
    width: 36px;
    height: 36px;
}

/* Style for pinned base layer in control menu */
.leaflet-control-layers-base input[value*="📌"] + span {
    font-style: italic !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
}

/* Legacy modal styles - to be removed once confirmed working */
.modal-close {
    position: absolute !important;
    background: rgb(218, 41, 28) !important;
}

#modal-description {
    z-index: var(--z-index-modal-backdrop);
    background: whitesmoke;
    font-size: 12;
    width: fit-content;
    margin: auto auto;
    height: fit-content;
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}

/* Modal link styles - consolidated */
.modal-link,
.modal-link-block,
.modal-issuer-block {
    color: #DA291C !important;
}

.modal-issuer-block,
.submitter-block {
    padding-bottom: 10px;
}

/* Modal close button positioning */
.modal-close-positioned {
    top: 10px;
    position: absolute;
    z-index: 10;
}

/* Map controls positioning */
.switch-mode-button {
    position: absolute;
    top: 13px;
    left: 60px;
    z-index: var(--z-index-controls);
}

.switch-mode-button[lang="ar"] {
    font-size: 105%;
}

/* Button content animation */
.button-content-fade {
    transition: opacity 150ms ease;
}

.button-content-fade.hidden {
    opacity: 0;
}

.button-content-fade.visible {
    opacity: 1;
}

/* Icon spacing */
.description-icon {
    margin-right: 1rem;
}

/* Container overflow control */
.map-history-container {
    overflow-y: hidden;
}

/* Transparency slider positioning */
.transparency-slider {
    position: absolute;
    background: transparent;
    opacity: 0.6;
    bottom: 35px;
    width: 120px;
    z-index: var(--z-index-elevated);
}

.transparency-slider.arabic {
    left: var(--control-button-left);
}

.transparency-slider.english {
    right: var(--control-button-left);
}

/* Modal button base styling */
.modal-button {
    position: absolute;
    bottom: 23px;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    background: white;
    border: 1px solid #d4d4d8;
}

.modal-button.arabic {
    right: var(--control-button-left);
    transform-origin: bottom right;
}

.modal-button.english {
    left: var(--control-button-left);
    transform-origin: bottom left;
}

.modal-button.morphing {
    z-index: var(--z-index-modal);
}

.modal-button.normal {
    z-index: var(--z-index-controls);
}

.modal-button.arabic.large-font {
    font-size: 105%;
}