/* Pool shape markers — strip Leaflet's default divIcon white-box */
.pool-shape-icon {
    background: none !important;
    border: none !important;
}

/* Globals (color palette + base font-family) moved to /css/common.css.
   This file now holds explore-specific rules + cross-route layout fixes
   that haven't been migrated elsewhere. */

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Disable double-tap-to-zoom on mobile while preserving pinch-zoom for accessibility.
       Leaflet's own touch-action rules win for the map, so map gestures are unaffected. */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}
/* Prevent Bootstrap .row negative margins from causing horizontal overflow */
.row {
    margin-left: 0;
    margin-right: 0;
}
.row > * {
    padding-left: 6px;
    padding-right: 6px;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    margin-top: unset;
    margin-bottom: unset;
    font-weight: unset;
    line-height: unset;
}
a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    cursor: pointer;
}
button {
    color: var(--primary-color);
    background-color: white;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 600;
    padding: 5px 5px;
}
label {
    font-size: 16px;
    font-weight: 600;
}
li {
    font-size: 16px;
    font-weight: 500;
}
input {
    font-size: 24px;
    font-weight: 600;
    border: var(--primary-color) 1px solid;
    background-color: white;
    border-radius: 8px;
    padding: 5px 5px;
}
select {
    font-size: 24px;
    font-weight: 600;
    padding: 5px 5px;
    margin-bottom: 5px;
}
.content-row {
    display: flex;
    padding: 2px 8px;
    margin: 0;
}

/* Tri-pane layout */
.tri-pane {
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 5px;
    overflow-y: auto;
    flex: 0 0 33.33%;
    min-width: 0;
}
.tri-pane-left {
    border: var(--primary-color) 1px solid;
    border-radius: var(--border-radius);
    padding: 5px 10px;
}
.tri-pane-center {
    padding: 0 5px;
}
.tri-pane-right {
    border: var(--primary-color) 1px solid;
    border-radius: var(--border-radius);
    padding: 5px 10px;
}

/* Pane dividers (drag handles) */
.pane-divider {
    flex: 0 0 5px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 10;
}
.pane-divider::after {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 1px;
    width: 3px;
    border-radius: 2px;
    background: #ccc;
    transition: background 0.15s;
}
.pane-divider:hover::after {
    background: var(--primary-color);
}

/* =========================================================================
   Mobile: tabbed single-pane layout (replaces stacked three-pane)
   ========================================================================= */
@media (max-width: 1150px) {
    /* Fixed bottom tab bar height = operable button area (60px, big
       enough to tap above the OS gesture strip) + the device's bottom
       safe-area inset (the home-indicator / swipe-up zone, ~34px on
       modern iPhones, 0 elsewhere). Single source of truth so the body
       padding and the pane heights below stay in lockstep with the bar.
       env() is only non-zero because explore/index.html sets
       viewport-fit=cover. */
    :root {
        --tabbar-h: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    .content-row {
        flex-wrap: wrap;
    }
    .tri-pane {
        display: none !important;
        height: calc(100dvh - var(--header-h, 100px) - var(--tabbar-h));
        min-height: 0;
        border: none !important;
        border-radius: 0 !important;
        padding: 4px;
        flex: unset !important;
    }

    /* Hide dividers on mobile */
    .pane-divider {
        display: none;
    }

    /* Show the active pane */
    .content-row[data-active-tab="list"] .tri-pane-left   { display: flex !important; }
    .content-row[data-active-tab="map"]  .tri-pane-center  { display: flex !important; }
    .content-row[data-active-tab="info"] .tri-pane-right   { display: flex !important; }

    /* Active pane takes full width */
    .content-row[data-active-tab] .tri-pane {
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    /* Map needs explicit height for Leaflet */
    .content-row[data-active-tab="map"] .tri-pane-center {
        height: calc(100dvh - var(--header-h, 100px) - var(--tabbar-h));
        padding: 0;
    }

    body {
        padding-bottom: var(--tabbar-h);
    }

    /* Filter hamburger toggle — same size as app hamburger (.action-overflow-btn) */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid var(--primary-color);
        border-radius: 6px;
        color: var(--primary-color);
        font-size: 18px;
        height: 40px;
        min-width: 44px;
        padding: 0 12px;
        cursor: pointer;
        line-height: 1;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .filter-toggle-btn.active {
        background: var(--primary-color);
        color: white;
    }

    /* When filters are hidden on mobile */
    .explore-row2.collapsed {
        display: none !important;
    }
}

/* =========================================================================
   Explore tab bar (mobile only)
   ========================================================================= */
.explore-tabs {
    display: none;
}
@media (max-width: 1150px) {
    .explore-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        border-top: 1px solid #ddd;
        background: white;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
        /* Extend the white bar down into the home-indicator / swipe-up
           zone, but as inert padding — the buttons stay ABOVE it so the
           tap targets never overlap the OS gesture strip. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .explore-tab-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 60px of guaranteed operable height, fully above the reserved
           bottom strip (which .explore-tabs padding now absorbs). */
        height: 60px;
        padding: 6px 2px;
        border: none;
        background: white;
        color: var(--text-secondary);
        font-size: 12px;
        cursor: pointer;
        border-radius: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .explore-tab-btn i {
        font-size: 20px;
        margin-bottom: 3px;
    }
    .explore-tab-btn.active {
        color: var(--primary-color);
        border-top: 2px solid var(--primary-color);
        font-weight: 600;
    }
}

/* Header */
header {
    /* max() keeps the original 4px on non-cover pages (env() = 0) and
       grows to clear the status bar / notch on explore/index.html, which
       sets viewport-fit=cover for the bottom-tab safe-area handling. */
    padding: max(4px, env(safe-area-inset-top, 0px)) 8px 4px;
}

/* Detail page header: back button + title + action buttons on one row */
.detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    flex-wrap: nowrap;
}
.detail-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}
.detail-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    position: relative;
}
.detail-actions .action-button {
    font-size: 14px;
    padding: 4px 10px;
    white-space: nowrap;
}

