/* ============================================================================
 * address.css
 * ----------------------------------------------------------------------------
 * Address tab — Google Map + Street View, hydrants chip, what3words chip,
 * map launch buttons. Combines:
 *
 *   1. Existing /response/assets/css/address.css
 *   2. Inline <style> block extracted from /response/pages/address.php
 *      (the .fn-w3w-chip rules)
 *
 * Restyled with Liquid Glass tokens where appropriate. The map wrap stays
 * with a solid background since the map tiles fill it.
 *
 * Load AFTER liquid-glass.css.
 * ========================================================================= */


/* ─────────────────────────────────────────────────────────────────────────
 * Stage — vertical flex container that fills the page-host content area.
 * Map takes the available space; buttons + chips sit below.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-addr-stage {
    display: flex;
    flex-direction: column;
    /* Gap 0.7rem between items (was 0.5). User said too crammed —
       extra breathing between map, address text, hydrants chip, and
       map buttons. */
    gap: .7rem;
    /* Vertical padding tuned for equal-gap layout:
         - top 0.25rem: small breathing below the status bar — matches
           the gap from AVAILABLE to the call card on the home screen,
           so AVAILABLE → content has the same gap on both screens
         - bottom 0: buttons (last item) sit AT stage bottom, which the
           page--full height calc places exactly 0.5rem above tabbar
           top — same as the gap between every other pair of items */
    padding: 0.25rem .85rem 0;
    height: 100%;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Map wrap — contains <iframe>/canvas map and street-view panorama.
 * Solid surface, not glass — the map tiles cover the entire area.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-map-wrap {
    position: relative;
    flex: 1 1 0;
    min-height: 12rem;
    border-radius: var(--lg-r-md);
    overflow: hidden;
    border: 1px solid var(--lg-edge);
    background: var(--fn-tertiary-bg);
    box-shadow: var(--lg-shadow);
}

#fnMap, #fnPano {
    width: 100%;
    height: 100%;
    min-height: 12rem;
}
#fnPano { display: none; }
.fn-map-wrap.streetview #fnMap { display: none; }
.fn-map-wrap.streetview #fnPano { display: block; }


/* ─────────────────────────────────────────────────────────────────────────
 * Street-view toggle — floats over the top-right of the map. Glass pill
 * so it reads as a control distinct from the map content.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-sv-toggle {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255, 255, 255, .96);
    color: #1a1a1a;
    border: 0;
    border-radius: 999px;
    padding: .45rem .75rem;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.fn-sv-toggle .mdi { font-size: 1rem; }
.fn-sv-toggle.disabled {
    opacity: .55;
    cursor: not-allowed;
}
.fn-map-wrap.streetview .fn-sv-toggle {
    background: #1a1a1a;
    color: #fff;
}
[data-bs-theme="dark"] .fn-sv-toggle {
    background: rgba(40, 44, 52, .96);
    color: #fff;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Address text strip beneath the map.
 * NOTE: .fn-map-coords (the lat/long sub-line) is hidden — the user
 * doesn't need GPS coordinates surfaced; the map+address are enough.
 * The element still exists in the DOM so any JS that targets it keeps
 * working, it just doesn't render.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-map-address {
    flex: 0 0 auto;
    font-size: .95rem;
    color: var(--fn-text-muted);
    text-align: center;
    line-height: 1.35;
    padding: 0 .25rem;
}
.fn-map-address strong {
    color: var(--fn-text);
    font-weight: 700;
}
.fn-map-coords {
    display: none;  /* lat/long not shown — was distracting */
}


