/* =========================================================
   aa-devmap-styles.css (CLEAN)
   Page scope: maptest only
   - Bootstrap + MapLibre + responsive Offcanvas sidebar
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ---------- Root + defaults ---------- */
:root{
  --sidebar-w-desktop: 340px;
  --sidebar-w-mobile: 85vw;
  --sidebar-max-mobile: 520px;

  --tab-size: 44px;
  --tab-radius: 12px;

  --bg: #0b0f14;
  --panel: rgba(255,255,255,.96);
  --panel-border: rgba(0,0,0,.08);
  --shadow: 0 10px 24px rgba(0,0,0,.18);

  --text: #111827;
  --muted: rgba(17,24,39,.70);

  /* JS sets this when drawer opens, used to "attach" tab */
  --sidebar-open-x: var(--sidebar-w-mobile);
  
  /*LVGEA COLORS
   * Green  #6ABF48  RGB(106, 191, 72)
   * Blue   #004876  RGB(0, 72, 118)
   * Gray   #646569  RGB(100, 101, 105)
   * Red    #CC003D  RGB(204, 0, 61)
   * LtYel  #F0E67C  RGB(240, 230, 124)
   * Yellow #F4B233  RGB(244, 178, 51)
   * OffWht #F5F5F5  RGB(245, 245, 245)
   * */
  /*--brandColor: #004876;
   *ALT supplied by amanda:*/
  --brandColor: #1c40b5;
  --brandAccent: #f4b233;
  --fontTitle: "Outfit", sans-serif;
  --fontBody: "Roboto", sans-serif;
}

* { box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden; /* map apps feel better with fixed viewport */
}




h1, h2, h3, h4, h5, h6 {
  font-family: var(--fontTitle);
  font-weight: 700;
  text-wrap: balance;
  color: #fff;
}
  
h1 {    
    font-size: 2.0rem;
    line-height: 1.9rem;  
    }

  .sidebar-tree h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
  }

    /* Sidebar brand (stacked logo above title) */
    .sidebar-brand--stack{
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* change to center if you want centered branding */
      gap: .5rem;
    }

    /* PNG logo sizing */
    .brand-logo{
      width: auto;
      height: 100px;          /* desktop default */
      max-width: 100%;
      object-fit: contain;
      image-rendering: auto;
    }

    /* Mobile: slightly smaller logo */
    @media (max-width: 767.98px){
      .brand-logo{
        height: 90px;
      }
    }
p {text-wrap: balance;}

/****/
/*sidebar text*/
.status-toggle {
  color: #fff;
}

.project-list {
  list-style-type: none;
  color: #fff;
  padding: 0;
    padding-left: 3.2rem;  
  margin-top: 4px;
}

  /* Limit expanded project lists and allow vertical scrolling */
  .collapse .project-list.map-project-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;          /* keeps text clear of scrollbar */
    overscroll-behavior: contain; /* prevents whole page “bounce” */
  }

  .collapse.show .project-list.map-project-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
    overscroll-behavior: contain;
  }


.project-link {
  color: #acacac;
  padding: .5rem .5rem;
}

label > button.status-toggle {
  color: #fff;
  font-weight: 500;
}

.status-row{
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  padding-left: 40px;   /* your requested inset */
  /*padding-right: 6px;*/
}

.status-row .label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.status-row .count {
  color: #ccc;
  justify-self: end;
  white-space: nowrap;
  font-style: italic;
  font-size: .8rem;
}

/* Parentheses around status-row counts only */
.status-row .count::before {
  content: "(";
}

.status-row .count::after {
  content: ")";
}


.btn-outline-primary {
  color: #fff;
  border-color: #fff;
}

