/* MB Commercial Map — styles */
:root{
  --green:#1a9850;
  --amber:#e8a13a;
  --gray:#8a8f98;
  --purple:#7c5cd6;
  --ink:#1c2733;
  --muted:#6b7684;
  --line:#e2e6ea;
  --bg:#ffffff;
  --hover:#f4f6f8;
  --active:#e8f1fb;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  font-size:14px;
}
#app{display:flex;height:100vh;height:100dvh}

/* ---------- Sidebar ---------- */
#sidebar{
  position:relative;
  width:380px;min-width:380px;
  display:flex;flex-direction:column;
  background:var(--bg);
  border-right:1px solid var(--line);
  z-index:600; /* above Leaflet panes inside #map */
}
#sidebar-head{padding:12px 14px 8px;border-bottom:1px solid var(--line)}
#sidebar-head h1{font-size:17px;margin:0 0 6px;font-weight:650}
.stats{font-size:12.5px;color:var(--muted);line-height:1.5}
.stats strong{color:var(--ink)}
.stats .st-contact{color:var(--green);font-weight:600}
.stats .st-owner{color:#c07f1d;font-weight:600}
.stats .st-gap{color:var(--muted);font-weight:600}

/* ---------- Filters ---------- */
#filters-toggle{
  display:none;
  width:100%;padding:9px 14px;text-align:left;
  background:var(--bg);border:none;border-bottom:1px solid var(--line);
  font:inherit;font-weight:600;cursor:pointer;
}
#filters{padding:10px 14px;border-bottom:1px solid var(--line)}
#filters.collapsed{display:none}
.f-row{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.f-row>span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.f-row input[type="search"],.f-row select{
  font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;width:100%;
}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.f-check{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1;cursor:pointer}
.f-check input{width:16px;height:16px;margin:0}
.f-check>span{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);font-weight:500}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin-top:2px}
.legend .lg{display:inline-flex;align-items:center;gap:5px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.dot-contact{background:var(--green)}
.dot-owner_only{background:var(--amber)}
.dot-gap{background:var(--gray)}
.dot-cu{background:var(--purple);border-radius:2px;transform:rotate(45deg)}
.dot-backup{background:#fff;border:2px solid #222;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #222;width:8px;height:8px}

/* ---------- List ---------- */
#list-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
#list{list-style:none;margin:0;padding:0}
#list li{
  display:flex;gap:9px;align-items:flex-start;
  padding:9px 14px;border-bottom:1px solid var(--line);cursor:pointer;
}
#list li:hover{background:var(--hover)}
#list li.active{background:var(--active)}
#list li .sdot{margin-top:5px}
#list li .nomap{font-size:10px;color:#b3541e;font-weight:600;white-space:nowrap}
.row-main{min-width:0}
.row-addr{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.row-sub{font-size:12px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
#list-empty{padding:16px 14px;color:var(--muted)}
.hidden{display:none !important}

/* ---------- Detail panel ---------- */
#detail{
  position:absolute;inset:0;background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px 24px;
}
#detail-close{
  font:inherit;font-weight:600;color:#1668c4;background:none;border:1px solid var(--line);
  border-radius:6px;padding:7px 11px;cursor:pointer;margin-bottom:12px;
}
#detail-body h2{font-size:18px;margin:0 0 2px;line-height:1.3;overflow-wrap:anywhere}
.d-zip{color:var(--muted);margin-bottom:10px}
.chip{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:2.5px 8px;border-radius:999px;color:#fff;vertical-align:middle;
}
.chip-contact{background:var(--green)}
.chip-owner_only{background:var(--amber);color:#4a3405}
.chip-gap{background:var(--gray)}
.chip-cu{background:var(--purple)}
.chip-backup{background:#222}
.d-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.d-field{margin-bottom:10px}
.d-field .k{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.d-field .v{overflow-wrap:anywhere;line-height:1.45}
.d-field a{color:#1668c4;text-decoration:none;font-weight:550}
.d-field a:hover{text-decoration:underline}
.phone-list{display:flex;flex-direction:column;gap:3px}
.d-notes{
  white-space:pre-wrap;overflow-wrap:anywhere;
  background:var(--hover);border:1px solid var(--line);border-radius:6px;
  padding:9px 10px;font-size:12.5px;line-height:1.5;
  max-height:320px;overflow-y:auto;
}

/* ---------- Map ---------- */
#map{flex:1;min-width:0}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  #app{flex-direction:column}
  #map{order:1;flex:none;height:55vh;height:55dvh;width:100%}
  #sidebar{
    order:2;width:100%;min-width:0;flex:1;min-height:0;
    border-right:none;border-top:1px solid var(--line);
  }
  #filters-toggle{display:block}
  #detail{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:78vh;max-height:78dvh;
    border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;
    box-shadow:0 -6px 24px rgba(0,0,0,.25);
    z-index:1200;
  }
}

/* ---------- v2: mode badge, settings, add/edit ---------- */
.head-row{display:flex;align-items:center;gap:8px}
.head-row h1{flex:1;min-width:0}
.badge{
  font-size:11px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);
}
.badge-live{background:#e2f4e8;color:#146c3a;border-color:#bfe6cd}
.badge-off{background:#fdf1de;color:#8a5a10;border-color:#f0dcb4}
#settings-btn{
  font:inherit;font-size:15px;line-height:1;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;color:var(--ink);
}
#settings-btn:hover{background:var(--hover)}
.offline-hint{font-size:12px;color:#8a5a10;margin-top:5px}
.load-note{font-size:12px;color:#b3541e;margin-top:3px}

.add-btn{
  font:inherit;font-weight:650;cursor:pointer;
  margin:10px 14px 0;padding:9px 12px;width:calc(100% - 28px);
  background:var(--green);color:#fff;border:none;border-radius:7px;
}
.add-btn:hover{filter:brightness(1.07)}

#settings{
  position:absolute;inset:0;background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px 24px;z-index:700;
}
#settings h2{font-size:17px;margin:0 0 8px}
#settings-close{
  font:inherit;font-weight:600;color:#1668c4;background:none;border:1px solid var(--line);
  border-radius:6px;padding:7px 11px;cursor:pointer;margin-bottom:12px;
}
.set-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 12px}

.edit-btn{
  font:inherit;font-weight:650;cursor:pointer;
  padding:8px 14px;margin-bottom:12px;
  background:#1668c4;color:#fff;border:none;border-radius:7px;
}
.edit-btn:hover{filter:brightness(1.08)}
.saved-flash{
  background:#e2f4e8;color:#146c3a;border:1px solid #bfe6cd;
  border-radius:7px;padding:8px 11px;font-weight:600;font-size:13px;
  margin-bottom:12px;
}

#edit-form h2{font-size:17px;margin:0 0 10px}
.ef-row{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.ef-row>span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ef-row input,.ef-row select,.ef-row textarea{
  font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;width:100%;
}
.ef-row textarea{resize:vertical;line-height:1.45}
.ef-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.ef-geo{display:flex;align-items:center;gap:10px;margin:2px 0 6px;flex-wrap:wrap}
#ef-geo-btn{
  font:inherit;font-weight:600;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 11px;
}
#ef-geo-btn:hover{background:var(--hover)}
.ef-coords{font-size:12px;color:var(--muted)}
.ef-note{font-size:12.5px;color:var(--muted);margin:0 0 8px;min-height:0}
.ef-note:empty{display:none}
.ef-err{font-size:13px;color:#b3261e;margin:0 0 8px}
.ef-err:empty{display:none}
.ef-actions{display:flex;gap:10px;margin-top:4px}
.ef-actions button{
  font:inherit;font-weight:650;cursor:pointer;border-radius:7px;padding:9px 16px;
}
#ef-save,#set-save{background:var(--green);color:#fff;border:none}
#ef-save:hover,#set-save:hover{filter:brightness(1.07)}
#ef-save:disabled,#set-save:disabled{opacity:.55;cursor:wait;filter:none}
#ef-cancel,#set-disconnect{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
#ef-cancel:hover,#set-disconnect:hover{background:var(--hover)}

/* Settings panel as a bottom sheet on mobile (after the base #settings
   rule above so it wins the cascade at equal specificity) */
@media (max-width:820px){
  #settings{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:78vh;max-height:78dvh;
    border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;
    box-shadow:0 -6px 24px rgba(0,0,0,.25);
    z-index:1200;
  }
}

/* ---------- v5: view/color segmented controls ---------- */
.seg-row{margin-top:2px}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{
  flex:1;font:inherit;font-size:13px;font-weight:600;
  padding:7px 4px;background:#fff;border:none;border-right:1px solid var(--line);
  cursor:pointer;color:var(--muted);
}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink);color:#fff}
.seg button:hover:not(.on){background:var(--hover)}

