/* ...existing code... */
html, body {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* map element full height */
#map {
    width: 100%;
    height: 100%;
}

/* OpenLayers control styling */
.ol-control > * {
    background-color: #f8f8f8 !important;
    color: #444444 !important;
    border-radius: 0;
}
.ol-attribution a,
.gcd-gl-input::placeholder,
.search-layer-input-search::placeholder {
    color: #444444 !important;
}
.search-layer-input-search {
    background-color: #f8f8f8 !important;
}
.ol-control > *:focus,
.ol-control > *:hover {
    background-color: rgba(248, 248, 248, 0.7) !important;
}
.ol-control {
    background-color: rgba(255,255,255,0.4) !important;
    padding: 2px !important;
}

/* Layout grid */
.container {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-auto-rows: 100vh;
    background-color: #ffffff;
}

/* Right-hand sidebar */
.sidebar {
    /* medium metallic grey border around the right-hand panel */
    border: 5px solid #9ea7ad;
    padding: 1rem;
    box-sizing: border-box; /* keep padding inside the column width */
    background: rgb(255, 255, 255);
    /* optional subtle metallic sheen */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    display: flex;
    flex-direction: column;
}

/* Sidebar heading */
.sidebar h1 {
    text-align: center;
    margin: 0;
}
.sidebar p, .sidebar .sidebar-intro {
    text-align: justify;
    margin-top: 0.75rem;
    margin-bottom: 0;
    color: #333;
    line-height: 1.45;
    font-size: 14px;
}

/* Selected property section in the right-hand sidebar */
.selected-info {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    text-align: justify;           /* fully justified text as requested */
    font-size: 14px;
    color: #333;
    flex: 1 1 auto;
}

/* Match paragraph width/flow in the sidebar */
.selected-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 15px;
    font-weight: 600;
    text-align: left; /* heading left aligned, paragraph content justified */
}

/* attribute list styling */
.selected-info .attrs {
    margin: 0;
    padding: 0;
}
.selected-info .attrs dt {
    font-weight: 600;
    display: inline;
}
.selected-info .attrs dd {
    display: inline;
    margin: 0 0 0.5rem 0.5rem;
    color: #222;
}

/* empty state */
.selected-info .empty {
    margin: 0;
    color: #666;
}

/* Selected property info panel with fixed dimensions */
#selected-info {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    margin-top: 16px;
    background: #f9f9f9;
    max-height: 400px; /* fixed height */
    overflow-y: auto; /* scroll if content exceeds height */
    box-sizing: border-box;
}

#selected-info h2 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
}

/* Definition list styling for selected property data */
.selected-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}

.selected-key {
    font-weight: 600;
    font-size: 12px;
    color: #555;
    margin: 0;
}

.selected-value {
    font-size: 13px;
    color: #222;
    margin: 0;
    word-break: break-word;
}

.selected-list .empty {
    grid-column: 1 / -1;
    color: #999;
    font-size: 13px;
    margin: 0;
    font-style: italic;
}

/* Ensure sidebar uses column layout so footer sits directly after selected-info */
.sidebar {
    display: flex;
    flex-direction: column;
}

/* Stop selected-info from taking all remaining space so the button appears immediately below it */
.selected-info {
    flex: none; /* do not grow to fill available space */
}

/* Sidebar footer that contains the button — visible and directly under selected-info */
.sidebar-footer {
    margin-top: 12px;
    display: block;
    width: 50%;
}

/* More Information button — placed inline in the sidebar under the selected panel */
.more-info-btn {
    /* Remove fixed positioning so it flows in the sidebar */
    position: static;
    transform: none;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
    padding: 10px 14px;
    border-radius: 4px;
    background: #2b6ea3;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    z-index: auto;
}

/* Keep hover/focus states */
.more-info-btn:focus,
.more-info-btn:hover {
    background: #245a86;
    outline: none;
}

/* Modal styles */
.more-info-modal {
    display: none;               /* hidden by default */
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

/* When aria-hidden is false, show as flex and center content */
.more-info-modal[aria-hidden="false"] {
    display: flex;
}

/* overlay covers full viewport */
.more-info-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

/* Centered modal content */
.more-info-content {
    position: relative;
    background: #fff;
    width: 92%;
    max-width: 640px;
    max-height: 80vh;
    overflow: auto;
    border-radius: 6px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1;
    margin: 0; /* remove extra margin so flex centering is exact */
}
.more-info-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.more-info-body p {
    margin: 0 0 12px 0;
    color: #222;
    font-size: 14px;
}