/* Styles for the map form section (template-map-section.html) -- both collection
   mode (point/polygon drawing UI) and presentation mode (layer chips, feature cards,
   popups, print rules). */

#map {
    height: 600px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--smartforms-border-color, #ccc);
    z-index: 0;
}
@media screen and (max-width: 780px) {
    #map {
        height: 380px;
    }
}

/* Default embed (?embed=1, no &list=1, see ADR-086/087): the map is the entire page, so
   its height should be whatever the embedding page's <iframe> box is, not our own fixed
   600px/380px above. body{height:100vh} sizes to the iframe's own viewport (which the
   embedding page's CSS on the <iframe> element fully controls); the chain down to #map
   just needs an explicit height at every level for the percentage to resolve. Higher
   specificity than the plain #map rules above, so no !important needed. */
body.map-embed-bare-map {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}
body.map-embed-bare-map #main-content,
body.map-embed-bare-map .map-embed-bare-box {
    height: 100%;
}
/* The map takes what is left under the layer chips, which stay visible in an embed.
   At height: 100% the chips pushed its bottom strip past the clipped edge of body,
   and the OpenStreetMap attribution sits exactly there. min-height: 0 is needed
   because a flex item defaults to min-height: auto and would not shrink. */
body.map-embed-bare-map .map-embed-bare-box,
:fullscreen:has(> #map),
.leaflet-pseudo-fullscreen:has(> #map) {
    display: flex;
    flex-direction: column;
}
body.map-embed-bare-map #map,
:fullscreen > #map,
.leaflet-pseudo-fullscreen > #map {
    flex: 1;
    min-height: 0;
    height: auto;
    border-radius: 0;
}

/* A read-only map goes full screen with its box, chips included (map-init.js), laid out
   like the embed above. The browser sizes a native :fullscreen box itself; the plugin's
   pseudo-fullscreen fallback only sets position and 100% size, hence the rest here. */
