/* =========================================================================
   Meridian Estates — Dashboard Styles
   Palette:
     --navy       #1E293B  (primary dark / headers)
     --navy-soft  #27374D  (secondary panels)
     --slate      #64748B  (muted text)
     --slate-light#94A3B8  (captions)
     --off-white  #F8FAFC  (backgrounds)
     --line       #E2E8F0  (hairlines / borders)
     --emerald    #10B981  (Available)
     --coral      #F4735B  (Sold)
   ========================================================================= */

:root {
  --navy: #1E293B;
  --navy-soft: #27374D;
  --slate: #64748B;
  --slate-light: #94A3B8;
  --off-white: #F8FAFC;
  --line: #E2E8F0;
  --emerald: #10B981;
  --emerald-soft: rgba(16, 185, 129, 0.12);
  --coral: #F4735B;
  --coral-soft: rgba(244, 115, 91, 0.12);
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--navy);
  background: var(--off-white);
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  margin: 0;
}

/* ============================== LAYOUT ================================= */

.dashboard {
  display: flex;
  height: 100vh;
  width: 100vw;
}

#sidebar {
  width: 400px;
  min-width: 400px;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#map-wrapper {
  flex: 1;
  height: 100vh;
  position: relative;
}

#map {
  height: 100%;
  width: 100%;
  background: var(--off-white);
}

/* ============================ SIDEBAR HEADER ============================ */

.sidebar-header {
  padding: 24px 24px 16px 24px;
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--emerald), #0d9467);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.brand-text h1 {
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2px;
}

.brand-text p {
  margin: 2px 0 0 0;
  font-size: 12.5px;
  color: #A9B4C4;
  letter-spacing: 0.3px;
}

/* ============================== FILTER BAR =============================== */

.filter-bar {
  display: flex;
  gap: 8px;
  padding: 16px 24px 12px 24px;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.filter-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--off-white);
  color: var(--slate);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.filter-btn:hover {
  border-color: var(--slate-light);
  color: var(--navy);
}

.filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.listings-meta {
  padding: 12px 24px 6px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--slate-light);
  flex-shrink: 0;
}

/* ============================ LISTINGS CONTAINER ========================= */

#listings-container {
  flex: 1;
  min-height: 0;   /* allow this flex child to scroll instead of overflowing its parent */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#listings-container::-webkit-scrollbar { width: 6px; }
#listings-container::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 10px;
}

/* ============================== LISTING CARD ============================= */

.property-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  flex-shrink: 0;   /* stop flexbox from compressing cards (and their images) to fit available space */
}

.property-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--slate-light);
}

.property-card.card-active {
  border-color: var(--emerald);
  box-shadow: 0 0 0 2px var(--emerald-soft), var(--shadow-md);
}

.card-image {
  width: 100%;
  height: 130px;
  min-height: 130px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  background: var(--off-white);
}

.card-body {
  padding: 14px 16px 16px 16px;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.card-title {
  font-family: 'Fraunces', serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.status-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-badge.Available {
  background: var(--emerald-soft);
  color: #0a7a55;
}

.status-badge.Sold {
  background: var(--coral-soft);
  color: #c2482f;
}

.card-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 4px 0 6px 0;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--slate);
}

.card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--slate-light);
}

.type-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate);
}

/* Property description — kept visually separate from the price/type/size
   meta row with its own hairline divider. Clamped to 3 lines so a long
   description can't blow out the fixed-width popup or the card layout;
   the full text is stored either way, this is just the preview. */