/* Overflow menu toggle — hidden on desktop, shown on mobile */
.action-overflow-btn {
    display: none;
    background: none;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 18px;
    height: 40px;
    min-width: 44px;
    padding: 0 12px;
    cursor: pointer;
    line-height: 1;
    box-sizing: border-box;
}
.action-overflow-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    min-width: 180px;
    /* Prevent the panel from extending past the viewport's left edge.
       Some breathing room from screen edges (8px each side). */
    max-width: calc(100vw - 16px);
    padding: 4px 0;
}
.action-overflow-panel.show { display: block; }
.action-overflow-panel .action-button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 10px 16px;
    font-size: 15px;
    color: var(--primary-color);
    cursor: pointer;
    white-space: nowrap;
}
/* On narrow screens, let long menu labels wrap rather than overflow */
@media (max-width: 480px) {
    .action-overflow-panel .action-button {
        white-space: normal;
        word-break: break-word;
    }
}
.action-overflow-panel .action-button:hover {
    background: var(--primary-light);
}

@media (max-width: 900px) {
    .action-overflow-btn { display: block; }
    .detail-actions > .action-button { display: none !important; }
}

/* ==========================================================================
   Explore page 3-row header
   ========================================================================== */

/* Row 1: Logo ... (spacer) ... hamburger | profile */
.explore-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
}
.explore-row1-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Row 2: Filters — mobile only (populated by JS cloning filter_container contents) */
.explore-row2 {
    display: none;
}

/* Row 3: Chips (status + level + filter tokens) */
.explore-row3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    min-height: 0;
}

/* Desktop: filters stay inline in row 1, row 2 hidden */
@media (min-width: 1151px) {
    .filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
        flex: 1;
        min-width: 0;
        padding: 4px;
    }
    .explore-row2 { display: none !important; }
}

/* Mobile: filters move to row 2 (always visible), hide from row 1 */
@media (max-width: 1150px) {
    .filter-container {
        display: none !important;
    }
    .explore-row2 {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        padding: 2px 8px;
        align-items: center;
        border-bottom: 1px solid #eee;
    }
}

/* When filter tokens render into row 3, hide the one inside the filter bar */
.explore-row3 ~ * .filter-tokens,
#filter_tokens_row ~ .filter-tokens { display: none; }
/* If filter_tokens_row exists, the filter-tokens inside filter-bar is redundant */
body:has(#filter_tokens_row) #filter-tokens { display: none; }
div.controls {
    color: var(--primary-color);
    background-color: white;
    align-items: center;
    flex-wrap: wrap;
}
.header-title {
    height: 100%;
    width: 100%;
    margin: auto;
    text-align: center;
}
.header-name {
    display: inline;
    height: 100%;
    margin-top: 5px;
    font-size: 18px;
    vertical-align: middle;
}
.header-title-logo {
    display: flex;
    align-items: center;
}
.header-title-logo img {
    max-height: 50px;
}

/* Explore header logo block: VCE logo + VPAtlas wordmark + version */
.header-logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}
.header-logo-link:hover { text-decoration: none; }
.header-vce-logo {
    height: 36px;
    width: auto;
    flex-shrink: 0;
}
/* VT Fish & Wildlife crest, sponsor logo paired with VCE.
   Shares the VCE responsive treatment so the two logos shrink and hide
   together on narrow phones where header real-estate is at a premium. */
