/* =================================================================
   FULLSCREEN MAP - AREA SELECTOR STYLES
   ================================================================= */

/* Area selector positioning and styling when moved to map in fullscreen */
.area-selector-map-control .area-selector {
    margin-bottom: 0 !important;
}

.area-selector-map-control .form-group {
    margin-bottom: 10px;
}

.area-selector-map-control label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    display: block !important;
}

/* Enable pointer events for area selector in fullscreen */
.area-selector-map-control {
    pointer-events: auto;
}

.area-selector-map-control * {
    pointer-events: auto;
}


/* =================================================================
   FULLSCREEN MAP - SELECT2 DROPDOWN STYLES
   ================================================================= */

/* Ensure Select2 dropdown appears above fullscreen map */
.select2-container--open .select2-dropdown,
.select2-dropdown,
.leaflet-fullscreen-on .select2-dropdown {
    z-index: 1002 !important;
}

.leaflet-fullscreen-on .select2-container--open {
    z-index: 1001 !important;
}


/* =================================================================
   FULLSCREEN MAP - MODAL Z-INDEX OVERRIDES
   ================================================================= */

/* Force modal above fullscreen map container */
.leaflet-fullscreen-on .modal.show,
.leaflet-fullscreen-on .modal.fade.show,
body.modal-open .modal.show {
    z-index: 999999 !important;
    position: fixed !important;
}

/* Modal backdrop positioning */
.leaflet-fullscreen-on .modal-backdrop.show,
.leaflet-fullscreen-on .modal-backdrop.fade.show,
body.modal-open .modal-backdrop.show {
    z-index: 999998 !important;
    position: fixed !important;
}

/* Modal dialog container */
.leaflet-fullscreen-on .modal-dialog {
    z-index: 1000000 !important;
    position: relative !important;
}

/* Specific modal z-index overrides */
#area-details-modal.show {
    z-index: 999999 !important;
}

#area-details-modal .modal-dialog {
    z-index: 1000000 !important;
}


/* =================================================================
   FULLSCREEN MAP - MODAL FONT CONSISTENCY
   ================================================================= */

/* Preserve modal font styling when moved to fullscreen container */
.leaflet-fullscreen-on .modal {
    font-size: 14px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.leaflet-fullscreen-on .modal .modal-content {
    font-size: 14px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.leaflet-fullscreen-on .modal .modal-body {
    font-size: 14px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Inherit font styles for all modal text elements */
.leaflet-fullscreen-on .modal h1,
.leaflet-fullscreen-on .modal h2,
.leaflet-fullscreen-on .modal h3,
.leaflet-fullscreen-on .modal h4,
.leaflet-fullscreen-on .modal h5,
.leaflet-fullscreen-on .modal h6,
.leaflet-fullscreen-on .modal table,
.leaflet-fullscreen-on .modal p,
.leaflet-fullscreen-on .modal td,
.leaflet-fullscreen-on .modal th {
    font-size: inherit !important;
    font-family: inherit !important;
}


/* =================================================================
   FULLSCREEN MAP - MODAL SCROLLING & SIZING
   ================================================================= */

/* Enable proper scrolling for modal content in fullscreen */
.leaflet-fullscreen-on .modal-body {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}

/* Modal dialog sizing in fullscreen */
.leaflet-fullscreen-on .modal-dialog {
    max-height: calc(100vh - 60px) !important;
    margin: 30px auto !important;
}

/* Prevent body scroll when modal is open in fullscreen */
.leaflet-fullscreen-on.modal-open {
    overflow: hidden !important;
}


/* =================================================================
   MODAL CLOSE BUTTON ALIGNMENT FIXES
   ================================================================= */

/* Fix close button positioning */
.modal-header .close {
    margin-top: -2px !important;
    padding: 0 !important;
    line-height: 1 !important;
    float: right !important;
}

.modal-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 15px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}