/* Æblerov — udendørs, én-hånds, høj kontrast. STPL-palette prioriteret for læsbarhed i sollys. */
:root{
  --ink:#0F0F0F;
  --bg:#FFFFFF;
  --panel:#F2F2F2;
  --muted:#6B6B6B;
  --line:#D9D9D9;
  --accent:#4A6B5C;
  --danger:#7C2E27;
  --own:#4A6B5C;
  --osm:#6B6B6B;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  overscroll-behavior:none;
  -webkit-tap-highlight-color: transparent;
}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background:var(--ink);
  color:#fff;
}
.brand{
  font-weight:500; letter-spacing:0.06em; font-size:16px;
}
.status-row{display:flex; align-items:center; gap:8px;}
.pill{
  font-size:12px; font-weight:500; padding:6px 10px; border-radius:20px;
  background:rgba(255,255,255,0.12); color:#fff;
}
.pill.offline{background:var(--danger); color:#fff;}
.pill.online{background:var(--accent); color:#fff;}
.pill-btn{
  font-size:13px; font-weight:500; padding:8px 12px; border-radius:20px;
  border:none; background:var(--accent); color:#fff; min-height:48px;
}

main{position:relative; height:100%;}
#map{
  position:absolute; inset:0;
  padding-top: calc(52px + var(--safe-top));
}
.leaflet-container{background:#eee;}

.fab{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom: calc(40vh + var(--safe-bottom));
  z-index:30;
  background:var(--ink); color:#fff;
  border:none; border-radius:999px;
  padding:18px 28px; font-size:17px; font-weight:500; letter-spacing:0.02em;
  min-height:56px; min-width:200px;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.fab:active{background:var(--accent);}

.bottom-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:25;
  height:38vh;
  background:#fff;
  border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  box-shadow:0 -4px 16px rgba(0,0,0,0.15);
  display:flex; flex-direction:column;
  padding-bottom: var(--safe-bottom);
}
.sheet-handle{
  width:40px; height:5px; border-radius:3px; background:var(--line);
  margin:10px auto 4px;
}
.sheet-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 16px 10px; font-weight:500; letter-spacing:0.04em;
  border-bottom:1px solid var(--line);
  color:var(--accent);
  font-size:13px;
}
.link-btn{
  background:none; border:none; color:var(--accent); font-size:13px; font-weight:500;
  padding:8px; min-height:48px;
}
.tree-list{overflow-y:auto; flex:1; padding:4px 8px;}
.tree-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 8px; border-bottom:1px solid var(--line);
  min-height:48px;
}
.tree-row .name{font-weight:500;}
.tree-row .meta{color:var(--muted); font-size:12px;}
.tree-row .badge{
  font-size:11px; font-weight:500; padding:3px 8px; border-radius:10px;
  background:var(--panel); color:var(--muted);
}
.tree-row .badge.unsynced{background:var(--danger); color:#fff;}

/* Formular (dialog) */
/* Non-modal (dialog.show(), ikke showModal()) med vilje: kortet skal forblive
   interaktivt bagved, så pin'en kan trækkes mens formularen er åben. */
dialog{
  border:none; border-top:1px solid var(--line); border-radius:16px 16px 0 0; padding:0;
  width:100%; max-width:100%;
  margin:auto 0 0 0;
  position:fixed; left:0; right:0; bottom:0; top:auto;
  max-height:56vh; overflow-y:auto;
  box-shadow:0 -6px 20px rgba(0,0,0,0.25);
  z-index:40;
}
dialog::backdrop{background:transparent;}
form{padding:20px 20px calc(20px + var(--safe-bottom));}
h2{margin:0 0 14px; font-weight:500; letter-spacing:0.02em;}
label{
  display:block; margin-bottom:14px; font-size:13px; font-weight:500; color:var(--muted);
}
input, select, textarea{
  width:100%; margin-top:6px; padding:12px; font-size:16px;
  border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); font-family:inherit;
  min-height:48px;
}
textarea{min-height:60px;}
.gps-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); border-radius:10px; padding:10px 12px; margin-bottom:16px;
  font-size:13px; color:var(--muted);
}
.small-btn{
  border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:8px 12px; font-size:13px; min-height:48px; font-weight:500;
}
.place-actions{display:flex; gap:8px; margin-bottom:6px;}
.place-actions .small-btn{flex:1;}
.hint{font-size:12px; color:var(--muted); margin:0 0 16px;}
.lov-note{background:var(--panel); border-radius:8px; padding:10px 12px; margin:-4px 0 16px;}
.kontakt-felter{background:var(--panel); border-radius:10px; padding:12px; margin:-4px 0 16px;}
.kontakt-felter label{margin-bottom:10px;}
.kontakt-felter label:last-child{margin-bottom:0;}
.foto-preview{width:100%; border-radius:10px; margin-top:8px; max-height:200px; object-fit:cover;}
.form-actions{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;}
.primary-btn, .ghost-btn, .danger-btn{
  flex:1; min-height:52px; border-radius:10px; font-size:16px; font-weight:500;
  border:none;
}
.primary-btn{background:var(--ink); color:#fff;}
.ghost-btn{background:var(--panel); color:var(--ink);}
.danger-btn{background:var(--danger); color:#fff; flex-basis:100%;}
.hidden{display:none !important;}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(40vh + 70px);
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px;
  font-size:14px; z-index:50;
}

/* Leaflet pin farver via divIcon-klasser */
.pin-own{background:var(--own); border:2px solid #fff; border-radius:50%; width:16px; height:16px; box-shadow:0 0 0 1px var(--own);}
.pin-osm{background:var(--osm); border:2px solid #fff; border-radius:50%; width:14px; height:14px; box-shadow:0 0 0 1px var(--osm);}
/* Orchard-centroider fra OSM — privat/uafklaret adgang. ALDRIG samme visuelle vægt som plukkeklare træer. */
.pin-orchard{
  background:repeating-linear-gradient(45deg, #fff, #fff 3px, var(--line) 3px, var(--line) 6px);
  border:2px dashed var(--muted); border-radius:3px; width:16px; height:16px;
}
.legend{
  position:fixed; left:10px; z-index:15; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font-size:11px; color:var(--muted);
  top: calc(60px + var(--safe-top)); line-height:1.7;
}
.legend .dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle;}
.legend .sq{display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:middle;
  background:repeating-linear-gradient(45deg, #fff, #fff 2px, var(--line) 2px, var(--line) 4px); border:1.5px dashed var(--muted);}