/* ─────────────────────────────────────────────────────────────────────────
 * Map action buttons — Google + Apple maps launchers.
 * Solid coloured fills (action affordance), but spring + brightness on
 * press matches the Liquid Glass interaction language elsewhere.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-map-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}
.fn-map-actions.single-col {
    grid-template-columns: 1fr;
}

.fn-map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .55rem;
    min-height: 2.5rem;
    /* Was --lg-r-sm (0.65rem). Bumped to 1rem to match home response
       buttons and preplan action buttons. */
    border-radius: 1rem;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .02em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(255,255,255,.20) inset,
                0 2px 6px rgba(0,0,0,.18);
    transition: filter .12s var(--lg-ease),
                transform .1s var(--lg-ease);
    box-sizing: border-box;
}
.fn-map-btn:active {
    transform: scale(.96);
    filter: brightness(.92);
}
.fn-map-btn .mdi { font-size: 1.1rem; line-height: 1; }
.fn-map-btn.google { background: #4285F4; color: #fff; }
.fn-map-btn.apple  { background: #1a1a1a; color: #fff; }
[data-bs-theme="dark"] .fn-map-btn.apple { background: #383838; }


/* ─────────────────────────────────────────────────────────────────────────
 * Hydrants info chip — red-themed strip between address and buttons.
 * Renders distance to nearest hydrant + count within 200m; flips to a
 * filled-red "warning" state when no hydrants are within 200m so crews
 * know they may have to draft or shuttle water.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-hydrants-info {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    box-sizing: border-box;
    background: rgba(220, 38, 38, .10);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, .30);
    border-radius: var(--lg-r-sm);
    padding: .5rem .85rem;
    min-height: 2.5rem;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    transition: background .15s, color .15s, border-color .15s;
}
.fn-hydrants-info[hidden] { display: none !important; }
.fn-hydrants-info .mdi { font-size: 1.1rem; }
.fn-hydrants-info.warn {
    background: var(--fn-accent);
    color: #fff;
    border-color: var(--fn-accent);
}
.fn-hydrants-info.loading {
    background: var(--lg-surface-subtle);
    color: var(--fn-text-muted);
    border-color: var(--lg-edge);
    font-weight: 600;
}
[data-bs-theme="dark"] .fn-hydrants-info {
    background: rgba(220, 38, 38, .18);
    color: #ff8a8a;
    border-color: rgba(220, 38, 38, .38);
}
[data-bs-theme="dark"] .fn-hydrants-info.warn {
    background: var(--fn-accent);
    color: #fff;
    border-color: var(--fn-accent);
}


/* ─────────────────────────────────────────────────────────────────────────
 * what3words auto-detected chip (extracted from settings.php inline).
 * Renders when call data includes a /// address. Tapping opens the w3w
 * app via Universal Links on iOS, falls back to the web page.
 * ──────────────────────────────────────────────────────────────────────── */
#fnAddrRoot .fn-w3w-chip {
    /* Same sizing rules as .fn-hydrants-info / .fn-map-btn so the chip
       + hydrants chip + map buttons read as one coherent action stack. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: .5rem .85rem;
    background: rgba(225, 31, 38, .07);
    border: 1px solid rgba(225, 31, 38, .22);
    border-radius: var(--lg-r-sm);
    color: inherit;
    text-decoration: none;
    font-family: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s var(--lg-ease),
                transform .1s var(--lg-ease);
}
#fnAddrRoot .fn-w3w-chip:active {
    transform: scale(0.99);
    background: rgba(225, 31, 38, .12);
}
#fnAddrRoot .fn-w3w-chip .fn-w3w-prefix {
    color: #E11F26;
    font-weight: 800;
    letter-spacing: -1px;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
#fnAddrRoot .fn-w3w-chip .fn-w3w-words {
    flex: 1;
    font-weight: 700;
    font-size: .92rem;
    word-break: break-word;
    line-height: 1.25;
}
#fnAddrRoot .fn-w3w-chip-icon {
    color: var(--fn-text-muted);
    flex-shrink: 0;
    font-size: 1.05rem;
}
[data-bs-theme="dark"] #fnAddrRoot .fn-w3w-chip {
    background: rgba(225, 31, 38, .14);
    border-color: rgba(225, 31, 38, .35);
}


/* ─────────────────────────────────────────────────────────────────────────
 * Google Maps InfoWindow chrome overrides — hydrant marker popups.
 *
 * Modern Google Maps InfoWindow (2024+) has THREE layers, not two:
 *   .gm-style-iw-c    → outer white card wrapper
 *   .gm-style-iw-chr  → close-button chrome ROW (~32px, holds the X)
 *   .gm-style-iw-d    → content scroll container (where our HTML goes)
 *
 * The .gm-style-iw-chr row reserves its own height at the top of the
 * card. Adjusting .gm-style-iw-c padding alone won't move the title up
 * — content still starts BELOW the chrome row. To make the title sit
 * inline with the X we have to collapse the chrome row to height 0
 * and re-anchor the X via absolute positioning on the close button.
 *
 * Targeting Google's class names is brittle (they can rename in API
 * updates) but it's the only way — InfoWindow chrome isn't reachable
 * via our own class names.
 * ──────────────────────────────────────────────────────────────────────── */

/* Collapse the close-button row so it stops reserving vertical space. */
.gm-style-iw-chr {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;  /* keep X visible even though height=0 */
}

/* Re-anchor the X button to top-right of the card itself (was inside the
   collapsed chrome row). 4px offset matches Google's normal positioning. */
.gm-style-iw-chr .gm-ui-hover-effect,
.gm-style .gm-ui-hover-effect {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    z-index: 2 !important;
}

/* Wrapper padding: top breathing + right room for the X + normal sides */
.gm-style .gm-style-iw-c {
    padding: 8px 36px 10px 12px !important;
}

/* Inner scroll container — kill its padding/overflow so our content
   fills the wrapper edge-to-edge. */
.gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}