/* ---------- v5: map legend control (bottom-right, on the map) ---------- */
.map-legend{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,.28);
  padding:8px 10px;font-size:12px;color:var(--ink);
  max-width:215px;line-height:1.3;
}
.map-legend .lg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.map-legend .lg-title{font-weight:700;font-size:12px}
.map-legend .lg-toggle{
  font:inherit;font-weight:700;line-height:1;color:var(--ink);
  background:none;border:1px solid var(--line);border-radius:5px;
  width:20px;height:20px;padding:0;cursor:pointer;flex:none;
}
.map-legend .lg-toggle:hover{background:var(--hover)}
.map-legend .lg-body{margin-top:6px}
.map-legend .lg-row{display:flex;align-items:center;gap:7px;margin:3px 0}
.map-legend .sw{
  width:14px;height:14px;flex:none;border-radius:3px;
  border:1px solid rgba(0,0,0,.35);
}
.map-legend .sw-ring{
  width:11px;height:11px;background:#f4f6f8;
  border:2.5px solid #fff;box-shadow:0 0 0 1.5px #222, inset 0 0 0 3px #9aa0a6;
}
.map-legend .sw-missing{background:rgba(224,49,49,.08);border:2px solid #e03131}
.map-legend .lg-check{
  display:flex;align-items:center;gap:7px;
  margin-top:7px;padding-top:7px;border-top:1px solid var(--line);
  cursor:pointer;font-weight:600;
}
.map-legend .lg-check input{width:15px;height:15px;margin:0;flex:none}

/* ---------- v5: county (missing) parcel detail ---------- */
.chip-missing{background:#e03131}
.chip-regular{background:#5d6d7e}
.noparcel-note{
  font-size:12.5px;color:#b3541e;font-weight:600;
  margin:0 0 10px;
}
.chip-zoning{background:#5d6d7e}
.county-add-btn{
  font:inherit;font-weight:650;cursor:pointer;
  width:100%;padding:10px 12px;margin:2px 0 10px;
  background:var(--green);color:#fff;border:none;border-radius:7px;
}
.county-add-btn:hover:not(:disabled){filter:brightness(1.07)}
.county-add-btn:disabled{opacity:.55;cursor:not-allowed}
.county-note{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 8px}

/* ---------- prospecting notes editor (record panel) ---------- */
.notes-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.notes-edit-btn{
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;flex:none;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;color:#1668c4;
}
.notes-edit-btn:hover:not(:disabled){background:var(--hover)}
.notes-edit-btn:disabled{opacity:.55;cursor:not-allowed}
.notes-empty{color:var(--muted);font-style:italic}
.notes-qa{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.notes-input{
  font:inherit;font-size:13px;line-height:1.45;
  padding:7px 9px;border:1px solid var(--line);border-radius:6px;
  background:#fff;width:100%;resize:vertical;
}
.notes-add-btn{
  font:inherit;font-weight:650;cursor:pointer;
  padding:8px 12px;background:var(--green);color:#fff;border:none;border-radius:7px;
}
.notes-add-btn:hover:not(:disabled){filter:brightness(1.07)}
.notes-add-btn:disabled{opacity:.55;cursor:not-allowed}
.notes-btnrow{display:flex;gap:8px;margin-top:6px}
.notes-btnrow .notes-add-btn{flex:1}
.notes-cancel-btn{
  font:inherit;font-weight:600;cursor:pointer;
  padding:8px 12px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;
}
.notes-cancel-btn:hover:not(:disabled){background:var(--hover)}
.notes-cancel-btn:disabled{opacity:.55;cursor:not-allowed}
.leaflet-control-attribution{font-size:9px;line-height:1.2;background:rgba(255,255,255,0.55);color:#555;padding:0 4px}
.leaflet-control-attribution a{color:#555}