.card-description {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popup-card .card-description {
  -webkit-line-clamp: 2;
}

/* ============================= LEAFLET OVERRIDES ========================== */
.leaflet-popup-content-wrapper{border-radius:14px;padding:0;overflow:hidden;box-shadow:var(--shadow-md)}
.leaflet-popup-content{margin:0;width:min(380px,calc(100vw - 64px)) !important;font-family:'Inter',sans-serif}
.leaflet-popup-tip{background:#fff}
.leaflet-container a.leaflet-popup-close-button{top:6px;right:6px;width:22px;height:22px;padding:0;font:18px/22px Arial,sans-serif;text-align:center;color:var(--slate);background:rgba(255,255,255,.92);border-radius:50%}

/* two-column popup */
.popup-card{display:grid;grid-template-columns:138px 1fr;background:#fff;border-top:3px solid var(--cat,#10B981)}
.pc-media{display:flex;flex-direction:column;min-width:0;background:#0F172A}
.popup-card .pc-media .gallery-main{flex:1 1 0;width:100%;height:auto;min-height:120px;object-fit:cover;display:block}
.pc-media .gallery-strip{display:flex;gap:4px;padding:5px;overflow-x:auto;background:#0F172A;scrollbar-width:none}
.pc-media .gallery-strip::-webkit-scrollbar{display:none}
.pc-media .gallery-thumb{flex:0 0 28px;width:28px;height:28px;object-fit:cover;border-radius:5px;opacity:.6;border:2px solid transparent;cursor:pointer}
.pc-media .gallery-thumb.active{opacity:1;border-color:var(--cat,#10B981)}
.popup-card .pc-info{padding:10px 12px 8px;min-width:0}
.popup-card .popup-head{display:flex;justify-content:space-between;align-items:center;gap:6px;padding-right:22px;margin:0}
.popup-card .badge{font-size:9.5px;padding:3px 8px}
.popup-card .card-title{font-size:14px;line-height:1.2;margin:3px 0 6px}
.popup-card .info-rows{gap:3px;margin:0;font-size:11.5px}
.popup-card .info-rows i{width:14px}
.pc-tiles{display:flex;gap:6px;margin-top:8px}
.pc-tile{flex:1;min-width:0;padding:5px 7px;background:var(--off-white);border:1px solid var(--line);border-radius:8px}
.pc-tile span{display:block;font-size:9.5px;letter-spacing:.3px;text-transform:uppercase;color:var(--slate-light)}
.pc-tile b{font:600 12px 'Inter',sans-serif;color:var(--navy);white-space:nowrap}
.pc-foot{grid-column:1 / -1;padding:7px 12px 9px;border-top:1px solid var(--line)}
.pc-foot p{margin:0 0 3px;font-size:11.5px;line-height:1.4;color:var(--slate);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot small{font-size:10px;color:var(--slate-light)}

/* narrow phones: photo becomes a slim banner on top */
/* popup: responsive (compact on phones, expandable) */
.pc-more{display:none}
@media (max-width:600px){
  .leaflet-popup-content{width:min(300px,calc(100vw - 56px)) !important}
  .popup-card{grid-template-columns:82px 1fr}
  .popup-card .pc-media .gallery-main{min-height:0;height:100%}
  .popup-card .pc-info{padding:8px 10px 6px}
  .popup-card .card-title{font-size:13px;margin:2px 0 4px}
  .popup-card .info-rows{font-size:11px;gap:2px}
  .popup-card .badge{font-size:9px;padding:2px 7px}
  .pc-tiles{margin-top:6px;gap:5px}
  .pc-tile{padding:4px 6px}.pc-tile b{font-size:11px}
  .pc-foot{padding:6px 10px 8px}
  .popup-card:not(.expanded) .pc-extra,
  .popup-card:not(.expanded) .pc-media .gallery-strip,
  .popup-card:not(.expanded) .pc-foot{display:none}
  .pc-more{display:block;width:100%;margin-top:6px;padding:5px;border:none;border-radius:7px;background:var(--off-white);color:var(--navy);font:600 11px 'Inter',sans-serif;cursor:pointer}
  .leaflet-container a.leaflet-popup-close-button{top:4px;right:4px}
}
@media (max-width:360px){
  .popup-card{grid-template-columns:68px 1fr}
}
/* ================================ TYPE FILTER CHIPS ======================== */

.filter-bar-secondary {
  padding-top: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.filter-chip {
  flex: 1;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: #fff;
  color: var(--slate);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.filter-chip:hover { border-color: var(--slate-light); color: var(--navy); }

.filter-chip.active {
  background: var(--navy-soft);
  border-color: var(--navy-soft);
  border-style: solid;
  color: #fff;
}
/* Small clickable thumbnail strip shown on cards/popups with 2+ photos */
.gallery-strip {
  display: flex;
  gap: 4px;
  padding: 6px 8px 0 8px;
  background: #fff;
}

.gallery-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.gallery-thumb:hover { opacity: 0.9; }

.gallery-thumb.active {
  opacity: 1;
  border-color: var(--emerald);
}

.hidden { display: none !important; }

/* ============================ LEAFLET LAYER CONTROL ======================== */

.leaflet-control-layers {
  border-radius: 10px !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--line) !important;
  font-family: 'Inter', sans-serif;
}

.leaflet-control-layers-toggle {
  width: 34px !important;
  height: 34px !important;
}

.leaflet-control-layers-expanded {
  padding: 10px 12px !important;
  color: var(--navy);
  font-size: 13px;
}
/* collapsible legend */
.legend-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;border:none;background:none;cursor:pointer;color:inherit;font:inherit;text-align:left}
.legend-toggle h4{margin:0}
.legend-chevron{font-size:14px;line-height:1;transition:transform .2s ease}
.legend .legend-body{display:block;margin:6px 0 0}
.legend.collapsed .legend-body{display:none}
.legend.collapsed .legend-chevron{transform:rotate(-90deg)}



/* ============================== RESPONSIVE ================================ */
@media (max-width:860px){

html,body{
    overflow:hidden;
    height:100vh;
    height:100dvh; /* accounts for mobile browser address/toolbar chrome */
}

.dashboard{
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
}

#map-wrapper{
    order:1;
    /* The base (desktop) rule sets "flex: 1" (basis 0%), which would otherwise
       override any height set here and force a 50/50 split with the sidebar.
       Explicitly reset flex-grow/shrink/basis so this fixed height actually wins. */
    flex: 0 0 34vh;
    flex: 0 0 34dvh; /* accounts for mobile browser address/toolbar chrome */
    min-height:180px;
    width:100%;
}

#sidebar{
    order:2;
    width:100%;
    min-width:0;
    max-height:none;
    flex:1;
    min-height:0;   /* CRITICAL: without this, a flex child won't shrink below its
                       content's natural height, so the sidebar (header + filters +
                       listings) grows taller than the space left below the map and
                       the extra content is clipped off-screen with no way to scroll
                       to it, since html/body have overflow:hidden. */
    border-right:none;
    border-top:1px solid var(--line);
}

#listings-container{
    flex:1;
    min-height:0;
    overflow-y:auto;
}

/* The sidebar "chrome" above the list — header, admin bar, both filter
   rows, and the results-count line — was eating most of the screen on
   phones (long title wrapping to 2 lines, generous desktop padding),
   leaving only a sliver for the actual property list below it. Locking
   each of these to a compact, fixed height (flex-shrink:0) and trimming
   their padding/font-size reclaims that space for #listings-container,
   which takes 100% of what's left and is the only thing that scrolls. */
.sidebar-header,
.admin-bar,
.filter-bar,
.listings-meta {
  flex-shrink: 0;
}

.sidebar-header {
  padding: 12px 16px 10px 16px;
}

.brand { gap: 10px; }

.brand-mark {
  width: 32px;
  height: 32px;
  font-size: 15px;
  border-radius: 8px;
}

.brand-text h1 {
  font-size: 14.5px;
  line-height: 1.25;
}

/* Tagline dropped on mobile — not worth the vertical space it costs. */
.brand-text p { display: none; }

.admin-toggle-btn {
  width: 30px;
  height: 30px;
}

.filter-bar {
  padding: 8px 16px 6px 16px;
  gap: 6px;
}

.filter-btn {
  padding: 7px 8px;
  font-size: 12px;
}

.filter-bar-secondary {
  padding-top: 2px;
  padding-bottom: 8px;
}

.filter-chip {
  padding: 6px 8px;
  font-size: 11px;
}

.listings-meta {
  padding: 6px 16px 4px 16px;
}

.admin-bar {
  padding: 10px 16px;
  flex-wrap: wrap;
}

.modal-box-wide { max-width: 100%; }

/* Bigger, easier-to-hit zoom buttons on touch screens, so a tap meant for
   the zoom control can't accidentally miss and land on the map itself. */
.leaflet-control-zoom a {
  width: 30px !important;
  height: 30px !important;
  line-height: 40px !important;
  font-size: 20px !important;
}




}

@media (max-width:480px){

#map-wrapper{
    flex: 0 0 26vh;
    flex: 0 0 26dvh;
    min-height:300px;
}

.sidebar-header{
    padding:10px 14px 8px;
}

.brand-mark{
    width:28px;
    height:28px;
    font-size:13px;
}

.brand-text h1{
    font-size:13.5px;
}

.filter-bar{
    padding:7px 14px 5px;
}

.filter-bar-secondary{
    padding-top:2px;
    padding-bottom:6px;
}

.listings-meta{
    padding:5px 14px 4px;
}

#listings-container{
    padding:8px 12px 20px;
}

.card-top-row{
    flex-direction:column;
    align-items:flex-start;
}
.leaflet-control-zoom a {
  width: 30px !important;
  height: 30px !important;
  line-height: 40px !important;
  font-size: 20px !important;
}

}
/* ===================== HWC additions (same palette/type) ===================== */
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sidebar-scroll::-webkit-scrollbar{width:6px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.filter-bar-secondary{flex-wrap:wrap}
.filter-bar-secondary .filter-chip{flex:0 1 auto}
#listings-container{flex:none;overflow:visible}
.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 24px;border-bottom:1px solid var(--line)}
.select-grid label{font-size:11.5px;font-weight:600;color:var(--slate)}
.select-grid select{display:block;width:100%;margin-top:4px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--off-white);color:var(--navy);font:500 13px 'Inter',sans-serif}
.select-grid select:focus{outline:none;border-color:var(--emerald)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px 4px}
.stat{background:var(--off-white);border:1px solid var(--line);border-radius:10px;padding:10px}
.stat b{display:block;font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--navy)}
.stat span{font-size:11px;color:var(--slate)}
.chart-card{margin:10px 16px 0;padding:12px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.chart-card h3{font-size:14px;margin-bottom:8px}
.chart-box{position:relative;height:170px}
.badge{flex-shrink:0;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;color:#fff}
.card-id{font-size:11px;font-weight:700;color:var(--slate-light);letter-spacing:.3px}
.card-thumb{height:110px;min-height:110px}
.info-rows{margin-top:8px;display:grid;gap:5px;font-size:12.5px;color:var(--slate)}
.info-rows div{display:flex;gap:8px}.info-rows i{font-style:normal;width:16px;text-align:center}
.info-rows strong{color:var(--navy);font-weight:600}
.sample-tag{font-size:10.5px;color:var(--slate-light);margin-top:8px}
.popup-card .gallery-main{height:140px;width:100%;object-fit:cover;display:block;background:var(--off-white)}
.popup-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px}
.legend{background:#fff;padding:8px 8px;border-radius:8px;box-shadow:var(--shadow-md);border:1px solid var(--line);font:6px 'Inter',sans-serif;color:var(--navy)}
.legend h4{margin:0 0 6px;font:600 12px 'Fraunces',serif}
.legend div{display:flex;align-items:center;gap:8px;margin:4px 0; font:9px 'Fraunces',serif}
.legend .sw{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.25)}
.legend .sq{width:14px;height:10px;background:rgba(245,158,11,.4);border:2px solid #D97706;border-radius:2px}
@media (max-width:860px){
  .select-grid{padding:10px 16px}.stats-grid{padding:10px 12px 2px}.stat b{font-size:16px}
  .chart-box{height:150px}.legend{font-size:11px;padding:7px 9px}
}