/* ═════════════════════════════════════════════════════════════════════════
   Header — VPAtlas two-row pattern.
   Row 1: VCE logo + project pills + spacer + filter trigger + Survey + ☰ + 👤
   Row 2: omnisearch
   Row 3: active-filter description
   Below 420px the VCE logo collapses to icon + "VCE" text.
   ═════════════════════════════════════════════════════════════════════════ */
.explore-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    /* Wrap when the row can't fit on one line so the hamburger and profile
       don't get clipped off-screen at narrow widths. The spacer collapses
       to nothing when wrapped, letting the right group land below the pills. */
    flex-wrap: wrap;
    row-gap: 4px;
}
.explore-row1-spacer { flex: 1 1 auto; min-width: 0; }
/* The active-filter description occupies the space between the omnisearch
   and the filter trigger. Flex-grow makes it fill that gap and pushes the
   right group to the far right (replacing the old spacer div).
   flex-basis 0 (not auto) is load-bearing: with basis auto a long narrative
   is measured at its full single-line width, which overflows the row and
   shoves the Filters/menu/profile buttons off the edge. Basis 0 gives the
   narrative only the leftover space, so long text wraps INSIDE its own box
   and the buttons stay put. min-width keeps that box from collapsing into a
   many-line sliver: when the gap is narrower than ~32 characters the row
   wraps and the narrative gets a wide line of its own instead. text-wrap:
   balance (where supported) evens out the two lines of a wrapped narrative. */
.explore-row1 .filter-description {
    flex: 1 1 0;
    min-width: 32ch;
    margin: 0;
    text-wrap: balance;
}

/* Compact field labels sitting to the LEFT of the project pills ("Choose a
   Project") and the omni search ("Find a Lake"). The narrow max-width forces
   each short phrase to wrap to 2 lines so they stay tight against their
   control. */
.explore-row1 .header-field-label {
    flex-shrink: 0;
    max-width: 62px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.05;
    color: #333;
    text-align: right;
    white-space: normal;
    align-self: center;
}
/* Keep the "Find a Lake" label glued to the omni search: nowrap inside the
   group so the two never split across rows; the group as a whole still wraps
   to its own line when the header runs out of horizontal space. */
.explore-row1 .header-field-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}
.explore-row1-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    /* On wrap, the right group lands on its own line and aligns right. */
    margin-left: auto;
}

/* Header element height parity: all header controls (project pills, Filters,
   Survey, hamburger, profile) are 48px. Project pills are square. */
.explore-row1 .project-radio-group { gap: 4px; align-items: center; }
.explore-row1 .project-radio {
    width: 48px;
    min-width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Filters, Survey, and hamburger → 48px to match (profile icon is already 48px
   in profile.css). Explore-scoped so the shared /css/common.css and the survey
   app are unaffected. */
.explore-row1-right .filters-btn,
.explore-row1-right .header-link-btn,
.explore-row1-right .menu-overflow-btn {
    height: 48px;
}
.explore-row1-right .menu-overflow-btn { width: 48px; }  /* keep hamburger square */
/* Uniform spacing across the top-right cluster (Filters, Survey, ?, Menu,
   Profile): the parent's 6px flex gap is the ONLY spacing. Cancel the legacy
   margin-left that .header-link-btn and .menu-overflow-wrap carry in
   /css/common.css — it doubled the gap before Survey and before the menu.
   Scoped here so the survey app's header (which has no flex gap and relies
   on those margins) is unaffected. */
.explore-row1-right .header-link-btn,
.explore-row1-right .menu-overflow-wrap {
    margin-left: 0;
}
@media (max-width: 419px) {
    .explore-row1 { gap: 4px; padding: 4px 4px; }
    .explore-row1 .project-radio { width: 42px; min-width: 42px; height: 42px; font-size: 14px; }
}
.header-logo-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}
.header-logo-link a { display: inline-flex; align-items: center; text-decoration: none; }
.header-loonweb-logo { height: 64px; width: auto; flex-shrink: 0; }