/* Legend dot */
.legend-dot {
  --dot: 32px;                 /* change this */
  width: var(--dot);
  height: var(--dot);
  
  border: 1px solid #fff;

  /* force it to stay square even in flex layouts */
  flex: 0 0 var(--dot);
  min-width: var(--dot);

  display: inline-flex;        /* so icons can center */
  align-items: center;
  justify-content: center;

  border-radius: 999px;        /* circle when square */
  background: var(--dot-color, #999);
  line-height: 1;
  margin-top: -5px;
}

.legend-dot > img {
   --icon: 60%;                 /* change this */
  width: var(--icon);
  height: var(--icon);
}



  /* Category visibility toggle on legend dot */
  .legend-dot.cat-toggle{
    cursor: pointer;
  }

  /* Dim category row when hidden */
  .cat.is-hidden h2,
  .cat.is-hidden .count{
    opacity: .45;
  }

  .cat.is-hidden .legend-dot{
    opacity: .35;
    filter: grayscale(1);
  }




/* If you're using Bootstrap .d-flex for legend rows */
.legend-row, .legend-item, .legend-line {
  align-items: center;
  gap: 8px;
}

.cat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;     /* key */
  margin-top: 6px;
    
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}


.cat-title .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-title .count {
  flex: 0 0 auto;
  white-space: nowrap;   /* key */
  color: #fff;
}



/* ---------- App shell layout ---------- */
/* Mobile-first: map full width. Desktop: sidebar + map */
.app.map-app{
  display: grid;
  grid-template-columns: 1fr;
  width: 100vw;
  height: 100vh; /* fallback */
}

@supports (height: 100dvh){
  .app.map-app{ height: 100dvh; }
}

@media (min-width: 768px){
  .app.map-app{
    grid-template-columns: var(--sidebar-w-desktop) 1fr;
  }
}

/* Critical for CSS Grid children so the map can expand */
.app.map-app > * { min-width: 0; min-height: 0; }

/* ---------- Map area ---------- */
main.map-wrap,
#mapWrap{
  position: relative;
  width: 100%;
  height: 100%;
  background: #0b0f14;
}

#map{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Loading overlay */
#mapLoading{
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  z-index: 20;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.9);
  box-shadow: var(--shadow);
  font-size: .9rem;
}


.map-jump-controls {
  position: absolute;
  top: 120px;   /* sits below zoom/reset */
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

.map-jump-controls .btn {
  white-space: nowrap;
  padding: .15rem .85rem;
}


/* ---------- Sidebar (desktop + mobile offcanvas) ---------- */
/* Outer sidebar panel */
.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;           /* important for nested scrolling */
}

/* prevents flex children from overflowing their container */
.sidebar * { min-width: 0; }

/*mobile h1*/
#sidebarCanvasLabel {
  color: #fff;
  font-size: 1.75rem;
}

.cat-title,
.status-row {
   width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

    .status-row input[type="checkbox"]{
      margin: 0;
      align-self: center;
      transform: translateY(1px);
      margin-right: 5px;
    }

   
    .form-check-input:checked {
      background-color: #acacac;
      border-color: #acacac;
    }

    .status-row .form-check-input {
      vertical-align: middle;
    }

    .status-row button {
      padding: 2px 0;
    }


.cat-title .label,
.status-row .label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-title .count,
.status-row .count {
  flex: 0 0 auto;
  white-space: nowrap;
}

.status-row.d-flex { flex-wrap: nowrap !important; }

.status-row > .d-flex {
  flex-wrap: nowrap;
  min-width: 0;
}
.status-row > .d-flex > :first-child {
  min-width: 0;              /* label container */
  overflow: hidden;
}
.status-row > .d-flex > :last-child {
  white-space: nowrap;       /* count */
}

.status-row:hover,
.project-item:hover {
  background: rgba(80,80,80,.5);
}

/* The element that has the background color */
.sidebar-bg {
    padding: 12px 14px;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;           /* important */
  overflow: hidden;        /* keeps background wrapper tidy */
}


/* The scrollable content area */
.sidebar-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  box-sizing: border-box;
}

/* Prevent flex children from “bleeding” wider than container */
.sidebar * {
  min-width: 0;
}

.sidebar .row {
  margin-left: 0;
  margin-right: 0;
}