.header-vfw-logo {
    height: 36px;
    width: auto;
    flex-shrink: 0;
}
/* On narrow phones, replace the full VCE logo image with a small icon plus
   the acronym "VCE" per Design Review 2 decision 33:50 (refined): full
   logo on large screens, abbreviated icon + text on small. */
.header-vce-text {
    display: none;
    font-weight: 700;
    font-size: 18px;
    color: var(--primary-color);
    letter-spacing: 0.5px;
    margin-left: 4px;
}
.header-vce-icon {
    display: none;
    height: 40px;
    width: auto;
    vertical-align: middle;
}
.header-app-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 2px;
}
.header-app-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: var(--primary-color);
}
.header-app-stack .app-version {
    margin-left: 0;
    font-size: 11px;
}
@media (max-width: 768px) {
    .header-vce-logo { height: 32px; }
    .header-vfw-logo { height: 32px; }
    .header-app-name { font-size: 15px; }
}
@media (max-width: 419px) {
    .header-vce-logo { display: none; }
    .header-vce-icon { display: inline-block; }
    .header-vce-text { display: inline-block; }
    /* VCE collapses to icon+text on narrow phones, but F&W has no
       equivalent abbreviated form — keep the crest visible, just
       shrunk a touch so it doesn't crowd the title. */
    .header-vfw-logo { height: 28px; }
}
hr {
    margin: 0;
}
.divider-header {
    width: 100%;
    margin: 0 0 2px 0;
}

/* Filter bar */
.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    align-items: center;
    min-width: 0;
}
/* Wrapper divs in explore-row3 — let their chips flow as direct flex children
   of explore-row3 so status, level, and filter tokens line up inline together */
.filter-description {
    display: contents;
}

/* Buttons */
.button-container {
    margin-top: 10px;
    margin-bottom: 10px;
}
.exit-button {
    box-sizing: border-box;
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 36px;
    height: 36px;
    line-height: 1;
    padding: 0;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    text-decoration: none;
}
.exit-button:hover {
    background-color: var(--primary-light);
}
.home-button {
    box-sizing: border-box;
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 36px;
    height: 36px;
    line-height: 1;
    padding: 0;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    text-decoration: none;
}
.home-button:hover {
    background-color: var(--primary-light);
    text-decoration: none;
    color: var(--primary-color);
}
.default-button {
    font-weight: bold;
    border: 3px solid orange !important;
}
button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Adopt/action buttons */
.action-button {
    background-color: white;
    color: var(--primary-color);
    border: var(--primary-color) 1px solid;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 18px;
    cursor: pointer;
}
.action-button:hover {
    background-color: var(--primary-light);
}
.action-button-danger {
    color: white;
    background-color: var(--selected-color);
    border-color: var(--selected-color);
}

/* Wait overlay */
#wait-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90000;
    background-color: lightgrey;
    opacity: 70%;
    text-align: center;
}
#wait-overlay i {
    margin: 0;
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
}

/* Form validation */
input:invalid {
    background-color: #ffdddd;
    border-color: red;
    border-style: solid;
    border-radius: 8px;
}
select:invalid {
    background-color: #ffdddd;
    border-color: red;
    border-style: solid;
    border-radius: 8px;
}

/* Profile icon */
.profile-container {
    display: flex;
    align-items: center;
}
.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 18px;
    box-sizing: border-box;
}
.profile-icon.signed-in {
    background: var(--primary-color);
    color: white;
}
.info-profile-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.light-foreground {
    color: var(--primary-color);
}
.app-version {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
    vertical-align: middle;
}

/* Search input with clear button */
.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 150px;
    max-width: 220px;
}
.search-input-wrapper .filter-input {
    width: 100%;
    padding-right: 22px;
}
.search-clear-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1.1em;
    line-height: 1;
    padding: 0 2px;
    display: none;
}
.search-clear-btn:hover {
    color: #333;
}
.search-input-wrapper .filter-input:not(:placeholder-shown) + .search-clear-btn {
    display: block;
}

/* Info/help tooltips */
.label-with-info {
    display: inline-flex;
    position: relative;
    font-size: large;
    font-weight: 600;
}
.info-text,
.help-text {
    display: none;
    position: absolute;
    color: white;
    background-color: black;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 20px;
    z-index: 10000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    font-size: large;
}
.info-text.show,
.help-text.show {
    display: block;
    visibility: visible;
}