@media (max-width: 768px) {
    .header-loonweb-logo { height: 52px; }
    .header-link-btn-label { display: none; }   /* Survey button shows just the icon on phones */
    .filters-btn-label    { display: none; }    /* Filters button shows just the icon on phones */
    .explore-row1 .header-field-label { display: none; }  /* hide "Choose a Project" / "Find a Lake" on mobile */
    .explore-row1 { padding: 4px 6px; gap: 6px; }
    /* Omnisearch gets its own full-width row. min-width:0 down the chain lets
       the input shrink below its intrinsic size-attribute width, so it never
       runs off the page. */
    .explore-row1 .header-field-group { flex: 1 1 100%; width: 100%; min-width: 0; }
    .explore-row1 .header-field-group .filter-container { flex: 1 1 auto; width: 100%; min-width: 0; }
    #location-input-container { width: 100%; min-width: 0; }
    #location-input { width: 100%; min-width: 0; }
}
@media (max-width: 419px) {
    .header-loonweb-logo { height: 44px; }
    /* Match the map/content band: panes use 2px side padding below 420px. */
    .explore-row1 { padding: 4px 2px; }
}

/* Project pills (LC/LM/LG/LR) — stay visible at all sizes per the plan. */
.project-radio-group {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
@media (max-width: 419px) {
    .project-radio { padding: 4px 6px; font-size: 12px; }
}

.controls-top {
    height: auto;
}

/*
    tri-pane class is applied to the bootstrap columns within the primary content bootstrap row
    we set tri-pane height relative to screen height
    we set each pane height to 100% and margins to 0
*/
/*
.container-screen {
    height: 100%;
}
*/
.tri-pane {
    height: 80vh;
    display: flex; flex-direction: column; /* used with flex-shrink and flex-grow by children to fill flixibly-fill 100% of container. */
    padding: 5px;
}
.tri-pane-left {
  border: black 1px solid;
  border-radius: 6px;
/*
  border-left: black 1px solid;
  border-top: black 1px solid;
  border-bottom: black 1px solid;
*/
  padding-left: 10px;
  /* Stay a flex column so the table inside can be made to scroll within
     its own bounds rather than push the page taller than the viewport.
     min-height:0 is the magic incantation that lets a flex child shrink
     so overflow-y on the inner #list_table engages. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Left-pane header text is hidden — it duplicates the top-header narrative
   (#filter_description). The element + the JS that fills it (signup_explore.js)
   are kept intact, so restoring is a one-line revert: delete `display:none`. */
#list_table_title { flex: 0 0 auto; display: none; }
#list_table {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.tri-pane-center {
  /*
  border-top: black 1px solid;
  border: black 1px solid;
  */
}
.tri-pane-right {
  border: black 1px solid;
  border-radius: 6px;
/*
  border-right: black 1px solid;
  border-top: black 1px solid;
  border-bottom: black 1px solid;
*/
  padding-right: 10px;
}
/* Draggable pane dividers (inserted by pane_resize.js). The element itself is
   zero-width so it adds nothing to the bootstrap row (the 3×33.33% columns
   already fill it — any real width wraps the right pane to a second line).
   The 24px hit area is a pseudo-element straddling the pane gap; the thick
   center bar turns teal while hovered/dragged. Hidden below 1101px where
   panes show one at a time.
   z-index: above Leaflet's internal panes/controls (≤1000 within the map) but
   BELOW all popups — modals are 1000, filters popover 2000, menus 10000 — so
   dialogs always paint over the grips. */
.pane-resizer {
  display: none;
  flex: 0 0 auto;
  width: 0;
  padding: 0; /* bootstrap's .row > * gutter padding would add 24px per grip and wrap the row */
  position: relative;
  z-index: 900;
  touch-action: none;
  align-self: stretch;
}
.pane-resizer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -12px; width: 24px; /* wide grab area for finger/mouse */
  cursor: col-resize;
}
.pane-resizer::after {
  content: '';
  position: absolute;
  /* Inset from the top/bottom so the bar stays inside the panes' 6px rounded
     corners instead of running past them. */
  top: 10px; bottom: 10px;
  left: -4px; width: 8px;
  border-radius: 4px;
  background: #d8d8d8;
  pointer-events: none;
}
.pane-resizer:hover::after,
.pane-resizer.dragging::after { background: #006054; }
@media (min-width: 1101px) { .pane-resizer { display: block; } }
/* Bottom tab bar for the small-screen single-pane view. Hidden on wide screens
   (all three panes show); revealed by the max-width:767px media query below. */
.pane-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
  z-index: 1000;
}
.pane-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  border-radius: 0; /* kill the browser's default button rounding (visible on the active tab's background) */
  border-right: 1px solid #e0e0e0;
  background: #fff;
  color: #6b7c7a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pane-tab:last-child { border-right: none; }