/*
  On desktop (md+), offcanvas-md makes the aside act like a normal sidebar.
  On mobile, it becomes an overlay drawer.
*/
.sidebar.map-sidebar{
  background: var(--panel);
  border-right: 1px solid var(--panel-border);
}

/* Desktop: sidebar is a normal column and should always fill height */
@media (min-width: 768px){
  .sidebar.map-sidebar{
    position: relative;
    height: 100%;
    overflow: hidden;
  }
}

/* Mobile drawer sizing */
@media (max-width: 767.98px){
  #sidebarCanvas.offcanvas-start{
    width: var(--sidebar-w-mobile);
    max-width: var(--sidebar-max-mobile);
  }
}

/* Let offcanvas body scroll, keep header stable */
.sidebar.map-sidebar.offcanvas{
  overflow: hidden;
}
.sidebar.map-sidebar .offcanvas-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make buttons feel touch-friendly in the sidebar */
.sidebar.map-sidebar .btn,
.sidebar.map-sidebar .form-control{
  min-height: 44px;
}

#controlPanel .btn:hover {
  background-color: var(--brandColor);
  border-color: var(--brandColor);
}

/* Search field polish inside controlPanel */
#controlPanel .input-group-text{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.25);
}

#controlPanel #projectSearch{
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

#controlPanel #projectSearch::placeholder{
  color: rgba(255,255,255,.6);
}

#controlPanel #projectSearchClear{
  border-color: rgba(255,255,255,.25);
}

/* Suggestions dropdown */
#controlPanel #searchSuggest{
  position: absolute;
  left: 0;
  right: 0;
  top: 2.75rem; /* sits just under the input group */
  z-index: 1000;
  max-height: 260px;
  overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-radius: 10px;
}

#controlPanel #searchSuggest .list-group-item{
  background: rgba(20,20,22,.98);
  color: #fff;
  border-color: rgba(255,255,255,.08);
}

#controlPanel #searchSuggest .list-group-item:hover{
  background: rgba(55,55,55,.98);
}

/* Flash the selected project in the sidebar */
.project-link.search-flash{
  animation: devmapSearchFlash 1400ms ease-out 1;
}

@keyframes devmapSearchFlash{
  0% { outline: 2px solid rgba(255,255,255,.35); }
  100% { outline: 2px solid rgba(255,255,255,0); }
}



/* ---------- Offcanvas backdrop: invisible but clickable ---------- */
/* You wanted tap-away closing while still seeing the map */
.offcanvas-backdrop.show{ opacity: 0; }

/* ---------- Sidebar tab toggle (mobile only) ---------- */
.sidebar-tab{
  position: fixed;
  top: .75rem;
  left: 0;
  z-index: 1051; /* above map controls */
  width: var(--tab-size);
  height: var(--tab-size);
  border: 1px solid var(--panel-border);
  border-left: 0;
  /*border-radius: 0 var(--tab-radius) var(--tab-radius) 0;*/
  border-radius: 0 12px 12px 0; /* right side rounded */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-tab i{ font-size: 1.1rem; color: rgba(17,24,39,.92); }

.sidebar-tab:active{ transform: translateY(1px); }

/* "Attach" the tab to the drawer edge when open (JS sets --sidebar-open-x) */
@media (max-width: 767.98px){
  body.sidebar-open .sidebar-tab{
    left: calc(var(--sidebar-open-x) - 1px);
    border-left: 1px solid var(--panel-border);
    border-right: 0;
    /*border-radius: var(--tab-radius) 0 0 var(--tab-radius);*/
    border-radius: 0 12px 12px 0; /* right side rounded */
  }
}


/* ---------- Sidebar content primitives ---------- */
.sidebar .panel{
  padding: .5rem;
  border-radius: 12px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
}

.sidebar-content .stats-block {
  background-color: var(--brandColor);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.5);
  color: #fff;
}

.stat-value {
  font-family: var(--fontTitle);
  font-size: 3.5rem;
}
@media (max-width: 767.98px){
  .stat-value {font-size: 2.8rem;}
}