:fullscreen:has(> #map),
.leaflet-pseudo-fullscreen:has(> #map) {
    box-sizing: border-box;
    max-width: none;
    margin: 0;
    padding: 0.75rem;
    border-radius: 0;
    background-color: var(--smartforms-forms-background-color, #fff);
}
:fullscreen > .section-title,
.leaflet-pseudo-fullscreen > .section-title {
    display: none;
}

#points-list {
    margin-top: 1rem;
}
.map-point-card {
    background: var(--smartforms-card-bg, #f9f9f9);
    border: 1px solid var(--smartforms-border-color, #ddd);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}
.map-point-card .point-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.map-point-card .point-label {
    font-weight: 600;
    font-size: 1em;
}
.map-point-card .point-coords {
    font-size: 0.8em;
    color: #888;
    font-family: monospace;
    font-weight: 400;
}
.map-point-card .point-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.map-point-card .point-locate,
.map-point-card .point-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
}
.map-point-card .point-locate img,
.map-point-card .point-delete img {
    width: 1.8em;
    height: 1.8em;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.map-point-card .point-locate:hover img,
.map-point-card .point-delete:hover img {
    opacity: 1;
}
.map-point-card .nice-form-group {
    margin-bottom: 0;
}
.map-point-count {
    font-size: 0.9em;
    color: var(--smartforms-forms-text-color);
    margin-top: 0.3rem;
}
.mode-toggle-btn {
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    border: 2px solid #ccc;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    background: #f5f5f5;
    color: #444;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mode-toggle-btn.active {
    border-color: var(--smartforms-button-background-color, #3388ff);
    background: var(--smartforms-button-background-color, #3388ff);
    color: var(--smartforms-button-text-color, #000);
}
#polygon-draw-toolbar {
    display: none;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.polygon-action-btn {
    padding: 0.35rem 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 0.88em;
    font-weight: 500;
    background: #f5f5f5;
    color: #333;
    transition: background 0.12s, border-color 0.12s;
}
.polygon-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.polygon-action-btn.btn-primary {
    background: var(--smartforms-button-background-color, #bd263d);
    border-color: var(--smartforms-button-background-color, #bd263d);
    color: var(--smartforms-button-text-color, #000);
}
.polygon-action-btn.btn-primary:disabled {
    background: #aaa;
    border-color: #aaa;
}
.polygon-action-btn.btn-danger {
    border-color: #d33;
    color: #d33;
}
#point-type-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.point-type-btn {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--point-type-text-color, #000);
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.8;
}
.point-type-btn.active {
    border-color: currentColor;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}
/* Presentation mode only (map_presentation_only) -- layer chips, feature cards, popups. */

/* Side-by-side layout: map card sticky in a left column, feature list scrolling in a
   right column, so the two stay visually linked while browsing a long feature list.
   Kept well above the #map mobile breakpoint above (780px) -- .form-section-box's own
   90% width cap (styles.css) means anything narrower would leave neither column enough
   room to be usable, so single-column stacking (today's layout, unchanged below this
   breakpoint) stays in effect on tablets too. */
@media screen and (min-width: 1000px) {
    /* Presentation-only pages go full-bleed (within body's own padding) at this
       breakpoint -- since --content-max-width (styles.css) is inherited, this one
       rule widens the title bar and every before/closing info box on the page
       together with the map grid below, so none of them drift out of sync. */
    body.map-presentation-page {
        --content-max-width: 100%;
    }
    #map-presentation-layout {
        display: grid;
        grid-template-columns: minmax(360px, 1fr) minmax(320px, 420px);
        align-items: start;
        gap: 20px;
        max-width: var(--content-max-width);
        margin: 20px auto;
    }
    #map-presentation-layout > .form-section-box {
        /* Grid children fill their column instead of re-applying the page's own 90%
           width cap, which would needlessly narrow both columns a second time. */
        max-width: none;
        margin: 0;
        /* Grid items default to a content-based min-width (min-content), so a long
           unbreakable string (e.g. a linkified URL in a feature description) would
           otherwise grow this track past its 1fr share and squeeze the map column. */
        min-width: 0;
    }
    #map-card-box {
        position: sticky;
        top: 20px;
        z-index: 100;
    }
    /* The card's map box is one screen tall (20px gap above and below, like the sticky
       top), whatever sits above it, and the map fills what the heading and chips leave,
       laid out like the embed above. */
    body.map-presentation-page .form-section-box:has(> #map) {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 40px);
        min-height: 500px;
    }
    body.map-presentation-page .form-section-box:has(> #map) > #map {
        flex: 1;
        min-height: 0;
        height: auto;
    }
}
#map-layer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.map-layer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 2px solid var(--chip-color, #3388ff);
    background: var(--smartforms-card-bg, #f9f9f9);
    color: inherit;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, opacity 0.15s;
}
.map-layer-chip-dot {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    border: 2px solid var(--chip-color, #3388ff);
    background-color: var(--chip-color, #3388ff);
    flex-shrink: 0;
}
button.map-layer-chip:not(.active) {
    border-color: #bbb;
    opacity: 0.55;
}
button.map-layer-chip:not(.active) .map-layer-chip-dot {
    background-color: transparent;
}
button.map-layer-chip:disabled {
    opacity: 0.4;
    cursor: default;
}
.map-layer-chip-static {
    cursor: default;
}
.map-feature-section {
    margin-bottom: 1.5rem;
}
.map-feature-section-heading {
    cursor: pointer;
    margin-bottom: 0.75rem;
    /* Hanging indent: the first line starts at the box edge with the disclosure
       marker, wrapped lines line up under the category name instead of under the
       marker. 2.85em = marker width + colour dot + its right margin. */
    padding-left: 2.85em;
    text-indent: -2.85em;
}
.map-feature-section-heading h3 {
    /* Inline, not inline-flex: an inline-flex box is atomic and cannot break, so a
       long category name jumped below the disclosure marker instead of wrapping
       next to it. */
    display: inline;
    font-size: 1.1em;
    margin: 0;
}
.map-feature-section-heading:focus-visible {
    outline: 2px solid var(--smartforms-button-background-color, #3388ff);
    outline-offset: 2px;
}
.map-feature-section-color-dot {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.map-feature-card {
    background: var(--smartforms-card-bg, #f9f9f9);
    border: 1px solid var(--smartforms-border-color, #ddd);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    /* Matches #map-card-box's sticky `top: 20px` so a card scrolled into view via
       scrollIntoView lands level with the map instead of flush against the very top. */
    scroll-margin-top: 20px;
    /* Long unbreakable text (e.g. a linkified URL in the description) wraps inside
       the card instead of forcing the card, and its grid column, to widen. */
    overflow-wrap: anywhere;
}
.map-feature-card:focus {
    outline: 2px solid var(--smartforms-button-background-color, #3388ff);
    outline-offset: 2px;
}
.map-feature-card-title {
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.map-feature-card-description {
    margin-bottom: 0.5rem;
}
.map-feature-card-link {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.map-feature-card-link .link-arrow {
    font-size: 1.15em;
    font-weight: 700;
    margin-left: 0.1em;
}
.map-feature-card-updated {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 0.5rem;
}
.map-feature-card-show-button {
    display: block;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--smartforms-border-color, #ccc);
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.map-feature-card-show-button:hover {
    background: var(--smartforms-button-background-color, #3388ff);
    color: var(--smartforms-button-text-color, #fff);
}
.map-feature-popup-title {
    font-weight: 600;
    font-size: 1.05em;
    margin-bottom: 0.3rem;
}
.map-feature-popup-show-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    border: 1px solid var(--smartforms-border-color, #ccc);
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.map-feature-popup-show-button:hover {
    background: var(--smartforms-button-background-color, #3388ff);
    color: var(--smartforms-button-text-color, #fff);
}
.map-feature-popup-show-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    transition: filter 0.15s;
}
.map-feature-popup-show-button:hover .map-feature-popup-show-icon {
    filter: brightness(0) invert(1);
}
@keyframes map-feature-card-flash {
    0%, 100% { background-color: var(--smartforms-card-bg, #f9f9f9); }
    30% { background-color: rgba(51, 136, 255, 0.15); }
}
.map-feature-card-highlight {
    animation: map-feature-card-flash 1s ease-in-out;
}
@media print {
    /* Leaflet's live tile/canvas map does not print meaningfully; the feature list
       below it is the printable content (plain list of cards, no interactive parts). */
    #map {
        display: none;
    }
    #map-layer-chips {
        display: none;
    }
    .map-feature-card-show-button {
        display: none;
    }
    .map-feature-card {
        break-inside: avoid;
    }
    /* Collapsed <details> sections must still print in full -- a printed page has no
       way to click them open. */
    details:not([open]) > summary ~ * {
        display: revert !important;
    }
    summary {
        list-style: none !important;
    }
}