.pane-tab .fa { font-size: 18px; }
.pane-tab.active {
  color: #006054;
  background: #e6f3f1;
  border-bottom: 3px solid #006054;
}

/* At/under 1100px there isn't enough width to show all three panes
   comfortably, so switch to a single-pane view driven by the fixed bottom tab
   bar (List / Map / Info). The active pane is chosen by data-active-pane on
   #content_row (set in pane_tabs.js). Above 1100px all three panes show. */
@media (max-width: 1100px) {
    /* Full-height flex chain so the single active pane fills the screen. The
       screen gets an explicit height (not min-height) so the panes' flex-grow
       resolves to real pixels — under the old `height:100%` on a min-height
       chain the percentage didn't resolve and each pane collapsed to its
       border, showing blank. */
    .container-screen {
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
    }
    header { flex: 0 0 auto; }
    .content-row {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;          /* let the map pane shrink to fit */
      margin: 0;
      padding-bottom: 56px;   /* clear the fixed tab bar */
    }
    /* Hide every pane; the active one is revealed below. !important overrides
       the inline `.tri-pane-right { display:flex !important }` in
       signup_explore.html (needed for the wide-screen chart layout). */
    .content-row .tri-pane { display: none !important; }
    .content-row[data-active-pane="left"]   .tri-pane-left,
    .content-row[data-active-pane="center"] .tri-pane-center,
    .content-row[data-active-pane="right"]  .tri-pane-right {
      display: flex !important;
      flex: 1 1 auto;     /* grow to fill the content-row height */
      min-height: 0;
      height: auto;       /* override the wide-screen 80vh so flex sizing wins */
      width: 100%;
      max-width: 100%;
    }
    /* Map pane: Leaflet needs a pixel height. The flex chain above should
       give us one, but pane_tabs.js races map init on first paint — guarantee
       a non-zero height so .map-signup's height:100% resolves to something. */
    .content-row[data-active-pane="center"] .tri-pane-center { min-height: 50vh; }
    .pane-tabs { display: flex; }
}

/* Below 420px: full-bleed content. Strip pane borders and tighten padding so
   the table, map, and right-pane each get the full viewport width. */
@media (max-width: 419px) {
    .tri-pane            { padding: 2px; }
    .tri-pane-left,
    .tri-pane-center,
    .tri-pane-right      { border: none !important; padding: 2px; }
    .container-fluid     { padding-left: 0; padding-right: 0; }
    .content-row         { margin: 0; }
    .map-signup          { border: none; }
    /* Smaller Survey/hamburger to match the shrunken project pills. */
    .menu-overflow-btn,
    .header-link-btn     { height: 36px; padding: 0 8px; font-size: 14px; }
    .menu-overflow-btn   { width: 36px; }
    /* Right tabs: tighten the bar to suit the cramped width. */
    .right-tab           { padding: 6px 4px; font-size: 13px; }
}

.controls-bot {
    height: auto;
}
.map-signup {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 6px; /* match the tri-pane corner radius; overflow:hidden clips the tiles */
}

hr {
    margin: 0px;
}

.header-title-info {
    display: inline-block;
    align-content: center;
}

.header-title-logo {
    display: inline-block;
    align-content: top;
}

.vce-loonweb-logo {
    width: 240px;
    height: 60px;
}

.search-input {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
    background-color: light grey;
  }
  
/*
.tri-pane-details-button {
    color: white;
    background-color: green;
    width: 90%;
}
*/

.adopt-button {
    background-color: white;
    color: #006054;
    border: #006054 1px solid;
}
.unadopt-button {
    color: white;
    background-color: #c44100;
}
#signup_explore_filters {
    width: 100%;
}

/* profile icon row/col */
.icon-right {
    margin-left: auto; /* Push the icon to the right */
}