.stats-block p.detail-stat-label {
  font-size: 18px;
  line-height: 21px;
  font-family: var(--fontTitle);
  font-weight: 400;
  font-style: normal;
}

  .stats-block p.small {
    color: #acacac;
    font-style: italic;
    font-size: 14px;
    }

  .transition-transform {
    transition: transform 150ms ease;
  }

  #sidebarStats + button:hover,
  button[data-bs-target="#sidebarStats"]:hover {
    opacity: 0.75;
  }

#sidebarStats .detail-stat-label {color: #fff;}
#sidebarStats .small {color: #fff; font-weight: 400;}

.stats-block button {color: #ccc;}
.stats-block button:hover {color: #888;}
/*.sidebar h1, .sidebar h2, .sidebar h3{
  color: var(--brandColor);
  letter-spacing: .2px;
}


.sidebar p{
  color: var(--muted);
}*/

/* Tree container: give it breathing room */
#sidebarTree{
  margin-top: .75rem;
}

/* If your tree renders lots of content, this helps keep it usable */
@media (max-width: 767.98px){
  #sidebarTree{
    max-height: calc(100dvh - 170px);
    overflow: auto;
  }
}

/* Brief highlight for selected project */
.project-link.is-selected{
  background: rgba(59,130,246,.14);
  border-radius: 10px;
  outline: 2px solid rgba(59,130,246,.22);
}

.project-link{
  width: 100%;
  text-align: left;
  padding: .5rem .5rem;
  border: 0;
  background: transparent;
}
.project-link:hover{
  background: rgba(0,0,0,.04);
  border-radius: 10px;
}


/* ---------- MapLibre UI tweaks ---------- */
/* Keep controls comfortably reachable */
.maplibregl-ctrl-top-right{ top: .75rem; right: .75rem; }
.maplibregl-ctrl-top-left{ top: .75rem; left: .75rem; }

/* Popups: readable on mobile */
.maplibregl-popup-content{
  max-width: 320px;
  max-height: 45vh;
  overflow: auto;
  border-radius: 12px;
}

/* ---------- Small-screen polish ---------- */
@media (max-width: 360px){
  .sidebar-tab{ top: .5rem; }
}

/* ---------- Desktop polish ---------- */
@media (min-width: 768px){
  /* Hide tab on desktop even if markup forgets d-md-none */
  .sidebar-tab{ display: none !important; }

  /* Desktop: map-loading badge more subtle */
  #mapLoading{ top: .75rem; }
  
  /* ============================================
   Desktop override for offcanvas-md sidebar
   Ensures content is visible at md+ (static mode)
   ============================================ */

  /* Make the aside behave like a normal column */
  #sidebarCanvas.offcanvas,
  #sidebarCanvas.offcanvas-md{
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
    height: 100%;
    max-width: none;
  }

  /* Bootstrap uses offcanvas-body; ensure it's not hidden/clipped */
  #sidebarCanvas .offcanvas-body{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 100%;
    overflow: auto;
  }

  /* The header is mobile-only anyway; keep it hidden on desktop */
  #sidebarCanvas .offcanvas-header{
    display: none !important;
  }
  
  /* Fully neutralize the mobile tab (no shadows, no borders, no hitbox) */
  .sidebar-tab{
    display: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: none !important;
    pointer-events: none !important;
  }

  .sidebar-tab::after{
    display: none !important;
  }

  /* Ensure only ONE clean edge for the sidebar */
  #sidebarCanvas{
    border-right: 1px solid rgba(0,0,0,.08);
    box-shadow: none !important;
  }

  /* Remove any offcanvas-specific borders/shadows Bootstrap may add */
  #sidebarCanvas.offcanvas,
  #sidebarCanvas.offcanvas-md{
    box-shadow: none !important;
    outline: none !important;
  }

}

/* ==========================
   Detail panel (covers sidebar)
   ========================== */

.detail-panel{
  position: absolute;
  inset: 0;
  display: none;              /* hidden by default */
  background: rgba(50,50,50,.96);
  color: #fff;
  z-index: 5;

  /* NEW: allow a scrollable body area under a fixed header */
  flex-direction: column;
  min-height: 0;
  overflow: hidden;           /* keeps scrolling contained to the body */
}