/* If the icon is inside a button or other element that has default padding/margin */
.icon-right button { /* Or .icon-right a, etc. */
    padding-right: 0; /* Remove default padding from the right */
}

.show-info {
    cursor: pointer;
}
/*
.info-profile-container {
  display: contents;
  align-items: normal;
  padding-top: 1px;
}
*/
.info-profile-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;            /* even spacing between Survey / hamburger / profile */
  padding-top: 5px;    /* drop the cluster to top=5, matching the other header buttons */
}

.info-icon-container {
  display: block;
  cursor: pointer;
}

.main-header-icon {
  height: 58px !important;
  width: 58px !important;
  padding-bottom: 0px !important;
}

/* Match the top-right header controls (Survey link, hamburger, profile icon)
   to the OTHER header buttons (LC/LM, Adoption Status, Filters), which render
   48px tall. Scoped with .info-profile-container descendant selectors so they
   (a) only affect explore and (b) out-specify the shared /css/common.css, which
   loads after this file and otherwise sets .header-link-btn / .menu-overflow-btn
   to 40px with a 6px left margin. The margin is zeroed here so the container's
   gap is the single source of spacing. (profile svg is sized in profile.css.) */
.info-profile-container #survey_link_btn,
.info-profile-container #app_menu_btn {
  height: 48px;
  margin-left: 0;
}
.info-profile-container #app_menu_btn {
  width: 48px;   /* keep the icon-only hamburger square */
}
.info-profile-container .menu-overflow-wrap {
  margin-left: 0;
}

/* Keep lg-like layout until 1300px to prevent logo/button collision */
@media (min-width: 1200px) and (max-width: 1299px) {
  .header-title-logo      { flex: 0 0 25%;     max-width: 25%;     }  /* col-lg-3 */
  .project-radio-group    { flex: 0 0 16.667%; max-width: 16.667%; }  /* col-lg-2 */
  .filter-container       { flex: 0 0 41.667%; max-width: 41.667%; }  /* col-lg-5 */
  .info-profile-container { flex: 0 0 16.667%; max-width: 16.667%; }  /* col-lg-2 */
}
/* ═════════════════════════════════════════════════════════════════════════
   Right-pane top tabs: Summary | List | Chart.
   Simple styling per the plan — flat row, underline-on-active.
   ═════════════════════════════════════════════════════════════════════════ */
.right-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  flex: 0 0 auto;
  margin-bottom: 4px;
}
.right-tab {
  flex: 1 1 0;
  padding: 8px 6px;
  border: none;
  border-radius: 0; /* kill the browser's default button rounding (visible on the active tab's background) */
  background: none;
  color: #006054;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.right-tab:hover { background: #f1f3f4; }
.right-tab.active {
  background: #e6f3f1;
  border-bottom-color: #006054;
}
.right-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.right-tab-panel[hidden] { display: none !important; }

/* Summary panel stacks the overview on top and the LoonCount/Monitor chart at
   the bottom (the former standalone "History"/chart tab is folded in here).
   Column layout so the chart fills the space beneath the summary and has a
   definite height to render into. */
#rtab_summary {
  display: flex;
  flex-direction: column;
  /* The panel itself never scrolls — the flex layout fits the content and the
     chart owns the only scrollbar. (overflow-y:auto on .right-tab-panel would
     also force overflow-x to auto, adding a panel scrollbar that overpaints the
     chart's.) */
  overflow: hidden;
}
#rtab_summary > #summary_title,
#rtab_summary > #item_summary { flex: 0 0 auto; }
#rtab_summary > #looncount_chart {
  flex: 1 1 auto;
  min-height: 180px;
  height: auto;
  margin-top: 8px !important;   /* override summary.css margin-top:auto */
  /* No scrollbar on the chart container itself; the inner .chart-scroll shows
     the single horizontal scrollbar when the chart is wider than the pane. */
  overflow: hidden;
}
.scope-list-title {
  font-size: 12px;
  text-transform: uppercase;
  color: #8492a6;
  letter-spacing: 0.06em;
  padding: 6px 4px 4px;
}
.scope-list-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f3f4;
  font-size: 13px;
  cursor: pointer;
}
.scope-list-row:hover { background: #f9fafb; }
.scope-list-row .scope-list-meta { color: #8492a6; }