.detail-panel.is-open{
  display: flex;              /* NEW: flex so header/body layout works */
}

/* Body becomes the scroll container */
.detail-body{
  padding: 12px 14px;

  /* NEW: take remaining height and scroll */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.detail-open .sidebar-content{
  visibility: hidden;        /* keep layout stable but hide content */
}

.detail-name { margin: 10px 0 4px; }

/* Header bar */
.detail-bar{
  position: sticky;
  top: 0;
  z-index: 2;
  color: #fff;
  padding: .75rem .75rem .6rem;
  background: #2b8cbe;       /* overwritten per-category by JS */
}

.detail-bar-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
}

.detail-nav{
  display: flex;
  gap: .4rem;
}

.detail-title-wrap{
  min-width: 0;
}

.detail-title-row{
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.detail-cat-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.detail-title{
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
}

.detail-count{
  font-size: .85rem;
  opacity: .9;
  margin-top: .15rem;
}

.detail-close{
  border: 0;
}

/* Body */
.detail-body{
  padding: 12px 14px;
}

/* Carousel */
.detail-carousel{
  margin-bottom: 1rem;
}

/* LVGEA logo-only mode (single image, centered, constrained, no thumbs) */
.detail-carousel.is-logo .detail-main{
  aspect-ratio: auto;
  padding: 14px;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-carousel.is-logo .detail-main-image{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 160px; /* adjust if you want larger */
  object-fit: contain;
  display: block;
}

.detail-carousel.is-logo .detail-thumbs{
  display: none !important;
}

/* Optional: tighten spacing when it’s just a logo */
.detail-carousel.is-logo{
  margin-bottom: .75rem;
}

.detail-main{
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  aspect-ratio: 16 / 9;
}

.detail-main-image{
  width: 100%;
  height: 100%;
  display: block;
  /*object-fit: cover;*/
  object-fit: contain;
  /*background: #fff;
  border: solid 1px #fff;*/
}

.detail-thumbs{
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
}

.detail-thumb{
  width: 64px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid transparent;
  background: rgba(0,0,0,.06);
  cursor: pointer;
}

.detail-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-thumb.active{
  border-color: rgba(255,255,255,.9);
  outline: 2px solid rgba(0,0,0,.25);
}

.sidebar p.detail-no-photos {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: #ccc; /* subtle slate */
}

/* Desktop/tablet: show full carousel */
@media (min-width: 768px){
  .detail-main { display: block; }
}

@media (max-width: 767px){
/****/
/*mobile detail panel thumbnails*/
/* thumbs strip is the only thing shown in the panel now */
    .detail-main { display: none; }         /* kills the tall hero image */


.detail-thumbs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.detail-thumb{
  flex: 0 0 auto;
  width: 88px;
  height: 66px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.detail-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*end mobile detail panel thumnails*/
/****/
}


/* Name/address */
.detail-h2{
  font-size: 2rem;
  margin: .75rem 0 .25rem;
}

.detail-address{
  color: #ccc;
  margin-bottom: 10px;
}

/* Stats */
.detail-stats{
  display: grid;
  /*grid-template-columns: 1fr 1fr;
  gap: 8px 12px;*/
  margin: 10px 0;
}

.detail-stat{
  padding: 8px 0px;
  /*border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);*/
}

.detail-stat-value {
  font-family: var(--fontTitle);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 300;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.detail-stat-label{
  font-size: 12px;
  line-height: 1.1;
  font-style: italic;
  margin-top: .25rem;
  color: #ccc;
  text-wrap: balance;
}

/* Description */
.detail-desc{
  margin: 0;
  margin-top: 10px;
  color: #fff;
  line-height: 1.35;
  font-size: 1.2rem;

  /* CHANGED: no inner scrolling; let the panel body scroll */
  max-height: none;
  overflow: visible;

  border: 1px solid #666;
  padding: 15px;
  border-radius: 8px;
}


/* Mobile tweaks */
@media (max-width: 575.98px){
  .detail-stats{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .detail-main{
    max-height: 180px;
    overflow: hidden;
  }
  .detail-main-image{
    width: 100%;
    height: 180px;
    object-fit: cover;
  }

  .detail-thumbs{
    max-height: 56px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
}

/* Desktop: only the sidebar content scrolls */
@media (min-width: 768px){
  #sidebarCanvas{
    --bs-offcanvas-width: var(--sidebar-w-desktop);
    width: var(--sidebar-w-desktop);
    max-width: var(--sidebar-w-desktop);
    box-sizing: border-box;
  }

  .sidebar-content{
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }

  /* Offcanvas body itself should NOT scroll on desktop */
  #sidebarCanvas .offcanvas-body{
    overflow: hidden;
  }
}

/* Mobile: allow normal offcanvas scrolling */
@media (max-width: 767.98px){
  #sidebarCanvas .offcanvas-body{
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar-content{
    overflow: visible;
  }
}


/* Prevent sidebar shell from ever showing scrollbars */
#sidebarCanvas{
  overflow: hidden;
}

/* Optional: hide scrollbar visuals but keep scrolling */
.sidebar-content{
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: transparent transparent;
}

.sidebar-content::-webkit-scrollbar{
  width: 8px;
}
.sidebar-content::-webkit-scrollbar-thumb{
  background: transparent;
}




/* =========================================================
   Mobile stacked layout (map + details + tree in page flow)
   ========================================================= */

@media (max-width: 767px){

  body{
    overflow: auto;              /* allow natural page scrolling */
  }

  /* Stack map then sidebar content */
  .app.map-app{
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  @supports (height: 100dvh){
    .app.map-app{ min-height: 100dvh; }
  }

  /* Map behaves like a hero section */
  #mapWrap{
    height: 80vh;
    flex: 0 0 auto;
  }

  body.has-selection #mapWrap{
    height: 45vh;                /* shrink map when a project is selected */
  }

  /* Sidebar stops being an offcanvas on mobile */
  #sidebarCanvas{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
  }

  #sidebarCanvas.offcanvas,
  #sidebarCanvas.offcanvas-start,
  #sidebarCanvas.offcanvas-md{
    visibility: visible !important;
  }

  /* Hide the slide-out tab on mobile (we’re not sliding anymore) */
  #sidebarTab{
    display: none !important;
  }

  /* Detail panel becomes a normal section (not a cover) */
  .detail-panel{
    position: static;
    inset: auto;
    display: none;
    z-index: auto;
  }

  body.detail-open .detail-panel{
    display: block;
  }

  /* Don’t hide the tree/content when detail is open on mobile */
  body.detail-open .sidebar-content{
    visibility: visible;
  }

  /* Make sure detail content scrolls with the page */
  .detail-body{
    overflow: visible;
    max-height: none;
  }

  /* Tree toggle styling + chevron rotation */
  .tree-toggle{
  .tree-toggle{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
    margin-bottom: .5rem;
  }

  .tree-toggle i{
    transition: transform .2s ease;
  }

  .tree-toggle[aria-expanded="true"] i{
    transform: rotate(180deg);
  }

  .tree-toggle .bi { transition: transform 150ms ease; }
  .tree-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
  
  /* Give the lower content a readable panel feel */
  .sidebar-content{
    background: rgba(11,15,20,.88);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-bottom: 1.25rem;
  }
}

/****/
/*map*/
/* marker element */
.map-marker {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  transform: translate(-50%, -50%) scale(var(--m-scale, 1));
  transform-origin: center;
  transition: transform 120ms ease, box-shadow 120ms ease, border-width 120ms ease;
  will-change: transform;
}

.map-marker.is-active {
  border-width: 4px;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.25),
    0 6px 16px rgba(0,0,0,.28);
  transform: translate(-50%, -50%) scale(calc(var(--m-scale, 1) * 1.25));
  z-index: 5; /* helps it sit above neighbors */
}